{"id":52884,"date":"2021-08-03T03:01:37","date_gmt":"2021-08-02T17:01:37","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52884"},"modified":"2021-08-02T14:59:57","modified_gmt":"2021-08-02T04:59:57","slug":"one-or-several-did-you-know-tailored-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-tailored-quiz-tutorial\/","title":{"rendered":"One or Several Did You Know Tailored Quiz Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One or Several Did You Know Tailored Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz_accountable.jpg\" title=\"One or Several Did You Know Tailored Quiz Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One or Several Did You Know Tailored Quiz Tutorial<\/p><\/div>\n<p>The word &#8220;statically&#8221; in yesterday&#8217;s <a title='One or Several Did You Know Quiz Multiple Tutorial' href='#osdykqmt'>One or Several Did You Know Quiz Multiple Tutorial<\/a> can have an adverse effect on me.  Static &#8220;HTML&#8221; is pretty boring, unless the data is something to write home about.  Even dynamic HTML powered by static Javascript (for example hard coded array data sets) is still apt to be boring after some time.  We fail sometimes, but where we see an opportunity with inhouse web applications we like the user (to be able) to choose between &#8230;<\/p>\n<ul>\n<li>stick with some default static data &#8230; or &#8230;<\/li>\n<li>be able to create their own data which they can recall &#8230; and maybe even &#8230;<\/li>\n<li>go further and share and\/or collaborate using that data (or the default data) <font size=1>(where apt)<\/font><\/li>\n<\/ul>\n<p> &#8230; and today&#8217;s work involves that middle choice above, some functionality we like to label &#8220;accountability&#8221;, to our mind.  But we hear you say &#8230;<\/p>\n<blockquote><p>\nBut couldn&#8217;t the data size get quite large if you open it up to the user deciding on it?\n<\/p><\/blockquote>\n<p>Good point, and fair enough!  We could involve PHP and use POST arguments.  But <font size=1>(and three buts do not a butte make)<\/font> we&#8217;ve decided this quiz is meant to be pared down, and relatively uncomplicated.  We&#8217;re going to stay with just clientside Javascript techniques, but agree we cannot rely on the puny sizes GET arguments allow you to work with.  Is there an alternative just in the clientsize wooooooorrrrrrlllllldddd?  Yes &#8230;<\/p>\n<blockquote><p>\nHTTP <a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'>Cookies<\/a>\n<\/p><\/blockquote>\n<p>Yes, but is there a more generous one, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Hubert_Blaine_Wolfeschlegelsteinhausenbergerdorff_Sr.#:~:text=Hubert%20Blaine%20Wolfeschlegelsteinhausenbergerdorff%20Sr.,%2D%20Wikipedia'>Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.<\/a>, thank you for your succinct answer &#8230;<\/p>\n<blockquote><p>\nwindow.<a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a>\n<\/p><\/blockquote>\n<p>So, in the quiz Javascript, we &#8220;ask&#8221; &#8230;<\/po>\n<p><code><br \/>\nfunction ask() {<br \/>\n  var cnt=0;<br \/>\n  var theq=\" \", cdelimq=\"\";<br \/>\n  var them=\" \", cdelimm=\"\";<br \/>\n  var thea=\" \", cdelima=\"\";<br \/>\n  overallq=\"\";<br \/>\n  overallm=\"\";<br \/>\n  overalla=\"\";<br \/>\n  while (theq != \"\" && them != \"\" && thea != \"\") {<br \/>\n    if (qs.length &gt; cnt) {<br \/>\n    theq=prompt(\"Enter question(s) (delimited by |) for set \" + eval(1 + cnt), qs[cnt]);<br \/>\n    } else {<br \/>\n    theq=prompt(\"Enter question(s) (delimited by |) for set \" + eval(1 + cnt), \"\");<br \/>\n    }<br \/>\n    if (!theq) { theq=\"\"; }<br \/>\n    if (theq != '') {<br \/>\n    if (os.length &gt; cnt) {<br \/>\n    them=prompt(\"Enter full list of choices using comma delimitation \" + eval(1 + cnt), os[cnt]);<br \/>\n    } else {<br \/>\n    them=prompt(\"Enter full list of choices using comma delimitation \" + eval(1 + cnt), \"\");<br \/>\n    }<br \/>\n    if (!them) { them=\"\"; }<br \/>\n    }<br \/>\n    if (theq != '' && them != '') {<br \/>\n    if (as.length &gt; cnt) {<br \/>\n    thea=prompt(\"Enter full list of correct answer (using padded comma delimitation where order does not matter) set(s) (delimited by |) \" + eval(1 + cnt), as[cnt]);<br \/>\n    } else {<br \/>\n    thea=prompt(\"Enter full list of correct answer (using padded comma delimitation where order does not matter) set(s) (delimited by |) \" + eval(1 + cnt), \"\");<br \/>\n    }<br \/>\n    if (!thea) { thea=\"\"; }<br \/>\n    }<br \/>\n    if (theq != \"\" && them != \"\" && thea != \"\") {<br \/>\n    overallq+=cdelimq + '\"' + theq + '\"';<br \/>\n    overallm+=cdelimq + '\"' + them + '\"';<br \/>\n    overalla+=cdelimq + '\"' + thea + '\"';<br \/>\n    cdelimq=\",\";<br \/>\n    cdelimm=\",\";<br \/>\n    cdelima=\",\";<br \/>\n    cnt++;<br \/>\n    }<br \/>\n  }<br \/>\n  if (overallq != \"\" && overallm != \"\" && overalla != \"\") {<br \/>\n    \/\/alert(1);<br \/>\n    if (window.localStorage) {<br \/>\n    \/\/alert(11);<br \/>\n      if (('' + window.localStorage.getItem(\"dykquiz\")).replace('undefined','').replace('null','') != '') {<br \/>\n        window.localStorage.removeItem(\"dykquiz\");<br \/>\n        window.localStorage.setItem(\"dykquiz\", encodeURIComponent(overallq + '^' + overallm + '^' + overalla));<br \/>\n      } else {<br \/>\n        window.localStorage.setItem(\"dykquiz\", encodeURIComponent(overallq + '^' + overallm + '^' + overalla));<br \/>\n      }<br \/>\n    }<br \/>\n    location.href=document.URL.split('#')[0].split('?')[0];<br \/>\n  }<br \/>\n  if (document.getElementById('sdyk')) {<br \/>\n    document.getElementById('sdyk').value=prevs;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and, as necessary, &#8220;recall&#8221; &#8230;<\/p>\n<p><code><br \/>\nvar overallq=\"\";<br \/>\nvar overallm=\"\";<br \/>\nvar overalla=\"\";<br \/>\n<br \/>\nfunction getask() {<br \/>\n  qs=eval(\"[\" + overallq + \"]\");<br \/>\n  os=eval(\"[\" + overallm + \"]\");<br \/>\n  as=eval(\"[\" + overalla + \"]\");<br \/>\n  pickq();<br \/>\n}<br \/>\n<br \/>\n    if (window.localStorage) {<br \/>\n      if (('' + window.localStorage.getItem(\"dykquiz\")).replace('undefined','').replace('null','') != '') {<br \/>\n        var bigqa=decodeURIComponent(window.localStorage.getItem(\"dykquiz\"));<br \/>\n        var bqs=bigqa.split('\"^\"');<br \/>\n        if (bqs.length &gt;= 3) {<br \/>\n          overallq=bqs[0] + '\"';<br \/>\n          overallm='\"' + bqs[1] + '\"';<br \/>\n          overalla='\"' + bqs[2];<br \/>\n          document.getElementById('smode').innerHTML=\"&lt;select id=sdyk onchange=' if (this.value.length != 0) { eval(this.value); }  prevs=this.value; ' style=display:inline-block;&gt;&lt;option value=''&gt;\" + '\"' + \"Did You Know\" + '\"' + \"&lt;\/option&gt;&lt;option onclick=getask(); value='getask();'&gt;Recall Saved Quiz Questions and Answers&lt;\/option&gt;&lt;option onclick=ask(); value='ask();'&gt;Reask&lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; references <font color=blue>the changed<\/font> HTML snippet &#8230;<\/p>\n<p><code><br \/>\n&lt;h1&gt;One or Several <font color=blue>&lt;div id=smode style=display:inline-block;&gt;&lt;a title='Asks for your question and answer data for quiz' id=dmode style='cursor:pointer;text-decoration:underline;' onclick=ask();&gt;<\/font>\"Did You Know\"<font color=blue>&lt;\/a&gt;&lt;\/div&gt;<\/font> Quiz&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p>All of which means you could try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html--GETME\" title=\"one_or_several_quiz.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html--GETME\" title=\"one_or_several_quiz.html\">one_or_several_quiz.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\" title=\"Click picture\">One or Several Did You Know Quiz<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-tailored-quiz-tutorial\/'>One or Several Did You Know Tailored Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='osdykqmt'>Previous relevant <a target=_blank title='One or Several Did You Know Quiz Multiple Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-multiple-tutorial\/'>One or Several Did You Know Quiz Multiple Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One or Several Did You Know Quiz Multiple Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz_multiple_question.jpg\" title=\"One or Several Did You Know Quiz Multiple Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One or Several Did You Know Quiz Multiple Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='One or Several Did You Know Quiz Primer Tutorial' href='#osdykqpt'>One or Several Did You Know Quiz Primer Tutorial<\/a> represented part one of two (so far) &#8220;dropdown helps out quiz&#8221; paradigm.  Yesterday was &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-primer-tutorial\/'>\n<ul>\n<li>single question and single answer<\/li>\n<li>single question and block of consecutive answers<\/li>\n<li>single question and multiple answers in any order<\/li>\n<li>single question and multiple answers in a particular order<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and onto that today we want to add &#8230;<\/p>\n<ul>\n<li>multiple question(s) offered and single answer(s) processed<\/li>\n<li>multiple question(s) offered and block(s) of consecutive answers<\/li>\n<li>multiple question(s) offered and multiple set(s) of unique answers in any order<\/li>\n<li>multiple question(s) offered and multiple set(s) of not necessarily unique answers in any order &#8230; for example, the two questions below are the innerText of one of our quiz questions &#8230;<br \/>\n<code><br \/>\nWhich countries comprise Indochina?<br \/>\nWhich countries border the Gulf of Thailand?<\/code><br \/>\n &#8230; a concept we cater for via delimiter &#8220;|&#8221; &#8230;<br \/>\n<code><br \/>\nWhich countries comprise Indochina?|Which countries border the Gulf of Thailand?<br \/>\n<\/code><br \/>\n &#8230; usage in our, so far, statically created Javascript arrays that represent our quiz&#8217;s &#8220;data arrangements&#8221;\n<\/li>\n<li>multiple question(s) offered and multiple set(s) of answers in a particular order<\/li>\n<\/ul>\n<p> &#8230; that fourth new possibility having us interested in &#8230;<\/p>\n<ul>\n<li>select element &#8230;<\/li>\n<li>multiple <font size=1>attribute<\/font> &#8230;<\/li>\n<li>option subelement &#8220;onclick&#8221; event logic &#8230;<\/li>\n<li>now allowing for option click repeats if the answers have repeated data items (which only happens if multiple questions are selected) &#8230;<br \/>\n<code><br \/>\nfunction oneanswer(invlo) {<br \/>\n  var invl=invlo.value + '|', adone=false;<br \/>\n  if (invl == '') { return ''; }<br \/>\n  inthegame=true;<br \/>\n  var isvalid=false;<br \/>\n  var morethanone=0;<br \/>\n  document.body.style.cursor='pointer';<br \/>\n  if (('' + invl).indexOf('|') != -1) {<br \/>\n    if ((',' + gmlist.replace(\/\\ \/g,'') + ',').indexOf(',' + invl.split('|')[0].replace(\/\\ \/g,'') + ',') == -1) {<br \/>\n      isvalid=true;<br \/>\n      if (gmlist == '') {<br \/>\n        gmlist=invl.split('|')[0];<br \/>\n      } else {<br \/>\n        gmlist+=',' + invl.split('|')[0];<br \/>\n      }<br \/>\n    } else if (repeated) {<br \/>\n      \/\/alert('gmlist=' + gmlist);<br \/>\n      isvalid=true;<br \/>\n      gmlist+=',' + invl.split('|')[0];<br \/>\n    }<br \/>\n    \/\/ alert('gmlist=' + gmlist);<br \/>\n  }<br \/>\n<br \/>\n   var sin=document.getElementById('answer');<br \/>\n   for (var ii=1; ii&lt;sin.options.length; ii++) {<br \/>\n    if (sin.options[ii].selected) {<br \/>\n      morethanone++;<br \/>\n    }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   if (morethanone &gt; 1) {<br \/>\n    gmlist='';<br \/>\n    isvalid=false;<br \/>\n   }<br \/>\n<br \/> <br \/>\n   for (var i=1; i&lt;sin.options.length; i++) {<br \/>\n    if (sin.options[i].selected) {<br \/>\n      if (sin.options[i].innerText.indexOf(String.fromCodePoint(10004)) == -1) {<br \/>\n      sin.options[i].innerText+=' ' + String.fromCodePoint(10004);<br \/>\n      \/\/alert(1);<br \/>\n      } else if (morethanone &gt; 1) {<br \/>\n      adone=false;<br \/>\n      if (sin.options[i].innerText.split(String.fromCodePoint(10004)).length &gt; 1) {<br \/>\n        if (sin.options[i].innerText.split(String.fromCodePoint(10004))[1].trim() != '') {<br \/>\n          adone=true;<br \/>\n        }<br \/>\n      }<br \/>\n      if (!adone) { sin.options[i].innerText=sin.options[i].innerText.split(String.fromCodePoint(10004))[0] + String.fromCodePoint(10004); }<br \/>\n      }<br \/>\n      if ((sin.options[i].value + '|').indexOf('|') != -1) {<br \/>\n        \/\/if (gmlist.indexOf((sin.options[i].value + '|').split('|')[0]) == -1) {<br \/>\n    if ((',' + gmlist.replace(\/\\ \/g,'') + ',').indexOf(',' + (sin.options[i].value + '|').split('|')[0].replace(\/\\ \/g,'') + ',') == -1) {<br \/>\n      if (gmlist == '') {<br \/>\n        gmlist=(sin.options[i].value + '|').split('|')[0];<br \/>\n      } else {<br \/>\n        gmlist+=',' + (sin.options[i].value + '|').split('|')[0];<br \/>\n      }<br \/>\n        if ((sin.options[i].innerText + ' ').indexOf(' ' + gmlist.split(',').length + ' ') == -1) {<br \/>\n        sin.options[i].innerText+=' ' + gmlist.split(',').length;<br \/>\n        }<br \/>\n      \/\/alert(3);<br \/>\n        }<br \/>\n      } else {<br \/>\n      adone=false;<br \/>\n      if (sin.options[i].innerText.split(String.fromCodePoint(10004)).length &gt; 1) {<br \/>\n        if (sin.options[i].innerText.split(String.fromCodePoint(10004))[1].trim() != '') {<br \/>\n          adone=true;<br \/>\n        }<br \/>\n      }<br \/>\n      \/\/alert('adone=' + adone);<br \/>\n      }<br \/>\n    } else if (morethanone &gt; 1) {<br \/>\n      if (sin.options[i].innerText.indexOf(String.fromCodePoint(10004)) != -1) {<br \/>\n        sin.options[i].innerText=sin.options[i].innerText.split(String.fromCodePoint(10004))[0];<br \/>\n      \/\/alert(2);<br \/>\n        sin.options[i].style.backgroundColor='white';<br \/>\n      \/\/} else {<br \/>\n      \/\/alert(7);<br \/>\n      }<br \/>\n    } else if (invl.indexOf(sin.options[i].value) == 0) {<br \/>\n      adone=false;<br \/>\n      if (sin.options[i].innerText.split(String.fromCodePoint(10004)).length &gt; 1) {<br \/>\n        if (sin.options[i].innerText.split(String.fromCodePoint(10004))[1].trim() != '') {<br \/>\n          adone=true;<br \/>\n        }<br \/>\n      }<br \/>\n      \/\/alert('5:' + morethanone + ':' + invl + ' adone=' + adone + ' gmlist=' + gmlist);<br \/>\n    }<br \/>\n   }<br \/>\n<br \/>\n  if (isvalid) {<br \/>\n    invlo.style.backgroundColor='rgb(230,230,230)';<br \/>\n    if ((invlo.innerText + ' ').indexOf(' ' + gmlist.split(',').length + ' ') == -1) {<br \/>\n    invlo.innerText+=' ' + gmlist.split(',').length;<br \/>\n    }<br \/>\n    validcall=false;<br \/>\n    if (morethanone == 1) {<br \/>\n      \/\/alert(8);<br \/>\n    document.body.style.cursor='progress';<br \/>\n    setTimeout(scoreit, 15000);<br \/>\n    } else {<br \/>\n      \/\/alert(9);<br \/>\n    scoreit();<br \/>\n    }<br \/>\n  } else {<br \/>\n      \/\/alert(0);<br \/>\n    document.body.style.cursor='progress';<br \/>\n    setTimeout(scoreit, 15000);<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>And so you could try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html-GETME\" title=\"one_or_several_quiz.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html-GETME\" title=\"one_or_several_quiz.html\">one_or_several_quiz.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\" title=\"Click picture\">One or Several Did You Know Quiz<\/a> web application, below as well &#8230;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-multiple-tutorial\/'>One or Several Did You Know Quiz Multiple Tutorial<\/a>.<\/p-->\n<hr>\n<p id='osdykqpt'>Previous relevant <a target=_blank title='One or Several Did You Know Quiz Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-primer-tutorial\/'>One or Several Did You Know Quiz Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One or Several Did You Know Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.jpg\" title=\"One or Several Did You Know Quiz Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One or Several Did You Know Quiz Primer Tutorial<\/p><\/div>\n<p>The inspiration for today&#8217;s &#8220;One or Several Did You Know Quiz&#8221; web application came from yesterday&#8217;s <a target=_blank title='YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial' href=''https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-singular-multiple-dropdown-tutorial\/'>YouTube Embedded Iframe API Summary Singular Multiple Dropdown Tutorial<\/a> select element&#8217;s option subelement&#8217;s onclick event logic whereby we turn the &#8220;multiple&#8221; attribute on for the dropdown, and work the logic so that all of &#8230;<\/p>\n<ul>\n<li>single question and single answer<\/li>\n<li>single question and block of consecutive answers<\/li>\n<li>single question and multiple answers in any order<\/li>\n<li>single question and multiple answers in a particular order<\/li>\n<\/ul>\n<p> &#8230; quiz answer modi operandi are catered for.  Even for today&#8217;s quiz scenario &#8230;<\/p>\n<ul>\n<li>swap the need for an accompanying button next to a select <a target=_blank title='HTML select element multiple attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>&#8220;multiple&#8221;<\/a> attribute dropdown &#8230; with &#8230;<\/li>\n<li>select (dropdown) element option subelement set of &#8220;onclick&#8221; logic call event logics linked with <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a> delay methodologies<\/li>\n<\/ul>\n<p>This means we can have a quiz with a &#8220;potpourri&#8221; feel to it with questions that can have answers that are &#8230;<\/p>\n<ul>\n<li>single answer <font size=1>&#8230; single question and single answer<\/font><\/li>\n<li>block of consecutive answers (suits select &#8220;multiple&#8221; shift key usage) <font size=1>&#8230; single question and block of consecutive answers<\/font><\/li>\n<li>single or &#8220;command or ctrl key&#8221; option clicks (where order can be a part of the analysis) <font size=1>&#8230; single question and multiple answers in any order and single question and multiple answers in a particular order<\/font><\/li>\n<\/ul>\n<p> &#8230; meaning your quiz can be quite interesting, perhaps a little whacky, for your users.<\/p>\n<p>Here&#8217;s that select element option subelement event quiz logic (as a result of the &#8220;inspiration&#8221; mentioned above) &#8230;<\/p>\n<p><code><br \/>\nfunction oneanswer(invlo) {<br \/>\n  var invl=invlo.value + '|';<br \/>\n  if (invl == '') { return ''; }<br \/>\n  inthegame=true;<br \/>\n  var isvalid=false;<br \/>\n  var morethanone=0;<br \/>\n  if (('' + invl).indexOf('|') != -1) {<br \/>\n    if (gmlist.indexOf(invl.split('|')[0]) == -1) {<br \/>\n      isvalid=true;<br \/>\n      if (gmlist == '') {<br \/>\n        gmlist=invl.split('|')[0];<br \/>\n      } else {<br \/>\n        gmlist+=',' + invl.split('|')[0];<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/ alert('gmlist=' + gmlist);<br \/>\n  }<br \/>\n<br \/>\n   var sin=document.getElementById('answer');<br \/>\n   for (var ii=1; ii&lt;sin.options.length; ii++) {<br \/>\n    if (sin.options[ii].selected) {<br \/>\n      morethanone++;<br \/>\n    }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   if (morethanone &gt; 1) {<br \/>\n    gmlist='';<br \/>\n    isvalid=false;<br \/>\n   }<br \/>\n<br \/> <br \/>\n   for (var i=1; i&lt;sin.options.length; i++) {<br \/>\n    if (sin.options[i].selected) {<br \/>\n      if (sin.options[i].innerText.indexOf(String.fromCodePoint(10004)) == -1) {<br \/>\n      sin.options[i].innerText+=' ' + String.fromCodePoint(10004);<br \/>\n      } else if (morethanone &gt; 1) {<br \/>\n      sin.options[i].innerText=sin.options[i].innerText.split(String.fromCodePoint(10004))[0] + String.fromCodePoint(10004);<br \/>\n      }<br \/>\n      if ((sin.options[i].value + '|').indexOf('|') != -1) {<br \/>\n        if (gmlist.indexOf((sin.options[i].value + '|').split('|')[0]) == -1) {<br \/>\n      if (gmlist == '') {<br \/>\n        gmlist=(sin.options[i].value + '|').split('|')[0];<br \/>\n      } else {<br \/>\n        gmlist+=',' + (sin.options[i].value + '|').split('|')[0];<br \/>\n      }<br \/>\n        sin.options[i].innerText+=' ' + gmlist.split(',').length;<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (morethanone &gt; 1) {<br \/>\n      if (sin.options[i].innerText.indexOf(String.fromCodePoint(10004)) != -1) {<br \/>\n        sin.options[i].innerText=sin.options[i].innerText.split(String.fromCodePoint(10004))[0];<br \/>\n        sin.options[i].style.backgroundColor='white';<br \/>\n      }<br \/>\n    }<br \/>\n   }<br \/>\n<br \/>\n  if (isvalid) {<br \/>\n    invlo.style.backgroundColor='rgb(230,230,230)';<br \/>\n    invlo.innerText+=' ' + gmlist.split(',').length;<br \/>\n    validcall=false;<br \/>\n    if (morethanone == 1) {<br \/>\n    setTimeout(scoreit, 9000);<br \/>\n    } else {<br \/>\n    scoreit();<br \/>\n    }<br \/>\n  } else {<br \/>\n    setTimeout(scoreit, 9000);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>So try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html_GETME\" title=\"one_or_several_quiz.html\">one_or_several_quiz.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\" title=\"Click picture\">One or Several Did You Know Quiz<\/a> web application, below as well &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/one_or_several_quiz.html\" title=\"Click picture\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d52858' onclick='var dv=document.getElementById(\"d52858\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52858' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d52876' onclick='var dv=document.getElementById(\"d52876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52876' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d52876' onclick='var dv=document.getElementById(\"d52876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52876' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The word &#8220;statically&#8221; in yesterday&#8217;s One or Several Did You Know Quiz Multiple Tutorial can have an adverse effect on me. Static &#8220;HTML&#8221; is pretty boring, unless the data is something to write home about. Even dynamic HTML powered by &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-tailored-quiz-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[3157,103,290,2276,2147,367,1683,476,576,652,2415,2092,861,2273,919,997,1761,1022,1866,1126,3721,1319],"class_list":["post-52884","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-accountablity","tag-array","tag-data","tag-delimitation","tag-delimiter","tag-dropdown","tag-dynamic","tag-game","tag-html","tag-javascript","tag-localstorage","tag-multiple","tag-onclick","tag-option","tag-personalization","tag-programming","tag-prompt","tag-quiz","tag-select","tag-settimeout","tag-static","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52884"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=52884"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52884\/revisions"}],"predecessor-version":[{"id":52887,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52884\/revisions\/52887"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}