{"id":51193,"date":"2020-12-17T03:01:55","date_gmt":"2020-12-16T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51193"},"modified":"2020-12-17T11:51:50","modified_gmt":"2020-12-17T01:51:50","slug":"fairy-story-chrome-dictation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fairy-story-chrome-dictation-tutorial\/","title":{"rendered":"Fairy Story Chrome Dictation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_dictation.jpg\" title=\"Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial\" \/><\/a><p class=\"wp-caption-text\">Fairy Story Chrome Dictation Tutorial<\/p><\/div>\n<p>There is another tool we can think of to improve <a title='Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial' href='#fsncpdht'>Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial<\/a>.  That is Speech to Text functionality that can work on Google Chrome non-mobile platforms.  Still here with all this?   Current trends with web browsers would suggest you are, though &#8220;platforms&#8221; is a bit of an issue.  However, in the interests of what is becoming possible, it behoves us to say that as far as Artificial Intelligence for we mere mortal programmers, &#8220;Dictation&#8221; is approachable, and so we want to show those non-mobile Google Chrome readers out there what is possible.<\/p>\n<p>Now, before getting carried away we have more to do fixing &#8230;<\/p>\n<ul>\n<li>&#8220;Mixed Content&#8221; (ie. the mixing of https: and http: protocol data sources) &#8230; causing &#8230;<\/li>\n<li>https: executions to be missing some Emoji placement functionalities &#8230; and &#8230;<\/li>\n<li>http: executions to be missing the new non-mobile Google Chrome Speech to Text &#8220;Dictation&#8221; functionality<\/li>\n<\/ul>\n<p> &#8230; that we&#8217;ll see if we can overcome in the days to follow.  But in the meantime, try &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php-------GETME\" title=\"fairy_story_assistant.php\">changed PHP code<\/a> of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php-------GETME\" title=\"fairy_story_assistant.php\">fairy_story_assistant.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php\" title=\"Click picture\">https: live run<\/a> &#8230; supervising &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php--------------------GETME\" title=\"speech_supervisor.php\">changed PHP code<\/a> of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php--------------------GETME\" title=\"speech_supervisor.php\">speech_supervisor.php<\/a> non-mobile Google Chrome Speech to Text &#8220;Dictation&#8221; popup window<\/li>\n<\/ul>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>We got around our Mixed Content issues for this better generic <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html\" title=\"Click picture\">live run<\/a> link.<\/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\/fairy-story-chrome-dictation-tutorial\/'>Fairy Story Chrome Dictation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fsncpdht'>Previous relevant <a target=_blank title='Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/fairy-story-names-and-connectives-and-punctuation-dropdown-helpers-tutorial\/'>Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_better.jpg\" title=\"Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial\" \/><\/a><p class=\"wp-caption-text\">Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial<\/p><\/div>\n<p>If you suffer from the delusion that computers and their relationship to the qwerty keyboard&#8217;s history is all &#8220;old hat&#8221; <font size=1>(or all old news)<\/font> you need to listen to the riveting <a target=_blank title='The Wubi Effect' href='https:\/\/www.wnycstudios.org\/podcasts\/radiolab\/articles\/wubi-effect'>The Wubi Effect<\/a> as we computer programmers continually seek ways to interest and encourage &#8220;at the keyboard&#8221; <font size=1>(streamlining &#8220;input&#8221; and &#8220;interactive input&#8221; suggestion)<\/font> as if the user is a creator <font size=1>(though if you listen to <i>all<\/i> of the podcast, to the end, you will understand what &#8220;The Cloud&#8221; is meaning to our &#8220;keyboard help and second guessing&#8221; and groupthink, and work out a bit of the history to some of all this thinking)<\/font>.  Anyway, we thought, when we presented the recent &#8230;<\/p>\n<ul>\n<li><a title='Connective English Word Sentence Game Primer Tutorial' href='#cewsgpt'>Connective English Word Sentence Game Primer Tutorial<\/a> &#8230; wouldn&#8217;t those Connectives (in a dropdown) work well with &#8230;<\/li>\n<li><a target=_blank title='Fairy Story Phrases Helper SMS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/fairy-story-phrases-helper-sms-tutorial\/'>Fairy Story Phrases Helper SMS Tutorial<\/a>&#8216;s &#8220;Fairy Story&#8221; web application &#8230; along with &#8230;\n<ol>\n<li>a dropdown of Proper Names (via the &#8220;sister&#8221; product of Connectives (and &#8220;\/usr\/share\/dict\/connectives&#8221;) out of the box in Linux or macOS via &#8220;\/usr\/share\/dict\/propernames&#8221; dropdown) &#8230; and just a simple (straight), but useful &#8230;<\/li>\n<li>a dropdown of Punctuation characters<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>?  There is an additional strength of &#8220;dropdown&#8221; choices appending to a div contenteditable=true scenario being that we can contextualize what to do with the cursor as the user changes the dropdown selections.  The PHP changes &#8230;<\/p>\n<p>&lt;?php echo \u201c<br \/>\n<code><br \/>\n $punctsel=\"&lt;select id=punsel onchange=\\\"if (this.value.trim().length &gt; 0) { ontosb(this); }\\\"&gt;&lt;option value=\\\"\\\"&gt;Punctuation&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\".\\\"&gt;.&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"?\\\"&gt;?&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"!\\\"&gt;!&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\",\\\"&gt;,&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\":\\\"&gt;:&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\";\\\"&gt;;&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"(\\\"&gt;(&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\")\\\"&gt;)&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"[\\\"&gt;[&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"]\\\"&gt;]&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"{\\\"&gt;{&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"}\\\"&gt;}&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"@\\\"&gt;@&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"&\\\"&gt;&&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"%\\\"&gt;%&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"$\\\"&gt;$&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"*\\\"&gt;*&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"^\\\"&gt;^&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"+\\\"&gt;+&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"=\\\"&gt;=&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"-\\\"&gt;-&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"_\\\"&gt;_&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"|\\\"&gt;|&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"\/\\\"&gt;\/&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"\\\\\\\\\\\"&gt;&amp;#92;&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"~\\\"&gt;~&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"`\\\"&gt;`&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"&lt;\\\"&gt;&lt;&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option value=\\\"&gt;\\\"&gt;&gt;&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option id=squote value=\\\"\\\"&gt;&apos;&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;option id=dquote value=\\\"\\\"&gt;&quot;&lt;\/option&gt;\";<br \/>\n $punctsel.=\"&lt;\/select&gt; and\/or \";<br \/>\n exec(\"sort -n \/usr\/share\/dict\/propernames &gt; \" . dirname(__FILE__) . \"\/propernames.txt\");<br \/>\n $nameslist=explode(\"\\n\", file_get_contents(dirname(__FILE__) . \"\/propernames.txt\"));<br \/>\n unlink(dirname(__FILE__) . \"\/propernames.txt\");<br \/>\n exec(\"sort -n \/usr\/share\/dict\/connectives &gt; \" . dirname(__FILE__) . \"\/connectives.txt\");<br \/>\n $conslist=explode(\"\\n\", file_get_contents(dirname(__FILE__) . \"\/connectives.txt\"));<br \/>\n unlink(dirname(__FILE__) . \"\/connectives.txt\");<br \/>\n $namesselihsuffix=\"\";<br \/>\n for ($ii=0; $ii&lt;sizeof($nameslist); $ii++) {<br \/>\n   $namesselihsuffix.='&lt;option value=\"' . $nameslist[$ii] . '\"&gt;' . $nameslist[$ii] . '&lt;\/option&gt;';<br \/>\n }<br \/>\n $consselihsuffix=\"\";<br \/>\n for ($ii=0; $ii&lt;sizeof($conslist); $ii++) {<br \/>\n   if ($conslist[$ii] == \"i\") {<br \/>\n   $consselihsuffix.='&lt;option value=' . str_replace('\"i\"','\"I\"','\"' . $conslist[$ii] . '\"') . str_replace('&gt;i&lt;','&gt;I&lt;','&gt;' . $conslist[$ii] . '&lt;') . '\/option&gt;';<br \/>\n   } else if (trim($conslist[$ii]) != \"\") {<br \/>\n   $consselihsuffix.='&lt;option value=\"' . $conslist[$ii] . '\"&gt;' . $conslist[$ii] . '&lt;\/option&gt;';<br \/>\n   $consselihsuffix.='&lt;option value=\"' . strtoupper(substr($conslist[$ii],0,1)) . substr($conslist[$ii],1) . '\"&gt;' . strtoupper(substr($conslist[$ii],0,1)) . substr($conslist[$ii],1) . '&lt;\/option&gt;';<br \/>\n   }<br \/>\n }<br \/>\n<\/code><br \/>\n\u201c; ?&gt;<\/p>\n<p> &#8230; <font color=blue>used in<\/font> &#8230;<\/p>\n<p>&lt;?php echo \u201c<br \/>\n<code><br \/>\nfunction ontosb(tvn) {<br \/>\n  var qprefix=\"\";<br \/>\n  if ((\" \" + top.document.getElementById(\"storyboard\").innerHTML).replace(\/\\&nbsp\\;\/g,\" \").slice(-1) != \" \" && ( ((tvn.value + \" \").substring(0,1) &gt;= \"0\" && (tvn.value + \" \").substring(0,1) &lt;= \"9\") || ((tvn.value + \" \").substring(0,1) &gt;= \"A\" && (tvn.value + \" \").substring(0,1) &lt;= \"Z\") || ((tvn.value + \" \").substring(0,1) &gt;= \"a\" && (tvn.value + \" \").substring(0,1) &lt;= \"z\") ) ) {<br \/>\n   qprefix=\" \";<br \/>\n  }<br \/>\n  top.document.getElementById(\"storyboard\").innerHTML+=qprefix + tvn.value + \"&nbsp;\";<br \/>\n  tvn.value=\"\";<br \/>\n  placeCaretAtEnd(top.document.getElementById('storyboard'));<br \/>\n  top.document.getElementById(\"storyboard\").focus();<br \/>\n}<br \/>\n<br \/>\nif ((navigator.userAgent.toLowerCase().indexOf('firefox') != -1 || issetgetcp())) {<br \/>\nwtw+='&lt;h4&gt;Your Fairy Story follows &lt;a title=Undo onclick=getss(-1); style=text-decoration:underline;cursor:pointer;&gt;&amp;#10134;&lt;\/a&gt;&lt;a title=Redo onclick=getss(1); style=text-decoration:underline;cursor:pointer;&gt;&amp;#10133;&lt;\/a&gt; ... good luck, and please double up on your Enter keys,  optionally clicking helper links for <font color=blue>&lt;select id=namesel onchange=\\\"if (this.value.trim().length &gt; 0) { ontosb(this); }\\\"&gt;&lt;option value=\\\"\\\"&gt;Name&lt;\/option&gt;&lt;?php echo $namesselihsuffix; ?&gt;&lt;\/select&gt; and\/or &lt;select id=consel onchange=\\\"if (this.value.trim().length &gt; 0) { ontosb(this); }\\\"&gt;&lt;option value=\\\"\\\"&gt;Connectives&lt;\/option&gt;&lt;?php echo $consselihsuffix; ?&gt;&lt;\/select&gt; and\/or &lt;?php echo $punctsel; ?&gt;<\/font>Emoji &lt;a target=_blank title=\"Other ways to paste Emojis\" href=\"\/\/www.google.com.au\/search?q=emoji+keyboard+shortcuts&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&dcr=0&ei=x7JKWsrFGcHN8gfBy5rABw\"&gt;placement&lt;\/a&gt; ... &lt;span title=\"Share via Email and you can Copy the work below and Paste into the email body\" style=\"text-decoration:underline;cursor:pointer;\" onclick=\"cah=true; setTimeout(nocah,7000);\"&gt;&amp;#128231; via &amp;#128203;&lt;\/span&gt;&lt;a id=\"eemail\" href=\"mailto:?subject=My%20Fairy%20Story\" title=\"Share via Email and you can Copy the work below and Paste into the email body\"&gt;&lt;\/a&gt; ...&lt;\/h4&gt;' + String.fromCharCode(13);<br \/>\n} else {<br \/>\nwtw+='&lt;h4&gt;Your Fairy Story follows &lt;a title=Undo onclick=getss(-1); style=text-decoration:underline;cursor:pointer;&gt;&amp;#10134;&lt;\/a&gt;&lt;a title=Redo onclick=getss(1); style=text-decoration:underline;cursor:pointer;&gt;&amp;#10133;&lt;\/a&gt; ... good luck, optionally clicking helper links for <font color=blue>&lt;select id=namesel onchange=\\\"if (this.value.trim().length &gt; 0) { ontosb(this); }\\\"&gt;&lt;option value=\\\"\\\"&gt;Name&lt;\/option&gt;&lt;?php echo $namesselihsuffix; ?&gt;&lt;\/select&gt; and\/or &lt;select id=consel onchange=\\\"if (this.value.trim().length &gt; 0) { ontosb(this); }\\\"&gt;&lt;option value=\\\"\\\"&gt;Connectives&lt;\/option&gt;&lt;?php echo $consselihsuffix; ?&gt;&lt;\/select&gt; and\/or &lt;?php echo $punctsel; ?&gt;<\/font>Emoji &lt;a target=_blank title=\"Other ways to paste Emojis\" href=\"\/\/www.google.com.au\/search?q=emoji+keyboard+shortcuts&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&dcr=0&ei=x7JKWsrFGcHN8gfBy5rABw\"&gt;placement&lt;\/a&gt; ... &lt;a onclick=\"cah=true; setTimeout(nocah,7000);\" id=\"eemail\" href=\"mailto:?subject=My%20Fairy%20Story\" title=\"Share via Email and you can Copy the work below and Paste into the email body\"&gt;&amp;#128231; via &amp;#128203;&lt;\/a&gt; ...&lt;\/h4&gt;' + String.fromCharCode(13);<br \/>\n}<br \/>\n<\/code><br \/>\n\u201c; ?&gt;<\/p>\n<p> &#8230; that &#8220;dropdown being a bit like autocompletion&#8221; aiding that poor old neglected <font size=1>(more like, overly exploited)<\/font> qwerty keyboard getting some peace, perhaps?!<\/p>\n<p>Give your keyboard a rest as you try <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html-----GETME\" title=\"fairy_story_assistant.html\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html-----GETME\" title=\"fairy_story_assistant.html\">fairy_story_assistant.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html\" title=\"Click picture\">live run<\/a> supervisor of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php------GETME\" title=\"fairy_story_assistant.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php------GETME\" title=\"fairy_story_assistant.php\">fairy_story_assistant.php<\/a> Fairy Story creator web application!<\/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\/fairy-story-names-and-connectives-and-punctuation-dropdown-helpers-tutorial\/'>Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cewsgpt'>Previous relevant <a target=_blank title='Connective English Word Sentence Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/connective-english-word-sentence-game-primer-tutorial\/'>Connective English Word Sentence 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\/PHP\/connective_sentences.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Connective English Word Sentence Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/connective_sentences.jpg\" title=\"Connective English Word Sentence Game Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Connective English Word Sentence Game Primer Tutorial<\/p><\/div>\n<p>On a similar &#8220;English word&#8221; theme to yesterday&#8217;s <a title='Word Guessing or Synonym Game for Two Tutorial' href='#wgsgtt'>Word Guessing or Synonym Game for Two Tutorial<\/a> today we want to create an &#8230;<\/p>\n<ul>\n<li>online game &#8230;<\/li>\n<li>constructing English sentences &#8230;<\/li>\n<li>via English words &#8230; but, perhaps a tad obtusely &#8230;<\/li>\n<li>our users are encouraged to form the sentences on &#8220;the scaffolding&#8221; of those short words of (English language) life &#8230; our so called &#8220;connective words&#8221; (in English) whether they be conjunctions or adverbs <font size=1>(or some small verbs)<\/font> or pronouns or articles or prepositions<\/li>\n<\/ul>\n<p>There is another &#8220;data source&#8221; similarity to yesterday&#8217;s modus operandi (that used &#8220;\/usr\/share\/dict\/words&#8221; inbuilt dictionary of words that comes with Linux (and macOS) &#8220;out of the box&#8221;), as we again use a resource from that inbuilt dictionary, only this time referencing (the extremely useful) &#8220;\/usr\/share\/dict\/connectives&#8221; file of English connective (and invariably short) words.<\/p>\n<p>No scoring with our game today, just the idea the user might want to share via Email or SMS their &#8220;English Connective Word Based Sentence&#8221; achievements!<\/p>\n<p>So feel free to try today&#8217;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/connective_sentences.php_GETME\" title=\"connective_sentences.php\">connective_sentences.php<\/a> code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/connective_sentences.php\" title=\"Click picture\">live run<\/a> 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\/connective-english-word-sentence-game-primer-tutorial\/'>Connective English Word Sentence Game Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wgsgtt'>Previous relevant <a target=_blank title='Word Guessing or Synonym Game for Two Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-guessing-or-synonym-game-for-two-tutorial\/'>Word Guessing or Synonym Game for Two Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Word Guessing or Synonym Game for Two Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguesssynonym.jpg\" title=\"Word Guessing or Synonym Game for Two Tutorial\" \/><\/a><p class=\"wp-caption-text\">Word Guessing or Synonym Game for Two Tutorial<\/p><\/div>\n<p>The reminder of just how brilliant is the &#8230;<\/p>\n<ul>\n<li><a target=_blank title='WordReference website' href='http:\/\/wordreference.com'>WordReference<\/a> website &#8230; the reminder occurring when we presented the recent <a target=_blank title='Italian French Spanish Verb Conjugation Emoji Image Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/italian-french-spanish-verb-conjugation-emoji-image-tutorial\/'>Italian French Spanish Verb Conjugation Emoji Image Tutorial<\/a> &#8230; combined with &#8230;<\/li>\n<li>the search for a web application with synergy, leading us to <a title='Word Guessing Game for Two Primer Tutorial' href='#wggtpt'>Word Guessing Game for Two Primer Tutorial<\/a> &#8230; has us, today &#8230;<\/li>\n<\/ul>\n<p> &#8230; adding onto &#8230;<\/p>\n<ul>\n<li>Word Guess &#8220;buzzing in&#8221; for two players &#8230; with &#8230;<\/li>\n<li>Synonym (in English) Guess &#8220;buzzing in&#8221; for two players<\/li>\n<\/ul>\n<p> &#8230; as some additional functionality to this game calling on the good ol&#8217; &#8220;\/usr\/share\/dict\/words&#8221; inbuilt dictionary of words that comes with Linux (and macOS) &#8220;out of the box&#8221; &#8230; hooooorayyyyy!<\/p>\n<p>In broad brush terms, we use &#8230;<\/p>\n<ul>\n<li>the Linux &#8220;\/usr\/share\/dict\/words&#8221; inbuilt dictionary of English words to pick a candidate word &#8230;<\/li>\n<li>ask, via <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> of <a target=_blank title='WordReference website' href='http:\/\/wordreference.com'>WordReference<\/a> if this word has synonyms &#8230;\n<ol>\n<li>if not, reask &#8220;\/usr\/share\/dict\/words&#8221; inbuilt dictionary for a word &#8230; else &#8230;<\/li>\n<li>sit there and wait for a &#8220;buzz in&#8221; via mouse or keyboard for a player answer, and if they are correct, their score increases by the length of the synonym word(s)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Here&#8217;s a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html\" title='Click picture'>live run<\/a> and here is the HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html--GETME\" title=\"wordguessgame.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html--GETME\" title=\"wordguessgame.html\">wordguessgame.html<\/a> code.<\/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-guessing-or-synonym-game-for-two-tutorial\/'>Word Guessing or Synonym Game for Two Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wggtpt'>Previous relevant <a target=_blank title='Word Guessing Game for Two Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/word-guessing-game-for-two-primer-tutorial\/'>Word Guessing Game for Two Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Word Guessing Game for Two Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.jpg\" title=\"Word Guessing Game for Two Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Word Guessing Game for Two Primer Tutorial<\/p><\/div>\n<p>Word Games help vocabulary for <a target=_blank title='English as a second or foreign language' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> students.  There is also not much doubt that collaboration can help ESL students, who also learn quicker with other students present.<\/p>\n<p>Today we create a web application Word Guessing Game designed for two.  Not two devices, the one device for two users (hovering over it).  So for &#8230;<\/p>\n<ul>\n<li>non-mobile users can play the game with one user using the mouse and the other using the keyboard<\/li>\n<li>mobile users can play with one user using touch on the blue areas of the web application and the other using touch on other places<\/li>\n<\/ul>\n<p>The events we code for are &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript onclick event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onclick.asp'>onclick<\/a>  &#8230; will be recognised on non-mobile platforms<\/li>\n<li><a target=_blank title='Javascript ontouchstart event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_event.asp'>ontouchstart<\/a>  &#8230; will be recognised on mobile platforms (where it will supercede any onlick event)<\/li>\n<li><a target=_blank title='Javascript onkeyup event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onkeyup.asp'>onkeyup<\/a> &#8230;  will be recognised on non-mobile platforms<\/li>\n<\/ul>\n<p> &#8230; so you can see that the colour coding of the webpage becomes important for the mobile platform usage.<\/p>\n<p>Today&#8217;s game tests English vocabulary skills.  Why just English?   Well, it uses English words, based on the dictionary arrangements at its (web) server, which happens to be based on English.<\/p>\n<p>Programmers often use <a target_blank title='Words (unix) information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Words_%28Unix%29'>Linux dictionary files<\/a> as a means to get a word list, and that list could be in any language, and for ours it is English.<\/p>\n<p>Here&#8217;s a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html\" title='Click picture'>live run<\/a> and here is the HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wordguessgame.html_GETME\" title=\"wordguessgame.html\">wordguessgame.html<\/a> which, again, uses some PHP we&#8217;ve talked about with a lot of our <a target=_blank title='Word Games' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/word-game'>word games<\/a> at this blog, on a &#8220;Client Pre-Emptive Iframe&#8221; scenario in a couple of HTML iframe elements we include into today&#8217;s game.  We thank this free online <a target=_blank href=\"http:\/\/www.thefreedictionary.com\/\">English<\/a> dictionary that gets called on if the user chooses to.<\/p>\n<p>We hope you try it, and like it.  By the way, you can also play the game as a single user.<\/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='#d17485' onclick='var dv=document.getElementById(\"d17485\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=SQL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17485' 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='#d51091' onclick='var dv=document.getElementById(\"d51091\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synonym\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51091' 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='#d51099' onclick='var dv=document.getElementById(\"d51099\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sentence\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51099' 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='#d51153' onclick='var dv=document.getElementById(\"d51153\"); 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='d51153' 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='#d51193' onclick='var dv=document.getElementById(\"d51193\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dictation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51193' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There is another tool we can think of to improve Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial. That is Speech to Text functionality that can work on Google Chrome non-mobile platforms. Still here with all this? Current &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/fairy-story-chrome-dictation-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[3088,1818,1695,3517,3518,3502,2442,275,276,278,2127,325,326,342,367,2488,520,576,581,3155,609,3513,652,673,3516,3226,2505,919,932,950,997,3512,2502,3511,1866,2553,1200,1319,1452,3509,3510],"class_list":["post-51193","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-ai","tag-artificial-intelligence","tag-autocompletion","tag-cantonese","tag-china","tag-connective","tag-contenteditable","tag-cross-browser","tag-cross-browser-issues","tag-cross-platform","tag-cursor","tag-dictation","tag-dictionary","tag-div","tag-dropdown","tag-fairy-story","tag-google-chrome","tag-html","tag-http","tag-https","tag-input","tag-interactive-input","tag-javascript","tag-keyboard","tag-mandarin","tag-mixed-content","tag-name","tag-personalization","tag-php","tag-platform","tag-programming","tag-proper-name","tag-punctuation","tag-qwerty","tag-select","tag-speech-to-text","tag-stop-press","tag-tutorial","tag-word","tag-wubi","tag-wubi-effect"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51193"}],"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=51193"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51193\/revisions"}],"predecessor-version":[{"id":51198,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51193\/revisions\/51198"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}