{"id":29310,"date":"2017-04-03T03:01:09","date_gmt":"2017-04-02T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29310"},"modified":"2017-04-28T18:48:01","modified_gmt":"2017-04-28T08:48:01","slug":"close-relatives-game-php-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-php-tutorial\/","title":{"rendered":"Close Relatives Game PHP Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Close Relatives Game PHP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives_share_emoji_email_php.jpg\" title=\"Close Relatives Game PHP Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Close Relatives Game PHP Tutorial<\/p><\/div>\n<p>We&#8217;re continuing on with the recent <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> &#8220;Close Relatives Game&#8221; because we want to &#8230;<\/p>\n<ul>\n<li>make the sharing functionality more enticing<\/li>\n<li>allow for (the possibility of) hugely more user-generated questions<\/li>\n<\/ul>\n<p> &#8230; the former of which is a Javascript client job and the latter is a PHP (for us) server job, though with that latter job, we check for the existence of the PHP, and if not there, we do not stop the HTML and Javascript client code proceeding.<\/p>\n<p>That &#8220;latter&#8221; part may be a familiar concept to regular readers at this blog, because we introduced similar thinking during the last of the blog postings of the &#8220;thread&#8221; ending with <a target=_blank title='List Web Application PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-php-tutorial\/'>List Web Application PHP Tutorial<\/a>, and though, there, all of &#8230;<\/p>\n<blockquote>\n<ul>\n<li>mail URLs longer than (a default, but tailorable) 900 characters long will direct logic going out of the HTML form &#8230;\n<ol>\n<li>target=<strike>_self<\/strike> myphp (the name of an HTML iframe we introduce)<\/li>\n<li>method=<strike>GET<\/strike> POST<\/li>\n<li>action=<strike>#<\/strike> http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<strike>mylist<\/strike>closed_relatives.php<\/li>\n<\/ol>\n<p> &#8230; that the logic (of any &#8220;soft shoe shuffle&#8221;) is contained within the <strike>HTML form&#8217;s <i>onsubmit<\/i> event logic<\/strike> &#8220;body of the code, constantly monitored for&#8221; to PHP and using its <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a> function to have email contain an HTML attachment that when opened in a <i>file:\/\/<\/i> type of URL will only involve absolute URLs and will hardcode the <strike><i>locationsearch<\/i><\/strike> &#8220;mores and prevscore and prevlist&#8221; Javascript global variable <strike>we talked about yesterday<\/strike> <font size=1>&#8230; getting in front of the thing getting in front of the URL (PHP $_GET[]) parameters (and HTTP Cookie) logic<\/font>\n<\/li>\n<p><!--li>display of absolute URLs that are not media (images, videos, audios) may, if not from the www.rjmprogramming.com.au domain, need PHP serverside intervention, if they have any chance of happening<\/li-->\n<\/ul>\n<\/blockquote>\n<p> &#8230; remains as pertinent for today&#8217;s work as well, except (for the minor point that we don&#8217;t bother with any HTML form <i>submit<\/i> button clicking for those scenarios not needing PHP on this project, and) we forgot, there (but not here) to inform you of a mechanism, with HTML and Javascript, to check for the existence of a PHP file &#8230; you just use a Javascript Client Pre-emptive Iframe approach where the Iframe&#8217;s <b><a target=_blank title='Javascript onerror event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onerror.asp'><i>onerror<\/i><\/a><\/b> event like so &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe name=\"myphp\" id=\"myphp\" style=\"display:none;\" src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.php?c=y' onload=\"cando=true; document.getElementById('myform').target='myphp'; document.getElementById('myform').action='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.php'; document.getElementById('myform').method='POST';\" <b><i>onerror=\"cando=false;\"<\/i><\/b>&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; can have code to flag that the PHP is not there, or is at the very least &#8220;suss&#8221; even if it is there.  Cute, huh?!  Of course file existence checking in PHP is the doddle you&#8217;d expect it to be, via the use of its <a target=_blank href=\"http:\/\/php.net\/manual\/en\/function.file-exists.php\" title=\"Home domain file existence checking in PHP\">file_exists<\/a> method for home domain based file checks, and our favourite <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> method can probably be called into play for file checking on other domains that don&#8217;t block such a request (for security purposes, perhaps).<\/p>\n<p>As for &#8220;make the sharing functionality more enticing&#8221; this is just Javascript functionality <b>adding<\/b> <i>on<\/i> to the email body&#8217;s link &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm?categories=rmetcalfe15%40gmail.com~Vehicle%20Types%2Cbar%7Ccar%2Csour%20wheep%20drove%7Cfour%20wheel%20drive%2Ctrack%7Ctruck%2Ccan%7Cvan!Vehicle%20Types%2Cbar%7Ccar%2Csour%20wheep%20drove%7Cfour%20wheel%20drive%2Ctrack%7Ctruck%2Ccan%7Cvan&#038;prevscore=Score%3A%205%2F1%20over%2024%20seconds&#038;prevlist=4%2C13\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm?categories=rmetcalfe15%40gmail.com~Vehicle%20Types%2Cbar%7Ccar%2Csour%20wheep%20drove%7Cfour%20wheel%20drive%2Ctrack%7Ctruck%2Ccan%7Cvan!Vehicle%20Types%2Cbar%7Ccar%2Csour%20wheep%20drove%7Cfour%20wheel%20drive%2Ctrack%7Ctruck%2Ccan%7Cvan&#038;prevscore=Score%3A%205%2F1%20over%2024%20seconds&#038;prevlist=4%2C13\">http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm?categories=rmetcalfe15%40gmail.com~Vehicle%20Types%2Cbar%7Ccar%2Csour%20wheep%20drove%7Cfour%20wheel%20drive%2Ctrack%7Ctruck%2Ccan%7Cvan!Vehicle%20Types%2Cbar%7Ccar%2Csour%20wheep%20drove%7Cfour%20wheel%20drive%2Ctrack%7Ctruck%2Ccan%7Cvan<b>&amp;prevscore=Score%3A%205%2F1%20over%2024%20seconds<\/b><i>&amp;prevlist=4%2C13<\/i><\/a><br \/>\n<\/code><\/p>\n<p> &#8230; effectively opening up a &#8220;snapshot of time and score&#8221; (Email button click) challenge to the emailee to do better (than the emailer), using the same questions as the emailer did, and improve on either or both of &#8230;<\/p>\n<ul>\n<li>score<\/li>\n<li>time taken to answer<\/li>\n<\/ul>\n<p>To not accept the challenge (of being pitted with the same questions), but to play with all the same data, the emailee would just use the URL up to but not including <br \/><b>&amp;prevscore=Score%3A%205%2F1%20over%2024%20seconds<\/b><i>&amp;prevlist=4%2C13<\/i> above.<\/p>\n<p>Did you notice anything else new about arrangements within that URL above?  No &#8230; hint is to look just after <i>&#8220;categories=&#8221;<\/i>.  Do you see an email address delimited from the rest by the &#8216;~&#8217; character?  Why arrange things this way?  Well, we want the <i>email to<\/i> data item to be inside the tent of the HTTP Cookie arrangements.  Let&#8217;s just stop there, and ask &#8230; why?   Well, if the last time you, as a user, ever specify an email address who you communicate with, we think that is useful to save in the HTTP Cookies of the web browser the user is currently using, meaning that while those HTTP Cookies &#8216;live&#8217; for the default six months after creation, they could well save the user some time down the track, as it is quite likely they&#8217;ll play this game with the same game partner they are sharing with now, later, as well &#8230; all part of the reasoning to add in a new Emoji &#8216;button&#8217; &#10067; to allow the user to set aside an <i>email to<\/i> setting ahead of any email client and\/or any PHP mail arrangement later in the web application&#8217;s session.  Okay, we all get that now, we hope, but why not add another (PHP $_GET[]) argument instead?  Well, we use this arrangement for simplicity of coding purposes &#8230; <i>because we can<\/i> &#8230; and am not being flippant here, because the fact is that this game requires a lot of validation, and one of those validations is now the stripping off of any &#8216;~&#8217; characters from user entered data.  In this context, why not arrange the logic this way?!<\/p>\n<p>This results in <a target=_blank title='close_relatives.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html--GETME'>close_relatives.htm<\/a>&#8216;s <a target=_blank title='close_relatives.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm' title='Click picture'>live run<\/a> (changed in <a target=_blank title='close_relatives.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html--GETME'>this way<\/a>), overseeing the optioinal PHP <a target=_blank title='close_relatives.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.php_GETME'>close_relatives.php<\/a> (to cater for those large user generated data set possibilities).<\/p>\n<hr>\n<p id='crgsaat'>Previous relevant <a target=_blank title='Close Relatives Game Sharing and Accountability Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-sharing-and-accountability-tutorial\/'>Close Relatives Game Sharing and Accountability 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\/close_relatives.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Close Relatives Game Sharing and Accountability Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives_share_emoji_email.jpg\" title=\"Close Relatives Game Sharing and Accountability Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Close Relatives Game Sharing and Accountability Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> &#8220;Close Relatives Game&#8221; lacked at least three qualities we try to improve on today, as with WordPress 4.1.1&#8217;s <a target=_blank title='Close Relatives Game PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-php-tutorial\/'>Close Relatives Game PHP Tutorial<\/a>, those being &#8230;<\/p>\n<ol>\n<li>ability to share<\/li>\n<li>personalization<\/li>\n<li>accountability<\/li>\n<\/ol>\n<p> &#8230; in that, with yesterday&#8217;s incarnation, respectively &#8230;<\/p>\n<ol>\n<li>there was no mechanism to share that game&#8217;s experience with anybody not seeing your screen and keyboard &#8230; and &#8230;<\/li>\n<li>there was no way to add in your own content &#8230; and &#8230;<\/li>\n<li>there was no way to save any settings to do with the game and recall those settings<\/li>\n<\/ol>\n<p> &#8230; and so, we revert to these techniques and functionality ideas, respectively &#8230;<\/p>\n<ol>\n<li>email functionality interfaced to via an Emoji &#8220;button&#8221; &#128231; <i>a<\/i> <a target=_blank title='Mailto link information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'>mailto<\/a> link to the default email client application &#8230; and &#8230;<\/li>\n<li>interactive entry via Javascript&#8217;s window.<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> functionality (via an HTML <i>a<\/i> link or Emoji &#8220;button&#8221; &#10133; <i>a<\/i> link), the data of which is validated according to the game &#8220;rules&#8221; (okay?!) &#8230; teamed with &#8230;<\/li>\n<li>document.URL <i>?categories=[categoryData]<\/i> address bar &#8220;intrasession&#8221; arrangements interfacing to HTTP <a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>cookie<\/i><\/a> &#8220;intersession&#8221; arrangements that are interfaced to via the HTML <i>a<\/i> link above and additional Emoji &#8220;button&#8221; &#127850; and <strike style='color:red;'>&#127850;<\/strike> <i>a<\/i> links<\/li>\n<\/ol>\n<p> &#8230; to improve outcomes.  Even though we do not manufacture pimple removal products we&#8217;d like to offer you a &#8230;<\/p>\n<table style='width:100%;' border=8><\/tbody>\n<tr style='background-color:lightgray;'>\n<th><font size=4>Before<\/font> <a target=_blank title='close_relatives.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html_GETME'>close_relatives.html<\/a>&#8216;s <a target=_blank title='close_relatives.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html' title='Before live run'>live run<\/a><\/th>\n<th><font size=4>After<\/font> <a target=_blank title='close_relatives.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html-GETME'>close_relatives.htm<\/a>&#8216;s <a target=_blank title='close_relatives.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm' title='Click picture'>live run<\/a> (changed in <a target=_blank title='close_relatives.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html-GETME'>this way<\/a>)<\/th>\n<\/tr>\n<tr>\n<td><iframe style='width:100%;height:1200px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html' title='Before'><\/iframe><\/td>\n<td><iframe style='width:100%;height:1200px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.htm' title='After'><\/iframe><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p> &#8230; for you to compare apples with apples.  You may have seen us use all these methods or techniques before, but we find each project throws up challenges needing tweaking, especially with the &#8220;accountability&#8221; ideas we address today.<\/p>\n<p>Nothing has changed as far as default content goes, and we remain, wanting to thank the excellent <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 &#8230; thanks for the inspiration.<\/p>\n<hr>\n<p id='crgpt'>Previous relevant <a target=_blank title='Close Relatives Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-primer-tutorial\/'>Close Relatives 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\/HTMLCSS\/close_relatives.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Close Relatives Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.jpg\" title=\"Close Relatives Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Close Relatives Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got an <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> game, written in HTML and Javascript today, that we&#8217;ve called &#8220;Close Relatives Game&#8221; and its main feature is an HTML <a target=_blank title='HTML table element information from W3schools' href='http:\/\/www.w3schools.com\/tags\/tag_table.asp'>table<\/a> element, whose contents is filled out via the data of &#8230;<\/p>\n<p><code>an array of Javascript objects<\/code><\/p>\n<p> &#8230; the index of which is chosen by our <b>favourite<\/b> (Javascript) random selection technique &#8230;<\/p>\n<p><code><br \/>\nvar vsnw=[0,0,0,0];<br \/>\nvar which=0, score=0, goes=0;<br \/>\nvar defsel='&lt;select id=? onchange=\"changed(this);\"&gt;&lt;option value=\"a\"&gt;a&lt;\/option&gt;&lt;option value=\"b\"&gt;b&lt;\/option&gt;&lt;option value=\"c\"&gt;c&lt;\/option&gt;&lt;option value=\"d\"&gt;d&lt;\/option&gt;&lt;option value=\"e\"&gt;e&lt;\/option&gt;&lt;option value=\"f\"&gt;f&lt;\/option&gt;&lt;option value=\"g\"&gt;g&lt;\/option&gt;&lt;option value=\"h\"&gt;h&lt;\/option&gt;&lt;option value=\"i\"&gt;i&lt;\/option&gt;&lt;option value=\"j\"&gt;j&lt;\/option&gt;&lt;option value=\"k\"&gt;k&lt;\/option&gt;&lt;option value=\"l\"&gt;l&lt;\/option&gt;&lt;option value=\"m\"&gt;m&lt;\/option&gt;&lt;option value=\"n\"&gt;n&lt;\/option&gt;&lt;option value=\"o\"&gt;o&lt;\/option&gt;&lt;option value=\"p\"&gt;p&lt;\/option&gt;&lt;option value=\"q\"&gt;q&lt;\/option&gt;&lt;option value=\"r\"&gt;r&lt;\/option&gt;&lt;option value=\"s\"&gt;s&lt;\/option&gt;&lt;option value=\"t\"&gt;t&lt;\/option&gt;&lt;option value=\"u\"&gt;u&lt;\/option&gt;&lt;option value=\"v\"&gt;v&lt;\/option&gt;&lt;option value=\"w\"&gt;w&lt;\/option&gt;&lt;option value=\"x\"&gt;x&lt;\/option&gt;&lt;option value=\"y\"&gt;y&lt;\/option&gt;&lt;option value=\"z\"&gt;z&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n<i>function pickobject()<\/i> {<br \/>\n  var tdbit='',j,k;<br \/>\n  which=<b>Math.floor(Math.random() * thedefaults.length)<\/b>;<br \/>\n  document.getElementById('nameof').innerHTML=thedefaults[which].name;<br \/>\n  vsnw=thedefaults[which].numwords;<br \/>\n  for (j=0; j&lt;4; j++) {<br \/>\n    tdbit='';<br \/>\n    document.getElementById('clue' + eval(1 + j)).innerHTML=thedefaults[which].clues[j];<br \/>\n    for (k=0; k&lt;thedefaults[which].clues[j].length; k++) {<br \/>\n     if (thedefaults[which].clues[j].substring(k, eval(1 + k)) == \" \") {<br \/>\n      tdbit+=\"&lt;select style='background-color:yellow;'&gt;&lt;option value=' '&gt; &lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n     } else {<br \/>\n      tdbit+=defsel.replace('?', 'ans_' + eval(1 + j) + '_' + eval(1 + k)).replace(\"&gt;\" + thedefaults[which].clues[j].substring(k, eval(1 + k)) + \"&lt;\",\" selected&gt;\" + thedefaults[which].clues[j].substring(k, eval(1 + k)) + \"&lt;\").replace(\"&gt;\" + thedefaults[which].answers[j].substring(k, eval(1 + k)) + \"&lt;\",\" title=' '&gt;\" + thedefaults[which].answers[j].substring(k, eval(1 + k)) + \"&lt;\");<br \/>\n     }<br \/>\n    }<br \/>\n    document.getElementById('answer' + eval(1 + j)).innerHTML=tdbit;<br \/>\n  }<br \/>\n}<br \/>\n<b><\/b><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=' <i>pickobject();<\/i> ' style='background-color:yellow;'&gt;<br \/>\n<\/code><\/p>\n<p>Featuring in the Javascript coding for Object use is a &#8220;Constructor&#8221; function feeling arrangement as <i>an array of Javascript objects<\/i> is initialized and that &#8220;Constructor&#8221; function is called via keyword <b>new<\/b> as per &#8230;<\/p>\n<p><code><br \/>\nvar thedefaults = [<br \/>\n <b>new<\/b> Close_Relative('Category One',['clue1of4|answer1of4','clue2of4|answer2of4','clue3of4|answer3of4','clue4of4|answer4of4']),<br \/>\n <b>new<\/b> Close_Relative('Last Category',['clue1of4|answer1of4','clue2of4|answer2of4','clue3of4|answer3of4','clue4of4|answer4of4'])<br \/>\n];<br \/>\n<\/code><\/p>\n<p> &#8230; type of usage for our Constructor &#8230;<\/p>\n<p><code><br \/>\nfunction Close_Relative(name, darray) {<br \/>\n  this.name = name;<br \/>\n  this.clues = [darray[0].split('|')[0], darray[1].split('|')[0], darray[2].split('|')[0], darray[3].split('|')[0]];<br \/>\n  this.answers = [darray[0].split('|')[1], darray[1].split('|')[1], darray[2].split('|')[1], darray[3].split('|')[1]];<br \/>\n  this.numwords = [darray[0].split('|')[0].split(' ').length, darray[1].split('|')[0].split(' ').length, darray[2].split('|')[0].split(' ').length, darray[3].split('|')[0].split(' ').length];<br \/>\n}<br \/>\n<\/code><\/p>\n<p>As far as content goes we&#8217;d like to thank <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 &#8230; thanks for the inspiration.<\/p>\n<p>So here&#8217;s the HTML and Javascript and CSS going into this ESL game design above you could call <a target=_blank title='close_relatives.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html_GETME'>close_relatives.html<\/a> for your perusal, or you can try with this <a target=_blank title='close_relatives.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/close_relatives.html'>live run<\/a> link.  We will be returning, because there is more to show you here, regarding making this ESL web application game better.  We hope you hang around for the whole thread of blog postings on this.<\/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='#d29253' onclick='var dv=document.getElementById(\"d29253\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/esl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29253' 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='#d29277' onclick='var dv=document.getElementById(\"d29277\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29277' 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='#d29310' onclick='var dv=document.getElementById(\"d29310\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29310' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re continuing on with the recent ESL &#8220;Close Relatives Game&#8221; because we want to &#8230; make the sharing functionality more enticing allow for (the possibility of) hugely more user-generated questions &#8230; the former of which is a Javascript client job &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-php-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":[12,13,15,37],"tags":[2078,1860,380,385,396,452,476,477,576,652,739,849,2010,875,932,997,1761,1000,1133,1137,1319,1345,1452],"class_list":["post-29310","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-games","category-tutorials","tag-constructor","tag-cookie","tag-email","tag-emoji","tag-esl","tag-form","tag-game","tag-games-2","tag-html","tag-javascript","tag-mailto","tag-object","tag-object-oriented-programming","tag-oop","tag-php","tag-programming","tag-prompt","tag-prompt-popup-box","tag-share","tag-sharing","tag-tutorial","tag-url","tag-word"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29310"}],"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=29310"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29310\/revisions"}],"predecessor-version":[{"id":29871,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29310\/revisions\/29871"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}