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

Changed checkboxes to radio buttons, since it is single choice.

Browse Source 
Moved css to seperate css file.
Made questions clickable not just the checkbox.
Reworked java code.
Work in Progress...
This commit is contained in:
Benedikt - Desktop
2019-01-22 12:15:25 +01:00
committed by Nanne Baars
parent df49fcdb39
commit 0915bf3d7f
4 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
webgoat-container/src/main/resources/static/css/quiz.css Normal file
View 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;
}

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

@ -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) + ".&nbsp;" + quest.text + "</p>";
html += "<div id='question_" + j + "' class='quiz_question' name='question'><p>" + (j+1) + ".&nbsp;" + 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>";
});