{"id":56646,"date":"2022-08-17T03:01:48","date_gmt":"2022-08-16T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56646"},"modified":"2022-08-17T08:30:59","modified_gmt":"2022-08-16T22:30:59","slug":"word-find-game-viewport-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-viewport-tutorial\/","title":{"rendered":"Word Find Game Viewport Tutorial"},"content":{"rendered":"<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 Viewport Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_find_game_viewport.jpg\" title=\"Word Find Game Viewport Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Word Find Game Viewport Tutorial<\/p><\/div>\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'>&#8220;toast&#8221;<\/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<p>It forms part of our solution regarding &#8230;<\/p>\n<ul>\n<li>mobile device use &#8230;<\/li>\n<li>the user using the webpage viewport &#8230;<\/li>\n<li>and the device &#8220;spreading&#8221; gesture (ie. opposite to &#8220;pinch&#8221; gesture) to hone in on an area in &#8220;sea of letters&#8221; &#8230; but because they fill the screen this way, and they lose sight of the score we want new &#8230;<\/li>\n<li>&#8220;toast&#8221; message box position fixed view of score and status as it changes without the user having to shift their viewing position (looking at their &#8220;sea of letters&#8221; area)<\/li>\n<\/ul>\n<p> &#8230; that was not in yesterday&#8217;s <a title='Word Find Game Aesthetics Tutorial' href='#wfgat'>Word Find Game Aesthetics Tutorial<\/a>.<\/p>\n<p>Here&#8217;s how this happened, for us, with the code &#8230;<\/p>\n<table>\n<tr>\n<th>We established a viewport &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style='font-size:8px;'><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\"  &gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>We CSS style a &#8220;toast&#8221; class &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;style&gt;<br \/>\n<code style='font-size:8px;'><br \/>\n .custom-alert {<br \/>\n  display: inline-block;<br \/>\n  \/* visibility: visible; *\/<br \/>\n  background-color: rgba(102,102,102,0.8);<br \/>\n  color: #fff;<br \/>\n  text-align: enter;<br \/>\n  margin: 5% auto;<br \/>\n  padding: 12px 28px;<br \/>\n  opacity: 0.9;<br \/>\n  z-index: 200;<br \/>\n }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/td>\n<\/tr>\n<tr>\n<th>We Javascript <font color=blue>initiate<\/font> the &#8220;toast&#8221; instance, featuring &#8220;viewport&#8221; savvy screen positioning, for the webpage and <font color=purple>maintain its visibility status<\/font> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style='font-size:8px;'><br \/>\n function showIt(what) {<br \/>\n  var ris=null;<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    if (document.getElementById('custom-alert-1')) {<br \/>\n      document.getElementById('custom-alert-1').innerHTML=what;<br \/>\n      document.getElementById('custom-alert-1').style.opacity='0.95';<br \/>\n      <font color=purple>document.getElementById('custom-alert-1').style.display='inline-block'; \/\/ inline<\/font><br \/>\n      \/\/document.getElementById('custom-alert-1').style.visibility='visible';<br \/>\n      document.getElementById('custom-alert-1').scrollIntoView();<br \/>\n    } <font color=blue>else if (what == '') {<br \/>\n      ris=document.getElementById('underlay').getBoundingClientRect();<br \/>\n      \/\/alert(eval(eval(ris.left + ris.right) \/ 2));<br \/>\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><br \/>\n    } else {<br \/>\n      ris=document.getElementById('underlay').getBoundingClientRect();<br \/>\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;\";<br \/>\n    }<\/font><br \/>\n    setTimeout(hideIt, 10000);<br \/>\n  }<br \/>\n }<br \/>\n<br \/> <br \/>\n function hideIt() {<br \/>\n  <font color=purple>document.getElementById('custom-alert-1').style.display='none';<\/font><br \/>\n  \/\/document.getElementById('custom-alert-1').style.visibility='hidden';<br \/>\n }<br \/>\n<br \/>\n function lonl() { \/\/ called around onload event<br \/>\n  document.getElementById('wunderlay').innerHTML=wdebye;<br \/>\n  if (documentURL.indexOf('clicks=') != -1) {<br \/>\n   document.getElementById('cmodeopt').innerHTML='Click';<br \/>\n   \/\/document.getElementById('wunderlay').innerHTML=wdebye;<br \/>\n   document.getElementById('wunderlay').style.display='block';<br \/>\n   document.getElementById('wunderlay').style.opacity='1.0';<br \/>\n   document.getElementById('underlay').style.display='none';<br \/>\n   document.getElementById('seventmode').innerHTML=document.getElementById('seventmode').innerHTML.replace(' highlight ', ' click ');<br \/>\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;';<br \/>\n  } else {<br \/>\n   document.getElementById('cmodeopt').innerHTML='Selection';<br \/>\n  }<br \/>\n  <font color=blue>showIt('');<\/font><br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>We Javascript <font color=green>call with content<\/font> modify the &#8220;toast&#8221; instance each time the score changes &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style='font-size:8px;'><br \/>\nfunction notify(what) {<br \/>\n \/\/alert('anames[0]=' + anames[0] + ' and trysay=' + trysay);<br \/>\n if (what.trim() != '' && anames[0].replace('Player 1','').trim() != '') {<br \/>\n  if (what.indexOf('orry') != -1 && what.indexOf(anames[curplayer]) == -1) {<br \/>\n    if (what.indexOf('.') != -1) {<br \/>\n      what=what.replace('.', ', ' + anames[curplayer] + '.');<br \/>\n    } else {<br \/>\n      what+=', ' + anames[curplayer];<br \/>\n    }<br \/>\n  }<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) {<br \/>\n    \/\/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 } <font color=green>else if (what == '') {<br \/>\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', ''));<br \/>\n }<\/font><br \/>\n return what;<br \/>\n}<br \/>\n<br \/>\n function cscore(cursortype, ssc) {<br \/>\n   var prescore='', spans=[];<br \/>\n   var ispans=0;<br \/>\n   if (lastzdebye != zdebye && lastzdebye != zzdebye) {<br \/>\n   if (ssc != 0) { goes++; }<br \/>\n   if (ssc &gt; 0) {<br \/>\n     if (anames[0].replace('Player 1','').trim() != '') {<br \/>\n       prescore='Well done' + findingnemo + ', ' + anames[curplayer] + '. ';<br \/>\n     }<br \/>\n         if (documentURL.indexOf('clicks=') != -1) {<br \/>\n           spans=document.getElementsByTagName('span');<br \/>\n           for (ispans=0; ispans&lt;spans.length; ispans++) {<br \/>\n             if (spans[ispans].innerHTML.length == 1 && ('' + spans[ispans].title) != '') {<br \/>\n               spans[ispans].style.backgroundColor='lightgreen';<br \/>\n               spans[ispans].title='';<br \/>\n             }<br \/>\n           }<br \/>\n         }<br \/>\n     score+=ssc;<br \/>\n    if (zzdebye.indexOf('&lt;font') != -1) { \/\/ && zdebye.indexOf('&lt;font') == -1) {<br \/>\n    zdebye=zzdebye;<br \/>\n    }<br \/>\n    if (zdebye.indexOf('&lt;font') != -1 && documentURL.indexOf('clicks=') == -1) {<br \/>\n    if (document.getElementById('underlay').innerHTML.replace(\/\\&lt;br\\&gt;\/g,'').indexOf('&lt;') == -1) {<br \/>\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;';<br \/>\n    } else {<br \/>\n    document.getElementById('others').innerHTML+=document.getElementById('underlay').outerHTML.replace(' id=', ' class=').replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:lightgreen;\"');<br \/>\n    }<br \/>\n    }<br \/>\n   } else {<br \/>\n     if (anames[0].replace('Player 1','').trim() != '') {<br \/>\n       prescore='Bad luck, ' + anames[curplayer] + '. ';<br \/>\n     }<br \/>\n         if (documentURL.indexOf('clicks=') != -1) {<br \/>\n           spans=document.getElementsByTagName('span');<br \/>\n           for (ispans=0; ispans&lt;spans.length; ispans++) {<br \/>\n             if (spans[ispans].innerHTML.length == 1 && ('' + spans[ispans].title) != '') {<br \/>\n               spans[ispans].style.backgroundColor='lightgray';<br \/>\n               spans[ispans].title='';<br \/>\n             }<br \/>\n           }<br \/>\n         }<br \/>\n    if (zzdebye.indexOf('&lt;font') != -1) { \/\/ && zdebye.indexOf('&lt;font') == -1) {<br \/>\n    zdebye=zzdebye;<br \/>\n    \/\/if (document.getElementById('underlay').innerHTML.replace(\/\\&lt;br\\&gt;\/g,'').indexOf('&lt;') == -1) {<br \/>\n    \/\/alert(zdebye);<br \/>\n    \/\/}<br \/>\n    }<br \/>\n    if (zdebye.indexOf('&lt;font') != -1 && documentURL.indexOf('clicks=') == -1) {<br \/>\n    if (document.getElementById('underlay').innerHTML.replace(\/\\&lt;br\\&gt;\/g,'').indexOf('&lt;') == -1) {<br \/>\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;';<br \/>\n    } else {<br \/>\n    document.getElementById('others').innerHTML+=document.getElementById('underlay').outerHTML.replace(' id=', ' class=').replace(\/\\ color\\=\\\"red\\\"\/g, ' color=\"black\" style=\"background-color:orange;\"');<br \/>\n    }<br \/>\n    }<br \/>\n   }<br \/>\n   if (eval('' + ascores.length) == 1 && anames[0].replace('Player 1','').trim() != '' && ssc != 0) {<br \/>\n   document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);<br \/>\n   }<br \/>\n   if (eval('' + ascores.length) &gt; 1) {<br \/>\n   if (ssc == 0) {<br \/>\n    subscore=0;<br \/>\n    lastzdebye=zdebye;<br \/>\n    zzdebye='';<br \/>\n    zdebye='';<br \/>\n    return 'pointer'; \/\/ ''<br \/>\n   }<br \/>\n   ascores[curplayer]=eval('' + score);<br \/>\n   agoes[curplayer]=eval('' + goes);<br \/>\n   var cscores='';<br \/>\n   var cgoes='';<br \/>\n   var betw='';<br \/>\n   if (eval(1 + eval('' + curplayer)) &gt;= eval('' + ascores.length)) {  betw='&lt;font color=green&gt;';  }<br \/>\n   \/\/if (eval('' + curplayer) == eval('' + ascores.length)) {   betw='&lt;font color=green&gt;';  }<br \/>\n   for (var inp=0; inp&lt;eval('' + ascores.length); inp++) {<br \/>\n     if (eval('' + eval(1 + curplayer)) == inp) {<br \/>\n       cscores+=betw + mcs(inp,true,'&lt;font color=green&gt;' + ascores[inp] + '&lt;\/font&gt;');<br \/>\n       cgoes+=betw + mcs(inp,false,'&lt;font color=green&gt;' + agoes[inp] + '&lt;\/font&gt;');<br \/>\n       betw=':&lt;font color=red&gt;';<br \/>\n       if (eval(1 + inp) &gt;= eval('' + ascores.length)) {<br \/>\n         cscores=mcs(inp,true,'&lt;font color=red&gt;' + cscores.replace(':','&lt;\/font&gt;:'));<br \/>\n         cgoes=mcs(inp,false,'&lt;font color=red&gt;' + cgoes.replace(':','&lt;\/font&gt;:'));<br \/>\n       }<br \/>\n     } else {<br \/>\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;'));<br \/>\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;'));<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   }<br \/>\n   document.getElementById('score').innerHTML='' + cscores + '\/' + cgoes;<br \/>\n   curplayer++;<br \/>\n   if (curplayer &gt;= eval('' + ascores.length)) { curplayer=0;  }<br \/>\n   if (document.getElementById('smore').innerHTML != '' && document.getElementById('smore').innerHTML.indexOf('&lt;') == -1) {<br \/>\n     if (anames.length &gt; curplayer) {<br \/>\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);<br \/>\n     } else if (nameslist.indexOf(',') != -1) {<br \/>\n     anames=nameslist.split(',');<br \/>\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);<br \/>\n     } else if (nameslist.indexOf(' ') != -1) {<br \/>\n     anames=nameslist.trim().split(' ');<br \/>\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);<br \/>\n     } else {<br \/>\n     document.getElementById('smore').innerHTML=notify(prescore + 'Your go ' + anames[curplayer]);<br \/>\n     }<br \/>\n   }<br \/>\n   document.getElementById('curbit').innerHTML='for &lt;font color=green&gt;' + eval(1 + eval('' + curplayer)) + '&lt;\/font&gt; of';<br \/>\n   score=eval('' + ascores[curplayer]);<br \/>\n   goes=eval('' + agoes[curplayer]);<br \/>\n   <font color=green>if (subscore != 0 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    if ('toastisgood' == 'toastisgood') {<br \/>\n     notify('');<br \/>\n    } else {<br \/>\n     document.getElementById('score').scrollIntoView();<br \/>\n    }<br \/>\n   }<\/font><br \/>\n   } else {<br \/>\n   ascores[curplayer]=score;<br \/>\n   agoes[curplayer]=goes;<br \/>\n   document.getElementById('score').innerHTML='' + mcs(0,true,'' + score) + '\/' + mcs(0,false,'' + goes);<br \/>\n   <font color=green>if (subscore != 0 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    if ('toastisgood' == 'toastisgood') {<br \/>\n     notify('');<br \/>\n    } else {<br \/>\n     document.getElementById('score').scrollIntoView();<br \/>\n    }<br \/>\n   }<\/font><br \/>\n   }<br \/>\n   subscore=0;<br \/>\n   lastzdebye=zdebye;<br \/>\n   }<br \/>\n   zzdebye='';<br \/>\n   zdebye='';<br \/>\n   return cursortype;<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\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 once 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-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","protected":false},"excerpt":{"rendered":"<p>Do you remember the last time at this blog that we simulated the Android &#8220;toast&#8221; mobile app temporary message box with Ants Up a Wall Game Toast Tutorial? It forms part of our solution regarding &#8230; mobile device use &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/word-find-game-viewport-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":[4,12,14,15,37],"tags":[2419,84,126,127,161,210,211,4040,265,281,282,2127,286,4061,367,1696,3037,476,477,485,3030,2349,576,590,4063,631,652,675,2020,725,2178,4064,795,3861,4060,4032,846,2791,4030,4062,861,907,952,3908,1988,997,2350,2319,1866,1116,4058,4065,4066,2062,1209,1212,4057,1254,3350,1262,4056,1288,1319,4059,1373,1418,1452,1453,1496],"class_list":["post-56646","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-aesthetics","tag-animation-2","tag-background","tag-background-image","tag-border","tag-class","tag-click","tag-clipboard-api","tag-copy","tag-css","tag-css3","tag-cursor","tag-cut","tag-degree-of-difficulty","tag-dropdown","tag-event-driven-programming","tag-fixed","tag-game","tag-games-2","tag-gesture","tag-glow","tag-highlight","tag-html","tag-image","tag-instance","tag-iphone","tag-javascript","tag-keyframes","tag-linear-gradient","tag-mac-os-x","tag-macos","tag-message-box","tag-mobile","tag-mode","tag-modes-of-use","tag-navigator-platform","tag-notification","tag-notifications","tag-notifications-api","tag-number-of-players","tag-onclick","tag-paste","tag-player","tag-players","tag-position","tag-programming","tag-say","tag-score","tag-select","tag-selection","tag-selection-api","tag-spread","tag-spreading","tag-status","tag-style","tag-styling","tag-tclipboard","tag-text","tag-text-to-audio","tag-textarea","tag-this-entry-was-posted-in-elearning","tag-toast","tag-tutorial","tag-underlay-opacity","tag-viewport","tag-webpage","tag-word","tag-word-game","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56646"}],"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=56646"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56646\/revisions"}],"predecessor-version":[{"id":56652,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56646\/revisions\/56652"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}