How to make a test or a quiz in javascript with python

pythonprogramming Posted on

A new update to my scripts to make quiz in javascript with the help of python.

Here is the code to make an html file with a quiz.

import random
import os


def add_questions(lista_domande):
	''' creates a string with all call to input with questions and answer to be shown '''

	inp = ""
	for d in lista_domande:
		inp += f"""input("{d[0]}", "{d[1]}");\n"""

	return inp


def start():
	html = """
	<style>
		.fontbig {
			font-size: 1.5em;
		}
	 
	body, html {
	 background: #ECEDEF;
	 margin-left: 10%;
	 margin-right: 10%;
	 padding: 0;
	}
	 

	</style>
	<html oncontextmenu="return false;">
	<script>

	// ======================== CHECK ======================= >
	const rightcolor = 'yellow'
	const wrongcolor = "red";

	function check(inp_text, giusta){
		// giusta is "1#2#3" and is splitted into a list of strings, then check if in this list there is the user input 
		let lista_esatte = giusta.split("#"); // right answers
		let user_input = inp_text.value;       // user input
		if (lista_esatte.includes(user_input.toLowerCase())){
			// Right Answer = yellow background
			inp_text.style.background = rightcolor; // turns yellow if right
			return inp_text.value;
		}
		else{
			// Wrong Answer = red background
			inp_text.style.background = wrongcolor; // turn red if wrong
		}
	} // ====================================== CHECK === !

	var countdom = 1;

	function input(domanda, giusta){
		var dom_h2 = "<table style='background:#fcab41;'><td><p class='fontbig' style='color: blue'>" + countdom++ + " " + domanda;

		var part1 = dom_h2 + "<br><i style='color:red'>Answer and press return</i><br><input id='casella' class='fontbig' type=text class='t1' placeholder='?...' onchange=\\"if (check(this,'";
		
		part1 += giusta + "'));\\" style='text-align:right'/></center></p></table>";
		
		document.write(part1);
		}
		
	</script>
	<!--         Here starts the html (only title)  -->
	<h1>TITOLO</h1>

	<!-- here starts the script to add input("question", "answer") generated by add_questions() in python -->
	<script>
			"""
	# creates all the input("question", "answer") string
	html += add_questions(lista_domande)
	# close the script tag
	html += "</script>"
	html = html.replace("TITOLO", title)
	with open(f"{filename}.html", "w", encoding="utf-8") as file:
		file.write(html)
	os.startfile(f"{filename}.html")




# ===== Customize your quiz ================== >>>

filename = "capitals1"
title = "Capitals quiz nr. 1"
lista_domande = [
	("What is the capital of Italy?", "rome#roma"),
	("What is the capital of France?", "paris")
]

# ==================== END customization =============== !!!

start()

If you prefer to use just javascript, use this file

<style>
		.fontbig {font-size: 1.5em; } body, html {background: #ECEDEF; margin-left: 10%; margin-right: 10%; padding: 0; }
	</style>
	<!-- <html oncontextmenu="return false;"> -->
	<script>

	// ======================== CHECK ======================= >
const rightcolor = 'yellow'
const wrongcolor = "red";

function check(inp_text, giusta){
	// giusta is "1#2#3" and is splitted into a list of strings, then check if in this list there is the user input 
	let lista_esatte = giusta.split("#"); // right answers
	let user_input = inp_text.value;       // user input
	
	if (lista_esatte.includes( user_input.toLowerCase() ) )
	
	{
		// Right Answer = yellow background
		inp_text.style.background = rightcolor; // turns yellow if right
		return inp_text.value;
	}
	
	else

	{
		// Wrong Answer = red background
		inp_text.style.background = wrongcolor; // turn red if wrong
	}
} // ====================================== CHECK === !

var countdom = 1;

function input(domanda, giusta){
	var dom_h2 = "<table style='background:#fcab41;'><td><p class='fontbig' style='color: blue'>" + countdom + " " + domanda;

	var part1 = dom_h2 + "<br><i style='color:red'>Answer and press return</i><br><input id='casella' class='fontbig' type=text class='t1' placeholder='?...' onchange=\"if (check(this,'"; part1 += giusta + "'));\" style='text-align:right'/></center></p></table>";
	
	document.write(part1);
	}
	
	</script>
	<!--         Here starts the html (only title)  -->
	<h1>TITOLO</h1>

	<!-- here starts the script to add input("question", "answer") generated by add_questions() in python -->
	<script>

input("What is the capital of Italy", "rome#roma");
input("What is the capital of France", "paris#parigi");

	</script>

This is what you get

quiz in javascript through python
a live video tutorial about the test in javascript

Making a little bit of more readable code

import random
import os

''' How to...

Go to the end end insert the questions like you see in lista_domande

you can put more possible answers using #

you can add a list of possible answer in the question with #

'''

def add_questions(lista_domande):
	''' creates a string with all call to input with questions and answer to be shown '''

	inp = ""
	for d in lista_domande:
		if "#" in d[0]:
			question = d[0].split("#")[0]
			possible = d[0].split("#")[1:]
			possible = "[" + ",".join(possible) + "]"
			inp += f"""input("{question}<br>{possible}", "{d[1]}");\n"""
		else:
			inp += f"""input("{d[0]}", "{d[1]}");\n"""

	return inp


def start():
	html = """
	<style>
		.fontbig {
			font-size: 1.5em;
		}
	 
	body, html {
	 background: #ECEDEF;
	 margin-left: 10%;
	 margin-right: 10%;
	 padding: 0;
	}
	 

	</style>
	<html oncontextmenu="return false;">
	<script>

	// ======================== CHECK ======================= >
	const rightcolor = 'yellow'
	const wrongcolor = "red";

	function check(inp_text, giusta){
		// giusta is "1#2#3" and is splitted into a list of strings, then check if in this list there is the user input 
		let lista_esatte = giusta.split("#"); // right answers
		let user_input = inp_text.value;       // user input
		if (lista_esatte.includes(user_input.toLowerCase())){
			// Right Answer = yellow background
			inp_text.style.background = rightcolor; // turns yellow if right
			return inp_text.value;
		}
		else{
			// Wrong Answer = red background
			inp_text.style.background = wrongcolor; // turn red if wrong
		}
	} // ====================================== CHECK === !

	var countdom = 1;

	function input(domanda, giusta){
		var dom_h2 = "<table style='background:#fcab41;'><td><p class='fontbig' style='color: blue'>" + countdom++ + " " + domanda;

		var part1 = dom_h2 + "<br><i style='color:red'>Answer and press return</i><br><input id='casella' class='fontbig' type=text class='t1' placeholder='?...' onchange=\\"if (check(this,'";
		
		part1 += giusta + "'));\\" style='text-align:right'/></center></p></table>";
		
		document.write(part1);
		}
		
	</script>
	<!--         Here starts the html (only title)  -->
	<h1>TITOLO</h1>

	<!-- here starts the script to add input("question", "answer") generated by add_questions() in python -->
	<script>
			"""
	# creates all the input("question", "answer") string
	html += add_questions(lista_domande)
	# close the script tag
	html += "</script>"
	html = html.replace("TITOLO", title)
	with open(f"{filename}.html", "w", encoding="utf-8") as file:
		file.write(html)
	os.startfile(f"{filename}.html")




# ===== Customize your quiz ================== >>>

'''
the sign '#' in the question puts a list of possible answers
the sign '#' in the answer puts alternative right answers
'''


filename = "capitals1"
title = "Capitals quiz nr. 1"
lista_domande = [
# "question", "answer#another right answer#..."
	["Chi sono i principali soggetti in disavanzo?", "imprese"],
	["La banca ha la sua principale attività nell'intermediazione ...c", "creditizia"],
	[]
]

# ==================== END customization =============== !!!

start()

You can find other stuff in this repository

https://github.com/formazione/pythonquiz

Questions with tips

import random
import os

''' How to...

Go to the end end insert the questions like you see in lista_domande

you can put more possible answers using #

you can add a list of possible answer in the question with #

'''

def add_questions(lista_domande):
	''' creates a string with all call to input with questions and answer to be shown '''

	inp = ""
	for d in lista_domande:
		if "#" in d[0]:
			question = d[0].split("#")[0]
			possible = d[0].split("#")[1:]
			possible = "[" + ",".join(possible) + "]"
			inp += f"""input("{question}<br>{possible}", "{d[1]}");\n"""
		else:
			inp += f"""input("{d[0]}", "{d[1]}");\n"""

	return inp


def start(title):

	style = """
	<style> 
		.fontbig {font-size: 1.5em; } 
		body, html {
			background: #ECEDEF;
			margin-left: 10%;
			margin-right: 10%;
			padding: 0; }
	</style>"""

	check = """
		<html oncontextmenu="return false;">
		<script>
		const rightcolor = 'yellow'
		const wrongcolor = "red";
		function check(inp_text, giusta){
			let lista_esatte = giusta.split("#"); // right answers
			let user_input = inp_text.value.toString();       // user input
			if (lista_esatte.includes(user_input.toLowerCase())){
				inp_text.style.background = rightcolor; // turns yellow if right
				return inp_text.value;
			}
			else{
				inp_text.style.background = wrongcolor; // turn red if wrong
		} }"""

	inputs = """ 
		var countdom = 1;

		function input(domanda, giusta){
			var dom_h2 = "<table style='background:#fcab41;'><td><p class='fontbig' style='color: blue'>" + countdom++ + " " + domanda;

			var part1 = dom_h2 + "<br><i style='color:red'>Answer and press return</i><br><input id='casella' class='fontbig' type=text class='t1' placeholder='?...' onchange=\\"if (check(this,'";
			
			part1 += giusta + "'));\\" style='text-align:right'/></center></p></table><br>";
			
			document.write(part1);
			}
		</script>
		
		<h1>TITOLO</h1>
		
				"""
	html = style + check + inputs

	# creates all the input("question", "answer") string
	html += f"<h1>{title}</h1>"
	pa = possible_answers(lista_domande)
	random.shuffle(pa)
	html += "[" + ",".join(pa) + "]"
	html += "<script>" + add_questions(lista_domande) + "</script>"
	save_file(html)


def possible_answers(lista_domande):
	html = []
	for ans in lista_domande:
		html.append(ans[1])
	return html


def save_file(html):
	with open(f"{filename}.html", "w", encoding="utf-8") as file:
		file.write(html)
	os.startfile(f"{filename}.html")




# ===== Customize your quiz ================== >>>

'''
the sign '#' in the question puts a list of possible answers
the sign '#' in the answer puts alternative right answers
'''


filename = "banca"
title = "La banca"
lista_domande = [
# "question", "answer#another right answer#..."
	["Chi sono i principali soggetti in disavanzo?", "imprese"],
	["La banca ha la sua principale attivita' nell'intermediazione ...c", "creditizia"],

]

# ==================== END customization =============== !!!

start(title)

Something more “complicated” and nice

import random
import os

''' How to...

Go to the end end insert the questions like you see in lista_domande

you can put more possible answers using #

you can add a list of possible answer in the question with #

'''

def add_questions(lista_domande):
	''' creates a string with all call to input with questions and answer to be shown '''

	inp = ""
	for k in lista_domande:
		inp += "document.write('<h2>" + k + "</h2>');\n"
		for d in lista_domande[k]:
			if "^" in d[0]:
				print("found ^")
				address = d[0].split("^")[0]
				d[0] = d[0].replace(address+"^", "")
				# ===================== LINK IMG HTML CODE ===========
				address = f"<img src='{address}' width=200/><br>"
				d[0] = address + d[0]
			if "#" in d[0]:
				question = d[0].split("#")[0]
				possible = d[0].split("#")[1:]
				possible = "[" + ",".join(possible) + "]"
				inp += f"""input("{question}<br>{possible}", "{d[1]}");\n"""
			else:
				inp += f"""input("{d[0]}", "{d[1]}");\n"""

	return inp


def start():

	style = """
	<style> 
		.fontbig {font-size: 1.5em; } 
		body, html {
			background: #ECEDEF;
			margin-left: 10%;
			margin-right: 10%;
			padding: 0; }
	</style>"""

	# hidemenu =  "<html oncontextmenu='return false;''>"
	hidemenu = ""

	check = hidemenu + """
		<script>
		const rightcolor = 'yellow'
		const wrongcolor = "red";
		function check(inp_text, giusta){
			let lista_esatte = giusta.split("#"); // right answers
			let user_input = inp_text.value.toString();       // user input
			if (lista_esatte.includes(user_input.toLowerCase())){
				inp_text.style.background = rightcolor; // turns yellow if right
				return inp_text.value;
			}
			else{
				inp_text.style.background = wrongcolor; // turn red if wrong
		} }"""

	inputs = """ 
		var countdom = 1;

		function input(domanda, giusta){
			var dom_h2 = "<table style='background:#fcab41;'><td><p class='fontbig' style='color: blue'>" + countdom++ + " " + domanda;

			var part1 = dom_h2 + "<br><i style='color:red'>Answer and press return</i><br><input id='casella' class='fontbig' type=text class='t1' placeholder='?...' onchange=\\"if (check(this,'";
			
			part1 += giusta + "'));\\" style='text-align:right'/></center></p></table><br>";
			
			document.write(part1);
			}
		</script>
		
		<h1>TITOLO</h1>
		<script>
				"""
	html = style + check + inputs

	# creates all the input("question", "answer") string
	html += add_questions(lista_domande)
	# close the script tag
	html += "</script>"
	html = html.replace("TITOLO", title)
	with open(f"{filename}.html", "w", encoding="utf-8") as file:
		file.write(html)
	os.startfile(f"{filename}.html")




# ===== Customize your quiz ================== >>>

'''
the sign '#' in the question puts a list of possible answers
the sign '#' in the answer puts alternative right answers
'''
l1_imprese = "https://contrattidirete.registroimprese.it/reti/immagini/lalegge01.png"
l2_prestito = "https://www.lentepubblica.it/wp-content/uploads/2018/07/noipa-cedolino-speciale-rimborso-730.jpg"
l3_monetaria = "https://alleanzacattolica.org/wp-content/uploads/2020/11/denaro.jpg"

filename = "Gestione"
title = "Le fasi della gestione"
lista_domande = {
	"Fasi della gestione." : [
		[f"Acquisizione delle risorse finanziarie:", "finanziamenti#finanziamento"],
		[f"Acquisto dei beni e servizi", "investimenti#investimento"],
		[f"Realizzazione del prodotto", "produzione"],
		[f"Vendita del prodotto", "disinvestimenti#disinvestimento"],
	], 

		"Fonti di finanziamento":
	[
	["I soci conferiscono il capitale ...", "proprio"],
	["I prestiti alle imprese fatti dalle banche confluiscono nel capitale di", "terzi#debito"],
	["Le dilazioni dei fornitori sono debiti di f...", "fornitura"],
	["il compenso del Capitale proprio è detto", "utile#utili"],
	["il compenso del Capitale di terzi è dato dagli", "interessi"],
	["è più conveniente per l'impresa il Capitale", "proprio"]
	],




	"La banca":
	[
		[f"{l1_imprese}^Chi sono i principali soggetti in disavanzo?", "imprese"],
		[f"{l2_prestito}^La banca ha la sua principale attivita' nell'intermediazione ...c", "creditizia"],
		[f"{l3_monetaria}^La banca permette di utilizzare strumenti che sostituiscono il denaro come assegni, bonifici e carte di credito. Si tratta della funzione m....", "monetaria"]
	]


	}

# ==================== END customization =============== !!!

start()

Le fasi della gestione

Subscribe to the newsletter for updates
Tkinter templates
Avatar My youtube channel

Twitter: @pythonprogrammi - python_pygame

Videos

Speech recognition game

Pygame's Platform Game

Other Pygame's posts

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.

Seamless Theme René, made by Altervista

Create a website and earn with Altervista - Disclaimer - Report Abuse - Privacy Policy - Customize advertising tracking