{"id":57702,"date":"2022-12-07T03:01:32","date_gmt":"2022-12-06T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57702"},"modified":"2022-12-22T15:34:37","modified_gmt":"2022-12-22T05:34:37","slug":"ajax-php-game-makeover-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-game-makeover-tutorial\/","title":{"rendered":"Ajax PHP Game Makeover Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Game Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example_cursor_again.jpg\" title=\"Ajax PHP Game Makeover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Game Makeover Tutorial<\/p><\/div>\n<p>We have a CSS <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> theme with today&#8217;s work improving on yesterday&#8217;s <a title='Ajax PHP National Capitals Game Flags Tutorial' href='#aphpncgft'>Ajax PHP National Capitals Game Flags Tutorial<\/a>&#8216;s progress.<\/p>\n<p>As with <a target=_blank title='CSS and SVG XML Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-and-svg-xml-primer-tutorial'>CSS and SVG XML Primer Tutorial<\/a> from a few days ago, our CSS SVG &#8220;makeover ideas&#8221; include all of &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-and-svg-xml-primer-tutorial'>\n<ul>\n<li>background (image) \u2026 with or without an opacity consideration (via a linear gradient)<\/li>\n<li>border image \u2026 not for the faint hearted<\/li>\n<li>cursor \u2026 non-mobile only<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; the cursor CSS SVG integration work teaching us, again, that HTML element <i>class<\/i> attribute has a natural symbiosis with CSS and HTML element <i>id<\/i> attribute is best used in conjunction with Javascript (perhaps DOM).<\/p>\n<p>In the relevant code you&#8217;ll see us dynamically adding new <i>class<\/i> references to [element].className (in Javascript DOM) and then referencing that with dynamically added (onto a <i>div<\/i> element&#8217;s innerHTML) <i>style<\/i> CSS code to <font color=blue>allow for emoji flag cursors<\/font> when the &#8220;National capitals&#8221; sub-game is chosen by the user &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var cursorp='progress';<br \/>\nvar tdclass=0;<\/font><br \/>\n<br \/>\nfunction doclickedurl(fio,thisp) {<br \/>\n var dcols=['blue','orange','brown','purple'];<br \/>\n if (document.getElementById('ssug') && eval('' + thisp) &lt; eval('' + lastlcd)) {<br \/>\n   console.log('ouch! thisp=' + thisp + ' and lastlcd=' + lastlcd);<br \/>\n }<br \/>\n if (document.getElementById('ssug') && eval('' + thisp) &gt;= eval('' + lastlcd)) {<br \/>\n  lcd=thisp;<br \/>\n  lastlcd=thisp;<br \/>\n  if (fio.innerText != '') {<br \/>\n   var fios=fio.innerText.split(' ');<br \/>\n   var sects=document.getElementById('ssug').innerHTML.replace(\/\\_\/g,' ').split('&gt;' + fio.innerText.replace(\/\\_\/g,' ') + ' ');<br \/>\n   if (eval('' + sects.length) &lt;= 1) {<br \/>\n     sects=document.getElementById('ssug').innerHTML.replace(\/\\_\/g,' ').split('&gt;' + fio.innerText.replace(\/\\_\/g,' '));<br \/>\n   }<br \/>\n   if (eval('' + sects.length) &gt;= 2) {<br \/>\n     clickedurl=getpu(sects[0].split(' value=\"')[eval(-1 + sects[0].split(' value=\"').length)].split('\"')[0].split(' (')[0].replace(\/\\ \/g,'_')); \/\/sects[0].split(' value=\"')[eval(-1 + sects[0].split(' value=\"').length)].split('\"')[0];<br \/>\n     document.getElementById('ourcanvas').title=\"Click a bold word to left and then click here for Wikipedia images, \" + (\"as relevant ... \" + clickedurl).replace(\/\\ \\.\\.\\.\\ $\/g,'').replace(' \/\/', ' http:\/\/');<br \/>\n   }<br \/>\n   <font color=blue>if (fios[eval(-1 + fios.length)].indexOf(')') &gt; 0) {<br \/>\n     if (1 == 2) { alert(fios[eval(-1 + fios.length)].split(')')[0]); }<br \/>\n     if (cursorp != \"url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:transparent;fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;\" + fios[eval(-1 + fios.length)].split(')')[0] + \"&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, progress\") {<br \/>\n     tdclass++;<br \/>\n     document.getElementById('ourcanvas').className+=' tdclass' + tdclass;<br \/>\n     cursorp=\"url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:transparent;fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;\" + fios[eval(-1 + fios.length)].split(')')[0] + \"&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, progress\";<br \/>\n     }<\/font><br \/>\n\/\/alert(cursorp);<br \/>\n   } <font color=blue>else {<br \/>\n     cursorp='progress';<br \/>\n\/\/alert('2:' + cursorp);<br \/>\n   }<\/font><br \/>\n  <font color=blue>var fih=fio.innerHTML;<br \/>\n  if (eval('' + thisp) == 1) {<br \/>\n  \/\/fio.innerHTML=fih.replace('blue', dcols[thisp]);<br \/>\n  fio.style.color=dcols[thisp];<br \/>\n  } else if (eval('' + thisp) == 2) {<br \/>\n  \/\/alert(fio.innerHTML);<br \/>\n  \/\/fio.innerHTML=fih.replace(dcols[1], dcols[thisp]).replace('blue', dcols[thisp]);<br \/>\n  fio.style.color=dcols[thisp];<br \/>\n  } else if (eval('' + thisp) == 3) {<br \/>\n  \/\/fio.innerHTML=fih.replace(dcols[1], dcols[thisp]).replace(dcols[2], dcols[thisp]).replace('blue', dcols[thisp]);<br \/>\n  fio.style.color=dcols[thisp];<br \/>\n  }<\/font><br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction filltdright() {<br \/>\n var selovalue='';<br \/>\n if (clickedurl.toLowerCase().indexOf('wikipedia.') != -1 && clickedurl.indexOf('\/wiki\/') != -1) {<br \/>\n   \/\/alert('cursorp=' + cursorp);<br \/>\n   document.getElementById('ourcanvas').style.background='linear-gradient(to right, white, lightpink, pink)';<br \/>\n   selovalue=clickedurl.split('\/wiki\/')[1];<br \/>\n   document.getElementById('addthis').value='';<br \/>\n   document.getElementById('ourcanvas').innerHTML='&lt;iframe frameborder=0 style=display:none; src=\/PHP\/fgc\/?tzexact=' + encodeURIComponent(selovalue.substring(0,1).toUpperCase() + selovalue.substring(1)) + '&tznickname=' + encodeURIComponent(selovalue.replace(\/\\_\/g,' ')) + '&gt;&lt;\/iframe&gt;';<br \/>\n   <font color=blue>if (cursorp.indexOf('url(') == 0) {<br \/>\n   \/\/alert('&lt;style&gt; #ourcanvas { cursor: ' + cursorp + '; } &lt;\/style&gt; ');<br \/>\n   document.getElementById('dstyle').innerHTML+='&lt;style&gt; .tdclass' + tdclass + ' { cursor: ' + cursorp + '; } &lt;\/style&gt; ';<br \/>\n   } else {<\/font><br \/>\n   document.getElementById('ourcanvas').style.cursor=<font color=blue>cursorp;<\/font><br \/>\n   <font color=blue>}<\/font><br \/>\n   setTimeout(mydivptr, 1000);<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to go with <font color=purple>border image CSS using SVG<\/font> and <font color=brown>background CSS using SVG<\/font> &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n  <font color=purple>body {<br \/>\n    background-color: rgb(233,242,242);<br \/>\n    border: 30px solid lightgreen;<br \/>\n        margin:1px;<br \/>\n        width:calc(100% - 60px);<br \/>\n        height:calc(100% - 60px);<br \/>\n        border-image: url('data:image\/svg+xml,&lt;svg viewBox=\"0 0 30 30\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;&lt;rect width=\"30\" height=\"30\" rx=\"10\" fill=\"red\"\/&gt;&lt;\/svg&gt;');<br \/>\n        border-image-slice: 100 100 100 100;<br \/>\n        border-image-width: 14px;<br \/>\n        border-image-outset: 2px;<br \/>\n        border-image-repeat: stretch;<br \/>\n        background-size: cover;<br \/>\n     \/* border-radius: 15px; *\/<br \/>\n  }<\/font><br \/>\n<br \/>\n  <font color=brown>table {<br \/>\n    background-color: rgb(238,229,238);<br \/>\n    background-image: url('data:image\/svg+xml,&lt;svg viewBox=\"0 0 30 30\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;&lt;rect width=\"30\" height=\"30\" fill=\"rgb(248,239,248)\"\/&gt;&lt;\/svg&gt;');<br \/>\n    background-repeat: no-repeat;<br \/>\n    border-radius: 15px;<br \/>\n  }<\/font><br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html--------GETME\" title=''>the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html--------GETME\" title=''>ninth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application, calling on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gethint.php-----GETME\" title=''>the modified<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gethint.php-----GETME\" title=''>gethint.php<\/a> helper!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-name-makeover-tutorial\/'>Ajax PHP Game Makeover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpncgft'>Previous relevant <a target=_blank title='Ajax PHP National Capitals Game Flags Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-national-capitals-game-flags-tutorial\/'>Ajax PHP National Capitals Game Flags Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP National Capitals Game Flags Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/fair_city.jpg\" title=\"Ajax PHP National Capitals Game Flags Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP National Capitals Game Flags Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Ajax PHP Game Wikipedia Images Wait Tutorial' href='#aphpgwiwt'>Ajax PHP Game Wikipedia Images Wait Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>capitals are connected to countries &#8230;<\/li>\n<li>countries are connected to iso two letter country codes &#8230;<\/li>\n<li>iso two letter country codes are connected to emoji flags<\/li>\n<\/ul>\n<p>Yes, all the national flags for countries with iso two letter country codes, can have their flags represented by an emoji, that &#8220;text&#8221; thing that is also a &#8220;graphics&#8221; image thing.<\/p>\n<p>Here&#8217;s some Javascript to help &#8230;<\/p>\n<p><code><br \/>\n  var dri=['127462','127463','127464','127465','127466','127467','127468','127469','127470','127471','127472','127473','127474','127475','127476','127477','127478','127479','127480','127481','127482','127483','127484','127485','127486','127487'];<br \/>\n  var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';<br \/>\n <br \/> <br \/>\n  if (!String.fromCodePoint) {   \/\/ thanks to http:\/\/xahlee.info\/js\/js_unicode_code_point.html<br \/>\n    \/\/ ES6 Unicode Shims 0.1 , \u00a9 2012 Steven Levithan , MIT License<br \/>\n    String.fromCodePoint = function fromCodePoint () {<br \/>\n        var chars = [], point, offset, units, i;<br \/>\n        for (i = 0; i &lt; arguments.length; ++i) {<br \/>\n            point = arguments[i];<br \/>\n            offset = point - 0x10000;<br \/>\n            units = point &gt; 0xFFFF ? [0xD800 + (offset &gt;&gt; 10), 0xDC00 + (offset & 0x3FF)] : [point];<br \/>\n            chars.push(String.fromCharCode.apply(null, units));<br \/>\n        }<br \/>\n        return chars.join('');<br \/>\n    } }<br \/>\n<br \/>\n    function orflag(thiscc) {<br \/>\n      var ccsuff='', ccchar=' ', cde='';<br \/>\n      for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n        ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n        ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); \/\/'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n        cde='.';<br \/>\n      }<br \/>\n      return ccsuff;<br \/>\n    }<br \/>\n<\/code><\/p>\n<p>So let&#8217;s see, for Bangladesh with iso two letter country code BD, the B would give &amp;#127463; and the D would result in &amp;#127465;, all together &amp;#127463;&amp;#127465; &#8230; <font size=9>&#127463;&#127465;<\/font>.  And, in that Javascript above that could be achieved by the return value of the call to <i>orflag(&#8220;BD&#8221;);<\/i><\/p>\n<p>Cute, huh?!  So we applied this thinking to our &#8220;National capitals&#8221; sub-game in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html-------GETME\" title=''>the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html-------GETME\" title=''>eighth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application, calling on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gethint.php-----GETME\" title=''>the modified<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gethint.php-----GETME\" title=''>gethint.php<\/a> helper!  But we needed a third party web application to add in the flags before the &#8220;)&#8221; character text (of the form <i>Capital (Country)<\/i>) shown to the user.  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php--------------------GETME\" title=\"tz_places.php\">Our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php--------------------GETME\" title=\"tz_places.php\">tz_places.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\">&#8220;TimeZone Places&#8221; web application<\/a> seemed like a good candidate, but needed considerable work to cater for the many versions of a Country name.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-national-capitals-game-flags-tutorial\/'>Ajax PHP National Capitals Game Flags Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpgwiwt'>Previous relevant <a target=_blank title='Ajax PHP Game Wikipedia Images Wait Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-game-wikipedia-images-wait-tutorial\/'>Ajax PHP Game Wikipedia Images Wait Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Game Wikipedia Images Wait Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/linear_gradient_animation.gif\" title=\"Ajax PHP Game Wikipedia Images Wait Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Game Wikipedia Images Wait Tutorial<\/p><\/div>\n<p>Today we talk about a first for us.  We&#8217;re using a &#8230;<\/p>\n<blockquote><p>\nlinear gradient animation\n<\/p><\/blockquote>\n<p> &#8230; to help a user &#8220;wait&#8221; for their Wikipedia images to arrive in &#8220;the pink area&#8221;.  Our non-mobile users may wonder &#8220;Why the need?&#8221;.  Well, mobile users do not see a cursor, and so the excellent rolling ball &#8220;progress&#8221; cursor loses its effectiveness here.  And so, adding onto the recent <a title='Ajax PHP Game Wikipedia Images Tutorial' href='#aphpgwit'>Ajax PHP Game Wikipedia Images Tutorial<\/a> Wikipedia images work in <font color=deeppink>&#8220;the newly pink&#8221;<\/font> right hand side of the new table in the webpage of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html------GETME\" title=''>the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html------GETME\" title=''>seventh draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application &#8230;<\/p>\n<p><code><br \/>\n<font color=deeppink>var pinks=['lightpink','#ffb6c1','pink','#ffc0cb','hotpink','#ff69b4','deeppink','#ff1493'];<\/font><br \/>\n<br \/>\n function mydivptr() {<br \/>\n   if (document.getElementById('addthis').value != '0') {<br \/>\n     <font color=deeppink>var gpick=0;<br \/>\n     var nums=eval(Math.floor(Math.random() * eval('' + pinks.length)));<br \/>\n     if (nums &lt; 2) { nums=2; }<br \/>\n     var sofar='linear-gradient(to right, white';<br \/>\n     while (eval('' + nums) &gt; 0) {<br \/>\n       gpick=eval(Math.floor(Math.random() * eval('' + pinks.length)));<br \/>\n       if (sofar.indexOf(', ' + pinks[gpick]) == -1) {<br \/>\n         sofar+=', ' + pinks[gpick];<br \/>\n         nums--;<br \/>\n         \/\/alert(sofar);<br \/>\n       \/\/} else {<br \/>\n         \/\/alert(' why sofar=' + sofar + ' and pinks[gpick]=' + pinks[gpick]);<br \/>\n       }<br \/>\n     }<br \/>\n     sofar+=')';<\/font><br \/>\n     document.getElementById('ourcanvas').style.background=<font color=deeppink>sofar; \/\/<\/font>'linear-gradient(to right, white, lightpink, pink)';<br \/>\n     \/\/document.title=sofar;<br \/>\n     setTimeout(mydivptr, 1000);<br \/>\n   } else {<br \/>\n     if (document.getElementById('ourcanvas')) {  document.getElementById('ourcanvas').style.cursor='pointer'; }<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\nfunction filltdright() {<br \/>\n var selovalue='';<br \/>\n if (clickedurl.toLowerCase().indexOf('wikipedia.') != -1 && clickedurl.indexOf('\/wiki\/') != -1) {<br \/>\n   <font color=deeppink>document.getElementById('ourcanvas').style.background='linear-gradient(to right, white, lightpink, pink)';<\/font><br \/>\n   selovalue=clickedurl.split('\/wiki\/')[1];<br \/>\n   document.getElementById('addthis').value='';<br \/>\n   document.getElementById('ourcanvas').innerHTML='&lt;iframe frameborder=0 style=display:none; src=\/PHP\/fgc\/?tzexact=' + encodeURIComponent(selovalue.substring(0,1).toUpperCase() + selovalue.substring(1)) + '&tznickname=' + encodeURIComponent(selovalue.replace(\/\\_\/g,' ')) + '&gt;&lt;\/iframe&gt;';<br \/>\n   document.getElementById('ourcanvas').style.cursor='progress';<br \/>\n   setTimeout(mydivptr, 1000);<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-game-wikipedia-images-wait-tutorial\/'>Ajax PHP Game Wikipedia Images Wait Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpgwit'>Previous relevant <a target=_blank title='Ajax PHP Game Wikipedia Images Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-game-wikipedia-images-tutorial\/'>Ajax PHP Game Wikipedia Images Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Game Wikipedia Images Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example_wikipedia_images.gif\" title=\"Ajax PHP Game Wikipedia Images Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Game Wikipedia Images Tutorial<\/p><\/div>\n<p>Today we&#8217;re combining &#8230;<\/p>\n<ul>\n<li>the progress in the day before yesterday&#8217;s <a title='Ajax PHP RegEx Entry Games Tutorial' href='#aphpreegt'>Ajax PHP RegEx Entry Games Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>the integration reminders of how &#8220;every picture is worth a thousand words&#8221; from yesterday&#8217;s <a target=_blank title=\"Worldwide Country Quiz Game Wikipedia Images Tutorial\" href=\"\/\/www.rjmprogramming.com.au\/ITblog\/worldwide-country-quiz-game-wikipedia-images-tutorial\">Worldwide Country Quiz Game Wikipedia Images Tutorial<\/a> work<\/li>\n<\/ul>\n<p> &#8230; to come up with an &#8220;optionally show Wikipedia images&#8221; improvement to our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\" title=\"Click picture\">Ajax PHP<\/a> web application, of recent times.<\/p>\n<p>As for (our work) yesterday we add to the bottom of document.body the static HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;div id=stz style=display:none;&gt;&lt;\/div&gt;&lt;input id=addthis type=hidden value=''&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as well as the element id=ourcanvas incarnation, this time a <font color=blue>td (cell) element<\/font> that sits over to the right, and is basically pink<sub>ish<\/sub> &#8230;<\/p>\n<p><font color=blue>&lt;table style=width:100%;&gt;&lt;tr&gt;&lt;td&gt;<\/font> &#8230; the rest of the content as per previous progress &#8230;<br \/>\n<code><br \/>\n<font color=blue>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;br&gt;&lt;br&gt;<br \/>\n&lt;\/td&gt;&lt;td title=\"Click a bold word to left and then click here for Wikipedia images, as relevant\" id=ourcanvas style=\"background:linear-gradient(to right, white, lightpink, pink);width:50%; onclick=filltdright();\" onmouseover=\"if (lcd &gt;= 2) { filltdright();  }\" ontouchend=\"if (lcd &gt;= 3) { filltdright();  }\"&gt;&lt;\/td&gt;<br \/>\n<\/font><\/code><br \/>\n<font color=blue>&lt;\/tr&gt;&lt;\/table&gt;<\/font><\/p>\n<p> &#8230; as the static HTML helping out the dynamic Javascript &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var clickedurl='';<br \/>\nvar lcd=-1, lastlcd=-1;<\/font><br \/>\n<br \/>\n<font color=blue>function doclickedurl(fio,thisp) {<br \/>\n if (document.getElementById('ssug') && thisp &gt;= lastlcd) {<br \/>\n  lcd=thisp;<br \/>\n  lastlcd=thisp;<br \/>\n  if (fio.innerText != '') {<br \/>\n   var sects=document.getElementById('ssug').innerHTML.replace(\/\\_\/g,' ').split('&gt;' + fio.innerText.replace(\/\\_\/g,' ') + ' ');<br \/>\n   if (eval('' + sects.length) &lt;= 1) {<br \/>\n     sects=document.getElementById('ssug').innerHTML.replace(\/\\_\/g,' ').split('&gt;' + fio.innerText.replace(\/\\_\/g,' '));<br \/>\n   }<br \/>\n   if (eval('' + sects.length) &gt;= 2) {<br \/>\n     if (document.getElementById('stopics').value == 'capitals') {<br \/>\n     clickedurl=getpu(sects[0].split(' value=\"')[eval(-1 + sects[0].split(' value=\"').length)].split('\"')[0].split(' (')[0].replace(\/\\ \/g,'_')); \/\/sects[0].split(' value=\"')[eval(-1 + sects[0].split(' value=\"').length)].split('\"')[0];<br \/>\n     } else {<br \/>\n     clickedurl=getpu(sects[0].split(' value=\"')[eval(-1 + sects[0].split(' value=\"').length)].split('\"')[0].split(' (HTTP')[0].split(' (http')[0].replace(\/\\ \/g,'_')); \/\/sects[0].split(' value=\"')[eval(-1 + sects[0].split(' value=\"').length)].split('\"')[0];<br \/>\n     }<br \/>\n     document.getElementById('ourcanvas').title=\"Click a bold word to left and then click here for Wikipedia images, \" + (\"as relevant ... \" + clickedurl).replace(\/\\ \\.\\.\\.\\ $\/g,'').replace(' \/\/', ' http:\/\/');<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n function mydivptr() {<br \/>\n   if (document.getElementById('addthis').value != '0') {<br \/>\n     setTimeout(mydivptr, 1000);<br \/>\n   } else {<br \/>\n     if (document.getElementById('ourcanvas')) {  document.getElementById('ourcanvas').style.cursor='pointer'; }<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\nfunction filltdright() {<br \/>\n var selovalue='';<br \/>\n if (clickedurl.toLowerCase().indexOf('wikipedia.') != -1 && clickedurl.indexOf('\/wiki\/') != -1) {<br \/>\n   selovalue=clickedurl.split('\/wiki\/')[1];<br \/>\n   document.getElementById('addthis').value='';<br \/>\n   document.getElementById('ourcanvas').innerHTML='&lt;iframe frameborder=0 style=display:none; src=\/PHP\/fgc\/?tzexact=' + encodeURIComponent(selovalue.substring(0,1).toUpperCase() + selovalue.substring(1)) + '&tznickname=' + encodeURIComponent(selovalue.replace(\/\\_\/g,' ')) + '&gt;&lt;\/iframe&gt;';<br \/>\n   document.getElementById('ourcanvas').style.cursor='progress';<br \/>\n   setTimeout(mydivptr, 1000);<br \/>\n }<br \/>\n}<\/font><br \/>\n<br \/>\nfunction fancyize(insc) {<br \/>\n  var outinsc=insc + ', ';<br \/>\n  var csvs=insc.split(', ');<br \/>\n  lcd=-1;<br \/>\n  lastlcd=-1;<br \/>\n  for (var jj=eval(-1 + csvs.length); jj&gt;=0; jj--) {<br \/>\n    if (csvs[jj].toLowerCase().indexOf(' (http') != -1) {<br \/>\n      <font color=blue>document.getElementById('ourcanvas').style.background='linear-gradient(to right, white, lightpink, pink)';<br \/>\n      document.getElementById('ourcanvas').title=\"Click a bold word to left and then click here for Wikipedia images, \" + (\"as relevant ... \" + clickedurl).replace(\/\\ \\.\\.\\.\\ $\/g,'').replace(' \/\/', ' http:\/\/');<\/font><br \/>\n      outinsc=outinsc.replace(csvs[jj] + ', ', '<font color=blue>&lt;span title=\"Click to set the URL for pink area click\" style=cursor:pointer; ontouchstart=doclickedurl(this,3); onmouseover=doclickedurl(this,1); onclick=doclickedurl(this,2);&gt;&lt;strong&gt;<\/font>&lt;font color=blue&gt;' + csvs[jj].split(' (')[0] + '&lt;\/font&gt;&lt;\/strong&gt;<font color=blue>&lt;\/span&gt;<\/font>&lt;font size=1&gt; (&lt;a target=_blank href=\"' + csvs[jj].split(' (')[1].split(')')[0] + '\"&gt;' + csvs[jj].split(' (')[1].split(')')[0].replace('HTTP:','http:') + '&lt;\/a&gt;)&lt;\/font&gt;, ');<br \/>\n    } else if (csvs[jj].indexOf(' (') != -1) {<br \/>\n      <font color=blue>document.getElementById('ourcanvas').style.background='linear-gradient(to right, white, lightpink, pink)';<br \/>\n      document.getElementById('ourcanvas').title=\"Click a bold word to left and then click here for Wikipedia images, \" + (\"as relevant ... \" + clickedurl).replace(\/\\ \\.\\.\\.\\ $\/g,'').replace(' \/\/', ' http:\/\/');<\/font><br \/>\n      outinsc=outinsc.replace(csvs[jj] + ', ', '<font color=blue>&lt;span title=\"Click to set the URL for pink area click\" style=cursor:pointer; ontouchstart=doclickedurl(this,3); onmouseover=doclickedurl(this,1); onclick=doclickedurl(this,2);&gt;&lt;strong&gt;<\/font>&lt;font color=blue&gt;' + csvs[jj].split(' (')[0] + '&lt;\/font&gt;&lt;\/strong&gt;<font color=blue>&lt;\/span&gt;<\/font>&lt;font size=1&gt; (' + csvs[jj].split(' (')[1].split(')')[0] + ')&lt;\/font&gt;, ');<br \/>\n    } else {<br \/>\n      if (getpu('').toLowerCase().indexOf('wikipedia.') != -1) {<br \/>\n      <font color=blue>document.getElementById('ourcanvas').style.background='linear-gradient(to right, white, lightpink, pink)';<br \/>\n      document.getElementById('ourcanvas').title=\"Click a bold word to left and then click here for Wikipedia images, \" + (\"as relevant ... \" + clickedurl).replace(\/\\ \\.\\.\\.\\ $\/g,'').replace(' \/\/', ' http:\/\/');<\/font><br \/>\n      outinsc=outinsc.replace(csvs[jj] + ', ', '<font color=blue>&lt;span title=\"Click to set the URL for pink area click\" style=cursor:pointer; ontouchstart=doclickedurl(this,3); onmouseover=doclickedurl(this,1); onclick=doclickedurl(this,2);&gt;&lt;strong&gt;<\/font>&lt;font color=blue&gt;' + csvs[jj] + '&lt;\/font&gt;&lt;\/strong&gt;<font color=blue>&lt;\/span&gt;<\/font>, ');<br \/>\n      } else {<br \/>\n      <font color=blue>document.getElementById('ourcanvas').style.backgroundColor='white';<br \/>\n      document.getElementById('ourcanvas').title=\"\";<\/font><br \/>\n      outinsc=outinsc.replace(csvs[jj] + ', ', '<font color=blue>&lt;span data-title=\"Click to set the URL for pink area click\" data-style=cursor:pointer; data-ontouchstart=doclickedurl(this,3); data-onmouseover=doclickedurl(this,1); data-onclick=doclickedurl(this,2);&gt;<\/font>&lt;strong&gt;&lt;font color=blue&gt;' + csvs[jj] + '&lt;\/font&gt;&lt;\/strong&gt;<font color=blue>&lt;\/span&gt;<\/font>, ');<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return outinsc.replace(\/\\,\\ $\/g,'');<br \/>\n}<br \/>\n<br \/>\n<font color=blue>function getpu(sone) {<br \/>\n  var xsugg='';<br \/>\n                if (proposedu != '') {<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(this.value.split(String.fromCharCode(32) + String.fromCharCode(40))[1].split(String.fromCharCode(41))[0].replace(\/\\\\ \/g,String.fromCharCode(95)),' + \"'_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                if (proposedu.indexOf('\/wiki\/') != -1) {<br \/>\n                return proposedu.split('\/wiki\/')[0] + '\/wiki\/' + sone;<br \/>\n                } else {<br \/>\n                return proposedu + sone;<br \/>\n                }<br \/>\n                } else if (selval == '') {<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select a name for a Name lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'' + nurl + encodeURIComponent(this.value.toLowerCase()) + snurl,'_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                return xsugg.split(\"window.open('\")[1].split(\"'\")[0] + sone;<br \/>\n                } else if (selval == '&RegEx=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select a word for lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'' + gnurl + encodeURIComponent(this.value.toLowerCase()),'_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                return xsugg.split(\"window.open('\")[1].split(\"'\")[0] + sone;<br \/>\n                } else if (selval == '&capitals=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select a Capital for a National capital lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.split(' (')[0].replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                return xsugg.split(\"window.open('\")[1].split(\"'\")[0] + sone;<br \/>\n                } else if (selval == '&hobbies=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select a Hobby to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.split(' (')[0].replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                return xsugg.split(\"window.open('\")[1].split(\"'\")[0] + sone;<br \/>\n                } else if (selval == '&fruits=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select a Fruit to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/simple.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                return xsugg.split(\"window.open('\")[1].split(\"'\")[0] + sone;<br \/>\n                } else if (selval == '&vegetables=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                xsugg='&lt;select style=background-color:yellow; title=\"Select a Vegetable to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/simple.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                return xsugg.split(\"window.open('\")[1].split(\"'\")[0] + sone;<br \/>\n                }<br \/>\n  return xsugg;<br \/>\n}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html-----GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html-----GETME\" title=''>sixth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-game-wikipedia-images-tutorial\/'>Ajax PHP Game Wikipedia Images Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpreegt'>Previous relevant <a target=_blank title='Ajax PHP RegEx Entry Games Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-regex-entry-games-tutorial\/'>Ajax PHP RegEx Entry Games Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP RegEx Entry Games Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example_regex.jpg\" title=\"Ajax PHP RegEx Entry Games Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP RegEx Entry Games Tutorial<\/p><\/div>\n<p>Up until yesterday&#8217;s <a title='Ajax PHP Your Recallable Games Tutorial' href='#aphpyrgt'>Ajax PHP Your Recallable Games Tutorial<\/a> the data filtering taking place in the gray textbox consisted of &#8230;<\/p>\n<ul>\n<li>a &#8220;starts with&#8221; string based data filtering &#8230; and today we add onto that &#8230;<\/li>\n<li>a &#8220;regular expression&#8221; (often called RegEx) string based data filtering<\/li>\n<\/ul>\n<p> &#8230; to add to the &#8220;precision&#8221; of the web application&#8217;s filtering prowess.<\/p>\n<p>There are different forms of regular expression <i>expression<\/i> through &#8230;<\/p>\n<ul>\n<li>PHP<\/li>\n<li>Javascript<\/li>\n<li>Linux or unix or macOS shell languages<\/li>\n<\/ul>\n<p> &#8230; as &#8220;intervention point&#8221; choices with our current Ajax PHP Game web application.<\/p>\n<p>We first tried the PHP approach through <a target=_blank title='preg_match info' href='https:\/\/www.php.net\/manual\/en\/function.preg-match.php'>preg_match<\/a> but found it resource hungry at the web application logic end, and so then reasoned giving the job to the Linux shell, via <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> conduit, might be more efficient, as our testing confirmed.  The <a target=_blank title='grep info' href='https:\/\/www.computerhope.com\/unix\/ugrep.htm'>grep<\/a> command can accept <a target=_blank title='https:\/\/www.guru99.com\/linux-regular-expressions.html' href='\/\/www.guru99.com\/linux-regular-expressions.html'>its form of regular expression syntax<\/a>, that, in our opinion, matches the ease of understanding Javascript regular expressions makes us feel.  That&#8217;s good, but we need to think about the interactive user interfacing.  The grep regular expressions do not use front and back &#8220;\/&#8221; character delimitation like a lot of the others do, and that &#8220;\/&#8221; character can help us change the  <a target=_blank title='Event onkeyup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onkeyup.asp'>&#8220;onkeyup&#8221;<\/a> logic to effectively wait for the user to complete the regular expression before acting &#8230; a wise move!  And so we develop a hybrid <i>\/[grep regular expression]\/<\/i> HTML and Javascript supervisory and changed &#8220;onkeyup&#8221; function event <font color=blue>changed logic<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction showHint(str) {<br \/>\n    var dsug=\"Suggestion\";<br \/>\n    var sugs=[];<br \/>\n    var thr='';<br \/>\n    var xsize='', xd=1;<br \/>\n    if (dosize) { xsize=' size=' + xd + ' ';  }<br \/>\n<br \/>\n    <font color=blue>if (eval('' + str.length) &gt;= 1 && (str + ' ').substring(0,1) == '\/') {<br \/>\n        var regs=str.split('\/');<br \/>\n        document.body.style.cursor='progress';<br \/>\n        document.getElementById('fname').title='Regarding optional RegEx use please read from https:\/\/www.guru99.com\/linux-regular-expressions.html (except that we want you to encase within \/ characters) else type for autocomplete list to display below';<br \/>\n        if (eval('' + regs.length) &lt;= 2) { return '';  }<br \/>\n        \/\/if (regs[2].trim() == '') { document.getElementById('fname').value+='i'; str+='i';   }<br \/>\n        document.body.style.cursor='pointer';<br \/>\n    }<br \/>\n    if (8 == 8) {<br \/>\n    if (selval.indexOf('&RegEx=') != -1 && eval('' + str.length) &lt;= 1) {<br \/>\n        if (eval('' + str.length) == 1) { document.body.style.cursor='progress'; }<br \/>\n        return '';<br \/>\n    } else if (selval.indexOf('&RegEx=') != -1) {<br \/>\n        document.body.style.cursor='pointer';<br \/>\n    }<br \/>\n    }<\/font><br \/>\n    if (str.length == 0) {<br \/>\n        document.getElementById(\"txtHint\").innerHTML = \"\";<br \/>\n        return;<br \/>\n    } else {<br \/>\n        var xmlhttp = new XMLHttpRequest();<br \/>\n        xmlhttp.onreadystatechange = function() {<br \/>\n            if (this.readyState == 4 && this.status == 200) {<br \/>\n                thr=this.responseText;<br \/>\n                if (this.responseText.replace('no suggestion', '') != '') {<br \/>\n                \/\/alert(this.responseText);<br \/>\n                sugs=this.responseText.split(', ');<br \/>\n                if (proposedu != '') {<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(this.value.split(String.fromCharCode(32) + String.fromCharCode(40))[1].split(String.fromCharCode(41))[0].replace(\/\\\\ \/g,String.fromCharCode(95)),' + \"'_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                } else if (selval == '') {<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select a name for a Name lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'' + nurl + encodeURIComponent(this.value.toLowerCase()) + snurl,'_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                <font color=blue>} else if (selval == '&RegEx=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select a word for lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'' + gnurl + encodeURIComponent(this.value.toLowerCase()),'_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                <\/font>} else if (selval == '&capitals=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select a Capital for a National capital lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.split(' (')[0].replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                } else if (selval == '&hobbies=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select a Hobby to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.split(' (')[0].replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                } else if (selval == '&fruits=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select a Fruit to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/simple.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                } else if (selval == '&vegetables=') { \/\/ https:\/\/en.wikipedia.org\/wiki\/<br \/>\n                dsug='&lt;select style=background-color:yellow; title=\"Select a Vegetable to lookup\" id=ssug onchange=\"if (this.value.length != 0) { document.getElementById(' + \"'fname'\" + ').value=this.value.replace(\/\\\\_\/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + \"'\/\/simple.wikipedia.org\/wiki\/' + encodeURIComponent(this.value.replace(\/\\\\ \/g,'_')) + '','_blank','top=\" + eval(screen.height * 0.2) + \",left=\" + eval(screen.width * 0.5) + \",width=\" + eval(screen.width * 0.5) + \",height=\" + eval(screen.height * 0.7) + \"');\" + ' this.value=' + \"''\" + '; }\"&gt;&lt;option value=' + \"''\" + '&gt;Suggestion&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n                }<br \/>\n                for (var jsug=0; jsug&lt;sugs.length; jsug++) {<br \/>\n                  if (dsug.indexOf('&gt;' + sugs[jsug].replace(\/\\_\/g,' ') + '&lt;') == -1 && proposedu == '') {<br \/>\n                  dsug=dsug.replace('&lt;\/select&gt;', '&lt;option value=\"' + sugs[jsug] + '\"&gt;' + sugs[jsug].replace(\/\\_\/g,' ') + '&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n    if (dosize) { xd++; xsize=' size=' + xd + ' ';  }<br \/>\n                  } else if (dsug.indexOf('&gt;' + sugs[jsug] + '&lt;') == -1 && proposedu != '') {<br \/>\n                  dsug=dsug.replace('&lt;\/select&gt;', '&lt;option value=\"' + sugs[jsug] + '\"&gt;' + sugs[jsug] + '&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n    if (dosize) { xd++; xsize=' size=' + xd + ' ';  }<br \/>\n                  } else {<br \/>\n                  thr=thr.replace(', ' + sugs[jsug], '');<br \/>\n                  }<br \/>\n                }<br \/>\n                }<br \/>\n                if (xsize != '') {<br \/>\n                document.getElementById(\"dsug\").innerHTML = dsug.replace('&lt;select ', '&lt;select ' + xsize + ' ');<br \/>\n                } else {<br \/>\n                document.getElementById(\"dsug\").innerHTML = dsug;<br \/>\n                }<br \/>\n                if (proposedu == '') {<br \/>\n                document.getElementById(\"txtHint\").innerHTML = fancyize(thr.replace(\/\\_\/g,' '));<br \/>\n                } else {<br \/>\n                document.getElementById(\"txtHint\").innerHTML = fancyize(thr);<br \/>\n                }<br \/>\n            }<br \/>\n        };<br \/>\n        xmlhttp.open(\"GET\", \"gethint.php?q=\" + str + selval, true);<br \/>\n        xmlhttp.send();<br \/>\n    }<br \/>\n}<br \/>\n<\/code> <\/p>\n<p> &#8230; along with accompanying user advice &#8230;<\/p>\n<blockquote>\n<p style=background-color:#f0f0f0;>Regarding optional RegEx use in the grey textbox below please read from <a target=_blank title='https:\/\/www.guru99.com\/linux-regular-expressions.html' href='\/\/www.guru99.com\/linux-regular-expressions.html'>https:\/\/www.guru99.com\/linux-regular-expressions.html<\/a> (except that we want you to encase within \/ characters) else type for autocomplete list to display further below.  An example First name in RegEx could be finding Barry via \/^Ba.r.$\/<\/p>\n<\/blockquote>\n<p> &#8230; to meet (an example of the) PHP exec grep data filtering logic &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['RegEx'])) {<br \/>\n$a=[];<br \/>\n$c=[];<br \/>\n$myq=\"~\";<br \/>\nif (substr(urldecode($_REQUEST[\"q\"]),0,1) != \"\/\") {<br \/>\n$myq=substr(urldecode($_REQUEST[\"q\"]),0,1);<br \/>\nexec(\"grep -i '^\" . strtolower(urldecode($_REQUEST[\"q\"])) . \"' \/usr\/share\/dict\/words &gt; \/tmp\/mywlist.txt\");<br \/>\n} else {<br \/>\nexec(\"grep -i '\" . explode('\/', urldecode($_REQUEST[\"q\"]))[1] . \"' \/usr\/share\/dict\/words &gt; \/tmp\/mywlist.txt\");<br \/>\n\/\/unlink(\"\/tmp\/mywlist.txt\");<br \/>\n}<br \/>\nif (file_exists(\"\/tmp\/mywlist.txt\")) {<br \/>\n$moren=explode(\"\\n\", file_get_contents('\/tmp\/mywlist.txt'));<br \/>\nunlink(\"\/tmp\/mywlist.txt\");<br \/>\n} else {<br \/>\n$moren=explode(\"\\n\", file_get_contents('\/usr\/share\/dict\/words'));<br \/>\n}<br \/>\nfor ($ii=0; $ii&lt;sizeof($moren); $ii++) {<br \/>\n   if (strtolower(substr($moren[$ii],0,1)) &gt; strtolower(substr($myq,0,1))) { break; }<br \/>\n   if (!in_array($moren[$ii], $a) && ($myq == \"~\" || strtolower(substr($myq,0,1)) == strtolower(substr($moren[$ii],0,1)))) { array_push($a, $moren[$ii]); }<br \/>\n}<br \/>\nsort($a);<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html----GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html----GETME\" title=''>fifth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application calling on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gethint.php---GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gethint.php---GETME\" title=''>gethint.php<\/a> helper.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-ajax-php-your-recallable-games-tutorial\/'>New Ajax PHP Your Recallable Games Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpyrgt'>Previous relevant <a target=_blank title='Ajax PHP Your Recallable Games Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-your-recallable-games-tutorial\/'>Ajax PHP Your Recallable Games Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Your Recallable Games Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example_your_recall.jpg\" title=\"Ajax PHP Your Recallable Games Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Your Recallable Games Tutorial<\/p><\/div>\n<p>If you&#8217;re asking a lot of users in terms of interactive entry ideas in a web application, then it is good to offer the user the chance to remember (or recall) those entries, so they do not need to re-enter them.  And so, with yesterday&#8217;s <a title='Ajax PHP Your Games Tutorial' href='#aphpygt'>Ajax PHP Your Games Tutorial<\/a>&#8216;s URL (and possibly href prefixing delimiter) data items &#8230;<\/p>\n<ul>\n<li>data source URL<\/li>\n<li>hyperlink href prefixing delimiter<\/li>\n<\/ul>\n<p> &#8230; would benefit from a &#8220;recall mechanism&#8221; in our Javascript code.<\/p>\n<p>Where can we store these &#8220;recall strings&#8221;?  Well, we could use HTTP Cookies, but we prefer to use window.<a target=_blank title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> around here, as much as anything, because there is more room to move there.   Here&#8217;s us updating window.localStorage within our Javascript &#8230;<\/p>\n<p><code><br \/>\nfunction evenso() {<br \/>\n  if (saveit) {<br \/>\n    saveit=false;<br \/>\n    var sofar=('' + window.localStorage.getItem('selvalurl')).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n    if (sofar.trim() != '') {<br \/>\n        window.localStorage.setItem('selvalurl', sofar + encodeURIComponent('?' + selval));<br \/>\n    } else {<br \/>\n        window.localStorage.setItem('selvalurl', encodeURIComponent('' + selval));<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Try this for yourself in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html---GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html---GETME\" title=''>fourth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-your-recallable-games-tutorial\/'>Ajax PHP Your Recallable Games Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpygt'>Previous relevant <a target=_blank title='Ajax PHP Your Games Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-your-games-tutorial\/'>Ajax PHP Your Games Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Your Games Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example_yours.jpg\" title=\"Ajax PHP Your Games Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Your Games Tutorial<\/p><\/div>\n<p>Progressing past yesterday&#8217;s <a title='Ajax PHP Games Tutorial' href='#aphpgt'>Ajax PHP Games Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>hardcoded game mode to dropdown multiple choice (but static list) game mode list &#8230; and today &#8230;<\/li>\n<li>we add on a dropdown option &#8220;Your own &#8230;&#8221; where a user can enter &#8230;\n<ol>\n<li>URL containing regularised &#8220;list of&#8221; hyperlink content &#8230; and perhaps &#8230;<\/li>\n<li>specify an &#8220;a&#8221; href determining HTML snippet delimitation<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; the dropdown &#8220;onchange&#8221; Javascript logic <font color=blue>changing this way<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var proposedu='';<\/font><br \/>\n<br \/>\nfunction selvalit(selo) {<br \/>\n  <font color=blue>proposedu='';<\/font><br \/>\n  document.getElementById('fname').value='';<br \/>\n  document.getElementById('txtHint').innerHTML='';<br \/>\n  if (selo.value.trim() == '') {<br \/>\n    <font color=blue>if (selo.value != '') {<br \/>\n      proposedu=prompt('Please enter a \"List of\" type of URL eg. http:\/\/en.wikipedia.org\/wiki\/List_of_rivers', '');<br \/>\n      if (proposedu == null) { proposedu=''; }<br \/>\n      selval='&' + proposedu.split('\/')[eval(-1 + proposedu.split('\/').length)].split('?')[0].split('#')[0].replace(\/\\ \/g,'_').replace('List_of_','') + '=' + encodeURIComponent(proposedu) + '&delim=' + encodeURIComponent('&lt;li&gt;&lt;a href=\"\/wiki\/');<br \/>\n      document.getElementById('stopics').innerHTML+='&lt;option value=\"' + proposedu.split('\/')[eval(-1 + proposedu.split('\/').length)].split('?')[0].split('#')[0].replace(\/\\ \/g,'_').replace('List_of_','') + '\" data-selval=\"' + selval + '\"&gt;' + proposedu.split('\/')[eval(-1 + proposedu.split('\/').length)].split('?')[0].split('#')[0].replace(\/\\ \/g,'_').replace('List_of_','').replace(\/\\_\/g,' ').substring(0,1).toUpperCase() + proposedu.split('\/')[eval(-1 + proposedu.split('\/').length)].split('?')[0].split('#')[0].replace(\/\\ \/g,'_').replace('List_of_','').replace(\/\\_\/g,' ').substring(1) + '&lt;\/option&gt;';<br \/>\n      document.getElementById('stopics').value=proposedu.split('\/')[eval(-1 + proposedu.split('\/').length)].split('?')[0].split('#')[0].replace(\/\\ \/g,'_').replace('List_of_','');<br \/>\n      getdelim(proposedu);<br \/>\n    }<br \/>\n    if (proposedu == '') {<br \/>\n      selval=selo.value.trim();<br \/>\n    }<br \/>\n  } else if (document.getElementById('stopics').innerHTML.indexOf(' value=\"' + selo.value.trim() + '\" data-selval=\"') != -1) {<br \/>\n    selval=document.getElementById('stopics').innerHTML.split(' value=\"' + selo.value.trim() + '\" data-selval=\"')[1].split('\"')[0];<br \/>\n    proposedu=decodeURIComponent(selval.substring(1).split('=')[1].split('&')[0]);<br \/>\n    getdelim(proposedu);<\/font><br \/>\n  } else {<br \/>\n    selval='&' + selo.value.trim() + '=';<br \/>\n  }<br \/>\n  document.getElementById('fname').focus();<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and in the helping PHP snippet <font color=blue>it changed this way handling the array $a<\/font> below &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$c=[];<br \/>\n<br \/>\n\/\/ Start of \/usr\/share\/dict\/propernames intervention<br \/>\nif (isset($_GET['capitals'])) {<br \/>\n$a=[];<br \/>\n$c=[];<br \/>\n$cont=file_get_contents('http:\/\/en.wikipedia.org\/wiki\/List_of_national_capitals');<br \/>\n$tableih=explode(\"&lt;tbody\", explode(\"&lt;\/table&gt;\", $cont)[1])[1];<br \/>\n\/\/file_put_contents('za.za','is ' . '&lt;td&gt;&lt;a href=\"\/wiki\/ in ' . $tableih);<br \/>\n$capitals=explode('&lt;td&gt;&lt;a href=\"\/wiki\/', $tableih);<br \/>\nfor ($ii=1; $ii&lt;sizeof($capitals); $ii++) {<br \/>\n  if (strpos($capitals[$ii], '&lt;a href=\"\/wiki\/') !== false) {<br \/>\n  array_push($a, str_replace('+',' ',urldecode(explode('\"', $capitals[$ii])[0])) . ' (' . str_replace('+',' ',urldecode(explode('\"', explode('&lt;a href=\"\/wiki\/', $capitals[$ii])[1])[0])) . ')');<br \/>\n  }<br \/>\n}<br \/>\n\/\/sort($a);<br \/>\n} else if (isset($_GET['hobbies'])) {<br \/>\n$a=[];<br \/>\n$c=[];<br \/>\n$cont=file_get_contents('http:\/\/en.wikipedia.org\/wiki\/List_of_hobbies');<br \/>\n$hobbies=explode('&lt;li&gt;&lt;a href=\"\/wiki\/', $cont);<br \/>\nfor ($ii=1; $ii&lt;sizeof($hobbies); $ii++) {<br \/>\n  array_push($a, str_replace('+',' ',str_replace('_',' ',urldecode(explode('\"', $hobbies[$ii])[0]))));<br \/>\n}<br \/>\nsort($a);<br \/>\n} else if (isset($_GET['fruits'])) {<br \/>\n$a=[];<br \/>\n$c=[];<br \/>\n$cont=file_get_contents('http:\/\/simple.wikipedia.org\/wiki\/List_of_fruits');<br \/>\n$fruits=explode('&lt;li&gt;&lt;a href=\"\/wiki\/', $cont);<br \/>\nfor ($ii=1; $ii&lt;sizeof($fruits); $ii++) {<br \/>\n  array_push($a, str_replace('+',' ',str_replace('_',' ',urldecode(explode('\"', $fruits[$ii])[0]))));<br \/>\n}<br \/>\nsort($a);<br \/>\n} else if (isset($_GET['vegetables'])) {<br \/>\n$a=[];<br \/>\n$c=[];<br \/>\n$cont=file_get_contents('http:\/\/simple.wikipedia.org\/wiki\/List_of_vegetables');<br \/>\n$vegetables=explode('&lt;li&gt;&lt;a href=\"\/wiki\/', $cont);<br \/>\nfor ($ii=1; $ii&lt;sizeof($vegetables); $ii++) {<br \/>\n  array_push($a, str_replace('+',' ',str_replace('_',' ',urldecode(explode('\"', $vegetables[$ii])[0]))));<br \/>\n}<br \/>\nsort($a);<br \/>\n} else <font color=blue>if (strpos(('' . $_SERVER['QUERY_STRING']), '&') === false)<\/font> {<br \/>\n\/\/ With \/usr\/share\/dict\/propernames intervention ...<br \/>\n$moren=explode(\"\\n\", file_get_contents('\/usr\/share\/dict\/propernames'));<br \/>\nfor ($ii=0; $ii&lt;sizeof($moren); $ii++) {<br \/>\n   if (!in_array($moren[$ii], $a)) { array_push($a, $moren[$ii]); }<br \/>\n}<br \/>\nsort($a);<br \/>\n} <font color=blue>else {<br \/>\n$concept=explode('=', explode('&', str_replace('&delim=','#delim=',('' . $_SERVER['QUERY_STRING'])))[1])[0];<br \/>\n$url='HTTP:' . str_replace('http:','',str_replace('https:','',str_replace('+',' ',urldecode(explode('#', explode('&', explode('=', explode('&', ('' . $_SERVER['QUERY_STRING']))[1])[1])[0])[0]))) );<br \/>\n$delimidea='&lt;li&gt;&lt;a href=\"\/wiki\/';<br \/>\n$minidelim='\"';<br \/>\n$spacesub='_';<br \/>\n$plusbit='';<br \/>\nif (isset($_GET['delim'])) {<br \/>\n$delimidea=str_replace('+',' ',urldecode($_GET['delim']));<br \/>\nif (strpos(str_replace(' ','',strtolower($delimidea)), \" href='\") !== false) {<br \/>\n$minidelim=\"'\";<br \/>\n} else if (strpos(str_replace(' ','',strtolower($delimidea)), ' href=\"') === false && strpos(str_replace(' ','',strtolower($delimidea)), ' href=') !== false) {<br \/>\n$minidelim=\" \";<br \/>\n}<br \/>\n}<br \/>\nif (strpos(strtolower($url), 'wikipedia.') === false) {<br \/>\n$spacesub=\"%20\";<br \/>\n}<br \/>\nif (strpos($delimidea, (' href=' . trim($minidelim))) !== false) {<br \/>\n  $plusbit=trim(explode((' href=' . trim($minidelim)), $delimidea)[1]);<br \/>\n  if (substr(($plusbit . '  '),0,2) != '\/\/' && substr(($plusbit . '  '),0,1) == '\/') {<br \/>\n  if (strpos($url, $plusbit) !== false) { $upre=explode($plusbit, $url)[0] . $plusbit;  $plusbit=$upre;  }<br \/>\n  } else if (substr(($plusbit . '  '),0,2) != '..' && substr(($plusbit . '  '),0,1) == '.') {<br \/>\n  if (strpos($url, $plusbit) !== false) {<br \/>\n    $upre=explode($plusbit, $url)[0];  $plusbit=$upre . $plusbit;<br \/>\n  } else if (strpos($url, substr($plusbit,1)) !== false) {<br \/>\n    $upre=explode(substr($plusbit,1), $url)[0];  $plusbit=$upre . substr($plusbit,1);<br \/>\n  }<br \/>\n  } else if (substr(($plusbit . '  '),0,2) == '..') {<br \/>\n  if (strpos($url, $plusbit) !== false) {<br \/>\n    $upre=explode($plusbit, $url)[0];  $plusbit=$upre . $plusbit;<br \/>\n  } else if (strpos($url, substr($plusbit,2)) !== false) {<br \/>\n    $upre=explode(substr($plusbit,2), $url)[0];  $plusbit=$upre . substr($plusbit,2);<br \/>\n  }<br \/>\n  } else if (substr(($plusbit . '  '),0,2) == '\/\/') {<br \/>\n  $plusbit='http:' . $plusbit;<br \/>\n  } else if (strtolower(substr(($plusbit . '          '),0,5)) == 'http:') {<br \/>\n  $plusbit='http:' . substr($plusbit,5);<br \/>\n  } else if (strtolower(substr(($plusbit . '          '),0,6)) == 'https:') {<br \/>\n  $plusbit='http:' . substr($plusbit,6);<br \/>\n  } else if (substr(($plusbit . '    '),0,4) == 'www.') {<br \/>\n  $plusbit='http:\/\/' . $plusbit;<br \/>\n  }<br \/>\n}<br \/>\n$a=[];<br \/>\n$c=[];<br \/>\n$origplusbit=$plusbit;<br \/>\n$cont=file_get_contents($url);<br \/>\n$things=explode($delimidea, $cont);<br \/>\nfor ($ii=1; $ii&lt;sizeof($things); $ii++) {<br \/>\n  $plusbit=$origplusbit;<br \/>\n  if ($plusbit !== '') {<br \/>\n    $plusbit=' ' . str_replace(' ','_','(' . $origplusbit . explode('&gt;', explode($minidelim, $things[$ii])[0])[0] . ')');<br \/>\n  }<br \/>\n  array_push($a, str_replace('List of ','',explode('#', explode('&', explode('?', explode(\"\/\", str_replace('+',' ',str_replace($spacesub,' ',urldecode(explode('&gt;', explode($minidelim, $things[$ii])[0])[0]))))[-1 + sizeof(explode(\"\/\", str_replace('+',' ',str_replace($spacesub,' ',urldecode(explode('&gt;', explode($minidelim, $things[$ii])[0])[0])))))])[0])[0])[0]) . $plusbit);<br \/>\n}<br \/>\nsort($a);<br \/>\n}<\/font><br \/>\n\/\/ ... end of \/usr\/share\/dict\/propernames intervention<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; whereby relative URLs can be mapped to absolute ones in these personalization based modifications in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html--GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html--GETME\" title=''>third draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now yet more than)<\/font> Firstname Game<\/a> web application calling on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gethint.php--GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gethint.php--GETME\" title=''>gethint.php<\/a> helper.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-your-games-tutorial\/'>Ajax PHP Your Games Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpgt'>Previous relevant <a target=_blank title='Ajax PHP Games Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-games-tutorial\/'>Ajax PHP Games Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Games Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_wikipedia.jpg\" title=\"Ajax PHP Games Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Games Tutorial<\/p><\/div>\n<p>Once you have a good web application &#8220;basis for design&#8221; it&#8217;s pretty inevitable that to extend that web application is pretty easy to do.  This was definitely the case, working off the start yesterday&#8217;s <a title='Ajax PHP Firstname Game Primer Tutorial' href='#aphpfgpt'>Ajax PHP Firstname Game Primer Tutorial<\/a> gave us.<\/p>\n<p>The PHP organizes data.  The HTML and Javascript supervisor calls the PHP and displays the data.<\/p>\n<p>The HTML and Javascript supervisor starts the day with a hardcoding &#8220;First name&#8221;.  We add to the functionality by turning that &#8220;First name&#8221; into a dropdown (ie. select) element with a first option of &#8220;First name&#8221;, and subsequent (non default) options titling other <i>sub-games<\/i> of the web application, today being &#8230;<\/p>\n<p><select size=5 data-onchange=selvalit(this); style=display:inline-block;><option value=''>First name<\/option><option value='capitals'>National capital<\/option><option value='hobbies'>Hobby<\/option><option value='fruits'>Fruit<\/option><option value='vegetables'>Vegetable<\/option><\/select><\/p>\n<p>Why these <i>sub-options<\/i>?  We found good publicly available data sources for <i>Lists<sub>_<\/sub>of<sub>_<\/i> these topics on <a target=_blank title=Wikipedia href=hpps:\/\/wikipedia.org>Wikipedia<\/a>.  As ever, thanks!<\/p>\n<p>Please try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html-GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html-GETME\" title=''>second draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><font size=1>(now more than)<\/font> Firstname Game<\/a> web application.<\/p>\n<p>The rest of the changes, with PHP logic, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/gethint.php-GETME\" title=''>the extended<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gethint.php-GETME\" title=''>gethint.php<\/a>, is sometimes referred to as &#8220;data scraping&#8221;, form extensions to the functionality of the web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-games-tutorial\/'>Ajax PHP Games Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aphpfgpt'>Previous relevant <a target=_blank title='Ajax PHP Firstname Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-firstname-game-primer-tutorial\/'>Ajax PHP Firstname Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ajax PHP Firstname Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/name_meaning.jpg\" title=\"Ajax PHP Firstname Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Ajax PHP Firstname Game Primer Tutorial<\/p><\/div>\n<p>The combination of &#8230;<\/p>\n<ul>\n<li>HTML and Javascript client supervisor &#8230; using &#8230;<\/li>\n<li><a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> logic &#8230; calling on &#8230;<\/li>\n<li>PHP data helperer outerer<\/li>\n<\/ul>\n<p> &#8230; are W3School<sub>s<\/sub> enthusiasms we wholeheartedly agree with regarding <a target=_blank title='https:\/\/www.w3schools.com\/xml\/ajax_php.asp' href='https:\/\/www.w3schools.com\/xml\/ajax_php.asp'>AJAX PHP Example<\/a>.  And thanks to <a target=_blank title='https:\/\/www.w3schools.com\/' href='https:\/\/www.w3schools.com\/'>W3Schools<\/a> for some excellent code basis for a Firstname Game today.  We add some niceties to the HTML and Javascript, adding in a dropdown option for the names which, if used, takes the user to a public <a target=_blank data-href='http:\/\/www.names.org\/' href='http:\/\/www.behindthename.com' title='Search for your favorite name'>Search for your favorite name<\/a> website, thanks, that can add to the background information on the name chosen.<\/p>\n<p>And as far as the <i>PHP data helperer outerer<\/i> goes, we just add more names to the array list already there via a lookup of Linux or macOS &#8220;read of&#8221; &#8230;<\/p>\n<p><code><br \/>\n\/usr\/share\/dict\/propernames<br \/>\n<\/code><\/p>\n<p> &#8230; via the additions to PHP $a array &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n\/\/ With \/usr\/share\/dict\/propernames intervention ...<br \/>\n$moren=explode(\"\\n\", file_get_contents('\/usr\/share\/dict\/propernames'));<br \/>\nfor ($ii=0; $ii&lt;sizeof($moren); $ii++) {<br \/>\n   if (!in_array($moren[$ii], $a)) { array_push($a, $moren[$ii]); }<br \/>\n}<br \/>\nsort($a);<br \/>\n\/\/ ... end of \/usr\/share\/dict\/propernames intervention<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; you might recall us talking about with <a title='First Name Guessing Game for Two Primer Tutorial' href='#fnggtpt'>First Name Guessing Game for Two Primer Tutorial<\/a> in times past.<\/p>\n<p>The whole effect is very <a target=_blank title='Autocompletion information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Autocomplete'>&#8220;autocomplete&#8221;<\/a><sub>y<\/sub>, am sure you&#8217;d agree, using HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html_GETME\" title=''>proof of concept and first draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html\">Firstname Game<\/a> web application that calls on PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/gethint.php_GETME\" title=\"gethint.php\">gethint.php<\/a> helperer outerer, you can also try below &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/ajax_php_example.html' style='width:100%;height:800px;'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-first-name-game-primer-tutorial\/'>Ajax PHP First Name Game Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fnggtpt'>Previous relevant <a target=_blank title='First Name Guessing Game for Two Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/first-name-guessing-game-for-two-primer-tutorial\/'>First Name Guessing Game for Two Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nameguessgame.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"First Name Guessing Game for Two Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nameguessgame.jpg\" title=\"First Name Guessing Game for Two Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">First Name Guessing Game for Two Primer Tutorial<\/p><\/div>\n<p>It may not be immediately imaginable what would be the synergies between today&#8217;s proposed &#8220;First Name Guessing Game for Two&#8221; and <a title='Word Guessing Game for Two Primer Tutorial' href='#wggtpt'>Word Guessing Game for Two Primer Tutorial<\/a>&#8216;s &#8220;Word Guessing Game for Two&#8221;.  Other than that a First Name is a Word, isn&#8217;t there too much difference here to clone the &#8220;Word Guessing Game for Two&#8221; into a new &#8220;First Name Guessing Game for Two&#8221; when even dictionaries usually do not venture into the world of First Names, so much a product of our culture and history?  But, believe it or not these two games are so alike that, apart from tweaks to prompt wordings and message wordings, all that is needed to succeed after the cloning is to make the middle<strike>man<\/strike>person surprise.php get called for Linux (or Mac OS X FreeBSD) dictionary file usage such that instead of accessing a dictionary file called &#8230;<\/p>\n<p><code><br \/>\n\/usr\/share\/dict\/words<br \/>\n<\/code><\/p>\n<p> &#8230; that contains a list of singular, in our case, English, words to access, for the purposes of our new &#8220;First Name Guessing Game for Two&#8221; the dictionary file &#8230;<\/p>\n<p><code><br \/>\n\/usr\/share\/dict\/propernames<br \/>\n<\/code><\/p>\n<p> &#8230; cute,huh?!  But a big ask for a complete list of First Names around the world!  Nevertheless, it is good to have this list for our game today, and some other ideas that you can think of, am sure.  Maybe, a basis in letters for part of a password idea, for example.  Seeing this same dictionary file on both Mac OS X and Linux was an encouraging sign of support from the operating systems here.<\/p>\n<p>The event and organizational side of the web application is just as described for <a title='Word Guessing Game for Two Primer Tutorial' href='#wggtpt'>Word Guessing Game for Two Primer Tutorial<\/a> below.  We just call surprise.php with an extra &#8230;<\/p>\n<p><code><br \/>\n&amp;firstname=y<br \/>\n<\/code><\/p>\n<p> &#8230; within its URL.  Also, references to the online <a target=_blank href=\"http:\/\/www.thefreedictionary.com\/\">English<\/a> dictionary become a bit inapplicable, but we substitute in, here, on these <i>a<\/i> links, use of the excellent <a target=_blank title='Behind the Name' href='http:\/\/www.behindthename.com\/'>Behind the Name<\/a> website, thanks.<\/p>\n<p>So here&#8217;s a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nameguessgame.html\" title='Click picture'>live run<\/a> and here is the HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nameguessgame.html-GETME\" title=\"nameguessgame.html\">nameguessgame.html<\/a> which <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nameguessgame.html-GETME\" title=\"nameguessgame.html\">got created via these cloning changes<\/a>.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/first-name-guessing-game-for-two-primer-tutorial\/'>First Name Guessing Game for Two Primer Tutorial<\/a>.<\/p>\n<hr>\n<p id='wggtpt'>Previous relevant <a target=_blank title='Word Guessing Game for Two Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/word-guessing-game-for-two-primer-tutorial\/'>Word Guessing Game for Two Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Word Guessing Game for Two Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.jpg\" title=\"Word Guessing Game for Two Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Word Guessing Game for Two Primer Tutorial<\/p><\/div>\n<p>Word Games help vocabulary for <a target=_blank title='English as a second or foreign language' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> students.  There is also not much doubt that collaboration can help ESL students, who also learn quicker with other students present.<\/p>\n<p>Today we create a web application Word Guessing Game designed for two.  Not two devices, the one device for two users (hovering over it).  So for &#8230;<\/p>\n<ul>\n<li>non-mobile users can play the game with one user using the mouse and the other using the keyboard<\/li>\n<li>mobile users can play with one user using touch on the blue areas of the web application and the other using touch on other places<\/li>\n<\/ul>\n<p>The events we code for are &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript onclick event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onclick.asp'>onclick<\/a>  &#8230; will be recognised on non-mobile platforms<\/li>\n<li><a target=_blank title='Javascript ontouchstart event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_event.asp'>ontouchstart<\/a>  &#8230; will be recognised on mobile platforms (where it will supercede any onlick event)<\/li>\n<li><a target=_blank title='Javascript onkeyup event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onkeyup.asp'>onkeyup<\/a> &#8230;  will be recognised on non-mobile platforms<\/li>\n<\/ul>\n<p> &#8230; so you can see that the colour coding of the webpage becomes important for the mobile platform usage.<\/p>\n<p>Today&#8217;s game tests English vocabulary skills.  Why just English?   Well, it uses English words, based on the dictionary arrangements at its (web) server, which happens to be based on English.<\/p>\n<p>Programmers often use <a target_blank title='Words (unix) information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Words_%28Unix%29'>Linux dictionary files<\/a> as a means to get a word list, and that list could be in any language, and for ours it is English.<\/p>\n<p>Here&#8217;s a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html\" title='Click picture'>live run<\/a> and here is the HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html_GETME\" title=\"wordguessgame.html\">wordguessgame.html<\/a> which, again, uses some PHP we&#8217;ve talked about with a lot of our <a target=_blank title='Word Games' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/word-game'>word games<\/a> at this blog, on a &#8220;Client Pre-Emptive Iframe&#8221; scenario in a couple of HTML iframe elements we include into today&#8217;s game.  We thank this free online <a target=_blank href=\"http:\/\/www.thefreedictionary.com\/\">English<\/a> dictionary that gets called on if the user chooses to.<\/p>\n<p>We hope you try it, and like it.  By the way, you can also play the game as a single user.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17485' onclick='var dv=document.getElementById(\"d17485\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=SQL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17485' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d36912' onclick='var dv=document.getElementById(\"d36912\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linux\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36912' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57625' onclick='var dv=document.getElementById(\"d57625\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/autocompletion\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57625' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57635' onclick='var dv=document.getElementById(\"d57635\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57635' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57643' onclick='var dv=document.getElementById(\"d57643\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/personalization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57643' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57647' onclick='var dv=document.getElementById(\"d57647\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localstorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57647' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57651' onclick='var dv=document.getElementById(\"d57651\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/grep\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57651' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57664' onclick='var dv=document.getElementById(\"d57664\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cell\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57664' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57690' onclick='var dv=document.getElementById(\"d57690\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57690' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57693' onclick='var dv=document.getElementById(\"d57693\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57693' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57702' onclick='var dv=document.getElementById(\"d57702\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57702' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We have a CSS SVG theme with today&#8217;s work improving on yesterday&#8217;s Ajax PHP National Capitals Game Flags Tutorial&#8216;s progress. As with CSS and SVG XML Primer Tutorial from a few days ago, our CSS SVG &#8220;makeover ideas&#8221; include all &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-php-game-makeover-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4,12,14,15,37],"tags":[4162,52,69,84,2129,2125,1695,126,127,4117,2299,4163,1580,212,2081,2247,281,2127,3570,2463,2276,2147,318,367,385,3192,400,2242,476,544,3362,576,587,590,609,3513,2395,652,2020,2415,2505,1812,919,932,997,3274,1040,2226,1043,1045,1866,1122,1555,1226,1238,1675,1319,1345,3048,1431],"class_list":["post-57702","post","type-post","status-publish","format-standard","hentry","category-ajax","category-animation","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-absolue","tag-absolute-url","tag-ajax","tag-animation-2","tag-architecture","tag-autocomplete","tag-autocompletion","tag-background","tag-background-image","tag-backward-compatibility","tag-border-image","tag-capital","tag-cell","tag-client","tag-country","tag-country-code","tag-css","tag-cursor","tag-data-scraping","tag-default","tag-delimitation","tag-delimiter","tag-design","tag-dropdown","tag-emoji","tag-emoji-flag","tag-event","tag-flag","tag-game","tag-grep","tag-hardcoding","tag-html","tag-iframe","tag-image","tag-input","tag-interactive-input","tag-iso","tag-javascript","tag-linear-gradient","tag-localstorage","tag-name","tag-onkeyup","tag-personalization","tag-php","tag-programming","tag-recall","tag-regex","tag-regexp","tag-regular-expression","tag-relative-url","tag-select","tag-server","tag-strings","tag-svg","tag-table","tag-textbox","tag-tutorial","tag-url","tag-w3schools","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57702"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=57702"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57702\/revisions"}],"predecessor-version":[{"id":57857,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57702\/revisions\/57857"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}