<!doctype html>
<html>
<head>
<title>Wikipedia Based Placename Flipcard Quiz - RJM Programming - August, 2019 - Thanks to https://www.w3schools.com/howto/howto_css_flip_card.asp</title>
<style>
th { text-align: center; }
td { text-align: center; }

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}

/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
</style>
<script type='text/javascript'>
var tplaces=[];
var sortedtplaces=[];
var places=[];
var unsortedplaces=[];
var both=[];
var choice=0, score=0, goes=0;
var latlong=false, latis=0.0, longis=0.0;
var divih='', diviho='';
var gcbit='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=MyTitle&onclick=y&aregexographicals=y&aregeographicals=http.Argeo&peninfo=75.57|-92.28|127958_Argeo&width=460&height=286&country=Places&popularity=&data=%20[75.57|-92.28|~Argeo~,2]';
var ourgcbit='';
var lastif='';
var proposedurl='';

function getarray() {
var ih='', jjjj=0;
if (tplaces.length == 0) {
andlater();
var opts=document.getElementById('sele').innerHTML.split('</option>');
for (var ii=0; ii<opts.length; ii++) {
if (opts[ii].indexOf(' value=""') != -1) {
ih+=opts[ii] + '</option>';
} else if (opts[ii].indexOf('</') == -1 && opts[ii].split('>')[eval(-1 + opts[ii].split('>').length)].indexOf('/') != -1) {
tplaces.push(opts[ii].split('>')[eval(-1 + opts[ii].split('>').length)]);
unsortedplaces.push(tplaces[eval(-1 + tplaces.length)].split('/')[eval(-1 + tplaces[eval(-1 + tplaces.length)].split('/').length)].replace(/_/g,' '));
both.push(tplaces[eval(-1 + tplaces.length)].split('/')[eval(-1 + tplaces[eval(-1 + tplaces.length)].split('/').length)].replace(/_/g,' ') + '|' + tplaces[eval(-1 + tplaces.length)]);
}
}
unsortedplaces.sort();
places=[];
//alert(unsortedplaces[1]);
for (var iiii=0; iiii<unsortedplaces.length; iiii++) {
places.push(unsortedplaces[iiii]);
for (jjjj=0; jjjj<both.length; jjjj++) {
if (both[jjjj].indexOf(unsortedplaces[iiii] + '|') == 0 && ih.indexOf('>' + unsortedplaces[iiii] + '</option>') == -1) {
sortedtplaces.push(tplaces[jjjj]);
ih+='<option value="' + tplaces[jjjj] + '">' + unsortedplaces[iiii] + '</option>';
//alert(ih);
}
}
//document.getElementById('sele').innerHTML=document.getElementById('sele').innerHTML.replace('>' + tplaces[iii] + '<', '>' + places[iii] + '<');
}
document.getElementById('sele').innerHTML=ih;
//for (var iii=0; iii<tplaces.length; iii++) {
// document.getElementById('sele').innerHTML=document.getElementById('sele').innerHTML.replace('>' + tplaces[iii] + '<', '>' + places[iii] + '<');
//}
pickone();
} else if (document.getElementById('ourcanvas').outerHTML.indexOf('background') != -1 && (document.getElementById('ourcanvasp').innerHTML != divih || document.getElementById('ourcanvas').outerHTML.indexOf(' data-geo="') != -1 || document.getElementById('ourcanvas').outerHTML.indexOf('background') != -1)) {
andlater();
document.getElementById('otitle').innerHTML='Please pick a place ... or ...';
} else {
setTimeout(pickone, 2000);
}
}

function pickone() {
choice=Math.floor(Math.random() * sortedtplaces.length);
// curl http://localhost:8888/PHP/fgc/index.php?tzexact=Africa/Accra
document.getElementById('iflipcard').style.visibility='hidden';
document.getElementById('myp1').innerHTML=sortedtplaces[choice].split('/')[0];
document.getElementById('myp2').innerHTML='';
document.getElementById('tzi').src='../PHP/fgc/?tzexact=' + encodeURIComponent(sortedtplaces[choice].replace(/\ /g,'_')) + '&rval=' + Math.floor(Math.random() * 12789564);
proposedurl='./colour_wheel.html?mode=' + encodeURIComponent(sortedtplaces[choice]);
//document.getElementById('imore').style.display='none';
//document.getElementById('imore').src=''; //./colour_wheel.html?mode=' + encodeURIComponent(sortedtplaces[choice]); // + '&r=' + Math.floor(Math.random() * 1987654323);
//setTimeout(andlater, 2000);
}

function andlater() {
latlong=false;
if (document.getElementById('ourcanvas').outerHTML.indexOf(' data-geo="') != -1) {
latlong=true;
ourgcbit=gcbit.replace(/MyTitle/g, encodeURIComponent(places[choice]));
ourgcbit=ourgcbit.replace(/Argeo/g, encodeURIComponent(places[choice]));
document.getElementById('myp2').innerHTML=document.getElementById('ourcanvas').getAttribute('data-geo');
latis=eval(document.getElementById('myp2').innerHTML.split(',')[0]);
longis=eval(document.getElementById('myp2').innerHTML.split(',')[1]);
ourgcbit=ourgcbit.replace(/75\.57/g, '' + latis);
ourgcbit=ourgcbit.replace(/\-92\.28/g, '' + longis);
if (ourgcbit.indexOf('undefined') != -1) { ourgcbit=''; }
document.getElementById('ourcanvas').removeAttribute('data-geo');
} else {
ourgcbit='';
document.getElementById('myp2').innerHTML='';
}
}

function anal(iois) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
try {
if (aconto.document) { aconto = aconto.document; }
if (lastif == '') {
if (aconto.body.innerHTML.length > 200) { lastif=aconto.body.innerHTML; }
} else if (aconto.body.innerHTML == lastif) {
if (aconto.body.innerHTML.length > 200) { iois.style.display='none'; }
} else {
if (aconto.body.innerHTML.length > 200) { lastif=aconto.body.innerHTML; }
}
} catch(ewe) {
}
}
}

function atl() {
document.getElementById('imore').src=proposedurl;
}

function checkanswer(iselv) {
var qhuh=false;
goes++;
if (iselv.toLowerCase() == sortedtplaces[choice].toLowerCase() || iselv.toLowerCase() == places[choice].toLowerCase()) {
score++;
document.getElementById('texplanationgeomap').innerHTML='';
if (document.getElementById('imore')) {
if (('' + document.getElementById('imore').style.display).toLowerCase().indexOf('none') != -1) { document.getElementById('imore').style.display='inline-block'; }
document.getElementById('imore').style.visibility='hidden';
//document.getElementById('imore').src='';
}
document.getElementById('score').innerHTML='' + score + '/' + goes;
} else {
document.getElementById('score').innerHTML='' + score + '/' + goes;
qhuh=confirm('Correct answer is ' + places[choice] + ' and you can see more as a map to left and below as a timezone clock, as you require?');
if (qhuh) {
if (ourgcbit == '') {
document.getElementById('texplanationgeomap').innerHTML='';
} else {
document.getElementById('tdqhuh').style.backgroundColor='#f0f0f0';
document.getElementById('qbit').style.backgroundColor='#f0f0f0';
document.getElementById('qbit').style.borderLeft='1px dotted red';
document.getElementById('qbit').style.borderBottom='1px dotted red';
document.getElementById('texplanationgeomap').innerHTML='<iframe style="display:inline-block;width:470px;height:480px;" src="' + ourgcbit + '"></iframe>';
}
//document.title+=' ... ' + './colour_wheel.html?mode=' + encodeURIComponent(sortedtplaces[choice]) + '&r=' + Math.floor(Math.random() * 1987654323);
if (document.getElementById('imore')) {
if (('' + document.getElementById('imore').style.display).toLowerCase().indexOf('none') != -1) { document.getElementById('imore').style.display='inline-block'; }
document.getElementById('imore').style.visibility='visible'; //.display='inline-block';
setTimeout(atl,2000); //document.getElementById('imore').src=proposedurl; //'./colour_wheel.html?mode=' + encodeURIComponent(sortedtplaces[choice]); // + '&r=' + Math.floor(Math.random() * 1987654323);
}
} else {
document.getElementById('texplanationgeomap').innerHTML='';
if (document.getElementById('imore')) {
if (('' + document.getElementById('imore').style.display).toLowerCase().indexOf('none') != -1) { document.getElementById('imore').style.display='inline-block'; }
document.getElementById('imore').style.visibility='hidden'; //.display='none';
//document.getElementById('imore').src=''; //./colour_wheel.html?mode=' + encodeURIComponent(sortedtplaces[choice]); // + '&r=' + Math.floor(Math.random() * 1987654323);
}
}
}
if (1 == 1) {
document.getElementById('ourcanvasp').innerHTML=divih;
} else {
document.getElementById('ourcanvas').innerHTML='<img id=iflipcard src="//www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">';
}
document.getElementById('otitle').innerHTML='Please wait ... then pick a place ... or ...';
document.getElementById('sele').value='';
document.getElementById('myguess').value='';
setTimeout(pickone,3000);
}

function atstart() {
divih=document.getElementById('ourcanvasp').innerHTML;
diviho=document.getElementById('ourcanvas').outerHTML;
}
</script>
</head>
<body onload='atstart();'>
<h1 style='width:100%;text-align:center;'>Wikipedia Based Placename Flipcard Quiz</h1>
<h3 style='width:100%;text-align:center;'>RJM Programming - August, 2019</h3>
<h4 style='width:100%;text-align:center;'>Thanks to <a target=_blank title='W3schools Flipcard information, thanks' href='https://www.w3schools.com/howto/howto_css_flip_card.asp'>W3schools</a> and <a target=_blank title='Wikipedia, thanks' href='https://wikipedia.org'>Wikipedia</a> and <a target=_blank href='https://developers.google.com/chart/interactive/docs/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google</a></h4>
<table style="width:100%;" border=30>
<tr><th>          Answer</th><th style="width:300px;">Place Images (flip for hints)</th><th>Score</th></tr>
<tr><td style='vertical-align:top;'><div style='display:inline-block;width:55%;vertical-align:top;' id=texplanationgeomap></div><div style='display:inline-block;width:45%;vertical-align:top;'><div id=qbit><br><select onchange='checkanswer(this.value);' id=sele><option id=otitle value="">Please wait ... then pick a place ... or ...</option></select><br><br><input onblur="checkanswer(this.value);" placeholder="Type placename here ..." id="myguess" type="text" value=""></input><br> </div><iframe onload='anal(this);' style='margin-top:-160px;margin-left:-100px;transform:scale(0.5);transform-origin(0px 0px);display:none;width:100%;height:800px;' id=imore src=''></iframe></td><td id=tdqhuh style='vertical-align:top;'><div class="flip-card">
<div class="flip-card-inner" id="ourcanvasp">
<div class="flip-card-front" id="ourcanvas">
<img id=iflipcard src="//www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1 id=myh1></h1>
<p id=myp1></p>
<p id=myp2></p>
</div>
</div>
</div>
</div></td><td id='score' style='vertical-align:top;'>0/0</td></tr></table>
<iframe onload='setTimeout(getarray,2000);' style='display:none;' id=tzi src='../PHP/fgc/?tzlist=y'></iframe>
</body>
</html>