diff --git a/webgoat-container/src/main/resources/static/css/quiz.css b/webgoat-container/src/main/resources/static/css/quiz.css new file mode 100644 index 000000000..6f20d09ad --- /dev/null +++ b/webgoat-container/src/main/resources/static/css/quiz.css @@ -0,0 +1,67 @@ +.attack-container.quiz { + background: none; + border: none; +} + +#q_container p { + font-weight: bold; +} + +#q_container .quiz_question { + border: solid 2px white; + padding: 4px; + 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 2px #ddf7dd; + background: #ddf7dd; + transition: all 300ms ease-in-out; +} + +#q_container .quiz_question.incorrect { + 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; +} \ No newline at end of file diff --git a/webgoat-container/src/main/resources/static/js/quiz.js b/webgoat-container/src/main/resources/static/js/quiz.js new file mode 100644 index 000000000..01551504b --- /dev/null +++ b/webgoat-container/src/main/resources/static/js/quiz.js @@ -0,0 +1,59 @@ +/** +This is the basic javascript that can be used for a quiz assignment. It is made for single choice quizzes (tho a multiple choice extension should be easy to make). +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. +4. CSS: include the css/quiz.css file for styling. +**/ + +$(function () { + var json = ""; + var client = new XMLHttpRequest(); + var quiz_id = document.getElementById("quiz_id").getAttribute("data-quiz_id"); + client.open('GET', '/WebGoat/lesson_js/questions_' + quiz_id + '.json'); + client.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + json += client.responseText; + console.log("entry"); + let questionsJson = json; + var questionsObj = JSON.parse(questionsJson); + let html = ""; + jQuery.each(questionsObj, function(i, obj) { + jQuery.each(obj, function(j, quest) { + html += "

" + (j+1) + ". " + quest.text + "

"; + html += "
"; + jQuery.each(quest.solutions, function(k, solution) { + solution = "Solution " + k + ": " + solution; + html += '
'; + }); + html += "
"; + }); + }); + document.getElementById("q_container").innerHTML = html; + } + } + 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