{"id":26847,"date":"2016-12-11T03:01:28","date_gmt":"2016-12-10T17:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26847"},"modified":"2016-12-11T07:11:17","modified_gmt":"2016-12-10T21:11:17","slug":"htmljavascript-jumbled-sentences-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-jumbled-sentences-game-tutorial\/","title":{"rendered":"HTML\/Javascript Jumbled Sentences Game Tutorial"},"content":{"rendered":"
\"HTML\/Javascript<\/a>

HTML\/Javascript Jumbled Sentences Game Tutorial<\/p><\/div>\n

We have an ESL<\/a> (or “English as a Second or Foreign Language”) Jumbled Sentence construction game today that builds on the basic (game) structure of HTML\/Javascript Homophones Game Tutorial<\/a> as shown below.<\/p>\n

Doing this web application, though, taught me, yet again, about how incredibly useful is the HTML select<\/a> (dropdown) element for efficient use of data.<\/p>\n

Consider one of the “word for word” dropdowns we construct during the game (and they all have a similar look) …<\/p>\n


\n<select id=\"s6\" style=\"font-size:24px;background-color:pink;\" onchange=\"scoreit(this);\"><option value=\"<\/i><\/font>\">beans<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">1<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\"2<\/i><\/font>\">2<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">3<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">4<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">5<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">6<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">7<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">8<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">9<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">10<\/i><\/font><\/option><option title=\"beans<\/i><\/font>\" value=\" <\/i><\/font>\">11<\/i><\/font><\/option><\/select>
\n<\/code><\/p>\n

… where the HTML select element HTML option subelement 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’s td<\/i> (cell) subelement id<\/i>ed<\/font> ready to display the sentence unjumbled in its “readable” format (a huge talent that HTML table and td (cell) elements have (for “orderliness”)), and the title<\/i><\/font> property can point back to that sentence’s relevant word itself, while the HTML option element’s innerHTML<\/i><\/font> text is another way to reference the word index (in sentence) data item, so that it features hugely<\/b> in Javascript DOM “scoring the game” HTML select “dropdown” element onchange<\/i> event code such as …<\/p>\n


\nfunction scoreit(tvo) { \/\/ tvo is the passed in HTML select element reference of the onchange<\/i> event
\n var tv=tvo.value<\/b><\/font>, altis=false, wast, waso;
\n if (prefix != '' && !usual) {
\n wast=tvo.options[tvo.selectedIndex].title;<\/b><\/font>
\n waso='td' + tvo.options[tvo.selectedIndex].text;<\/b><\/font>
\n if ((bits[1].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(tvo.options[tvo.selectedIndex].text<\/b><\/font>))] == tvo.options[tvo.selectedIndex].title<\/b><\/font>.toLowerCase()) {
\n usual=false;
\n altis=true;
\n selcnt--;
\n score++;
\n tvo.style.backgroundColor='green';
\n if (eval(tvo.options[tvo.selectedIndex].text) == 1) {
\n document.getElementById(waso).innerHTML=wast.substring(0,1).toUpperCase() + (wast + ' ').substring(1).trim();
\n } else {
\n document.getElementById(waso).innerHTML=wast;
\n }
\n tvo.value='';
\n } else {
\n score--;
\n tvo.value='';
\n tvo.style.backgroundColor='red';
\n }
\n } else if (tv.replace(' ','') != '') {
\n selcnt--;
\n score++;
\n tvo.style.backgroundColor='green';
\n document.getElementById('td' + tv).innerHTML=tvo.options[tvo.selectedIndex].title;<\/b><\/font>
\n tvo.value='';
\n } else {
\n wast=tvo.options[tvo.selectedIndex].title;<\/b><\/font>
\n waso='td' + tvo.options[tvo.selectedIndex].text;<\/b><\/font>
\n if (prefix != '') {
\n if ((bits[1].toLowerCase().trim() + '~').replace('.~',' .').replace('?~',' ?').replace('!~',' !').replace('~','').split(' ')[eval(-1 + eval(tvo.options[tvo.selectedIndex].text<\/b><\/font>))] == tvo.options[tvo.selectedIndex].title<\/b><\/font>.toLowerCase()) {
\n usual=false;
\n altis=true;
\n selcnt--;
\n score++;
\n tvo.style.backgroundColor='green';
\n if (eval(tvo.options[tvo.selectedIndex].text<\/b><\/font>) == 1) {
\n document.getElementById(waso).innerHTML=wast.substring(0,1).toUpperCase() + (wast + ' ').substring(1).trim();
\n } else {
\n document.getElementById(waso).innerHTML=wast;
\n }
\n tvo.value='';
\n }
\n }
\n if (!altis) {
\n score--;
\n tvo.value='';
\n tvo.style.backgroundColor='red';
\n }
\n }
\n document.getElementById('score').innerHTML='Score: ' + score + ' from Sentences: ' + goes;
\n if (selcnt <= 0) pickasentence();
\n}
\n<\/code><\/p>\n

… 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) … and don’t more reasonably complex English sentences have the flexibility to allow for many word ordering possibilities?<\/p>\n

And so we have written live run<\/a> of the HTML and Javascript jumbled_sentences.html<\/a> for your perusal.<\/p>\n

We’d like to give thanks to 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

\n
\n

Previous relevant HTML\/Javascript Homophones Game Tutorial<\/a> is shown below.<\/p>\n

\"HTML\/Javascript<\/a>

HTML\/Javascript Homophones Game Tutorial<\/p><\/div>\n

Homophones<\/a>, the topic of today’s web application, and homonyms<\/a>, the topic of HTML\/Javascript Homonyms Game Tutorial<\/a> as shown below, are both frequently cited as sources of difficulty for ESL<\/a> (or “English as a Second or Foreign Language”) students.<\/p>\n

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 live run<\/a> of the HTML and Javascript homophones.html<\/a> for your perusal.<\/p>\n

We’d like to give thanks to 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

\n

Previous relevant HTML\/Javascript Homonyms Game Tutorial<\/a> is shown below.<\/p>\n

\"HTML\/Javascript<\/a>

HTML\/Javascript Homonyms Game Tutorial<\/p><\/div>\n

ESL<\/a> (or “English as a Second or Foreign Language”) 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

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 “same sounding” words is called a 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

If the ESL teaching is not face to face, what could help here? Well, we think the use of …<\/p>\n