PHP City Guess Country Game Geodata Tutorial
Think “where”, think “geodata”. And with this in mind, today’s improvements on yesterday’s PHP City Guess Country Game Massaging Tutorial is to, where it is available in the chain of data sources the City Guess Quiz web application accepts, if there is …
- geodata present … then offer the user …
- a hint mechanism
… in our case that being an …
- ❓ “a” link … to …
- creation of an HTML iframe call to our Google Chart Geo Chart interfacing in its …
- Latitude, Longitude mode of use … rather than …
- Country (or Region) name mode of use
… for the fairly obvious reason that we don’t want to make the quiz too easy!
It’s a combination of PHP and (PHP writing out) Javascript that help make this “hint” functionality possible …
Before any HTML, in PHP gathering together relevant geodata, where existant … <?php
$alturlis="//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=CITYGOESHERE&onclick=y&width=149&height=97&country=City&popularity=Intensity&aregeographicals=y&guess=&data=%20[LAT|LONG|~CITYGOESHERE~,1]%20";
if (strpos(strtolower($ourfilename), ".csv") !== false) { // thanks to https://simplemaps.com/data/world-cities
// "city","city_ascii","lat","lng","country","iso2","iso3","admin_name","capital","population","id"
// "Tokyo","Tokyo","35.6897","139.6922","Japan","JP","JPN","Tōkyō","primary","37977000","1392685764"
// "Jakarta","Jakarta","-6.2146","106.8451","Indonesia","ID","IDN","Jakarta","primary","34540000","1360771077"
//echo strtolower($ourfilename) . "\n";
$fchunk=data_unify($fchunk);
$bits=explode("\n", $fchunk);
$hbit=str_replace('"','',strtolower($bits[0]));
$hbits=explode(",", $hbit);
$citycol=-1;
$countrycol=-1;
$isocol=-1;
$latcol=-1;
$longcol=-1;
$latis="";
$longis="";
if (strpos(("," . $hbit . ","), ",city") !== false && strpos(("," . $hbit . ","), ",country") !== false && strpos($hbit, ",") !== false) {
for ($i=0; $i<sizeof($hbits); $i++) {
if ($citycol == -1 && strpos($hbits[$i], "city") !== false) {
$citycol=$i;
} else if ($countrycol == -1 && strpos($hbits[$i], "country") !== false) {
$countrycol=$i;
} else if ($isocol == -1 && strpos($hbits[$i], "iso") !== false) {
$isocol=$i;
}
if ($latcol == -1 && substr(($hbits[$i] . " "),0,3) == "lat") {
$latcol=$i;
if (substr(($hbits[1 + $i] . " "),0,1) == "l") {
$longcol=(1 + $i);
} else if (substr(($hbits[-1 + $i] . " "),0,1) == "l") {
$longcol=(-1 + $i);
}
}
}
if ($citycol >=0 && $countrycol >= 0) {
for ($i=1; $i<sizeof($bits); $i++) {
if ($longcol >= 0 && $latcol >= 0) {
$latis="|" . str_replace('"','',explode(",",$bits[$i])[$latcol]) . ",";
$longis=str_replace('"','',explode(",",$bits[$i])[$longcol]);
}
if (substr(str_replace('"','',explode(",",$bits[$i])[$countrycol]),0,1) >= "A") {
if (substr($bits[$i],0,1) == '"') {
$citiesarr[sizeof($citiesarr)]=str_replace('"','',explode('","',$bits[$i])[$citycol]) . $latis . $longis;
} else {
$citiesarr[sizeof($citiesarr)]=explode(",",$bits[$i])[$citycol] . $latis . $longis;
}
if (substr($bits[$i],0,1) == '"') {
$countriesarr[sizeof($countriesarr)]=str_replace('"','',explode(",",$bits[$i])[$countrycol]);
} else {
$countriesarr[sizeof($countriesarr)]=explode(",",$bits[$i])[$countrycol];
}
if ($isocol >= 0) {
if (substr($bits[$i],0,1) == '"') {
$countriesisotwo[sizeof($countriesisotwo)]=getih(str_replace('"','',explode(",",$bits[$i])[$isocol]));
} else {
$countriesisotwo[sizeof($countriesisotwo)]=getih(explode(",",$bits[$i])[$isocol]);
}
} else {
$countriesisotwo[sizeof($countriesisotwo)]=trim(" ");
}
if (!strstr($uniquecountries, "," . urlencode(str_replace('"','',explode(",",$bits[$i])[$countrycol]) . $countriesisotwo[-1 + sizeof($countriesisotwo)] . $preget) . ",") && !strstr($uniquecountries, "," . urlencode(str_replace('"','',explode(",",$bits[$i])[$countrycol]) . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",")) {
$uniquecountries .= urlencode(str_replace('"','',explode(",",$bits[$i])[$countrycol]) . $countriesisotwo[-1 + sizeof($countriesisotwo)] . $preget) . ",";
//echo str_replace('"','',explode(",",$bits[$i])[$countrycol]) . "\n";
}
$countriesarr[-1 + sizeof($countriesarr)].=$countriesisotwo[-1 + sizeof($countriesisotwo)];
$countriesisotwo[-1 + sizeof($countriesisotwo)]='';
}
}
}
}
}
//$outxml.=$outd . $ourfilename . "@!@!@" . str_replace("'", "' + String.fromCharCode(39) + '", str_replace( "\r", " ", str_replace("\n"," ",str_replace('<','<',str_replace('>','>',$isc)))));
//$outxml.=$outd . $ourfilename . "@!@!@" . $fchunk;
//$outd="!@!@!";
}
}
}
zip_close($zip);
$zip=null;
}
//echo "1:" . sizeof($countriesarr) . "\n";
}
?>Flagging the Cities dropdown (for internal use only) with global data attribute regarding the geodata … <?php echo ”
function notshowucities() {
global $citiesarr, $countriesarr, $alturlis;
$thisurlis="";
$ret="<select name='ucity' id='ucity' style='display:none;'></select>";
//echo "" . sizeof($countriesarr) . "\n";
$zerois=0;
$oneinc=1;
$ii=0;
if (sizeof($countriesarr) > 1000) { $oneinc=floor(sizeof($countriesarr) / 1000); $zerois=rand(0,994); }
for ($i=$zerois; $i<sizeof($countriesarr); $i+=$oneinc) {
if (strpos($citiesarr[$i], "|") !== false) { // geodata there
$thisurlis=" data-hinturl='" . str_replace('CITYGOESHERE', urlencode(explode("|",$citiesarr[$i])[0]), str_replace('LAT', explode(",",explode("|",$citiesarr[$i])[1])[0], str_replace('LONG', explode(",",explode("|",$citiesarr[$i])[1])[1], $alturlis))) . "'";
$ret=str_replace("</select>", "<option id='o" . $i . "'" . $thisurlis . " value='" . (explode("|",$citiesarr[$i])[0]) . "'>" . ($countriesarr[$i]) . "</option></select>", $ret);
} else {
$ret=str_replace("</select>", "<option id='o" . $i . "' value='" . ($citiesarr[$i]) . "'>" . ($countriesarr[$i]) . "</option></select>", $ret);
}
$ii++;
}
return $ret;
}
“; ?>Initial HTML new div set aside for “hint” content … <?php echo ”
<h3 style='color: white;' id='score' align='center'>Score: " . $escore . " Goes: " . $egoes . " <div style=display:inline-block; id=dhint></div></h3><br>
“; ?>Formulating the next question (and onto user usage) logic changes … <?php echo ”
function getnext() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('ucountry').style.fontSize='24px';
}
if (document.getElementById('bemail')) {
document.getElementById('bemail').style.display='inline-block';
}
if (!oucity) {
oucity=document.getElementById('ucity');
}
var rnum=lastg;
while (rnum == lastg) {
rnum=Math.floor(Math.random() * numc);
if (!document.getElementById('o' + rnum)) { rnum=lastg; }
} \n
lastg=rnum;
var ois=document.getElementById('o' + rnum); \n
document.getElementById('ucity').value=ois.value; \n
lcity=ois.value; \n
document.getElementById('thcountry').innerHTML='Country';
document.getElementById('thiscity').value=ois.value;
document.getElementById('thiscity').title=ois.value;
document.getElementById('thcity').innerHTML='City<br><font size=1>' + ois.value + '</font>';
ccountry=ois.innerHTML;
if (('' + ois.getAttribute('data-hinturl')).replace(/^null$/g,'').replace(/\+/g,' ') != '') {
document.getElementById('dhint').innerHTML=' <a id=hinta onclick=\"iframehint(' + \"'\" + ('' + ois.getAttribute('data-hinturl')) + \"'\" + ');\" style=display:inline-block;cursor:pointer;text-decoration:none; title=Hint>❓</a>';
} else {
document.getElementById('dhint').innerHTML='';
}
gethtmlready(ois.value); \n
} \n
function iframehint(oisgetAttributedatahinturl) {
document.getElementById('dhint').innerHTML='<iframe id=hinti src=' + oisgetAttributedatahinturl + ' style=height:214px;display:inline-block;></iframe>';
} \n
“; ?>Again, we hope the use of the changed city_guess.php City Guess Country game in action is now endowed with some empathy for the geographically challenged non-masochists of the
worldwoooooooorrrrrrllllllllld!
Previous relevant PHP City Guess Country Game Massaging Tutorial is shown below.
PHP City Guess Country Game Massaging Tutorial
To improve on the progress up until yesterday’s PHP City Guess Country Game Keyboard Tutorial today, we turn our attention to both …
- the intricacies and complications of Country names regarding multiple data sources (not all with an ISO 2 character code to lean on) … as well as …
- the intricacies and complications of what a user feels comfortable typing in with the keyboard regarding Country names (causing yesterday’s “function okp” to become considerably more complex) as per …
<?php echo ”
function okp(event) {
var optl=[], joptl=0, jdone=false, findings='', findingsd='', lendiff='', lendiffd='', pfix='', ppfix='', ppdo=true;
completefinding='';
if (event.keyCode >= 65 && event.keyCode <= 90) {
kbsofar+=String.fromCharCode(event.keyCode);
if ((kbsofar + ' ').toLowerCase().substring(0,2) == 'ko' && (kbsofar + ' ').toLowerCase().substring(0,3) != 'kos') { pfix='korea'; if (kbsofar.toLowerCase().replace('n','d').indexOf('d') != -1) { pfix='north korea'; kbsofar=pfix; } else if (kbsofar.toLowerCase().replace('s','r').replace('kor','ko').replace('t','r').indexOf('r') != -1) { pfix='south korea'; kbsofar=pfix; } }
if ((kbsofar + ' ').toLowerCase().substring(0,3) == 'con') { pfix='congo'; if (kbsofar.toLowerCase().indexOf('d') != -1) { pfix='democratic republic of the congo'; } else if (kbsofar.toLowerCase().replace('kor','ko').replace('t','r').indexOf('r') != -1) { pfix='the republic of the congo'; } }
//document.title=kbsofar;
if (kbsofar.length == 2 && kbsofar == kbsofar.toUpperCase()) {
optl=document.getElementsByTagName('option');
for (joptl=1; joptl<optl.length; joptl++) {
if (('' + optl[joptl].getAttribute('data-iso')) == kbsofar && !jdone) {
ppdo=false;
//alert(optl[joptl].outerHTML);
jdone=true;
document.getElementById('ucountry').value=optl[joptl].value;
notc=' (not ' + optl[joptl].innerHTML + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
}
}
} // else {
if (ppdo) {
if ((kbsofar + ' ').toLowerCase().substring(0,2) == 'ko' && (kbsofar + ' ').toLowerCase().substring(0,3) != 'kos') { pfix='korea'; if (kbsofar.toLowerCase().replace('n','d').indexOf('d') != -1) { pfix='north korea'; kbsofar=pfix; } else if (kbsofar.toLowerCase().replace('s','r').replace('kor','ko').replace('t','r').indexOf('r') != -1) { pfix='south korea'; kbsofar=pfix; } }
if ((kbsofar + ' ').toLowerCase().substring(0,3) == 'con') { pfix='congo'; if (kbsofar.toLowerCase().indexOf('d') != -1) { pfix='democratic republic of the congo'; kbsofar=pfix; } else if (kbsofar.toLowerCase().replace('kor','ko').replace('t','r').indexOf('r') != -1) { pfix='the republic of the congo'; kbsofar=pfix; } }
optl=document.getElementsByTagName('option');
for (joptl=1; joptl<optl.length; joptl++) {
if (pfix != '' && optl[joptl].value.toLowerCase().indexOf('hong kong') == -1) { if (('' + optl[joptl].innerHTML.toLowerCase()).indexOf(kbsofar.toLowerCase()) >= 0) { ppfix=pfix; if (pfix != 'congo' && pfix != 'korea') { kbsofar=pfix; } } else { ppfix=''; } }
if (optl[joptl].value != '' && (ppfix + optl[joptl].innerHTML.toLowerCase()).indexOf(kbsofar.toLowerCase()) == 0 && ('' + optl[joptl].outerHTML).indexOf(' data-iso') != -1) {
if (pfix.toLowerCase().indexOf(' congo') != -1 || pfix.toLowerCase().indexOf(' korea') != -1) {
if (completefinding == '') {
completefinding=optl[joptl].value;
} else {
completefinding=' ';
}
} else {
lendiff+=lendiffd + eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length));
lendiffd=',';
if (eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length)) <= 4) {
if (completefinding == '') {
completefinding=optl[joptl].value;
} else {
completefinding=' ';
}
}
}
findings+=findingsd + optl[joptl].value;
findingsd=',';
}
}
if (findings == '') {
document.getElementById('oneopt').innerHTML='Please select Country ...';
document.getElementById('thcountry').innerHTML='Country';
kbsofar='';
} else if (findings.indexOf(',') != -1) {
document.getElementById('oneopt').innerHTML=findings;
document.getElementById('ucountry').title=document.getElementById('ucountry').title.split(' ... ')[0] + ' ... ' + findings;
document.getElementById('thcountry').innerHTML='Country<br><font size=1>' + findings + '</font>';
//document.title=lendiff + ' .... ' + completefinding;
if (completefinding.trim() != '') {
setTimeout(dodecide,2000);
}
} else {
document.getElementById('ucountry').value=findings;
notc=' (not ' + findings + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
// location.href='#cgcform';
}
}
} else if ((event.keyCode >= 97 && event.keyCode <= 122) || event.keyCode == 32) {
kbsofar+=String.fromCharCode(event.keyCode);
if ((kbsofar + ' ').toLowerCase().substring(0,2) == 'ko' && (kbsofar + ' ').toLowerCase().substring(0,3) != 'kos') { pfix='korea'; if (kbsofar.toLowerCase().replace('n','d').indexOf('d') != -1) { pfix='north korea'; kbsofar=pfix; } else if (kbsofar.toLowerCase().replace('s','r').replace('kor','ko').replace('t','r').indexOf('r') != -1) { pfix='south korea'; kbsofar=pfix; } }
if ((kbsofar + ' ').toLowerCase().substring(0,3) == 'con') { pfix='congo'; if (kbsofar.toLowerCase().indexOf('d') != -1) { pfix='democratic republic of the congo'; kbsofar=pfix; } else if (kbsofar.toLowerCase().replace('kor','ko').replace('t','r').indexOf('r') != -1) { pfix='the republic of the congo'; kbsofar=pfix; } }
optl=document.getElementsByTagName('option');
for (joptl=1; joptl<optl.length; joptl++) {
if (pfix != '' && optl[joptl].value.toLowerCase().indexOf('hong kong') == -1) { if (('' + optl[joptl].innerHTML.toLowerCase()).indexOf(kbsofar.toLowerCase()) >= 0) { ppfix=pfix; if (pfix != 'congo' && pfix != 'korea') { kbsofar=pfix; } } else { ppfix=''; } }
if (optl[joptl].value != '' && (ppfix + optl[joptl].innerHTML.toLowerCase()).indexOf(kbsofar.toLowerCase()) == 0 && ('' + optl[joptl].outerHTML).indexOf(' data-') != -1) {
if (pfix.toLowerCase().indexOf(' congo') != -1 || pfix.toLowerCase().indexOf(' korea') != -1) {
if (completefinding == '') {
completefinding=optl[joptl].value;
} else {
completefinding=' ';
}
} else {
lendiff+=lendiffd + eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length));
lendiffd=',';
if (eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length)) <= 4) {
if (completefinding == '') {
completefinding=optl[joptl].value;
} else {
completefinding=' ';
}
}
}
findings+=findingsd + optl[joptl].value;
findingsd=',';
}
}
if (findings == '') {
document.getElementById('oneopt').innerHTML='Please select Country ...';
document.getElementById('thcountry').innerHTML='Country';
kbsofar='';
} else if (findings.indexOf(',') != -1) {
document.getElementById('oneopt').innerHTML=findings;
document.getElementById('ucountry').title=document.getElementById('ucountry').title.split(' ... ')[0] + ' ... ' + findings;
document.getElementById('thcountry').innerHTML='Country<br><font size=1>' + findings + '</font>';
//document.title=lendiff + ' ... ' + completefinding;
if (completefinding.trim() != '') {
setTimeout(dodecide,2000);
}
} else {
document.getElementById('ucountry').value=findings;
notc=' (not ' + findings + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
// location.href='#cgcform';
}
}
return false;
}
“; ?>
… work you might want to categorize as “data massaging“. The (code) bother here (about Country Names) teaches us some database design principles. Be happy to use a Country ISO 2 character Code as a good index, but never Country Names. Generally speaking, numeric indexes are far better and more efficient than character based indexes (of a length even greater than one).
How did we know we were getting anywhere piecing together our new PHP “data massaging” function …
<?php
function data_unify($what) {
//$what=str_replace(' "', '"', $what);
//$what=str_replace("<", " <", $what); $what=str_replace("Saint Helena, Ascension, And Tristan Da Cunha", "Saint Helena and Ascension and Tristan Da Cunha", $what); $what=str_replace(" And ", " and ", $what); $what=str_replace(" and the ", " and The ", $what); $what=str_replace("South Georgia and The South Sandwich Islands", "South Georgia and South Sandwich Islands", $what); $what=str_replace("Congo, The Democratic Republic of", "Democratic Republic of the Congo", $what); $what=str_replace("Congo, The Republic of", "The Republic of the Congo", $what); $what=str_replace("Congo (Kinshasa)", "Democratic Republic of the Congo", $what); $what=str_replace("Congo (Brazzaville)", "The Republic of the Congo", $what); $what=str_replace("Cote D'Ivoire", "Côte D’Ivoire", $what); $what=str_replace("Ivory Coast", "Côte D’Ivoire", $what); $what=str_replace("Bahamas, The", "Bahamas", $what); $what=str_replace("Gambia, The", "Gambia", $what); $what=str_replace("The Bahamas", "Bahamas", $what); $what=str_replace("The Gambia", "Gambia", $what); $what=str_replace("Moldova, Republic of","Moldova", $what); $what=str_replace("Iran, Islamic Republic of","Iran", $what); $what=str_replace("Brunei Darussalam", "Brunei", $what); $what=str_replace("Lao People's Democratic Republic", "Laos", $what); $what=str_replace("Lao PDR","Laos",$what); $what=str_replace("Tanzania, United Republic of","Tanzania",$what); $what=str_replace("Iran, Islamic Republic of","Iran",$what); $what=str_replace("Macedonia, the Former Yugoslav Republic of","Macedonia",$what); $what=str_replace("Korea, Democratic People's Republic of","North Korea",$what); $what=str_replace("Korea, Republic of","South Korea",$what); $what=str_replace("Korea, North","North Korea",$what); $what=str_replace("Korea, South","South Korea",$what); $what=str_replace("Korea (North)","North Korea",$what); $what=str_replace("Korea (South)","South Korea",$what); $what=str_replace("Libyan Arab Jamahiriya","Libya",$what); $what=str_replace("Micronesia, Federated States of", "Micronesia", $what); $what=str_replace("Micronesia, Federated States Of", "Micronesia", $what); $what=str_replace("East Timor", "Timor-Leste", $what); $what=str_replace("Russian Federation","Russia",$what); $what=str_replace("Syrian Arab Republic","Syria",$what); $what=str_replace("Netherlands Antilles","Netherlands",$what); $what=str_replace("United States Minor Outlying Islands", "United States", $what); $what=str_replace("Palestinian Territory","Palestine", $what); $what=str_replace("West Bank","Palestine", $what); $what=str_replace("Virgin Islands, U.S.","United States", $what); $what=str_replace("Virgin Islands, British","United Kingdom", $what);
return $what;
}
?>… and …
<?php
$ctyisotwo=file_get_contents("http://www.nationsonline.org/oneworld/country_code_list.htm");
$ctyisotwo=str_replace("Lao PDR","Laos",$ctyisotwo);
$ctyisotwo=str_replace("Tanzania, United Republic of","Tanzania",$ctyisotwo);
$ctyisotwo=str_replace("Iran, Islamic Republic of","Iran",$ctyisotwo);
$ctyisotwo=str_replace("Macedonia, the Former Yugoslav Republic of","Macedonia",$ctyisotwo);
$ctyisotwo=str_replace("Korea (North)","North Korea",$ctyisotwo);
$ctyisotwo=str_replace("Korea (South)","South Korea",$ctyisotwo);
$ctyisotwo=str_replace("Netherlands Antilles","Netherlands",$ctyisotwo);
$ctyisotwo=str_replace("Micronesia, Federated States of", "Micronesia", $ctyisotwo);
$ctyisotwo=str_replace("Micronesia, Federated States Of", "Micronesia", $ctyisotwo);
$ctyisotwo=str_replace("United States Minor Outlying Islands", "United States", $ctyisotwo);
$ctyisotwo=str_replace("Palestinian Territory","Palestine", $ctyisotwo);
$ctyisotwo=str_replace("West Bank","Palestine", $ctyisotwo);
$ctyisotwo=str_replace("Virgin Islands, U.S.","United States", $ctyisotwo);
$ctyisotwo=str_replace("Virgin Islands, British","United Kingdom", $ctyisotwo);
?>? Well, the emoji flags would appear on the dropdown and in erroneous result prompt windows, and non-defined ones (such as “XW” ISO 2 character Code for “West Bank” (which we decided to map to “Palestine”) and “Netherlands Antilles” (ISO 2 character Code “AN”, which we decided to map to “Netherlands”)) would just show the two Regional Letter Code emojis rather than the flag.
We hope the use of the changed city_guess.php City Guess Country game in action is now a better and clearer user experience, as a result. In this line of thinking, note, too, today, that with mobile platforms we’ve allowed more room for potential keyboards down the bottom of screens by nesting the H1 and H2 headers within a “reveal” starring details/summary “shrinkable” element pairing.
Previous relevant PHP City Guess Country Game Keyboard Tutorial is shown below.
PHP City Guess Country Game Keyboard Tutorial
Regarding yesterday’s PHP City Guess Country Game Zip Tutorial‘s web application, like many others, most people would say there is available to them, input wise, and once they have started it up from the web browser address bar …
- mouse or touch input … and …
- keyboard input
… modes of use, though with this particular web application, most people will just use their mouse or touchpad, we guess. But bringing back a concept from the earlier “GUI desktop days” before the “online web days” it was an accessibility “badge of honour” to design programs that could be worked with both input modes above, or either. And getting our web application work for just keyboard is easy enough by attaching …
- “onkeypress” event logic (returning false) to trap letters and space characters … …
<?php echo ”
var completefinding='';
function okp(event) {
var optl=[], joptl=0, jdone=false, findings='', findingsd='', lendiff='', lendiffd='';
completefinding='';
if (event.keyCode >= 65 && event.keyCode <= 90) {
kbsofar+=String.fromCharCode(event.keyCode);
//document.title=kbsofar;
if (kbsofar.length == 2 && kbsofar == kbsofar.toUpperCase()) {
optl=document.getElementsByTagName('option');
for (joptl=1; joptl<optl.length; joptl++) {
if (('' + optl[joptl].getAttribute('data-iso')) == kbsofar && !jdone) {
//alert(optl[joptl].outerHTML);
jdone=true;
document.getElementById('ucountry').value=optl[joptl].value;
notc=' (not ' + optl[joptl].innerHTML + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
}
}
} else {
optl=document.getElementsByTagName('option');
for (joptl=1; joptl<optl.length; joptl++) {
if (optl[joptl].value != '' && ('' + optl[joptl].innerHTML.toLowerCase()).indexOf(kbsofar.toLowerCase()) == 0 && ('' + optl[joptl].outerHTML).indexOf(' data-') != -1) {
lendiff+=lendiffd + eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length));
lendiffd=',';
if (eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length)) <= 4) {
if (completefinding == '') {
completefinding=optl[joptl].value;
} else {
completefinding=' ';
}
}
findings+=findingsd + optl[joptl].value;
findingsd=',';
}
}
if (findings == '') {
document.getElementById('oneopt').innerHTML='Please select Country ...';
kbsofar='';
} else if (findings.indexOf(',') != -1) {
document.getElementById('oneopt').innerHTML=findings;
document.getElementById('ucountry').title=document.getElementById('ucountry').title.split(' ... ')[0] + ' ... ' + findings;
//document.title=lendiff + ' .... ' + completefinding;
if (completefinding.trim() != '') {
setTimeout(dodecide,2000);
}
} else {
document.getElementById('ucountry').value=findings;
notc=' (not ' + findings + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
// location.href='#cgcform';
}
}
} else if ((event.keyCode >= 97 && event.keyCode <= 122) || event.keyCode == 32) {
kbsofar+=String.fromCharCode(event.keyCode);
optl=document.getElementsByTagName('option');
for (joptl=1; joptl<optl.length; joptl++) {
if (optl[joptl].value != '' && ('' + optl[joptl].innerHTML.toLowerCase()).indexOf(kbsofar.toLowerCase()) == 0 && ('' + optl[joptl].outerHTML).indexOf(' data-') != -1) {
lendiff+=lendiffd + eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length));
lendiffd=',';
if (eval(eval('' + optl[joptl].value.length) - eval('' + kbsofar.length)) <= 4) {
if (completefinding == '') {
completefinding=optl[joptl].value;
} else {
completefinding=' ';
}
}
findings+=findingsd + optl[joptl].value;
findingsd=',';
}
}
if (findings == '') {
document.getElementById('oneopt').innerHTML='Please select Country ...';
kbsofar='';
} else if (findings.indexOf(',') != -1) {
document.getElementById('oneopt').innerHTML=findings;
document.getElementById('ucountry').title=document.getElementById('ucountry').title.split(' ... ')[0] + ' ... ' + findings;
//document.title=lendiff + ' ... ' + completefinding;
if (completefinding.trim() != '') {
setTimeout(dodecide,2000);
}
} else {
document.getElementById('ucountry').value=findings;
notc=' (not ' + findings + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
// location.href='#cgcform';
}
}
return false;
}
“; ?>
… that false return meaning that your key presses have no effect … and … - “onkeydown” event logic to trap carriage returns …
<?php echo ”
function crokp(event) {
if (event.keyCode == 13) {
if (completefinding.trim() != '') {
document.getElementById('ucountry').value=completefinding;
notc=' (not ' + completefinding + ')';
picked(document.getElementById('ucountry').value, document.getElementById('ucountry'));
kbsofar='';
completefinding='';
// location.href='#cgcform';
} else if (document.getElementById('bemail')) {
document.getElementById('bemail').click();
}
}
}
“; ?>
… as a “bi-functionality” to be either a …- user usage meaning that after entering “United States” (for instance) the carriage return settles for that rather than, say, “United States of America” … versus …
- a way to programmatically click/touch the “Email” button (remembering our desire to be able to “just use keyboard” input)
… applied to the document.body element as per …
<?php echo ”
<body onkeydown='crokp(event);' onkeypress='return okp(event);' style='background-color: olive;' onload='setTimeout(getnext,1000);'>
“; ?>… but what about mobile platforms such as iOS iPhone or iPad? Well, luckily there is one HTML input type=text element in our web application (whose inheritance relationship to document.body ensures it reaches the Javascript logic above) for a mobile user to focus on to bring up the keyboard functionality (okay, we admit defeat with this “touch” action functionality needed, as iOS does not allow the HTML element focus() (programmatical) method).
Also, it will not be that many web application where …
meaning that your key presses have no effect
… is going to be a viable strategy. Happily, with our City Country Quiz, it is a viable strategy with the changed city_guess.php City Guess Country game in action, and how that extra keyboard functionality works. For example, did you notice in the Javascript code way above how if …
- user enters two uppercase keyboard characters we look up all the ISO 2 character codes and accept any matches (as the user answer) … versus …
- any other characters go towards a left to right autocompletion feeling comma separated Country List being presented to the user until the specificity of the user characters weedles that list down to one (as the user user answer)
Previous relevant PHP City Guess Country Game Zip Tutorial is shown below.
PHP City Guess Country Game Zip Tutorial
On top of the recent PHP City Guess Country Game Flag Emoji Tutorial‘s progress today we allow for …
- zipped up XML data in the same format as …
- XML data files (as always) … and …
- zipped up CSV data thanks to the great World Cities Database … who we would like to thank profusely
Does this mean we can now reduce the inodes used by the web server and delete the original XML files? Yes, because PHP has the wherewithal to read the data within the zip file and not need it to land on the web server disk, but “no”, because we want to look into the (new version lack of) speed and so have kept, for now (at least), a division of web application usage …
Faster original version with less data available to choose from … Slower new version with more (zip derived) data available to choose from … … via the changed city_guess.php City Guess Country game in action, that extra zip file functionality PHP looking like …
<?php
foreach (glob("*.zip") as $zipfile) {
$zip = zip_open($zipfile);
if ($zip) {
$outxml=" ";
while ($zip_entry = zip_read($zip)) {
$ourfilename=zip_entry_name($zip_entry);
$regexpok=0;
if (strpos($ourfilename, "_MACOSX/") === false) {
//$regexp="/^[\S]" . str_replace('[\s\S]?','[\s\S]*',str_replace('*','[\s\S]?',str_replace('?',',',str_replace('%',',',str_replace('.','[.]',$ofwhat))))) . "$/";
//$regexpok=preg_match($regexp, explode("/",$ourfilename)[-1 + sizeof(explode("/",$ourfilename))]);
$regexpok=1;
if ($regexpok !== 0) {
if ($outxml == " ") { $outxml=""; }
$fchunk=zip_entry_read($zip_entry, zip_entry_filesize($zip_entry));
if (strpos(strtolower($ourfilename), ".xml") !== false && strpos($fchunk, "<City>") !== false && strpos($fchunk, "<Country>") !== false) {
//echo strtoupper($ourfilename) . "\n";
$bits=explode("<City>", $fchunk);
for ($i=1; $i<sizeof($bits); $i++) {
$thistwobits=explode("<", $bits[$i]);
$citiesarr[sizeof($citiesarr)]=$thistwobits[0];
$thistwobits=explode("<Country>", $bits[-1 + $i]);
$thosetwobits=explode("<", $thistwobits[-1 + sizeof($thistwobits)]);
$countriesarr[sizeof($countriesarr)]=$thosetwobits[0];
if (strpos($ctyisotwo, ">" . $thosetwobits[0]) !== false) {
$countriesisotwo[sizeof($countriesisotwo)]=getih(trim(explode("<",explode('">', explode(">" . $thosetwobits[0],$ctyisotwo)[1])[1])[0]));
} else {
$countriesisotwo[sizeof($countriesisotwo)]=trim(" ");
}
if (!strstr($uniquecountries, "," . urlencode($thosetwobits[0] . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",")) {
$uniquecountries .= urlencode($thosetwobits[0] . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",";
//echo $thosetwobits[0] . "\n";
}
$countriesarr[-1 + sizeof($countriesarr)].=$countriesisotwo[-1 + sizeof($countriesisotwo)];
$countriesisotwo[-1 + sizeof($countriesisotwo)]='';
//echo "0:" . sizeof($countriesarr) . "\n";
}
} else if (strpos(strtolower($ourfilename), ".csv") !== false) { // thanks to https://www.rjmprogramming.com.au/ITblog/wp-admin/post.php?post=50720&action=edit&message=1
// "city","city_ascii","lat","lng","country","iso2","iso3","admin_name","capital","population","id"
// "Tokyo","Tokyo","35.6897","139.6922","Japan","JP","JPN","Tōkyō","primary","37977000","1392685764"
// "Jakarta","Jakarta","-6.2146","106.8451","Indonesia","ID","IDN","Jakarta","primary","34540000","1360771077"
//echo strtolower($ourfilename) . "\n";
$bits=explode("\n", $fchunk);
$hbit=str_replace('"','',strtolower($bits[0]));
$hbits=explode(",", $hbit);
$citycol=-1;
$countrycol=-1;
$isocol=-1;
if (strpos(("," . $hbit . ","), ",city") !== false && strpos(("," . $hbit . ","), ",country") !== false && strpos($hbit, ",") !== false) {
for ($i=0; $i<sizeof($hbits); $i++) {
if ($citycol == -1 && strpos($hbits[$i], "city") !== false) {
$citycol=$i;
} else if ($countrycol == -1 && strpos($hbits[$i], "country") !== false) {
$countrycol=$i;
} else if ($isocol == -1 && strpos($hbits[$i], "iso") !== false) {
$isocol=$i;
}
}
if ($citycol >=0 && $countrycol >= 0) {
for ($i=1; $i<sizeof($bits); $i++) {
if (substr(str_replace('"','',explode(",",$bits[$i])[$countrycol]),0,1) >= "A") {
if (substr($bits[$i],0,1) == '"') {
$citiesarr[sizeof($citiesarr)]=str_replace('"','',explode('","',$bits[$i])[$citycol]);
} else {
$citiesarr[sizeof($citiesarr)]=explode(",",$bits[$i])[$citycol];
}
if (substr($bits[$i],0,1) == '"') {
$countriesarr[sizeof($countriesarr)]=str_replace('"','',explode(",",$bits[$i])[$countrycol]);
} else {
$countriesarr[sizeof($countriesarr)]=explode(",",$bits[$i])[$countrycol];
}
if ($isocol >= 0) {
if (substr($bits[$i],0,1) == '"') {
$countriesisotwo[sizeof($countriesisotwo)]=getih(str_replace('"','',explode(",",$bits[$i])[$isocol]));
} else {
$countriesisotwo[sizeof($countriesisotwo)]=getih(explode(",",$bits[$i])[$isocol]);
}
} else {
$countriesisotwo[sizeof($countriesisotwo)]=trim(" ");
}
if (!strstr($uniquecountries, "," . urlencode(str_replace('"','',explode(",",$bits[$i])[$countrycol]) . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",")) {
$uniquecountries .= urlencode(str_replace('"','',explode(",",$bits[$i])[$countrycol]) . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",";
//echo str_replace('"','',explode(",",$bits[$i])[$countrycol]) . "\n";
}
$countriesarr[-1 + sizeof($countriesarr)].=$countriesisotwo[-1 + sizeof($countriesisotwo)];
$countriesisotwo[-1 + sizeof($countriesisotwo)]='';
}
}
}
}
}
}
}
}
zip_close($zip);
$zip=null;
}
}
?>
Previous relevant PHP City Guess Country Game Flag Emoji Tutorial is shown below.
PHP City Guess Country Game Flag Emoji Tutorial
On top of yesterday’s PHP City Guess Country Game Data Extension Tutorial today’s progress zeroes in on some aesthetic ideas …
- add country flag emojis (for interest sake) …
<?php
function getih($indefe) {
$lri="ABCDEFGHIJKLMNOPQRSTUVWXYZ^$";
$zri="abcdefghijklmnopqrstuvwxyz^$0123456789#@!~`";
$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","127988","917631"];
$sri=["917601","917602","917603","917604","917605","917606","917607","917608","917609","917610","917611","917612","917613","917614","917615","917616","917617","917618","917619","917620","917621","917622","917623","917624","917625","917626","127988","917631","30","31","32","33","34","35","36","37","38","39","127937","65039","8205","127752","127987"];
$thiscc=$indefe;
$ccsuff='';
$ccchar=' ';
$cde='&#';
for ($iccsuff=0; $iccsuff<strlen($thiscc); $iccsuff++) {
$ccchar=substr($thiscc, $iccsuff, (1 + $iccsuff));
if (strtolower($ccchar) == $ccchar) {
$ccsuff.=$cde . $sri[strpos($lri,$ccchar)] . ';'; //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
} else {
$ccsuff.=$cde . $dri[strpos($lri,$ccchar)] . ';'; //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
}
}
return $ccsuff;
}
foreach (glob("*cities*.xml") as $filename) {
$fchunk=file_get_contents($filename);
$bits=explode("<City>", $fchunk);
for ($i=1; $i<sizeof($bits); $i++) {
$thistwobits=explode("<", $bits[$i]);
$citiesarr[sizeof($citiesarr)]=$thistwobits[0];
$thistwobits=explode("<Country>", $bits[-1 + $i]);
$thosetwobits=explode("<", $thistwobits[-1 + sizeof($thistwobits)]);
$countriesarr[sizeof($countriesarr)]=$thosetwobits[0];
if (strpos($ctyisotwo, ">" . $thosetwobits[0]) !== false) {
$countriesisotwo[sizeof($countriesisotwo)]=getih(trim(explode("<",explode('">', explode(">" . $thosetwobits[0],$ctyisotwo)[1])[1])[0]));
} else {
$countriesisotwo[sizeof($countriesisotwo)]=trim(" ");
}
if (!strstr($uniquecountries, "," . urlencode($thosetwobits[0] . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",")) {
$uniquecountries .= urlencode($thosetwobits[0] . $countriesisotwo[-1 + sizeof($countriesisotwo)]) . ",";
}
$countriesarr[-1 + sizeof($countriesarr)].=$countriesisotwo[-1 + sizeof($countriesisotwo)];
$countriesisotwo[-1 + sizeof($countriesisotwo)]='';
}
}
?>
… using another “data extension” via the incredibly useful link where a Country name can be linked to an ISO 2 character country code (integral to forming those country flag emojis in the PHP code above) - increase readability by increasing font and element sizes
See the changed city_guess.php City Guess Country game in action.
Previous relevant PHP City Guess Country Game Data Extension Tutorial is shown below.
PHP City Guess Country Game Data Extension Tutorial
We had occasion to revisit the “City Guess Country Game” web application of PHP City Guess Country Game Sharing Tutorial and were dismayed at the absence of “Belgium” on the country list. We looked into the workings of the web application and found that it based its City and Country dropdowns based on the contents of Webservices XML files (who we would like to thank profusely).
How to start seeing Belgium, even though we write this on a Wednesday? We think we could either …
- start accessing the Webservices Belgium XML file (but, sadly, if you’ve tried that last link, you can see why not) … or …
- “data extend” (not talk about file extensions) the Capitals and Countries data sets of Country via Capital Placeholder Quiz Game Tutorial and that way, guarantee at least one city entry per country
… and yes, we opted for the latter. And yes, we recognize there will be a lopsided number of cities linking to the XML data countries. True enough, but playing the quiz, this does not detract from the interest of the quiz in our opinion. And it feels that much more interesting and challenging seeing a full list of country (answer) options for any city (question) ask, in our opinion.
But the proof is in the “user pudding” and perhaps you will find the changed city_guess.php City Guess Country game more or less challenging than the one lacking Belgium (perhaps because it’s Wednesday?)
Previous relevant PHP City Guess Country Game Sharing Tutorial is shown below.
PHP City Guess Country Game Sharing Tutorial
We mentioned how much thought was needed for our revamped Nimh game to involve an Inline HTML Form Email, and thereby be spurning any Javascript “smarts” already involved, so as to both …
- collaborate and share and involve more than one game player … as well as …
- seeing the graphics of that game there in the body section of the email
… and so, rather than jumping straight into Nimh (ouch! … got burnt!) we are picking …
- a simple PHP game …
- currently involving lots of Javascript “smarts” in its workings …
- not yet involving any Inline HTML Form Email functionality
… and work towards collaborating and sharing via those means. The verdict? Yes, even for “small games” like the changed city_guess.php City Guess Country game (you can read the background to, with PHP City Guess Country Game Primer Tutorial), it is no doddle to think “no Javascript”. It is an exercise that helps you appreciate the power and usefulness of client-side Javascript in web applications. The upside is an improvement of your appreciation of how to pare something down to those smaller “navigatable” HTML form snippets to break a concept into collaborative and sharable parts.
Two new HTML form elements become involved, to make this happen …
- the HTML form method=POST action=’//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php’ … to navigate to Inline HTML Form Email creating PHP helper web application …
<form target=iemail style=display:none; action='//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php' method=POST>
<input type=hidden name=inline value=''></input>
<input type=hidden name=emailto id=emailto value=''></input>
<input type=hidden name=subject id=subject value='City Guess Country Game'></input>
<textarea style=display:none; name=htmlis id=htmlis value=''></textarea>
<input type=submit style=display:none; id=contact value=Email></input>
</form>
… filling in emailto (Email To) and htmlis (Inline HTML Form Email content) in a named HTML iframe element, so as not to have to navigate away from the web page …
<iframe name=iemail src=//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php style=display:none;></iframe>
- the HTML form method=GET action=’https://www.rjmprogramming.com.au/Games/CityGuessCountry/city_guess.php’ shell …
<form target=_top id=cgcform action='https://www.rjmprogramming.com.au/Games/CityGuessCountry/city_guess.php' method=GET>
</form>
… encasing existant HTML City and Country elements
… and on returning to “web browser land” from “email client land” the emailee’s answers contribute to the PHP logic …
$egoes="0";
$escore="0";
$emdef="";
if (isset($_GET['thiscity']) && isset($_GET['ucountry']) && isset($_GET['eanswer'])) {
if ($_GET['ucountry'] == $_GET['eanswer']) {
$egoes="1 Well done! " . str_replace("+"," ",urldecode($_GET['thiscity'])) . " is indeed in " . str_replace("+"," ",urldecode($_GET['eanswer'])) . ".";
$escore="1";
} else {
$egoes="1 Sorry, <a title='Google image search' style=cursor:pointer;text-decoration:underline; onclick=woit(this.innerHTML);>" . str_replace("+"," ",urldecode($_GET['thiscity'])) . "</a> is in " . str_replace("+"," ",urldecode($_GET['eanswer'])) . " but is not in " . str_replace("+"," ",urldecode($_GET['ucountry'])) . ".";
}
if (isset($_GET['emailfrom'])) {
$emdef=str_replace("+"," ",urldecode($_GET['emailfrom']));
}
}
… informing of the user of the “Check” (submit button) of their email dropdown selected Country answer for the City presented to them.
We found that second method=GET was the means by which macOS Mail app and Webmail means of emailing were both supported.
Previous relevant PHP City Guess Country Game Primer Tutorial is shown below.
PHP City Guess Country Game Primer Tutorial
There is no end to the variety of web applications you can do by seeing what free information is out there, but please don’t disrepect the sources of that information. The source for our information today is the excellent XML files created at Webservices … so … thanks.
Today’s game is deceptively simple but quite dynamic, in the sense that we set aside a web server directory for our game today that we have called “City Guess Country Game” and whatever subset of XML files you have from http://www.webservicex.net/new/Home/Index are dynamically read to be the source of information. Here, for the next level up of dynamism you’d involve an RSS feed perhaps, but, today, we just talk about using what we statically have “plonked” in our directory set aside for the game. The word “plonked” always makes me associate with the ever useful PHP method called glob … yes … glob … and so it is here, because that “globbing” definitely goes on. What you will perhaps be disappointed with today is that we don’t use PHP XML native functionality to process the XML data, and please know we recommend trying these approaches as you see fit, but we find the PHP explode method relatively easy to deploy for scenarios like this where the data form is so predictable, and simple.
Deceptively simple games can sometimes be the best, and find that that interest, or not, relates to what we are interested in ourselves … for me that, in particular, is atlases, geography, the “where” of life … so today’s game interests me as much as it will bore others (no doubt).
We show you PHP source code you could call city_guess.php and a live run link as well.
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.
