One of the great things about โฆ
- peer to peer thinking โฆ grouping โฆ
- web applications into a suite of software โฆ to form a more powerful โtoolโ โฆ is that it โฆ
- lends itself to thinking, as far as logic goes, to either/both โฆ
- external Javascript โฆ on the clientside โฆ and perhaps โฆ
- include/require serverside (eg. PHP) thinking โฆ and so it is the case that the good thing โฆ
โฆ is that all this infers โmodularizationโ โฆ an aspirational word for us, creating โorderโ in the minds of those โwho donโt mind messโ โฆ cough, cough.
And so, further to the โbeep logicโ of yesterdayโs Google Chart Geo Chart Quiz Beep Tutorial weโre happy regarding the order of play here, because โฆ
- yesterdayโs Google Chart Geo Chart Quiz Beep Tutorial scenario(s) had aspects crueling many thoughts regarding โgenericizationโ because of that delay needed to set up any new quiz question (the situation regarding would be too different for every scenario, whereas todayโs โpeer to peerโ target had a โscore paradigmโ where there was potential for genericization in a useful external Javascript scenario) โฆ and yet โฆ
- taught us lots about โbeep logicโ
โฆ and that, along with the recent โpeer to peerโ ideas of PHP Intl Class Peer To Peer Locale Variants World Map Tutorial meant that a revisit of the Country Quiz โpeer to peerโ web applications of Country Quizzes Mobile Makeover Tutorial, below, led us to think โฆ
Could we develop a beep.js โฆ could we?
โฆ whose influence is โฆ
- optional
- improving the user experience โฆ for some (hence the โoptionalโ here)
- encourage user interactivity
Codewise โฆ
- beepjs external Javascript โฆ helps out โฆ
- Country Capital Quiz country_capital_quizphp (with this liverun link), featuring these changes
- Country Currency Quiz country_currency_quizphp (with this liverun link), featuring these changes
- Country Flag Quiz country_flag_quizphp (with this liverun link), featuring these changes
Did you know?
A consideration in external Javascript development is, if a user on another domain, puts into their โheadโ (element code) โฆ
<script type="text/javascript" src="//www.rjmprogramming.com.au/beep.js" defer></script>
โฆ 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โs comment facilities.
Previous relevant Country Quizzes Mobile Makeover Tutorial is shown below.
Itโs interesting, when making a web application like the Country Quiz ones of yesterdayโs Country Quizzes Makeover Tutorial how when making it better for mobile platforms, with their smaller device widths, you often end up wanting to increase font sizes. Go Figure!
Well, we figure โฆ personally โฆ it revolves around how the mobile platform keyboards take up about a third of a iPhone sized device screen.
You can fight it, or get flexible, and weโve decided on the latter, and taken inspiration from this scene of Hitch โฆ keep it small, keep it simple, and donโt think you can just programmatically scroll everywhere you might want to on any given webpage using mobile platforms.
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 โmobile landโ can be traced down to a very small area of the โstarting outโ onload event screen content, and we just need to enhance what is shown in that area which is the โtweeners areaโ in among where โฆ
- table header cells โthโ (2x) meet โฆ and also meet โฆ
- top part of where table data cells โtdโ (2x) meet
โฆ because of that zooming in to focussed input type=text textboxes that goes on with mobile platforms. And in this scenario โฆ
<table>
<tr><th>Country</th><th>X[Modes of Use Dropdown]</th></tr>
<tr><td>[Country Dropdown]</td><td>[Text Box]</td></tr>
</table>
โฆ X marks the spot where the score and wrong answer explanations could be temporarily (for 20 seconds at a time) copied to, to allow the most important information to the user regarding the quiz be โabove the foldโ 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 โzoomingโ replaces the need, we are often feeling, on mobile platforms, for larger font size usage.
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 X with <span id=container style=font-size:8px;></span> as you analyze โฆ
function currencycheck(inv) {
if (inv.value != '') {
var suffix='';
goes++;
if (ourcomp(inv.value,document.getElementById('country').value)) {
score++;
} else if (document.getElementById(countryids[choice]).outerHTML.indexOf('<p') == 0 || document.getElementById(countryids[choice]).outerHTML.indexOf('<span') == 0) {
suffix=' The country ' + document.getElementById(countryids[choice]).id.replace(/_/g,' ') + ' (' + countrycodes[choice] + ') <BR>represented by <span>' + document.getElementById(countryids[choice]).innerHTML + '</span> <BR>has the currency ' + document.getElementById(countryids[choice]).title;
} else {
suffix=' The country ' + document.getElementById(countryids[choice]).id.replace(/_/g,' ') + ' (' + countrycodes[choice] + ') <BR>represented by <img src=' + document.getElementById(countryids[choice]).src + '></img> <BR>has the currency ' + document.getElementById(countryids[choice]).title;
}
if (document.getElementById('ssuffix')) {
document.gteElementById('ssuffix').innerHTML=suffix; suffix='';
}
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes + suffix; choose();
if (suffix != '' && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//document.body.style.zoom='1';
//window.scrollTo(0,0);
if (document.getElementById('container')) {
document.getElementById('country').scrollIntoView();
if (document.getElementById('ssuffix')) {
document.getElementById('container').innerHTML=(document.getElementById('score').innerHTML + ' ').replace('The country ', '<br>The country ').replace('has the currency ', 'has the currency <br>');
} else {
document.getElementById('container').innerHTML=(document.getElementById('score').innerHTML + ' ').replace('The country ', '<br>The country ').replace('has the currency ', 'has the currency <br>');
}
if (document.getElementById('thleft')) {
document.getElementById('thleft').scrollIntoView();
} else {
document.getElementById('container').scrollIntoView();
}
setTimeout(nocontainer, 20000);
} else {
document.getElementById('myh1').scrollIntoView();
}
}
}
}
function nocontainer() {
document.getElementById('container').innerHTML='';
}
Again, with this โpeer to peerโ web application suite they share the use of โฆ
- themodified country_quizjs external Javascript โฆ among โฆ
- Country Capital Quiz country_capital_quizphp (with this liverun link), featuring these changes
- Country Currency Quiz country_currency_quizphp (with this liverun link), featuring these changes
- Country Flag Quiz country_flag_quizphp (with this liverun link), featuring these changes
Previous relevant Country Quizzes Makeover Tutorial is shown below.
Itโs been more than a year since a visit to the Country Quiz web applications of Country Quizzes Wikipedia Image Integration Tutorial, involving โthe we are fam-il-yโ style โฆ
- Country Capitals Quiz
- Country Currency Quiz
- Country Flags Quiz
โฆ and some of us agree that it can be the sure case that โฆ
โฆ and so, weโre back!
Since then, on a revisit, we thought the optional quiz โinforming optionsโ could be expanded upon from the existant โฆ
- YouTube Video
- Wikipedia Images โฆ to also include, as of today โฆ
- GeoJson World Map
- TimeZone Places โฆ and โฆ
- Google Image Chart Map Chart
Data wise we started collecting Country ISO-3166 2 character Codes โฆ
<?php
$foundcc=''; // global
// later used ...
$postbits=explode("<", str_replace('<span>','',str_replace('</span>','',$ctysarr[$ihj])));
if (yourflag($postbits[0]) != '') {
// blah blah ...
$scriptis=str_replace("</scr" . "ipt>", " countries.push(\"" . str_replace("_", " ", $postbits[0]) . "\"); countryids.push(\"" . $idis . "\"); countryccs.push(\"" . $foundcc . "\"); num++; \n</scr" . "ipt>", $scriptis);
// blah blah ...
}
function yourflag($incn) {
global $iso_country_codes, $foundcc;
for ($jk=1; $jk<sizeof($iso_country_codes); $jk+=2) {
if (strtoupper($iso_country_codes[$jk]) == strtoupper($incn)) {
$foundcc=strtoupper($iso_country_codes[-1 + $jk]);
return orflag(strtoupper($iso_country_codes[-1 + $jk]));
}
}
return '';
}
function orflag($incc) {
global $foundcc;
$uretv='';
$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"];
$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"];
for ($jjm=0; $jjm<strlen($incc); $jjm++) {
for ($jm=0; $jm<sizeof($lri); $jm++) {
if (strtoupper(substr(substr($incc,$jjm),0,1)) == $lri[$jm]) {
$uretv.='&#' . $dri[$jm] . ";";
$foundcc=$incc;
}
}
}
return $uretv;
}
?>
โฆ and found this to be a wise move, not just to do with linking to some of these new โinformational helpersโ 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.
With this โpeer to peerโ web application suite they share the use of โฆ
- themodified country_quizjs external Javascript โฆ among โฆ
- Country Capital Quiz country_capital_quizphp (with this liverun link), featuring these changes
- Country Currency Quiz country_currency_quizphp (with this liverun link), featuring these changes
- Country Flag Quiz country_flag_quizphp (with this liverun link), featuring these changes
Previous relevant Country Quizzes Wikipedia Image Integration Tutorial is shown below.
We wanted to offer some optional Wikipedia Image lookup functionality as an alternative to the optional existent YouTube Video lookup functionality in the โฆ
- Country Capital Quiz country_capital_quizphp (with this liverun link), featuring these changes
- Country Currency Quiz country_currency_quizphp (with this liverun link), featuring these changes
- Country Flag Quiz country_flag_quizphp (with this liverun link), featuring these changes
โฆ peer to peer linked (via dropdown selection) web applications weโve talked about in the past with Country via Capital Placeholder Quiz Game Tutorial.
Before this idea came to us, the way functionality was optional led us to use an input type=checkbox to represent this idea. Even with the new Wikipedia Image choice, to us, this does not change, as itโs optional.
But the choice between the two optionals is a choice, and so โฆ we have to choose among โฆ
- select (ie. dropdown)
- radio buttons
- checkbox buttons
โฆ 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 UX-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โd prefer a horizontal display that is โall seenโ (even on mobile), today, weโve plumped for radio buttons, but not used, perhaps, the way you might be more familiar with, within a form and using a shared name attribute passed along with a value through to the โcalledโ. No, we use the onclick event of each radio button to glean the choice without any HTML form help. See relevant changed code from the peer to peer shared andmodified country_quizjs external Javascript โฆ
<script type=โtext/javascriptโ>
function check(inv) {
var ourcis="";
if (inv.value != "") {
if (document.URL.indexOf('_flag_') != -1) {
if (document.getElementById('fav_opt').value == 'wi') {
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,'_'));
} else {
ourcis="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=" + encodeURIComponent(" flag of " + document.getElementById(countryids[choice]).title);
}
flagcheck(inv);
} else if (document.URL.indexOf('_capital_') != -1) {
if (document.getElementById('fav_opt').value == 'wi') {
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,'_'));
} else {
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,' '));
}
capitalcheck(inv);
} else if (document.URL.indexOf('_currency_') != -1) {
if (document.getElementById('fav_opt').value == 'wi') {
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,'_'));
} else {
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,' '));
}
currencycheck(inv);
}
if (trjm != null) {
document.getElementById('iback').src=ourcis;
document.getElementById('iback').style.display='block';
}
}
}
function ronclk(cv) {
var wasv=document.getElementById('fav_opt').value;
if (wasv == 'yv' && cv != 'yv') {
document.getElementById('fav_opt').value='wi';
} else if (wasv == 'wi' && cv != 'wi') {
document.getElementById('fav_opt').value='yv';
}
}
function andquizthen() {
// xpreandquizthen();
if (trjm == null) {
trjm=document.getElementsByTagName('h3')[0];
if (trjm != null) {
trjm.innerHTML+=' <input onchange=" if (trjm == null) { trjm=this; } else { trjm=null; } ifon(); " type="checkbox" name="youtube" id="youtube" value="Optional YouTube Video lookups" checked>Optional <input type=hidden id=fav_opt value=yv></input><input onclick=ronclk("yv"); type="radio" id="yv" name="fav_opt" value="YouTube Video" checked><label for="yv">YouTube <font size=1>Video</font></label><!--br--><input onclick=ronclk("wi"); type="radio" id="wi" name="fav_opt" value="Wikipedia Images"><label for="wi">Wikipedia <font size=1>Images</font></label>';
document.body.innerHTML+="<div id=ourcanvas><iframe id='iback' style='height:700px;width:100%;display:none;background-color:transparent;border:7px solid lightblue;' src='//www.rjmprogramming.com.au'></iframe></div><div id=dstyle style=display:none;></div><div id=stz style=display:none;></div><input id=addthis type=hidden value=''></input>";
choose();
}
}
}
</script>
Previous relevant Country via Capital Placeholder Quiz Game Tutorial is shown below.
Our latest favourite HTML styling feature is the HTML placeholder attribute. We like its โฆ
- ability to be a replacement for a label or caption, especially when designing an HTML form, and hence, saving space
- similar ability to be able to direct a user via a default suggestion
- 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
โฆ its transparency a great advantage that we are just starting out on a quest to realize how using it can help.
Today, we add a โCountry via (a placeholder revealed) Capitalโ block of functionality onto what weโd already coded for when we presented Country Quiz Game Suite Google Geo Chart Javascript Tutorial.
Thereโ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 HTML/Javascript Multiple Choice Quiz Reveal Tutorial. In practical terms, imagine (some of) the (relevant) innards of a Javascript function fit โฆ
var anal=0, capis='';
function fit() {
if (eval(-1 + anal) < capis.length) {
document.getElementById('icapital').placeholder+=capis.substring(anal,eval(1 + anal)).replace('_',' ');
anal++;
setTimeout(fit,1500);
}
}
If you want to try this new bit of functionality, try this liverun with underlying PHP country_capital_quizphp code that changedin this way.
Previous relevant Country Quiz Game Suite Google Geo Chart Javascript Tutorial is shown below.
Our blog posting titles lately (most recently Country Quiz Game Suite Google Geo Chart Post Tutorial) have used the word โsuiteโ for describing some โpeer to peerโ web applications that can navigate from one to the other with our Country Quiz game regarding โฆ
- Capitals
- Flags
- Currencies
โฆ and we used that first โCapitalsโ web application of the โsuiteโ (as the guinea pig) to iron out issues related to our additional contextual Google Chart Geo Chart HTML iframe โhelperโ. We had it in our mind, in order of preference, weโd like to present this last โbringing it all togetherโ blog posting showing the whole โsuiteโ with this new functionality, that we would โฆ
- change the common country_quizjs featuring these changes 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 โpared backโ almost to the way it looked a long time ago) โฆ or โฆ
- 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
Alas, trying that first option, we believe we ran into timing issues related to when the external Javascript is โpulled inโ and we couldnโt get that method to work, and so โฆ boo, hoo โฆ 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 โxโ and/or commented out) still there for a future โEurekaโ moment, weโre hoping. Perhaps it relates to the defer method of calling this external Javascript.
So, less generic, but instructive, in any case, crystallizing commonalities (or not โฆ eg. the flags web application should not have an active onchange event Geo Chart bit of logic attached) and so that leaves us with our changed country_capital_quiz.php Capitals (Quiz) โguinea pigโ (with this liverun link, featuring these changes inspired by making โฆ
- Flags PHP country_flag_quizphp (with this liverun link), featuring these changes
- Currency PHP country_currency_quizphp (with this liverun link), featuring these changes
โฆ fit into this similar โsuiteโ mode of thinking regarding Country Quiz additional (contextual) Google Chart Geo Chart functionality.
Recapping (why weโve been referring to โsuiteโ), these โpeer to peerโ web applications navigate to each other by the changing value to an HTML select element โdropdownโ (and kicking off the onchange event navigation logic) the look of which, they all share.
Previous relevant Country Quiz Game Suite Google Geo Chart Post Tutorial is shown below.
If you read yesterdayโs Country Quiz Game Suite Google Geo Chart Tutorial as shown below, why, right there and then, didnโt we apply these changes (to the โCapitalโ web application) onto the whole suite of Country Quizzes, those being โฆ
- Capital
- Flag
- Currency
? Well, thereโ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 โfall overโ โฆ thatโs what programmerโs say when there is a weakness (and/or a bug) to do with โnot catering forโ untoward scenarios. The reason it would โfall overโ, 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โs HTML iframe element would push it over the length limit for (form method=) โGETโ 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.
So here is what we are going to do. You see how we said โ(form method=) โGETโ URLsโ above?
- we donโt have an HTML form โฆ but you could โฆ and to simulate the stringing together of a URL and placing it, Javascript DOM-wise, into the src property of the HTML iframe, is to have an HTML form with input elements whose name properties point at the ?/&[name]=[value] and value properties โฆ doh โฆ point at ?/&[name]=[value] and have a method=โGETโ action=//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php target=[nameOfRelevantIframe] โฆ or โฆ
- do everything the same as above except that method=โPOSTโ and in this way there are much less stringent data length restrictions โฆ youโll be quizzing until dinner time โฆ hey, why arenโt you making dinner?!
Weโre going to go from the stringing a URL together to passing that โstringed together URLโ as a parameter into a pretty generic Javascript function as per โฆ
function checkforpost(insg, owhere) {
var outs=insg, fbits='<form style=display:none; target=\"myipost\" method=\"POST\" action=\"//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php\"><input type=submit id=myspost value=Submit></input><input name=wellinever value=y type=hidden></input></form>';
if (insg.length > 950) {
var outarr=insg.split('#')[0].split('?');
if (outarr.length > 1) {
var outarrtwo=outarr[1].split('&'), oath;
for (var im=0; im<outarrtwo.length; im++) {
oath=outarrtwo[im].split('=');
fbits=fbits.replace('</form>','<input type=hidden name=' + oath[0] + ' value=\"' + (oath[1]) + '\"></input></form>');
}
}
if (owhere == null) {
owhere=document.getElementById('mydpost');
if (owhere == null) {
if (document.getElementById('mydpost')) {
document.getElementById('mydpost').innerHTML=fbits;
setTimeout(andlater,1500);
outs=\"#\";
} else {
document.body.innerHTML+='<div id=mydpost>' + fbits + '</div>';
setTimeout(andlater,1500);
outs=\"#\";
}
} else {
owhere.innerHTML=fbits;
setTimeout(andlater,1500);
outs=\"#\";
}
} else {
owhere.innerHTML=fbits;
setTimeout(andlater,1500);
outs=\"#\";
}
}
return outs;
}
function andlater() {
document.getElementById('myspost').click();
}
โฆ to cater for lots of quizzing.
And so that leaves us with our changed country_capital_quizphp (with this liverun link), featuring these changes.
Previous relevant Country Quiz Game Suite Google Geo Chart Tutorial is shown below.
We think there are several interesting thing about Charts โฆ
- they are a way to visualise mathematical ideas, which is not always easy
- they interface really well with spreadsheets
- in the case of Google Charts, especially with their Geo Chart and Map Chart, there is a great link to geography
- they can simplify complex data
- they can put trends into an easily digestible graphical form
- they can show the distribution of data
โฆ 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 Country Quiz Game Suite Google Geo Chart Tutorial, as shown below.
The point here is that many of us struggle to locate all the countries of the world you can think of, but isnโt it of interest for us all to get better at this, if the dream of the Internet as the โSuperhighwayโ 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?
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 Country Quiz Game Suite Google Geo Chart Tutorial. Weโll buy into that today with our changed country_capital_quizphp (with this liverun link), featuring these changes.
Previous relevant Country Quiz Game Suite Google Geo Chart Tutorial is shown below.
Today we are adding optional functionality to our previous web application from Country Quiz Game Suite Tutorial as shown below, and so it seems apt that we add one word for the title of todayโs tutorial called โCountry Quiz Game Suite YouTube Tutorialโ, and that added word is โYouTubeโ, the biggest repository of videos in the online world.
So we are trying to spice up the โdryโ look of the โCountry Quiz Game Suiteโ 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 โYouTubeโ search for this, rather than a search engine search? For us, yes, and this can be put down to the wonders of the YouTube API designed for embedding in HTML iframe elements, which you can read a thread of blog posts about from Karaoke via YouTube API in Iframe Email Tutorial down. This ability is a huge UX positive for use of these web applications, on mobile platforms in particular, because the YouTube video โinterfaceโ 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 โlosing the plotโ.
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.
So far weโve talked about what the changes involve, and now weโll turn our attention to how these changes were achieved. In broad brush terms โฆ
- we introduce new external Javascript you could call country_quizjs called by the parent โฆ
- Country Flag Quiz โฆ country_flag_quizphp (changed just to do with calling that external Javascript as per thislink) and with this liverun
- Country Currency Quiz โฆ country_currency_quizphp (changed just to do with calling that external Javascript as per thislink) and with this liverun
- Country Capital Quiz โฆ country_capital_quizphp (changed just to do with calling that external Javascript as per thislink) and with this liverun
โฆ using a call like โฆ
<script type='text/javascript' src='country_quiz.js' defer='defer'></script>
- the defer HTML script tag attribute used to delay its loading to the end of loading, and also placed so that โฆ
- the call of the external Javascript is placed after local Javascript script tag client logic, because โฆ
- we โoverloadโ the local Javascript โfunction check()โ with a version from the external Javascript country_quizjs, and weโve discussed this Javascript style of overloading, before, when we presented Javascript Function Overload Primer Tutorial (where we overloaded the โencodeURIComponentโ method) โฆ and in that โฆ
- external Javascript country_quizjs โfunction check()โ potentially loads YouTube API functionality to an HTML iframe element which was first created via โฆ
- a one off setTimeout piece of logic is called by the external Javascript country_quizjs to โฆ
- append the HTML for that YouTube API HTML iframe โcontainerโ element to document.body
- 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
โฆ this setTimeout methodology remaining as independent from any potential logic clashes with parent HTML Javascript onload event logic
- as such, be easily unit tested within themselves โฆ but โฆ
- they each have a similar, and really easy, approach to, just right at the end of coding โฆ ie. when they are all individually coded โฆ link them to be pointable at each other โpeer to peerโ โฆ guess the difference here, unlike our penchant for โparent/childโ (which we are also very fond of), each web application component is independent and of โequalโ status in our tiny little woooorrrrrrlllld!
- Country Flag Quiz โฆ from yesterday (with Country Flag Quiz Game Primer Tutorial as shown below) โฆ country_flag_quizphp (and the only one to โchangeโ, as such, as per thislink โฆ as described further below) liverun โฆ to both of โฆ
- Country Currency Quiz โฆ new country_currency_quizphp liverun โฆ and โฆ
- Country Capital Quiz โฆ new country_capital_quizphp liverun โฆ but not like this โcapitalโ โฆ chortle, chortle โฆ
- Country Flag Quiz โฆ thanks to Tiki Wiki CMS โฆ effectively giving up a country list to work with โฆ and โฆ
- Country Currency Quiz โฆ thanks to this link links countries to currencies (and (3 letter) country codes and (3 letter) currency codes) โฆ and โฆ
- Country Capital Quiz โฆ thanks to this link links countries to capitals
Nothing changes about the peer to peer nature of this โCountry Quiz Game Suiteโ of web applications, so we encourage you to try any/all of them โฆ letโs try โฆ flags.
Previous relevant Country Quiz Game Suite Tutorial is shown below.
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.
That joy, for us, is when you get into a pattern of completely peer to peer software components, in our case PHP serverside web applications. What do we mean by peer to peer in the way we feel about the thought? It means that several, usually small, completely independent web applications can โฆ
โฆ and this really appeals to us. Sometimes such an arrangement can be thought of as a โsuiteโ of web applications (or programs).
So what is that really simple mechanism of linking โฆ
? We just have a rearranged HTML select (dropdown) element as below (exemplified below for the โCountry Capital Quizโ) โฆ
<select onchange=' location.href="//www.rjmprogramming.com.au/PHP/country_" + this.value.toLowerCase() + "_quiz.php"; '><option value=Capital>Capital</option><option value=Currency>Currency</option><option value=Flag>Flag</option></select>
โฆ but just arrange for the โhomeโ top HTML option element to point at the quiz theme of interest for that piece of web application PHP software.
And the placement of such a dropdown? Well, we often annoy our HTML h1 elements with such dropdowns, but weโve been a little more UXy 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 โnetโ land!
And this is what we like to think of as โclobberingโ (but we encourage you to think of a less aggressive word perhaps) 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 โsome of us we like to rollโ.
Now, perhaps you are thinking it rather cheeky to say that this is so peer to peer with the quiz concepts being so different, and yes, that is so, but what does bring things together is the generosity of the โnetโ and its data resources to find out information, so, weโd like to thank โฆ
If you donโt have an interest in a server side language like PHP to glean such information, please consider Ajax programming techniques to be able to (just) stick with HTML and Javascript and CSS (client side) coding. But if you do โฆ your PHP homework for today is to read about the file_get_contents method.
Previous relevant Country Flag Quiz Game Primer Tutorial is shown below.
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โs โCountry Flag Quizโ web application, that we also talk about at WordPress 4.1.1โs Country Flag Quiz Game Primer Tutorial, 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 โฆ but we digress โฆ to come up with a pass mark for the game.
Todayโs game we wrote in PHP (that you could call country_flag_quizphp and which you can try with todayโs liverun link) and used its Supercalifragilisticexpialidocious glob method โฆ weโve spoken about (quite a bit) here.
We need to thank the excellent Tiki Wiki CMS product (which you can try for yourself at this test website) for the help with the country flag imagery, as well, today.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.