{"id":4287,"date":"2019-12-09T06:54:42","date_gmt":"2019-12-09T05:54:42","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4287"},"modified":"2019-12-12T15:39:52","modified_gmt":"2019-12-12T14:39:52","slug":"customize-quiz-in-javascript-with-python","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/customize-quiz-in-javascript-with-python\/","title":{"rendered":"Customize Quiz in Javascript with Python and tkinter"},"content":{"rendered":"<p>This a very useful script. It can really make your workflow fly. You can use a text file to insert your questions and with tkinter you pick the file with the answers and after you double click on that file the html code is all set, the htm file is ready to be uploaded. The questions just need to be at the first row, then you write the right answer, then the wrong answers (as many as you want) and a space a the end and then you put as many other question you want. There is also a voice that reads the questions and tells you if you are right or wrong.<\/p>\n<p>We&#8217;ve seen how to make a nice quiz with multiple choice in javascript and I told you that Python will come to make it easier to make more exercise from that &#8216;template&#8217;. Here is the code to do that with the live coding video of how to do it.<\/p>\n<pre class=\"lang:default decode:true \">html = \"\"\"\r\n\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\/\/ ========================== Nuova funzione speak ===========\r\nfunction speak(x) {\r\n  synth = speechSynthesis\r\n  utt = new SpeechSynthesisUtterance(x);\r\n  synth.speak(utt);\r\n  is_on = 1;\r\n}\r\n      \r\nfunction shuffle(array) {\r\n  var currentIndex = array.length, temporaryValue, randomIndex;\r\n  while (0 !== currentIndex) {\r\n    randomIndex = Math.floor(Math.random() * currentIndex);\r\n    currentIndex -= 1;\r\n    temporaryValue = array[currentIndex];\r\n    array[currentIndex] = array[randomIndex];\r\n    array[randomIndex] = temporaryValue;\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\r\n      \r\n\/\/--let mydom =;\r\n\r\n      \r\n  \/\/ -------- substitute this -----------------    \r\nfunction createQuiz(){\r\n  \/\/ returns a list with data in {} for each question\r\n  let quiz = [];\r\n  mydom = mydom.split(\"\\\\n\");\r\n  console.log(mydom);\r\n  \/\/ mescola le domande\r\n  mydom.sort(function() {return .5 - Math.random();});\r\n  for (d in mydom){\r\n      let darr = mydom[d].split(\"___\");\r\n    domanda = darr[0];\r\n    corretta = darr[1];\r\n    console.log(darr);\r\n      let dnew = darr.reverse();\r\n      dnew.pop();\r\n      dnew.sort(function() {return .5 - Math.random();});\r\n      \/\/ ------------- quiz.push ---------------------\r\n      quiz.push({\r\n          \"question\": domanda,\r\n          \"image\":  \"https:\/\/organizzazioneaziendale.net\/wp-content\/uploads\/2012\/04\/Pianificazione-e-Controllo-della-Produzione1.jpg\",\r\n          \"choices\": dnew,\r\n          \"correct\": corretta,\r\n          \"explanation\": \"\"\r\n        })\r\n      \/\/ ---------------------------------------------\r\n  }\r\n  return quiz;\r\n}\r\n      \r\nlet quiz = createQuiz(); \/\/ returns a list with data in {} for each question\r\n \r\n\r\n      \r\n\r\n      \r\nvar currentquestion = 0, score = 0, submt=true, picked;\r\nlet count_speak = 0;\r\n      \r\n      \r\njQuery(document).ready(function($){\r\n  \r\n  function addChoices(choices){\r\n      if(typeof choices !== \"undefined\" &amp;&amp; $.type(choices) == \"array\"){\r\n        $('#choice-block').empty();\r\n        for(var i=0;i&lt;choices.length; i++){\r\n          \/\/ added .css({'font-size':'36px'}) il 2 marzo 2019\r\n        $(document\r\n          .createElement('li'))\r\n          .addClass('choice choice-box btn')\r\n          .attr('data-index', i)\r\n          .text(choices[i])\r\n          .appendTo('#choice-block')\r\n          .css({'font-size':'28px'});\t\t\/\/  Aggiunge risposte\r\n      }\r\n    }\r\n\r\n  }\r\n                 \r\n\r\n  \r\n  \r\n  function nextQuestion(){\r\n     \r\n\t\t\tsubmt = true;\r\n\t\t\t$('#explanation').empty(); \/\/ svuota spiegazione\r\n\t\t\t$('#question').text(quiz[currentquestion]['question']); \/\/ domanda attuale\r\n      \/\/ domanda n. di ... totale domande\r\n\t\t\t$('#pager').text('Domanda' + Number(currentquestion + 1) + ' di ' + quiz.length);\r\n      \/\/ Immagine... ?\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'))\r\n            .addClass('question-image')\r\n            .attr('id', 'question-image')\r\n            .attr('src', quiz[currentquestion]['image'])\r\n            .attr('alt', (quiz[currentquestion]['question']))\r\n            .insertAfter('#question');\r\n\t\t\t\t} else {\r\n\t\t\t\t\t$('#question-image')\r\n            .attr('src', quiz[currentquestion]['image'])\r\n            .attr('alt', (quiz[currentquestion]['question']));\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t$('#question-image')\r\n          .remove();\r\n\t\t\t}\r\n\r\n\t\t\taddChoices(quiz[currentquestion]['choices']);\r\n\t\t\tsetupButtons();\r\n      \/\/ parla solo una volta ======|||||||||=====&gt;&gt;&gt;\r\n      if (count_speak==0 &amp;&amp; is_on==1){\r\n        speak(quiz[currentquestion]['question']);\r\n        count_speak = 1;\r\n      }\r\n    \/\/ &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;  parla solo una volta ======|||||||||=====&gt;&gt;&gt;\r\n    \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});\r\n\t\t\t\t\r\n\t\t\t\r\n        } \/\/ function nextQuestion\r\n\r\n\r\nfunction processQuestion(choice){  \r\n    \/\/ ===========   Risposta ESATTA!  ============================== \/\/\r\n    if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct'])\r\n      {\r\n\t\t\t\t$('.choice')\r\n          .eq(choice)\r\n          .addClass('btn-success')\r\n          .css({'font-size':'36px', 'font-weight':'bold', 'border-color':'#51a351', 'color':'#fff'});\r\n\t\t\t\t$('#explanation')\r\n          .html('&lt;span class=\"correct\"&gt;ESATTO!&lt;\/span&gt; ' + (quiz[currentquestion]['explanation']));\r\n        \r\n        let ff = [\"\u00e8 giusto\",\"\u00e8 proprio cos\u00ec\",\"e certo!\",\"ci siamo\",\"sei bravo o brava\",\"continua cos\u00ec\",\"s\u00ec\",\"ok\",\"bene\",\"risposta esatta\",\"hai risposto bene\",\"complimenti per la risposta\",\"bravo\",\"yes\",\"ou\u00ec\",\"corretto\",\"esatto\",\"perfetto\",\"eh s\u00ec\",\"s\u00ec, s\u00ec\",\"certo\",\"giusto\",\"s\u00ec\u00ec\"].sort(function(){return 0.5 - Math.random()})[0];\r\n        speak(ff);\r\n        score++;\r\n        count_speak = 0;\r\n\t\t\t} \r\n      \r\n    \/\/ ================================ |  Risposta sbagliata  | ======================== \/\/\r\n    else {\r\n      $('.choice')\r\n            .eq(choice)\r\n            .addClass('btn-danger')\r\n            .css({'font-weight':'bold', 'border-color':'#f93939', 'color':'#fff'});\r\n      $('#explanation')\r\n        .html('&lt;span class=\"incorrect\"&gt;INESATTO!&lt;\/span&gt; ' + (quiz[currentquestion]['explanation']));\r\n        speak(\"No! \u00e8 \" + quiz[currentquestion]['correct']);\r\n            }\r\n        count_speak = 0;\r\n        currentquestion++;\r\n    \/\/ ========================= qui \u00e8 stata aggiunta da 322\r\n    if (currentquestion &lt; quiz.length)  nextQuestion();\r\n    \/\/ =========================\r\n  \r\n\r\n      \/\/ SONO FINITE LE DOMANDE... MOSTRA I RISULTATI\r\n\t\t\tif(currentquestion == quiz.length){\r\n\t\t\t\t$('#submitbutton')\r\n          .html('GET QUIZ RESULTS')\r\n          .removeClass('btn-success')\r\n          .addClass('btn-info')\r\n          .css({'border-color':'#3a87ad', 'color':'#fff'})\r\n          .on('click', function(){\r\n          \r\n\t\t\t\t\t    $(this).text('GET QUIZ RESULTS')\r\n                .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}\r\n      \r\n      else if (currentquestion &lt; quiz.length){ \r\n      \/\/ SE CI SONO ANCORA DOMANDE, RIMETTE IL PULSANTE CONTROLLA LA RISPOSTA\r\n        \r\n\t\t\t\t$('#submitbutton').html(' VERIFICA &gt;&gt;&gt; ')\r\n          .removeClass('btn-success')\r\n          .addClass('btn-warning')\r\n          .css({'font-weight':'bold', 'border-color':'#faa732', 'color':'#fff'})\r\n          .off('click', function(){\r\n          \r\n        $(this).text('VERIFICA')\r\n          .removeClass('btn-warning')\r\n          .addClass('btn-success')\r\n          .css({'font-weight':'bold', 'border-color':'#51a351', 'color':'#fff'})\r\n          .on('click');\r\n          \r\n\t\t\t\t})\r\n  \t\t\t\r\n\t\t\t} \r\n    \r\n    else {\r\n\t\t\t\t$('#submitbutton').html('VAI ALLA PROSSIMA DOMANDA &amp;raquo;').on('click', function(){\r\n\t\t\t\t$(this).text('- CONTROLLA LA RISPOSTA -').css({'color':'inherit'}).on('click');\r\n\t\t\t\t})\r\n\t\t\t}\r\n\r\n          \r\n\t\t\t\r\n\t\t}\r\n\r\n       \r\n                                  \/*\r\n                                  \r\n                                  Qui sotto c'\u00e8 il codice che segue\r\n                                  la scelta di una opzione\r\n                                                |\r\n                                                |\r\n                                               \\\/\r\n                                  *\/\r\n\t\r\n  \r\n  function setupButtons(){\r\n\t\t\t$('.choice').on('click', function(){\r\n      \/\/speak(quiz[currentquestion]['choice'])\r\n    \/\/ Ogni volta che clicco un pulsante\r\n      \r\n        synth.cancel();\r\n        is_on = 0;\r\n    \r\n            \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            \/\/\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  \r\n  \r\n\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(\"Hai risposto bene a \" + score + \" domande su \" + quiz.length + \" complessive.\");\r\n      speak(\"hai risposto in modo corretto a \" + score + \" domande su \" + quiz.length + \" complessive\");\r\n      \r\n      let percent = Math.round(score\/quiz.length * 100);\r\n      if (percent == 100) speak(\"Hai ottenuto il massimo punteggio! Ottimo!\");\r\n      else if (percent &lt; 100 &amp;&amp; percent &gt;80) speak(\"Bel risultato, complimenti\");\r\n      else if (percent &lt; 80 &amp;&amp; percent &gt;70) speak(\"Hai risposto in modo discreto, bravo.\");\r\n      else if (percent &lt; 70 &amp;&amp; percent &gt;60) speak(\"HAi risposto in modo sufficientemente corretto.\");\r\n      else speak(\"Devi impegnarti di pi\u00f9. Riprova\");\r\n    \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', (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-warning choice-box').attr('id', 'submitbutton').text('VERIFICA &gt;&gt;&gt;').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\r\n  \r\n&lt;\/script&gt;\r\n&lt;body&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\r\n\t\t\t\r\n\r\n\r\n\"\"\"\r\n\r\nimport tkinter as tk\r\nimport os\r\n\r\n\r\nroot = tk.Tk()\r\nroot.geometry(\"300x300\")\r\n\r\ndef create():\r\n    with open(\"exercise.html\", \"w\", encoding=\"utf-8\") as file:\r\n        file.write(html)\r\n\r\nbutton = tk.Button(root, text=\"Create Exercise\", command=create)\r\nbutton.pack()\r\n\r\ndef check(event):\r\n    global html\r\n    ind = lstb.curselection()[0]\r\n    filename = lstb.get(ind)\r\n    with open(filename, \"r\", encoding=\"utf-8\") as file:\r\n        text = file.read()\r\n    print(text)\r\n    text = text.split(\"\\n\\n\")\r\n    for n,t in enumerate(text):\r\n        text[n] = t.replace(\"\\n\",\"___\")\r\n    text = \"\\n\".join(text)\r\n    print(text)\r\n    text = text.replace(\"'\",\"\\'\")\r\n    html = html.replace(\"\/\/--let mydom =;\", \"let mydom = `\" + text + \"`;\")\r\n    with open(\"mynewexercise.html\", \"w\", encoding=\"utf-8\") as file:\r\n        file.write(html)\r\n\r\nlstb = tk.Listbox(root)\r\nlstb.pack()\r\nlstb.bind(\"&lt;Double-Button&gt;\", check)\r\n\r\nfor file in os.listdir():\r\n    lstb.insert(tk.END, file)\r\n\r\n\r\nroot.mainloop()<\/pre>\n<h2>The video<\/h2>\n<p><iframe loading=\"lazy\" title=\"Customize a javascript quiz with Python\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/pwJGgYPdqOw?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\t<script>\r\nvar title = \"Exercises\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pyquiz-1-0-create-tests-with-python-in-html\/\",\"Python to make test in Html\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-writes-short-answers-exercises-in-javascript\/\",\"Python and Javascript short answer exercises\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-to-make-exercises-in-javascript-yes-why-not\/\",\"Python and Javascript to make Interactive tests\"],\r\n[\"https:\/\/www.youtube.com\/watch?v=Y2XIEFqBCDc\",\"Video Exercises part 1\"],\r\n[\"https:\/\/www.youtube.com\/watch?v=FcyhUPRTv6c&t=210s\",\"Video Exercises part 2\"]\t\t\t\r\n];\r\n\t\t\r\n<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\t\t\n","protected":false},"excerpt":{"rendered":"Exercises&#8230; interactive&#8230;. javascript&#8230;. and Python\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/customize-quiz-in-javascript-with-python\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":4307,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[627,233,4],"class_list":["post-4287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples","tag-exercises","tag-javascript","tag-python"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":true,"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\/4287","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=4287"}],"version-history":[{"count":3,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4287\/revisions"}],"predecessor-version":[{"id":4300,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4287\/revisions\/4300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/4307"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=4287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=4287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=4287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}