{"id":4228,"date":"2019-11-28T19:17:41","date_gmt":"2019-11-28T18:17:41","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4228"},"modified":"2019-12-01T06:12:50","modified_gmt":"2019-12-01T05:12:50","slug":"create-a-multiple-choice-quiz-in-javascript-easily","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/create-a-multiple-choice-quiz-in-javascript-easily\/","title":{"rendered":"Create a Multiple Choice Quiz in Javascript Easily"},"content":{"rendered":"

In this post we will use\u00a0just javascript<\/strong>. In the next one I will exaplain how to use Python to create new exercises like this in no time, using this code, but without having to deal with javascript. Let’s take a look at what the code does. It makes you create multiple choice quiz<\/strong> in a very easy way and with also some fun. All you have to do is to change the multiline string that contains the questions. You have to put one question on each line and, on the same line, separated by a ___ (3 underscores), the three or four (or more) choices, starting from the right one (do not worry, the code will shuffle them each time. Also the order of the question will be random every time, so that you won’t just remember the order of the answers, instead of really trying to choose the right one. The code is pretty long and you will find the question like the\u00a0mydom<\/strong> variable at line 58 (plus or less).<\/p>\n

I found this code on the web and I added some features like the voice that reads the questions and that interacts when you click on the answers.<\/p>\n

<head>\r\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\">\r\n\t<meta name=\"viewport\" content=\"initial-scale=1.0\">\r\n    <title>Quiz<\/title>\r\n    <!-- jquery for maximum compatibility -->\r\n\t<link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/twitter-bootstrap\/2.2.1\/css\/bootstrap-combined.min.css\">\r\n    <!--<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script>-->\r\n\t<script src=\"https:\/\/code.jquery.com\/jquery-1.11.1.min.js\" integrity=\"sha256-VAvG3sHdS5LqTT+5A\/aeq\/bZGa\/Uj04xKxY8KM\/w9EE=\" crossorigin=\"anonymous\"><\/script>\r\n\t<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"><\/script>\r\n    <script>\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\nlet mydom = `Qual \u00e8 la capitale dell'Italia?___Rome___Florence___Neaples\r\nQuanto fa 2 + 2?___4___2___3`;\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\" && $.type(choices) == \"array\"){\r\n        $('#choice-block').empty();\r\n        for(var i=0;i<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') && 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 ======|||||||||=====>>>\r\n      if (count_speak==0 && is_on==1){\r\n        speak(quiz[currentquestion]['question']);\r\n        count_speak = 1;\r\n      }\r\n    \/\/ >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  parla solo una volta ======|||||||||=====>>>\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 > 0 ? \"<span class='number'>\"+ first +\"<\/span> \" : 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 < 2)\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\r\n\t\t\t\t\ttext[1] = '<span class=\"qnumber\">'+text[1]+'<\/span>';\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('<span class=\"correct\">ESATTO!<\/span> ' + (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('<span class=\"incorrect\">INESATTO!<\/span> ' + (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 < 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 < 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 >>> ')\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 &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 < 100 && percent >80) speak(\"Bel risultato, complimenti\");\r\n      else if (percent < 80 && percent >70) speak(\"Hai risposto in modo discreto, bravo.\");\r\n      else if (percent < 70 && percent >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\" && $.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\" && $.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') && 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 >>>').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 > 0 ? \"<span class='number'>\"+ first +\"<\/span> \" : 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 < 2)\r\n\t\t\t\treturn;\r\n\t\t\t\r\n\t\t\ttext[1] = '<span class=\"qnumber\">'+text[1]+'<\/span>';\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    <\/script>\r\n    <style type=\"text\/css\" media=\"all\">\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: 1em;\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    <\/style>\r\n\r\n<\/head>\r\n\r\n  \r\n<\/script>\r\n<body>\r\n\r\n \r\n  <!-- home button -->\r\n\r\n\r\n\r\n\r\n<div class=\"form-group rsform-block rsform-block-framecontent\"><div id=\"frame\" role=\"content\"><\/div>\r\n\r\n<\/div>\r\n\r\n\t\t\t\r\n\r\n\r\n<\/pre>\n
An example is right here<\/h2>\n\r\n\t\r\n    \r\n\t\r\n    Quiz<\/title>\r\n    <!-- jquery for maximum compatibility -->\r\n\t<link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/twitter-bootstrap\/2.2.1\/css\/bootstrap-combined.min.css\">\r\n    <!--<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script>-->\r\n\t<script src=\"https:\/\/code.jquery.com\/jquery-1.11.1.min.js\" integrity=\"sha256-VAvG3sHdS5LqTT+5A\/aeq\/bZGa\/Uj04xKxY8KM\/w9EE=\" crossorigin=\"anonymous\"><\/script>\r\n\t<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"><\/script>\r\n    <script>\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\nlet mydom = `Qual \u00e8 la capitale dell'Italia?___Rome___Florence___Neaples\r\nQuanto fa 2 + 2?___4___2___3`;\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\" && $.type(choices) == \"array\"){\r\n        $('#choice-block').empty();\r\n        for(var i=0;i<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') && 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 ======|||||||||=====>>>\r\n      if (count_speak==0 && is_on==1){\r\n        speak(quiz[currentquestion]['question']);\r\n        count_speak = 1;\r\n      }\r\n    \/\/ >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  parla solo una volta ======|||||||||=====>>>\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 > 0 ? \"<span class='number'>\"+ first +\"<\/span> \" : 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 < 2)\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\r\n\t\t\t\t\ttext[1] = '<span class=\"qnumber\">'+text[1]+'<\/span>';\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('<span class=\"correct\">ESATTO!<\/span> ' + (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('<span class=\"incorrect\">INESATTO!<\/span> ' + (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 < 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 < 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 >>> ')\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 »').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 < 100 && percent >80) speak(\"Bel risultato, complimenti\");\r\n      else if (percent < 80 && percent >70) speak(\"Hai risposto in modo discreto, bravo.\");\r\n      else if (percent < 70 && percent >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\" && $.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\" && $.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') && 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 >>>').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 > 0 ? \"<span class='number'>\"+ first +\"<\/span> \" : 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 < 2)\r\n\t\t\t\treturn;\r\n\t\t\t\r\n\t\t\ttext[1] = '<span class=\"qnumber\">'+text[1]+'<\/span>';\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    <\/script>\r\n    <style type=\"text\/css\" media=\"all\">\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: 1em;\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    <\/style>\r\n\r\n<\/head>\r\n\r\n  \r\n<\/script>\r\n<body>\r\n\r\n \r\n  <!-- home button -->\r\n\r\n\r\n\r\n\r\n<div class=\"form-group rsform-block rsform-block-framecontent\"><div id=\"frame\" role=\"content\"><\/div>\r\n\r\n<\/div>\r\n\r\n\t\t\t\r\n\r\n\r\n\n<p><iframe loading=\"lazy\" title=\"Create a Multiple Choice Test in Javascript\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/Hg4Z5kGMMTo?feature=oembed&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<p>What next? In the next post I will show you a little program in Python to make new exercises like this in no time.<\/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":"How to create a javascript Multichoice Test\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/create-a-multiple-choice-quiz-in-javascript-easily\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":4235,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[331],"tags":[233,103,126],"class_list":["post-4228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-quiz","tag-test"],"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\/4228","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=4228"}],"version-history":[{"count":6,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4228\/revisions"}],"predecessor-version":[{"id":4239,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4228\/revisions\/4239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/4235"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=4228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=4228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=4228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}