Python and Javascript: a quiz made in Javascript

Today we are going to start a post about javascript. Why a post about javascript into Pythonprogramming.altervista.org? Well, I think it is a good thing to know javascript, because it is, together with Python, one of the most used programming language in the World and because it can occur that you may have to use it. Another reason is… the more I know the best it is, right? Sometimes it is better to have more options, you could decide what language to use if you can do it in different ways. Sometimes I have showed how to create html code with Python to make tables, because it made your work faster. So, there are many reason for this and today I am gonna show you a very simple code to create a quiz (test) in javascript. In another post we will see how we can use Python to make this process even easier mixing Python and Javascript, like I did with html code for tables using Python. Let’s go.

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…

 

Published by pythonprogramming

Started with basic on the spectrum, loved javascript in the 90ies and python in the 2000, now I am back with python, still making some javascript stuff when needed.