{"id":57895,"date":"2022-12-28T03:01:27","date_gmt":"2022-12-27T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57895"},"modified":"2022-12-27T15:09:43","modified_gmt":"2022-12-27T05:09:43","slug":"htmljavascript-letters-in-word-game-mode-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-letters-in-word-game-mode-tutorial\/","title":{"rendered":"HTML\/Javascript Letters In Word Game Mode Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Letters In Word Game Mode Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in_more.jpg\" title=\"HTML\/Javascript Letters In Word Game Mode Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Letters In Word Game Mode Tutorial<\/p><\/div>\n<p>It&#8217;s the day after yesterday.  And that makes it the day after the &#8220;proof of concept&#8221; <a title='HTML\/Javascript Letters In Word Game Tutorial' href='#html\/jliwgt'>HTML\/Javascript Letters In Word Game Tutorial<\/a> start to our English &#8220;Letters In&#8221; word game.<\/p>\n<p>In amongst the web application improvements, we thought of &#8230;<\/p>\n<ul>\n<li>some CSS <font color=blue>pseudo styling<\/font><br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n<br \/>\n #nw { text-shadow: 1px 1px 2px #2d2f15; padding: 5 15 15 5; }<br \/>\n <br \/>\n <font color=blue>button:active {<br \/>\n    border: 5px dotted pink;<br \/>\n }<br \/>\n <br \/>\n button:focus {<br \/>\n    border: 5px dashed pink;<br \/>\n }<br \/>\n <br \/>\ninput:placeholder-shown {<br \/>\n    background-color: ivory;<br \/>\n    border: 2px solid darkorange;<br \/>\n    border-radius: 5px;<br \/>\n}<br \/>\n<br \/>\n input[type=password]:empty {<br \/>\n    background-color: #f9f9f9;<br \/>\n    border: 2px solid orange;<br \/>\n    border-radius: 5px;<br \/>\n }<\/font><br \/>\n<br \/>\n input[type=password] { font-size: 24px; background-color: white !important;  }<br \/>\n<br \/> <br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/li>\n<li>a mode of play &#8220;beginner words&#8221; style of play that calls into play the &#8220;connective&#8221; words we talked about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/connective-english-word-sentence-game-primer-tutorial\/' title='Connective English Word Sentence Game Primer Tutorial'>Connective English Word Sentence Game Primer Tutorial<\/a><\/li>\n<li>the &#8220;speeding up of the progress bar&#8221; <font color=blue>possibility via new onclick logic<\/font><br \/>\n<code><br \/>\n&lt;progress title=\"Click to speed things along.\" <font color=blue>onclick=\"initsec+=10; if (initsec > finsec) { initsec=finsec; } this.value=initsec;\"<\/font> id=myprogress min=0 value=0 max=60&gt;&lt;\/progress&gt;<\/code><\/li>\n<li>alert and prompt Javascript overridden functionality to enable dictionary lookups of words<br \/>\n<code><br \/>\nconst prompt = (inone, intwo) =&gt; {<br \/>\n  var retvalis=null;<br \/>\n  var outone='' + inone.trim();<br \/>\n  if (('' + inone).indexOf(' (containing ') != -1) {<br \/>\n    if ((' ' + outone).slice(-1) == '.') { outone+=' A'; } else { outone+=' and a';  }<br \/>\n    retvalis=window.prompt('' + outone + ' non-blank answer will do a dictionary search for ' + versus + ' if you like.', intwo);<br \/>\n    if (retvalis == null) { retvalis=''; }<br \/>\n    if (retvalis.trim() != '') { window.open('\/\/www.thefreedictionary.com\/' + versus.toLowerCase(),'_blank','top=200,left=200,width=600,height=600');   }<br \/>\n    return retvalis;<br \/>\n  }<br \/>\n  return window.prompt('' + inone, '' + intwo);<br \/>\n};<br \/>\n<br \/>\nconst alert = (inone) =&gt; {<br \/>\n  var retvalis=null;<br \/>\n  var outone='' + inone.trim();<br \/>\n  if (('' + inone).indexOf(' (containing ') != -1) {<br \/>\n    if ((' ' + outone).slice(-1) == '.') { outone+=' A'; } else { outone+=' and a';  }<br \/>\n    retvalis=ourprompt('' + outone + ' non-blank answer will do a dictionary search for ' + versus + ' if you like.', '');<br \/>\n    if (retvalis == null) { retvalis=''; }<br \/>\n    if (retvalis.trim() != '') { window.open('\/\/www.thefreedictionary.com\/' + versus.toLowerCase(),'_blank','top=200,left=200,width=600,height=600');   }<br \/>\n    return retvalis;<br \/>\n  }<br \/>\n  return window.alert('' + inone);<br \/>\n};<br \/>\n<\/code><\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html--GETME\" title=\"letters_in.html\">the modified<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html--GETME\" title=\"letters_in.html\">letters_in.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html\" title=\"Click picture\">Letters In English word game<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-letters-in-word-game-mode-tutorial\/'>HTML\/Javascript Letters In Word Game Mode Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jliwgt'>Previous relevant <a target=_blank title='HTML\/Javascript Letters In Word Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-letters-in-word-game-tutorial\/'>HTML\/Javascript Letters In Word Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Letters In Word Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.jpg\" title=\"HTML\/Javascript Letters In Word Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Letters In Word Game Tutorial<\/p><\/div>\n<p>Michelangelo had an interesting strategy regarding his sculpture.   He&#8217;d go to a lot of trouble visiting the quarry himself to pick out the source material he&#8217;d produce his masterpieces from.   He would envisage from the look of the stone how it could become what he wanted to produce.<\/p>\n<p>In no way are we comparing work to Michelangelo, but it does often help to start with a big picture item, already created into its useful productive life, and &#8230;<\/p>\n<ul>\n<li>keep what&#8217;s good and in common &#8230; leaving &#8230;<\/li>\n<li>nuanced differences to appear and be easier able to deal with via tweaks to a pre-existing scenario, rather than building something from scratch<\/li>\n<\/ul>\n<p> &#8230; if the projects have enough of that work &#8220;in common&#8221;.  Otherwise this approach might confuse.  Today&#8217;s new English <i>Letters In<\/i> word game, where users create words containing all the letters in a list presented by the computer, had a lot in common with the most recent <i.Bulls and Cows<\/i> English word game, it was not a difficult decision to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html-GETME\" title=\"letters_in.html\">base the new work on the old<\/a> (progress) onto yesterday&#8217;s <a title='HTML\/Javascript Bulls and Cows Game Commentary Tutorial' href='#html\/jbcgct'>HTML\/Javascript Bulls and Cows Game Commentary Tutorial<\/a>.<\/p>\n<p>The &#8220;end of user entry&#8221; phase is characterised by new button user click event logic &#8230;<\/p>\n<p><code><br \/>\n function lockin(inb) {<br \/>\n   if (inb.id == 'but2') {<br \/>\n     vstwo=document.getElementById('pwd2').value;<br \/>\n     inb.innerHTML='&#128272;';<br \/>\n     document.getElementById('pwd2').value='';<br \/>\n     checkword(vstwo, 2);<br \/>\n   } else {<br \/>\n     vsone=document.getElementById('pwd1').value;<br \/>\n     inb.innerHTML='&#128272;';<br \/>\n     document.getElementById('pwd1').value='';<br \/>\n     checkword(vsone, 1);<br \/>\n   }<br \/>\n }<br \/>\n<\/code>  <\/p>\n<p> &#8230; replacing the &#8220;getting to a word length&#8221; logic not needing user button click logic, where the <i>checkword<\/i> Javascript function calls on <a target=_blank title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)'>Ajax<\/a> functionality &#8230;<\/p>\n<p><code><br \/>\n var zhr=null, zform=null;<br \/>\n<br \/>\n function stateChanged() {<br \/>\n if (zhr.readyState == 4) {<br \/>\n  if (zhr.status == 200) {<br \/>\n   \/\/alert('is ' + lastww + ' in ' + zhr.response + ' ?');<br \/>\n   if (zhr.response.toLowerCase().indexOf(lastww.toLowerCase()) != -1) {<br \/>\n     valid[Math.abs(lastidx)]=true;<br \/>\n   } else {<br \/>\n     valid[Math.abs(lastidx)]=false;<br \/>\n   }<br \/>\n   if (!valid[2] && vstwo.trim() != '' && lastidx == -1) {<br \/>\n     checkword(vstwo, -2);<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n }<br \/>\n<br \/>\n function checkword(ww, idx) {<br \/>\n   lastww=ww.toLowerCase();<br \/>\n   lastidx=idx;<br \/>\n   if (1 == 1) {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zhr.onreadystatechange=stateChanged;<br \/>\n   zhr.open('get', '\/PHP\/surprise.php?min=4&max=8&youllneverfindthis=y&hastobe=' + ww.toLowerCase(), true);<br \/>\n   zhr.send(null);<br \/>\n   } else {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('min', '4');<br \/>\n   zform.append('max', '8');<br \/>\n   zform.append('youllneverfindthis', 'y');<br \/>\n   zform.append('hastobe', ww.toLowerCase());<br \/>\n   zhr.onreadystatechange=stateChanged;<br \/>\n   zhr.open('get', '\/PHP\/surprise.php', true);<br \/>\n   zhr.send(zform);<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; in the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html-GETME\" title=\"letters_in.html\">letters_in.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/LettersIn\/letters_in.html\">Letters In<\/a> English word game.<\/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-html\/javascript-bulls-and-cows-game-commentary-tutorial\/'>HTML\/Javascript Bulls and Cows Game Commentary Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jbcgct'>Previous relevant <a target=_blank title='HTML\/Javascript Bulls and Cows Game Commentary Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-bulls-and-cows-game-commentary-tutorial\/'>HTML\/Javascript Bulls and Cows Game Commentary Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Bulls and Cows Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows_reveal.jpg\" title=\"HTML\/Javascript Bulls and Cows Game Mobile Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Bulls and Cows Game Commentary Tutorial<\/p><\/div>\n<p>If you&#8217;ve actively engaged in a <a target=_blank title='Bulls and Cows' href='https:\/\/www.dailywritingtips.com\/list-50-word-games\/'>Bulls and Cows<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">game<\/a> using the web application back at yesterday&#8217;s <a title='HTML\/Javascript Bulls and Cows Game Mobile Tutorial' href='#html\/jbcgmt'>HTML\/Javascript Bulls and Cows Game Mobile Tutorial<\/a> you might have struggled without pen and paper to help you out.  But, today, we help users out here if they redefine player names, and mention within those names &#8230;<\/p>\n<blockquote><p>\nInvolve an uppercase email address for running commentary that might replace you taking hand written notes.  Involve [NEW WINDOW] for continuous running commentary in a popup window or a lowercase version for commentary after a click. Involve [mobile number] for running commentary via SMS. Involve non-uppercase email address for running commentary via a mailto email.\n<\/p><\/blockquote>\n<p> &#8230; involving an inhouse <font size=1>(sort of)<\/font> overriding of <font size=1>window.<\/font>prompt with &#8230;<\/p>\n<p><code><br \/>\nvar ourpgoes=1;<br \/>\n<br \/>\nfunction ourprompt(inb, indef) {<br \/>\n  var thisconduit='';<br \/>\n  var retv=window.prompt(inb, indef);<br \/>\n  if (retv == null) { retv=''; }<br \/>\n  var rtvs=retv.split(',');<br \/>\n  for (var ir=0; ir&lt;rtvs.length; ir++) {<br \/>\n   if (rtvs[ir].indexOf('[newwindow]') != -1) {<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', 'new');<br \/>\n     retv=retv.replace('[newwindow]', '');<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to open commentary popup window';<br \/>\n     document.getElementById('splayer' + ourpgoes).onclick=function(event) {   sendmaybe(htmls[eval(event.target.id.substring(7))],eval('-' + event.target.id.substring(7)));   };<br \/>\n     document.getElementById('splayer' + ourpgoes).style.cursor='pointer';<br \/>\n   } else if (rtvs[ir].indexOf('[new window]') != -1) {<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', 'new');<br \/>\n     retv=retv.replace('[new window]', '');<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to open commentary popup window';<br \/>\n     document.getElementById('splayer' + ourpgoes).onclick=function(event) {   sendmaybe(htmls[eval(event.target.id.substring(7))],eval('-' + event.target.id.substring(7)));   };<br \/>\n     document.getElementById('splayer' + ourpgoes).style.cursor='pointer';<br \/>\n   } else if (rtvs[ir].indexOf('[NEWWINDOW]') != -1) {<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', 'NEW');<br \/>\n     retv=retv.replace('[NEWWINDOW]', '');<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Continuous commentary popups being sent';<br \/>\n   } else if (rtvs[ir].indexOf('[NEW WINDOW]') != -1) {<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', 'NEW');<br \/>\n     retv=retv.replace('[NEW WINDOW]', '');<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Continuous commentary popups being sent';<br \/>\n   } else if (rtvs[ir].indexOf('@') != -1) {<br \/>\n     if (rtvs[ir].indexOf('[') != -1) {<br \/>\n     thisconduit=rtvs[ir].split('[')[1].split(']')[0];<br \/>\n     if (thisconduit == thisconduit.toUpperCase()) {<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', thisconduit);<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Continuous commentary PHP mail inline HTML emails being sent to ' + thisconduit;<br \/>\n     retv=retv.replace('[' + thisconduit + ']','');<br \/>\n     } else {<br \/>\n     if (thisconduit == thisconduit.toLowerCase()) {<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to send a mailto email to ' + thisconduit;<br \/>\n     retv=retv.replace('[' + thisconduit + ']','');<br \/>\n     } else {<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to send PHP mail inline HTML email to ' + thisconduit;<br \/>\n     retv=retv.replace('[' + thisconduit + ']','');<br \/>\n     }<br \/>\n     document.getElementById('splayer' + ourpgoes).style.cursor='pointer';<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', ' ');<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-email', thisconduit);<br \/>\n     document.getElementById('splayer' + ourpgoes).onclick=function(event) {   sendmaybe(htmls[eval(event.target.id.substring(7))],eval('-' + event.target.id.substring(7)));   };<br \/>\n     }<br \/>\n     } else if (rtvs[ir] == rtvs[ir].toUpperCase()) {<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', rtvs[ir]);<br \/>\n     } else {<br \/>\n     if (rtvs[ir] == rtvs[ir].toLowerCase()) {<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to send a mailto email to ' + rtvs[ir];<br \/>\n     } else {<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to send PHP mail inline HTML email to ' + rtvs[ir];<br \/>\n     }<br \/>\n     document.getElementById('splayer' + ourpgoes).style.cursor='pointer';<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', ' ');<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-email', rtvs[ir]);<br \/>\n     document.getElementById('splayer' + ourpgoes).onclick=function(event) {   sendmaybe(htmls[eval(event.target.id.substring(7))],eval('-' + event.target.id.substring(7)));   };<br \/>\n     }<br \/>\n   } else if (rtvs[ir].replace('[9','[0').replace('[8','[0').replace('[7','[0').replace('[6','[0').replace('[5','[0').replace('[4','[0').replace('[3','[0').replace('[2','[0').replace('[1','[0').indexOf('[0') != -1) {<br \/>\n     thisconduit=rtvs[ir].split('[')[1].split(']')[0];<br \/>\n     document.getElementById('splayer' + ourpgoes).title='Click me when you want to send SMS to ' + thisconduit;<br \/>\n     retv=retv.replace('[' + thisconduit + ']','');<br \/>\n     document.getElementById('splayer' + ourpgoes).style.cursor='pointer';<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-send', '  ');<br \/>\n     document.getElementById('splayer' + ourpgoes).setAttribute('data-sms', thisconduit);<br \/>\n     document.getElementById('splayer' + ourpgoes).onclick=function(event) {   sendmaybe(htmls[eval(event.target.id.substring(7))],eval('-' + event.target.id.substring(7)));   };<br \/>\n   }<br \/>\n   ourpgoes++;<br \/>\n  }<br \/>\n  return retv;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and realization of those &#8220;name nuances&#8221; via &#8230;<\/p>\n<p><code><br \/>\nfunction sendmaybe(somehtml, inbignum) {<br \/>\n  var bignum=Math.abs(inbignum), urlis='';<br \/>\n  if (document.getElementById('splayer' + bignum).getAttribute('data-send') != '') {<br \/>\n  if (document.getElementById('splayer' + bignum).getAttribute('data-send') == 'NEW' || (document.getElementById('splayer' + bignum).getAttribute('data-send') == 'new' && ('' + inbignum).indexOf('-') != -1)) {<br \/>\n  if (wos[bignum]) {<br \/>\n    if (!wos[bignum].closed) {<br \/>\n      wos[bignum].close();<br \/>\n      wos[bignum]=null;<br \/>\n    }<br \/>\n  }<br \/>\n  \/\/alert(htmls[bignum] + ' ... will become ... ' + somehtml);<br \/>\n  wos[bignum]=window.open('','_blank','top=10,left=10,width=600,height=800');<br \/>\n  if (('' + bignum) == '1') {<br \/>\n  wos[bignum].document.write(somehtml.replace('Your Guess', player1 + ' Guess'));<br \/>\n  } else {<br \/>\n  wos[bignum].document.write(somehtml.replace(player1 + ' Guess', player2 + ' Guess').replace('Your Guess', player2 + ' Guess'));<br \/>\n  }<br \/>\n  } else if (document.getElementById('splayer' + bignum).getAttribute('data-send') == '  ' && ('' + inbignum).indexOf('-') != -1) { \/\/ sms<br \/>\n  if (('' + bignum) == '1') {<br \/>\n      urlis=document.URL.split('?')[0].split('#')[0] + '?htmlis=' + encodeURIComponent('&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace('Your Guess', player1 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  } else {<br \/>\n      urlis=document.URL.split('?')[0].split('#')[0] + '?htmlis=' + encodeURIComponent('&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace(player1 + ' Guess', player2 + ' Guess').replace('Your Guess', player2 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  }<br \/>\n      document.getElementById('asms').href=document.getElementById('asms').href.split('body=')[0].replace(':&',':' + document.getElementById('splayer' + bignum).getAttribute('data-sms') + '&') + 'body=' + encodeURIComponent(urlis);<br \/>\n      document.getElementById('asms').click();<br \/>\n  } else if (document.getElementById('splayer' + bignum).getAttribute('data-send') == ' ' && ('' + inbignum).indexOf('-') != -1) { \/\/ email via a mailto<br \/>\n  if (document.getElementById('splayer' + bignum).title.indexOf('mailto') != -1) {<br \/>\n  if (('' + bignum) == '1') {<br \/>\n      urlis=document.URL.split('?')[0].split('#')[0] + '?htmlis=' + encodeURIComponent('&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace('Your Guess', player1 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  } else {<br \/>\n      urlis=document.URL.split('?')[0].split('#')[0] + '?htmlis=' + encodeURIComponent('&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace(player1 + ' Guess', player2 + ' Guess').replace('Your Guess', player2 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  }<br \/>\n      document.getElementById('aemail').href=document.getElementById('aemail').href.split('body=')[0].replace(':?',':' + document.getElementById('splayer' + bignum).getAttribute('data-email') + '?') + 'body=' + encodeURIComponent(urlis);<br \/>\n      document.getElementById('aemail').click();<br \/>\n  } else {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('inline', '');<br \/>\n   if (document.getElementById('splayer' + bignum).getAttribute('data-send').indexOf('@') != -1) {<br \/>\n   zform.append('to', document.getElementById('splayer' + bignum).getAttribute('data-send'));<br \/>\n   } else {<br \/>\n   zform.append('to', document.getElementById('splayer' + bignum).getAttribute('data-email'));<br \/>\n   }<br \/>\n   zform.append('subject', 'Bulls and Cows game commentary ...');<br \/>\n  if (('' + bignum) == '1') {<br \/>\n   zform.append('htmlis', '&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace('Your Guess', player1 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  } else {<br \/>\n   zform.append('htmlis', '&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace(player1 + ' Guess', player2 + ' Guess').replace('Your Guess', player2 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  }<br \/>\n   zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n  zhr.send(zform);<br \/>\n   \/\/alert('not trying exim log look ' + aeto);<br \/>\n  }<br \/>\n  } else if (document.getElementById('splayer' + bignum).getAttribute('data-send').indexOf('@') != -1) { \/\/ email via PHP mail inline HTML<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('inline', '');<br \/>\n   if (document.getElementById('splayer' + bignum).getAttribute('data-send').indexOf('@') != -1) {<br \/>\n   zform.append('to', document.getElementById('splayer' + bignum).getAttribute('data-send'));<br \/>\n   } else {<br \/>\n   zform.append('to', document.getElementById('splayer' + bignum).getAttribute('data-email'));<br \/>\n   }<br \/>\n   zform.append('subject', 'Bulls and Cows game commentary ...');<br \/>\n  if (('' + bignum) == '1') {<br \/>\n   zform.append('htmlis', '&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace('Your Guess', player1 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  } else {<br \/>\n   zform.append('htmlis', '&lt;html&gt;&lt;bo' + 'dy' + somehtml.replace(player1 + ' Guess', player2 + ' Guess').replace('Your Guess', player2 + ' Guess').split('&lt;bo' + 'dy')[1].replace(\/\\&lt;details\/g, '&lt;details open'));<br \/>\n  }<br \/>\n   zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n   zhr.send(zform);<br \/>\n  }<br \/>\n  }<br \/>\n  return somehtml;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html--GETME\" title=\"bullsandcows.html\">the modified<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html--GETME\" title=\"bullsandcows.html\">third draft bullsandcows.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a> you can <a href='#mysiframe'>also 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\/htmljavascript-bulls-and-cows-game-commentary-tutorial\/'>HTML\/Javascript Bulls and Cows Game Commentary Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jbcgmt'>Previous relevant <a target=_blank title='HTML\/Javascript Bulls and Cows Game Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-bulls-and-cows-game-mobile-tutorial\/'>HTML\/Javascript Bulls and Cows Game Mobile Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Bulls and Cows Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows_mobile.jpg\" title=\"HTML\/Javascript Bulls and Cows Game Mobile Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Bulls and Cows Game Mobile Tutorial<\/p><\/div>\n<p>With yesterday&#8217;s <a title='HTML\/Javascript Bulls and Cows Game Primer Tutorial' href='#html\/jbcgpt'>HTML\/Javascript Bulls and Cows Game Primer Tutorial<\/a> we separated &#8230;<\/p>\n<ul>\n<li>player 1 using mouse (or touch)<\/li>\n<li>player 2 on keyboard<\/li>\n<\/ul>\n<p> &#8230; as the arrangement for two players to use the one computer, playing our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a>.   But what if that &#8220;computer&#8221; is a mobile device?  You can&#8217;t decouple &#8220;touch&#8221; from &#8220;keyboard&#8221; using a mobile device.  You&#8217;ll notice writing web applications for mobile devices, their reticence to allow you to programmatically focus to HTML elements.  A lot of this would have to be to do with how the keyboard is presented to a mobile user <font size=1>(usually only)<\/font> when they deliberately focus onto a textbox through a human action, not as readily via a programmatical action.<\/p>\n<p>Does this ruin our game premise, for mobile devices?  Well, it&#8217;s not as strong, but it still works.  It can be a better user experience, though, attending to &#8230;<\/p>\n<ul>\n<li>CSS tweaks &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n input[type=password] { font-size: 24px;  }<br \/>\n<br \/> <br \/>\n @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) {<br \/>\n  <font color=blue>.tablek { text-align: right; }<br \/>\n  .tablem { text-align: left; }<br \/>\n  #pwd1 { width:50%; text-align:right;  }<br \/>\n  #pwd2 { width:50%; text-align:left;  }<\/font><br \/>\n  input[type=password] { font-size: 24px;  }<br \/>\n }<br \/>\n<br \/> <br \/>\n @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) {<br \/>\n  <font color=blue>.tablek { text-align: right; }<br \/>\n  .tablem { text-align: left; }<br \/>\n  #pwd1 { width:50%; text-align:right;  }<br \/>\n  #pwd2 { width:50%; text-align:left;  }<\/font><br \/>\n  input[type=password] { font-size: 24px;  }<br \/>\n }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/li>\n<li><font color=blue>text-align<\/font> settings to help with the narrower devices &#8230;<\/li>\n<li>Javascript use of [element].<a target=_blank title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() &#8230;<br \/>\n<code><br \/>\nfunction postsiv() {<br \/>\n  document.getElementById('tcell').scrollIntoView();<br \/>\n}<br \/>\n<br \/>\nfunction siv() {<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPJUNKad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     setTimeout(postsiv, 2000); \/\/document.getElementById('tcell').scrollIntoView(); \/\/versus=versus;<br \/>\n }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; called via <font color=blue>tweaked<\/font> HTML &#8230;<br \/>\n<code><br \/>\n&lt;input onblur=\"vstwo=this.value; assesstwo();\" onkeydown=pwdonkd(event); type=password id=pwd2 <font color=blue>onfocus=siv();<\/font> value=''&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li>programmatic focus restrictions for mobile devices &#8230;<br \/>\n<code><br \/>\nfunction pfocus() {<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPJUNKad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     document.getElementById('tablel').style.align='right'; \/\/versus=versus;<br \/>\n } else {<br \/>\n     document.getElementById('pwd2').focus();<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<li>have a set of backup placeholder arrangements in that middle cell of the 3 column table &#8230;<br \/>\n<code><br \/>\n        var versus=\"\", fgo=true; \/\/ global variable initialization ... and then later within the document.body onload linking Javascript function ...<br \/>\n<br \/>\n        if (fgo && versus == \"\") {<br \/>\n         if (document.getElementById('player1').placeholder != '' && document.getElementById('splayer1').innerHTML == 'Player 1 Name') { document.getElementById('splayer1').innerHTML=document.getElementById('player1').placeholder;    }<br \/>\n         if (document.getElementById('player2').placeholder != '' && document.getElementById('splayer2').innerHTML == 'Player 2 Name') { document.getElementById('splayer2').innerHTML=document.getElementById('player2').placeholder;    }<br \/>\n         if (document.getElementById('player1').placeholder == '') { document.getElementById('player1').placeholder=document.getElementById('player1').value; document.getElementById('splayer1').innerHTML=document.getElementById('player1').value; document.getElementById('player1').value='';   }<br \/>\n         if (document.getElementById('player2').placeholder == '') { document.getElementById('player2').placeholder=document.getElementById('player2').value; document.getElementById('splayer2').innerHTML=document.getElementById('player2').value; document.getElementById('player2').value='';   }<br \/>\n        }<br \/>\n<\/code><br \/>\n &#8230; because with the narrower devices the extra textbox view of the emoji Bulls and Cows in the middle can help out the qwerty button pressing users\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html-GETME\" title=\"bullsandcows.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html-GETME\" title=\"bullsandcows.html\">second draft bullsandcows.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a> you can <a href='#mysiframe'>also 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\/htmljavascript-bulls-and-cows-game-mobile-tutorial\/'>HTML\/Javascript Bulls and Cows Game Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jbcgpt'>Previous relevant <a target=_blank title='HTML\/Javascript Bulls and Cows Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-bulls-and-cows-game-primer-tutorial\/'>HTML\/Javascript Bulls and Cows Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Bulls and Cows Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.jpg\" title=\"HTML\/Javascript Bulls and Cows Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Bulls and Cows Game Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve got an inhouse version of a well known word <font size=1>(but you don&#8217;t have to be a wordsmith to play)<\/font> game called <a target=_blank title='Bulls and Cows' href='https:\/\/www.dailywritingtips.com\/list-50-word-games\/'>Bulls and Cows<\/a> which we used to play in lunchtimes at school, a bit like the Word Guessing game of <a title='Word Guessing or Synonym Game Right Click Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/word-guessing-or-synonym-game-right-click-tutorial\/'>Word Guessing or Synonym Game Right Click Tutorial<\/a> times past.<\/p>\n<p>Again, best as a game for two &#8230;<\/p>\n<blockquote cite='https:\/\/www.dailywritingtips.com\/list-50-word-games\/'><p>\nThis game, which can also be called \u201cMastermind\u201d or \u201cJotto\u201d involves one player thinking up a secret word of a set number of letters. The second player guesses a word; the first player tells them how many letters match in the right position (bulls) and how many letters are correct but in the wrong position (cows).\n<\/p><\/blockquote>\n<p> &#8230; that we encourage players to play around the one computer, where one player is at a mouse (or touch) and one is on the keyboard, trying to guess the same computer generated (rather than &#8220;the other player setting&#8221;) 4 to 9 length English word.<\/p>\n<p>Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html_GETME\" title=\"bullsandcows.html\">first draft bullsandcows.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a> you can try in a new window, or below &#8230;<\/p>\n<p><iframe id=mysiframe src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-sudoku-game-primer-tutorial\/'>HTML\/Javascript Bulls and Cows Game Primer Tutorial<\/a>.<\/p-->\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57844' onclick='var dv=document.getElementById(\"d57844\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/word-game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57844' 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='#d57862' onclick='var dv=document.getElementById(\"d57862\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/focus\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57862' 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='#d57875' onclick='var dv=document.getElementById(\"d57875\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/commentary\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57875' 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='#d57891' onclick='var dv=document.getElementById(\"d57891\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/button\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57891' 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='#d57895' onclick='var dv=document.getElementById(\"d57895\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/progress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57895' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s the day after yesterday. And that makes it the day after the &#8220;proof of concept&#8221; HTML\/Javascript Letters In Word Game Tutorial start to our English &#8220;Letters In&#8221; word game. In amongst the web application improvements, we thought of &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-letters-in-word-game-mode-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":[2,12,14,15,37],"tags":[2914,69,1835,174,1580,200,2525,211,1604,4173,3136,4165,281,4188,290,1785,2365,354,367,380,385,1696,429,430,451,3453,452,2730,471,476,477,503,2298,576,587,3351,4179,609,625,652,4186,2020,2415,739,3872,752,3004,3861,4189,2505,846,2791,2394,860,861,1705,1836,2411,919,932,967,997,1915,2232,3274,1866,1133,1137,1159,4187,1209,1212,4172,1238,1254,1262,1675,1319,1321,3594,1891,3694,1583,1498],"class_list":["post-57895","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-_get","tag-ajax","tag-arguments","tag-button","tag-cell","tag-chat","tag-child","tag-click","tag-collaboration","tag-comments","tag-conduit","tag-conic-gradient","tag-css","tag-css-property","tag-data","tag-data-source","tag-dimensions","tag-dom","tag-dropdown","tag-email","tag-emoji","tag-event-driven-programming","tag-file_get_contents","tag-file_put_contents","tag-font","tag-font-size","tag-form","tag-formdata","tag-function","tag-game","tag-games-2","tag-gmail","tag-grid","tag-html","tag-iframe","tag-inline-html-email","tag-inline-html-email-form","tag-input","tag-invitation","tag-javascript","tag-legibility","tag-linear-gradient","tag-localstorage","tag-mailto","tag-makeover","tag-mathematics","tag-maths","tag-mode","tag-mode-of-use","tag-name","tag-notification","tag-notifications","tag-number","tag-onblur","tag-onclick","tag-onkeydown","tag-override","tag-parent","tag-personalization","tag-php","tag-popup","tag-programming","tag-progress","tag-property","tag-recall","tag-select","tag-share","tag-sharing","tag-sms","tag-spread-gesture","tag-style","tag-styling","tag-sudoku","tag-table","tag-text","tag-textarea","tag-textbox","tag-tutorial","tag-tutorials","tag-typing","tag-user","tag-user-entry","tag-window","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57895"}],"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=57895"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57895\/revisions"}],"predecessor-version":[{"id":57901,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57895\/revisions\/57901"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}