{"id":36325,"date":"2018-03-11T03:01:28","date_gmt":"2018-03-10T17:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36325"},"modified":"2018-03-09T18:13:34","modified_gmt":"2018-03-09T08:13:34","slug":"simile-scramble-word-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/simile-scramble-word-game-primer-tutorial\/","title":{"rendered":"Simile Scramble Word Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simile_scramble.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Simile Scramble Word Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simile_scramble.jpg\" title=\"Simile Scramble Word Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Simile Scramble Word Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;d like to thank <a target=_blank title='Science Puzzles for Young Scientists by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Scientists<\/a> by Helene Hovanec ISBN: 0-8069-3542-1 for the inspiration, and content, for today&#8217;s new HTML and Javascript and CSS word game, perhaps a good fit for <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> students out there.<\/p>\n<p>This book is full of puzzles and quizzes and games that when analyzed, cause a variety of HTML and Javascript and CSS techniques to come into play.  Today&#8217;s is similar to many, where we try to &#8230;<\/p>\n<ul>\n<li>keep the input data (program representation) to one global Javascript array var<font size=1>iable<\/font> that contains the answers, so no peaking with Web inspectors please, as you play the game &#8230; and then based on that &#8230;<\/li>\n<li>pick one array member as the &#8220;choice&#8221;, it&#8217;s data the basis for the <a target=_blank title='Simile information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Simile'>&#8220;Simile&#8221;<\/a> of the form &#8230;<br \/>\n<table style='width:100%;' border=20>\n<tbody>\n<tr>\n<td>[FirstWord]<\/td>\n<td>as<\/td>\n<td>a\/an<\/td>\n<td>[LastWord]<\/td>\n<td><input type=button value='Check Answer'><\/input><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>for [FirstWord] take its characters and randomize their order in how ever many HTML select element <b>dropdowns each made up of HTML option elements reflecting the letters contained in that word<\/b><\/li>\n<li>for [LastWord] take its characters and randomize their order in how ever many HTML select element dropdowns each made up of HTML option elements reflecting the letters contained in that word<\/li>\n<li>hand it over to user to unscramble and set values for all these dropdowns &#8230; and then &#8230;<\/li>\n<li>click\/touch the &#8220;Check Answer&#8221; button &#8230; and then &#8230;<\/li>\n<li>the program (web application) will determine if the user is correct and update scores accordingly, and inform regarding wrong answers<\/li>\n<\/ul>\n<p>With respect to &#8220;<b>dropdowns each made up of HTML option elements reflecting the letters contained in that word<\/b>&#8221; it was interesting today, for us to use a technique we&#8217;re starting to like more and more &#8230;<\/p>\n<ul>\n<li>initialize the HTML for a select element dropdown with that initial randomly ordered letter<\/li>\n<li>set up a Javascript <a target=_blank title='Javascript for loop information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_loop_for.asp'>for<\/a> loop to loop through all and if the indexed array member is not that &#8220;initial member&#8221; as above, for the next stage of randomosity regarding that (single) HTML select element dropdown, either add to the top of the dropdown or the bottom of the dropdown as per code (for the [FirstWord] case) like &#8230;<br \/>\n<code><br \/>\n     leftis+='&lt;select&gt;&lt;option value=' + words[0].substring(thisl, eval(1 + thisl)).toUpperCase() + '&gt;' + words[0].substring(thisl, eval(1 + thisl)).toUpperCase() + '&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n     for (j=0; j&lt;words[0].length; j++) {<br \/>\n       if (j != thisl) {<br \/>\n   if (Math.floor(Math.random() * 2) == 0) {<br \/>\n     leftis=leftis.replace('&lt;\/select&gt;','&lt;option value=' + words[0].substring(j, eval(1 + j)).toUpperCase() + '&gt;' + words[0].substring(j, eval(1 + j)).toUpperCase() + '&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n   } else {<br \/>\n     leftis=leftis.replace('&lt;select&gt;','&lt;select&gt;&lt;option value=' + words[0].substring(j, eval(1 + j)).toUpperCase() + '&gt;' + words[0].substring(j, eval(1 + j)).toUpperCase() + '&lt;\/option&gt;');<br \/>\n   }<br \/>\n       }<br \/>\n     }<br \/>\n<\/code><br \/>\n &#8230; and then &#8230;\n<\/li>\n<li>to affectively start with a new HTML select element dropdown for the next letter condideration, use another technique we like, but cannot always be adopted, but can in this case, is to capitalize all the HTML select element dropdowns collected up to now to shield them from changes in the next HTML select element dropdown creation logic as per the code below at the bottom of the inner (befor the next outer) <a target=_blank title='Javascript for loop information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_loop_for.asp'>for<\/a> loop as per (for the [LastWord] case (immediately after the corresponding bank of code like above) &#8230;<br \/>\n<code><br \/>\n     rightis=rightis.toUpperCase().replace('&lt;SELECT&gt;','&lt;SELECT ID=R' + i + ' SIZE=' + words[eval(-1 + words.length)].length + '&gt;');<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>See what we mean by <a target=_blank title='Science Puzzles for Young Scientists by Helene Hovanec ISBN: 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Scientists<\/a> by Helene Hovanec ISBN: 0-8069-3542-1 being a great resource to go back to, because it is not only the puzzle itself that asks you to think about data, it is your personal evolution as a programmer that gets called on after you&#8217;ve learnt so many other ways to &#8220;skin a cat&#8221; so to speak?<\/p>\n<p>And so here is the HTML and Javascript and CSS going into this ESL game design above you could call <a target=_blank title='simile_scramble.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simile_scramble.html_GETME'>simile_scramble.html<\/a> (and which has this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simile_scramble.html'>live run<\/a> link).  We hope you give it a burl!<\/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='#d36325' onclick='var dv=document.getElementById(\"d36325\"); 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='d36325' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;d like to thank Science Puzzles for Young Scientists by Helene Hovanec ISBN: 0-8069-3542-1 for the inspiration, and content, for today&#8217;s new HTML and Javascript and CSS word game, perhaps a good fit for ESL students out there. This book &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/simile-scramble-word-game-primer-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,15,37],"tags":[396,476,477,576,652,997,1319,1452,1453],"class_list":["post-36325","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-esl","tag-game","tag-games-2","tag-html","tag-javascript","tag-programming","tag-tutorial","tag-word","tag-word-game"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36325"}],"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=36325"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36325\/revisions"}],"predecessor-version":[{"id":36500,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36325\/revisions\/36500"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}