{"id":26895,"date":"2016-12-14T03:01:36","date_gmt":"2016-12-13T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26895"},"modified":"2016-12-14T05:19:44","modified_gmt":"2016-12-13T19:19:44","slug":"htmljavascript-jumbled-sentences-and-words-modal-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-jumbled-sentences-and-words-modal-tutorial\/","title":{"rendered":"HTML\/Javascript Jumbled Sentences and Words Modal Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Jumbled Sentences and Words Modal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences_and_words_modal.jpg\" title=\"HTML\/Javascript Jumbled Sentences and Words Modal Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Jumbled Sentences and Words Modal Tutorial<\/p><\/div>\n<p>When we last left off with our <a target=_blank title='ESL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> (or &#8220;English as a Second or Foreign Language&#8221;) Jumbled Sentences and Words game web application, with <a title='HTML\/Javascript Jumbled Sentences and Words Game Tutorial' href='#hjjsawgt'>HTML\/Javascript Jumbled Sentences and Words Game Tutorial<\/a> as shown below, we did succeed, but not for all web browser &#8220;brands&#8221;, when we said &#8230;<\/p>\n<blockquote>\n<p>This new functionality needs to intervene before the HTML select &#8220;dropdown&#8221; element actually drops down, because hovering over the HTML select element HTML option subelements, on non-mobile platforms would give the game away, because of the nature of the HTML option subelement <i>title<\/i> property (as you may recall from yesterday).  We at first tried the <i>onclick<\/i> event for this, but found that the better event to use to intervene was the <a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'><i>onfocus<\/i><\/a> event, which you can see in action, perhaps, by working through the <a target=_blank title='HTML Window Events Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-window-events-primer-tutorial\/'>HTML Window Events Primer Tutorial<\/a>.<\/p>\n<\/blockquote>\n<p> &#8230; and we guess the reason for our methods succeeding or not, back then, with regard to a web browser &#8220;brand&#8221;, could depend on the timing of events &#8220;onfocus&#8221; and &#8220;onclick&#8221; for HTML select &#8220;dropdown&#8221; elements.<\/p>\n<p>In the meantime, we&#8217;ve shored up this desire with more web browser &#8220;brands&#8221; by the two concepts below &#8230;<\/p>\n<ul>\n<li>the setting of the HTML select &#8220;dropdown&#8221; element&#8217;s <a target=_blank title='HTML disabled property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_select_disabled.asp'><i>disabled<\/i><\/a> property to <i>true<\/i>, and back again (to <i>false<\/i>) after &#8230;<\/li>\n<li>we open a jQuery modal dialog box (we talked about with <a target=_blank title='jQuery UI Modal Dialog Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/jquery-ui-modal-dialog-primer-tutorial\/'>jQuery UI Modal Dialog Primer Tutorial<\/a>), as the first choice user interaction method to ask for unjumbled anagram questions<\/li>\n<\/ul>\n<p>Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.htm\" title='Click picture'>live run<\/a> of the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html--GETME\" title=\"jumbled_sentences.htm\">jumbled_sentences.htm<\/a> for your perusal changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html--GETME\" title=\"jumbled_sentences.htm\">this way<\/a> to add in jQuery modal dialog box usage.  We again hope you try it, get it into perspective by teeing up live run usage with HTML and Javascript DOM code usage.<\/p>\n<hr>\n<p id='hjjsawgt'>Previous relevant <a target=_blank title='HTML\/Javascript Jumbled Sentences and Words Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-jumbled-sentences-and-words-game-tutorial\/'>HTML\/Javascript Jumbled Sentences and Words 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\/HTMLCSS\/jumbled_sentences.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Jumbled Sentences and Words Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences_and_words.jpg\" title=\"HTML\/Javascript Jumbled Sentences and Words Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Jumbled Sentences and Words Game Tutorial<\/p><\/div>\n<p>Today we&#8217;ve added functionality onto yesterday&#8217;s <a title='HTML\/Javascript Jumbled Sentences Game Tutorial' href='#hjjsgt'>HTML\/Javascript Jumbled Sentences Game Tutorial<\/a> as shown below, by allowing for the words of the sentences to also be jumbled, adding to the complexity of the game should the user (perhaps an <a target=_blank title='ESL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> (or &#8220;English as a Second or Foreign Language&#8221;) student) want to raise the level of difficulty.<\/p>\n<p>This new functionality needs to intervene before the HTML select &#8220;dropdown&#8221; element actually drops down, because hovering over the HTML select element HTML option subelements, on non-mobile platforms would give the game away, because of the nature of the HTML option subelement <i>title<\/i> property (as you may recall from yesterday).  We at first tried the <i>onclick<\/i> event for this, but found that the better event to use to intervene was the <a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'><i>onfocus<\/i><\/a> event, which you can see in action, perhaps, by working through the <a target=_blank title='HTML Window Events Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-window-events-primer-tutorial\/'>HTML Window Events Primer Tutorial<\/a>.<\/p>\n<p>So what is the form of our supervision?  A simple idea, really, that being to ask the user for the unjumbled word of their jumbled &#8220;anagram&#8221; set of letters, via a Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp' title='Javascript prompt window information from w3schools ... thanks'>prompt<\/a> window, before they tell the game what the word order of that word is of the sentence in question.<\/p>\n<p>You may recall from yesterday, too &#8230;<\/p>\n<blockquote><p>\n &#8230; leaving us scope to allow for sentences for (one, so far) alternative word orderings (still working the one set of HTML select elements and one alternative sentence words data array) &#8230;\n<\/p><\/blockquote>\n<p> &#8230; well, thinking on this, it was a bit of a &#8220;doh!&#8221; moment to limit this functionality to just the one alternative yesterday.  After all, with just the smallest of tweaks, from &#8230;<\/p>\n<p><code><br \/>\nbits=sentences[choice].replace(\/]\/g,'').split('[');<br \/>\n<\/code><\/p>\n<p> &#8230; to &#8230;<\/p>\n<p><code><br \/>\nbits=sentences[choice].replace(\/]\/g,'[').split('[');<br \/>\n<\/code><\/p>\n<p> &#8230; we can look through all of the non-blank members of the <i>bits<\/i> array of alternative sentence word orderings to find the sentence of interest the user has picked out among the jumbled words.  It is just up to the programmer to work out what those are up the top of the web application, where we define the <i>sentences<\/i> array &#8230; as of the last look &#8230;<\/p>\n<p><code><br \/>\nvar sentences=[\"The rain in Spain falls mainly on the plain.\",<br \/>\n \"Where is the potato peeler?\",<br \/>\n \"I have to go to sleep early during the week. [During the week I have to go to sleep early.]\",<br \/>\n \"Rolling stones gather no moss.\",<br \/>\n \"A bird in the hand is worth two in the bush.\",<br \/>\n <b>\"When it rains people head for the awnings as they walk along.  [People head for the awnings as they walk along when it rains.] [As they walk along people head for the awnings when it rains.]\"<\/b>,<br \/>\n \"The food in that restaurant is superb.\",<br \/>\n \"We will be back later. [Later we will be back.]\",<br \/>\n \"She asked him not to be rude.\",<br \/>\n \"If you run up the street that will ensure you get to the bus on time.\",<br \/>\n \"The beans need to boil and the fish needs to fry.  [The fish needs to fry and the beans need to fry.]\"];<br \/>\n<\/code><\/p>\n<p> &#8230; meaning that the scoring function changes that little bit to cater for a <i>usual<\/i> variable no longer being just a boolean true versus false, but <b>now to be pointing at an index of relevance within the <i>bits<\/i> array<\/b> &#8230;<\/p>\n<p><code><br \/>\nfunction scoreit(tvo) { \/\/ tvo is the passed in HTML select element reference of the <i>onchange<\/i> event<br \/>\n  var tv=tvo.value, altis=false, wast, waso<b>, one=usual, ione<\/b>;<br \/>\n  <b>if (prefix != '' && usual == 0) {<br \/>\n    for (ione=1; ione&lt;bits.length; ione++) {<br \/>\n     if (bits[ione].trim() != '') {<br \/>\n      if ((bits[ione].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(tvo.options[tvo.selectedIndex].text))] == tvo.options[tvo.selectedIndex].title.toLowerCase()) {<br \/>\n       usual=ione;<br \/>\n       one=usual;<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n  }<\/b><br \/>\n  if (prefix != '' && <b>usual != 0<\/b>) {<br \/>\n    wast=tvo.options[tvo.selectedIndex].title;<br \/>\n    waso='td' + tvo.options[tvo.selectedIndex].text;<br \/>\n      if ((bits[<b>usual<\/b>].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(tvo.options[tvo.selectedIndex].text))] == tvo.options[tvo.selectedIndex].title.toLowerCase()) {<br \/>\n    <b>usual=one;<\/b><br \/>\n    altis=true;<br \/>\n    selcnt--;<br \/>\n    score++;<br \/>\n    tvo.style.backgroundColor='green';<br \/>\n    if (eval(tvo.options[tvo.selectedIndex].text) == 1) {<br \/>\n    document.getElementById(waso).innerHTML=wast.substring(0,1).toUpperCase() + (wast + ' ').substring(1).trim();<br \/>\n    } else {<br \/>\n    document.getElementById(waso).innerHTML=wast;<br \/>\n    }<br \/>\n    tvo.value='';<br \/>\n      } else {<br \/>\n    score--;<br \/>\n    tvo.value='';<br \/>\n    tvo.style.backgroundColor='red';<br \/>\n      }<br \/>\n  } else if (tv.replace(' ','') != '') {<br \/>\n    selcnt--;<br \/>\n    score++;<br \/>\n    tvo.style.backgroundColor='green';<br \/>\n    document.getElementById('td' + tv).innerHTML=tvo.options[tvo.selectedIndex].title;<br \/>\n    tvo.value='';<br \/>\n  } else {<br \/>\n    wast=tvo.options[tvo.selectedIndex].title;<br \/>\n    waso='td' + tvo.options[tvo.selectedIndex].text;<br \/>\n    if (prefix != '') {<br \/>\n      if ((bits[<b>usual<\/b>].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(tvo.options[tvo.selectedIndex].text))] == tvo.options[tvo.selectedIndex].title.toLowerCase()) {<br \/>\n    <b>usual=one;<\/b><br \/>\n    altis=true;<br \/>\n    selcnt--;<br \/>\n    score++;<br \/>\n    tvo.style.backgroundColor='green';<br \/>\n    if (eval(tvo.options[tvo.selectedIndex].text) == 1) {<br \/>\n    document.getElementById(waso).innerHTML=wast.substring(0,1).toUpperCase() + (wast + ' ').substring(1).trim();<br \/>\n    } else {<br \/>\n    document.getElementById(waso).innerHTML=wast;<br \/>\n    }<br \/>\n    tvo.value='';<br \/>\n      }<br \/>\n    }<br \/>\n    if (!altis) {<br \/>\n    score--;<br \/>\n    tvo.value='';<br \/>\n    tvo.style.backgroundColor='red';<br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById('score').innerHTML='Score: ' + score + ' from Sentences: ' + goes;<br \/>\n  if (selcnt &lt;= 0) pickasentence();<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html\" title='Click picture'>live run<\/a> of the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html-GETME\" title=\"jumbled_sentences.html\">jumbled_sentences.html<\/a> for your perusal changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html-GETME\" title=\"jumbled_sentences.html\">this way<\/a> to add the &#8220;and Words&#8221; into today&#8217;s Jumbled Sentences and Words Game web application.  We hope you try it, get it into perspective by teeing up live run usage with HTML and Javascript DOM code usage.<\/p>\n<hr>\n<p id='hjjsgt'>Previous relevant <a target=_blank title='HTML\/Javascript Jumbled Sentences Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-jumbled-sentences-game-tutorial\/'>HTML\/Javascript Jumbled Sentences 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\/HTMLCSS\/jumbled_sentences.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Jumbled Sentences Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.jpg\" title=\"HTML\/Javascript Jumbled Sentences Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Jumbled Sentences Game Tutorial<\/p><\/div>\n<p>We have an <a target=_blank title='ESL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> (or &#8220;English as a Second or Foreign Language&#8221;) Jumbled Sentence construction game today that builds on the basic (game) structure of <a title='HTML\/Javascript Homophones Game Tutorial' href='#hjhgt'>HTML\/Javascript Homophones Game Tutorial<\/a> as shown below.<\/p>\n<p>Doing this web application, though, taught me, yet again, about how incredibly useful is the HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> (dropdown) element for efficient use of data.<\/p>\n<p>Consider one of the &#8220;word for word&#8221; dropdowns we construct during the game (and they all have a similar look) &#8230;<\/p>\n<p><code><br \/>\n&lt;select id=\"s6\" style=\"font-size:24px;background-color:pink;\" onchange=\"scoreit(this);\"&gt;&lt;option value=\"<font color=blue><i><\/i><\/font>\"&gt;<font color=magenta><i>beans<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>1<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i>2<\/i><\/font>\"&gt;<font color=magenta><i>2<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>3<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>4<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>5<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>6<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>7<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>8<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>9<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>10<\/i><\/font>&lt;\/option&gt;&lt;option title=\"<font color=purple><i>beans<\/i><\/font>\" value=\"<font color=blue><i> <\/i><\/font>\"&gt;<font color=magenta><i>11<\/i><\/font>&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; where the HTML select element HTML option subelement <font color=blue><i>value<\/i><\/font> property (being non-blank) determines if a user choice is correct and an index to a position within an HTML table element&#8217;s <i>td<\/i> (cell) subelement <i>id<\/i><font size=1>ed<\/font> ready to display the sentence unjumbled in its &#8220;readable&#8221; format (a huge talent that HTML table and td (cell) elements have (for &#8220;orderliness&#8221;)), and the <font color=purple><i>title<\/i><\/font> property can point back to that sentence&#8217;s relevant word itself, while the HTML option element&#8217;s <font color=magenta><i>innerHTML<\/i><\/font> text is another way to reference the word index (in sentence) data item, so that it features <b>hugely<\/b> in Javascript DOM &#8220;scoring the game&#8221; HTML select &#8220;dropdown&#8221; element <i>onchange<\/i> event code such as &#8230;<\/p>\n<p><code><br \/>\nfunction scoreit(tvo) { \/\/ tvo is the passed in HTML select element reference of the <i>onchange<\/i> event<br \/>\n  var <font color=blue><b>tv=tvo.value<\/b><\/font>, altis=false, wast, waso;<br \/>\n  if (prefix != '' && !usual) {<br \/>\n    <font color=purple><b>wast=tvo.options[tvo.selectedIndex].title;<\/b><\/font><br \/>\n    <font color=magenta><b>waso='td' + tvo.options[tvo.selectedIndex].text;<\/b><\/font><br \/>\n      if ((bits[1].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(<font color=magenta><b>tvo.options[tvo.selectedIndex].text<\/b><\/font>))] == <font color=purple><b>tvo.options[tvo.selectedIndex].title<\/b><\/font>.toLowerCase()) {<br \/>\n    usual=false;<br \/>\n    altis=true;<br \/>\n    selcnt--;<br \/>\n    score++;<br \/>\n    tvo.style.backgroundColor='green';<br \/>\n    if (eval(tvo.options[tvo.selectedIndex].text) == 1) {<br \/>\n    document.getElementById(waso).innerHTML=wast.substring(0,1).toUpperCase() + (wast + ' ').substring(1).trim();<br \/>\n    } else {<br \/>\n    document.getElementById(waso).innerHTML=wast;<br \/>\n    }<br \/>\n    tvo.value='';<br \/>\n      } else {<br \/>\n    score--;<br \/>\n    tvo.value='';<br \/>\n    tvo.style.backgroundColor='red';<br \/>\n      }<br \/>\n  } else if (tv.replace(' ','') != '') {<br \/>\n    selcnt--;<br \/>\n    score++;<br \/>\n    tvo.style.backgroundColor='green';<br \/>\n    document.getElementById('td' + tv).innerHTML=<font color=purple><b>tvo.options[tvo.selectedIndex].title;<\/b><\/font><br \/>\n    tvo.value='';<br \/>\n  } else {<br \/>\n    <font color=purple><b>wast=tvo.options[tvo.selectedIndex].title;<\/b><\/font><br \/>\n    <font color=magenta><b>waso='td' + tvo.options[tvo.selectedIndex].text;<\/b><\/font><br \/>\n    if (prefix != '') {<br \/>\n      if ((bits[1].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(<font color=magenta><b>tvo.options[tvo.selectedIndex].text<\/b><\/font>))] == <font color=purple><b>tvo.options[tvo.selectedIndex].title<\/b><\/font>.toLowerCase()) {<br \/>\n    usual=false;<br \/>\n    altis=true;<br \/>\n    selcnt--;<br \/>\n    score++;<br \/>\n    tvo.style.backgroundColor='green';<br \/>\n    if (eval(<font color=magenta><b>tvo.options[tvo.selectedIndex].text<\/b><\/font>) == 1) {<br \/>\n    document.getElementById(waso).innerHTML=wast.substring(0,1).toUpperCase() + (wast + ' ').substring(1).trim();<br \/>\n    } else {<br \/>\n    document.getElementById(waso).innerHTML=wast;<br \/>\n    }<br \/>\n    tvo.value='';<br \/>\n      }<br \/>\n    }<br \/>\n    if (!altis) {<br \/>\n    score--;<br \/>\n    tvo.value='';<br \/>\n    tvo.style.backgroundColor='red';<br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById('score').innerHTML='Score: ' + score + ' from Sentences: ' + goes;<br \/>\n  if (selcnt &lt;= 0) pickasentence();<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; leaving us scope to allow for sentences for (one, so far) alternative word orderings (still working the one set of HTML select elements and one alternative sentence words data array) &#8230; and don&#8217;t more reasonably complex English sentences have the flexibility to allow for many word ordering possibilities?<\/p>\n<p>And so we have written <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html\" title='Click picture'>live run<\/a> of the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jumbled_sentences.html_GETME\" title=\"jumbled_sentences.html\">jumbled_sentences.html<\/a> for your perusal.<\/p>\n<p>We&#8217;d like to give thanks to <i>Five-Minute Activities<\/i> by Penny Ur and Andrew Wright page 44 for ideas for this tutorial, and leave the door open for the user to add their own sentences, as we do with many of our ESL games.  We hope you try the ESL Jumbled Sentences game yourself.<\/p>\n<hr>\n<hr>\n<p id='hjhgt'>Previous relevant <a target=_blank title='HTML\/Javascript Homophones Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-homophones-game-tutorial\/'>HTML\/Javascript Homophones 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\/HTMLCSS\/homophones.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Homophones Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homophones.jpg\" title=\"HTML\/Javascript Homophones Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Homophones Game Tutorial<\/p><\/div>\n<p><a target=_blank title='Homophone information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Homophone'>Homophones<\/a>, the topic of today&#8217;s web application, and <a target=_blank title='Homonym information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Homonym'>homonyms<\/a>, the topic of <a title='HTML\/Javascript Homonyms Game Tutorial' href='#hjhgt'>HTML\/Javascript Homonyms Game Tutorial<\/a> as shown below, are both frequently cited as sources of difficulty for <a target=_blank title='ESL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> (or &#8220;English as a Second or Foreign Language&#8221;) students.<\/p>\n<p>In the case of homophones, it can be an embarrassment with written English when the wrong homophone is chosen.  As with so many ESL issues, though, practice (not practise) is a great (not grate) idea here, and so we have written <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homophones.html\" title='Click picture'>live run<\/a> of the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homophones.html_GETME\" title=\"homophones.html\">homophones.html<\/a> for your perusal.<\/p>\n<p>We&#8217;d like to give thanks to <i>Five-Minute Activities<\/i> by Penny Ur and Andrew Wright pages 69-70 for words to fit into our sentence ideas, and leave the door open for the user to add their own sentences, as we do with many of our ESL games.  We hope you try the ESL Homophones game yourself.<\/p>\n<hr>\n<p id='hjhgt'>Previous relevant <a target=_blank title='HTML\/Javascript Homonyms Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-homonyms-game-tutorial\/'>HTML\/Javascript Homonyms 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\/HTMLCSS\/homonym_game.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Homonymns Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homonym.jpg\" title=\"HTML\/Javascript Homonyms Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Homonyms Game Tutorial<\/p><\/div>\n<p><a target=_blank title='ESL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> (or &#8220;English as a Second or Foreign Language&#8221;) is a term for the study of English as a Second Language, and is of particular relevance to immigrants to English speaking countries from non-English speaking backgrounds.<\/p>\n<p>One of the most confusing things about learning English, to do with vocabulary, is that English is full of words which sound the same but mean completely different things.  The relationship of such &#8220;same sounding&#8221; words is called a <a target=_blank title='Homonyms information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Homonym'>Homonym<\/a>.  To point out all these Homonyms to ESL students is impossible (or to native speakers, for that matter), because there are too many ways to work an English sentence, that the possibilities for confusion with words of the same sound but different meaning, are almost infinite.<\/p>\n<p>If the ESL teaching is not face to face, what could help here?  Well, we think the use of &#8230;<\/p>\n<ul>\n<li>a thesaurus<\/li>\n<li>a search engine phrase image search<\/li>\n<\/ul>\n<p> &#8230; could help, but we do not pretend that this replaces face to face explanations.<\/p>\n<p>So we&#8217;ve written a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homonym_game.html\" title='Click picture'>live run<\/a> of the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homonym_game.html_GETME\" title=\"homonym_game.html\">homonym_game.html<\/a> supervising an HTML iframe call of <a target=_blank title='Ajax_yql_thesaurus.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/YQL\/Thesaurus\/Ajax_yql_thesaurus.html--GETME'>Ajax_yql_thesaurus.html<\/a> (changed from the days at <a target=_blank title='Yahoo YQL Web Service JSON Thesaurus Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/yahoo-yql-web-service-json-thesaurus-tutorial\/'>Yahoo YQL Web Service JSON Thesaurus Tutorial<\/a> as per <a target=_blank title='Ajax_yql_thesaurus.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/YQL\/Thesaurus\/Ajax_yql_thesaurus.html--GETME'>Ajax_yql_thesaurus.html<\/a> so that a URL such as <a target=_blank title='Sense of Humour thesaurus result' href='http:\/\/www.rjmprogramming.com.au\/PHP\/YQL\/Thesaurus\/Ajax_yql_thesaurus.html?startwith=sense%20of%20humour'>Sense of Humour<\/a> will take you straight to the phrase&#8217;s thesaurus lookup).<\/p>\n<p>When you first go in you are presented by the phrase &#8230;<\/p>\n<p><code>Sense of Humour<\/code><\/p>\n<p> &#8230; and if you can project yourself into the frame of mind of someone new to English, maybe, you may wonder about those &#8220;coins&#8221; you may have been using (in Australia, at least), like the 50 &#8220;cents&#8221; coin or the 20 &#8220;cents&#8221; coin, which have that same first word sound.  It can be confusing, so we use a thesaurus to show how &#8220;Sense of Humour&#8221; is a phrase that means something, and that&#8217;s all good, but no thesaurus will work for quite legitimate phrase combinations that are okay, so this &#8220;tool&#8221; is only part of what we need, or is useful.  We think to feed the phrase into a Google search for images can help as well, maybe even more than the thesaurus idea.  As you can imagine, though, nothing beats a face to face explanation.<\/p>\n<p>All that being as it may, give the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/homonym_game.html\" title='Click picture'>live run<\/a> a go, and make up some of your own in an option of the top dropdown.  If you do, you&#8217;ll soon see how easy they can be assembled, because English is full of Homonym possibilities.<\/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='#d14796' onclick='var dv=document.getElementById(\"d14796\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=ESL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14796' 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='#d26814' onclick='var dv=document.getElementById(\"d26814\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26814' 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='#d26847' onclick='var dv=document.getElementById(\"d26847\"); 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='d26847' 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='#d26862' onclick='var dv=document.getElementById(\"d26862\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26862' 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='#d26895' onclick='var dv=document.getElementById(\"d26895\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/jquery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26895' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When we last left off with our ESL (or &#8220;English as a Second or Foreign Language&#8221;) Jumbled Sentences and Words game web application, with HTML\/Javascript Jumbled Sentences and Words Game Tutorial as shown below, we did succeed, but not for &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-jumbled-sentences-and-words-modal-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,13,14,15,37],"tags":[1914,354,367,396,476,477,576,652,663,2080,1631,2077,2076,997,1761,1866,1119,1319,1452],"class_list":["post-26895","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-event-driven-programming","category-games","category-tutorials","tag-dialog","tag-dom","tag-dropdown","tag-esl","tag-game","tag-games-2","tag-html","tag-javascript","tag-jquery","tag-modal","tag-onchange","tag-onfocus","tag-order","tag-programming","tag-prompt","tag-select","tag-sentence","tag-tutorial","tag-word"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26895"}],"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=26895"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26895\/revisions"}],"predecessor-version":[{"id":26905,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26895\/revisions\/26905"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=26895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=26895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=26895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}