dubey/WebGoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked and styled quiz

Browse Source
This commit is contained in:
Benedikt - Desktop 2019-01-22 17:28:23 +01:00 committed by Nanne Baars
parent 0915bf3d7f
commit 27a61f0f70
4 changed files with 88 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
webgoat-container/src/main/resources/static/css/quiz.css
View File

@ -1,19 +1,67 @@
.attack-container.quiz {
background: none;
border: none;
}
#q_container p {
font-weight: bold;
}
#q_container .quiz_question {
border: solid 1px;
border: solid 2px white;
padding: 4px;
margin: 5px 2px 5px 2px;
margin: 5px 2px 20px 2px;
box-shadow: 0px 1px 3px 1px #e4e4e4;
}
#q_container .quiz_question label {
font-weight: normal;
position: relative;
top: -2px;
}
#q_container .quiz_question input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #dadada;
background: white;
width: 15px;
height: 15px;
margin-right: 6px;
}
#q_container .quiz_question input:checked {
background: #51b7ff;
}
#q_container .quiz_question input:hover,
#q_container .quiz_question label:hover {
cursor: pointer;
}
#q_container .quiz_question.correct {
border: solid 3px green;
background: #b0dcb0;
border: solid 2px #ddf7dd;
background: #ddf7dd;
transition: all 300ms ease-in-out;
}
#q_container .quiz_question.incorrect {
border: solid 3px red;
background: #e8b6b6;
border: solid 2px #f5d3d3;
background: #f5d3d3;
transition: all 300ms ease-in-out;
}
input[name='Quiz_solutions'] {
background: white;
border: 1px solid gray;
padding: 7px 10px;
transition: 300ms all ease-in-out;
}
input[name='Quiz_solutions']:hover {
background: #51b7ff;
color: white;
border-color: white;
transition: 300ms all ease-in-out;
}

25
webgoat-container/src/main/resources/static/js/quiz.js
View File

@ -26,7 +26,7 @@ $(function () {
html += "<fieldset>";
jQuery.each(quest.solutions, function(k, solution) {
solution = "Solution " + k + ": " + solution;
html += '<input id="question_' + j + '_' + k + '_input" type="radio" name="question_' + j +'_solution" value="' + solution + '"><label for="question_' + j + '_' + k + '_input">' + solution + '</label><br>';
html += '<input id="question_' + j + '_' + k + '_input" type="radio" name="question_' + j +'_solution" value="' + solution + '" required><label for="question_' + j + '_' + k + '_input">' + solution + '</label><br>';
});
html += "</fieldset></div>";
});
@ -35,4 +35,25 @@ $(function () {
}
}
client.send();
});
});
$(document).ready( () => {
$("#q_container").closest(".attack-container").addClass("quiz");
$("#q_container").closest("form").on("submit", function(e) {
setTimeout(getFeedback, 200, this);
}); // end listener
}); // end ready
function getFeedback(context) {
$.ajax({
url: $(context).attr("action")
}).done( (result) => {
if (!result) return;
for(let i=0; i<result.length; i++) {
if (result[i] === true)
$("#q_container .quiz_question:nth-of-type(" + (i+1) + ")").removeClass("incorrect").addClass("correct");
else if (result[i] === false)
$("#q_container .quiz_question:nth-of-type(" + (i+1) + ")").removeClass("correct").addClass("incorrect");
}
}); // end ajax-done
} // end getFeedback

14
webgoat-lessons/sql-injection/src/main/java/org/owasp/webgoat/plugin/advanced/SqlInjectionQuiz.java
View File

@ -25,31 +25,37 @@ import java.sql.Statement;
public class SqlInjectionQuiz extends AssignmentEndpoint {
String[] solutions = {"Solution 4", "Solution 3", "Solution 2", "Solution 3", "Solution 4"};
boolean[] guesses = new boolean[solutions.length];
@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public AttackResult completed(@RequestParam String[] question_0_solution, @RequestParam String[] question_1_solution, @RequestParam String[] question_2_solution, @RequestParam String[] question_3_solution, @RequestParam String[] question_4_solution) throws IOException {
int correctAnswers = 0;
String feedbackMessage = "";
String[] givenAnswers = {question_0_solution[0], question_1_solution[0], question_2_solution[0], question_3_solution[0], question_4_solution[0]};
for(int i = 0; i < solutions.length; i++) {
if (givenAnswers[i].contains(solutions[i])) {
// answer correct
feedbackMessage += "Question " + (i + 1) + " (<span class='feedback-positive'>correct</span>):<br><span class='feedback-positive' style='display: block'>" + givenAnswers[i] + "</span>";
correctAnswers++;
guesses[i] = true;
} else {
// answer incorrect
feedbackMessage += "Question " + (i + 1) + " (<span class='feedback-negative'>incorrect</span>):<br><span class='feedback-negative' style='display: block'>" + givenAnswers[i] + "</span>";
guesses[i] = false;
}
}
if(correctAnswers == solutions.length) {
return trackProgress(success().build());
} else {
return trackProgress(failed().output(feedbackMessage).build());
return trackProgress(failed().build());
}
}
@RequestMapping(method = RequestMethod.GET)
@ResponseBody
public boolean[] getResults() {
return this.guesses;
}
}

2
webgoat-lessons/sql-injection/src/main/resources/html/SqlInjectionAdvanced.html
View File

@ -2,7 +2,6 @@
<html xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" type="text/css" th:href="@{/lesson_css/assignments.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/quiz.css}"/>
<div class="lesson-page-wrapper">
<div class="adoc-content" th:replace="doc:SqlInjectionAdvanced_plan.adoc"></div>
@ -164,6 +163,7 @@
<div class="lesson-page-wrapper">
<span id="quiz_id" data-quiz_id="sql_injection"></span>
<link rel="stylesheet" type="text/css" th:href="@{/css/quiz.css}"/>
<script th:src="@{/js/quiz.js}" language="JavaScript"></script>
<link rel="import" type="application/json" th:href="@{/lesson_js/questions.json}"/>
<div class="adoc-content" th:replace="doc:SqlInjection_quiz.adoc"></div>