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

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

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

View File

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

View File

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