Changed checkboxes to radio buttons, since it is single choice.
Moved css to seperate css file. Made questions clickable not just the checkbox. Reworked java code. Work in Progress...
This commit is contained in:
parent
df49fcdb39
commit
0915bf3d7f
19
webgoat-container/src/main/resources/static/css/quiz.css
Normal file
19
webgoat-container/src/main/resources/static/css/quiz.css
Normal file
@ -0,0 +1,19 @@
|
||||
#q_container .quiz_question {
|
||||
border: solid 1px;
|
||||
padding: 4px;
|
||||
margin: 5px 2px 5px 2px;
|
||||
}
|
||||
|
||||
#q_container .quiz_question label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#q_container .quiz_question.correct {
|
||||
border: solid 3px green;
|
||||
background: #b0dcb0;
|
||||
}
|
||||
|
||||
#q_container .quiz_question.incorrect {
|
||||
border: solid 3px red;
|
||||
background: #e8b6b6;
|
||||
}
|
@ -4,7 +4,8 @@ Basic steps for implementing a quiz:
|
||||
1. HTML: include this js script file for the assignment, build a basic form, where you include a #q_container div element, create a submit button with "Quiz_solutions" as name attribute
|
||||
2. JSON: Create a JSON-file with the name questions_lesson_name.json, include a span element #quiz_id with lesson_name as the data-quiz_id attribute. Build a JSON file like the one in sql-injection -> resources -> js
|
||||
3. Java: Create a normal assignment that has a String[] where the correct solutions are contained in the form of "Solution [i]", replace [i] with the position of the solution beginning at 1.
|
||||
The request parameters will contain the answer in full text with "Solution [i]" in front of the text. Use them to check the answers validity.
|
||||
The request parameters will contain the answer in full text with "Solution [i]" in front of the text. Use them to check the answers validity.
|
||||
4. CSS: include the css/quiz.css file for styling.
|
||||
**/
|
||||
|
||||
$(function () {
|
||||
@ -21,11 +22,11 @@ $(function () {
|
||||
let html = "";
|
||||
jQuery.each(questionsObj, function(i, obj) {
|
||||
jQuery.each(obj, function(j, quest) {
|
||||
html += "<div id='question_" + j + "' class='quiz_question' name='question' style='border: solid 1px; padding: 4px; margin: 5px 2px 5px 2px'><p>" + (j+1) + ". " + quest.text + "</p>";
|
||||
html += "<div id='question_" + j + "' class='quiz_question' name='question'><p>" + (j+1) + ". " + quest.text + "</p>";
|
||||
html += "<fieldset>";
|
||||
jQuery.each(quest.solutions, function(k, solution) {
|
||||
solution = "Solution " + k + ": " + solution;
|
||||
html += '<input type="checkbox" name="question_' + j +'_solution" value="' + solution + '">' + solution + '<br>';
|
||||
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 += "</fieldset></div>";
|
||||
});
|
||||
|
@ -29,26 +29,26 @@ public class SqlInjectionQuiz extends AssignmentEndpoint {
|
||||
@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 {
|
||||
boolean correct = false;
|
||||
String[][] solutionsInput = {question_0_solution, question_1_solution, question_2_solution, question_3_solution, question_4_solution};
|
||||
int counter = 0;
|
||||
for(String[] sa : solutionsInput) {
|
||||
for(String s : sa) {
|
||||
if(sa.length == 1 && s.contains(this.solutions[counter])) {
|
||||
correct = true;
|
||||
break;
|
||||
} else {
|
||||
correct = false;
|
||||
continue;
|
||||
}
|
||||
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++;
|
||||
} else {
|
||||
// answer incorrect
|
||||
feedbackMessage += "Question " + (i + 1) + " (<span class='feedback-negative'>incorrect</span>):<br><span class='feedback-negative' style='display: block'>" + givenAnswers[i] + "</span>";
|
||||
}
|
||||
if(!correct) break;
|
||||
counter++;
|
||||
}
|
||||
if(correct) {
|
||||
|
||||
if(correctAnswers == solutions.length) {
|
||||
return trackProgress(success().build());
|
||||
} else {
|
||||
return trackProgress(failed().build());
|
||||
return trackProgress(failed().output(feedbackMessage).build());
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2,6 +2,7 @@
|
||||
|
||||
<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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user