Function to check if the answer is right
<script> var validate = function(scelta, number) { form = "d" + number; span = "a" + number; var formname = document.getElementById(form); var spanname = document.getElementById(span); if (scelta == esatte[number-1]) { formname.innerHTML ="<div style='background-color:lightgreen'>Esatto</div>"; spanname.innerHTML = scelta;} else { formname.innerHTML = "<div style='background-color:pink'><p>Sbagliato</p></div>";}};
In this function we got 2 arguments:
- scelta
- number
scelta is the text of the radiobutton we choose as the right answer that will be compared to the right answer.
number is a number that is used to distinguish the elements on the html belonging to different questions.
form and span will be strings used to get the form and the span element of a particular question.
The if statement checks if the user choice is right, showing a message in green in the first case.
The code to print the form elements for the user input
var startQuiz = function(){ counter = 1; esatte = []; for (q in questions){ esatte.push(questions[q][1][0]); // Randomizer questions[q][1].sort(function() { return .5 - Math.random(); }); // create the tags for the radiobutton depending on how many questions are there risposte = ""; for (r in questions[q][1]){ risposte += "<input type='radio' name='choice" + counter + "' value='" + questions[q][1][r] + "'>" + questions[q][1][r] console.log("HEllo" + risposte); }; document.write(`<div style="background-color:lightblue"> <h1>` + questions[q][0] + ` <span id='a`+counter+`'>...</span></h1><br> <form id="d`+counter+`">` + risposte + ` <br> <input type="submit" value="submit" onclick="validate(choice`+counter+`.value, `+counter+`)"> </form> </div> `); console.log(counter); counter += 1; } };
The main loop iterates the questions (you can see then below). For each group of answer to each question the code shuffle their order, after the memorization of the right answer.
Then he shows the radiobuttons for each answer(made with a for loops to have the chance to have as many radiobuttons you want), after he showed the question. At the end there is the button that, if clicked, sends the choice you made and the number of the question to the function validate that we’ve seen above.
The data with the questions and answer
Here is your job: to write questions and answer in the way you see in this example. The right answer is the first. The code will shuffle them (in startQuiz).
// ========= QUESTIONS AND ANSWERS: FIRST IS RIGHT questions = [ ["Tuples are mutable", [ "False", "True", ]], ["A List contains items", [ "mutable", "immutable" ],] ]; startQuiz();
The whole code
At this point everything is right and you will see this image in the browser when you launch this code.
Here’s the code in his full length:
<script> var validate = function(scelta, number) { form = "d" + number; span = "a" + number; var formname = document.getElementById(form); var spanname = document.getElementById(span); if (scelta == esatte[number-1]) { formname.innerHTML ="<div style='background-color:lightgreen'>Esatto</div>"; spanname.innerHTML = scelta;} else { formname.innerHTML = "<div style='background-color:pink'><p>Sbagliato</p></div>";}}; var startQuiz = function(){ counter = 1; esatte = []; for (q in questions){ esatte.push(questions[q][1][0]); // Randomizer questions[q][1].sort(function() { return .5 - Math.random(); }); // create the tags for the radiobutton depending on how many questions are there risposte = ""; for (r in questions[q][1]){ risposte += "<input type='radio' name='choice" + counter + "' value='" + questions[q][1][r] + "'>" + questions[q][1][r] console.log("HEllo" + risposte); }; document.write(`<div style="background-color:lightblue"> <h1>` + questions[q][0] + ` <span id='a`+counter+`'>...</span></h1><br> <form id="d`+counter+`">` + risposte + ` <br> <input type="submit" value="submit" onclick="validate(choice`+counter+`.value, `+counter+`)"> </form> </div> `); console.log(counter); counter += 1; } }; // ========= QUESTIONS AND ANSWERS: FIRST IS RIGHT questions = [ ["Tuples are mutable", [ "False", "True", ]], ["A List contains items", [ "mutable", "immutable" ],] ]; startQuiz(); </script>
Whit this code you can easily create a quiz to be used into your html page, without caring about the browser elements (or widgets), just adding the questions and the answers. You do not have to care to shuffle the question either, making the job very easy. In another post we will see how to make the things even easier using our favourite language: Python. We will take the data from a text file and then create the html file, so that we do not have to waste time with parenthesis, apostrophes and other struggles like those. We will also improve the code with some features like score and even time… maybe.
To be continued…