Python writes short answers exercises in Javascript

Another post about interactive exercises in Python. This time it is a short answer exercise maker. As output you will have an html file with the questions that you can post in your blog and you will not have to write javascript and html code, because Python will do it for you, based on a simple javascript template. Python will also take care of saving and showing the html file. All you have to do is to add your questions and answers in a list in the way that you can see in the video below and at the end copy the code of the html page (right click on the html page and select show the code or source code… something like that, should be the last voice of the contextual menu.

in the lists in the list (sol), you put (as a string):

• the address of an image (optional, you leave it empty if you do not want it)
• The text of the question or exercise
• the solution

    ["https://www.ilpost.it/wp-content/uploads/2019/08/koala.jpg",
    "How many animals are there in the above image?",
    "2"],

Every question got these data in a list of 3 strings and all the lists are contained in the variable sol. The program will take care of showing everything in the browsere.

If the user is right an alert will appear.

How it looks like (an example)

In caso di uscita finanziaria posticipata al prossimo anno di un costo che si trova a cavallo di due esercizi, si registra

1. rateo attivo
2. rateo passivo
3. risconto attivo
4. risconto passivo?

---

Quanti animali ci sono in questa immagine?

---

Watch the video explanation of the code

The code of the example

This is the code to make the exercises. I think it is quite easy to understand, so… that’s it

# A script to make tests in javascript with python
import os


# List of lists with datas for the questions; each has 1.image 2.question 3.answer all as strings
sol = [
    ["https://www.ragioneria.com/sites/default/files/inline-images/guide/Bilancio20.jpeg",
    """In caso di uscita finanziaria posticipata al prossimo anno di un costo che si trova a cavallo di due esercizi, si registra
    <ol>
    <li>rateo attivo
    <li>rateo passivo
    <li>risconto attivo
    <li>risconto passivo?
    </ol>""",
    "2"],

    #Domanda 2:
    ["https://www.ilpost.it/wp-content/uploads/2019/08/koala.jpg",
    "Quanti animali ci sono in questa immagine?",
    "2"],

]

# Here goes the function that checks if the answer is right
function = """<script>
function code(val, sol){ if (val==sol){alert("Ok");}}</script>
"""
# This is the input text template that will be used to create the questions
tpl = """--img--<b>--question--</b><br>
<input id="--xxx--" type="text" onchange="code(this.value, --soluzione--)">
"""


def create_html():
    "This returns the html code with the questions and input boxes"
    html = ""
    counter = 0
    # substitute the placeholders with data
    for qns in sol:
        # if the first string is not empty, it shows the image of the address in the string
        if qns[0] != "":
            template = tpl.replace(
                "--img--", "<img src='" + qns[0] + "'' width=500/><br>")
        else:
            template = tpl
        template = template.replace("--question--", qns[1])
        template = template.replace("--xxx--", "id" + str(counter))
        template = template.replace("--soluzione--", qns[2])
        template += "<hr>"
        counter += 1
        html += template
    return html

# Adds the initial script and the html code with the questions
html = function + create_html()

# Saves the html file with the code created above
with open("esempio.html", "w") as file:
    file.write(html)
# shows the file in the browser
os.startfile("esempio.html")