{"id":52876,"date":"2021-08-02T03:01:00","date_gmt":"2021-08-01T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52876"},"modified":"2021-08-01T19:25:07","modified_gmt":"2021-08-01T09:25:07","slug":"one-or-several-did-you-know-quiz-multiple-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-multiple-tutorial\/","title":{"rendered":"One or Several Did You Know Quiz Multiple 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 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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s One or Several Did You Know Quiz Primer Tutorial represented part one of two (so far) &#8220;dropdown helps out quiz&#8221; paradigm. Yesterday was &#8230; single question and single answer single question and block of consecutive answers single question and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-multiple-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":[103,290,2276,2147,367,476,576,652,2092,861,2273,997,1022,1866,1126,1319],"class_list":["post-52876","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-data","tag-delimitation","tag-delimiter","tag-dropdown","tag-game","tag-html","tag-javascript","tag-multiple","tag-onclick","tag-option","tag-programming","tag-quiz","tag-select","tag-settimeout","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52876"}],"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=52876"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52876\/revisions"}],"predecessor-version":[{"id":52883,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52876\/revisions\/52883"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}