{"id":57882,"date":"2022-12-26T03:01:11","date_gmt":"2022-12-25T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57882"},"modified":"2022-12-25T13:19:02","modified_gmt":"2022-12-25T03:19:02","slug":"phphtmljavascript-sudoku-game-legibility-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/phphtmljavascript-sudoku-game-legibility-tutorial\/","title":{"rendered":"PHP\/HTML\/Javascript Sudoku Game Legibility Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/HTML\/Javascript Sudoku Game Legibility Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_bigger_numbers.jpg\" title=\"PHP\/HTML\/Javascript Sudoku Game Legibility Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">PHP\/HTML\/Javascript Sudoku Game Legibility Tutorial<\/p><\/div>\n<p>There are advantages to using &#8230;<\/p>\n<ul>\n<li>emojis &#8230; as a substitute for &#8230;<\/li>\n<li>images<\/li>\n<\/ul>\n<p> &#8230; in web applications such as the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> of the recent <a title='PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial' href='#php\/html\/jsgihtmleet'>PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial<\/a>.<\/p>\n<p>It means we can hone in on &#8230;<\/li>\n<ul>\n<li>concepts of &#8220;legibility&#8221; &#8230; and narrow scopes of improvement here to &#8230;<\/li>\n<li>CSS property <i>font-size<\/i><\/li>\n<\/ul>\n<p> &#8230; as far as improving the web application, and its new window and inline HTML email offshoots, so that we lessen the need for &#8220;spread gestures&#8221; (on mobile) or &#8220;zoom in&#8221; (on non-mobile).  The need for these can turn people off.<\/p>\n<p>The way this simplification can take place, and at the risk of sounding like a <i>broken record<\/i> here, the beauty of emojis are that &#8230;<\/p>\n<ul>\n<li>they are text, but have graphic &#8220;intelligence&#8221;<\/li>\n<li>their usage can help out we <i>graphically challenged<\/i>, to improve the look of our webpages<\/li>\n<li>text size is controlled by CSS property <i>font-size<\/i> (more than CSS properties <i>width<\/i> and <i>height<\/i>)<\/li>\n<\/ul>\n<p>And on this topic of &#8220;legibility&#8221; it can be that for the smaller device dimensions it is not always the case that <i>font-size<\/i> is best &#8220;proportional&#8221;.  It can depend on CSS inheritance and other HTML styling, as exemplified by our new &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n  @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) {<br \/>\n     td { font-size: 74px !important; }<br \/>\n     select { -webkit-appearance: none;  font-size: 68px !important; }<br \/>\n     button { font-size: 36px; }<br \/>\n     h1 { font-size: 74px; }<br \/>\n  }<br \/>\n<br \/>\n  @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) {<br \/>\n     td { font-size: 46px !important; }<br \/>\n     select { -webkit-appearance: none;  font-size: 40px !important; }<br \/>\n     button { font-size: 36px; }<br \/>\n     h1 { font-size: 74px; }<br \/>\n  }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p> &#8230; where we find it counterintuitive that we were more aesthetically pleased with larger <i>font-size<\/i> settings for <i>portrait<\/i> iPhone usage than <i>landscape<\/i> iPhone usage &#8230; but there you are.  Alas, often assuming can make for ugly aesthetics.<\/p>\n<p>Feel free to <font size=1>rei<\/font>try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html------GETME\">the font-size tweaked HTML\/Javascript basis of<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html------GETME\">sudoku.htm<\/a> referenced by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php--------GETME\">the font-size tweaked collaboration and sharing logic for<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php--------GETME\">index.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you could <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">try <font size=1>and collaborate with<\/font> below<\/a>, as well.<\/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\/phphtmljavascript-sudoku-game-legibility-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Legibility Tutorial<\/a>.<\/p-->\n<hr>\n<p id='php\/html\/jsgihtmleet'>Previous relevant <a target=_blank title='PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/html\/javascript-sudoku-game-inline-html-email-emoji-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_makeover.jpg\" title=\"PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial<\/p><\/div>\n<p>We wanted to add colour (via some linear and conic gradients) and emojis into the aesthetic mix, today, with our <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> game web application of yesterday&#8217;s <a title='PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial' href='#php\/html\/jsgihtmlet'>PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial<\/a>.<\/p>\n<p>Within web browser webpage there are no worries here, but as far as inline HTML email content goes &#8230;<\/p>\n<ul>\n<li>emojis work for some email clients such as the web browser or iOS mobile app version of <a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a>, but not macOS Mail desktop application, for example &#8230; and &#8230;<\/li>\n<li>a lot of CSS3 does not translate into an email with inline HTML form and webpage content, and so gradients do not seem to be possible on the platforms we&#8217;ve encountered<\/li>\n<\/ul>\n<p>Here&#8217;s some <font color=blue>changed<\/font> CSS styling &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n .bright { border-right: 5px solid blue; }<br \/>\n .bbottom { border-bottom: 5px solid blue; }<br \/>\n td { font-size: 24px; width: 11%; height: 9%; text-align: center; vertical-align: middle; }<br \/>\n select { <font color=blue>-webkit-appearance: none;<\/font> font-size: 24px; <font color=blue>padding: 1 1 1 1; border: 1px solid transparent; background-image: conic-gradient(pink, hotpink, lightpink);<\/font> }<br \/>\n <font color=blue>#smode { background-image: conic-gradient(yellow, lightyellow, orange); padding: 3 3 3 3; border-radius: 40px; }<\/font><br \/>\n th { text-align: left; vertical-align: top; }<br \/>\n textarea { width: 95%; background-image: linear-gradient(rgba(255,255,0,0.5) 18px, white 8%); }<br \/>\n input { width: 95%; }<br \/>\n <font color=blue>button {  -webkit-appearance: none; border-radius: 10px;  }<br \/>\n body { background-image: linear-gradient(to bottom right, rgb(255,255,255), rgb(224, 255, 255),rgb(175, 238, 238), rgb(173, 216, 230),rgb(135, 206, 235),rgb(135, 206, 250),rgb(0, 191, 255),rgb(30, 144, 255),rgb(100, 149, 237),rgb(123, 104, 238),rgb(65, 105, 225),rgb(0, 0, 255),rgb(0, 0, 205),rgb(0, 0, 139),rgb(0, 0, 128),rgb(25, 25, 112)); }<\/font><br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p>Here&#8217;s some <font color=blue>changed<\/font> Javascript email creations &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   <font color=blue>var preaeto='', presubj='', predbi='';<\/font>  \/\/ gets assigned elsewhere, at an earlier time than the call to ...<br \/>\n<br \/>\n   function simemail() {<br \/>\n     var aeto='newwindow';<br \/>\n     \/\/alert('here');<br \/>\n     thenums='';<br \/>\n     var esels=document.getElementsByTagName('select');<br \/>\n     for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=retcn(esels[ejj].getAttribute('data-answer'));<br \/>\n      }<br \/>\n     }<br \/>\n     var dspare=''<br \/>\n     var dbi=document.body.innerHTML;<br \/>\n     if (document.URL.indexOf('hard=') != -1 || ('' + location.hash).indexOf('hard') != -1) {<br \/>\n       if (1 == 1) {<br \/>\n       dbi=dbi.replace('\\\"easy\\\"&gt;Easy&lt;\/option&gt;', '\\\"hard\\\"&gt;Easy&lt;\/option&gt;').replace('\\\"hard\\\"&gt;Hard&lt;\/option&gt;', '\\\"easy\\\"&gt;Easy&lt;\/option&gt;').replace('\\\"hard\\\"&gt;Easy&lt;\/option&gt;', '\\\"hard\\\"&gt;Hard&lt;\/option&gt;');<br \/>\n       <font color=blue>predbi=predbi.replace('\\\"easy\\\"&gt;Easy&lt;\/option&gt;', '\\\"hard\\\"&gt;Easy&lt;\/option&gt;').replace('\\\"hard\\\"&gt;Hard&lt;\/option&gt;', '\\\"easy\\\"&gt;Easy&lt;\/option&gt;').replace('\\\"hard\\\"&gt;Easy&lt;\/option&gt;', '\\\"hard\\\"&gt;Hard&lt;\/option&gt;');<br \/>\n       <\/font>} else {<br \/>\n       dbi=dbi.replace('&gt;Hard&lt;\/option&gt;', ' selected&gt;Hard&lt;\/option&gt;');<br \/>\n       <font color=blue>predbi=predbi.replace('&gt;Hard&lt;\/option&gt;', ' selected&gt;Hard&lt;\/option&gt;');<br \/>\n       <\/font>}<br \/>\n     }<br \/>\n     dbi=dbi.replace('\\\" border=', 'text-align:center;\\\" border=').replace(\/\\.\\\/index\\.php\/g, document.URL.split('?')[0].split('#')[0]).replace(\/\\ class\\=\\\"bright\\ bbottom\\\"\/g, ' style=\\\"border-right:3px solid black;border-bottom:3px solid black;\\\"  class\\=\\\"bright\\ bbottom\\\"').replace(\/\\ class\\=\\\"bright\\\"\/g, ' style=\\\"border-right:3px solid black;\\\"  class\\=\\\"bright\\\"').replace(\/\\ class\\=\\\"bbottom\\\"\/g, ' style=\\\"border-bottom:3px solid black;\\\"  class\\=\\\"bbottom\\\"');<br \/>\n     <font color=blue>predbi=predbi.replace('\\\" border=', 'text-align:center;\\\" border=').replace(\/\\.\\\/index\\.php\/g, document.URL.split('?')[0].split('#')[0]).replace(\/\\ class\\=\\\"bright\\ bbottom\\\"\/g, ' style=\\\"border-right:3px solid black;border-bottom:3px solid black;\\\"  class\\=\\\"bright\\ bbottom\\\"').replace(\/\\ class\\=\\\"bright\\\"\/g, ' style=\\\"border-right:3px solid black;\\\"  class\\=\\\"bright\\\"').replace(\/\\ class\\=\\\"bbottom\\\"\/g, ' style=\\\"border-bottom:3px solid black;\\\"  class\\=\\\"bbottom\\\"');<br \/>\n     <\/font>var dbis=dbi.split(' id=\\\"s'), dbiss=[];<br \/>\n     var pdbis=predbi.split(' id=\\\"s');<br \/>\n     var mustbe=0, imust=0, gval='';<br \/>\n     for (var idb=1; idb&lt;dbis.length; idb++) {<br \/>\n       dspare=dbis[idb].split('\\\"')[0];<br \/>\n       if (dspare == '' + mustbe) {<br \/>\n       mustbe++;<br \/>\n       if (dbi.indexOf(' name=\\\"s' + dspare + '\\\"') == -1) {<br \/>\n         if (dbis[idb].indexOf(' disabled') != -1) {<br \/>\n         gval=eval(10 - eval(dbis[idb].split(' value=\\\"')[1].split('\\\"')[0]));<br \/>\n         \/\/alert(dbis[idb].replace('&gt;&lt;\/option&gt;','&gt;' + gval + '&lt;\/option&gt;') + ' ... ' + dbis[idb]);<br \/>\n         if (dbis[idb].indexOf('&gt; &lt;\/option&gt;') != -1) {<br \/>\n         dbi=dbi.replace(dbis[idb], dbis[idb].replace('&gt; &lt;\/option&gt;','&gt;' + emj(gval) + '&lt;\/option&gt;').replace(' disabled', ' data-disabled'));<br \/>\n         <font color=blue>predbi=predbi.replace(pdbis[idb], pdbis[idb].replace('&gt; &lt;\/option&gt;','&gt;' + (gval) + '&lt;\/option&gt;').replace(' disabled', ' data-disabled'));<br \/>\n         <\/font>} else {<br \/>\n         dbi=dbi.replace(dbis[idb], dbis[idb].replace('&gt;&lt;\/option&gt;','&gt;' + emj(gval) + '&lt;\/option&gt;').replace(' disabled', ' data-disabled'));<br \/>\n         <font color=blue>predbi=predbi.replace(pdbis[idb], pdbis[idb].replace('&gt;&lt;\/option&gt;','&gt;' + (gval) + '&lt;\/option&gt;').replace(' disabled', ' data-disabled'));<\/font><br \/>\n         }<br \/>\n         dbi=dbi.replace(' id=\\\"s' + dspare + '\\\"', ' id=\\\"s' + dspare + '\\\"' + ' name=\\\"s' + dspare + '\\\" value=\\\"' + gval + '\\\"');<br \/>\n         <font color=blue>predbi=predbi.replace(' id=\\\"s' + dspare + '\\\"', ' id=\\\"s' + dspare + '\\\"' + ' name=\\\"s' + dspare + '\\\" value=\\\"' + gval + '\\\"');<br \/>\n         <\/font>dbiss=dbi.split(' id=\\\"s');<br \/>\n         \/\/alert(dbiss[idb]);<br \/>\n         } else {<br \/>\n         dbi=dbi.replace(' id=\\\"s' + dspare + '\\\"', ' id=\\\"s' + dspare + '\\\"' + ' name=\\\"s' + dspare + '\\\"');<br \/>\n         <font color=blue>predbi=predbi.replace(' id=\\\"s' + dspare + '\\\"', ' id=\\\"s' + dspare + '\\\"' + ' name=\\\"s' + dspare + '\\\"');<br \/>\n         <\/font>}<br \/>\n       }<br \/>\n       }<br \/>\n     }<br \/>\n     \/\/alert(mustbe);<br \/>\n     if (document.URL.indexOf('newwindow=') == -1 && ('' + location.hash).indexOf('newwindow') == -1) {<br \/>\n   aeto=prompt('Please enter email address to invite regarding this Sudoku game in a form within the message. <font color=blue>Prefixing blanks will try emoji characters within the form (which some email clients are okay with).  This methodology sometimes has delays and so we try another Sudoku game collaboration and sharing approach after that, in which you can optionally prefix by your Sudoku playing name and a : colon character, unless your email address is mixed case.<\/font>  Enter newwindow for game in a new popup window instead, where all uppercase in a new web browser tab.  Optionally suffix by # followed by your email subject line [Sudoku game share invitation link]','');<br \/>\n     <font color=blue>var trye=false;<br \/>\n     if (aeto.trim() != aeto) {<br \/>\n     trye=true;<br \/>\n     aeto=aeto.trim();<br \/>\n     }<br \/>\n     preaeto=aeto;<br \/>\n     presubj='';<br \/>\n     if (aeto.indexOf('#') != -1) {<br \/>\n      presubj=aeto.split('#')[1];<br \/>\n     }<\/font><br \/>\n     if (aeto.indexOf(':') != -1) {<br \/>\n       yourname=aeto.split(':')[0];<br \/>\n       mapfromto('\" . $weare . \"', yourname);<br \/>\n       document.getElementById('ibb').value=document.getElementById('ibb').value.replace(' your name', ' ' + yourname);<br \/>\n       aeto=aeto.replace(yourname + ':', '');<br \/>\n     }<br \/>\n   if (aeto.indexOf('@') != -1) {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('inline', '');<br \/>\n   zform.append('to', aeto.replace(\/\\ \/g,'').replace(\/\\;\/g,',').split('#')[0]);<br \/>\n   <font color=blue>if (aeto.indexOf('#') != -1) {<br \/>\n   zform.append('subject', aeto.split('#')[1]);<br \/>\n   } else {<\/font><br \/>\n   zform.append('subject', 'Sudoku game share invitation link');<br \/>\n   <font color=blue>}<br \/>\n   if (trye) {<\/font><br \/>\n   zform.append('htmlis', '&lt;ht' + 'ml&gt;&lt;bo' + 'dy&gt;&lt;form method=GET action=' + document.URL.split('?')[0].split('&')[0].split('#')[0].replace('https:','http:').replace('?','#') + ' target=_blank&gt;' + dbi.replace('body style=', 'body data-style=').replace(\/\\&lt;button \/g,'&lt;button style=display:none; ') + '&lt;input type=hidden id=thenums name=thenums value=' + thenums + ' style=display:none;&gt;&lt;\/input&gt;\" . $hrd . \"&lt;input style=background-color:yellow; type=submit value=Check&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n   <font color=blue>} else {<br \/>\n   zform.append('htmlis', '&lt;ht' + 'ml&gt;&lt;bo' + 'dy&gt;&lt;form method=GET action=' + document.URL.split('?')[0].split('&')[0].split('#')[0].replace('https:','http:').replace('?','#') + ' target=_blank&gt;' + predbi.replace('body style=', 'body data-style=').replace(\/\\&lt;button \/g,'&lt;button style=display:none; ') + '&lt;input type=hidden id=thenums name=thenums value=' + thenums + ' style=display:none;&gt;&lt;\/input&gt;\" . $hrd . \"&lt;input style=background-color:yellow; type=submit value=Check&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n   }<\/font><br \/>\n   zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n   zhr.send(zform);<br \/>\n   if (aeto.split('#')[0].toUpperCase() == aeto.split('#')[0] || aeto.split('#')[0].toLowerCase() == aeto.split('#')[0]) {<br \/>\n   aeclick(document.getElementById('aemail'));<br \/>\n   } <font color=blue>else {<br \/>\n   preaeto='';<br \/>\n   presubj='';<br \/>\n   }<\/font><br \/>\n   }<br \/>\n     }<br \/>\n     if ((document.URL.indexOf('newwindow=') != -1 || ('' + location.hash).indexOf('newwindow') != -1) || aeto.replace(' ','').toLowerCase().indexOf('newwindow') == 0 && aeto.indexOf('@') == -1) {<br \/>\n     if (aeto.replace(' ','').indexOf('NEWWINDOW') == 0) {<br \/>\n     wo=window.open('','_blank');<br \/>\n     } else {<br \/>\n     wo=window.open('','_blank','top=50,left=50,width=900,height=800');<br \/>\n     }<br \/>\n     wo.document.write('&lt;html&gt;&lt;head&gt;&lt;style&gt; .bright { border-right: 5px solid black; } .bbottom { border-bottom: 5px solid black; } td { font-size: 24px; width: 11%; height: 9%; text-align: center; vertical-align: middle; } select { font-size: 24px; } th { text-align: left; vertical-align: top; } &lt;\/style&gt;&lt;\/head&gt;&lt;body style=\\\" background-image: linear-gradient(to bottom right, rgb(255,255,255), rgb(224, 255, 255),rgb(175, 238, 238),rgb(173, 216, 230),rgb(135, 206, 235),rgb(135, 206, 250),rgb(0, 191, 255),rgb(30, 144, 255),rgb(100, 149, 237),rgb(123, 104, 238),rgb(65, 105, 225),rgb(0, 0, 255),rgb(0, 0, 205),rgb(0, 0, 139),rgb(0, 0, 128),rgb(25, 25, 112)); \\\"&gt;&lt;form method=GET action=' + document.URL.split('?')[0].split('&')[0].split('#')[0].replace('?','#') + ' target=_blank&gt;' + dbi.replace(\/\\&lt;button \/g,'&lt;button style=display:none; ').replace('81%;','78%') + '&lt;input type=hidden id=thenums name=thenums value=' + thenums + ' style=display:none;&gt;&lt;\/input&gt;\" . $hrd . \"&lt;input style=background-color:yellow; type=submit value=Check&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n     }<br \/>\n   }<br \/>\n<\/code><br \/>\n&#8220;; ?&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\/Games\/Sudoku\/sudoku.html-----GETME\">the tweaked HTML\/Javascript basis of<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html-----GETME\">sudoku.htm<\/a> referenced by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php------GETME\">the makeover to collaboration and sharing logic for<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php------GETME\">index.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you should <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try <font size=1>and collaborate with<\/font> below<\/a>, as well.<\/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\/phphtmljavascript-sudoku-game-inline-html-email-emoji-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='php\/html\/jsgihtmlet'>Previous relevant <a target=_blank title='PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/html\/javascript-sudoku-game-inline-html-email-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_inline_html_email.gif\" title=\"PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial<\/p><\/div>\n<p>There are other forms of collaboration and sharing we can add to <a title='PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial' href='#php\/html\/jsgcnt'>PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>email (via &#8220;a&#8221; &#8220;mailto&#8221; link) &#8230; and &#8230;<\/li>\n<li>SMS (via &#8220;a&#8221; &#8220;sms&#8221; link) &#8230; those being, as of today &#8230;<\/li>\n<li>popup window &#8230;<\/li>\n<li>new tab window<\/li>\n<li>inline HTML email (via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a>) form &#8230; get<font size=1>table<\/font> to<font size=1>able<\/font> via <button style=\"border:1px dotted pink;\" title=\"PHP Email Sudoku inline HTML email form or new window form\">&#128231;<\/button> (email &amp;#128231; button calling on <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a>\/<a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> logic)<\/li>\n<\/ul>\n<p> &#8230; that last option making capable for the user, the possibility of playing <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> within the email setting but call on the RJM Programming website to assess their &#8220;correct answering&#8221; status, completing the circle of communications, here &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   function simemail() {<br \/>\n     var aeto='newwindow';<br \/>\n     \/\/alert('here');<br \/>\n     thenums='';<br \/>\n     var esels=document.getElementsByTagName('select');<br \/>\n     for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=retcn(esels[ejj].getAttribute('data-answer'));<br \/>\n      }<br \/>\n     }<br \/>\n     var dspare=''<br \/>\n     var dbi=document.body.innerHTML;<br \/>\n     if (document.URL.indexOf('hard=') != -1 || ('' + location.hash).indexOf('hard') != -1) {<br \/>\n       if (1 == 1) {<br \/>\n       dbi=dbi.replace('\\\"easy\\\"&gt;Easy&lt;\/option&gt;', '\\\"hard\\\"&gt;Easy&lt;\/option&gt;').replace('\\\"hard\\\"&gt;Hard&lt;\/option&gt;', '\\\"easy\\\"&gt;Easy&lt;\/option&gt;').replace('\\\"hard\\\"&gt;Easy&lt;\/option&gt;', '\\\"hard\\\"&gt;Hard&lt;\/option&gt;');<br \/>\n       } else {<br \/>\n       dbi=dbi.replace('&gt;Hard&lt;\/option&gt;', ' selected&gt;Hard&lt;\/option&gt;');<br \/>\n       }<br \/>\n     }<br \/>\n     dbi=dbi.replace('\\\" border=', 'text-align:center;\\\" border=').replace(\/\\.\\\/index\\.php\/g, document.URL.split('?')[0].split('#')[0]).replace(\/\\ class\\=\\\"bright\\ bbottom\\\"\/g, ' style=\\\"border-right:3px solid black;border-bottom:3px solid black;\\\"  class\\=\\\"bright\\ bbottom\\\"').replace(\/\\ class\\=\\\"bright\\\"\/g, ' style=\\\"border-right:3px solid black;\\\"  class\\=\\\"bright\\\"').replace(\/\\ class\\=\\\"bbottom\\\"\/g, ' style=\\\"border-bottom:3px solid black;\\\"  class\\=\\\"bbottom\\\"');<br \/>\n     var dbis=dbi.split(' id=\\\"s'), dbiss=[];<br \/>\n     var mustbe=0, imust=0, gval='';<br \/>\n     for (var idb=1; idb&lt;dbis.length; idb++) {<br \/>\n       dspare=dbis[idb].split('\\\"')[0];<br \/>\n       if (dspare == '' + mustbe) {<br \/>\n       mustbe++;<br \/>\n       if (dbi.indexOf(' name=\\\"s' + dspare + '\\\"') == -1) {<br \/>\n         if (dbis[idb].indexOf(' disabled') != -1) {<br \/>\n         gval=eval(10 - eval(dbis[idb].split(' value=\\\"')[1].split('\\\"')[0]));<br \/>\n         \/\/alert(dbis[idb].replace('&gt;&lt;\/option&gt;','&gt;' + gval + '&lt;\/option&gt;') + ' ... ' + dbis[idb]);<br \/>\n         if (dbis[idb].indexOf('&gt; &lt;\/option&gt;') != -1) {<br \/>\n         dbi=dbi.replace(dbis[idb], dbis[idb].replace('&gt; &lt;\/option&gt;','&gt;' + gval + '&lt;\/option&gt;').replace(' disabled', ' data-disabled'));<br \/>\n         } else {<br \/>\n         dbi=dbi.replace(dbis[idb], dbis[idb].replace('&gt;&lt;\/option&gt;','&gt;' + gval + '&lt;\/option&gt;').replace(' disabled', ' data-disabled'));<br \/>\n         }<br \/>\n         dbi=dbi.replace(' id=\\\"s' + dspare + '\\\"', ' id=\\\"s' + dspare + '\\\"' + ' name=\\\"s' + dspare + '\\\" value=\\\"' + gval + '\\\"');<br \/>\n         dbiss=dbi.split(' id=\\\"s');<br \/>\n         \/\/alert(dbiss[idb]);<br \/>\n         } else {<br \/>\n         dbi=dbi.replace(' id=\\\"s' + dspare + '\\\"', ' id=\\\"s' + dspare + '\\\"' + ' name=\\\"s' + dspare + '\\\"');<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n     }<br \/>\n     \/\/alert(mustbe);<br \/>\n     if (document.URL.indexOf('newwindow=') == -1 && ('' + location.hash).indexOf('newwindow') == -1) {<br \/>\n   aeto=prompt('Please enter email address to invite regarding this Sudoku game collaboration and sharing.  Enter newwindow for game in a new popup window instead, where all uppercase in a new web browser tab.  Optionally suffix by # followed by your email subject line [Sudoku game share invitation link]','');<br \/>\n   if (aeto.indexOf('@') != -1) {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('inline', '');<br \/>\n   zform.append('to', aeto.replace(\/\\ \/g,'').replace(\/\\;\/g,',').split('#')[0]);<br \/>\n   if (aeto.indexOf('#') != -1) {<br \/>\n   zform.append('subject', aeto.split('#')[1]);<br \/>\n   } else {<br \/>\n   zform.append('subject', 'Sudoku game share invitation link');<br \/>\n   }<br \/>\n   zform.append('htmlis', '&lt;html&gt;&lt;!--head&gt;&lt;style&gt; .bright { border-right: 5px solid black; } .bbottom { border-bottom: 5px solid black; } td { font-size: 24px; width: 11%; height: 9%; text-align: center; vertical-align: middle; } select { font-size: 24px; } th { text-align: left; vertical-align: top; } &lt;\/style&gt;&lt;\/head--&gt;&lt;body&gt;&lt;form method=GET action=' + document.URL.split('?')[0].split('&')[0].split('#')[0].replace('https:','http:').replace('?','#') + ' target=_blank&gt;' + dbi.replace(\/\\&lt;button \/g,'&lt;button style=display:none; ') + '&lt;input type=hidden id=thenums name=thenums value=' + thenums + ' style=display:none;&gt;&lt;\/input&gt;\" . $hrd . \"&lt;input style=background-color:yellow; type=submit value=Check&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n   zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n   zhr.send(zform);<br \/>\n   }<br \/>\n     }<br \/>\n     if ((document.URL.indexOf('newwindow=') != -1 || ('' + location.hash).indexOf('newwindow') != -1) || aeto.replace(' ','').toLowerCase().indexOf('newwindow') == 0 && aeto.indexOf('@') == -1) {<br \/>\n     if (aeto.replace(' ','').indexOf('NEWWINDOW') == 0) {<br \/>\n     wo=window.open('','_blank');<br \/>\n     } else {<br \/>\n     wo=window.open('','_blank','top=50,left=50,width=900,height=800');<br \/>\n     }<br \/>\n     wo.document.write('&lt;html&gt;&lt;head&gt;&lt;style&gt; .bright { border-right: 5px solid black; } .bbottom { border-bottom: 5px solid black; } td { font-size: 24px; width: 11%; height: 9%; text-align: center; vertical-align: middle; } select { font-size: 24px; } th { text-align: left; vertical-align: top; } &lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;&lt;form method=GET action=' + document.URL.split('?')[0].split('&')[0].split('#')[0].replace('?','#') + ' target=_blank&gt;' + dbi.replace(\/\\&lt;button \/g,'&lt;button style=display:none; ').replace('81%;','78%') + '&lt;input type=hidden id=thenums name=thenums value=' + thenums + ' style=display:none;&gt;&lt;\/input&gt;\" . $hrd . \"&lt;input style=background-color:yellow; type=submit value=Check&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n     }<br \/>\n   }<br \/>\n<\/code><br \/>\n&#8220;; ?&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\/Games\/Sudoku\/index.php-----GETME\">the changed collaboration and sharing logic for<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php-----GETME\">index.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you should <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try <font size=1>and collaborate with<\/font> below<\/a>, as well, how we have decoupled the PHP from the (need for the) original HTML (to exist), meaning just having the one PHP code source will run your <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a>.<\/p>\n<p>What&#8217;s new with inline HTML email form type of HTML with <a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a> as the email client, for instance?  We couldn&#8217;t see that any CSS styling is accepted, but you can use inline CSS styling within your HTML via the definition of style attribute values.  And as you might have guessed from that, of course no Javascript is allowed to happen, and you should hide evidence, in your HTML, of intending to try to perform any Javascript.<\/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\/phphtmljavascript-sudoku-game-inline-html-email-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='php\/html\/jsgcnt'>Previous relevant <a target=_blank title='PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/html\/javascript-sudoku-game-chat-names-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_collaboration_chat_names.gif\" title=\"PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial<\/p><\/div>\n<p>Am sure there are a lot of users out there who&#8217;d prefer being referred to by their <i>name<\/i> rather than some form of <i>number<\/i> in their online activities.  But we don&#8217;t want to be nosy and have an <i>optional<\/i> paradigm going with assigning <i>names<\/i> to our online <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> game players, else the default and fall through option is to refer to our players via a <i>number<\/i> basis, based on their IP address and web browser brand.<\/p>\n<p>Involving <i>names<\/i> onto the chat typing &#8220;smarts&#8221; of yesterday&#8217;s <a title='PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial' href='#php\/html\/jsgctt'>PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial<\/a>, today, involves some PHP writing out some new Javascript arrays and functions &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   var yourname='';<br \/>\n   var mapfrom=[];<br \/>\n   var mapto=[];<br \/>\n   var mapft='';<br \/>\n<br \/> <br \/>\n   function domaps() {<br \/>\n     if (mapfrom.length &gt; 0) {<br \/>\n       for (var ii=0; ii&lt;mapfrom.length; ii++) {<br \/>\n         document.getElementById('sudokui').placeholder=document.getElementById('sudokui').placeholder.replace('(' + mapfrom[ii] + ' ', '(' + mapto[ii] + ' ').replace(' ' + mapfrom[ii] + ' ', ' ' + mapto[ii] + ' ');<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   function mapfromto(ifrom, ito) {<br \/>\n    if (mapft.indexOf(' ' + ifrom + ' ' + ito + ' ') == -1) {<br \/>\n     if (mapft.indexOf(' ' + ifrom + ' ') != -1) {<br \/>\n     for (var ik=0; ik&lt;mapfrom.length; ik++) {<br \/>\n     if (mapfrom[ik] == ifrom) { mapto[ik] = ito; }<br \/>\n     }<br \/>\n     } else {<br \/>\n     mapfrom.push(ifrom);<br \/>\n     mapto.push(ito);<br \/>\n     }<br \/>\n     mapft+=' ' + ifrom + ' ' + ito + ' ';<br \/>\n    }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   function pargyn() {<br \/>\n     return yourname;<br \/>\n   }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; teaming with a new HTML iframe element &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;iframe id=xnotif src=\".\/index.php?noaction=y\" style=\"display:none;\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; and &#8220;kicked off&#8221; as far as (Javascript) usage goes, <font color=blue>when the Sudoku numbers have been finalized<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   var prevvs='-1';<br \/>\n<br \/>\n   <font color=blue>function aftervn() {<br \/>\n     if (prevvs != document.getElementById('vsarrs').value) {<br \/>\n     thenums='';<br \/>\n     var esels=document.getElementsByTagName('select');<br \/>\n     for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=retcn(esels[ejj].getAttribute('data-answer'));<br \/>\n      }<br \/>\n     }<br \/>\n       prevvs=document.getElementById('vsarrs').value;<br \/>\n       document.getElementById('xnotif').src='.\/index.php?vsarrs=' + encodeURIComponent(prevvs) + '&namecheck=y&myname=' + encodeURIComponent(yourname) + '&ipme=\" . urlencode($weare) . \"' + '&thegame=' + (thenums.substring(0,81)) + '&rnd=' + Math.floor(Math.random() * 198765643);<br \/>\n     }<br \/>\n     domaps();<br \/>\n   }<br \/>\n<br \/> <br \/>\n   function xn() {<br \/>\n     if (1 == 1) {<br \/>\n     thenums='';<br \/>\n     var esels=document.getElementsByTagName('select');<br \/>\n     for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=retcn(esels[ejj].getAttribute('data-answer'));<br \/>\n      }<br \/>\n     }<br \/>\n     prevvs=document.getElementById('vsarrs').value;<br \/>\n     document.getElementById('xnotif').src='.\/index.php?vsarrs=' + encodeURIComponent(prevvs) + '&namecheck=y&myname=' + encodeURIComponent(yourname) + '&ipme=\" . urlencode($weare) . \"' + '&thegame=' + (thenums.substring(0,81)) + '&rnd=' + Math.floor(Math.random() * 198765643);<br \/>\n     setInterval(aftervn, 3000);<br \/>\n     }<br \/>\n   }<\/font><br \/>\n<br \/>\n   function tacheck() {<br \/>\n    var esels=document.getElementsByTagName('select');<br \/>\n    var onechar=' ', twochar=' ';<br \/>\n    thenums='';<br \/>\n    for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=retcn(esels[ejj].getAttribute('data-answer'));<br \/>\n      }<br \/>\n    }<br \/>\n    if (eval('' + thenums.length) &lt; 81) {<br \/>\n      thenums='';<br \/>\n      setTimeout(tacheck, 3000);<br \/>\n    } else if (ioffis != 0) {<br \/>\n    <font color=blue>xn();<\/font><br \/>\n    for (var iejj=0; iejj&lt;esels.length; iejj++) {<br \/>\n      if (('' + esels[iejj].id) != 'smode') {<br \/>\n        twochar=esels[iejj].getAttribute('data-answer');<br \/>\n        onechar=String.fromCharCode(eval(Math.abs(ioffis) + twochar.charCodeAt(0)));<br \/>\n        \/\/alert(esels[iejj].getAttribute('data-answer') + ' vs twochar=' + twochar + ' vs onechar=' + onechar + ' ioffis=' + ioffis + ' twochar.charCodeAt(0)=' + twochar.charCodeAt(0));<br \/>\n        esels[iejj].setAttribute('data-answer', onechar);<br \/>\n      }<br \/>\n    }<br \/>\n    ioffis=Math.abs(ioffis);<br \/>\n    }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   setTimeout(tacheck, 3000);<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; and those iframe &#8220;src&#8221; attribute changes bring on <font size=1>re-<\/font>calls of <font size=1>(the same PHP data source&#8217;s)<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['thegame']) && isset($_GET['namecheck'])) {<br \/>\n $doaloop=true;<br \/>\n $renamebits='';<br \/>\n $vsarrs=\"-1\";<br \/>\n if (isset($_GET['vsarrs'])) { $vsarrs='' . str_replace('+',' ',urldecode($_GET['vsarrs']));  }<br \/>\n $thatset='' . str_replace('+',' ',urldecode($_GET['thegame']));<br \/>\n $thisset='' . str_replace('(','9',str_replace('*','8',str_replace('&','7',str_replace('^','6',str_replace('$','4',str_replace('#','3',str_replace('@','2',str_replace('!','1',str_replace('1','(',str_replace('2','*',str_replace('3','&',str_replace('4','^',str_replace('6','$',str_replace('7','#',str_replace('8','@',str_replace('9','!',str_replace('+',' ',urldecode($_GET['thegame']))))))))))))))))));<br \/>\n while ($doaloop) {<br \/>\n   $allcontentw=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'index.php');<br \/>\n if (strpos($allcontentw, '\/' . '*') !== false && strpos($allcontentw, '*' . '\/') === false) {<br \/>\n   $allcontentw.=\"\\n\" . '*' . '\/' . \"\\n\" . '?' . '&gt;';<br \/>\n }<br \/>\n   $relr=explode((';' . $thisset . ';'), $allcontentw);<br \/>\n   if (('' . sizeof($relr)) == '0' || ('' . sizeof($relr)) == '1') {<br \/>\n     $relr=explode((';' . $thatset . ';'), $allcontentw);<br \/>\n   }<br \/>\n   \/\/file_put_contents('x.x', '' . sizeof($relr) . ' for ;' . $thisset . \";\\n\" . $allcontentw);<br \/>\n   if (('' . sizeof($relr)) != ('' . $vsarrs)) {<br \/>\n     $vsarrs='' . sizeof($relr);<br \/>\n     $doaloop=false;<br \/>\n     for ($iwr=1; $iwr&lt;sizeof($relr); $iwr++) {<br \/>\n       $lfld=str_replace('+',' ',urldecode(explode(\"\\n\", $relr[$iwr])[0]));<br \/>\n       if (strpos($lfld, ':') !== false) {<br \/>\n         $renamebits.=\" parent.mapfromto('\" . explode(';',$relr[-1 + $iwr])[-1 + sizeof(explode(';',$relr[-1 + $iwr]))]  . \"','\" . explode(':', $lfld)[0] . \"'); \";<br \/>\n       }<br \/>\n     }<br \/>\n     if ($renamebits != '') { $renamebit.=' parent.domaps(); '; }<br \/>\n     echo '&lt;html&gt;&lt;body onload=\" parent.document.getElementById(' . \"'vsarrs'\" . ').value=' . \"'\" . $vsarrs . \"'\" . '; ' . $renamebits . ' \"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   } else {<br \/>\n     sleep(5);<br \/>\n   }<br \/>\n }<br \/>\n exit;<br \/>\n }<br \/>\n <\/code><br \/>\n?&gt;<\/p>\n<p>Notice how, sometimes above (and elsewhere), looking at a scenario from within the iframe &#8220;child&#8221;&#8216;s point of view, we can call &#8220;parent&#8221; Javascript, <font color=blue>for example<\/font> &#8230;<\/p>\n<blockquote><p>\n     \/\/$aswell.=&#8217; parent.document.getElementById(&#8216; . &#8220;&#8216;sudokui'&#8221; . &#8216;).placeholder=parent.document.getElementById(&#8216; . &#8220;&#8216;sudokui'&#8221; . &#8216;).placeholder.replace(&#8216; . &#8220;&#8216;(others typing)&#8217;,'(bit before a colon is your name)'&#8221; . &#8216;); &#8216;;<br \/>\n     $aswell.=&#8217; parent.document.getElementById(&#8216; . &#8220;&#8216;sudokui'&#8221; . &#8216;).placeholder=parent.document.getElementById(&#8216; . &#8220;&#8216;sudokui'&#8221; . &#8216;).placeholder.replace(&#8216; . &#8220;\/\\([^\\)]*\\)\/g,'(bit before a colon is &#8216; + <font color=blue>((parent.pargyn().length > 0) ? parent.pargyn() + &#8216;)&#8217; : &#8216;your name)&#8217;)<\/font>&#8221; . &#8216;); &#8216;;\n<\/p><\/blockquote>\n<p> &#8230; and &#8230;<\/p>\n<blockquote><p>\n   if ((&#8221; . sizeof($relr)) != (&#8221; . $vsarrs)) {<br \/>\n     $vsarrs=&#8221; . sizeof($relr);<br \/>\n     $doaloop=false;<br \/>\n     for ($iwr=1; $iwr&lt;sizeof($relr); $iwr++) {<br \/>\n       $lfld=str_replace(&#8216;+&#8217;,&#8217; &#8216;,urldecode(explode(&#8220;\\n&#8221;, $relr[$iwr])[0]));<br \/>\n       if (strpos($lfld, &#8216;:&#8217;) !== false) {<br \/>\n         $renamebits.=&#8221; <font color=blue>parent.mapfromto(&#8216;&#8221; . explode(&#8216;;&#8217;,$relr[-1 + $iwr])[-1 + sizeof(explode(&#8216;;&#8217;,$relr[-1 + $iwr]))]  . &#8220;&#8216;,'&#8221; . explode(&#8216;:&#8217;, $lfld)[0] . &#8220;&#8216;);<\/font> &#8220;;<br \/>\n       }<br \/>\n     }<br \/>\n     if ($renamebits != &#8221;) { $renamebit.=&#8217; <font color=blue>parent.domaps();<\/font> &#8216;; }<br \/>\n     echo &#8216;&lt;html&gt;&lt;body onload=&#8221; parent.document.getElementById(&#8216; . &#8220;&#8216;vsarrs'&#8221; . &#8216;).value=&#8217; . &#8220;&#8216;&#8221; . $vsarrs . &#8220;&#8216;&#8221; . &#8216;; &#8216; . $renamebits . &#8216; &#8220;&gt;&lt;\/body&gt;&lt;\/html&gt;&#8217;;<br \/>\n   } else {<br \/>\n     sleep(5);<br \/>\n   }\n<\/p><\/blockquote>\n<p>Also notice with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php----GETME\">the changed collaboration and sharing logic for<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php----GETME\">index.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you should <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try <font size=1>and collaborate with<\/font> below<\/a>, as well, how we have decoupled the PHP from the (need for the) original HTML (to exist), meaning just having the one PHP code source will run your <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a>.<\/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\/phphtmljavascript-sudoku-game-chat-names-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Chat Names Tutorial<\/a>.<\/p-->\n<hr>\n<p id='php\/html\/jsgctt'>Previous relevant <a target=_blank title='PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/html\/javascript-sudoku-game-chat-typing-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_collaboration_chat.jpg\" title=\"PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial<\/p><\/div>\n<p>We&#8217;ve seen chat websites and SMS messaging types of apps that indicate to users in communication with each other when another user is typing, so that they have a chance to wait for that correspondence before sending their own next piece of correspondence.  And so, onto yesterday&#8217;s <a title='PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial' href='#php\/html\/jsgcnt'>PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial<\/a>&#8216;s chat functionality we wanted to try to code for this functionality.<\/p>\n<p>What events on the chat textbox can help?<\/p>\n<ul>\n<li><i>onkeydown<\/i> event can be used to indicate chat typing ahead of &#8230;<\/li>\n<li><i>onblur<\/i> event can be used to determine when typing ends and sending of correspondence begins<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html----GETME\">the tweaked HTML\/Javascript basis of<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html----GETME\">sudoku.htm<\/a> referenced by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php---GETME\">the chat typing detection parts to collaboration and sharing logic for<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php---GETME\">index.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you should <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try <font size=1>and collaborate with<\/font> below<\/a>, as well.<\/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\/phphtmljavascript-sudoku-game-chat-typing-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Chat Typing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='php\/html\/jsgcnt'>Previous relevant <a target=_blank title='PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/html\/javascript-sudoku-game-collaboration-notifications-tutorial\/'>PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_collaboration_notifications.jpg\" title=\"PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">PHP\/HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial<\/p><\/div>\n<p>Say the word &#8220;collaboration&#8221;, as with yesterday&#8217;s <a title='HTML\/Javascript Sudoku Game Collaboration Tutorial' href='#html\/jsgct'>HTML\/Javascript Sudoku Game Collaboration Tutorial<\/a> start, and we think, as far as communication conduits go we&#8217;d like to start using &#8230;<\/p>\n<ul>\n<li>notifications <font color=blue>&#8230;<\/font><br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   function ifcheck() {<br \/>\n    if (eval('' + thenums.length) >= 81) {<br \/>\n      document.getElementById('sudokuif').src='.\/index.php?thegame=' + thenums.substring(0,81) + '&random=' + encodeURIComponent(Math.floor(Math.random() * 19878654));<br \/>\n     var vstabit=tabit;<br \/>\n     if (document.getElementById('tais')) {<br \/>\n       vstabit=document.getElementById('tais').value;<br \/>\n       if (vstabit != tabit) {<br \/>\n         document.getElementById('tais').rows='' + vstabit.split(String.fromCharCode(10)).length;<br \/>\n         tabit=vstabit;<br \/>\n         var hhdate=new Date();<br \/>\n         document.getElementById('sudokui').placeholder='Optionally chat here (bit before a colon is your name) ... last chat was at ' + hhdate;<br \/>\n         document.getElementById('sudokui').focus();<br \/>\n         <font color=blue>if (document.getElementById('tais').value.split(String.fromCharCode(10))[0].trim() != '') {<br \/>\n         if ((lastbofyours.indexOf(document.getElementById('tais').value.split(String.fromCharCode(10))[0].trim()) != -1 && document.getElementById('tais').value.split(String.fromCharCode(10))[0].trim() != '' && lastbofyours != '') || (amhost && document.getElementById('tais').value.split(String.fromCharCode(10))[0].indexOf('Welcome to our Sudoku game') != -1)) {<br \/>\n         tabit=tabit;<br \/>\n         } else {<br \/>\n         if (yourname.trim() != '' && document.getElementById('tais').value.split(String.fromCharCode(10))[0].indexOf(':') == -1) {<br \/>\n         document.getElementById('notif').src='\/HTMLCSS\/notifications_ideas.php?scheduledblurb=' + encodeURIComponent(document.getElementById('tais').value.split(String.fromCharCode(10))[0] + ' (' + yourname + ')');<br \/>\n         } else {<br \/>\n         document.getElementById('notif').src='\/HTMLCSS\/notifications_ideas.php?scheduledblurb=' + encodeURIComponent(document.getElementById('tais').value.split(String.fromCharCode(10))[0]);<br \/>\n         }<br \/>\n         }<br \/>\n         }<\/font><br \/>\n       }<br \/>\n     }<br \/>\n    }<br \/>\n   }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; in addition to yesterday&#8217;s &#8230;<\/li>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; methodologies to aid with communications among users sharing the same <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html---GETME\">modified HTML\/Javascript basis of<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html---GETME\">sudoku.htm<\/a> <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> game.<\/p>\n<p>A few more changes involve &#8230;<\/p>\n<ul>\n<li>mechanism to define an optional Sudoku player name <font color=purple>&#8230;<\/font><br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   <font color=purple>var yourname='';<\/font><br \/>\n<br \/>\n   function iblur(ithis) {<br \/>\n    thenums='';<br \/>\n    var esels=document.getElementsByTagName('select');<br \/>\n    for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=esels[ejj].getAttribute('data-answer');<br \/>\n      }<br \/>\n    }<br \/>\n     if (ithis.value.trim() != '' && eval('' + thenums.length) &gt;= 81) {<br \/>\n      <font color=purple>if (yourname == '' && ithis.value.indexOf(':') != -1) {<br \/>\n        yourname=ithis.value.split(':')[0];<br \/>\n      } else if (ithis.value.indexOf(':') != -1) {<br \/>\n        if (ithis.value.split(':')[0].indexOf(' ') == -1) {<br \/>\n          yourname=ithis.value.split(':')[0];<br \/>\n        }<br \/>\n      }<\/font><br \/>\n     \/\/alert('yes');<br \/>\n      ithis.value=ithis.value.replace(\/\\\/\/g,' ').replace(\/\\*\/g,' ').replace(\/\\;\/g,' ').replace(\/\\\\\\\"\/g,' ').replace(\/\\'\/g,' ').replace(\/\\(\/g,'{').replace(\/\\)\/g,'}');<br \/>\n      if (yourname.trim() != '' && ithis.value.indexOf(':') == -1) {<br \/>\n        ithis.value=yourname + ': ' + ithis.value;<br \/>\n      }<br \/>\n      lastbofyours=ithis.value;<br \/>\n      document.getElementById('sudokuif').src='.\/index.php?thegame=' + tenminus(thenums.substring(0,81)) + '&newmsg=' + encodeURIComponent(ithis.value);<br \/>\n      var hdate=new Date();<br \/>\n      ithis.title='Last chat you contributed at ' + hdate + ' was ... ' + ithis.value.replace(String.fromCharCode(34),String.fromCharCode(39)).replace(String.fromCharCode(34),String.fromCharCode(39));<br \/>\n      ithis.value='';<br \/>\n      ithis.placeholder='Optionally chat here (bit before a colon is your name) ... last chat was at ' + hdate;<br \/>\n     } \/\/else {<br \/>\n     \/\/alert('no');<br \/>\n     \/\/}<br \/>\n   }<br \/>\n<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<li>indent user player chat in chronological order of appearance <font color=olive>&#8230;<\/font><br \/>\n&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['thegame']) && isset($_GET['random'])) {<br \/>\n <font color=olive>$sofarx=\";\";<br \/>\n $thisb=\"\";<br \/>\n $maxb=\"\";<\/font><br \/>\n $allcontentx=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'index.php');<br \/>\n $lcsx=explode('\/' . '*', $allcontentx);<br \/>\n \/\/file_put_contents('azx.azx', '' . sizeof($lcs) . ' ' . $cuda . ';' . $thisset);<br \/>\n if (sizeof($lcsx) &gt; 1) {<br \/>\n   $collabx=explode('*' . '\/', $lcsx[1])[0];<br \/>\n   $linesx=explode(\"\\n\", $collabx);<br \/>\n   $thisxset=str_replace('+',' ',urldecode($_GET['thegame'])); \/\/'' . str_replace('(','9',str_replace('*','8',str_replace('&','7',str_replace('^','6',str_replace('$','4',str_replace('#','3',str_replace('@','2',str_replace('!','1',str_replace('1','(',str_replace('2','*',str_replace('3','&',str_replace('4','^',str_replace('6','$',str_replace('7','#',str_replace('8','@',str_replace('9','!',str_replace('+',' ',urldecode($_GET['thegame']))))))))))))))))));<br \/>\n   \/\/$thisxset='' . str_replace('(','9',str_replace('*','8',str_replace('&','7',str_replace('^','6',str_replace('$','4',str_replace('#','3',str_replace('@','2',str_replace('!','1',str_replace('1','(',str_replace('2','*',str_replace('3','&',str_replace('4','^',str_replace('6','$',str_replace('7','#',str_replace('8','@',str_replace('9','!',str_replace('+',' ',urldecode($_GET['thegame']))))))))))))))))));<br \/>\n   $taxbit=\"\";<br \/>\n   for ($ilx=0; $ilx&lt;sizeof($linesx); $ilx++) {<br \/>\n     <font color=olive>if ($sofarx == \";\") {<br \/>\n       $sofarx.=str_replace('   ',' + ',str_replace('+',' ',urldecode(explode(';', $linesx[$ilx])[1]))) . ';';<br \/>\n     } else if (sizeof(explode(';' . explode(';', $linesx[$ilx])[1] . ';', $sofarx)) == 1) {<br \/>\n       $maxb.=\" \";<br \/>\n       $thisb=$maxb;<br \/>\n       $sofarx.=str_replace('   ',' + ',str_replace('+',' ',urldecode(explode(';', $linesx[$ilx])[1]))) . ';';<br \/>\n     } else {<br \/>\n       $rest=explode(';' . explode(';', $linesx[$ilx])[1] . ';', $sofarx)[0];<br \/>\n       $thisb=\"\";<br \/>\n       if ($rest != \"\") {<br \/>\n         for ($iop=1; $iop&lt;sizeof(explode(';', $rest)); $iop++) {<br \/>\n           $thisb.=\" \";<br \/>\n         }<br \/>\n       }<br \/>\n     }<\/font><br \/>\n     $parts=explode('' . $thisxset . ';', $linesx[$ilx]);<br \/>\n     if (sizeof($parts) == 2) {<br \/>\n       $taxbit=<font color=olive>$thisb . <\/font>str_replace('   ',' + ',str_replace('+',' ',urldecode($parts[1]))) . \"\\n\" . $taxbit;<br \/>\n     }<br \/>\n   }<br \/>\n   if ($taxbit != \"\") {<br \/>\n     echo '&lt;html&gt;&lt;body onload=\" parent.document.getElementById(' . \"'toright'\" . ').style.display=' . \"'table-cell'\" . '; parent.document.getElementById(' . \"'tais'\" . ').value=' . \"'\" . str_replace(\"\\n\",\"' + String.fromCharCode(10) + '\",$taxbit) . \"'\" . '; \"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   }<br \/>\n }<br \/>\n exit;<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<li>textarea background image linear gradient to highlight latest chat item <font color=magenta>&#8230;<\/font><br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n .bright { border-right: 5px solid black; }<br \/>\n .bbottom { border-bottom: 5px solid black; }<br \/>\n td { font-size: 24px; width: 11%; height: 9%; text-align: center; vertical-align: middle; }<br \/>\n select { font-size: 24px; }<br \/>\n th { text-align: left; vertical-align: top; }<br \/>\n textarea { width: 95%; <font color=magenta>background-image: linear-gradient(rgba(255,255,0,0.5) 20px, white 8%);<\/font> }<br \/>\n input { width: 95%; }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/li>\n<li>local date of last chat item shown <font color=brown>&#8230;<\/font><br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   function iblur(ithis) {<br \/>\n    thenums='';<br \/>\n    var esels=document.getElementsByTagName('select');<br \/>\n    for (var ejj=0; ejj&lt;esels.length; ejj++) {<br \/>\n      if (('' + esels[ejj].id) != 'smode') {<br \/>\n        thenums+=esels[ejj].getAttribute('data-answer');<br \/>\n      }<br \/>\n    }<br \/>\n     if (ithis.value.trim() != '' && eval('' + thenums.length) &gt;= 81) {<br \/>\n      if (yourname == '' && ithis.value.indexOf(':') != -1) {<br \/>\n        yourname=ithis.value.split(':')[0];<br \/>\n      } else if (ithis.value.indexOf(':') != -1) {<br \/>\n        if (ithis.value.split(':')[0].indexOf(' ') == -1) {<br \/>\n          yourname=ithis.value.split(':')[0];<br \/>\n        }<br \/>\n      }<br \/>\n     \/\/alert('yes');<br \/>\n      ithis.value=ithis.value.replace(\/\\\/\/g,' ').replace(\/\\*\/g,' ').replace(\/\\;\/g,' ').replace(\/\\\\\\\"\/g,' ').replace(\/\\'\/g,' ').replace(\/\\(\/g,'{').replace(\/\\)\/g,'}');<br \/>\n      if (yourname.trim() != '' && ithis.value.indexOf(':') == -1) {<br \/>\n        ithis.value=yourname + ': ' + ithis.value;<br \/>\n      }<br \/>\n      lastbofyours=ithis.value;<br \/>\n      document.getElementById('sudokuif').src='.\/index.php?thegame=' + tenminus(thenums.substring(0,81)) + '&newmsg=' + encodeURIComponent(ithis.value);<br \/>\n      <font color=brown>var hdate=new Date();<\/font><br \/>\n      ithis.title='Last chat you contributed at ' + hdate + ' was ... ' + ithis.value.replace(String.fromCharCode(34),String.fromCharCode(39)).replace(String.fromCharCode(34),String.fromCharCode(39));<br \/>\n      ithis.value='';<br \/>\n      ithis.placeholder='Optionally chat here (bit before a colon is your name) ... <font color=brown>last chat was at <\/font>'<font color=brown> + hdate<\/font>;<br \/>\n     } \/\/else {<br \/>\n     \/\/alert('no');<br \/>\n     \/\/}<br \/>\n   }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; to round out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php--GETME\">the tweaked collaboration and sharing logic for<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php--GETME\">index.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you should <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try <font size=1>and collaborate with<\/font> below<\/a>, as well.<\/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\/phphtmljavascript-sudoku-game-collaboration-tutorial\/'>HTML\/Javascript Sudoku Game Collaboration Notifications Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jsgct'>Previous relevant <a target=_blank title='HTML\/Javascript Sudoku Game Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-sudoku-game-collaboration-tutorial\/'>HTML\/Javascript Sudoku Game Collaboration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Sudoku Game Collaboration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_collaboration.jpg\" title=\"HTML\/Javascript Sudoku Game Collaboration Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Sudoku Game Collaboration Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='HTML\/Javascript Sudoku Personalized Game Tutorial' href='#html\/jspgt'>HTML\/Javascript Sudoku Personalized Game Tutorial<\/a>&#8216;s progress with our <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> game is today&#8217;s collaboration and sharing phase, offering &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; conduits to involving outside parties into your Sudoku &#8220;party&#8221;, via an invitation to the relevant emailee or mobile number, respectively.  Once the invites are answered, it can be like a chat session for the collaborators, featuring &#8230;<\/p>\n<ul>\n<li>textbox (input type=text) chat elements &#8230; and an accumulated &#8230;<\/li>\n<li>textarea total chat session (most recent to the top)<\/li>\n<\/ul>\n<p>What goes to make up this &#8220;chat&#8221; feature?<\/p>\n<ul>\n<li>start involving PHP as the \/Games\/Sudoku\/ default webpage<\/li>\n<li>using that PHP itself to store data required to make this happen (effectively the &#8220;chat&#8221; data source) via the PHP reading its own content (as well as the content of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html--GETME\">sudoku.htm<\/a>)<\/li>\n<li>calling the self same PHP with different $_GET[] arguments in a child iframe element at regular intervals, and, as necessary, update the textarea content above<\/li>\n<\/ul>\n<p> &#8230; as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php-GETME\">the collaboration and sharing logic added to<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php-GETME\">index.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/\">Sudoku game<\/a> that you should <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.php?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/index.php'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try <font size=1>and collaborate with<\/font> below<\/a>, as well.<\/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\/htmljavascript-sudoku-personalized-game-collaboration-tutorial\/'>HTML\/Javascript Sudoku Game Collaboration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jspgt'>Previous relevant <a target=_blank title='HTML\/Javascript Sudoku Personalized Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-sudoku-personalized-game-tutorial\/'>HTML\/Javascript Sudoku Personalized Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Sudoku Personalized Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku_tailored.jpg\" title=\"HTML\/Javascript Sudoku Personalized Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Sudoku Personalized Game Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML\/Javascript Sudoku Game Primer Tutorial' href='#html\/jsgpt'>HTML\/Javascript Sudoku Game Primer Tutorial<\/a> gave us a &#8220;first draft&#8221; look at the <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> game which featured &#8230;<\/p>\n<ul>\n<li>an inflexible &#8220;Easy&#8221; and &#8220;Hard&#8221; mode of use, using a set pattern of revealed squares &#8230;<br \/>\n<code><br \/>\n  var easyarr=',3,4,7,10,12,14,15,19,20,27,28,29,30,32,34,39,41,44,45,49,51,52,55,57,59,61,67,68,70,71,74,75,76,80,';<br \/>\n  var hardarr=',1,5,8,9,13,19,21,28,33,36,37,39,43,49,52,54,61,62,63,67,69,70,72,80,';<br \/>\n<\/code><br \/>\n &#8230; but, today, as a personalization measure, we allow &#8230;<\/li>\n<li>user control over that pattern of revealed squares (via a new &#8220;Tailored&#8221; option in the top mode of play dropdown) &#8230;<br \/>\n<code><br \/>\n  var mustbeguessed=location.search.split('mustbeguessed=')[1] ? decodeURIComponent(location.search.split('mustbeguessed=')[1].split('&')[0]) : '';<br \/>\n  var mustnotbeguessed=location.search.split('mustnotbeguessed=')[1] ? decodeURIComponent(location.search.split('mustnotbeguessed=')[1].split('&')[0]) : '';<br \/>\n<br \/>\n  function askmaybe(indef) {<br \/>\n    var tans='';<br \/>\n    var tpars='';<br \/>\n    if (indef.indexOf('tailored=') == 0) {<br \/>\n      tans=prompt('Using square numbers of 9x9 grid from 1 to 81, specify in comma separated list, where prefixed by minus would be pre-answered else represents squares to be answered, for Sudoku game to follow. To remember for the future involve leading or trailing spaces.  Involve an x to delete any pre-existing saved tailored Sudoku game configurations.', '');<br \/>\n      if (tans == null) { tans=''; }<br \/>\n      var atansarr=tans.replace(\/x\/g,'').replace(\/X\/g,'').split(',');<br \/>\n      if (gls!= '' && tans.toLowerCase().indexOf('x') != -1) {<br \/>\n            window.<a target=_blank title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a>.removeItem('sudokudefs');<br \/>\n            gls='';<br \/>\n      }<br \/>\n      for (var it=0; it&lt;atansarr.length; it++) {<br \/>\n       if (('' + atansarr[it]).trim() != '') {<br \/>\n        if (('' + atansarr[it] + ' ').indexOf('-') == 0) {<br \/>\n          if (tpars.indexOf('mustnotbeguessed=') == -1) { tpars+='&mustnotbeguessed=' + atansarr[it].trim().substring(1);  } else {  tpars=tpars.replace('&mustnotbeguessed=', '&mustnotbeguessed=' + atansarr[it].trim().substring(1) + ','); }<br \/>\n        } else {<br \/>\n          if (tpars.indexOf('mustbeguessed=') == -1) { tpars+='&mustbeguessed=' + atansarr[it].trim();  } else {  tpars=tpars.replace('&mustbeguessed=', '&mustbeguessed=' + atansarr[it].trim() + ','); }<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n      if (tpars != '') {<br \/>\n        <font color=blue>if (tans.trim() != tans) {<br \/>\n          if (getls() != '') {<br \/>\n            window.localStorage.removeItem('sudokudefs');<br \/>\n          }<br \/>\n          window.localStorage.setItem('sudokudefs', encodeURIComponent(tpars.substring(1)));<br \/>\n        }<\/font><br \/>\n        return tpars.substring(1);<br \/>\n      }<br \/>\n    }<br \/>\n    return indef;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; as well as a way to have &#8230;<\/li>\n<li><font color=blue>recallable user control<\/font> over that pattern of revealed squares &#8230;<br \/>\n<code><br \/>\n  <font color=blue>var gls=getls();<br \/>\n<br \/>\n  function getls() {<br \/>\n    return decodeURIComponent(('' + window.localStorage.getItem('sudokudefs')).replace(\/^undefined\/g,'').replace(\/^null\/g,''));<br \/>\n  }<br \/>\n  <br \/>\n  function checkls() {<br \/>\n    if (gls != '' && document.URL.indexOf('?') == -1) {<br \/>\n      location.href=document.URL.split('#')[0].split('?')[0] + '?' + gls;<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<br \/>\n\/\/ via document.body onload call via ... &lt;body onload=\"<font color=blue>checkls();<\/font> while (!okay) { okay=newgame(); }\"&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; meaning you can set up a personalized Sudoku level of difficulty called upon each time you start it up again when using the same device and web browser combination with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html-GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html-GETME\">sudoku.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.htm\">Sudoku<\/a> game <a onmouseover=\"document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.htm';\"   onclick=\"if ((document.getElementById('mysiframe').src + '?').indexOf('.htm?') == -1) { document.getElementById('mysiframe').src='\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.htm'; } location.href='#mysiframe';\" data-href='#mysiframe' style=\"text-decoration:underline;cursor:pointer;\">feel free to try below<\/a>, as well.<\/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\/html\/javascript-sudoku-personalized-game-tutorial\/'>HTML\/Javascript Sudoku Personalized Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jsgpt'>Previous relevant <a target=_blank title='HTML\/Javascript Sudoku Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-sudoku-game-primer-tutorial\/'>HTML\/Javascript Sudoku 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\/Games\/Sudoku\/sudoku.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Sudoku Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.jpg\" title=\"HTML\/Javascript Sudoku Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Sudoku Game Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve got an inhouse version of a well known mathematical <font size=1>(but you don&#8217;t have to be a mathematician to play)<\/font> game called <a target=_blank title='Sudoku' href='https:\/\/en.wikipedia.org\/wiki\/Sudoku'>Sudoku<\/a> which you regularly find in the puzzles section of the newspaper, like the KenKen game of <a title='HTML\/Javascript KenKen Game Primer Tutorial' href='#html\/jkkgpt'>HTML\/Javascript KenKen Game Primer Tutorial<\/a> times.<\/p>\n<p>The rules are, for our version &#8230;<\/p>\n<ul>\n<li>there are 81 squares in a 9&#215;9 grid that need to get assigned a counting number from 1 to 9, but some are filled out already to help you<\/li>\n<li>no row of nine should contain a duplicate counting number<\/li>\n<li>no column of nine should contain a duplicate counting number<\/li>\n<li>none of the 9 3&#215;3 squares within that 9&#215;9 grid should contain a duplicate counting number<\/li>\n<\/ul>\n<p>Simple, when put like that, but can be quite challenging in the solving!<\/p>\n<p>Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html_GETME\" title=\"sudoku.html\">first draft sudoku.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html\" title=\"Click picture\">Suduko game<\/a> you can try in a new window, or below &#8230;<\/p>\n<p><iframe id=mysiframe src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Sudoku\/sudoku.html\" style=\"width:100%;height:900px;\"><\/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\/htmljavascript-sudoku-game-primer-tutorial\/'>HTML\/Javascript Sudoku Game Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jkkgpt'>Previous relevant <a target=_blank title='HTML\/Javascript KenKen Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-kenken-game-primer-tutorial\/'>HTML\/Javascript KenKen 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\/kenken.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript KenKen Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.jpg\" title=\"HTML\/Javascript KenKen Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript KenKen Game Primer Tutorial<\/p><\/div>\n<p>KenKen is a well known mathematical game, featuring in the puzzle section of some newspapers.  We see it here in Sydney, Australia, in <a target=_blank title='The Sydney Morning Herald' href='http:\/\/www.smh.com.au\/\u200e'>The Sydney Morning Herald<\/a> newspaper.<\/p>\n<p>Do not know what the paper KenKen puzzle creators use to create their KenKen puzzles, but we do end up with a bit of a trial and error approach (populating the KenKen grid with numbers).<\/p>\n<p>Am sure if you are interested in the methodology you would not have too much trouble seeing what we did by examining the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.html_GETME\" title='kenken.html'>kenken.html<\/a><\/p>\n<p>KenKen consists of a grid (ours is 6&#215;6) of numbers (from 1 to 6) not repeated horizontally nor vertically within that grid.<\/p>\n<p>The user solving the KenKen puzzle is not shown those numbers, except the ones caught in a 1&#215;1 &#8220;cage&#8221; &#8230; and these can help you greatly to solve the puzzle, the rest of which is made up of 1&#215;2 and 1&#215;3 &#8220;cages&#8221; that have a &#8220;clue&#8221; &#8230; for example &#8230;<\/p>\n<ul>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>12*<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>7+<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>3-<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>2\/<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; which tell you a clue about the numbers you can use dropdowns with which to solve.<\/p>\n<p>There is no surprise with the HTML &#8220;grid&#8221; being composed of an HTML <a target=_blank title='HTML table information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_tables.asp'>table<\/a> element, shadowed by a multi-dimensional array we initialize for our 6&#215;6 grid scenario via &#8230;<\/p>\n<p><code><br \/>\nvar mda=[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]];<br \/>\n<\/code><\/p>\n<p> in the Javascript.<\/p>\n<p>You&#8217;ll see that we made use of the HTML <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> tag for a superimposed feel to the clues within some of the grid squares at the start of the &#8220;cage&#8221;.<\/p>\n<p>Hope you get some HTML and Javascript ideas about games, and have fun playing this mathematical and logic game, today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.html\" title='click picture'>live run<\/a>.<\/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='#d15724' onclick='var dv=document.getElementById(\"d15724\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15724' 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='#d57763' onclick='var dv=document.getElementById(\"d57763\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57763' 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='#d57770' onclick='var dv=document.getElementById(\"d57770\"); 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='d57770' 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='#d57780' onclick='var dv=document.getElementById(\"d57780\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/collaborate\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57780' 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='#d57787' onclick='var dv=document.getElementById(\"d57787\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/notifications\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57787' 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='#d57790' onclick='var dv=document.getElementById(\"d57790\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/typing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57790' 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='#d57794' onclick='var dv=document.getElementById(\"d57794\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/name\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57794' 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='#d57803' onclick='var dv=document.getElementById(\"d57803\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mail\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57803' 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='#d57811' onclick='var dv=document.getElementById(\"d57811\"); 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='d57811' 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='#d57882' onclick='var dv=document.getElementById(\"d57882\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/font-size\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57882' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are advantages to using &#8230; emojis &#8230; as a substitute for &#8230; images &#8230; in web applications such as the Sudoku game of the recent PHP\/HTML\/Javascript Sudoku Game Inline HTML Email Emoji Tutorial. It means we can hone in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/phphtmljavascript-sudoku-game-legibility-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,14,15,37],"tags":[2914,69,1835,1580,200,2525,1604,4173,3136,4165,281,4188,290,1785,2365,354,367,380,385,1696,429,430,451,3453,452,2730,471,476,477,503,2298,576,587,3351,4179,609,625,652,4186,2020,2415,739,3872,752,3004,3861,2505,846,2791,2394,860,1705,2411,919,932,967,997,2232,3274,1866,1133,1137,1159,4187,1209,1212,4172,1238,1254,1262,1675,1319,1321,3594,1583,1498],"class_list":["post-57882","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-_get","tag-ajax","tag-arguments","tag-cell","tag-chat","tag-child","tag-collaboration","tag-comments","tag-conduit","tag-conic-gradient","tag-css","tag-css-property","tag-data","tag-data-source","tag-dimensions","tag-dom","tag-dropdown","tag-email","tag-emoji","tag-event-driven-programming","tag-file_get_contents","tag-file_put_contents","tag-font","tag-font-size","tag-form","tag-formdata","tag-function","tag-game","tag-games-2","tag-gmail","tag-grid","tag-html","tag-iframe","tag-inline-html-email","tag-inline-html-email-form","tag-input","tag-invitation","tag-javascript","tag-legibility","tag-linear-gradient","tag-localstorage","tag-mailto","tag-makeover","tag-mathematics","tag-maths","tag-mode","tag-name","tag-notification","tag-notifications","tag-number","tag-onblur","tag-onkeydown","tag-parent","tag-personalization","tag-php","tag-popup","tag-programming","tag-property","tag-recall","tag-select","tag-share","tag-sharing","tag-sms","tag-spread-gesture","tag-style","tag-styling","tag-sudoku","tag-table","tag-text","tag-textarea","tag-textbox","tag-tutorial","tag-tutorials","tag-typing","tag-window","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57882"}],"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=57882"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57882\/revisions"}],"predecessor-version":[{"id":57889,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57882\/revisions\/57889"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}