Another post about making exercises with Python and Javascript? Yes. Let’s go and check how I did it:
- I created an exercise injavascript (question, answer, check if it’s right)
- then I made a py file to replace the elements in the template
- the div for the solution, the input box name and the solution
That is all showed in the video you can play after the code below:
This is the full code
import os counter = 1 template = """<h3>title</h3> <input id="i1" type="text" onchange="ris=document.getElementById('ris1');if(this.value=='1000'){ris1.innerHTML='Good!'}else{ris1.innerHTML='No! It is wrong, try again.'}"> <div id="ris1"></div>""" def new_ex(title, solution): "Substitute the default,values with new ones" global template, counter template2 = template.replace("title", title) template2 = template2.replace("ris1", "ris" + str(counter)) template2 = template2.replace("i1", "i" + str(counter)) template2 = template2.replace("1000", solution) counter += 1 return template2 # === add here your exercises template3 = new_ex("How is the triple of 500?", "1500") template3 += new_ex("How is the triple of 1500?", "4500") template3 += new_ex("Is it Rome the capital of Italy [y/n]", "y") # End of exercises # =========== do not change this code below === with open("new.html", "w", encoding="utf-8") as file: file.write(template3) os.startfile("new.html")
Live coding video: how to make javascript exercises with python
Some new style features
I added some new features to make it more fun and more easy to understand when you are right or wrong. It also stops the user from changing the answers. They can refresh, but they will have to start again from the beginning.
import os counter = 1 template = """<input id="i1" type="text" size=1 onchange="ris=document.getElementById('ris1');if(this.value=='1000'){ris1.innerHTML='Risposta corretta!';tt1.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt1.style='color:red';ris1.innerHTML='<i style=color:red>Risposta sbagliata</i>';this.style='background:red;';this.setAttribute('readonly','true');}"> <b id='tt1'>title</b> - <b id="ris1" style='color:blue;'></b><br>""" def new_ex(title, solution): "Substitute the default,values with new ones" global template, counter template2 = template.replace("title", title) template2 = template2.replace("ris1", "ris" + str(counter)) template2 = template2.replace("tt1", "tt" + str(counter)) template2 = template2.replace("i1", "i" + str(counter)) template2 = template2.replace("1000", solution) counter += 1 return template2 template3 = """ <script> let counter = ';' </script> <h3>Il turismo indiano</h3> <ul> <li>Popolazione: 1,2 miliardi di abitanti <li>lingua ufficiale: inglese <li>Reddito: 73 euro <li>Religioni: induisti (80%), mussulmani (13%) </ul> Rispondi alle seguenti domande vero falso (con v o f) <br>""" # Question and answer separated by # withput space q_n_a = """Il turismo indiano outgoing aumenterà nei prossimi anni#v Gli indiani preferiscono l'Europa all'Asia#f I businessman e i giovani indiani preferiscono gli USA#v Il turista indiano preferisce il Veneto, il Lazio e la Toscana#v Ha un'alta propensione alla spesa#v Preferisce gli alberghi a 2-3 stelle#f """ q_n_a = q_n_a.splitlines() qna2 = [] for q in q_n_a: q = q.split("#") qna2.append(q) print(qna2) q_n_a = qna2 for n in q_n_a: template3 += new_ex(n[0], n[1]) template3 += """<script> </script>""" # End of exercises # =========== do not change this code below === with open("new.html", "w", encoding="utf-8") as file: file.write(template3) os.startfile("new.html")
The output
L’output in questa pagina sarà un po’ diverso, per le impostazioni del sito (bootstrap).
Il turismo indiano
- Popolazione: 1,2 miliardi di abitanti
- lingua ufficiale: inglese
- Reddito: 73 euro
- Religioni: induisti (80%), mussulmani (13%)
Il turismo indiano outgoing aumenterà nei prossimi anni -
Gli indiani preferiscono l'Europa all'Asia -
I businessman e i giovani indiani preferiscono gli USA -
Il turista indiano preferisce il Veneto, il Lazio e la Toscana -
Ha un'alta propensione alla spesa -
Preferisce gli alberghi a 2-3 stelle -