{"id":17784,"date":"2015-10-17T05:01:10","date_gmt":"2015-10-16T19:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17784"},"modified":"2016-02-08T17:58:24","modified_gmt":"2016-02-08T07:58:24","slug":"htmljavascript-multiple-choice-quiz-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-multiple-choice-quiz-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Multiple Choice Quiz Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Multiple Choice Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.jpg\" title=\"HTML\/Javascript Multiple Choice Quiz Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Multiple Choice Quiz Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s web application is a Multiple Choice Quiz modelled on the rules of a UK (BBC2) quiz television show called <a target=_blank title='Eggheads UK BBC2 Quiz' href='http:\/\/www.bbc.co.uk\/programmes\/b006z736'>Eggheads<\/a>, where a challenger team of 5 tries to defeat a champion team of 5 in a topic based head to head quiz followed by a General Knowledge round of the survivors to determine a winner.<\/p>\n<p>In the real Eggheads there are sudden death questions, as necessary, in all rounds, but with our rules, we only do this for the final General Knowledge collaborative round.<\/p>\n<p>This web application shares the yellow HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element as discussed in the recent <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a> as well.  This time, though, with the printing out, there are implied buttons under each word, via a white background (done with a call to the <a target=_blank title='HTML canvas fillRect() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_fillrect.asp'>fillRect()<\/a> HTML canvas method) to those bits of the canvas element.  To click on one of these white areas &#8230;<\/p>\n<ul>\n<li>allows the challenger team to answer the question posed &#8230; and then &#8230;<\/li>\n<li>sets up the corresponding champion team question, updating scores and answer information<\/li>\n<\/ul>\n<p> &#8230; using an HTML canvas element <i>onclick<\/i> event detection of mouse co-ordinates to achieve this functionality.<\/p>\n<p>The web application makes a lot of use of the Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> method to synchronize all the toings and froings in an order that makes sense, and simulates the &#8220;Egghead&#8221; champion team, who, after all, are not with you, so their actions are delayed.  By the way, with all this, don&#8217;t worry that there would be no chance of you winning against the champion &#8220;Egghead&#8221; team.  The &#8220;warts and all&#8221; mistakes made by the &#8220;Eggheads&#8221; team in the episode aired on the 25\/10\/2015 in Sydney ABC are mimicked in the answers of the champion team you are up against, and you can win if you are &#8220;on your toes&#8221;.<\/p>\n<p>We&#8217;d like to thank <a target=_blank title='Clipart Panda' href='http:\/\/www.clipartpanda.com\/clipart_images\/downloads-15907232'>Clipart Panda<\/a> for the background image used today in that similar manner as discussed with <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a>.<\/p>\n<p>For programmers interested in HTML and Javascript and CSS code (especially as you don&#8217;t need any special web hosting to test today&#8217;s code) you can see this at <a target=_blank title='Multiple Choice Quiz' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html-GETME' title='multiple_choice_quiz.html'>multiple_choice_quiz.html<\/a> and because today&#8217;s code was based so much on the recent <a target=_blank title='HTML\/Javascript Hearing and Listening Primer Tutorial' href='#hxjhalpt'>HTML\/Javascript Hearing and Listening Primer Tutorial<\/a> we also present, today, a &#8220;how we got there&#8221; differences link to peruse <a target=_blank title='Multiple Choice Quiz' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html-GETME' title='multiple_choice_quiz.html'>here<\/a>.<\/p>\n<p>We leave you with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html\" title='click picture'>live run<\/a> link to take on the &#8220;Egghead&#8221; simulator!<\/p>\n<hr>\n<p id='hxjhalpt'>Previous relevant <a target=_blank title='HTML\/Javascript Hearing and Listening Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-hearing-and-listening-primer-tutorial\/'>HTML\/Javascript Hearing and Listening 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\/listen_to.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Hearing and Listening Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/listening_and_hearing.jpg\" title=\"HTML\/Javascript Hearing and Listening Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Hearing and Listening Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a web application on the theme of Listening and Hearing, today, written such that it doesn&#8217;t need serverside (in our case, PHP) constituents, just HTML and Javascript and CSS, with a lot of help from various sources as per &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Translate' href='http:\/\/translate.google.com\/'>Google Translate<\/a> &#8230; specifically its incredibly useful <a target=_blank title='Google Translate text to speech' href='http:\/\/translate.google.com\/translate_tts?tl=en&#038;q=hello'>text to speech service<\/a> &#8230; thanks, heaps &#8230; by the way, you may be asked to fill in a <a target=_blank title='Captcha information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/CAPTCHA'>Captcha<\/a> &#8220;puzzle&#8221; when accessing the text to speech functionality when using the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/listen_to.html\" title='click picture'>live run<\/a>, and this may only happen once a session<\/li>\n<li><a target=_blank title='The Free Dictionary' href='http:\/\/thefreedictionary.com\/'>The Free Dictionary<\/a> &#8230; thanks, again<\/li>\n<li><a target=_blank title='Clipart Panda' href='http:\/\/www.clipartpanda.com\/clipart_images\/hearing-ear-32519232'>Clipart Panda<\/a> &#8230; for the background image &#8230; and the same configuration of this as we mentioned in <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a><\/li>\n<li>A Poem courtesy of this great <a target=_blank title='Poetry link' href='http:\/\/www.behappyzone.com\/happy-attitude-poems.html'>link<\/a> &#8230; thanks<\/li>\n<\/ul>\n<p>We&#8217;ve designed this web application with <a target=_blank title='English as a Second Language information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> students in mind, but it might be useful for other purposes.  The idea is the user types, or copies and pastes some wording of interest into the &#8220;words&#8221; textarea and sees it presented in the yellow HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element, printed out slowly in that same method as discussed in <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a> as well.  This time, though, with the printing out, there are implied buttons under each word, via a white background (done with a call to the <a target=_blank title='HTML canvas fillRect() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_fillrect.asp'>fillRect()<\/a> HTML canvas method) to those bits of the canvas element.  To click on one of these white areas &#8230;<\/p>\n<ol>\n<li>opens a <a target=_blank title='Javascript window.open() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open()<\/a> popup window of The Free Dictionary lookup for that word if your Language you&#8217;ve chosen in the HTML select (dropdown) element is English<\/li>\n<li>opens a window.open() popup window of Google Translate text to speech for that word in the Language you&#8217;ve chosen in the HTML select (dropdown) element<\/li>\n<\/ol>\n<p>There are limits to the amount of text Google Translate text to speech allows, and in some cases where you leave totally blank lines in your text, we may be able to &#8220;chunk&#8221; the text into several calls to Google Translate text to speech when you&#8217;ve pressed the &#8220;Hear &#128066; All the Words&#8221; button.<\/p>\n<p>Also, as in <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a>, we&#8217;ve included some Internationalization Emoji character helpers and like there, we found <a target=_blank title='Emojipedia' href='http:\/\/emojipedia.org\/'>Emojipedia<\/a> a great place to look up the concepts with better detail at the <a target=_blank title='File Format Info website' href='http:\/\/www.fileformat.info\/info\/unicode\/utf8.htm'>File Format Info<\/a> website.<\/p>\n<p>ESL students will probably have already experienced a variety of English accents, and there is no doubt this is a big thing to overcome in learning English, along with all the other challenges to do with learning another language.  The Google Translate text to speech is no different in the sense that there is an accent you should not think is going to be a typical accent, necessarily, to do with living where you&#8217;re going to be living.  But it does give you some guidelines into how words are pronounced, and it is good to have heard a word sometimes, before you hear it being spoken by a very fast speaker, for instance.  So, why not copy and paste some words off the Internet, and see how they sound by using this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/listen_to.html'>live run<\/a> link.<\/p>\n<p>For you programmers interested in HTML and Javascript and CSS code (especially as you don&#8217;t need any special web hosting to test today&#8217;s code) you can see this at <a target=_blank title='Listening and Hearing' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/listen_to.html-GETME' title='listen_to.html'>listen_to.html<\/a> and because today&#8217;s code was based so much on the supervisor HTML code of <a target=_blank title='HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-broadcast-and-listen-css-tutorial\/'>HTML\/Javascript\/PHP Broadcast and Listen CSS Tutorial<\/a> we also present, today, a &#8220;how we got there&#8221; differences link to peruse <a target=_blank title='Listening and Hearing' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/listen_to.html-GETME' title='listen_to.html'>here<\/a>.<\/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='#d17742' onclick='var dv=document.getElementById(\"d17742\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/animation\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17742' 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='#d17784' onclick='var dv=document.getElementById(\"d17784\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17784' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s web application is a Multiple Choice Quiz modelled on the rules of a UK (BBC2) quiz television show called Eggheads, where a challenger team of 5 tries to defeat a champion team of 5 in a topic based head &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-multiple-choice-quiz-primer-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":[184,299,400,476,513,532,576,652,1717,861,1022],"class_list":["post-17784","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-canvas","tag-database-2","tag-event","tag-game","tag-google","tag-google-translate","tag-html","tag-javascript","tag-multiple-choice","tag-onclick","tag-quiz"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17784"}],"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=17784"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17784\/revisions"}],"predecessor-version":[{"id":20045,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17784\/revisions\/20045"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}