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

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>";
                 });
@@ -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