{"id":8795,"date":"2021-03-07T08:13:47","date_gmt":"2021-03-07T07:13:47","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=8795"},"modified":"2021-03-07T17:35:51","modified_gmt":"2021-03-07T16:35:51","slug":"make-an-html-quiz-easily-with-python","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/make-an-html-quiz-easily-with-python\/","title":{"rendered":"Make an html quiz easily with Python"},"content":{"rendered":"\n

We will generate this test here:<\/p>\n\n\n\n

\"\"<\/a>
The test in html<\/figcaption><\/figure>\n\n\n\n

The code is in html and javascript, but we want to create new tests easily with the help of python to generate them using simple text files with questions, images and answers, so that we do not have to write all this:<\/p>\n\n\n\n

{\n          question : 'When you see this sign, you must:',\n          image : 'c2-q01.png',\n          answers : [\n            '+Stop completely, check for pedestrians, and cross traffic',\n            'Slow down without coming to a complete stop',\n            'Stop completely and wait for a green light',\n            'Slow down and check for traffic'\n          ]\n        },<\/pre>\n\n\n\n
for every single question, but this<\/p>\n\n\n\n
When you see this sign, you must:\nStop completely, check for pedestrians, and cross traffic\nSlow down without coming to a complete stop\nStop completely and wait for a green light\nSlow down and check for traffic<\/pre>\n\n\n\n
so that is easy and you can also use other quizzes that you written as text like this.<\/p>\n\n\n\n
Step 1: create the py file like this<\/h2>\n\n\n\n
from resource.start import start, end\n\n\n\nquestions = \"\"\"        {\n          question : 'When you see this sign, you must:',\n          image : 'c2-q01.png',\n          answers : [\n            '+Stop completely, check for pedestrians, and cross traffic',\n            'Slow down without coming to a complete stop',\n            'Stop completely and wait for a green light',\n            'Slow down and check for traffic'\n          ]\n        },\"\"\"\n\nprint(start + questions + end)<\/pre>\n\n\n\n
Then you will store in a folder called resource this python file<\/p>\n\n\n\n
start = \"\"\"<!DOCTYPE html>\n<html lang=\"en\" prefix=\"og: http:\/\/ogp.me\/ns#\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests<\/title>\n    <meta name=\"title\" content=\"Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests\">\n    <meta name=\"twitter:title\" content=\"Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests\">\n    <meta property=\"og:title\" content=\"Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests\">\n    <meta name=\"description\" content=\"This test reviews what you have learned in Chapter 2 (p.7-22) of the Pennsylvania Driver's Manual. Answer the questions as best as you can.\">\n    <meta property=\"og:description\" content=\"This test reviews what you have learned in Chapter 2 (p.7-22) of the Pennsylvania Driver's Manual. Answer the questions as best as you can.\">\n    <link rel=\"shortcut icon\" type=\"image\/x-icon\" href=\"..\/..\/..\/resources\/images\/padt.ico\">\n\n    <meta name=\"keywords\" content=\"PennDOT, Driver Manual, Tests, Practice, Exercises\" lang=\"en\">\n    <meta name=\"language\" content=\"en\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n    <meta property=\"og:site_name\" content=\"sethclydesdale.github.io\">\n    <meta property=\"og:url\" content=\"https:\/\/sethclydesdale.github.io\/pa-driver-tests\/tests\/chapter-2\/review\/\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:image\" content=\"https:\/\/sethclydesdale.github.io\/pa-driver-tests\/resources\/images\/padt-thumb.png\">\n    <meta name=\"twitter:card\" content=\"summary\">\n    <meta name=\"twitter:creator\" content=\"@SethC1995\">\n\n    <link rel=\"stylesheet\" href=\"..\/..\/..\/resources\/stylesheet.min.css\">\n    <script src=\"..\/..\/..\/resources\/ga.js\" async><\/script>\n  <\/head>\n\n  <body>\n    \n    <header>\n      <h1><a href=\"..\/..\/..\/\" id=\"home-link\">Pennsylvania Driver Tests<\/a><\/h1>\n      <a id=\"fork-me\" href=\"https:\/\/github.com\/SethClydesdale\/pa-driver-tests\">Fork Me<\/a>\n    <\/header>\n    \n    <div id=\"content\">\n      <div id=\"exercise\" class=\"content-block\">\n        <h2 id=\"exercise-title\" class=\"center\">Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings<\/h2>\n        <div id=\"quiz-result\"><\/div>\n        <div id=\"quiz-zone\" class=\"clear\"><\/div>\n        <div id=\"quiz-timer\" class=\"center\"><\/div>\n      <\/div>\n    <\/div>\n    \n    <footer class=\"clear\">\n      <ul class=\"footer-left\">\n        <li><a href=\"..\/..\/..\/\">Home<\/a><\/li>\n        <li><a href=\"..\/..\/..\/privacy\/\">Privacy<\/a><\/li>\n        <li><a href=\"..\/..\/..\/report\/\">Report a Bug<\/a><\/li>\n      <\/ul>\n      \n      <ul class=\"footer-right\">\n        <li>Created by <a href=\"https:\/\/github.com\/SethClydesdale\">Seth Clydesdale<\/a> and the <a href=\"https:\/\/github.com\/SethClydesdale\/pa-driver-tests\/graphs\/contributors\">Github Community<\/a><\/li>\n      <\/ul>\n    <\/footer>\n    \n    <script src=\"..\/..\/..\/resources\/easytimer.min.js\"><\/script>\n    <script src=\"..\/..\/..\/resources\/ezquiz.min.js\"><\/script>\n    <script src=\"..\/..\/..\/resources\/javascript.min.js\"><\/script>\n    <script>EZQuiz.generate({\n      info : 'This test reviews what you have learned in Chapter 2 (p.7-22) of the Pennsylvania Driver\\'s Manual.<br>Answer the questions as best as you can.',\n\n      quiz : [\"\"\"\n\nend = \"\"\" }\n      ]\n    });<\/script>\n  <\/body>\n<\/html>\"\"\"<\/pre>\n\n\n\n
Now you got the template stored in the memory of the computer.<\/p>\n\n\n\n
Create a list of strings with the questions<\/h2>\n\n\n\n
Now we will load the question from an external file in a folder called “data” like this:<\/p>\n\n\n\n
Come ti chiami\ngio\ncarla\nsara\ntommaso\n\nDove sei nato\ngenova\nmilano\ntorino\nvenezia<\/pre>\n\n\n\n
We will use this function in the main python file<\/p>\n\n\n\n
quest = []\nwith open(\"data\/test.txt\") as file:\n\tfile = file.read()\n\t# store a question in each item of cont\n\tcont = [l for l in file.split(\"\\n\\n\")]<\/pre>\n\n\n\n
Now we will make the right javascript code for the html test<\/p>\n\n\n\n
for q in cont:\n\tq = q.split(\"\\n\")\n\ttesto = f\"{{question:{q[0]}, image: 'image01.png', answes : [\\'{q[1]}\\',\\'{q[2]}\\',\\'{q[3]}\\',\\'{q[4]}\\']}},\"\n\tquest.append(testo)\n\nprint(quest)\n<\/pre>\n\n\n\n
this is the output<\/p>\n\n\n\n
[\"{question:Come ti chiami, image: 'image01.png', answes : ['gio','carla','sara','tommaso']},\", \"{question:Dove sei nato, image: 'image01.png', answes : ['genova','milano','torino','venezia']},\"]<\/pre>\n\n\n\n
Now we just have to save the file in html with the new questions<\/p>\n\n\n\n
from resource.start import start, end\nimport os\nfrom createfile import createfile\n\n\nquestions = \"\"\"        {\n          question : 'When you see this sign, you must:',\n          image : 'c2-q01.png',\n          answers : [\n            '+Stop completely, check for pedestrians, and cross traffic',\n            'Slow down without coming to a complete stop',\n            'Stop completely and wait for a green light',\n            'Slow down and check for traffic'\n          ]\n        },\"\"\"\n\nquest = []\nwith open(\"data\/test.txt\") as file:\n\tfile = file.read()\n\t# store a question in each item of cont\n\tcont = [l for l in file.split(\"\\n\\n\")]\n\ntesto = \"\"\nfor q in cont:\n\tq = q.split(\"\\n\")\n\ttesto += f\"{{question:\\'{q[0]}\\', image: 'image01.png', answers : [\\'{q[1]}\\',\\'{q[2]}\\',\\'{q[3]}\\',\\'{q[4]}\\']}},\\n\"\n\tquest.append(testo)\n\n\n\nhtml = start + \"\".join(testo) + end\n\ncreatefile(\"02.html\", html)\nprint(os.getcwd())\nos.startfile(\"data\\\\review\\\\02.html\")<\/pre>\n\n\n\n
The whole code is this<\/p>\n\n\n\n
import os\nfrom createfile import createfile\nfrom tkinter import filedialog\nfrom random import shuffle\nimport tkinter as tk\n\n\n\nstart = \"\"\"<!DOCTYPE html>\n<html lang=\"en\" prefix=\"og: http:\/\/ogp.me\/ns#\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests<\/title>\n    <meta name=\"title\" content=\"Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests\">\n    <meta name=\"twitter:title\" content=\"Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests\">\n    <meta property=\"og:title\" content=\"Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings | Pennsylvania Driver Tests\">\n    <meta name=\"description\" content=\"This test reviews what you have learned in Chapter 2 (p.7-22) of the Pennsylvania Driver's Manual. Answer the questions as best as you can.\">\n    <meta property=\"og:description\" content=\"This test reviews what you have learned in Chapter 2 (p.7-22) of the Pennsylvania Driver's Manual. Answer the questions as best as you can.\">\n    <link rel=\"shortcut icon\" type=\"image\/x-icon\" href=\"..\/..\/..\/resources\/images\/padt.ico\">\n\n    <meta name=\"keywords\" content=\"PennDOT, Driver Manual, Tests, Practice, Exercises\" lang=\"en\">\n    <meta name=\"language\" content=\"en\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n    <meta property=\"og:site_name\" content=\"sethclydesdale.github.io\">\n    <meta property=\"og:url\" content=\"https:\/\/sethclydesdale.github.io\/pa-driver-tests\/tests\/chapter-2\/review\/\">\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:image\" content=\"https:\/\/sethclydesdale.github.io\/pa-driver-tests\/resources\/images\/padt-thumb.png\">\n    <meta name=\"twitter:card\" content=\"summary\">\n    <meta name=\"twitter:creator\" content=\"@SethC1995\">\n\n    <link rel=\"stylesheet\" href=\"..\/..\/..\/resources\/stylesheet.min.css\">\n    <script src=\"..\/..\/..\/resources\/ga.js\" async><\/script>\n  <\/head>\n\n  <body>\n    \n    <header>\n      <h1><a href=\"..\/..\/..\/\" id=\"home-link\">Pennsylvania Driver Tests<\/a><\/h1>\n      <a id=\"fork-me\" href=\"https:\/\/github.com\/SethClydesdale\/pa-driver-tests\">Fork Me<\/a>\n    <\/header>\n    \n    <div id=\"content\">\n      <div id=\"exercise\" class=\"content-block\">\n        <h2 id=\"exercise-title\" class=\"center\">Review Questions: Chapter 2 - Signals, Signs, and Pavement Markings<\/h2>\n        <div id=\"quiz-result\"><\/div>\n        <div id=\"quiz-zone\" class=\"clear\"><\/div>\n        <div id=\"quiz-timer\" class=\"center\"><\/div>\n      <\/div>\n    <\/div>\n    \n    <footer class=\"clear\">\n      <ul class=\"footer-left\">\n        <li><a href=\"..\/..\/..\/\">Home<\/a><\/li>\n        <li><a href=\"..\/..\/..\/privacy\/\">Privacy<\/a><\/li>\n        <li><a href=\"..\/..\/..\/report\/\">Report a Bug<\/a><\/li>\n      <\/ul>\n      \n      <ul class=\"footer-right\">\n        <li>Created by <a href=\"https:\/\/github.com\/SethClydesdale\">Seth Clydesdale<\/a> and the <a href=\"https:\/\/github.com\/SethClydesdale\/pa-driver-tests\/graphs\/contributors\">Github Community<\/a><\/li>\n      <\/ul>\n    <\/footer>\n    \n    <script src=\"..\/..\/..\/resources\/easytimer.min.js\"><\/script>\n    <script src=\"..\/..\/..\/resources\/ezquiz.min.js\"><\/script>\n    <script src=\"..\/..\/..\/resources\/javascript.min.js\"><\/script>\n    <script>EZQuiz.generate({\n      info : 'Pythonprogramming.altervista.org',\n\n      quiz : [\"\"\"\n\nend = \"\"\"\n      ]\n    });<\/script>\n  <\/body>\n<\/html>\"\"\"\n\nquest = []\n\ndef opentext():\n    rep = filedialog.askopenfilenames(\n        # parent=root,\n        initialdir=os.getcwd() + \"data\",\n        initialfile='tmp',\n        filetypes=[\n            (\"TXT\", \"*.txt\")])\n    return rep\n\n\ndef open_text_file():\n    name = opentext()\n    with open(name[0]) as file:\n        file = file.read()\n        # store a question in each item of cont\n        cont = [l for l in file.split(\"\\n\\n\")]\n    return cont\n\ncont = open_text_file()\n\ntesto = \"\"\nfor q in cont:\n    q = q.split(\"\\n\")\n    # first answer is right\n    q[1] = \"+\" + q[1]\n    answers = q[:]\n    answers.pop(0)\n    # shuffle answers and then add to q\n    shuffle(answers)\n    q = [q[0], *answers]\n    print(q)\n    testo += f\"{{question:\\'{q[0]}\\', image: '', answers : [\\'{q[1]}\\',\\'{q[2]}\\',\\'{q[3]}\\',\\'{q[4]}\\']}},\\n\"\n    quest.append(testo)\n\n\nhtml = start + \"\".join(testo) + end\ndef createfile(name, html):\n    with open(\"data\/review\/\" + name, \"w\") as newfile:\n        newfile.write(html)\n    return html\n\n\ncreatefile(\"02.html\", html)\nprint(os.getcwd())\nos.startfile(\"data\\\\review\\\\02.html\")\n<\/pre>\n\n\n\n
<\/p>\n\n\n\n
The files must be in this position to work with the path that I set in the script<\/p>\n\n\n\n
\"\"<\/a>
The questions text file is in the data folder, you will need also the pa-driven-tests folder to workW<\/figcaption><\/figure>\n\n\n\n
When you launch the script, you are asked to choose a txt file with the questions and answers<\/p>\n\n\n\n
\"\"<\/a>
prompt to choose the file with the answers, in this case text.txt<\/figcaption><\/figure>\n\n\n\n
I put – as example – this two silly questions to show how to make the test<\/p>\n\n\n\n
\"\"<\/a>
the text file content of the exampel: one question, the right answer and 3 wrong answer and then an empty line and the following question<\/figcaption><\/figure>\n\n\n\n
Then the text will immediately show up<\/p>\n\n\n\n
\"\"<\/a>
The test is complete<\/figcaption><\/figure>\n\n\n\n
At the end it will show you the right answers or the wrong ones<\/p>\n\n\n\n
\"\"<\/a>
These answers were right<\/figcaption><\/figure>\n\n\n\n
The repository with the code<\/h2>\n\n\n\n
You can find the code here<\/a>:<\/p>\n\n\n\n
\"\"<\/a>
The github repository with the code<\/figcaption><\/figure>\n\n\n\n
https:\/\/github.com\/formazione\/pa-driver-tests<\/a><\/p>\n\n\n\n
\r\n