Python to make exercises in Javascript? Yes, why not?

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%)

Rispondi alle seguenti domande vero falso (con v o f)

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 -