Tag Archives: dictionary

Fairy Story Chrome Dictation Tutorial

Posted on by

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 trends with web browsers would suggest you are, though “platforms” 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, “Dictation” is approachable, and so we want to show those non-mobile Google Chrome readers out there what is possible. Now, before getting carried away we have more to do fixing … “Mixed Content” (ie. the mixing of https: and http: protocol data sources) … causing … https: executions to be missing some Emoji placement functionalities … and … http: executions to be missing the new non-mobile Google Chrome Speech to Text “Dictation” functionality … that we’ll see if we can overcome in the days to follow. But in the meantime, try … changed PHP code of fairy_story_assistant.php https: live run … supervising … changed PHP code of speech_supervisor.php non-mobile Google Chrome Speech to Text “Dictation” popup window Stop Press We got around our Mixed Content issues for this better generic live run link. Previous relevant Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial is shown below. If you suffer from the delusion that computers and their relationship to the qwerty keyboard’s history is all “old hat” (or all old news) you need to listen to the riveting The Wubi Effect as we computer programmers continually seek ways to interest and encourage “at the keyboard” (streamlining “input” and “interactive input” suggestion) as if the user is a creator (though if you listen to all of the podcast, to the end, you will understand what “The Cloud” is meaning to our “keyboard help and second guessing” and groupthink, and work out a bit of the history to some of all this thinking). Anyway, we thought, when we presented the recent … Connective English Word Sentence Game Primer Tutorial … wouldn’t those Connectives (in a dropdown) work well with … Fairy Story Phrases Helper SMS Tutorial‘s “Fairy Story” web application … along with … a dropdown of Proper Names (via the “sister” product of Connectives (and “/usr/share/dict/connectives”) out of the box in Linux or macOS via “/usr/share/dict/propernames” dropdown) … and … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Fairy Story Names and Connectives and Punctuation Dropdown Helpers Tutorial

Posted on by

If you suffer from the delusion that computers and their relationship to the qwerty keyboard’s history is all “old hat” (or all old news) you need to listen to the riveting The Wubi Effect as we computer programmers continually seek ways to interest and encourage “at the keyboard” (streamlining “input” and “interactive input” suggestion) as if the user is a creator (though if you listen to all of the podcast, to the end, you will understand what “The Cloud” is meaning to our “keyboard help and second guessing” and groupthink, and work out a bit of the history to some of all this thinking). Anyway, we thought, when we presented the recent … Connective English Word Sentence Game Primer Tutorial … wouldn’t those Connectives (in a dropdown) work well with … Fairy Story Phrases Helper SMS Tutorial‘s “Fairy Story” web application … along with … a dropdown of Proper Names (via the “sister” product of Connectives (and “/usr/share/dict/connectives”) out of the box in Linux or macOS via “/usr/share/dict/propernames” dropdown) … and just a simple (straight), but useful … a dropdown of Punctuation characters ? There is an additional strength of “dropdown” 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 … <?php echo “ $punctsel=”<select id=punsel onchange=\”if (this.value.trim().length > 0) { ontosb(this); }\”><option value=\”\”>Punctuation</option>”; $punctsel.=”<option value=\”.\”>.</option>”; $punctsel.=”<option value=\”?\”>?</option>”; $punctsel.=”<option value=\”!\”>!</option>”; $punctsel.=”<option value=\”,\”>,</option>”; $punctsel.=”<option value=\”:\”>:</option>”; $punctsel.=”<option value=\”;\”>;</option>”; $punctsel.=”<option value=\”(\”>(</option>”; $punctsel.=”<option value=\”)\”>)</option>”; $punctsel.=”<option value=\”[\”>[</option>”; $punctsel.=”<option value=\”]\”>]</option>”; $punctsel.=”<option value=\”{\”>{</option>”; $punctsel.=”<option value=\”}\”>}</option>”; $punctsel.=”<option value=\”@\”>@</option>”; $punctsel.=”<option value=\”&\”>&</option>”; $punctsel.=”<option value=\”%\”>%</option>”; $punctsel.=”<option value=\”$\”>$</option>”; $punctsel.=”<option value=\”*\”>*</option>”; $punctsel.=”<option value=\”^\”>^</option>”; $punctsel.=”<option value=\”+\”>+</option>”; $punctsel.=”<option value=\”=\”>=</option>”; $punctsel.=”<option value=\”-\”>-</option>”; $punctsel.=”<option value=\”_\”>_</option>”; $punctsel.=”<option value=\”|\”>|</option>”; $punctsel.=”<option value=\”/\”>/</option>”; $punctsel.=”<option value=\”\\\\\”>&#92;</option>”; $punctsel.=”<option value=\”~\”>~</option>”; $punctsel.=”<option value=\”`\”>`</option>”; $punctsel.=”<option value=\”<\”><</option>”; $punctsel.=”<option value=\”>\”>></option>”; $punctsel.=”<option id=squote value=\”\”>'</option>”; $punctsel.=”<option id=dquote value=\”\”>"</option>”; $punctsel.=”</select> and/or “; exec(“sort -n /usr/share/dict/propernames > ” . dirname(__FILE__) . “/propernames.txt”); $nameslist=explode(“\n”, file_get_contents(dirname(__FILE__) . “/propernames.txt”)); unlink(dirname(__FILE__) . “/propernames.txt”); exec(“sort -n /usr/share/dict/connectives > ” . dirname(__FILE__) . “/connectives.txt”); $conslist=explode(“\n”, file_get_contents(dirname(__FILE__) . “/connectives.txt”)); unlink(dirname(__FILE__) . “/connectives.txt”); $namesselihsuffix=””; for ($ii=0; $ii<sizeof($nameslist); $ii++) { $namesselihsuffix.='<option value=”‘ . $nameslist[$ii] . ‘”>’ . $nameslist[$ii] . ‘</option>’; } $consselihsuffix=””; for ($ii=0; $ii<sizeof($conslist); $ii++) { if ($conslist[$ii] == “i”) { $consselihsuffix.='<option value=’ . str_replace(‘”i”‘,'”I”‘,'”‘ . $conslist[$ii] . ‘”‘) . str_replace(‘>i<‘,’>I<‘,’>’ . $conslist[$ii] . ‘<‘) . ‘/option>’; } else if (trim($conslist[$ii]) != “”) { $consselihsuffix.='<option value=”‘ . $conslist[$ii] . ‘”>’ . $conslist[$ii] . ‘</option>’; $consselihsuffix.='<option value=”‘ . strtoupper(substr($conslist[$ii],0,1)) . substr($conslist[$ii],1) . … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Word Guessing or Synonym Game for Two Tutorial

Posted on by

The reminder of just how brilliant is the … WordReference website … the reminder occurring when we presented the recent Italian French Spanish Verb Conjugation Emoji Image Tutorial … combined with … the search for a web application with synergy, leading us to Word Guessing Game for Two Primer Tutorial … has us, today … … adding onto … Word Guess “buzzing in” for two players … with … Synonym (in English) Guess “buzzing in” for two players … as some additional functionality to this game calling on the good ol’ “/usr/share/dict/words” inbuilt dictionary of words that comes with Linux (and macOS) “out of the box” … hooooorayyyyy! In broad brush terms, we use … the Linux “/usr/share/dict/words” inbuilt dictionary of English words to pick a candidate word … ask, via jQuery Ajax of WordReference if this word has synonyms … if not, reask “/usr/share/dict/words” inbuilt dictionary for a word … else … sit there and wait for a “buzz in” via mouse or keyboard for a player answer, and if they are correct, their score increases by the length of the synonym word(s) Here’s a live run and here is the HTML programming source code you could call the changed wordguessgame.html code. Previous relevant Word Guessing Game for Two Primer Tutorial is shown below. Word Games help vocabulary for ESL students. There is also not much doubt that collaboration can help ESL students, who also learn quicker with other students present. 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 … non-mobile users can play the game with one user using the mouse and the other using the keyboard 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 The events we code for are … onclick … will be recognised on non-mobile platforms ontouchstart … will be recognised on mobile platforms (where it will supercede any onlick event) onkeyup … will be recognised on non-mobile platforms … so you can see that the colour coding of the webpage becomes important for the mobile platform usage. Today’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. Programmers … Continue reading →

Posted in Ajax, eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

Italian French Spanish Verb Conjugation Emoji Image Tutorial

Posted on by

We used the combining of … a relook at Italian French Spanish Verb Conjugation Text to Speech Tutorial … with … the recent Emoji Image Creator or Media Paster Multiple Copy Tutorial … to find some practical improvements to some of our existent web applications regarding the use of Emoji Image (in today’s case in the form of background images). We think the existent French and Italian and Spanish flags as background images are a bit too imposing and so we intervened as per the Javascript … function emoji_images_maybe(inlineurl) { switch (inlineurl) { case “url(‘it.jpg’)”: document.getElementById(‘mybodtr’).style.height=’90px’; document.getElementById(‘englishtoitalian’).style.height=’90px’; return “linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url([italianFlagEmojiImageDataURIGoesHere]); break; case “url(‘fr.jpg’)”: document.getElementById(‘mybodtr’).style.height=’90px’; document.getElementById(‘englishtoitalian’).style.height=’90px’; return “linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url([frenchFlagEmojiImageDataURIGoesHere]); break; case “url(‘es.jpg’)”: document.getElementById(‘mybodtr’).style.height=’90px’; document.getElementById(‘englishtoitalian’).style.height=’90px’; return “linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url([spanishFlagEmojiImageDataURIGoesHere]); break; default: break; } return inlineurl; } function fixall(iti) { was=”; otv=”; document.getElementById(‘conjugationcell’).innerHTML=”; document.getElementById(‘sl’).value=iti; document.getElementById(‘sltwo’).value=iti; document.getElementById(‘slto’).value=iti; document.getElementById(‘slito’).value=iti; document.getElementById(‘slverb’).value=iti; document.getElementById(‘slconj’).value=iti; document.getElementById(‘mybodtr’).style.backgroundImage=emoji_images_maybe(“url(‘” + iti + “.jpg’)”); document.getElementById(‘englishtoitalian’).style.backgroundImage=emoji_images_maybe(“url(‘” + iti + “.jpg’)”); return iti; } Here’s a reminder of how you might derive … Flag Italian[italianFlagEmojiImageDataURIGoesHere]IT 🇮🇹 French[frenchFlagEmojiImageDataURIGoesHere]FR 🇫🇷 Spanish[spanishFlagEmojiImageDataURIGoesHere]ES 🇪🇸 Navigate to Emoji Image Creator … into textbox enter (where, regarding an ISO two character code relating to flag country A=127462 CodePoint to Z=127487 CodePoint) … 127470.127481 127467.127479 127466.127480 … Click “Create Image” button (though use of links above do this for you) … … “Copy Image” the flag at Google Pagespeed … … “Paste” back at Emoji Image Creator … … Highlight and “Copy” the data uri shown (relevant to flags above) This mini-makeover for italian_conjugation.html‘s changed code, can be tried with this live run link. Previous relevant Italian French Spanish Verb Conjugation Text to Speech Tutorial is shown below. In following up on Italian and French and Spanish Verb Conjugation Event Tutorial as shown below we’ve increased functionality of English translations by adding Google Translate Text to Speech capabilities to … Italian French Spanish … via a new “loudspeaker” icon. Some of the talking points with today’s changes involve … a “reveal” idea whereby the showing of an HTML element is controlled by its Javascript DOM [element].style.width CSS property, whereby the element is effectively invisible at width:1px and in our case today becomes visible, at width:20px, and, thus, clickable, for Google Translate popup window translation and text to speech capabilities via the control of … binary decision making GUI ease of using HTML input tag type=checkbox and the associated Javascript DOM document.getElementById([element]).checked … because … UX-wise it is good to forewarn users with an option when it … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Image Map Notice Board Tutorial

Posted on by

Following on from yesterday’s HTML Square Horizontal Rule Image Map Are You Okay Tutorial we wanted, today, to “test the waters” with the news of recent emoji additions to ask a lot of this world, and see how emojis stack up against International Signage concepts for what you might see as symbology on the Notice Board of an Aged Care centre. We don’t say “Australia” here, because, as much as anything, Emojis, invented in Japan, seem to be spreading far and wide with an International feel to where they are going. But place yourself in an International Agency for International Signage, or Emoji World Symposium, scenario, and imagine how you could come up with these internationally understood ideograms and symbols, and not come up against resistance and/or cultural misunderstanding? Impossible, we think. Anyway, testing out the waters this way via our usual (for the example of ascertaining emoji information regarding “pills medicine”) … Feed into web browser address bar pills emojipedia (Google search, for us) … gets us to (for the example of the “pills medicine” concept) … Emojipedia’s Pills Emoji webpage where we scroll down to Codepoints section and copy the “U+1F48A” … into the web address … arriving at Google search list whose second entry (containing “fileformat” in its URL (for single emojis, and we look for “iemoji” when it is a composite emoji list)), click on the link of which gets us to … FileFormat.Info’s Unicode Character ‘PILL’ (U+1F48A) – FileFormat.Info where we scroll down to HTML Entity (decimal) section and copy the &#128138; as the requirement to show the Pill 💊 emoji … techniques, the work of which resulted in … … and in doing this, saw the exercise as a “mixed bag” really. Emojis are getting better and better with (noun and verb) “concepts”, but even a concept or word like (the noun) “window” is not well served (we had to use “house” really). And then, for example, “toilets” look different around the world. It’s a hard ask, but we think one day emojis will become a serious contender for some offline applications of International Signage. By the way, if you think the work within the HTML iframe above looks better than in today’s tutorial picture we think you are correct. The bold bits of the styling applied to this work below came about by that technique outlined in HTML Square Horizontal Rule Image Map … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Image Map Are You Okay Tutorial

Posted on by

The recent HTML Square Horizontal Rule Image Map Jigsaw Quiz Tutorial has a fair degree of flexibility, and we want to try more ideas to learn more (and modify more, as you will see later). Was reading through a course study diary and came across an entry for (the awfully spelt) “R U OK?” (better spelt “Are You Okay?”) campaign, urging us to check on the mental health of our fellow citizens, in order to perhaps head off suicide attempts further down the track for people under stress and/or duress. Using a hand written diary entry doesn’t sound much like a computer aided media job, but we remember with Trip Mobile Device Camera Versus Hard Copy Scan Tutorial how a trip diary remembrance was quite an interesting project … so. We decided today to not use any mobile devices to create the media we wanted. We just used this MacBook Pro’s Photobooth desktop application (remembering to involve Edit -> Auto Flip New Items option) to successfully photograph the diary page. Over to you, “Image Guillotine Jigsaw Map” functionality to use this image as input for our emoji annotations, emojis we selected to try to aid with procedure synopsis purposes (study aids, if you will), similar to how First Aid students will tell you DRS ABCD can be a good reminder tool. We emerge from this with … To get the emojis to be big enough for our liking … and you can see from today’s animated GIF how we went about all this … we added the CSS … <style> div { font-size: 48px !important; } </style> … experimenting to find out how we should succeed here by … clicking the (yellow) textarea extracting the Page Source (via the web browser) reconstituting it to explore good HTML … in order to … refresh the HTML and display … where we realized doing this that an emoji usage weakness had presented itself with our code. We forgot to add within the webpage’s <head> </head> header section the useful (pretty much always actually) meta tag … <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> The changed square_hr_tracing.htm improves the situation we hope. Previous relevant HTML Square Horizontal Rule Image Map Jigsaw Quiz Tutorial is shown below. We add onto yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Content Tutorial‘s Global data-* Attribute items functionality the new … Tick Cross Text and/or Emoji over one line … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Image Map Jigsaw Quiz Tutorial

Posted on by

We add onto yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Content Tutorial‘s Global data-* Attribute items functionality the new … Tick Cross Text and/or Emoji over one line Text and/or Emoji over two lines Question and Answer Quiz … where the difference is we have to sequence area element definitions into separate arrangements for … question … versus … answer … and need to allow for dynamic HTML input type=text (for single answer) versus HTML select (for multiple choice answer) options depending, respectively, on what the user enters into the Global data-* Attribute items … data-q=”” data-a=”” We used this new functionality to create the March Quiz below … So for this new HTML quiz work … the changed square_hr_tracing.htm with this live run link the changed tsheet.js Previous relevant HTML Square Horizontal Rule Image Map Jigsaw Content Tutorial is shown below. There’s a push on to genericize our latest Timesheet Helper into a more generic Document Helper for documents that benefit from positioning Text and/or Emojis. Often tables and grids are perfect candidates for this type of functionality. Effectively scan the document or form as the underlying image here, and use this recent web application to help you fill in the detail. Believe it or not this genericization push is nothing near as difficult as the scribbling signature work of yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Signatures Tutorial, but to think of all the possibilities is quite an ask, so we will make it quite open handed, to leave the user with their imagination to get better and better working the functionality. That new functionality revolves around the use of a new ➕ dropdown element, and uses HTML/Javascript Global data-* Attribute items. Whatever is shown by those dropdowns, though, know that (as long as you specify your own area element properties yourself via the ❓ button resultant Javascript prompt window “asker”) … Any Global data-* Attribute items filled with characters and/or emojis can form HTML div element content (separated by line feed between items) on displaying the Image Map HTML in new window or via email attachment download and display. Just quietly, they don’t have to be the dropdown option “helper” ones, though you can use them too as required. Eg. data-oneline=”Line1″ data-twoline=”Line2″ will result in      Line1Line2 These useful items can make your HTML much more like XML, in other words more informational. And so for … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML Square Horizontal Rule Image Map Jigsaw Content Tutorial

Posted on by

There’s a push on to genericize our latest Timesheet Helper into a more generic Document Helper for documents that benefit from positioning Text and/or Emojis. Often tables and grids are perfect candidates for this type of functionality. Effectively scan the document or form as the underlying image here, and use this recent web application to help you fill in the detail. Believe it or not this genericization push is nothing near as difficult as the scribbling signature work of yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Signatures Tutorial, but to think of all the possibilities is quite an ask, so we will make it quite open handed, to leave the user with their imagination to get better and better working the functionality. That new functionality revolves around the use of a new ➕ dropdown element, and uses HTML/Javascript Global data-* Attribute items. Whatever is shown by those dropdowns, though, know that (as long as you specify your own area element properties yourself via the ❓ button resultant Javascript prompt window “asker”) … Any Global data-* Attribute items filled with characters and/or emojis can form HTML div element content (separated by line feed between items) on displaying the Image Map HTML in new window or via email attachment download and display. Just quietly, they don’t have to be the dropdown option “helper” ones, though you can use them too as required. Eg. data-oneline=”Line1″ data-twoline=”Line2″ will result in      Line1Line2 These useful items can make your HTML much more like XML, in other words more informational. And so for today’s public dropdown options, starting down this road, we offer Global data-* Attribute item arrangements for … Tick Cross Text and/or Emoji over one line Text and/or Emoji over two lines For this new HTML div content on return … the changed square_hr_tracing.htm with this live run link the changed tsheet.js Previous relevant HTML Square Horizontal Rule Image Map Jigsaw Signatures Tutorial is shown below. Not sure if it’s happened before, but just the one additional letter in a blog posting title today differentiates it from the recent HTML Square Horizontal Rule Image Map Jigsaw Signature Tutorial. Mind you that letter is a plural implying “s” and programmers will tell you often, I’m sure, that to change program logic from “it only needs to work for one instance” to “it needs to work for as many instances of an instance as is necessary” … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment