{"id":66096,"date":"2024-12-19T03:01:00","date_gmt":"2024-12-18T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66096"},"modified":"2024-12-19T06:01:51","modified_gmt":"2024-12-18T20:01:51","slug":"country-quizzes-beep-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/country-quizzes-beep-tutorial\/","title":{"rendered":"Country Quizzes Beep Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php?capital_country=y\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quizzes Beep Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz_beep.gif\" title=\"Country Quizzes Beep Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quizzes Beep Tutorial<\/p><\/div>\n<p>One of the great things about &#8230;<\/p>\n<ul>\n<li>peer to peer thinking &#8230; grouping &#8230;<\/li>\n<li>web applications into a suite of software &#8230; to form a more powerful &#8220;tool&#8221; &#8230; is that it &#8230;<\/li>\n<li>lends itself to thinking, as far as logic goes, to either\/both &#8230;\n<ol>\n<li>external Javascript &#8230; on the clientside &#8230; and perhaps &#8230;<\/li>\n<li>include\/require serverside (eg. PHP) thinking &#8230; and so it is the case that the good thing &#8230;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; is that all this infers <a target=\"_blank\" title='Modular programming information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Modular_programming' rel=\"noopener\">&#8220;modularization&#8221;<\/a> &#8230; an aspirational word for us, creating &#8220;order&#8221; in the minds of those &#8220;who don&#8217;t mind mess&#8221; &#8230; <font size=1>cough, cough<\/font>.<\/p>\n<p>And so, further to the &#8220;beep logic&#8221; of yesterday&#8217;s <a target=\"_blank\" title='Google Chart Geo Chart Quiz Beep Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-quiz-beep-tutorial\/' rel=\"noopener\">Google Chart Geo Chart Quiz Beep Tutorial<\/a> we&#8217;re happy regarding the order of play here, because &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s <a target=\"_blank\" title='Google Chart Geo Chart Quiz Beep Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-quiz-beep-tutorial\/' rel=\"noopener\">Google Chart Geo Chart Quiz Beep Tutorial<\/a> scenario(s) had aspects crueling many thoughts regarding &#8220;genericization&#8221; because of that delay needed to set up any new quiz question <font size=1>(the situation regarding would be too different for every scenario, whereas today&#8217;s &#8220;peer to peer&#8221; target had a &#8220;score paradigm&#8221; where there was potential for genericization in a useful external Javascript scenario)<\/font> &#8230; and yet &#8230;<\/li>\n<li>taught us lots about &#8220;beep logic&#8221;<\/li>\n<\/ul>\n<p> &#8230; and that, along with the recent &#8220;peer to peer&#8221; ideas of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-intl-class-peer-to-peer-locale-variants-world-map-tutorial\/' title='PHP Intl Class Peer To Peer Locale Variants World Map Tutorial' rel=\"noopener\">PHP Intl Class Peer To Peer Locale Variants World Map Tutorial<\/a> meant that a revisit of the Country Quiz &#8220;peer to peer&#8221; web applications of <a title='Country Quizzes Mobile Makeover Tutorial' href='#cqmmt'>Country Quizzes Mobile Makeover Tutorial<\/a>, below, led us to think &#8230;<\/p>\n<blockquote><p>\nCould we develop a beep.js &#8230; could we?\n<\/p><\/blockquote>\n<p> &#8230; whose influence is &#8230;<?p><\/p>\n<ul>\n<li>optional<\/li>\n<li>improving the user experience <font size=2>&#8230; for some <\/font><font size=1>(hence the &#8220;optional&#8221; here)<\/font><\/li>\n<li>encourage user interactivity<\/li>\n<\/ul>\n<blockquote><p>\n<a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=Tlme-pPNt5c#t=1m47s' rel=\"noopener\">Would we?<\/a>\n<\/p><\/blockquote>\n<p>Codewise &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/beep.js_GETME\" rel=\"noopener\">beep.js<\/a> external Javascript &#8230; helps out &#8230;<\/li>\n<li>Country Capital Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php----------GETME\" rel=\"noopener\">country_capital_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php----------GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Currency Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php------GETME\" rel=\"noopener\">country_currency_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php------GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Flag Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php-------GETME\" rel=\"noopener\">country_flag_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php-------GETME' rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>A consideration in external Javascript development is, if a user on another domain, puts into their &#8220;head&#8221; <font size=1>(element code)<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=\"text\/javascript\" src=\"\/\/www.rjmprogramming.com.au\/beep.js\" defer&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; does it have a chance of success, and being a tool outside the domain it was written on?  Or was it too specific to be of use in that way, having a set of assumptions only, in our case, apply to the RJM Programming domain scenarios?  Well, of course, our aim is the former, and any feedback, any which way on this, is available through this blog&#8217;s comment facilities.<\/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\/country-quizzes-beep-tutorial\/' rel=\"noopener\">Country Quizzes Beep Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cqmmt'>Previous relevant <a target=\"_blank\" title='Country Quizzes Mobile Makeover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-quizzes-mobile-makeover-tutorial\/' rel=\"noopener\">Country Quizzes Mobile Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php?capital_country=y\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quizzes Mobile Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz_mobile_makeover.jpg\" title=\"Country Quizzes Mobile Makeover Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quizzes Mobile Makeover Tutorial<\/p><\/div>\n<p>It&#8217;s interesting, when making a web application like the Country Quiz ones of yesterday&#8217;s <a title='Country Quizzes Makeover Tutorial' href='#cqmt'>Country Quizzes Makeover Tutorial<\/a> how when making it better for mobile platforms, with their smaller device widths, you often end up wanting to increase font sizes.   Go Figure!<\/p>\n<p>Well, we figure &#8230; personally &#8230; it revolves around how the mobile platform keyboards take up about a third of a iPhone sized device screen.<\/p>\n<p>You can fight it, or get flexible, and we&#8217;ve decided on the latter, and taken inspiration from <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=50YQeugOMOw' rel=\"noopener\">this scene of Hitch<\/a> &#8230; keep it small, keep it simple, and don&#8217;t think you can just programmatically scroll everywhere you might want to on any given webpage using mobile platforms.<\/p>\n<p>And this thought pattern set us at our ease.  Why have we fought these fundamentals, so often in the past?  It pans out, due to keyboard usage, the crux of the quizzes in &#8220;mobile land&#8221; can be traced down to a very small area of the &#8220;starting out&#8221; onload event screen content, and we just need to enhance what is shown in that area which is the &#8220;tweeners area&#8221; in among where &#8230;<\/p>\n<ul>\n<li>table header cells &#8220;th&#8221; (2x) meet &#8230; and also meet &#8230;<\/li>\n<li>top part of where table data cells &#8220;td&#8221; (2x) meet<\/li>\n<\/ul>\n<p> &#8230; because of that zooming in to focussed input type=text textboxes that goes on with mobile platforms.  And in this scenario &#8230;<\/p>\n<p><code><br \/>\n&lt;table&gt;<br \/>\n&lt;tr&gt;&lt;th&gt;Country&lt;\/th&gt;&lt;th&gt;<font color=red>X<\/font>[Modes of Use Dropdown]&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;[Country Dropdown]&lt;\/td&gt;&lt;td&gt;[Text Box]&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=red>X<\/font> marks the spot where the score and wrong answer explanations could be temporarily <font size=1>(for 20 seconds at a time)<\/font> copied to, to allow the most important information to the user regarding the quiz be &#8220;above the fold&#8221; for the user, perhaps doing away with any need for the mobile user to scroll anywhere, for the running of their basic quiz incarnation.  This &#8220;zooming&#8221; replaces the need, we are often feeling, on mobile platforms, for larger font size usage.<\/p>\n<p>Take a look at our external Javascript function to cover the checking of answers made at the Country Currency Quiz, and map into your mind <font color=red>X<\/font> with <i>&lt;span id=container style=font-size:8px;&gt;&lt;\/span&gt;<\/i> <font color=blue>as you analyze<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction currencycheck(inv) {<br \/>\n  if (inv.value != '') {<br \/>\n    var suffix='';<br \/>\n    goes++;<br \/>\n    if (ourcomp(inv.value,document.getElementById('country').value)) {<br \/>\n      score++;<br \/>\n    } else if (document.getElementById(countryids[choice]).outerHTML.indexOf('&lt;p') == 0 || document.getElementById(countryids[choice]).outerHTML.indexOf('&lt;span') == 0) {<br \/>\n      suffix=' The country ' + document.getElementById(countryids[choice]).id.replace(\/_\/g,' ') + ' (' + countrycodes[choice] + ') &lt;BR&gt;represented by &lt;span&gt;' + document.getElementById(countryids[choice]).innerHTML + '&lt;\/span&gt; &lt;BR&gt;has the currency ' + document.getElementById(countryids[choice]).title;<br \/>\n    } else {<br \/>\n      suffix=' The country ' + document.getElementById(countryids[choice]).id.replace(\/_\/g,' ') + ' (' + countrycodes[choice] + ') &lt;BR&gt;represented by &lt;img src=' + document.getElementById(countryids[choice]).src + '&gt;&lt;\/img&gt; &lt;BR&gt;has the currency ' + document.getElementById(countryids[choice]).title;<br \/>\n    }<br \/>\n    if (document.getElementById('ssuffix')) {<br \/>\n      document.gteElementById('ssuffix').innerHTML=suffix; suffix='';<br \/>\n    }<br \/>\n    document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes + suffix;   choose();<br \/>\n  <font color=blue>if (suffix != '' && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    \/\/document.body.style.zoom='1';<br \/>\n    \/\/window.scrollTo(0,0);<br \/>\n    if (document.getElementById('container')) {<br \/>\n       document.getElementById('country').scrollIntoView();<br \/>\n       if (document.getElementById('ssuffix')) {<br \/>\n       document.getElementById('container').innerHTML=(document.getElementById('score').innerHTML + '&amp;nbsp;&amp;nbsp;').replace('The country ', '&lt;br&gt;The country ').replace('has the currency ', 'has the currency &lt;br&gt;');<br \/>\n       } else {<br \/>\n       document.getElementById('container').innerHTML=(document.getElementById('score').innerHTML + '&amp;nbsp;&amp;nbsp;').replace('The country ', '&lt;br&gt;The country ').replace('has the currency ', 'has the currency &lt;br&gt;');<br \/>\n       }<br \/>\n       if (document.getElementById('thleft')) {<br \/>\n       document.getElementById('thleft').scrollIntoView();<br \/>\n       } else {<br \/>\n       document.getElementById('container').scrollIntoView();<br \/>\n       }<br \/>\n       setTimeout(nocontainer, 20000);<br \/>\n    } else {<br \/>\n       document.getElementById('myh1').scrollIntoView();<br \/>\n    }<br \/>\n  }<\/font><br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n<font color=blue>function nocontainer() {<br \/>\n   document.getElementById('container').innerHTML='';<br \/>\n}<\/font><br \/>\n<\/code><\/p>\n<p>Again, with this &#8220;peer to peer&#8221; web application suite they share the use of &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js-----GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js-----GETME\" rel=\"noopener\">country_quiz.js<\/a> external Javascript &#8230; among &#8230;<\/li>\n<li>Country Capital Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php---------GETME\" rel=\"noopener\">country_capital_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php---------GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Currency Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php-----GETME\" rel=\"noopener\">country_currency_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php-----GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Flag Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php------GETME\" rel=\"noopener\">country_flag_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php------GETME' rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\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\/country-quizzes-mobile-makeover-tutorial\/' rel=\"noopener\">Country Quizzes Mobile Makeover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cqmt'>Previous relevant <a target=\"_blank\" title='Country Quizzes Makeover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-quizzes-makeover-tutorial\/' rel=\"noopener\">Country Quizzes Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php?capital_country=y\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quizzes Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quizmakeover.jpg\" title=\"Country Quizzes Makeover Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quizzes Makeover Tutorial<\/p><\/div>\n<p>It&#8217;s been more than a year since a visit to the Country Quiz web applications of <a title='Country Quizzes Wikipedia Image Integration Tutorial' href='#cqwiit'>Country Quizzes Wikipedia Image Integration Tutorial<\/a>, involving <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=eBpYgpF1bqQ' rel=\"noopener\">&#8220;the <i>we are fam-il-y<\/i>&#8221; style<\/a> &#8230;<\/p>\n<ul>\n<li>Country Capitals Quiz<\/li>\n<li>Country Currency Quiz<\/li>\n<li>Country Flags Quiz<\/li>\n<\/ul>\n<p> &#8230; and some of us agree that it can be the <font size=1>sure<\/font> case <font size=1>that<\/font> &#8230;<\/p>\n<blockquote cite='https:\/\/www.google.com\/search?q=fat+on+a+rolling+stone&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=fat+on+a+rolling+stone&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjIICAQQABgWGB4yCAgFEAAYFhgeMg0IBhAAGIYDGIAEGIoFMg0IBxAAGIYDGIAEGIoFMg0ICBAAGIYDGIAEGIoFMg0ICRAAGIYDGIAEGIoF0gEINTYzMmowajSoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8'><p>\n<a target=\"_blank\" href=\"https:\/\/www.google.com\/search?q=fat+on+a+rolling+stone&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=fat+on+a+rolling+stone&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yCAgCEAAYFhgeMggIAxAAGBYYHjIICAQQABgWGB4yCAgFEAAYFhgeMg0IBhAAGIYDGIAEGIoFMg0IBxAAGIYDGIAEGIoFMg0ICBAAGIYDGIAEGIoFMg0ICRAAGIYDGIAEGIoF0gEINTYzMmowajSoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8\" title='?' rel=\"noopener\">moss grows fat on a rolling stone<\/a>\n<\/p><\/blockquote>\n<p> &#8230; and so, we&#8217;re back!<\/p>\n<p>Since then, on a revisit, we thought the optional quiz &#8220;informing options&#8221; could be expanded upon from the existant &#8230;<\/p>\n<ul>\n<li>YouTube Video<\/li>\n<li>Wikipedia Images &#8230; to also include, as of today &#8230;<\/li>\n<li>GeoJson World Map<\/li>\n<li>TimeZone Places &#8230; and &#8230;<\/li>\n<li>Google Image Chart Map Chart<\/li>\n<\/ul>\n<p>Data wise <font color=blue>we started<\/font> collecting Country <a target=\"_blank\" title='ISO_3166-2 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/ISO_3166-2' rel=\"noopener\"><sub>ISO-3166 2 character<\/sub><\/a> Codes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  <font color=blue>$foundcc=''; <\/font>  \/\/ global<br \/>\n  <br \/>\n  \/\/ later used ...<br \/>\n  <br \/>\n  $postbits=explode(\"&lt;\", str_replace('&lt;span&gt;','',str_replace('&lt;\/span&gt;','',$ctysarr[$ihj])));<br \/>\n  <font color=blue>if (yourflag($postbits[0]) != '') {<\/font><br \/>\n  \/\/ blah blah ...<br \/>\n  $scriptis=str_replace(\"&lt;\/scr\" . \"ipt&gt;\", \" countries.push(\\\"\" . str_replace(\"_\", \" \", $postbits[0]) . \"\\\");  countryids.push(\\\"\" . $idis . \"\\\"); <font color=blue>countryccs.push(\\\"\" . $foundcc . \"\\\");<\/font> num++; \\n&lt;\/scr\" . \"ipt&gt;\", $scriptis);<br \/>\n  \/\/ blah blah ...<br \/>\n  <font color=blue>}<\/font><br \/>\n<br \/>\n<font color=blue>function yourflag($incn) {<br \/>\n   global $iso_country_codes, $foundcc;<br \/>\n   for ($jk=1; $jk&lt;sizeof($iso_country_codes); $jk+=2) {<br \/>\n      if (strtoupper($iso_country_codes[$jk]) == strtoupper($incn)) {<br \/>\n        $foundcc=strtoupper($iso_country_codes[-1 + $jk]);<br \/>\n        return orflag(strtoupper($iso_country_codes[-1 + $jk]));<br \/>\n      }<br \/>\n   }<br \/>\n   return '';<br \/>\n}<br \/>\n<br \/>\nfunction orflag($incc) {<br \/>\n    global $foundcc;<br \/>\n    $uretv='';<br \/>\n    $lri=[\"A\",\"B\",\"C\",\"D\",\"E\",\"F\",\"G\",\"H\",\"I\",\"J\",\"K\",\"L\",\"M\",\"N\",\"O\",\"P\",\"Q\",\"R\",\"S\",\"T\",\"U\",\"V\",\"W\",\"X\",\"Y\",\"Z\"];<br \/>\n    $dri=[\"127462\",\"127463\",\"127464\",\"127465\",\"127466\",\"127467\",\"127468\",\"127469\",\"127470\",\"127471\",\"127472\",\"127473\",\"127474\",\"127475\",\"127476\",\"127477\",\"127478\",\"127479\",\"127480\",\"127481\",\"127482\",\"127483\",\"127484\",\"127485\",\"127486\",\"127487\"];<br \/>\n    for ($jjm=0; $jjm&lt;strlen($incc); $jjm++) {<br \/>\n      for ($jm=0; $jm&lt;sizeof($lri); $jm++) {<br \/>\n       if (strtoupper(substr(substr($incc,$jjm),0,1)) == $lri[$jm]) {<br \/>\n         $uretv.='&#' . $dri[$jm] . \";\";<br \/>\n         $foundcc=$incc;<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    return $uretv;<br \/>\n}<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and found this to be a wise move, not just to do with linking to some of these new &#8220;informational helpers&#8221; above, but also with ideas into the future, we reckon, the main reason being that you can rely on the ISO-3166 2 character codes, while there are a wide and varied set of Country Names out there.<\/p>\n<p>With this &#8220;peer to peer&#8221; web application suite they share the use of &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js----GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js----GETME\" rel=\"noopener\">country_quiz.js<\/a> external Javascript &#8230; among &#8230;<\/li>\n<li>Country Capital Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php--------GETME\" rel=\"noopener\">country_capital_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php--------GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Currency Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php----GETME\" rel=\"noopener\">country_currency_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php----GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Flag Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php-----GETME\" rel=\"noopener\">country_flag_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php-----GETME' rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\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\/country-quizzes-makeover-tutorial\/' rel=\"noopener\">Country Quizzes Makeover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cqwiit'>Previous relevant <a target=\"_blank\" title='Country Quizzes Wikipedia Image Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-quizzes-wikipedia-image-integration-tutorial\/' rel=\"noopener\">Country Quizzes Wikipedia Image Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php?capital_country=y\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quizzes Wikipedia Image Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz_wikipedia.jpg\" title=\"Country Quizzes Wikipedia Image Integration Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quizzes Wikipedia Image Integration Tutorial<\/p><\/div>\n<p>We wanted to offer some <i>optional<\/i> Wikipedia Image lookup functionality as an alternative to the <i>optional<\/i> existent YouTube Video lookup functionality in the &#8230;<\/p>\n<ul>\n<li>Country Capital Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php-------GETME\" rel=\"noopener\">country_capital_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php-------GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Currency Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php---GETME\" rel=\"noopener\">country_currency_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php---GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Country Flag Quiz <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php----GETME\" rel=\"noopener\">country_flag_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php----GETME' rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\n<p> &#8230; peer to peer linked (via dropdown selection) web applications we&#8217;ve talked about in the past with <a title='Country via Capital Placeholder Quiz Game Tutorial' href='#ccpqgt'>Country via Capital Placeholder Quiz Game Tutorial<\/a>.<\/p>\n<p>Before this idea came to us, the way functionality was <i>optional<\/i> led us to use an <a target=\"_blank\" title='HTML input type=checkbox checkbox information from w3schools' href='http:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_checkbox' rel=\"noopener\">input type=checkbox<\/a> to represent this idea.  Even with the new Wikipedia Image choice, to us, this does not change, as it&#8217;s <i>optional<\/i>.<\/p>\n<p>But the choice between the two <i>optional<\/i>s is a choice, and so &#8230; we have to choose among &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/www.w3schools.com\/tags\/tag_select.asp' title='HTML select tag information from w3schools' rel=\"noopener\">select<\/a> (ie. dropdown)<\/li>\n<li><a target=\"_blank\" title='HTML input type=radio radio button information from w3schools' href='http:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_radio' rel=\"noopener\">radio buttons<\/a><\/li>\n<li>checkbox buttons<\/li>\n<\/ul>\n<p> &#8230; usage for this second-tier user choice.  Well, the checkbox buttons are definitely inferior to the others in that we only want to present one optional lookup type of content, as well as the awkwardness of two checkboxes, horizontally, in a row, presentation and <a target=\"_blank\" title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience' rel=\"noopener\">UX<\/a>-wise.  Now that leaves dropdowns versus radio buttons.  Most of the time we prefer the former by a long way, but because there are only two choices and we&#8217;d prefer a horizontal display that is &#8220;all seen&#8221; (even on mobile), today, we&#8217;ve plumped for radio buttons, but not used, perhaps, the way  you might be more familiar with, within a form and using a shared <i>name<\/i> attribute passed along with a <i>value<\/i> through to the &#8220;called&#8221;.  No, we use the <i>onclick<\/i> event of each radio button to glean the choice without any HTML form help.  See relevant <font color=blue>changed<\/font> code from the peer to peer shared <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js---GETME\" rel=\"noopener\">and modified<\/a> <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js---GETME\" rel=\"noopener\">country_quiz.js<\/a> external Javascript &#8230;<\/p>\n<p>&lt;script type=&#8217;text\/javascript&#8217;&gt;<br \/>\n<code><br \/>\nfunction check(inv) {<br \/>\n  var ourcis=\"\";<br \/>\n  if (inv.value != \"\") {<br \/>\n  if (document.URL.indexOf('_flag_') != -1) {<br \/>\n    <font color=blue>if (document.getElementById('fav_opt').value == 'wi') {<br \/>\n    ourcis=\"\/\/www.rjmprogramming.com.au\/PHP\/fgc\/?tzexact=\" + encodeURIComponent(document.getElementById(countryids[choice]).title.replace(\/\\ \/g,'_')) + \"&tznickname=\" + encodeURIComponent(document.getElementById(countryids[choice]).title.replace(\/\\ \/g,'_'));<br \/>\n    } else {<\/font><br \/>\n    ourcis=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=\" + encodeURIComponent(\"  flag of \" + document.getElementById(countryids[choice]).title);<br \/>\n    <font color=blue>}<\/font><br \/>\n    flagcheck(inv);<br \/>\n  } else if (document.URL.indexOf('_capital_') != -1) {<br \/>\n    <font color=blue>if (document.getElementById('fav_opt').value == 'wi') {<br \/>\n    ourcis=\"\/\/www.rjmprogramming.com.au\/PHP\/fgc\/?tzexact=\" + encodeURIComponent(document.getElementById(countryids[choice]).id.replace(\/\\ \/g,'_')) + \"&tznickname=\" + encodeURIComponent(document.getElementById(countryids[choice]).id.replace(\/\\ \/g,'_'));<br \/>\n    } else {<\/font><br \/>\n    ourcis=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=\" + encodeURIComponent(\"  capital of \" + document.getElementById(countryids[choice]).id.replace(\/_\/g,' '));<br \/>\n    <font color=blue>}<\/font><br \/>\n    capitalcheck(inv);<br \/>\n  } else if (document.URL.indexOf('_currency_') != -1) {<br \/>\n    <font color=blue>if (document.getElementById('fav_opt').value == 'wi') {<br \/>\n    ourcis=\"\/\/www.rjmprogramming.com.au\/PHP\/fgc\/?tzexact=\" + encodeURIComponent(document.getElementById(countryids[choice]).id.replace(\/\\ \/g,'_')) + \"&tznickname=\" + encodeURIComponent(document.getElementById(countryids[choice]).id.replace(\/\\ \/g,'_'));<br \/>\n    } else {<\/font><br \/>\n    ourcis=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=\" + encodeURIComponent(\"  currency of \" + document.getElementById(countryids[choice]).id.replace(\/_\/g,' '));<br \/>\n    <font color=blue>}<\/font><br \/>\n    currencycheck(inv);<br \/>\n  }<br \/>\n  if (trjm != null) {<br \/>\n  document.getElementById('iback').src=ourcis;<br \/>\n  document.getElementById('iback').style.display='block';<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n<font color=blue>function ronclk(cv) {<br \/>\n var wasv=document.getElementById('fav_opt').value;<br \/>\n if (wasv == 'yv' && cv != 'yv') {<br \/>\n   document.getElementById('fav_opt').value='wi';<br \/>\n } else if (wasv == 'wi' && cv != 'wi') {<br \/>\n   document.getElementById('fav_opt').value='yv';<br \/>\n }<br \/>\n}<\/font><br \/>\n<br \/>\nfunction andquizthen() {<br \/>\n  \/\/ xpreandquizthen();<br \/>\n  if (trjm == null) {<br \/>\n    trjm=document.getElementsByTagName('h3')[0];<br \/>\n    if (trjm != null) {<br \/>\n      trjm.innerHTML+=' &lt;input onchange=\" if (trjm == null) { trjm=this; } else { trjm=null; } ifon(); \" type=\"checkbox\" name=\"youtube\" id=\"youtube\" value=\"Optional YouTube Video lookups\" checked&gt;Optional <font color=blue>&lt;input type=hidden id=fav_opt value=yv&gt;&lt;\/input&gt;&lt;input onclick=ronclk(\"yv\"); type=\"radio\" id=\"yv\" name=\"fav_opt\" value=\"<\/font>YouTube Video<font color=blue>\" checked&gt;&lt;label for=\"yv\"&gt;YouTube &lt;font size=1&gt;Video&lt;\/font&gt;&lt;\/label&gt;&lt;!--br--&gt;&lt;input onclick=ronclk(\"wi\"); type=\"radio\" id=\"wi\" name=\"fav_opt\" value=\"Wikipedia Images\"&gt;&lt;label for=\"wi\"&gt;Wikipedia &lt;font size=1&gt;Images&lt;\/font&gt;&lt;\/label&gt;<\/font>';<br \/>\n      document.body.innerHTML+=\"<font color=blue>&lt;div id=ourcanvas&gt;<\/font>&lt;iframe id='iback' style='height:700px;width:100%;display:none;background-color:<font color=blue>transparent<\/font>;border:7px solid lightblue;' src='\/\/www.rjmprogramming.com.au'&gt;&lt;\/iframe&gt;<font color=blue>&lt;\/div&gt;&lt;div id=dstyle style=display:none;&gt;&lt;\/div&gt;&lt;div id=stz style=display:none;&gt;&lt;\/div&gt;&lt;input id=addthis type=hidden value=''&gt;&lt;\/input&gt;<\/font>\";<br \/>\n      choose();<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&lt;\/script&gt;<\/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\/country-quizzes-wikipedia-image-integration-tutorial\/' rel=\"noopener\">Country Quizzes Wikipedia Image Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ccpqgt'>Previous relevant <a target=\"_blank\" title='Country via Capital Placeholder Quiz Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-via-capital-placeholder-quiz-game-tutorial\/' rel=\"noopener\">Country via Capital Placeholder Quiz Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php?capital_country=y\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country via Capital Placeholder Quiz Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/capital_country.jpg\" title=\"Country via Capital Placeholder Quiz Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country via Capital Placeholder Quiz Game Tutorial<\/p><\/div>\n<p>Our latest favourite HTML styling feature is the HTML <a target=\"_blank\" title='HTML placeholder attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_placeholder.asp' rel=\"noopener\">placeholder<\/a> attribute.  We like its &#8230;<\/p>\n<ul>\n<li>ability to be a replacement for a label or caption, especially when designing an HTML form, and hence, saving space<\/li>\n<li>similar ability to be able to direct a user via a default suggestion<\/li>\n<li>use that we apply with it today, is to dynamically reveal an input type=text box value, and gradually, with an effect a bit like an HTML marquee element<\/li>\n<\/ul>\n<p> &#8230; its transparency a great advantage that we are just starting out on a quest to realize how using it can help.<\/p>\n<p>Today, we add a &#8220;Country via (a placeholder revealed) Capital&#8221; block of functionality onto what we&#8217;d already coded for when we presented <a title='Country Quiz Game Suite Google Geo Chart Javascript Tutorial' href='#cqgsggcjt'>Country Quiz Game Suite Google Geo Chart Javascript Tutorial<\/a>.<\/p>\n<p>There&#8217;s no rocket science here, and no need for anything new with content, just a rearrangement of display features, but we do quite like this slightly typewriterish effect that may remind you of when we presented <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-multiple-choice-quiz-reveal-tutorial\/' title='HTML\/Javascript Multiple Choice Quiz Reveal Tutorial' rel=\"noopener\">HTML\/Javascript Multiple Choice Quiz Reveal Tutorial<\/a>.  In practical terms, imagine (some of) the (relevant) innards of a Javascript <i>function fit<\/i> &#8230;<\/p>\n<p><code><br \/>\nvar anal=0, capis='';<br \/>\n<i>function fit<\/i>() {<br \/>\n if (eval(-1 + anal) &lt; capis.length) {<br \/>\n   document.getElementById('icapital').placeholder+=capis.substring(anal,eval(1 + anal)).replace('_',' ');<br \/>\n   anal++;<br \/>\n   <a target=\"_blank\" title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' rel=\"noopener\"><i>setTimeout<\/i><\/a>(fit,1500);<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>If you want to try this new bit of functionality, try this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php?capital_country=y\" title=\"Click picture\" rel=\"noopener\">live run<\/a> with underlying PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php-----GETME\" title=\"country_capital_quiz.php\" rel=\"noopener\">country_capital_quiz.php<\/a> code that <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php-----GETME\" title=\"country_capital_quiz.php\" rel=\"noopener\">changed in this way<\/a>.<\/p>\n<hr>\n<p id='cqgsggcjt'>Previous relevant <a target=\"_blank\" title='Country Quiz Game Suite Google Geo Chart Javascript Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/country-quiz-game-suite-google-geo-chart-javascript-tutorial\/' rel=\"noopener\">Country Quiz Game Suite Google Geo Chart Javascript Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quiz Game Suite Google Geo Chart Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_suite_quiz_geo_chart.JPG\" title=\"Country Quiz Game Suite Google Geo Chart Javascript Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quiz Game Suite Google Geo Chart Javascript Tutorial<\/p><\/div>\n<p>Our blog posting titles lately (most recently <a title='Country Quiz Game Suite Google Geo Chart Post Tutorial' href='#cqgsggcpt'>Country Quiz Game Suite Google Geo Chart Post Tutorial<\/a>) have used the word &#8220;suite&#8221; for describing some &#8220;peer to peer&#8221; web applications that can navigate from one to the other with our Country Quiz game regarding &#8230;<\/p>\n<ul>\n<li>Capitals<\/li>\n<li>Flags<\/li>\n<li>Currencies<\/li>\n<\/ul>\n<p> &#8230; and we used that first &#8220;Capitals&#8221; web application of the &#8220;suite&#8221; (as the guinea pig) to iron out issues related to our additional contextual Google Chart Geo Chart HTML iframe &#8220;helper&#8221;.  We had it in our mind, in order of preference, we&#8217;d like to present this last &#8220;bringing it all together&#8221; blog posting showing the whole &#8220;suite&#8221; with this new functionality, that we would &#8230;<\/p>\n<ul>\n<li>change the common <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js--GETME\" rel=\"noopener\">country_quiz.js<\/a> featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js--GETME' rel=\"noopener\">changes<\/a> external Javascript that is shared throughout the suite of web applications, taking what was involved with changes to country_capital_quiz.php as the basis for this (to the point where country_capital_quiz.php could look &#8220;pared back&#8221; almost to the way it looked a long time ago) &#8230; or &#8230;<\/li>\n<li>for each of the other two web applications piece equivalent bits of code into those two country_flag_quiz.php and country_currency_quiz.php to make them work along with the original country_capital_quiz.php<\/li>\n<\/ul>\n<p>Alas, trying that first option, we believe we ran into timing issues related to when the external Javascript is &#8220;pulled in&#8221; and we couldn&#8217;t get that method to work, and so <font size=1> &#8230; boo, hoo &#8230;<\/font> we settled for the second solution.   Not bad, but not as aesthetically pleasing or generic as the way some generic external Javascript could be modelled to do, like, 95% of what is needed to make that Google Chart Geo Chart functionality work.  Anyway, we may end up revisiting that external Javascript which has the intended code (but prefixed by an &#8220;x&#8221; and\/or commented out) still there for a future &#8220;Eureka&#8221; moment, we&#8217;re hoping.  Perhaps it relates to the <i>defer<\/i> method of calling this external Javascript.<\/p>\n<p>So, less generic, but instructive, in any case, crystallizing commonalities (or not <font size=1> &#8230; eg. the flags web application should not have an active <i>onchange<\/i> event Geo Chart bit of logic attached<\/font>) and so that leaves us with our changed <a target=\"_blank\" title='' rel=\"noopener\">country_capital_quiz.php<\/a> Capitals (Quiz) &#8220;guinea pig&#8221; (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link,  featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php----GETME' rel=\"noopener\">changes<\/a> inspired by making &#8230;<\/p>\n<ul>\n<li>Flags PHP <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php---GETME\" rel=\"noopener\">country_flag_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php---GETME' rel=\"noopener\">changes<\/a><\/li>\n<li>Currency PHP <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php--GETME\" rel=\"noopener\">country_currency_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php--GETME' rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\n<p> &#8230; fit into this similar &#8220;suite&#8221; mode of thinking regarding Country Quiz additional (contextual) Google Chart Geo Chart functionality.<\/p>\n<p>Recapping (why we&#8217;ve been referring to &#8220;suite&#8221;), these &#8220;peer to peer&#8221; web applications navigate to each other by the changing value to an HTML select element &#8220;dropdown&#8221; (and kicking off the <i>onchange<\/i> event navigation logic) the look of which, they all share.<\/p>\n<hr>\n<p id='cqgsggcpt'>Previous relevant <a target=\"_blank\" title='Country Quiz Game Suite Google Geo Chart Post Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/country-quiz-game-suite-google-geo-chart-post-tutorial\/' rel=\"noopener\">Country Quiz Game Suite Google Geo Chart Post Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quiz Game Suite Google Geo Chart Post Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz_geo_chart_post.JPG\" title=\"Country Quiz Game Suite Google Geo Chart Post Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quiz Game Suite Google Geo Chart Post Tutorial<\/p><\/div>\n<p>If you read yesterday&#8217;s <a title='Country Quiz Game Suite Google Geo Chart Tutorial' href='#cqgsggct'>Country Quiz Game Suite Google Geo Chart Tutorial<\/a> as shown below, why, right there and then, didn&#8217;t we apply these changes (to the &#8220;Capital&#8221; web application) onto the whole suite of Country Quizzes, those being &#8230;<\/p>\n<ul>\n<li>Capital<\/li>\n<li>Flag<\/li>\n<li>Currency<\/li>\n<\/ul>\n<p>?   Well, there&#8217;s another matter to attend to.  What do you think would happen if you quizzed away for, say, ten minutes?  We think our additional Google Chart Geo Chart bit would &#8220;fall over&#8221; &#8230; that&#8217;s what programmer&#8217;s say when there is a weakness (and\/or a bug) to do with &#8220;not catering for&#8221; untoward scenarios.  The reason it would &#8220;fall over&#8221;, we believe, is that, eventually, the number of countries you string along adding to the length of the URL you push into that Google Chart Geo Chart&#8217;s HTML iframe element would push it over the length limit for (form method=) &#8220;GET&#8221; URLs, and then this, albeit optional, functionality would become unstable.   Even though the functionality is optional, if you keep ignoring such issues at the sidelines of your plans, you are likely to get lazy and produce results that disappoint your more adventurous users.<\/p>\n<p>So here is what we are going to do.  You see how we said <i>&#8216;(form method=) &#8220;GET&#8221; URLs&#8217;<\/i> above?<\/p>\n<ol>\n<li>we don&#8217;t have an HTML form <font size=1> &#8230; but you could &#8230; <\/font> and to simulate the stringing together of a URL and placing it, Javascript DOM-wise, into the <i>src<\/i> property of the HTML iframe, is to have an HTML form with input elements whose <b><i>name<\/i><\/b> properties point at the ?\/&#038;<b>[name]<\/b>=[value] and <b><i>value<\/i><\/b> properties <font size=1>&#8230; doh &#8230;<\/font> point at ?\/&#038;[name]=<b>[value]<\/b> and have a method=&#8221;GET&#8221; action=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php target=[nameOfRelevantIframe] &#8230; or &#8230;<\/li>\n<li>do everything the same as above except that <i>method=&#8221;POST&#8221;<\/i> and in this way there are much less stringent data length restrictions &#8230; <font size=1>you&#8217;ll be quizzing until dinner time &#8230; hey, why aren&#8217;t you making dinner?!<\/font><\/li>\n<\/ol>\n<p>We&#8217;re going to go from the stringing a URL together to passing that &#8220;stringed together URL&#8221; as a parameter into a pretty generic Javascript function as per &#8230;<\/p>\n<p><code><br \/>\nfunction checkforpost(insg, owhere) {<br \/>\n  var outs=insg, fbits='&lt;form style=display:none; target=\\\"myipost\\\" method=\\\"POST\\\" action=\\\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\\\"&gt;&lt;input type=submit id=myspost value=Submit&gt;&lt;\/input&gt;&lt;input name=wellinever value=y type=hidden&gt;&lt;\/input&gt;&lt;\/form&gt;';<br \/>\n  if (insg.length &gt; 950) {<br \/>\n    var outarr=insg.split('#')[0].split('?');<br \/>\n    if (outarr.length &gt; 1) {<br \/>\n       var outarrtwo=outarr[1].split('&'), oath;<br \/>\n       for (var im=0; im&lt;outarrtwo.length; im++) {<br \/>\n         oath=outarrtwo[im].split('=');<br \/>\n         fbits=fbits.replace('&lt;\/form&gt;','&lt;input type=hidden name=' + oath[0] + ' value=\\\"' + (oath[1]) + '\\\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n       }<br \/>\n    }<br \/>\n    if (owhere == null) {<br \/>\n      owhere=document.getElementById('mydpost');<br \/>\n      if (owhere == null) {<br \/>\n        if (document.getElementById('mydpost')) {<br \/>\n          document.getElementById('mydpost').innerHTML=fbits;<br \/>\n          setTimeout(andlater,1500);<br \/>\n          outs=\\\"#\\\";<br \/>\n        } else {<br \/>\n          document.body.innerHTML+='&lt;div id=mydpost&gt;' + fbits + '&lt;\/div&gt;';<br \/>\n          setTimeout(andlater,1500);<br \/>\n          outs=\\\"#\\\";<br \/>\n        }<br \/>\n      }  else {<br \/>\n        owhere.innerHTML=fbits;<br \/>\n        setTimeout(andlater,1500);<br \/>\n        outs=\\\"#\\\";<br \/>\n      }<br \/>\n    } else {<br \/>\n      owhere.innerHTML=fbits;<br \/>\n      setTimeout(andlater,1500);<br \/>\n      outs=\\\"#\\\";<br \/>\n    }<br \/>\n  }<br \/>\n  return outs;<br \/>\n}<br \/>\nfunction andlater() {<br \/>\n document.getElementById('myspost').click();<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to cater for lots of quizzing.<\/p>\n<p>And so that leaves us with our changed <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php---GETME\" rel=\"noopener\">country_capital_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php---GETME' rel=\"noopener\">changes<\/a>.<\/p>\n<hr>\n<p id='cqgsggct'>Previous relevant <a target=\"_blank\" title='Country Quiz Game Suite Google Geo Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/country-quiz-game-suite-google-geo-chart-tutorial\/' rel=\"noopener\">Country Quiz Game Suite Google Geo Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quiz Game Suite Google Geo Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz_geo_chart.JPG\" title=\"Country Quiz Game Suite Google Geo Chart Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quiz Game Suite Google Geo Chart Tutorial<\/p><\/div>\n<p>We think there are several interesting thing about Charts &#8230;<\/p>\n<ul>\n<li>they are a way to visualise mathematical ideas, which is not always easy<\/li>\n<li>they interface really well with spreadsheets<\/li>\n<li>in the case of Google Charts, especially with their Geo Chart and Map Chart, there is a great link to geography<\/li>\n<li>they can simplify complex data<\/li>\n<li>they can put trends into an easily digestible graphical form<\/li>\n<li>they can show the distribution of data<\/li>\n<\/ul>\n<p> &#8230; and we want to use that third point above today to make use of the brilliant Google Chart Geo Chart to add context to our Flags and Currency and Capital Country Quiz game we created when we last presented <a title='Country Quiz Game Suite YouTube Tutorial' href='#cqgsyt'>Country Quiz Game Suite Google Geo Chart Tutorial<\/a>, as shown below.<\/p>\n<p>The point here is that many of us struggle to locate all the countries of the world you can think of, but isn&#8217;t it of interest for us all to get better at this, if the dream of the Internet as the &#8220;Superhighway&#8221; of Knowledge and Information can improve as a force for good.   Can we all get back that idea from those earlier times, and get back to tackling problems in an International framework, where every good idea has a chance to be expressed, and heard?<\/p>\n<p>Anyway, that last change to Geo Chart interfacing got us to this point where we can highlight one or several countries (or regions), and not display that (default) legend, as we set up when we presented <a title='Country Quiz Game Suite YouTube Tutorial' href='#cqgsyt'>Country Quiz Game Suite Google Geo Chart Tutorial<\/a>.  We&#8217;ll buy into that today with our changed <a target=\"_blank\" title='' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php--GETME\" rel=\"noopener\">country_capital_quiz.php<\/a> (with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> link), featuring these <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php--GETME' rel=\"noopener\">changes<\/a>.<\/p>\n<hr>\n<p id='cqgsyt'>Previous relevant <a target=\"_blank\" title='Country Quiz Game Suite YouTube Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/country-quiz-game-suite-youtube-tutorial\/' rel=\"noopener\">Country Quiz Game Suite Google Geo Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quiz Game Suite YouTube Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.jpg\" title=\"Country Quiz Game Suite YouTube Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quiz Game Suite YouTube Tutorial<\/p><\/div>\n<p>Today we are adding optional functionality to our previous web application from <a title='Country Quiz Game Suite Tutorial' href='#cqgst'>Country Quiz Game Suite Tutorial<\/a> as shown below, and so it seems apt that we add one word for the title of today&#8217;s tutorial called &#8220;Country Quiz Game Suite YouTube Tutorial&#8221;, and that added word is <a target=\"_blank\" title='YouTube landing page' href='http:\/\/youtube.com' rel=\"noopener\">&#8220;YouTube&#8221;<\/a>, the biggest repository of videos in the online world.<\/p>\n<p>So we are trying to spice up the &#8220;dry&#8221; look of the &#8220;Country Quiz Game Suite&#8221; of web applications by adding optional lookups of YouTube so that the user can choose to watch a video about the last question that was asked about in the quiz.  Is there a reason to use a &#8220;YouTube&#8221; search for this, rather than a search engine search?  For us, yes, and this can be put down to the wonders of the <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> designed for embedding in HTML <a target=\"_blank\" title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a> elements, which you can read a thread of blog posts about from <a target=\"_blank\" title='Karaoke via YouTube API in Iframe Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-email-tutorial\/' rel=\"noopener\">Karaoke via YouTube API in Iframe Email Tutorial<\/a> down.  This ability is a huge <a target=\"_blank\" title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience' rel=\"noopener\">UX<\/a> positive for use of these web applications, on mobile platforms in particular, because the YouTube video &#8220;interface&#8221; parts of the webpage can be placed on the webpage the user is currently using, rather than having to open any new windows, and have the user be in danger of &#8220;losing the plot&#8221;.<\/p>\n<p>Added to that advantage is the way the user can do research and development on topics that may interest them.  To us, the most important point here.<\/p>\n<p>So far we&#8217;ve talked about <i>what<\/i> the changes involve, and now we&#8217;ll turn our attention to <i>how<\/i> these changes were achieved.  In broad brush terms &#8230;<\/p>\n<ul>\n<li>we introduce new external Javascript you could call <a target=\"_blank\" title=\"country_quiz.js\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js_GETME\" rel=\"noopener\">country_quiz.js<\/a> called by the parent &#8230;\n<ul>\n<li>Country Flag Quiz &#8230; <a target=\"_blank\" title='country_flag_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php--GETME' rel=\"noopener\">country_flag_quiz.php<\/a> (changed just to do with calling that external Javascript as per <a target=\"_blank\" title='country_flag_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php--GETME' rel=\"noopener\">this link<\/a>) and with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a><\/li>\n<li>Country Currency Quiz &#8230; <a target=\"_blank\" title='country_currency_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php-GETME' rel=\"noopener\">country_currency_quiz.php<\/a> (changed just to do with calling that external Javascript as per <a target=\"_blank\" title='country_currency_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php-GETME' rel=\"noopener\">this link<\/a>) and with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a><\/li>\n<li>Country Capital Quiz &#8230; <a target=\"_blank\" title='country_capital_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php-GETME' rel=\"noopener\">country_capital_quiz.php<\/a> (changed just to do with calling that external Javascript as per <a target=\"_blank\" title='country_capital_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php--GETME' rel=\"noopener\">this link<\/a>) and with this <a target=\"_blank\" title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a><\/li>\n<\/ul>\n<p>&#8230; using a call like &#8230;\n<\/li>\n<li><code>&lt;script type='text\/javascript' src='country_quiz.js' defer='defer'&gt;&lt;\/script&gt;<\/code><\/li>\n<li>the <i>defer<\/i> HTML <a target=\"_blank\" title='HTML script tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_script.asp' rel=\"noopener\">script<\/a> tag attribute used to delay its loading to the end of loading, and also placed so that &#8230;<\/li>\n<li>the call of the external Javascript is placed after local Javascript <a target=\"_blank\" title='HTML script tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_script.asp' rel=\"noopener\">script<\/a> tag client logic, because &#8230;<\/li>\n<li>we <i>&#8220;overload&#8221;<\/i> the local Javascript &#8220;function <i>check()<\/i>&#8221; with a version from the external Javascript <a target=\"_blank\" title=\"country_quiz.js\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js_GETME\" rel=\"noopener\">country_quiz.js<\/a>, and we&#8217;ve discussed this Javascript style of overloading, before, when we presented <a target=\"_blank\" title='Javascript Function Overload Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-function-overload-primer-tutorial\/' rel=\"noopener\">Javascript Function Overload Primer Tutorial<\/a> (where we overloaded the &#8220;encodeURIComponent&#8221; method) &#8230; and in that &#8230;<\/li>\n<li>external Javascript <a target=\"_blank\" title=\"country_quiz.js\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js_GETME\" rel=\"noopener\">country_quiz.js<\/a> &#8220;function <i>check()<\/i>&#8221; potentially loads YouTube API functionality to an HTML iframe element which was first created via &#8230;<\/li>\n<li>a one off <a target=\"_blank\" title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' rel=\"noopener\">setTimeout<\/a> piece of logic is called by the external Javascript <a target=\"_blank\" title=\"country_quiz.js\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_quiz.js_GETME\" rel=\"noopener\">country_quiz.js<\/a> to &#8230;\n<ul>\n<li>append the HTML for that YouTube API HTML iframe &#8220;container&#8221; element to <i>document.body<\/i><\/li>\n<li>append to the first HTML h3 element an HTML input type=checkbox, initially checked, toggling the use of that option YouTube API (to HTML iframe element) functionality<\/li>\n<\/ul>\n<p>&#8230; this <a target=\"_blank\" title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' rel=\"noopener\">setTimeout<\/a> methodology remaining as independent from any potential logic clashes with parent HTML Javascript <i>onload<\/i> event logic<\/li>\n<\/ul>\n<ul>\n<p>Nothing changes about the <i>peer to peer<\/i> nature of this &#8220;Country Quiz Game Suite&#8221; of web applications, so we encourage you to try any\/all of them &#8230; let&#8217;s try &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php\" rel=\"noopener\">flags<\/a>.<\/p>\n<hr>\n<p id='cqgst'>Previous relevant <a target=\"_blank\" title='Country Quiz Game Suite Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/Country Quiz Game Suite Tutorial\/' rel=\"noopener\">Country Quiz Game Suite Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Quiz Game Suite Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.jpg\" title=\"Country Quiz Game Suite Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Quiz Game Suite Tutorial<\/p><\/div>\n<p>Think we may have done a (web application software) set before, but honestly cannot locate it, but in any case we are here today to tell you about one of the joys of server side programming, in our case PHP.<\/p>\n<p>That joy, for us, is when you get into a pattern of completely <i>peer to peer<\/i> software components, in our case PHP serverside web applications.  What do we mean by <i>peer to peer<\/i> in the way we feel about the thought?  It means that several, usually small, completely independent web applications can &#8230;<\/p>\n<ul>\n<li>as such, be easily unit tested within themselves &#8230; but &#8230;<\/li>\n<li>they each have a similar, and really easy, approach to, just right at the end of coding &#8230; ie. when they are all individually coded &#8230; link them to be pointable at each other &#8220;<i>peer to peer<\/i>&#8221; &#8230; guess the difference here, unlike our penchant for &#8220;parent\/child&#8221; (which we are also very fond of), each web application component is independent and of &#8220;equal&#8221; status in our tiny little woooorrrrrrlllld!<\/li>\n<\/ul>\n<p> &#8230; and this really appeals to us.  Sometimes such an arrangement can be thought of as a <a target=\"_blank\" title='Suite of program information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Software_suite' rel=\"noopener\">&#8220;suite&#8221;<\/a> of web applications (or programs).<\/p>\n<p>So what is that really simple mechanism of linking &#8230;<\/p>\n<ul>\n<li>Country Flag Quiz &#8230; from yesterday (with <a title='Country Flag Quiz Game Primer Tutorial' href='#cfqgpt'>Country Flag Quiz Game Primer Tutorial<\/a> as shown below) &#8230; <a target=\"_blank\" title='country_flag_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php-GETME' rel=\"noopener\">country_flag_quiz.php<\/a> (and the only one to &#8220;change&#8221;, as such, as per <a target=\"_blank\" title='country_flag_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php-GETME' rel=\"noopener\">this link<\/a> &#8230; as described further below) <a target=\"_blank\" title='country_flag_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php' rel=\"noopener\">live run<\/a> &#8230; to both of &#8230;<\/li>\n<li>Country Currency Quiz &#8230; new <a target=\"_blank\" title='country_currency_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php_GETME' rel=\"noopener\">country_currency_quiz.php<\/a> <a target=\"_blank\" title='country_currency_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_currency_quiz.php' rel=\"noopener\">live run<\/a> &#8230; and &#8230;<\/li>\n<li>Country Capital Quiz &#8230; new <a target=\"_blank\" title='country_capital_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php_GETME' rel=\"noopener\">country_capital_quiz.php<\/a> <a target=\"_blank\" title='country_capital_quiz.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.php' rel=\"noopener\">live run<\/a> &#8230; but not like this <a target=\"_blank\" title='?' href='http:\/\/ericpetersautos.com\/2014\/10\/27\/shall\/' rel=\"noopener\">&#8220;capital&#8221;<\/a> &#8230; chortle, chortle &#8230;<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_capital_quiz.jpg\" title='Country Capital Quiz' alt='Country Capital Quiz'><\/img>\n<\/li>\n<\/ul>\n<p>?  We just have a rearranged HTML <a target=\"_blank\" title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp' rel=\"noopener\">select<\/a> (dropdown) element as below (exemplified below for the &#8220;Country Capital Quiz&#8221;) &#8230;<\/p>\n<p><code><br \/>\n&lt;select onchange=' location.href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_\" + this.value.toLowerCase() + \"_quiz.php\"; '&gt;&lt;option value=Capital&gt;Capital&lt;\/option&gt;&lt;option value=Currency&gt;Currency&lt;\/option&gt;&lt;option value=Flag&gt;Flag&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; but just arrange for the &#8220;home&#8221; top HTML option element to point at the quiz theme of interest for that piece of web application PHP software.<\/p>\n<p>And the placement of such a dropdown?  Well, we often annoy our HTML h1 elements with such dropdowns, but we&#8217;ve been a little more <a target=\"_blank\" title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience' rel=\"noopener\">UX<\/a>y today, by replacing an otherwise less dynamic (HTML (table) th element) heading (single word), with something dynamic, and perhaps useful, to some quizzer users out there in &#8220;net&#8221; land!<\/p>\n<p>And this is what we like to think of as &#8220;clobbering&#8221; <font size=1>(but we encourage you to think of a less aggressive word perhaps)<\/font> something not very dynamic with something dynamic, but optionally so, in that it is up to the user whether they make use of the added functionality, or not, is another way &#8220;<a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=TWbNQiS-TU8' rel=\"noopener\"><strike>some of us<\/strike><\/a> we like to roll&#8221;.<\/p>\n<p>Now, perhaps you are thinking it rather cheeky to say that this is so <i>peer to peer<\/i> with the quiz concepts being so different, and yes, that is so, but what does bring things together is the generosity of the &#8220;net&#8221; and its data resources to find out information, so, we&#8217;d like to thank &#8230;<\/p>\n<ul>\n<li>Country Flag Quiz &#8230; thanks to <a target=\"_blank\" title='Thanks' href='https:\/\/tiki.org\/' rel=\"noopener\">Tiki Wiki<\/a> CMS &#8230; effectively giving up a country list to work with &#8230; and &#8230;<\/li>\n<li>Country Currency Quiz &#8230; thanks to <a target=\"_blank\" title='Thanks' href='http:\/\/www.nationsonline.org\/oneworld\/currencies.htm' rel=\"noopener\">this link<\/a> links countries to currencies (and (3 letter) country codes and (3 letter) currency codes) &#8230; and &#8230;<\/li>\n<li>Country Capital Quiz &#8230; thanks to <a target=\"_blank\" title='Thanks' href='https:\/\/www.countries-ofthe-world.com\/capitals-of-the-world.html' rel=\"noopener\">this link<\/a> links countries to capitals<\/li>\n<\/ul>\n<p>If you don&#8217;t have an interest in a server side language like PHP to <i>glean<\/i> such information, please consider <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> programming techniques to be able to (just) stick with HTML and Javascript and CSS (client side) coding.  But if you do &#8230; your PHP homework for today is to read about the <a target=\"_blank\" title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents' rel=\"noopener\">file_get_contents<\/a> method.<\/p>\n<hr>\n<p id='cfqgpt'>Previous relevant <a target=\"_blank\" title='Country Flag Quiz Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/country-flag-quiz-game-primer-tutorial\/' rel=\"noopener\">Country Flag Quiz Game 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\/PHP\/country_flag_quiz.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Country Flag Quiz Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.jpg\" title=\"Country Flag Quiz Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Country Flag Quiz Game Primer Tutorial<\/p><\/div>\n<p>Often, the simpler you make the working of a web application, the more appealing it is.  Not always, but often.  Lots of us like to test our knowledge with a quiz, and lots of us have our specialty subjects.  So, today&#8217;s &#8220;Country Flag Quiz&#8221; web application, that we also talk about at WordPress 4.1.1&#8217;s <a target=\"_blank\" title='Country Flag Quiz Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/country-flag-quiz-game-primer-tutorial\/' rel=\"noopener\">Country Flag Quiz Game Primer Tutorial<\/a>, will be right up the alley of some people.  Got to say that it felt like a huge challenge to get a decent score in this game, speaking personally, and found myself resorting to &#8230; <font size=1>but we digress<\/font> &#8230; to come up with a pass mark for the game.<\/p>\n<p>Today&#8217;s game we wrote in PHP (that you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php_GETME\" rel=\"noopener\">country_flag_quiz.php<\/a> and which you can try with today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link) and used its <a target=\"_blank\" title='Supercalifragilisticexpialidocious information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Supercalifragilisticexpialidocious' rel=\"noopener\">Supercalifragilisticexpialidocious<\/a> <a target=\"_blank\" title='PHP glob method information' href='http:\/\/php.net\/manual\/en\/function.glob.php' rel=\"noopener\"><i>glob<\/i><\/a> method &#8230; we&#8217;ve spoken about (quite a bit) <a target=\"_blank\" title='PHP glob mentions here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/glob' rel=\"noopener\">here<\/a>.<\/p>\n<p>We need to thank the excellent <a target=\"_blank\" title='Tiki Wiki home page' href='https:\/\/tiki.org\/' rel=\"noopener\">Tiki Wiki<\/a> <a target=\"_blank\" title='Content Management System information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system' rel=\"noopener\">CMS<\/a> product (which you can try for yourself at this <a target=\"_blank\" title='Tiki Wiki test CMS website at RJM Programming' href='http:\/\/www.rjmprogramming.com.au\/tikiwiki' rel=\"noopener\">test website<\/a>) for the help with the country flag imagery, as well, today.<\/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='#d26423' onclick='var dv=document.getElementById(\"d26423\"); 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='d26423' 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='#d26434' onclick='var dv=document.getElementById(\"d26434\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26434' 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='#d26490' onclick='var dv=document.getElementById(\"d26490\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26490' 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='#d28116' onclick='var dv=document.getElementById(\"d28116\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28116' 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='#d28155' onclick='var dv=document.getElementById(\"d28155\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/post\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28155' 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='#d28179' onclick='var dv=document.getElementById(\"d28179\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/suite\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28179' 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='#d41251' onclick='var dv=document.getElementById(\"d41251\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/placeholder\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41251' 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='#d57741' onclick='var dv=document.getElementById(\"d57741\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/radio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57741' 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='#d62614' onclick='var dv=document.getElementById(\"d62614\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iso-3166\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62614' 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='#d62625' onclick='var dv=document.getElementById(\"d62625\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/font\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62625' 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='#d66096' onclick='var dv=document.getElementById(\"d66096\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/external-Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66096' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>One of the great things about &#8230; peer to peer thinking &#8230; grouping &#8230; web applications into a suite of software &#8230; to form a more powerful &#8220;tool&#8221; &#8230; is that it &#8230; lends itself to thinking, as far as &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/country-quizzes-beep-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":[113,141,199,211,2988,327,354,355,5025,1839,482,5024,485,652,1616,2180,3025,3440,914,997,1022,1105,1175,2005,1319,1891,5023,1402],"class_list":["post-66096","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-audio","tag-beep","tag-chart","tag-click","tag-defer","tag-did-you-know","tag-dom","tag-domain","tag-external-jacascript","tag-genericization","tag-geography","tag-geography-quiz","tag-gesture","tag-javascript","tag-modularization","tag-mp3","tag-multitasking","tag-peer","tag-peer-to-peer","tag-programming","tag-quiz","tag-script","tag-sound","tag-tool","tag-tutorial","tag-user","tag-user-click","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66096"}],"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=66096"}],"version-history":[{"count":21,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66096\/revisions"}],"predecessor-version":[{"id":66122,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66096\/revisions\/66122"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}