{"id":1701,"date":"2019-03-04T12:23:14","date_gmt":"2019-03-04T11:23:14","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=1701"},"modified":"2019-03-04T12:23:14","modified_gmt":"2019-03-04T11:23:14","slug":"create-a-test-with-multiple-choice","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/create-a-test-with-multiple-choice\/","title":{"rendered":"Create a test with multiple choice"},"content":{"rendered":"<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/03\/test.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1710\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/03\/test.png\" alt=\"\" width=\"644\" height=\"451\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/03\/test.png 644w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/03\/test-320x224.png 320w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><\/p>\n<p>This code will take a text file with questions like this (in a subfolder called &#8216;dati&#8217;)<\/p>\n<pre class=\"lang:default decode:true \">question 1\r\nanswer 1.1\r\nanswer 1.2\r\nanswer 1.3\r\n\r\nquestion 2\r\nanswer 2.1\r\nanswer 2.2\r\nanswer 2.3\r\n\r\n<\/pre>\n<p>With this code, you will make an html file with the questions in the txt. When the program starts, you will be asked to choose one the file in the &#8216;dati&#8217; directory. So, you can save more file in there. I wish you find it helpful.<\/p>\n<pre class=\"lang:default decode:true\"># in darm 2 ho fatto in modo che si possa usare l'apostrofo (codice 18-21)\r\n\r\nimport glob\r\nfrom random import choice\r\n\r\nimgRnd = \"\"\"\r\nhttps:\/\/tuocoach.files.wordpress.com\/2018\/11\/cambiamento-10.jpg?w=345&h=294\r\nhttps:\/\/organizzazioneaziendale.net\/wp-content\/uploads\/2012\/04\/Pianificazione-e-Controllo-della-Produzione1.jpg\r\nhttps:\/\/image.freepik.com\/free-vector\/time-management-planning-events-flat-vector-illustration-design-business-concept-date-planning-organizing-events-events-management-icon-design_1223-140.jpg\r\nhttps:\/\/www.abparma.it\/documenti\/immagini\/elaborati_pianificazione.jpg\r\nhttps:\/\/www.accademia.bcc.it\/fusione\/img\/04-pianificazione-commerciale.png\r\nhttps:\/\/help.sap.com\/doc\/saphelp_byd1805_it\/2018.05\/it-IT\/KTP\/Software-Components\/01200615320100003379\/WEKTRA_for_Work_Centers\/SCM\/Ess\/BillOfOperations\/BOO_Structure1.png\r\nhttps:\/\/qsfera.it\/media\/k2\/items\/cache\/1698b847c2e4fe98c05adcdc9d420590_XL.jpg\r\n\"\"\".splitlines()\r\n\r\ndef createfile(filename, content):\r\n\t\"Create a file\"\r\n\ttry:\r\n\t\twith open(filename, \"w\", encoding=\"utf-8\") as file:\r\n\t\t\tfile.write(content)\r\n\t\tos.system(filename)\r\n\texcept:\r\n\t\tprint(\"You must use an argument for the filename ('prova.html') and another for the content ('&lt;b&gt;Hello&lt;\/b&gt; World')\")\r\n\r\ndef makeQ(q,ch):\r\n\tch_html = \"[\"\r\n\tfor r in ch:\r\n\t\tch_html += \"\\\"\" + r + \"\\\",\"\r\n\tch_html += \"]\" \r\n\r\n\thtml = f\"\"\"{{\r\n\t        \"question\"      :   \"{q}\",\r\n\t        \"image\"         :   \"{choice(imgRnd)}\",\r\n\t        \"choices\"       :   {ch},\r\n\t        \"correct\"       :   \"{ch[0]}\",\r\n\t        \"explanation\"   :   \"\",\r\n\t    }},\"\"\"\r\n\treturn html\r\n\r\n\r\nqdic = {}\r\ndef mklist(filename):\r\n\t\"Return a dictionary and a list of questions and aswers in a txt file where there is a question and answers for each line separated by an empty line for every group of question and answers\"\r\n\tglobal qdic\r\n\tflist = []\r\n\twith open(filename, 'r', encoding='utf-8') as file:\r\n\t\tfile = file.read()\r\n\t\tfile = file.split(\"\\n\\n\")\r\n\tfor eachstring in file:\r\n\t\tflist.append(eachstring.split(\"\\n\"))\r\n\tfor eachsublist in flist:\r\n\t\tfor e in eachsublist:\r\n\t\t\r\n\t\t# avoid empty lines at the end\r\n\t\t\tif e == '':\r\n\t\t\t\teachsublist.pop(eachsublist.index(e))\r\n\t\t# avoid empty lines at the end\r\n\t\t\r\n\t\tquestion = eachsublist[0]\r\n\t\teachsublist.pop(0)\r\n\t\tqdic[question] = eachsublist\r\n\treturn qdic\r\n\r\n\r\ndef menu():\r\n\t\"a menu to choose a file in the directory 'dati'\"\r\n\tprint(\"File di testo nella cartella: dati\")\r\n\tprint(\"------------------------------------\")\r\n\tfor number,eachfile in enumerate(glob.glob(\"dati\/*.txt\")):\r\n\t\tprint(number, eachfile.replace(\"dati\\\\\",\"\"))\r\n\tprint(\"------------------------------------\")\r\n\tfile_number = int(input(\"Scegli il numero del file? &gt; \"))\r\n\tfn = glob.glob(\"dati\/*.txt\")[file_number]\r\n\tmklist(fn)\r\n\t#print(mklist(fn))\r\n\r\nhtmlpage = \"\"\"\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\r\n    &lt;meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\"&gt;\r\n\t&lt;meta name=\"viewport\" content=\"initial-scale=1.0\"&gt;\r\n    &lt;title&gt;Quiz&lt;\/title&gt;\r\n    &lt;!-- jquery for maximum compatibility --&gt;\r\n\t&lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/twitter-bootstrap\/2.2.1\/css\/bootstrap-combined.min.css\"&gt;\r\n    &lt;!--&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"&gt;&lt;\/script&gt;--&gt;\r\n\t&lt;script src=\"https:\/\/code.jquery.com\/jquery-1.11.1.min.js\" integrity=\"sha256-VAvG3sHdS5LqTT+5A\/aeq\/bZGa\/Uj04xKxY8KM\/w9EE=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n\t&lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n\r\n    var quiztitle = \"Pianificazione e programmazione\";\r\n\r\n    \/**\r\n    * Set the information about your questions here. The correct answer string needs to match\r\n    * the correct choice exactly, as it does string matching. (case sensitive)\r\n    *\r\n    *\/\r\n\r\n\/**\r\n*Let's create the randomization of the questions!\r\n*\/\r\nfunction speak(x) {\r\n  speechSynthesis.speak(new SpeechSynthesisUtterance(x));\r\n}\r\nfunction shuffle(array) {\r\n  var currentIndex = array.length, temporaryValue, randomIndex;\r\n\r\n  \/\/ While there remain elements to shuffle...\r\n  while (0 !== currentIndex) {\r\n\r\n    \/\/ Pick a remaining element...\r\n    randomIndex = Math.floor(Math.random() * currentIndex);\r\n    currentIndex -= 1;\r\n\r\n    \/\/ And swap it with the current element.\r\n    temporaryValue = array[currentIndex];\r\n    array[currentIndex] = array[randomIndex];\r\n    array[randomIndex] = temporaryValue;\r\n  }\r\n\r\n  return array;\r\n}\r\n\t    \r\nif (!(\"scramble\" in Array.prototype)) {\r\n  Object.defineProperty(Array.prototype, \"scramble\", {\r\n    enumerable: false,\r\n    value: function() {\r\n      var o, i, ln = this.length;\r\n      while (ln--) {\r\n        i = Math.random() * (ln + 1) | 0;\r\n        o = this[ln];\r\n        this[ln] = this[i];\r\n        this[i] = o;\r\n      }\r\n      return this;\r\n    }\r\n  });\r\n}\t\t\r\n\t    \r\nlet quiz = [\r\n\"\"\"\r\n\r\nendpage = \"\"\"\r\n];\r\n\r\n\/\/use this for IE syntax error at =&gt; : ECMA script 6 not supported in IE 11 :(\r\n\/\/quiz.forEach(function(q){ return q.choices.scramble()});\r\n\r\n\/\/use this for ECMA script 6\r\nquiz.forEach(q =&gt; q.choices.scramble()); \/\/ Mescola l'ordine delle risposte\r\n\/\/console.log(quiz[0].choices);\r\n\t\t\r\nquiz = shuffle(quiz); \/\/ mescola l'ordine delle domande\r\n\t    \r\n    \/******* No need to edit below this line *********\/\r\n    var currentquestion = 0, score = 0, submt=true, picked;\r\n\r\n    jQuery(document).ready(function($){\r\n\r\n        \/**\r\n         * HTML Encoding function for alt tags and attributes to prevent messy\r\n         * data appearing inside tag attributes.\r\n         *\/\r\n        function htmlEncode(value){\r\n          return $(document.createElement('div')).text(value).html();\r\n        }\r\n\r\n        \/**\r\n         * This will add the individual choices for each question to the ul#choice-block\r\n         *\r\n         * @param choices array The choices from each question\r\n         *\/\r\n\t\tfunction addChoices(choices){\r\n\t\t\tif(typeof choices !== \"undefined\" &amp;&amp; $.type(choices) == \"array\"){\r\n\t\t\t\t$('#choice-block').empty();\r\n\t\t\t\tfor(var i=0;i&lt;choices.length; i++){\r\n          \/\/ added .css({'font-size':'36px'}) il 2 marzo 2019\r\n\t\t\t\t$(document.createElement('li')).addClass('choice choice-box btn').attr('data-index', i).text(choices[i]).appendTo('#choice-block').css({'font-size':'28px'});\t\t\/\/  Aggiunge risposte\r\n        }\r\n\t\t\t}\r\n\t\t}\r\n        \r\n        \/**\r\n         * Resets all of the fields to prepare for VAI ALLA PROSSIMA DOMANDA\r\n         *\/\r\n\t\tfunction nextQuestion(){\r\n\t\t\tsubmt = true;\r\n\t\t\t$('#explanation').empty();\r\n\t\t\t$('#question').text(quiz[currentquestion]['question']);\r\n\t\t\t$('#pager').text('Domanda' + Number(currentquestion + 1) + ' di ' + quiz.length);\r\n\t\t\tif(quiz[currentquestion].hasOwnProperty('image') &amp;&amp; quiz[currentquestion]['image'] != \"\"){\r\n\t\t\t\tif($('#question-image').length == 0){\r\n\t\t\t\t\t$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');\r\n\t\t\t\t} else {\r\n\t\t\t\t\t$('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t$('#question-image').remove();\r\n\t\t\t}\r\n\t\t\taddChoices(quiz[currentquestion]['choices']);\r\n\t\t\tsetupButtons();\r\n\t\t\t\r\n\t\t\tjQuery(document).ready(function($){\r\n\t\t\t\t$(\"#question\").html(function(){\r\n\t\t\t\t\tvar text= $(this).text().trim().split(\" \");\r\n\t\t\t\t\tvar first = text.shift();\r\n\t\t\t\t\treturn (text.length &gt; 0 ? \"&lt;span class='number'&gt;\"+ first +\"&lt;\/span&gt; \" : first) + text.join(\" \");\r\n\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t$('p.pager').each(function(){\r\n\t\t\t\t\tvar text = $(this).text().split(' ');\r\n\t\t\t\t\tif(text.length &lt; 2)\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\r\n\t\t\t\t\ttext[1] = '&lt;span class=\"qnumber\"&gt;'+text[1]+'&lt;\/span&gt;';\r\n\t\t\t\t\t$(this).html(\r\n\t\t\t\t\t\ttext.join(' ')\r\n\t\t\t\t\t);\r\n\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t});\r\n\t\t\t\r\n        }\r\n\r\n        \/**\r\n         * After a selection is submitted, checks if its the right answer\r\n         *\r\n         * @param choice number The li zero-based index of the choice picked\r\n         *\/\r\n        function processQuestion(choice){\r\n          \/\/ Risposta ESATTA!\r\n            if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']){\r\n\t\t\t\t$('.choice').eq(choice).addClass('btn-success').css({'font-size':'36px', 'font-weight':'bold', 'border-color':'#51a351', 'color':'#fff'});\r\n\t\t\t\t$('#explanation').html('&lt;span class=\"correct\"&gt;ESATTO!&lt;\/span&gt; ' + htmlEncode(quiz[currentquestion]['explanation']));\r\n\t\t\t\tscore++;\r\n              speak(\"esatto!\");\r\n              \/\/nextQuestion();\r\n\t\t\t} else {\r\n                $('.choice').eq(choice).addClass('btn-danger').css({'font-weight':'bold', 'border-color':'#f93939', 'color':'#fff'});\r\n                $('#explanation').html('&lt;span class=\"incorrect\"&gt;INESATTO!&lt;\/span&gt; ' + htmlEncode(quiz[currentquestion]['explanation']));\r\n        speak(\"Non \u00e8 corretto! La risposta era \" + quiz[currentquestion]['correct']);\r\n            }\r\n            currentquestion++;\r\n\r\n\t\t\tif(currentquestion == quiz.length){ \/\/ SONO FINITE LE DOMANDE... MOSTRA I RISULTATI\r\n\t\t\t\t$('#submitbutton').html('GET QUIZ RESULTS').removeClass('btn-success').addClass('btn-info').css({'border-color':'#3a87ad', 'color':'#fff'}).on('click', function(){\r\n\t\t\t\t\t$(this).text('GET QUIZ RESULTS').on('click');\r\n\t\t\t\t\tendQuiz();\r\n\t\t\t\t})\r\n\t\t\t\t\r\n\t\t\t} else if (currentquestion &lt; quiz.length){ \/\/ SE CI SONO ANCORA DOMANDE, RIMETTE IL PULSANTE CONTROLLA LA RISPOSTA\r\n\t\t\t\t$('#submitbutton').html('VAI ALLA PROSSIMA DOMANDA &amp;raquo;').removeClass('btn-success').addClass('btn-warning').css({'font-weight':'bold', 'border-color':'#faa732', 'color':'#fff'}).on('click', function(){\r\n\t\t\t\t\t$(this).text(' CONTROLLA LA RISPOSTA ').removeClass('btn-warning').addClass('btn-success').css({'font-weight':'bold', 'border-color':'#51a351', 'color':'#fff'}).on('click');\r\n\t\t\t\t\tnextQuestion(); \/\/ VA ALLA PROSSIMA DOMANDA\r\n\t\t\t\t})\r\n\t\t\t} else {\r\n\t\t\t\t\/\/\t$('#submitbutton').html('VAI ALLA PROSSIMA DOMANDA &amp;raquo;').on('click', function(){\r\n\t\t\t\t\/\/\t\t$(this).text('- CONTROLLA LA RISPOSTA -').css({'color':'inherit'}).on('click');\r\n\t\t\t\t\/\/\t})\r\n\t\t\t}\r\n\r\n          speak(quiz[currentquestion]['question'])\r\n\t\t\t\r\n\t\t}\r\n\r\n        \/**\r\n         * Sets up the event listeners for each button.\r\n         *\/\r\n\t\tfunction setupButtons(){\r\n      \r\n\t\t\t$('.choice').on('click', function(){\r\n\t\t\t\tpicked = $(this).attr('data-index');\r\n\t\t\t\t$('.choice').removeAttr('style').off('mouseout mouseover');\r\n\t\t\t\t$(this).css({'font-weight':'900', 'border-color':'#51a351', 'color':'#51a351', 'background' : 'gold'});\r\n\t\t\t\tif(submt){\r\n\t\t\t\t\tsubmt=false;\r\n\t\t\t\t\t$('#submitbutton').css({'color':'#fff','cursor':'pointer'}).on('click', function(){\r\n\t\t\t\t\t\t$('.choice').off('click');\r\n\t\t\t\t\t\t$(this).off('click');\r\n\t\t\t\t\t\tprocessQuestion(picked);\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t}\r\n        \r\n        \/**\r\n         * Quiz ends, display a message.\r\n         *\/\r\n\t\tfunction endQuiz(){\r\n\t\t\t$('#explanation').empty();\r\n\t\t\t$('#question').empty();\r\n\t\t\t$('#choice-block').empty();\r\n\t\t\t$('#submitbutton').remove();\r\n\t\t\t$('.rsform-block-submit').addClass('show');\r\n\t\t\t$('#question').text(\"You got \" + score + \" out of \" + quiz.length + \" correct.\");\r\n\t\t\t$(document.createElement('h4')).addClass('score').text(Math.round(score\/quiz.length * 100) + '%').insertAfter('#question');\t\t\t\r\n\t\t}\r\n\r\n        \/**\r\n         * Runs the first time and creates all of the elements for the quiz\r\n         *\/\r\n\t\tfunction init(){\r\n      speak(quiz[currentquestion]['question'])\r\n\t\t\t\/\/add title\r\n      \/*\r\n\t\t\tif(typeof quiztitle !== \"undefined\" &amp;&amp; $.type(quiztitle) === \"string\"){\r\n\t\t\t\t$(document.createElement('h2')).text(quiztitle).appendTo('#frame');\r\n\t\t\t} else {\r\n\t\t\t\t$(document.createElement('h2')).text(\"Quiz\").appendTo('#frame');\r\n\t\t\t}\r\n      I removed the title to leave more space *\/\r\n\t\t\t\r\n\t\t\t\/\/add pager and questions\r\n\t\t\tif(typeof quiz !== \"undefined\" &amp;&amp; $.type(quiz) === \"array\"){\r\n\t\t\t\t\/\/add pager\r\n        \r\n\t\t\t\t$(document.createElement('p')).addClass('pager').attr('id','pager').text('Domanda 1 di ' + quiz.length).appendTo('#frame');\r\n\t\t\t\t\/\/add first question\r\n\t\t\t\t$(document.createElement('h3')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');\r\n\t\t\t\t\/\/add image if present\r\n\t\t\t\tif(quiz[0].hasOwnProperty('image') &amp;&amp; quiz[0]['image'] != \"\"){\r\n\t\t\t\t\t$(document.createElement('img')).addClass('question-image').attr('width','100px').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t$(document.createElement('p')).addClass('explanation').attr('id','explanation').html('').appendTo('#question');\r\n\t\t\t\t\r\n\t\t\t\t\/\/questions holder\r\n\t\t\t\t$(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');\r\n\t\t\t\t\r\n\t\t\t\t\/\/add choices\r\n\t\t\t\taddChoices(quiz[0]['choices']);\r\n\t\t\t\t\r\n\t\t\t\t\/\/add submit button\r\n\t\t\t\t$(document.createElement('div')).addClass('btn-success choice-box').attr('id', 'submitbutton').text('- CONTROLLA LA RISPOSTA -').css({'font-weight':'bold', 'color':'#fff','padding':'30px 0', 'border-radius':'10px'}).appendTo('#frame');\r\n\t\t\t\t\r\n\t\t\t\tsetupButtons();\r\n\t\t\t}\r\n\t\t}\r\n\t\r\n\t\tinit();\r\n\t\r\n\t});\r\n\t\t\r\n\tjQuery(document).ready(function($){\t\t\t\r\n\t\t$(\"#question\").html(function(){\r\n\t\tvar text= $(this).text().trim().split(\" \");\r\n\t\tvar first = text.shift();\r\n\t\t\treturn (text.length &gt; 0 ? \"&lt;span class='number'&gt;\"+ first +\"&lt;\/span&gt; \" : first) + text.join(\" \");\r\n\t\t});\r\n\t\t\r\n\t\t$('p.pager').each(function(){\r\n\t\t\tvar text = $(this).text().split(' ');\r\n\t\t\tif(text.length &lt; 2)\r\n\t\t\t\treturn;\r\n\t\t\t\r\n\t\t\ttext[1] = '&lt;span class=\"qnumber\"&gt;'+text[1]+'&lt;\/span&gt;';\r\n\t\t\t$(this).html(\r\n\t\t\t\ttext.join(' ')\r\n\t\t\t);\r\n\t\t});\r\n\r\n\t});\t\r\n\r\n\t\tfunction copyText() {\r\n\t\t\tvar output = document.getElementById(\"frame\").innerHTML;\r\n\t\t\tdocument.getElementById(\"placecontent\").value = output;\r\n\t\t}\r\n\t    \r\n    &lt;\/script&gt;\r\n    &lt;style type=\"text\/css\" media=\"all\"&gt;\r\n      \r\n      .btn:hover, .btn:active {\r\n        color: blue;\r\n        font-weight: 800;\r\n      background-image: url(\"http:\/\/www.myiconfinder.com\/uploads\/iconsets\/65192ff2984e9928d32fd577bc743ea5.png\");\r\n        background-size: 100%;\r\n  \r\n      }\r\n\r\n      \/*        BODY                 *\/\r\nbody {\r\n    margin: 0;\r\n    font-family: \"Consolas\",Helvetica,Arial,sans-serif;\r\n    font-size: 24px;\r\n    line-height: 20px;\r\n    color: #ffffff;\r\n    background-color: #21517ee8;\r\n}\r\n    h3.question {\r\n    font-family: \"Consolas\",Helvetica,Arial,sans-serif;\r\n    font-weight: normal;\r\n    margin: 20px 0;\r\n    padding: 0;\r\n    font-style: italic;\r\n    display: block;\r\n    color: whitesmoke;\r\n    \r\n}  \r\n      \r\n\t\tinput \t\r\n      \r\n      { height:30px !important; }\r\n      \r\n\t\tinput[type=checkbox]\r\n      \r\n      { height:30px !important; margin-top:-3px !important; \r\n        margin-right:5px !important; box-shadow:none; background-color:#ffffff;\r\n        position:relative !important; }\r\n      \r\n\t\ttextarea\t\t\t\t\t\t\t\t\t\t\t\t\r\n      { width: 90%; margin: 0 auto; display: block; }\r\n      \r\n\t\tinput[type=radio]\t\t\t\t\t\t\t\t\r\n      { height:30px !important; margin-top:-3px !important; margin-right:5px !important; box-shadow:none; background-color:#ffffff; position:relative !important; }\r\n      \r\n\t\t.form-group input, .form-group select \t\t\t\t\t{ height:30px; padding: 0px 12px; }\r\n\t\t.form-horizontal .form-group\t\t\t\t\t\t\t{ margin:10px; }\r\n\t\t.formContainer .formControlLabel \t\t\t\t\t\t{ width:auto !important; min-width:150px; margin:0; padding:0; }\r\n\t\t.formControls\t\t\t\t\t\t\t\t\t\t\t{ width:100%; padding:0; margin: 10px 0 20px auto; }\r\n\t\t.radio \t\t\t\t\t\t\t\t\t\t\t\t\t{ padding-top:0 !important; padding-left:8px !important; }\r\n\t\t.radio-inline\t\t\t\t\t\t\t\t\t\t\t{ margin-right:10px; padding-top:0 !important; display:inline; }\r\n\t\t.bold\t\t\t\t\t\t\t\t\t\t\t\t\t{ font-weight:bold; }\r\n\t\t.italic \t\t\t\t\t\t\t\t\t\t\t\t{ font-style:italic; }\r\n\t\t.clear\t\t\t\t\t \t\t\t\t\t\t\t\t{ width:100%; margin:0 !important; }\r\n\t\t.rsform-block-submit \t\t\t\t\t\t\t\t\t{ display:none; }\r\n\t\t.show \t\t\t\t\t\t\t\t\t\t\t\t\t{ display: block !important; }\r\n\t\t#submit\t\t\t\t\t\t\t\t\t\t\t\t\t{ margin:0 auto; display:block; }\r\n\r\n\t\t\/* QUIZ STYLES *\/\r\n      li.choice-block {font-size: 28px};\r\n\t\tol,ul \t\t\t\t\t\t\t\t\t\t\t\t\t{ list-style:none; font-size: 48}\r\n\t\tstrong \t\t\t\t\t\t\t\t\t\t\t\t\t{ font-weight:700; }\r\n\t\t#frame \t\t\t\t\t\t\t\t\t\t\t\t\t{ width:auto; max-width: 800px; background:transparent; margin:3px auto; padding:10px;     color: #f94a4a !important; }\r\n\t\tdiv#frame h2 ul li\t\t\t\t\t\t\t\t\t\t\t{ color: white; width:auto; border-bottom:1px solid #bdbdbd; padding:0 0 5px 0; font-size:32px; }\r\n\t\th3.question \t\t\t\t\t\t\t\t\t\t\t{ font-weight:normal; margin:20px 0; padding:0; font-style:italic; display:block; }\r\n\t\tp.pager \t\t\t\t\t\t\t\t\t\t\t\t{ margin:5px 0 5px; color:#999; text-align:right; }\r\n\t\t.qnumber \t\t\t\t\t\t\t\t\t\t\t\t{ font-size:25px; font-weight:bold; font-style:italic; vertical-align:bottom; }\r\n\t\t.number \t\t\t\t\t\t\t\t\t\t\t\t{ font-family: \"Consolas\",Helvetica,Arial,sans-serif;font-size:24px; font-weight:bold; font-style:normal; vertical-align:inherit; padding-right:10px; }\r\n\t\t.score \t\t\t\t\t\t\t\t\t\t\t\t\t{ width:100%; display:inline-block; margin:30px 0; font-size:100px; text-align:center; }\r\n\t\timg.question-image \t\t\t\t\t\t\t\t\t\t{ width:25%; height:auto; display:block; max-width:150px; margin:10px auto; border:1px solid #ccc; }\r\n\t\t#choice-block \t\t\t\t\t\t\t\t\t\t\t{ display:block; list-style:none; margin:0; padding:0; cursor: pointer; }\r\n\t\/*\t#submitbutton \t\t\t\t\t\t\t\t\t\t\t{ cursor:pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } *\/\r\n\t\/*\t#submitbutton:hover \t\t\t\t\t\t\t\t\t{ background:#7b8da6; } *\/\r\n\t\t#explanation \t\t\t\t\t\t\t\t\t\t\t{ width:auto; min-height:0px; margin:0 auto; padding:0px 0; text-align:center;}\r\n\t\t#explanation span \t\t\t\t\t\t\t\t\t\t{ font-weight:bold; padding-right:8px; }\r\n\t\t.choice-box \t\t\t\t\t\t\t\t\t\t\t{ width:100%;  display:block;  text-align:center;  margin:5px auto !important; padding:10px 0 !important; border:1px solid #bdbdbd; }\r\n      .choice-box.btn {font-size: 28px;}\r\n\t\t.correct \t\t\t\t\t\t\t\t\t\t\t\t{ color:#51a351; font-size: 32px; display: block; margin-bottom: 5px; border-bottom: 1px #51a351 solid; padding-bottom: 5px; }\r\n\t\t.incorrect \t\t\t\t\t\t\t\t\t\t\t\t{ color:#f93939; font-size: 32px; display: block; margin-bottom: 5px; border-bottom: 1px #f93939 solid; padding-bottom: 5px; }\r\n    \r\n#body{\r\nwidth:100vw;\r\nheight:100vh;\r\n}\r\n \r\n    &lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;!-------------------------------- [ AUDIO ] -----------------------------&gt;\r\n&lt;audio id=\"soundtrack\"&gt;  &lt;source src=\"https:\/\/cdn.glitch.com\/1e8a1dde-7ab4-43db-8ec8-1ccb6d3cad7f%2Fanswer_20sec.ogg?1551595183210\"&gt;&lt;\/audio&gt;\r\n&lt;script&gt;\r\nvar soundtrack = document.getElementById(\"soundtrack\");\r\nsoundtrack.volume = 0.4;\r\nwindow.onreload = soundtrack.play()\r\n&lt;\/script&gt;\r\n&lt;!-------------------------------- [ AUDIO ] -----------------------------&gt;\r\n  \r\n&lt;\/script&gt;\r\n&lt;body&gt;\r\n   &lt;!--  glitch button for remix ---------------------------------&gt;\r\n&lt;script src=\"https:\/\/button.glitch.me\/button.js\"&gt;&lt;\/script&gt;\r\n&lt;div class=\"glitchButton\" style=\"position:fixed;top:50px;right:20px;z-index:1;\"&gt;&lt;\/div&gt;\r\n  &lt;div id='audio' style=\"position:fixed;top:100px;right:20px;z-index:1;\"&gt;&lt;a href=\"javascript:soundtrack.volume=0;\"&gt;OFF&lt;\/a&gt;&lt;\/div&gt;\r\n    &lt;div id='audio' style=\"position:fixed;top:100px;right:70px;z-index:1;\"&gt;&lt;a href=\"javascript:soundtrack.volume=0.5;\"&gt;ON&lt;\/a&gt;&lt;\/div&gt;\r\n  &lt;!-- home button --&gt;\r\n  &lt;div id=\"menuDiv\"&gt;\r\n&lt;script src=\"https:\/\/quarta.glitch.me\/dropdownclassi.js\"&gt;&lt;\/script&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n  \r\n\r\n&lt;div class=\"form-group rsform-block rsform-block-framecontent\"&gt;&lt;div id=\"frame\" role=\"content\"&gt;&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\n  \r\n  \r\n  &lt;\/script&gt;\r\n\t\t\t\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\"\"\"\r\n\r\ndef createDarm():\r\n\tglobal htmlpage\r\n\tfor d in qdic:\r\n\t\thtmlpage += makeQ(d,qdic[d])\r\n\thtmlpage += endpage\r\n\tcreatefile(\"paste_in_darm.html\",htmlpage)\r\n\r\nmenu()\r\ncreateDarm()\r\n<\/pre>\n<p>Have fun. In the video you can see an example (this was a previuous version without voice and sounds).<\/p>\n<p><iframe loading=\"lazy\" title=\"Test a risposta multipla sulla fattura\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/PLYpGbcGEX8?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<pre class=\"lang:default decode:true\"><\/pre>\n","protected":false},"excerpt":{"rendered":"Make a multiple choice test with javascript and Python.\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/create-a-test-with-multiple-choice\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":1709,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1,331,334,333],"tags":[233,4,126],"class_list":["post-1701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples","category-javascript","category-javascript-and-python","category-test","tag-javascript","tag-python","tag-test"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=1701"}],"version-history":[{"count":1,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1701\/revisions"}],"predecessor-version":[{"id":1711,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1701\/revisions\/1711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/1709"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=1701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=1701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}