Reworked and styled quiz

webgoat-container/src/main/resources/static/css/quiz.css

@@ -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;
+    border: solid 2px #ddf7dd;
-    background: #b0dcb0;
+    background: #ddf7dd;
+    transition: all 300ms ease-in-out;
 }
 
 #q_container .quiz_question.incorrect {
-    border: solid 3px red;
+    border: solid 2px #f5d3d3;
-    background: #e8b6b6;
+    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;
 }

webgoat-container/src/main/resources/static/js/quiz.js

@@ -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>";
                 });
@@ -36,3 +36,24 @@ $(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

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

@@ -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;
+    }
+
 }

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

@@ -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>