{"id":29277,"date":"2017-04-02T03:01:42","date_gmt":"2017-04-01T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29277"},"modified":"2017-04-28T18:49:52","modified_gmt":"2017-04-28T08:49:52","slug":"close-relatives-game-sharing-and-accountability-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-sharing-and-accountability-tutorial\/","title":{"rendered":"Close Relatives Game Sharing and Accountability 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  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, 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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s ESL &#8220;Close Relatives Game&#8221; lacked at least three qualities we try to improve on today, those being &#8230; ability to share personalization accountability &#8230; in that, with yesterday&#8217;s incarnation, respectively &#8230; there was no mechanism to share that game&#8217;s &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/close-relatives-game-sharing-and-accountability-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,476,477,576,652,739,849,2010,875,997,1761,1000,1133,1137,1319,1345,1452],"class_list":["post-29277","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-game","tag-games-2","tag-html","tag-javascript","tag-mailto","tag-object","tag-object-oriented-programming","tag-oop","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\/29277"}],"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=29277"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29277\/revisions"}],"predecessor-version":[{"id":29872,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29277\/revisions\/29872"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}