From 0915bf3d7f0953b6f9ca4af286d7274432289ce8 Mon Sep 17 00:00:00 2001
From: Benedikt - Desktop <benedikt.stuhrmann@gmail.com>
Date: Tue, 22 Jan 2019 12:15:25 +0100
Subject: [PATCH] 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...

---
 .../src/main/resources/static/css/quiz.css    | 19 +++++++++++
 .../src/main/resources/static/js/quiz.js      |  7 ++--
 .../plugin/advanced/SqlInjectionQuiz.java     | 32 +++++++++----------
 .../resources/html/SqlInjectionAdvanced.html  |  1 +
 4 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 webgoat-container/src/main/resources/static/css/quiz.css

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..0995d4897
--- /dev/null
+++ b/webgoat-container/src/main/resources/static/css/quiz.css
@@ -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;
+}
\ 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
index e1f844063..69a257c7f 100644
--- a/webgoat-container/src/main/resources/static/js/quiz.js
+++ b/webgoat-container/src/main/resources/static/js/quiz.js
@@ -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>";
                 });
diff --git a/webgoat-lessons/sql-injection/src/main/java/org/owasp/webgoat/plugin/advanced/SqlInjectionQuiz.java b/webgoat-lessons/sql-injection/src/main/java/org/owasp/webgoat/plugin/advanced/SqlInjectionQuiz.java
index 8040b4fe6..b4ca92f2c 100644
--- a/webgoat-lessons/sql-injection/src/main/java/org/owasp/webgoat/plugin/advanced/SqlInjectionQuiz.java
+++ b/webgoat-lessons/sql-injection/src/main/java/org/owasp/webgoat/plugin/advanced/SqlInjectionQuiz.java
@@ -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());
         }
     }
 
diff --git a/webgoat-lessons/sql-injection/src/main/resources/html/SqlInjectionAdvanced.html b/webgoat-lessons/sql-injection/src/main/resources/html/SqlInjectionAdvanced.html
index 304e7fdbc..4d6d4a10a 100644
--- a/webgoat-lessons/sql-injection/src/main/resources/html/SqlInjectionAdvanced.html
+++ b/webgoat-lessons/sql-injection/src/main/resources/html/SqlInjectionAdvanced.html
@@ -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>