{"id":62230,"date":"2024-01-11T03:01:47","date_gmt":"2024-01-10T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62230"},"modified":"2024-01-11T06:51:47","modified_gmt":"2024-01-10T20:51:47","slug":"sos-game-keyboard-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/sos-game-keyboard-tutorial\/","title":{"rendered":"SOS Game Keyboard Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SOS Game Keyboard Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game_keyboard.jpg\" title=\"SOS Game Keyboard Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SOS Game Keyboard Tutorial<\/p><\/div>\n<p>We&#8217;re not sure why we didn&#8217;t think about it in the first round of SOS Game creation sessions, but, further to the recent <a title='SOS Game Cursor Tutorial' href='#sosgct'>SOS Game Cursor Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>cursor non-mobile improvements &#8230; today we have &#8230;<\/li>\n<li>CSS margin <font color=darkgreen>tweaks<\/font> &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n #wunderlay {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    opacity: 0.3;<br \/>\n    z-index: 11;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 <font color=darkgreen>-12<\/font>;<br \/>\n  -webkit-animation: glow 1s linear infinite alternate;<br \/>\n  -moz-animation: glow 1s linear infinite alternate;<br \/>\n  animation: glow 1s linear infinite alternate;<br \/>\n }<br \/>\n <br \/>\n #underlay {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    opacity: 0.3;<br \/>\n    z-index: 1;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 <font color=darkgreen>-12<\/font>;<br \/>\n    color: transparent;<br \/>\n }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<br \/>\n &#8230; allowing for a more accurate cell transition calculation &#8230; by, on non-mobile, nullifying the left glow &#8230; and &#8230;<\/li>\n<li>keyboard non-mobile functionality extensions <\/li>\n<\/ul>\n<p>And it is that last &#8220;keyboard&#8221; strategy we want to hone in on today.  Occasionally you come across a game where the &#8220;keyboard&#8221; use is apt, but fewer and fewer of these HTML5 games (that are not apps) benefit on mobile platforms, in this way.  It can mean, though, that &#8220;huddling around the one device&#8221; with more than one player of the game, becomes more feasible, and this SOS Game &#8220;of recent tweaks&#8221; is a great candidate, it being &#8230;<\/p>\n<ul>\n<li>only key characters <font color=purple>&#8220;S&#8221; and &#8220;O&#8221; need to be coded for<\/font> &#8230;<br \/>\n<code><br \/>\n <font color=purple>var lastspan=null;<\/font><br \/>\n <br \/>\n function didclick(e, spano<font color=magenta>, istm<\/font>) {<br \/>\n   <font color=purple>var ourlet='';<br \/>\n   if (istm == 0 && lastspan) {<br \/>\n   if (('' + lastspan.outerHTML).indexOf('&lt;span') == -1) { return true;  }<br \/>\n   \/\/document.title='' + e.keyCode;<br \/>\n   var char = e.which || e.keyCode<br \/>\n   if (('' + e.keyCode) == '79' && istm == 0) {<br \/>\n     ourlet='O';<br \/>\n     spano=lastspan;<br \/>\n   } else if (('' + e.keyCode) == '83' && istm == 0) {<br \/>\n     ourlet='S';<br \/>\n     spano=lastspan;<br \/>\n   } else if (('' + e.keyCode) != 'undefined' && istm == 0) {<br \/>\n     return true;<br \/>\n   }<br \/>\n   }<\/font><br \/>\n   if (document.getElementById('names')) {<br \/>\n   if (document.getElementById('names').value == '' && document.getElementById('names').placeholder.indexOf(',') != -1) {<br \/>\n     document.getElementById('names').value=document.getElementById('names').placeholder;<br \/>\n     \/\/alert(1);<br \/>\n     document.getElementById('numsel').value='' + document.getElementById('names').value.split(',').length;<br \/>\n     \/\/alert(document.getElementById('numsel').value);<br \/>\n     nparrange(document.getElementById('numsel'));<br \/>\n     \/\/alert(11);<br \/>\n     document.getElementById('smore').innerHTML=notify('Your go ' + anames[curplayer]);<br \/>\n   }<br \/>\n   }<br \/>\n   console.log('1');<br \/>\n   if (spano.innerHTML.toLowerCase() == 's' || spano.innerHTML.toLowerCase() == 'o') { return true; }<br \/>\n   console.log('2');<br \/>\n   var rtis=spano.getBoundingClientRect();<br \/>\n   console.log('3');<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       xx = e.touches[0].pageX;<br \/>\n       yy = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       xx = e.touches[0].clientX;<br \/>\n       yy = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        xx = e.clientX;<br \/>\n        yy = e.clientY;<br \/>\n       } else {<br \/>\n        xx = e.pageX;<br \/>\n        yy = e.pageY;<br \/>\n       }<br \/>\n   <br \/>\n   var thislet=' ';<br \/>\n   var locsubscore=0;<br \/>\n   var thisi=eval(spano.id.replace('span',''));<br \/>\n   if (ourlet == 'S' || (eval(yy - rtis.top) &lt;= eval(rtis.bottom - yy) && ourlet != 'O')) { \/\/ s<br \/>\n     thislet='S';<br \/>\n     spano.innerHTML=thislet;<br \/>\n     spano.style.color='rgb(128,0,128)'; \/\/'#000000';<br \/>\n   } else {<br \/>\n     thislet='O';<br \/>\n     spano.innerHTML=thislet;<br \/>\n     spano.style.color='#0000ff';<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi % 100) &gt;= 2) { \/\/ forwards we are at end<br \/>\n     if ((sb(document.getElementById('span' + eval(-2 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi % 100) &gt;= 1 && eval(thisi % 100) &lt;= 98) { \/\/ forwards we are in the middle<br \/>\n     if ((sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi % 100) &lt;= 97) { \/\/ forwards we are at start<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(2 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   <br \/>\n   if (updownallowed) {<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 2) { \/\/ down we are at end<br \/>\n     if ((sb(document.getElementById('span' + eval(-200 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 1 && eval(thisi \/ 100) &lt;= 18) { \/\/ down we are in the middle<br \/>\n     if ((sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &lt;= 17) { \/\/ down we are at start<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(200 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n<br \/>\n   if (diagonalsallowed) {<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 2 && eval(thisi % 100) &gt;= 2) { \/\/ diagonally we are at end<br \/>\n     if ((sb(document.getElementById('span' + eval(-202 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   sbs=[];<br \/>\n     if ((sb(document.getElementById('span' + eval(-198 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 1 && eval(thisi \/ 100) &lt;= 18 && eval(thisi % 100) &gt;= 1 && eval(thisi % 100) &lt;= 98) { \/\/ diagonally we are in the middle<br \/>\n     if ((sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   sbs=[];<br \/>\n     if ((sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &lt;= 17 && eval(thisi % 100) &lt;= 97) { \/\/ diagonally we are at start<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(202 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   sbs=[];<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(198 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n<br \/>\n   if (locsubscore &gt; 0) {<br \/>\n     \/\/alert('locsubscore=' + locsubscore + ' yy=' + yy + ' rtis.top=' + rtis.top + ' rtis.y=' + rtis.y + ' rtis.bottom=' + rtis.bottom);<br \/>\n     changeu=false;<br \/>\n     subscore=locsubscore;<br \/>\n     return cscore('pointer', locsubscore);<br \/>\n   } else {<br \/>\n     subscore=0;<br \/>\n     changeu=true;<br \/>\n     \/\/alert('change');<br \/>\n     return cscore('pointer', 0);<br \/>\n   }<br \/>\n   <br \/> <br \/>\n   var newi=eval(spano.id.replace('span',''));<br \/>\n   var documentgetSelectiontoString='', revsis='';<br \/>\n   var wlen=0, ijh=0;<br \/>\n   if (setsoftwo.length == 0) {<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n   } else {<br \/>\n       console.log('Newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     if (Math.floor(newi \/ 100) == Math.floor(setsoftwo[0] \/ 100)) {<br \/>\n       wlen=eval(1 + Math.abs(eval(setsoftwo[0] - newi)));<br \/>\n       if (wlen == 3) { \/\/ &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh++) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, but too short.');<br \/>\n     }<br \/>\n<br \/>\n     } else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) {<br \/>\n       if (updownallowed) {<br \/>\n       console.log('up down');<br \/>\n       wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] \/ 100) - Math.floor(newi \/ 100))));<br \/>\n       console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n       if (wlen == 3) { \/\/ &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh+=100) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, need four or more letters.');<br \/>\n     }<br \/>\n<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, no up or downs allowed.');<br \/>\n     }<br \/>\n<br \/>\n     } else if (Math.abs(Math.floor(eval(newi \/ 100)) - Math.floor(eval(setsoftwo[0] \/ 100))) == Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100))) {<br \/>\n       if (diagonalsallowed) {<br \/>\n       console.log('diagonal');<br \/>\n<br \/>\n       wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] \/ 100) - Math.floor(newi \/ 100))));<br \/>\n       console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n       if (wlen == 3) { \/\/ &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh+=eval(eval(Math.max(setsoftwo[0], newi) - Math.min(setsoftwo[0], newi)) \/ eval(-1 + wlen))) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Too short, sorry.');<br \/>\n     }<br \/>\n<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, no diagonals allowed.');<br \/>\n     }<br \/>\n<br \/>\n     } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     }<br \/>\n   }<br \/>\n   \/\/alert('id=' + spano.id + ' ' + spano.innerHTML);<br \/>\n }<br \/>\n <br \/>\n  function dummyspit(ev) {<br \/>\n   lastspan=e.target;<br \/>\n   return true;<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<li>onkeydown event can serve the purpose in a <a target=_blank title='Keyboard shortcut information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Keyboard_shortcut'>&#8220;hotkey&#8221;<\/a> way, making things a lot easier &#8230; and what we have done in the past and reiterate today, having gone down the wrong garden path before the better one, is &#8230;<\/li>\n<li>the additional &#8220;onkeydown&#8221; event can belong to the <font color=blue>document.body<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;body<font color=blue> onkeydown=didclick(event,lastspan<font color=magenta>,0<\/font>);<\/font> data-onclick='bc(event);' title='' onload=\"sdodit(); setTimeout(mytaow, 2000);  if (('' + navigator.platform.toUpperCase()).indexOf('MAC') >= 0) {  document.getElementById('names').title+='  Append with spaces to try using MAMP HTTP:\/\/localhost:8888\/macos_say_record.php supervision of macOS say text to audio commentary.';  }\"&gt;<br \/>\n<\/code><br \/>\n &#8230; element rather than an individual event for each game span &#8220;cell&#8221; &#8230; and &#8230;<\/li>\n<li>though not as cutesy wutesy codewise as we&#8217;d hoped, the &#8220;onkeydown&#8221; logic can co-exist with &#8220;onclick&#8221; (for each span &#8220;cell&#8221;) Javascript function, <font color=purple>as shown above<\/font>, the <font color=magenta>last parameter 1 for real click and 0 for keyboard call<\/font><\/li>\n<\/ul>\n<p> &#8230; it being a comfort that the &#8220;keyboard&#8221; logic merges in with so much of the established &#8220;onclick&#8221; logic that has been working in the past in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html----GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html----GETME\">sos_game.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html\">SOS Game<\/a> for interested parties.<\/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\/sos-game-keyboard-tutorial\/'>SOS Game Keyboard Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sosgct'>Previous relevant <a target=_blank title='SOS Game Cursor Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/sos-game-cursor-tutorial\/'>SOS Game Cursor Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SOS Game Cursor Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_cursor.gif\" title=\"SOS Game Cursor Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SOS Game Cursor Tutorial<\/p><\/div>\n<p>In the online woooorrrrllllddd, non-mobile platforms have a whole &#8220;hover&#8221; woooorrrrllllddd forsaken by the mobile platforms.  In that woooorrrrllllddd you can &#8220;decorate&#8221; or personalize your cursor, that &#8220;character&#8221; <font size=1>(or perhaps more if you involve SVG<sub>+XML<\/sub> protocol cursor customized definitions)<\/font> which follows your mouse position around the screen.<\/p>\n<p>The event &#8220;onmouseover&#8221; is called that once on a detection of that hovering concerning an HTML element you are interested in.  Event &#8220;onmouseover&#8221; is not called again until a re-entry happens <font size=1>(and an &#8220;onmouseout&#8221; event happens as the mouse leaves the environs of your element having previously caused an &#8220;onmouseover&#8221; event to be called)<\/font>.<\/p>\n<p>If the position remains of interest during that time between an &#8220;onmouseover&#8221; and an &#8220;onmouseout&#8221; event be of interest, as it is for us, today, retweaking our recent SOS Game (last talked about with <a title='SOS Game Primer Tutorial' href='#sosgpt'>SOS Game Primer Tutorial<\/a>) functionality, we need to start taking an interest in that element&#8217;s &#8220;onmousemove&#8221; event, called by the system every time the mouse moves within the realms of your HTML element of interest.<\/p>\n<p>Our SOS Game differentiates an &#8220;S&#8221; user play, from a user &#8220;O&#8221; play via whether the click <font size=1>(and now hover)<\/font> positioning is at the top and bottom of the relevant table cell element respectively, decorated by a linear gradient helping background image, with the hovering, as well.<\/p>\n<p>Can the event logic be quick enough?  We&#8217;ll let you judge for yourself.  Probably your impatient players will occasionally fall foul of this hovering advice, but for the main part, we found it helped explain how the game works, having these SVG defined &#8220;S&#8221; and &#8220;O&#8221; SVG text cursor customizations happen for our non-mobile SOS Game players out there.<\/p>\n<p>Javascript wise, we fleshed out the <font size=1>(previously not fleshed out)<\/font> <i>function sback<\/i> <font color=blue>as below, in a way that made it compatible to calls from &#8220;onmousemove&#8221; events as well as the &#8220;onmouseover&#8221; events it had already been deployed for<\/font> &#8230;<\/p>\n<p><code><br \/>\n function sback(<font color=blue>e,<\/font>spo) {<br \/>\n   <font color=blue>var moxx=0, moyy=0;<br \/>\n   var rstis=spo.getBoundingClientRect();<br \/>\n   \/\/spo.style.backgroundImage='url(\"data:image\/svg+xml;utf8,&lt;svg xmlns=' + \"'\" + 'http:\/\/www.w3.org\/2000\/svg' + \"'\" + ' width=' + \"'\" + rstis.width + \"'\" + ' height=' + \"'\" + rstis.height + \"'\" + ' viewport=' + \"'\" + '0 0 100 100' + \"'\" + '&gt;&lt;text y=' + \"'\" + '0%' + \"'\" + '&gt;S&lt;\/text&gt;&lt;text y=' + \"'\" + '50%' + \"'\" + '&gt;O&lt;\/text&gt;&lt;\/svg&gt;\");';<br \/>\n   \/\/spo.style.backgroundRepeat='no-repeat';<br \/>\n   \/\/spo.style.backgroundSize='contain';<br \/>\n  <br \/> <br \/>\n    \/\/elemLeft = spo.offsetLeft;<br \/>\n    \/\/elemTop = spo.offsetTop;<br \/>\n   <br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       moxx = e.touches[0].pageX + document.body.scrollLeft * 0 - elemLeft;<br \/>\n       moyy = e.touches[0].pageY + document.body.scrollTop * 0 - elemTop;<br \/>\n       } else {<br \/>\n       moxx = e.touches[0].clientX + document.body.scrollLeft * 0 - elemLeft;<br \/>\n       moyy = e.touches[0].clientY + document.body.scrollTop * 0 - elemTop;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        moxx = e.clientX + document.body.scrollLeft * 0 - elemLeft;<br \/>\n        moyy = e.clientY + document.body.scrollTop * 0 - elemTop;<br \/>\n       } else {<br \/>\n        moxx = e.pageX + document.body.scrollLeft * 0 - elemLeft;<br \/>\n        moyy = e.pageY + document.body.scrollTop * 0 - elemTop;<br \/>\n       }<br \/>\n  <br \/>\n   if (Math.abs(eval('' + moyy) - eval('' + rstis.top)) &lt;= Math.abs(eval('' + moyy) - eval('' + rstis.bottom))) {<br \/>\n   spo.style.cursor='url(\"data:image\/svg+xml;utf8,&lt;svg xmlns=' + \"'\" + 'http:\/\/www.w3.org\/2000\/svg' + \"'\" + ' width=' + \"'\" + rstis.width + \"'\" + ' height=' + \"'\" + rstis.height + \"'\" + ' viewport=' + \"'\" + '0 0 100 100' + \"'\" + '&gt;&lt;text y=' + \"'\" + '50%' + \"'\" + ' stroke=' + \"'\" + 'gray' + \"'\" + '&gt;S&lt;\/text&gt;&lt;\/svg&gt;\") 16 0, progress';<br \/>\n   } else {<br \/>\n   spo.style.cursor='url(\"data:image\/svg+xml;utf8,&lt;svg xmlns=' + \"'\" + 'http:\/\/www.w3.org\/2000\/svg' + \"'\" + ' width=' + \"'\" + rstis.width + \"'\" + ' height=' + \"'\" + rstis.height + \"'\" + ' viewport=' + \"'\" + '0 0 100 100' + \"'\" + '&gt;&lt;text y=' + \"'\" + '50%' + \"'\" + ' stroke=' + \"'\" + 'gray' + \"'\" + '&gt;O&lt;\/text&gt;&lt;\/svg&gt;\") 16 0, progress';<br \/>\n   }<\/font><br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; to make this &#8220;ever so mild&#8221; makeover of our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html\">SOS Game<\/a> happen involving <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html---GETME\">a changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html---GETME\">sos_game.html<\/a> for interested parties.<\/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\/sos-game-cursor-tutorial\/'>SOS Game Cursor Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sosgpt'>Previous relevant <a target=_blank title='SOS Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/sos-game-primer-tutorial\/'>SOS Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SOS Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.jpg\" title=\"SOS Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SOS Game Primer Tutorial<\/p><\/div>\n<p>Even though it took too long to get to yesterday&#8217;s <a title='Word Find Game Viewport Tutorial' href='#wfgvt'>Word Find Game Viewport Tutorial<\/a>&#8216;s Word Find Game&#8217;s level of satisfaction, for us, it was always going to be worth it, because when you overengineer it can mean cloning off that into another useful web application is a &#8220;paring down&#8221; exercise, more than anything, and this is infinitely easier than &#8220;a reinvention of the wheel&#8221; scenario, especially where it comes to &#8220;cross platform&#8221; game usage &#8220;user experience&#8221; issues.<\/p>\n<p>The fun bit of such an approach, in thinking about what we end up with today is the thought that a &#8230;<\/p>\n<ul>\n<li>Word Find Game &#8230; could be cloned or morphed into a &#8230;<\/li>\n<li>SOS Game<\/li>\n<\/ul>\n<p> &#8230; we remember from our days at high school, in less than a day.   The memory of the SOS Game did not extend to the detail, and so we thank <a target=_blank title='https:\/\/www.bead.game\/games\/traditional\/sos' href='\/\/www.bead.game\/games\/traditional\/sos'>How to Play &#8211; SOS<\/a> for reminders about the status of <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=W4JFIfxPYBw'>diagonality<\/a>, while <i>up versus down<\/i> and <i>forwards versus backwards<\/i> concerns were a bit &#8220;per se&#8221; regarding &#8220;SOS&#8221;!<\/p>\n<p>It was the confluence of one &#8220;onclick&#8221; type event to cover, regarding span elements set out in a grid initialized to a non-breaking space ( ie. &amp;nbsp; ) &#8230;<\/p>\n<ul>\n<li>fill in contents as &#8220;S&#8221;<\/li>\n<li>fill in contents as &#8220;O&#8221;<\/li>\n<\/ul>\n<p> &#8230; that set us to determining for the span &#8220;cell&#8221; click, was it positioned &#8230;<\/p>\n<ul>\n<li>in the top half means &#8220;S&#8221; &#8230; or &#8230;<\/li>\n<li>in the bottom half means &#8220;O&#8221;<\/li>\n<\/ul>\n<p>?  This had us converging <font color=blue>on changes<\/font> to the &#8220;clicks&#8221; mode onclick event Javascript logic &#8230;<\/p>\n<p><code><br \/>\n function didclick(<font color=blue>e, <\/font>spano) {<br \/>\n   <font color=blue>if (document.getElementById('names')) {<br \/>\n   if (document.getElementById('names').value == '' && document.getElementById('names').placeholder.indexOf(',') != -1) {<br \/>\n     document.getElementById('names').value=document.getElementById('names').placeholder;<br \/>\n     \/\/alert(1);<br \/>\n     document.getElementById('numsel').value='' + document.getElementById('names').value.split(',').length;<br \/>\n     \/\/alert(document.getElementById('numsel').value);<br \/>\n     nparrange(document.getElementById('numsel'));<br \/>\n     \/\/alert(11);<br \/>\n     document.getElementById('smore').innerHTML=notify('Your go ' + anames[curplayer]);<br \/>\n   }<br \/>\n   }<br \/>\n   console.log('1');<br \/>\n   if (spano.innerHTML.toLowerCase() == 's' || spano.innerHTML.toLowerCase() == 'o') { return true; }<br \/>\n   console.log('2');<br \/>\n   var rtis=spano.getBoundingClientRect();<br \/>\n   console.log('3');<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       xx = e.touches[0].pageX;<br \/>\n       yy = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       xx = e.touches[0].clientX;<br \/>\n       yy = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        xx = e.clientX;<br \/>\n        yy = e.clientY;<br \/>\n       } else {<br \/>\n        xx = e.pageX;<br \/>\n        yy = e.pageY;<br \/>\n       }<br \/>\n<\/font><br \/>\n<br \/> <br \/>\n   <font color=blue>var thislet=' ';<br \/>\n   var locsubscore=0;<br \/>\n   var thisi=eval(spano.id.replace('span',''));<br \/>\n   if (eval(yy - rtis.top) &lt;= eval(rtis.bottom - yy)) { \/\/ s<br \/>\n     thislet='S';<br \/>\n     spano.innerHTML=thislet;<br \/>\n     spano.style.color='rgb(128,0,128)'; \/\/'#000000';<br \/>\n   } else {<br \/>\n     thislet='O';<br \/>\n     spano.innerHTML=thislet;<br \/>\n     spano.style.color='#0000ff';<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi % 100) &gt;= 2) { \/\/ forwards we are at end<br \/>\n     if ((sb(document.getElementById('span' + eval(-2 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi % 100) &gt;= 1 && eval(thisi % 100) &lt;= 98) { \/\/ forwards we are in the middle<br \/>\n     if ((sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi % 100) &lt;= 97) { \/\/ forwards we are at start<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(2 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   if (updownallowed) {<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 2) { \/\/ down we are at end<br \/>\n     if ((sb(document.getElementById('span' + eval(-200 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 1 && eval(thisi \/ 100) &lt;= 18) { \/\/ down we are in the middle<br \/>\n     if ((sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &lt;= 17) { \/\/ down we are at start<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(200 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n<br \/>\n   if (diagonalsallowed) {<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 2 && eval(thisi % 100) &gt;= 2) { \/\/ diagonally we are at end<br \/>\n     if ((sb(document.getElementById('span' + eval(-202 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   sbs=[];<br \/>\n     if ((sb(document.getElementById('span' + eval(-198 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &gt;= 1 && eval(thisi \/ 100) &lt;= 18 && eval(thisi % 100) &gt;= 1 && eval(thisi % 100) &lt;= 98) { \/\/ diagonally we are in the middle<br \/>\n     if ((sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   sbs=[];<br \/>\n     if ((sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n   if (eval(thisi \/ 100) &lt;= 17 && eval(thisi % 100) &lt;= 97) { \/\/ diagonally we are at start<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(202 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   sbs=[];<br \/>\n     if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(198 + thisi))).innerHTML) == 'SOS') {<br \/>\n      sbord();<br \/>\n      locsubscore++;<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n   sbs=[];<br \/>\n<br \/>\n   if (locsubscore &gt; 0) {<br \/>\n     \/\/alert('locsubscore=' + locsubscore + ' yy=' + yy + ' rtis.top=' + rtis.top + ' rtis.y=' + rtis.y + ' rtis.bottom=' + rtis.bottom);<br \/>\n     changeu=false;<br \/>\n     subscore=locsubscore;<br \/>\n     return cscore('pointer', locsubscore);<br \/>\n   } else {<br \/>\n     subscore=0;<br \/>\n     changeu=true;<br \/>\n     \/\/alert('change');<br \/>\n     return cscore('pointer', 0);<br \/>\n   }<br \/>\n<\/font><br \/>\n<br \/> <br \/>\n   var newi=eval(spano.id.replace('span',''));<br \/>\n   var documentgetSelectiontoString='', revsis='';<br \/>\n   var wlen=0, ijh=0;<br \/>\n   if (setsoftwo.length == 0) {<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n   } else {<br \/>\n       console.log('Newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     if (Math.floor(newi \/ 100) == Math.floor(setsoftwo[0] \/ 100)) {<br \/>\n       wlen=eval(1 + Math.abs(eval(setsoftwo[0] - newi)));<br \/>\n       if (wlen == 3) { \/\/ &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh++) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, but too short.');<br \/>\n     }<br \/>\n<br \/>\n     } else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) {<br \/>\n       if (updownallowed) {<br \/>\n       console.log('up down');<br \/>\n       wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] \/ 100) - Math.floor(newi \/ 100))));<br \/>\n       console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n       if (wlen == 3) { \/\/ &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh+=100) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, need four or more letters.');<br \/>\n     }<br \/>\n<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, no up or downs allowed.');<br \/>\n     }<br \/>\n<br \/>\n     } else if (Math.abs(Math.floor(eval(newi \/ 100)) - Math.floor(eval(setsoftwo[0] \/ 100))) == Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100))) {<br \/>\n       if (diagonalsallowed) {<br \/>\n       console.log('diagonal');<br \/>\n<br \/>\n       wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] \/ 100) - Math.floor(newi \/ 100))));<br \/>\n       console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n       if (wlen == 3) { \/\/ &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh+=eval(eval(Math.max(setsoftwo[0], newi) - Math.min(setsoftwo[0], newi)) \/ eval(-1 + wlen))) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Too short, sorry.');<br \/>\n     }<br \/>\n<br \/>\n       } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     notify('Sorry, no diagonals allowed.');<br \/>\n     }<br \/>\n<br \/>\n     } else {<br \/>\n     document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';<br \/>\n     setsoftwo=[];<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     }<br \/>\n   }<br \/>\n   \/\/alert('id=' + spano.id + ' ' + spano.innerHTML);<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; which on non-mobile platforms compliments the CSS styling &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n span.wunderlay:hover {<br \/>\n    background-image: linear-gradient(to bottom, rgba(128,0,128,0.5) , rgba(0,0,255,0.5));<br \/>\n }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p> &#8230; quite nicely, in a colour coded sense, in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html-GETME\" title=\"sos_game.html\">the &#8220;how we got there&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html-GETME\" title=\"sos_game.html\">sos_game.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html\" title=\"Click picture\">SOS Game<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=myifsos src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.html' style='width:100%;height:1200px;'><\/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\/new-word-find-game-viewport-tutorial\/'>New Word Find Game Viewport Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='wfgvt'>Previous relevant <a target=_blank title='Word Find Game Viewport Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-viewport-tutorial\/'>Word Find Game Viewport Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Word Find Game Viewport Tutorial\"]<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Viewport Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game_viewport.jpg\" title=\"Word Find Game Viewport Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Do you remember the last time at this blog that we simulated the Android <a target=_blank title='Andoid toast information' href='https:\/\/developer.android.com\/reference\/android\/widget\/Toast.html'>\"toast\"<\/a> mobile app temporary message box with <a target=_blank title='Ants Up a Wall Game Toast Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-toast-tutorial\/'>Ants Up a Wall Game Toast Tutorial<\/a>?<\/p>\n\n\n\n\n\n<p>It forms part of our solution regarding ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>mobile device use ...<\/li>\n\n\n\n\n<li>the user using the webpage viewport ...<\/li>\n\n\n\n\n<li>and the device \"spreading\" gesture (ie. opposite to \"pinch\" gesture) to hone in on an area in \"sea of letters\" ... but because they fill the screen this way, and they lose sight of the score we want new ...<\/li>\n\n\n\n\n<li>\"toast\" message box position fixed view of score and status as it changes without the user having to shift their viewing position (looking at their \"sea of letters\" area)<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... that was not in yesterday's <a title='Word Find Game Aesthetics Tutorial' href='#wfgat'>Word Find Game Aesthetics Tutorial<\/a>.<\/p>\n\n\n\n\n\n<p>Here's how this happened, for us, with the code ...<\/p>\n\n\n\n\n\n<table>\n\n\n<tr>\n\n<th>We established a viewport ...<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>\n<code style='font-size:8px;'>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\"  &gt;\n<\/code>\n<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th>We CSS style a \"toast\" class ...<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>\n&lt;style&gt;\n<code style='font-size:8px;'>\n .custom-alert {\n  display: inline-block;\n  \/* visibility: visible; *\/\n  background-color: rgba(102,102,102,0.8);\n  color: #fff;\n  text-align: enter;\n  margin: 5% auto;\n  padding: 12px 28px;\n  opacity: 0.9;\n  z-index: 200;\n }\n<\/code>\n&lt;\/style&gt;\n<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th>We Javascript <font color=blue>initiate<\/font> the \"toast\" instance, featuring \"viewport\" savvy screen positioning, for the webpage and <font color=purple>maintain its visibility status<\/font> ...<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>\n<code style='font-size:8px;'>\n function showIt(what) { \n  var ris=null;\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { \n    if (document.getElementById('custom-alert-1')) {\n      document.getElementById('custom-alert-1').innerHTML=what; \n      document.getElementById('custom-alert-1').style.opacity='0.95';\n      <font color=purple>document.getElementById('custom-alert-1').style.display='inline-block'; \/\/ inline<\/font>\n      \/\/document.getElementById('custom-alert-1').style.visibility='visible';\n      document.getElementById('custom-alert-1').scrollIntoView();\n    } <font color=blue>else if (what == '') {\n      ris=document.getElementById('underlay').getBoundingClientRect();\n      \/\/alert(eval(eval(ris.left + ris.right) \/ 2));\n      document.body.innerHTML+=\"&lt;div id='custom-alert-1' class='custom-alert' style='position:fixed; left: 50%; transform: translate(-50%, -50%); top:50%; display: none;'&gt;\" + what + \"&lt;\/div&gt;\"; \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2861247\/center-aligning-a-fixed-position-div' href='\/\/stackoverflow.com\/questions\/2861247\/center-aligning-a-fixed-position-div'>https:\/\/stackoverflow.com\/questions\/2861247\/center-aligning-a-fixed-position-div<\/a>\n    } else {\n      ris=document.getElementById('underlay').getBoundingClientRect();\n      document.body.innerHTML+=\"&lt;div id='custom-alert-1' class='custom-alert' style='position:fixed; left: 50%; transform: translate(-50%, -50%); top:50%; display: inline-block;'&gt;\" + what + \"&lt;\/div&gt;\";\n    }<\/font>\n    setTimeout(hideIt, 10000);\n  }\n }\n<br \/> \n function hideIt() {\n  <font color=purple>document.getElementById('custom-alert-1').style.display='none';<\/font>\n  \/\/document.getElementById('custom-alert-1').style.visibility='hidden';\n }\n<br \/>\n function lonl() { \/\/ called around onload event\n  document.getElementById('wunderlay').innerHTML=wdebye;   \n  if (documentURL.indexOf('clicks=') != -1) {\n   document.getElementById('cmodeopt').innerHTML='Click';\n   \/\/document.getElementById('wunderlay').innerHTML=wdebye;   \n   document.getElementById('wunderlay').style.display='block';\n   document.getElementById('wunderlay').style.opacity='1.0';\n   document.getElementById('underlay').style.display='none';\n   document.getElementById('seventmode').innerHTML=document.getElementById('seventmode').innerHTML.replace(' highlight ', ' click ');\n   document.getElementById('styleothers').innerHTML='&lt;style&gt; ' + document.head.innerHTML.split('&lt;style&gt;')[1].split('&lt;\/style&gt;')[0].replace(\/Courier\\ New\/g,'Courier').replace(\/ glow\\ 1s\/g,' wglow 1s').replace(\/black\/g,'transparent').replace('#f0f0f0;', '#f0f0f0; text-shadow: -1px 1px 1px #952dff; ') + ' &lt;\/style&gt;';\n  } else {\n   document.getElementById('cmodeopt').innerHTML='Selection';\n  }\n  <font color=blue>showIt('');<\/font>\n }\n<\/code>\n<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th>We Javascript <font color=green>call with content<\/font> modify the \"toast\" instance each time the score changes ...<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>\n<code style='font-size:8px;'>\nfunction notify(what) {\n \/\/alert('anames[0]=' + anames[0] + ' and trysay=' + trysay);\n if (what.trim() != '' && anames[0].replace('Player 1','').trim() != '') {\n  if (what.indexOf('orry') != -1 && what.indexOf(anames[curplayer]) == -1) {\n    if (what.indexOf('.') != -1) {\n      what=what.replace('.', ', ' + anames[curplayer] + '.');\n    } else {\n      what+=', ' + anames[curplayer];\n    }\n  }\n  if (what != lastwhat) {\n  lastwhat=what;\n  setTimeout(lwn, 8000);\n  document.getElementById('notif').src='.\/notifications_ideas.php?scheduledblurb=' + encodeURIComponent(what);\n  if (trysay) {\n    \/\/alert('HTTP:\/\/localhost:8888\/macos_say_record.php?andsoonclose=y&docronwork=say%20' + encodeURIComponent(what));\n    window.open('HTTP:\/\/localhost:8888\/macos_say_record.php?andsoonclose=y&docronwork=say%20' + encodeURIComponent(what), 'sayif', 'top=50,left=50,width=500,height=500');\n  }\n  }\n } <font color=green>else if (what == '') {\n  showIt('Score ' + document.getElementById('score').outerHTML.replace(\/\\ id\\=\/g, ' data-id=').replace(\/\\ on\/g, ' data-on') + ('&nbsp;' + (document.getElementById('smore').innerText || document.getElementById('smore').contentWindow || document.getElementById('smore').contentDocument)).replace('&nbsp;undefined', ''));\n }<\/font>\n return what;\n}\n<br \/>\n function cscore(cursortype, ssc) {\n   var prescore='', spans=[];\n   var ispans=0;\n   if (lastzdebye != zdebye && lastzdebye != zzdebye) {\n   if (ssc != 0) { goes++; }\n   if (ssc &gt; 0) {\n     if (anames[0].replace('Player 1','').trim() != '') {\n       prescore='Well done' + findingnemo + ', ' + anames[curplayer] + '. ';\n     } \n         if (documentURL.indexOf('clicks=') != -1) {\n           spans=document.getElementsByTagName('span');\n           for (ispans=0; ispans&lt;spans.length; ispans++) {\n             if (spans[ispans].innerHTML.length == 1 && ('' + spans[ispans].title) != '') {\n               spans[ispans].style.backgroundColor='lightgreen';\n               spans[ispans].title='';\n             }\n           }\n         }\n     score+=ssc; \n    if (zzdebye.indexOf('&lt;font') != -1) { \/\/ && zdebye.indexOf('&lt;font') == -1) {\n    zdebye=zzdebye;\n    }\n    if (zdebye.indexOf('&lt;font') != -1 && documentURL.indexOf('clicks=') == -1) {\n    if (document.getElementById('underlay').innerHTML.replace(\/\\&lt;br\\&gt;\/g,'').indexOf('&lt;') == -1) {\n    document.getElementById('others').innerHTML+=document.getElementById('underlay').outerHTML.split('&gt;')[0].replace(' id=', ' class=').replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:lightgreen;\"') + '&gt;' + zdebye.replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:lightgreen;\"') + '&lt;\/div&gt;';\n    } else {\n    document.getElementById('others').innerHTML+=document.getElementById('underlay').outerHTML.replace(' id=', ' class=').replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:lightgreen;\"');\n    }\n    }\n   } else {\n     if (anames[0].replace('Player 1','').trim() != '') {\n       prescore='Bad luck, ' + anames[curplayer] + '. ';\n     } \n         if (documentURL.indexOf('clicks=') != -1) {\n           spans=document.getElementsByTagName('span');\n           for (ispans=0; ispans&lt;spans.length; ispans++) {\n             if (spans[ispans].innerHTML.length == 1 && ('' + spans[ispans].title) != '') {\n               spans[ispans].style.backgroundColor='lightgray';\n               spans[ispans].title='';\n             }\n           }\n         }\n    if (zzdebye.indexOf('&lt;font') != -1) { \/\/ && zdebye.indexOf('&lt;font') == -1) {\n    zdebye=zzdebye;\n    \/\/if (document.getElementById('underlay').innerHTML.replace(\/\\&lt;br\\&gt;\/g,'').indexOf('&lt;') == -1) {\n    \/\/alert(zdebye);\n    \/\/}\n    }\n    if (zdebye.indexOf('&lt;font') != -1 && documentURL.indexOf('clicks=') == -1) {\n    if (document.getElementById('underlay').innerHTML.replace(\/\\&lt;br\\&gt;\/g,'').indexOf('&lt;') == -1) {\n    document.getElementById('others').innerHTML+=document.getElementById('underlay').outerHTML.split('&gt;')[0].replace(' id=', ' class=').replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:orange;\"') + '&gt;' + zdebye.replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:orange;\"') + '&lt;\/div&gt;';\n    } else {\n    document.getElementById('others').innerHTML+=document.getElementById('underlay').outerHTML.replace(' id=', ' class=').replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:orange;\"');\n    }\n    }\n   }\n   if (eval('' + ascores.length) == 1 && anames[0].replace('Player 1','').trim() != '' && ssc != 0) {\n   document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);\n   } \n   if (eval('' + ascores.length) &gt; 1) {\n   if (ssc == 0) { \n    subscore=0;\n    lastzdebye=zdebye;\n    zzdebye='';\n    zdebye='';   \n    return 'pointer'; \/\/ ''\n   }\n   ascores[curplayer]=eval('' + score);\n   agoes[curplayer]=eval('' + goes);\n   var cscores='';\n   var cgoes='';\n   var betw='';\n   if (eval(1 + eval('' + curplayer)) &gt;= eval('' + ascores.length)) {  betw='&lt;font color=green&gt;';  }\n   \/\/if (eval('' + curplayer) == eval('' + ascores.length)) {   betw='&lt;font color=green&gt;';  }\n   for (var inp=0; inp&lt;eval('' + ascores.length); inp++) {\n     if (eval('' + eval(1 + curplayer)) == inp) {\n       cscores+=betw + mcs(inp,true,'&lt;font color=green&gt;' + ascores[inp] + '&lt;\/font&gt;');\n       cgoes+=betw + mcs(inp,false,'&lt;font color=green&gt;' + agoes[inp] + '&lt;\/font&gt;');\n       betw=':&lt;font color=red&gt;';\n       if (eval(1 + inp) &gt;= eval('' + ascores.length)) { \n         cscores=mcs(inp,true,'&lt;font color=red&gt;' + cscores.replace(':','&lt;\/font&gt;:'));  \n         cgoes=mcs(inp,false,'&lt;font color=red&gt;' + cgoes.replace(':','&lt;\/font&gt;:'));  \n       }\n     } else {\n       cscores+=mcs(inp,true,betw + ascores[inp] + betw.replace(':','').replace('&lt;font color=red&gt;', '&lt;\/font&gt;').replace('&lt;font color=green&gt;', '&lt;\/font&gt;'));\n       cgoes+=mcs(inp,false,betw + agoes[inp] + betw.replace(':','').replace('&lt;font color=red&gt;', '&lt;\/font&gt;').replace('&lt;font color=green&gt;', '&lt;\/font&gt;'));\n       betw=(':' + betw.replace(':','')).replace('&lt;font color=red&gt;','').replace('&lt;font color=green&gt;','&lt;font color=red&gt;');\n     }\n   }\n   document.getElementById('score').innerHTML='' + cscores + '\/' + cgoes;\n   curplayer++;\n   if (curplayer &gt;= eval('' + ascores.length)) { curplayer=0;  }\n   if (document.getElementById('smore').innerHTML != '' && document.getElementById('smore').innerHTML.indexOf('&lt;') == -1) {\n     if (anames.length &gt; curplayer) {\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);\n     } else if (nameslist.indexOf(',') != -1) {\n     anames=nameslist.split(',');\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);\n     } else if (nameslist.indexOf(' ') != -1) {\n     anames=nameslist.trim().split(' ');\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);\n     } else {\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);\n     }\n   }\n   document.getElementById('curbit').innerHTML='for &lt;font color=green&gt;' + eval(1 + eval('' + curplayer)) + '&lt;\/font&gt; of';\n   score=eval('' + ascores[curplayer]);\n   goes=eval('' + agoes[curplayer]);\n   <font color=green>if (subscore != 0 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {\n    if ('toastisgood' == 'toastisgood') {\n     notify('');\n    } else { \n     document.getElementById('score').scrollIntoView();\n    }\n   }<\/font>\n   } else {\n   ascores[curplayer]=score;\n   agoes[curplayer]=goes;\n   document.getElementById('score').innerHTML='' + mcs(0,true,'' + score) + '\/' + mcs(0,false,'' + goes);\n   <font color=green>if (subscore != 0 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {\n    if ('toastisgood' == 'toastisgood') {\n     notify('');\n    } else { \n     document.getElementById('score').scrollIntoView();\n    }\n   }<\/font>\n   }\n   subscore=0;\n   lastzdebye=zdebye;\n   }\n   zzdebye='';\n   zdebye='';\n   return cursortype;\n }\n<\/code>\n<\/td>\n\n<\/tr>\n\n\n<\/table>\n\n\n\n\n\n<p> ... in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html------GETME\" title=\"word_find_game.html\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html------GETME\" title=\"word_find_game.html\">word_find_game.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\" title=\"Click picture\">Word Find Game<\/a> you can also <a href='#ifwfg'>try once again, below<\/a>.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-viewport-tutorial\/'>Word Find Game Viewport Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfgat'>Previous relevant <a target=_blank title='Word Find Game Aesthetics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-aesthetics-tutorial\/'>Word Find Game Aesthetics Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Aesthetics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game_aesthetics.jpg\" title=\"Word Find Game Aesthetics Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Aesthetics Tutorial<\/p><\/div>\n<p>CSS styling keeps getting better for webpages, with extended functionality, as proven when <a target=_blank title='CSS3' href='https:\/\/www.google.com\/search?q=css3&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=css3&#038;aqs=chrome..69i57j0i512l3j69i65l2j69i61j69i60.4297j0j7&#038;sourceid=chrome&#038;ie=UTF-8'>CSS3<\/a> came to being.   Two styling features we find quite impactive are &#8230;<\/p>\n<ul>\n<li>CSS animation &#8230; and &#8230;<\/li>\n<li>CSS linear gradients<\/li>\n<\/ul>\n<p> &#8230; we use, respectively, regarding &#8230;<\/p>\n<ul>\n<li>&#8220;selection&#8221; textarea and &#8220;click&#8221; div of span elements &#8230; <font color=blue>helping create<\/font> a colour coded border &#8220;glow&#8221; 3D effect &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<font color=blue><br \/>\n \/* Thanks to <a target=_blank title='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text<\/a> *\/<br \/>\n<br \/>\n @-webkit-keyframes glow {<br \/>\n  from {<br \/>\n    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\n @-webkit-keyframes wglow {<br \/>\n  from {<br \/>\n    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #7300e6, 0 0 9px #7300e6, 0 0 11px #7300e6, 0 0 13px #7300e6, 0 0 15px #7300e6;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #a64dff, 0 0 10px #a64dff, 0 0 12px #a64dff, 0 0 14px #a64dff, 0 0 16px #a64dff;<br \/>\n  }<br \/>\n }<\/font><br \/>\n<br \/>\n textarea {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    opacity: 0.9;<br \/>\n    z-index: 9;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 0;<br \/>\n    text-shadow: -1px 1px 1px #952dff;<br \/>\n  <font color=blue>-webkit-animation: glow 1s linear infinite alternate;<br \/>\n  -moz-animation: glow 1s linear infinite alternate;<br \/>\n  animation: glow 1s linear infinite alternate;<\/font><br \/>\n }<br \/>\n<br \/> <br \/>\n #wunderlay {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    opacity: 0.3;<br \/>\n    z-index: 11;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 0;<br \/>\n  <font color=blue>-webkit-animation: glow 1s linear infinite alternate;<br \/>\n  -moz-animation: glow 1s linear infinite alternate;<br \/>\n  animation: glow 1s linear infinite alternate;<\/font><br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; that is dynamically changed to &#8220;wglow&#8221; (and font-family <i>Courier<\/i>) should the user select &#8220;click&#8221; mode of interactive entry\n<\/li>\n<li>background-image CSS property linear gradient background to dropdown and textbox element effect &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n \/* Thanks to <a target=_blank title='https:\/\/medium.com\/thirty-9\/3-tips-for-using-subtle-css-gradients-f5691e453602' href='https:\/\/medium.com\/thirty-9\/3-tips-for-using-subtle-css-gradients-f5691e453602'>https:\/\/medium.com\/thirty-9\/3-tips-for-using-subtle-css-gradients-f5691e453602<\/a> *\/<br \/>\n<br \/>\n body {<br \/>\n   background-image: linear-gradient(to right bottom, #ffffff, #fcfafc, #f9f6f8, #f8f1f3, #f6ecec);<br \/>\n }<br \/>\n<br \/> <br \/>\n #names {<br \/>\n   background-image: linear-gradient(to right bottom, #eeeeee, #ebe9eb, #e8e5e7, #e7e0e2, #e5dbdb);<br \/>\n }<br \/>\n<br \/> <br \/>\n select {<br \/>\n   background-image: linear-gradient(to right bottom, white, yellow, pink, silver, lightgray);<br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>And so, improving on yesterday&#8217;s <a title='Word Find Game Mobile Tutorial' href='#wfgmt'>Word Find Game Mobile Tutorial<\/a> we have in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html-----GETME\" title=\"word_find_game.html\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html-----GETME\" title=\"word_find_game.html\">word_find_game.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\" title=\"Click picture\">Word Find Game<\/a> you can also <a href='#ifwfg'>try, yes, yet again, below<\/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\/word-find-game-aesthetics-tutorial\/'>Word Find Game Aesthetics Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfgmt'>Previous relevant <a target=_blank title='Word Find Game Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-mobile-tutorial\/'>Word Find Game Mobile Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game_click.jpg\" title=\"Word Find Game Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Mobile Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Word Find Game Personalization Tutorial' href='#wfgpt'>Word Find Game Personalization Tutorial<\/a>, and the Word Find Game from versions before all had an unwieldy relationship with mobile platforms.  The &#8230;<\/p>\n<ul>\n<li>selection, via <a target=_blank title='Selection API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Selection_API'>Selection API<\/a>, using HTML textarea, suits non-mobile well &#8230; but we think today&#8217;s newly coded for &#8230;<\/li>\n<li>click, via HTML span element onclick logics, work better on mobile platforms<\/li>\n<\/ul>\n<p> &#8230; and so we&#8217;ve coded for a new dropdown to offer both modus operandi as options, with new &#8220;click&#8221; modus operandi Javascript &#8230;<\/p>\n<p><code><br \/>\n function didclick(spano) {<br \/>\n   var newi=eval(spano.id.replace('span',''));<br \/>\n   var documentgetSelectiontoString='', revsis='';<br \/>\n   var wlen=0, ijh=0;<br \/>\n   if (setsoftwo.length == 0) {<br \/>\n     setsoftwo.push(newi);<br \/>\n     document.getElementById('span' + newi).style.backgroundColor='yellow';<br \/>\n   } else {<br \/>\n       console.log('Newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     if (Math.floor(newi \/ 100) == Math.floor(setsoftwo[0] \/ 100)) {<br \/>\n       wlen=eval(1 + Math.abs(eval(setsoftwo[0] - newi)));<br \/>\n       if (wlen &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh++) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       }<br \/>\n     } else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) {<br \/>\n       if (updownallowed) {<br \/>\n       console.log('up down');<br \/>\n       wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] \/ 100) - Math.floor(newi \/ 100))));<br \/>\n       console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n       if (wlen &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh+=100) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       }<br \/>\n       }<br \/>\n     } else if (Math.abs(Math.floor(eval(newi \/ 100)) - Math.floor(eval(setsoftwo[0] \/ 100))) == Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100))) {<br \/>\n       if (diagonalsallowed) {<br \/>\n       console.log('diagonal');<br \/>\n<br \/>\n       wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] \/ 100) - Math.floor(newi \/ 100))));<br \/>\n       console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n       if (wlen &gt;= 4) {<br \/>\n         for (ijh=Math.min(setsoftwo[0], newi); ijh&lt;=Math.max(setsoftwo[0], newi); ijh+=eval(eval(Math.max(setsoftwo[0], newi) - Math.min(setsoftwo[0], newi)) \/ eval(-1 + wlen))) {<br \/>\n           documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;<br \/>\n           revsis=document.getElementById('span' + ijh).innerHTML + revsis;<br \/>\n           document.getElementById('span' + ijh).style.backgroundColor='orange';<br \/>\n           document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;<br \/>\n           document.getElementById('span' + ijh).style.cursor='progress';<br \/>\n         }<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  findingnemo='';<br \/>\n  if (!backwardsallowed) {<br \/>\n  setTimeout(retry, 2000);<br \/>\n  document.getElementById('nameif').title='';<br \/>\n  } else {<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  }<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  setsoftwo=[];<br \/>\n       }<br \/>\n       }<br \/>\n     } else {<br \/>\n       console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi \/ 100) - Math.floor(setsoftwo[0] \/ 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);<br \/>\n     }<br \/>\n   }<br \/>\n   \/\/alert('id=' + spano.id + ' ' + spano.innerHTML);<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html----GETME\" title=\"word_find_game.html\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html----GETME\" title=\"word_find_game.html\">word_find_game.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\" title=\"Click picture\">Word Find Game<\/a> you can also <a href='#ifwfg'>try, yes, again, below<\/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\/word-find-game-mobile-tutorial\/'>Word Find Game Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfgpt'>Previous relevant <a target=_blank title='Word Find Game Personalization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-personalization-tutorial\/'>Word Find Game Personalization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Underlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game_naming.gif\" title=\"Word Find Game Underlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Personalization Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Word Find Game Modes of Use Tutorial' href='#wfgmut'>Word Find Game Modes of Use Tutorial<\/a> gave us the means by which we could have multiple players in our &#8220;Finding the Word&#8221; game, as a number.  But many users prefer &#8220;names&#8221; to &#8220;numbers&#8221;.  And so &#8230;<\/p>\n<ul>\n<li>we start asking for an optional (comma separated) user name list &#8230; that if used &#8230;<\/li>\n<li>starts looking for <a target=_blank title='Notifications API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API'>Notifications API<\/a> functionality to keep the players informed about proceedings &#8230; and &#8230;<\/li>\n<li>if underlying <a target=_blank title='Navigator' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator'>Navigator API<\/a> <a target=_blank title='navigator.platform' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/platform'>navigator.platform<\/a> points at an underlying macOS operating system, also offer the user the chance to turn notification wording to audio commentary, as well<\/li>\n<\/ul>\n<p> &#8230; as per Javascript &#8230;<\/p>\n<p><code><br \/>\nfunction notify(what) {<br \/>\n if (what.trim() != '' && anames[0].replace('Player 1','').trim() != '') {<br \/>\n  if (what != lastwhat) {<br \/>\n  lastwhat=what;<br \/>\n  setTimeout(lwn, 8000);<br \/>\n  document.getElementById('notif').src='.\/notifications_ideas.php?scheduledblurb=' + encodeURIComponent(what);<br \/>\n  if (trysay) {    \/\/alert('HTTP:\/\/localhost:8888\/macos_say_record.php?andsoonclose=y&docronwork=say%20' + encodeURIComponent(what));<br \/>\n    window.open('HTTP:\/\/localhost:8888\/macos_say_record.php?andsoonclose=y&docronwork=say%20' + encodeURIComponent(what), 'sayif', 'top=50,left=50,width=500,height=500');<br \/>\n  }<br \/>\n  }<br \/>\n }<br \/>\n return what;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; showing two different uses of two different invisible HTML iframe elements &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe id=notif style='display:none;' src=&gt;&lt;\/iframe&gt;<br \/>\n&lt;iframe id=sayif name=sayif style='display:none;' src=&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html---GETME\" title=\"word_find_game.html\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html---GETME\" title=\"word_find_game.html\">word_find_game.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\" title=\"Click picture\">Word Find Game<\/a> you can also <a href='#ifwfg'>try, yet again, below<\/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\/new-word-find-game-personalization-tutorial\/'>Word Find Game Personalization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfgmut'>Previous relevant <a target=_blank title='Word Find Game Modes of Use Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-modes-of-use-tutorial\/'>Word Find Game Modes of Use Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Underlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game_modes.jpg\" title=\"Word Find Game Underlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Modes of Use Tutorial<\/p><\/div>\n<p>Online games often feature &#8230;<\/p>\n<ul>\n<li>degree of difficulty<\/li>\n<li>number of player(s)<\/li>\n<\/ul>\n<p> &#8230; modes of use that the user(s) can control.  And so, with this in mind, to improve on yesterday&#8217;s <a title='Word Find Game Underlay Tutorial' href='#wfgut'>Word Find Game Underlay Tutorial<\/a> we&#8217;ve set out providing ways the users can control these two concepts via two <font color=blue>new<\/font> dropdowns &#8230;<\/p>\n<p><code><br \/>\n&lt;h1&gt;Word Find Game<font color=blue> &lt;select onchange=\"restart(this);\"&gt;&lt;option value=\"hard\"&gt;Hard&lt;\/option&gt;&lt;option value=\"easy\"&gt;Easy&lt;\/option&gt;&lt;option value=\"easier\"&gt;Easier&lt;\/option&gt;&lt;option value=\"easiest\"&gt;Easiest&lt;\/option&gt;&lt;\/select&gt; &lt;span id=curbit&gt;for&lt;\/span&gt; &lt;select id=numsel onchange='nparrange(this);'&gt;&lt;option value=1&gt;1 player&lt;\/option&gt;&lt;option value=2&gt;2 players&lt;\/option&gt;&lt;option value=3&gt;3 players&lt;\/option&gt;&lt;option value=4&gt;4 players&lt;\/option&gt;&lt;option value=5&gt;5 players&lt;\/option&gt;&lt;\/select&gt;<\/font>&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; along with a span element showing the current player number all within that topmost h1 element, and helped out by two <font color=blue>new<\/font> dropdown (ie. select element) onchange event Javascript logics &#8230;<\/p>\n<p><code><br \/>\n <font color=blue>var numplayers=1;<br \/>\n var curplayer=0;<br \/>\n var ascores=[0], agoes=[0];<br \/>\n var backwardsallowed=true;<br \/>\n var updownallowed=true;<br \/>\n var diagonalsallowed=true;<\/font><br \/>\n var zdebye='';<br \/>\n var zzdebye='';<br \/>\n var lastzdebye='';<br \/>\n var goutstris='';<br \/>\n var delayis=0;<br \/>\n var sofar=';';<br \/>\n var score=0, goes=0, subscore=0;<br \/>\n <br \/>\n  <font color=blue>function nparrange(sio) {<br \/>\n   if (eval('' + sio.value) &gt; eval('' + ascores.length)) {<br \/>\n     while (eval('' + sio.value) &gt; eval('' + ascores.length)) {<br \/>\n       ascores.push(0);<br \/>\n       agoes.push(0);<br \/>\n     }<br \/>\n     numplayers=eval('' + ascores.length);<br \/>\n     document.getElementById('curbit').innerHTML='for &lt;font color=green&gt;' + eval(1 + eval('' + curplayer)) + '&lt;\/font&gt; of';<br \/>\n  if (eval('' + ascores.length) &gt; 1) {<br \/>\n   var cscores='';<br \/>\n   var cgoes='';<br \/>\n   var betw='';<br \/>\n   \/\/if (eval(0 + eval('' + curplayer)) == 0) { betw='&lt;font color=red&gt;';  }<br \/>\n   if (eval(1 + eval('' + curplayer)) &gt;= eval('' + ascores.length)) { betw='&lt;font color=red&gt;';  }<br \/>\n   for (var inp=0; inp&lt;eval('' + ascores.length); inp++) {<br \/>\n     if (eval('' + curplayer) == inp) {<br \/>\n       cscores+=betw + '&lt;font color=green&gt;' + ascores[inp] + '&lt;\/font&gt;';<br \/>\n       cgoes+=betw + '&lt;font color=green&gt;' + agoes[inp] + '&lt;\/font&gt;';<br \/>\n       betw=':&lt;font color=red&gt;';<br \/>\n     } else {<br \/>\n       cscores+=betw + ascores[inp] + betw.replace(':','').replace('&lt;font color=red&gt;', '&lt;\/font&gt;').replace('&lt;font color=green&gt;', '&lt;\/font&gt;');<br \/>\n       cgoes+=betw + agoes[inp] + betw.replace(':','').replace('&lt;font color=red&gt;', '&lt;\/font&gt;').replace('&lt;font color=green&gt;', '&lt;\/font&gt;');<br \/>\n       \/\/betw=':';<br \/>\n       betw=(':' + betw.replace(':','')).replace('&lt;font color=red&gt;','').replace('&lt;font color=green&gt;','&lt;font color=red&gt;');<br \/>\n     }<br \/>\n     console.log('numplayers=' + numplayers + ' at ' + inp + ' vs curplayer=' + curplayer + ' ' + cscores + '\/' + cgoes);<br \/>\n   }<br \/>\n   document.getElementById('score').innerHTML='' + cscores + '\/' + cgoes;<br \/>\n   \/\/curplayer++;<br \/>\n   \/\/if (curplayer &gt;= eval('' + ascores.length)) { curplayer=0;  }<br \/>\n   \/\/scores=ascores[curplayer];<br \/>\n   \/\/goes=agoes[curplayer];<br \/>\n   }<br \/>\n      }<br \/>\n }<br \/>\n <br \/>\n function restart(sio) {<br \/>\n   var myblurb=document.getElementById('blurb').innerHTML; \/\/ Forwards, backwards, up, down, diagonal 4 letters or more highlight below<br \/>\n   var setn=[8,1,1,3,11,1,2,1,8,0,0,3,1,5,7,1,0,5,3,5,3,1,1,0,1,0];<br \/>\n   if (sio.value == 'hard') { location.href=document.URL; }<br \/>\n   if (sio.value != 'hard' && eval('' + letters.length) == 26) {<br \/>\n     myblurb=myblurb.replace(' letters ', ' more common set of letters ');<br \/>\n     \/\/ A-9, B-2, C-2, D-4, E-12, F-2, G-3, H-2, I-9, J-1, K-1, L-4, M-2, N-6, O-8, P-2, Q-1, R-6, S-4, T-6, U-4, V-2, W-2, X-1, Y-2, Z-1<br \/>\n     var kbye=eval('' + letters.length);<br \/>\n     for (ibye=0; ibye&lt;kbye; ibye++) {<br \/>\n     for (jbye=1; jbye&lt;=setn[ibye]; jbye++) {<br \/>\n     letters.push(letters[ibye]);<br \/>\n     }<br \/>\n     }<br \/>\n   }<br \/>\n   if (sio.value == 'easiest') {<br \/>\n     myblurb=myblurb.replace(', diagonal', '');<br \/>\n     myblurb=myblurb.replace(', up, down', '');<br \/>\n     myblurb=myblurb.replace(', backwards', '');<br \/>\n     backwardsallowed=false;<br \/>\n     updownallowed=false;<br \/>\n     diagonalsallowed=false;<br \/>\n   }<br \/>\n   if (sio.value == 'easier') {<br \/>\n     myblurb=myblurb.replace(', diagonal', '');<br \/>\n     myblurb=myblurb.replace(', up, down', '');<br \/>\n     myblurb=myblurb.replace('Forwards 4', 'Forwards, backwards 4');<br \/>\n     backwardsallowed=true;<br \/>\n     updownallowed=false;<br \/>\n     diagonalsallowed=false;<br \/>\n   }<br \/>\n   if (sio.value == 'easy') {<br \/>\n     myblurb=myblurb.replace('Forwards 4', 'Forwards, backwards, up, down, diagonal 4');<br \/>\n     myblurb=myblurb.replace('Forwards, backwards 4', 'Forwards, backwards, up, down, diagonal 4');<br \/>\n     backwardsallowed=true;<br \/>\n     updownallowed=true;<br \/>\n     diagonalsallowed=true;<br \/>\n   }<br \/>\n document.getElementById('blurb').innerHTML=myblurb;<br \/>\n ebye='';<br \/>\n ibye=0;<br \/>\n jbye=0;<br \/>\n debye='';<br \/>\n aletter=' ';<br \/>\n for (ibye=0; ibye&lt;20; ibye++) {<br \/>\n for (jbye=0; jbye&lt;100; jbye++) {<br \/>\n aletter=letters[Math.floor(Math.random() * letters.length)];<br \/>\n ebye+=aletter;<br \/>\n debye+=aletter;<br \/>\n }<br \/>\n ebye+=String.fromCharCode(10);<br \/>\n debye+='&lt;br&gt;';<br \/>\n }<br \/>\n zdebye='';<br \/>\n zzdebye='';<br \/>\n lastzdebye='';<br \/>\n goutstris='';<br \/>\n delayis=0;<br \/>\n sofar=';';<br \/>\n document.getElementById('mytao').value=ebye;<br \/>\n var divs=document.getElementsByTagName('div');<br \/>\n for (kdivs=0; kdivs&lt;divs.length; kdivs++) {<br \/>\n   divs[kdivs].innerHTML='';<br \/>\n }<br \/>\n document.getElementById('underlay').innerHTML=debye;<br \/>\n<br \/>\n }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; to help encourage some optional collaboration aspects to <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html--GETME\" title=\"word_find_game.html--GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html--GETME\" title=\"word_find_game.html\">word_find_game.html<\/a> Word Find Game you can also <a href='#ifwfg'>try, again, below<\/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\/word-find-game-modes-of-use-tutorial\/'>Word Find Game Modes of Use Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfgut'>Previous relevant <a target=_blank title='Word Find Game Underlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-underlay-tutorial\/'>Word Find Game Underlay Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Underlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_gameunderlay.jpg\" title=\"Word Find Game Underlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Underlay Tutorial<\/p><\/div>\n<p>If you are a regular reader at this blog, you will know we discuss the CSS styling idea of &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">overlay<\/a> &#8230; much more than &#8230;<\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=underlay\">underlay<\/a><\/li>\n<\/ul>\n<p> &#8230; but there is essentially only the difference in the control of <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>&#8220;z-index&#8221;<\/a> (and maybe <a target=_blank title='CSS opacity information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>&#8220;opacity&#8221;<\/a>) property different about the concepts, and to deploy to improve on for the start we made with yesterday&#8217;s <a title='Word Find Game Primer Tutorial' href='#wfgpt'>Word Find Game Primer Tutorial<\/a>.<\/p>\n<p>&#8220;Underlay&#8221; usefulness, to us, goes like this &#8230;<\/p>\n<ul>\n<li>what you &#8220;underlay&#8221; &#8230; for us within <font color=blue>the new<\/font> CSS styling &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n textarea {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    <font color=blue>opacity: 0.9;<br \/>\n    z-index: 9;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 0;<\/font><br \/>\n }<br \/>\n <font color=blue><br \/>\n #underlay {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    opacity: 0.3;<br \/>\n    z-index: 1;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 0;<br \/>\n }<br \/>\n <br \/>\n div.underlay {<br \/>\n    font-family: Courier New;<br \/>\n    font-size: 20px;<br \/>\n    opacity: 0.3;<br \/>\n    z-index: 2;<br \/>\n    padding: 0 0 0 0;<br \/>\n    margin: 0 0 0 0;<br \/>\n }<\/font><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; regimen &#8230;\n<\/li>\n<li>has nothing to do with interactive entry, which should be more in your &#8220;overlay&#8221; thinking, else the user is stumped &#8230; but &#8230;<\/li>\n<li>can help with dynamically enhanced markup jobs that value add to the aesthetics of the webpage<\/li>\n<\/ul>\n<p> &#8230; specifically showing the user &#8220;where they&#8217;ve been&#8221; amongst the &#8220;sea of letters&#8221; of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html-GETME\" title=\"word_find_game.html-GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html-GETME\" title=\"word_find_game.html-GETME\">word_find_game.html<\/a> Word Find Game you can also <a href='#ifwfg'>try below<\/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\/word-find-game-underlay-tutorial\/'>Word Find Game Underlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfgpt'>Previous relevant <a target=_blank title='Word Find Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-primer-tutorial\/'>Word Find Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Word Find Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.jpg\" title=\"Word Find Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s &#8220;Word Find Game&#8221; gets its inspirations from two sources &#8230;<\/p>\n<ul>\n<li>remembering those word find games you might find in the Sunday newspapers &#8230; and as a coding basis &#8230;<\/li>\n<li>textarea and <a target=_blank title='Selection API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Selection_API'>Selection API<\/a> user interface you can prepare for by reading yesterday&#8217;s <a title='Selection API and Clipboard API Tutorial' href='#sapicapit'>Selection API and Clipboard API Tutorial<\/a><\/li>\n<\/ul>\n<p>Today we just do the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html_GETME\" title=\"word_find_game.html\">&#8220;proof of concept&#8221; first draft word_find_game.html<\/a>, because the Selection API highlighting really suits &#8230;<\/p>\n<ul>\n<li>horizontal forwards<\/li>\n<li>horizontal backwards<\/li>\n<\/ul>\n<p> &#8230; word finding in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.html\" title=\"Click picture\">the game<\/a>, but we also want to allow for &#8230;<\/p>\n<ul>\n<li>vertical down<\/li>\n<li>vertical up<\/li>\n<li>diagonal right down<\/li>\n<li>diagonal right up<\/li>\n<li>diagonal left down<\/li>\n<li>diagonal left up<\/li>\n<\/ul>\n<p> &#8230; which can be handled, but in a pretty kludgy way &#8230;<\/p>\n<p><code><br \/>\n function retry() {<br \/>\n   if (('' + document.getElementById('nameif').title).trim() != '') {<br \/>\n     document.getElementById('nameif').src=document.getElementById('nameif').title;<br \/>\n     document.getElementById('nameif').title='';<br \/>\n   } else {<br \/>\n     document.getElementById('mytao').style.cursor=cscore('pointer', subscore);<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function cscore(cursortype, ssc) {<br \/>\n   if (ssc != 0) { goes++; }<br \/>\n   if (ssc &gt; 0) { score+=ssc; }<br \/>\n   document.getElementById('score').innerHTML='' + score + '\/' + goes;<br \/>\n   subscore=0;<br \/>\n   return cursortype;<br \/>\n }<br \/>\n<br \/> <br \/>\n function checkname(iois, iserror) {<br \/>\n  var ifnd=-1, newname='';<br \/>\n  var revsisc='', jrev=0;<br \/>\n console.log('checkname1');<br \/>\n  if (iserror) {<br \/>\n  if (iois.src.indexOf('second=') == -1 && iois.src.indexOf('iswordthere=') != -1) {<br \/>\n            if (('' + iois.title).trim() != '') {<br \/>\n   \/\/document.getElementById('mytao').style.cursor='pointer';<br \/>\n  document.body.title='';<br \/>\n            iois.src=iois.title;<br \/>\n            iois.title='';<br \/>\n            } else {<br \/>\n          \/\/alert(1);<br \/>\n  for (jrev=eval(-1 + eval('' + decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).length)); jrev&gt;=0; jrev--) {<br \/>\n    revsisc+=decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).substring(jrev, eval(1 + jrev));<br \/>\n  }<br \/>\n             \/\/alert('Newname=' + revsisc);<br \/>\n  document.body.title='';<br \/>\n            iois.title='';<br \/>\n            iois.src=iois.src.split('iswordthere=')[0] + 'second=y&iswordthere=' + encodeURIComponent(revsisc);<br \/>\n            }<br \/>\n  } else {<br \/>\n   document.getElementById('mytao').style.cursor=cscore('pointer', subscore);<br \/>\n  }<br \/>\n  } else {<br \/>\n  if (iois != null) {<br \/>\n    ifnd=iois.src.indexOf('iswordthere=');<br \/>\n  console.log('checkname2 ' + ifnd);<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null && ifnd != -1) {<br \/>\n  console.log('checkname3 ' + ifnd);<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n  console.log('checkname4 ' + ifnd);<br \/>\n          if (aconto.body.innerHTML.indexOf('&lt;\/p&gt;') != -1 && aconto.body.innerHTML.indexOf('&gt;&lt;\/p&gt;') == -1) {<br \/>\n  document.body.title='';<br \/>\n            iois.title='';<br \/>\n   document.getElementById('mytao').style.cursor=cscore('pointer', Math.abs(subscore));<br \/>\n            console.log('Found name ' + aconto.body.innerHTML.split('&lt;\/p&gt;')[0].split('&gt;')[eval(-1 + aconto.body.innerHTML.indexOf('&lt;\/p&gt;')[0].split('&gt;').length)]);<br \/>\n          } else if (aconto.body.innerHTML.indexOf('&lt;') == -1 && aconto.body.innerHTML.trim() != '') {<br \/>\n  document.body.title='';<br \/>\n            iois.title='';<br \/>\n   document.getElementById('mytao').style.cursor=cscore('pointer', Math.abs(subscore));<br \/>\n            console.log('Found name ' + aconto.body.innerHTML);<br \/>\n          } else if (iois.src.indexOf('second=') == -1 && iois.src.indexOf('iswordthere=') != -1) {<br \/>\n            if (('' + iois.title).trim() != '') {<br \/>\n   \/\/document.getElementById('mytao').style.cursor='pointer';<br \/>\n  document.body.title='';<br \/>\n            iois.src=iois.title;<br \/>\n            iois.title='';<br \/>\n            } else {<br \/>\n          \/\/alert(1);<br \/>\n  for (jrev=eval(-1 + eval('' + decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).length)); jrev&gt;=0; jrev--) {<br \/>\n    revsisc+=decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).substring(jrev, eval(1 + jrev));<br \/>\n  }<br \/>\n             \/\/alert('Newname=' + revsisc);<br \/>\n  document.body.title='';<br \/>\n            iois.title='';<br \/>\n            iois.src=iois.src.split('iswordthere=')[0] + 'second=y&iswordthere=' + encodeURIComponent(revsisc);<br \/>\n            }<br \/>\n          } else {<br \/>\n   document.getElementById('mytao').style.cursor=cscore('pointer', subscore);<br \/>\n          }<br \/>\n       } else {<br \/>\n  console.log('checkname5 ' + ifnd);<br \/>\n          \/\/alert('WhY?');<br \/>\n   document.getElementById('mytao').style.cursor=cscore('pointer', subscore);<br \/>\n       }<br \/>\n    } else if (ifnd != -1) {<br \/>\n  console.log('checkname6 ' + ifnd);<br \/>\n      ifnd=ifnd;<br \/>\n      if (iois.src.indexOf('second=') == -1 && iois.src.indexOf('iswordthere=') != -1) {<br \/>\n          \/\/alert(11);<br \/>\n  for (jrev=eval(-1 + eval('' + decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).length)); jrev&gt;=0; jrev--) {<br \/>\n    revsisc+=decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).substring(jrev, eval(1 + jrev));<br \/>\n  }<br \/>\n             \/\/alert('newname=' + revsisc);<br \/>\n          iois.src=iois.src.split('iswordthere=')[0] + 'second=y&iswordthere=' + encodeURIComponent(revsisc);<br \/>\n      } else {<br \/>\n   document.getElementById('mytao').style.cursor=cscore('pointer', subscore);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n }<br \/>\n<br \/> <br \/>\nfunction getmltrans(instris) {<br \/>\n  goutstris='';<br \/>\n  outstris=instris;<br \/>\n  var ebay=ebye, jb=0, kb=2;<br \/>\n  while (outstris.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n    outstris=outstris.replace(\/\\ \/g,'').replace(String.fromCharCode(10),'');<br \/>\n  }<br \/>\n  while (ebay.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n    ebay=ebay.replace(\/\\ \/g,'').replace(String.fromCharCode(10),'');<br \/>\n  }<br \/>\n  var linesare=instris.split(String.fromCharCode(10));<br \/>\n  var xlinesare=ebye.split(String.fromCharCode(10));<br \/>\n  if (eval('' + linesare.length) == 1) { return outstris; }<br \/>\n  if (eval('' + linesare.length) &gt; 3) {<br \/>\n  var onepos=ebay.indexOf(outstris);<br \/>\n  var startpos=eval(onepos % 100);<br \/>\n  var endpos=eval(eval(onepos + eval('' + outstris.length)) % 100);<br \/>\n  var izero=Math.floor(onepos \/ 100);<br \/>\n  if (startpos &gt; endpos) {<br \/>\n    if (eval(startpos - eval(-2 + eval('' + linesare.length))) == endpos) {<br \/>\n    outstris=xlinesare[izero].substring(startpos, eval(1 + startpos));<br \/>\n    \/\/alert('first character is ' + outstris + ' is startpos=' + startpos + ' in xlinesare[' + izero + ']=' + xlinesare[izero]);<br \/>\n    izero++;<br \/>\n    for (jb=izero; jb&lt;xlinesare.length; jb++) {<br \/>\n      if (kb &lt;= eval('' + linesare.length)) {<br \/>\n      startpos--;<br \/>\n      outstris+=xlinesare[jb].substring(startpos, eval(1 + startpos));<br \/>\n      }<br \/>\n      kb++;<br \/>\n    }<br \/>\n    goutstris=outstris;<br \/>\n    delayis=500;<br \/>\n    setTimeout(afterbit, delayis);<br \/>\n  \/\/alert('izero=' + izero + ' ' + outstris + ' left diagonal string potentially ' + linesare.length + ' long starting at ' + eval(onepos % 100) + ' and ending at ' + endpos);<br \/>\n    } else {<br \/>\n    outstris='';<br \/>\n    }<br \/>\n  } else {<br \/>\n    if (eval(endpos - eval(-2 + eval('' + linesare.length))) == startpos) {<br \/>\n    outstris=xlinesare[izero].substring(startpos, eval(1 + startpos));<br \/>\n    izero++;<br \/>\n    for (jb=izero; jb&lt;xlinesare.length; jb++) {<br \/>\n      if (kb &lt;= eval('' + linesare.length)) {<br \/>\n      startpos++;<br \/>\n      outstris+=xlinesare[jb].substring(startpos, eval(1 + startpos));<br \/>\n      }<br \/>\n      kb++;<br \/>\n    }<br \/>\n    goutstris=outstris;<br \/>\n    delayis=500;<br \/>\n    setTimeout(afterbit, delayis);<br \/>\n  \/\/alert(outstris + ' right diagonal string potentially ' + linesare.length + ' long starting at ' + eval(onepos % 100) + ' and ending at ' + endpos);<br \/>\n    } else if (eval(-1 + endpos) == startpos) {<br \/>\n    outstris=xlinesare[izero].substring(startpos, eval(1 + startpos));<br \/>\n    izero++;<br \/>\n    for (jb=izero; jb&lt;xlinesare.length; jb++) {<br \/>\n      if (kb &lt;= eval('' + linesare.length)) {<br \/>\n      outstris+=xlinesare[jb].substring(startpos, eval(1 + startpos));<br \/>\n      }<br \/>\n      kb++;<br \/>\n    }<br \/>\n    goutstris=outstris;<br \/>\n    delayis=500;<br \/>\n    setTimeout(afterbit, delayis);<br \/>\n   \/\/alert('izero=' + izero + ' ' + outstris + ' up or down');<br \/>\n    } else {<br \/>\n    outstris='';<br \/>\n    }<br \/>\n  }<br \/>\n  \/\/alert('string potentially ' + linesare.length + ' long starting at ' + eval(onepos % 100) + ' and ending at ' + eval(eval(onepos + eval('' + outstris.length)) % 100));<br \/>\n  }<br \/>\n<br \/> <br \/>\n  return outstris;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction afterbit() {<br \/>\n  if (goutstris == '') { return ''; }<br \/>\n  var revsis='';<br \/>\n  var documentgetSelectiontoString=goutstris;<br \/>\n  if (eval('' + documentgetSelectiontoString.length) &gt;= 4) {<br \/>\n  goutstris='';<br \/>\n  \/\/document.getElementById('emailsms').style.display='table-cell';<br \/>\n  document.getElementById('mytao').title=documentgetSelectiontoString;<br \/>\n  aemailurl=origemailurl + encodeURIComponent(documentgetSelectiontoString);<br \/>\n  document.getElementById('aemail').href=aemailurl;<br \/>\n  asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + documentgetSelectiontoString);<br \/>\n  document.getElementById('asms').href=asmsurl;<br \/>\n  for (var irev=eval(-1 + eval('' + documentgetSelectiontoString.length)); irev&gt;=0; irev--) {<br \/>\n    revsis+=documentgetSelectiontoString.substring(irev, eval(1 + irev));<br \/>\n  }<br \/>\n  console.log(documentgetSelectiontoString);<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  console.log('..\/PHP\/surprise.php?min=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&max=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + documentgetSelectiontoString.toLowerCase());<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  } else {<br \/>\n  document.getElementById('mytao').style.cursor='not-allowed';<br \/>\n  document.body.title='Already tried.';<br \/>\n  }<br \/>\n  return goutstris;<br \/>\n}<br \/>\n <br \/> <br \/>\n\/\/ addEventListener version<br \/>\ndocument.addEventListener('selectionchange', () =&gt; {<br \/>\n  var revsis='';<br \/>\n  var documentgetSelectiontoString=getmltrans(document.getSelection().toString());<br \/>\n  if (eval('' + documentgetSelectiontoString.length) &gt;= 4) {<br \/>\n  if (sofar.indexOf(';' + documentgetSelectiontoString + ';') == -1) {<br \/>\n  sofar+=documentgetSelectiontoString + ';';<br \/>\n  if (goutstris == '') {<br \/>\n  \/\/document.getElementById('emailsms').style.display='table-cell';<br \/>\n  document.getElementById('mytao').title=documentgetSelectiontoString;<br \/>\n  aemailurl=origemailurl + encodeURIComponent(documentgetSelectiontoString);<br \/>\n  document.getElementById('aemail').href=aemailurl;<br \/>\n  asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + documentgetSelectiontoString);<br \/>\n  document.getElementById('asms').href=asmsurl;<br \/>\n  for (var irev=eval(-1 + eval('' + documentgetSelectiontoString.length)); irev&gt;=0; irev--) {<br \/>\n    revsis+=documentgetSelectiontoString.substring(irev, eval(1 + irev));<br \/>\n  }<br \/>\n  console.log(documentgetSelectiontoString);<br \/>\n  subscore=eval(0 - eval('' + documentgetSelectiontoString.length));<br \/>\n  console.log('..\/PHP\/surprise.php?min=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&max=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + documentgetSelectiontoString.toLowerCase());<br \/>\n  setTimeout(retry, 8000);<br \/>\n  document.getElementById('mytao').style.cursor='progress';<br \/>\n  document.getElementById('nameif').title='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);<br \/>\n  document.getElementById('nameif').src='..\/PHP\/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());<br \/>\n  }<br \/>\n  } else {<br \/>\n  goutstris='';<br \/>\n  document.getElementById('mytao').style.cursor='not-allowed';<br \/>\n  document.body.title='Already tried.';<br \/>\n  }<br \/>\n  }<br \/>\n});<br \/>\n<br \/> <br \/>\n\/\/ addEventListener version<br \/>\ndocument.addEventListener('selectstart', () =&gt; {<br \/>\n  document.getElementById('mytao').title='';<br \/>\n  aemailurl=origemailurl;<br \/>\n  asmsurl=origsmsurl;<br \/>\n  document.getElementById('mytao').style.cursor=cscore('pointer', subscore);<br \/>\n  document.body.title='';<br \/>\n  console.log('Selection started');<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; just relying on Selection API text highlighting in an HTML textarea element.  Other ideas to improve await for follow up versions!<\/p>\n<p><iframe id=ifwfg src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game.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\/word-find-game-primer-tutorial\/'>Word Find Game Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sapicapit'>Previous relevant <a target=_blank title='Selection API and Clipboard API Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/selection-api-and-clipboard-api-tutorial\/'>Selection API and Clipboard API Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Selection API and Clipboard API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/selection_api_test.gif\" title=\"Selection API and Clipboard API Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Selection API and Clipboard API Tutorial<\/p><\/div>\n<p>There&#8217;s the &#8230;<\/p>\n<ul>\n<li>clipboard, the &#8220;cut and copy and paste ideas&#8221;, for text, as we showed you with <a title='Clipboard API Image Tutorial' href='#capiit'>Clipboard API Image Tutorial<\/a> and <a target=_blank title='Clipboard API Primer Tutorial' href='#capipt'>Clipboard API Primer Tutorial<\/a> &#8230; but there&#8217;s also the bit before you reach the clipboard using the &#8230;<\/li>\n<li>text selection (ie. the bit of text you highlight using your mouse or touchpad) &#8230; accessible, today, via our introduction to the <a target=_blank title='Selection API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Selection_API'>Selection API<\/a><\/li>\n<\/ul>\n<p> &#8230; using HTML <font color=blue>changed code<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>&lt;table&gt;&lt;tr&gt;&lt;td&gt;<\/font>&lt;textarea id=mytao class=editor rows=7 cols=120 onmousedown=\"mustnot=true;  setTimeout(mnoff, 2000);\" ontouchstart=\"mustnot=true;  setTimeout(mnoff, 2000);\"&gt;&lt;\/textarea&gt;<font color=blue>&lt;\/td&gt;&lt;\/TR&gt;&lt;TR&gt;&lt;td id=emailsms style=display:none;vertical-align:top;&gt;&nbsp;&lt;a target=_blank href='mailto:?subject=My%20Selection%20...&body=' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&nbsp;&lt;a target=_blank onmouseover=\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\" ontouchstart=\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\" href='sms:&body=My%20Selection%20...' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<\/font>&lt;br&gt;&lt;br&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; supported by new Javascript event interventional code &#8230;<\/p>\n<p><code><br \/>\n var origemailurl='mailto:?subject=My%20Selection%20...&body=';<br \/>\n var origsmsurl='sms:&body=My%20Selection%20...';<br \/>\n var smsee='';<br \/>\n<br \/>\n\/\/ addEventListener version<br \/>\ndocument.addEventListener('selectionchange', () => {<br \/>\n  document.getElementById('emailsms').style.display='table-cell';<br \/>\n  document.getElementById('mytao').title=document.getSelection().toString();<br \/>\n  aemailurl=origemailurl + encodeURIComponent(document.getSelection().toString());<br \/>\n  document.getElementById('aemail').href=aemailurl;<br \/>\n  asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + document.getSelection().toString());<br \/>\n  document.getElementById('asms').href=asmsurl;<br \/>\n  console.log(document.getSelection().toString());<br \/>\n});<br \/>\n<br \/>\n\/\/ addEventListener version<br \/>\ndocument.addEventListener('selectstart', () => {<br \/>\n  document.getElementById('mytao').title='';<br \/>\n  aemailurl=origemailurl;<br \/>\n  asmsurl=origsmsurl;<br \/>\n  console.log('Selection started');<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; to be able to share your highlighted text snippets via email or SMS in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html--GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htmlGETME\" title=\"clipboard_api_test.html\">clipboard_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\">Selection API usage web application<\/a> you can also try <a href='#myifca'>below<\/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\/selection-api-and-clipboard-api-tutorial\/'>Selection API and Clipboard API Tutorial<\/a>.<\/p-->\n<hr>\n<p id='capiit'>Previous relevant <a target=_blank title='Clipboard API Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-image-tutorial\/'>Clipboard API Image Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clipboard API Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test_media.jpg\" title=\"Clipboard API Image Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clipboard API Image Tutorial<\/p><\/div>\n<p>Yes, yesterday&#8217;s <a title='Clipboard API Primer Tutorial' href='#capipt'>Clipboard API Primer Tutorial<\/a>&#8216;s <a target=_blank title='Clipboard API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API'>Clipboard API<\/a> usages just involved &#8230;<\/p>\n<ul>\n<li>text based data &#8230; and today we turn our attention to &#8230;<\/li>\n<li>image based data<\/li>\n<\/ul>\n<p> &#8230; to extend the functionality and interest of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html-GETME\" title=\"clipboard_api_test.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html-GETME\" title=\"clipboard_api_test.htm\">clipboard_api_test.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm\" title=\"Click picture\">proof of concept<\/a><br \/>\n text and image clipboard using webpage.<\/p>\n<p>It&#8217;s lucky for us that there are so many good resources out there to help, one link of real interest, for us, being <a target=_blank title='Excellent link' href='https:\/\/stackoverflow.com\/questions\/6333814\/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c'>this excellent link<\/a>, thanks, getting us to use this new Javascript function &#8230;<\/p>\n<p><code><br \/>\nasync function pasteImage() {<br \/>\n  \/\/event.stopPropagation();<br \/>\n  try {<br \/>\n    const permission = await navigator.permissions.query({ name: 'clipboard-read' });<br \/>\n    if (permission.state === 'denied') {<br \/>\n      throw new Error('Not allowed to read clipboard.');<br \/>\n    }<br \/>\n    const clipboardContents = await navigator.clipboard.read();<br \/>\n    for (const item of clipboardContents) {<br \/>\n      if (!item.types.includes('image\/png')) {<br \/>\n        throw new Error('Clipboard contains non-image data.');<br \/>\n      }<br \/>\n      const blob = await item.getType('image\/png');<br \/>\n      imgz = new Image();<br \/>\n      anothercell();<br \/>\n      imgz.onload = () => {<br \/>\n        destinationImage.style.width='' + imgz.width + 'px';<br \/>\n        destinationImage.style.height='' + imgz.height + 'px';<br \/>\n        prevw=eval('' + ('' + cnv.style.width).replace('px',''));<br \/>\n        prevh=eval('' + ('' + cnv.style.height).replace('px',''));<br \/>\n        console.log('canvas width becomes ' + eval('' + cnv.width) + ' + ' + eval('' + imgz.width) + ' = ' + '' + eval(eval('' + cnv.width) + eval('' + imgz.width)) + 'px');<br \/>\n        cnv.style.width='' + eval(eval('' + ('' + cnv.style.width).replace('px','')) + eval('' + imgz.width)) + 'px';<br \/>\n        cnv.style.height='' + eval(eval('' + ('' + cnv.style.height).replace('px','')) + eval('' + imgz.height)) + 'px';<br \/>\n        cnv.width='' + ('' + cnv.style.width).replace('px','') + 'px';<br \/>\n        cnv.height='' + ('' + cnv.style.height).replace('px','') + 'px';<br \/>\n      if (mmode == 'mbefore' || 1 == 1) {<br \/>\n      ctx.drawImage(imgz, prevw, prevh);<br \/>\n      if (wo) {<br \/>\n        wo.close();<br \/>\n        wo=null;<br \/>\n      }<br \/>\n      cnv.style.display='block';<br \/>\n      \/\/wo=window.open('','_blank','top=50,left=50,height=600,width=600');<br \/>\n      \/\/wo.document.write(cnv.toDataURL('image\/png'));<br \/>\n      }<br \/>\n      };<br \/>\n      imgz.src = URL.createObjectURL(blob);<br \/>\n      destinationImage.src = URL.createObjectURL(blob);<br \/>\n      \/\/cnv.style.backgroundRepeat=(('' + cnv.style.backgroundRepeat) + ',no-repeat').replace(\/^\\,\/g,'');<br \/>\n      \/\/if (('' + cnv.style.background + ' ').trim() != '') { document.getElementById('mysummary').innerHTML='Conglomerated Images below ...';  }<br \/>\n      cnv.style.background=(('' + cnv.style.background) + ',url(' + destinationImage.src + ') no-repeat').replace(\/^\\,\/g,'');<br \/>\n      \/\/document.querySelector(\".editor\").style.display='block';<br \/>\n      \/\/destinationImage.style.display='none';<br \/>\n      setTimeout(anothercellz, 6000);<br \/>\n    }<br \/>\n  }<br \/>\n  catch (error) {<br \/>\n    console.error(error.message);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to achieve a lot of this image data use of the Clipboard API functionality.<\/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\/clipboard-api-image-tutorial\/'>Clipboard API Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='capipt'>Previous relevant <a target=_blank title='Clipboard API Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-primer-tutorial\/'>Clipboard API Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clipboard API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.jpg\" title=\"Clipboard API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clipboard API Primer Tutorial<\/p><\/div>\n<p>Here&#8217;s another day of testing a Javascript API today, which has that &#8220;desktop feel&#8221;, that being the <a target=_blank title='Clipboard API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API'>Clipboard API<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API'><p>\nThe Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.\n<\/p><\/blockquote>\n<p> &#8230; our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html_GETME\" title=\"clipboard_api_test.html\">clipboard_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\" title=\"Click picture\">proof of concept<\/a> version offering &#8220;text clipboard data&#8221; functionality from the text based clipboard into an HTML textarea element via &#8230;<\/p>\n<ul>\n<li>append<\/li>\n<li>prepend<\/li>\n<li>at cursor<\/li>\n<\/ul>\n<p> &#8230; modes of use, you can also try below (or get a <a onclick=\"if \n (1 == 11) { window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm','myifca');  \n } else { document.getElementById('myifca').src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm'; }\" style=\"cursor:pointer;text-decoration:underline;\" title='Below'>sneak<\/a> <a title='New window' target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm'>peak<\/a> at tomorrow&#8217;s ideas) &#8230;<\/p>\n<p><iframe name=myifca id=myifca style=\"width:100%;height:1000px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\"><\/iframe><\/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='#d56509' onclick='var dv=document.getElementById(\"d56509\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/paste\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56509' 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='#d56516' onclick='var dv=document.getElementById(\"d56516\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56516' 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='#d56598' onclick='var dv=document.getElementById(\"d56598\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/highlight\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56598' 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='#d56606' onclick='var dv=document.getElementById(\"d56606\"); 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='d56606' 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='#d56609' onclick='var dv=document.getElementById(\"d56609\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/z-index\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56609' 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='#d56621' onclick='var dv=document.getElementById(\"d56621\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56621' 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='#d56628' onclick='var dv=document.getElementById(\"d56628\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/notification\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56628' 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='#d56635' onclick='var dv=document.getElementById(\"d56635\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56635' 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='#d56642' onclick='var dv=document.getElementById(\"d56642\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css3\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56642' 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='#d56646' onclick='var dv=document.getElementById(\"d56646\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/toast\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56646' 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='#d56653' onclick='var dv=document.getElementById(\"d56653\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56653' 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='#d62102' onclick='var dv=document.getElementById(\"d62102\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cursor\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62102' 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='#d62230' onclick='var dv=document.getElementById(\"d62230\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hotkey\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62230' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re not sure why we didn&#8217;t think about it in the first round of SOS Game creation sessions, but, further to the recent SOS Game Cursor Tutorial &#8230; cursor non-mobile improvements &#8230; today we have &#8230; CSS margin tweaks &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/sos-game-keyboard-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":[4646,2127,322,400,409,476,573,1608,576,578,4647,652,673,2673,2281,3180,1705,2219,1661,871,997,4627,4626,1226,3889,1319,3744],"class_list":["post-62230","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-coalesce","tag-cursor","tag-device","tag-event","tag-external-javascript","tag-game","tag-hotkey","tag-hover","tag-html","tag-html5","tag-huddling","tag-javascript","tag-keyboard","tag-margin","tag-merge","tag-non-mobile","tag-onkeydown","tag-onmousemove","tag-onmouseout","tag-onmouseover","tag-programming","tag-sos","tag-sos-game","tag-svg","tag-svgxml","tag-tutorial","tag-tweak"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62230"}],"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=62230"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62230\/revisions"}],"predecessor-version":[{"id":62243,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62230\/revisions\/62243"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}