<!doctype html>
<html>
<head>
<title>Wikipedia Based Placename Flipcard Quiz - RJM Programming - August, 2019 - Thanks to <a target=_blank title='W3schools Flipcard information, thanks' href='https://www.w3schools.com/howto/howto_css_flip_card.asp'>W3schools</a></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='';
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);
//setTimeout(andlater, 2000);
}
function andlater() {
latlong=false;
if (document.getElementById('ourcanvas').outerHTML.indexOf(' data-geo="') != -1) {
latlong=true;
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]);
document.getElementById('ourcanvas').removeAttribute('data-geo');
} else {
document.getElementById('myp2').innerHTML='';
}
}
function checkanswer(iselv) {
goes++;
if (iselv.toLowerCase() == sortedtplaces[choice].toLowerCase() || iselv.toLowerCase() == places[choice].toLowerCase()) {
score++;
document.getElementById('score').innerHTML='' + score + '/' + goes;
} else {
document.getElementById('score').innerHTML='' + score + '/' + goes;
alert('Correct answer is ' + places[choice]);
}
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='';
pickone();
}
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></h4>
<table style="width:100%;" border=50>
<tr><th>Answer</th><th style="width:300px;">Place Images (flip for hints)</th><th>Score</th></tr>
<tr><td><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></td><td><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>
</td><td id='score'>0/0</td></tr></table>
<iframe onload='setTimeout(getarray,2000);' style='display:none;' id=tzi src='../PHP/fgc/?tzlist=y'></iframe>
</body>
</html>