{"id":52858,"date":"2021-08-01T03:01:25","date_gmt":"2021-07-31T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52858"},"modified":"2021-07-30T20:56:40","modified_gmt":"2021-07-30T10:56:40","slug":"one-or-several-did-you-know-quiz-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-or-several-did-you-know-quiz-primer-tutorial\/","title":{"rendered":"One or Several Did You Know Quiz Primer 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 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","protected":false},"excerpt":{"rendered":"<p>The inspiration for today&#8217;s &#8220;One or Several Did You Know Quiz&#8221; web application came from yesterday&#8217;s<\/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":[367,476,576,652,2092,861,2273,997,1022,1866,1126,1319],"class_list":["post-52858","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","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\/52858"}],"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=52858"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52858\/revisions"}],"predecessor-version":[{"id":52868,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52858\/revisions\/52868"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}