{"id":22566,"date":"2016-06-08T03:01:58","date_gmt":"2016-06-07T17:01:58","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22566"},"modified":"2016-06-08T06:25:44","modified_gmt":"2016-06-07T20:25:44","slug":"htmljavascript-units-of-measure-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-units-of-measure-game-tutorial\/","title":{"rendered":"HTML\/Javascript Units of Measure Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uom.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Units of Measure Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uom.jpg\" title=\"HTML\/Javascript Units of Measure Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Units of Measure Game Tutorial<\/p><\/div>\n<p>Today we&#8217;ve based a &#8220;Units of Measure&#8221; game off of our previously presented <a title='HTML\/Javascript Jobs Match Game Tutorial' href='#hjjmgt'>HTML\/Javascript Jobs Match Game Tutorial<\/a> as shown below &#8230; believe it or not.<\/p>\n<p>Perhaps this calls for a bit of a blurb about seeing &#8220;patterns of use&#8221; in web applications you&#8217;ve written from the past.  The non &#8220;one to one&#8221; mapping, but mapping nonetheless, web applications you ever write should be cherished (as we humans &#8220;map&#8221; a lot of problems to &#8220;one to one&#8221; rather than &#8220;one to many&#8221; because we like to avoid headaches, methinks), and that is what the &#8220;HTML\/Javascript Jobs Match Game Tutorial&#8221; web application was.  In fact, today, we are &#8220;almost&#8221; one to one in our thinking, but still, the design of the non &#8220;one to one&#8221; &#8220;HTML\/Javascript Jobs Match Game Tutorial&#8221; sprang to mind as soon as the concept developed.  And that &#8220;concept&#8221;, by the way, came about from the simple idea of seeing a worker&#8217;s van say the acronym &#8220;rpm&#8221; &#8230; Think rpm, <a target=_blank title='Think Think tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/think-think-game-primer-tutorial\/'>Think<\/a> unit of measure.<\/p>\n<p>And perhaps this calls for a blurb about &#8220;revisits&#8221;, because almost invariably, we find, revisits are a win-win scenario.  Compare the improved web applications from <a title='HTML\/Javascript Jobs Match Game Tutorial' href='#hjjmgt'>HTML\/Javascript Jobs Match Game Tutorial<\/a> as &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/JobsMatch\/matchpeople.htm\">old way<\/a> of game &#8230; versus &#8230; new improved &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/JobsMatch\/matchpeople.html\">new way<\/a> of game<\/li>\n<\/ul>\n<p> &#8230; in the sense that a curious &#8220;gamer&#8221; is stopped from the &#8220;too obvious&#8221; &#8220;old way&#8221; non-sorting of checkbox options that could be &#8220;mapped&#8221; in the head of a curious user to the order of the dropdown listing.  So we just added &#8230;<\/p>\n<p><code><br \/>\n  jobdescription.sort();<br \/>\n<\/code><\/p>\n<p> &#8230; as an ultra simple but useful change to improve the &#8220;interest&#8221; in this &#8220;job matching&#8221; game.<\/p>\n<p>This got noted and included in the logic of today&#8217;s &#8220;Unit of Measures&#8221; game with the line of code &#8230;<\/p>\n<p><code><br \/>\n  measure.sort();<br \/>\n<\/code><\/p>\n<p>Anyway, the more we coded, the more interesting this game became research wise, and hopefully, &#8220;playing-wise&#8221;, and as such, we won&#8217;t put them all here, but if you examine the HTML and Javascript programming code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uom.html-GETME\" title='uom.html'>uom.html<\/a>, and which changed from the &#8220;it&#8217;s based on&#8221; matchpeople.html &#8220;job matching&#8221; web application game as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uom.html-GETME\" title='uom.html'>this link<\/a>, and has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uom.html\" title='uom.html'>live run<\/a> link, you&#8217;ll see a whole lot of links used to help with the research, the majority of which were just <a target=_blank title='Google search engine' href='http:\/\/www.google.com'>Google<\/a> searches &#8230; thanks.<\/p>\n<p>Wrong answers can get you to &#8230;<\/p>\n<ul>\n<li><a target=_blank title='The Free Dictionary' href='http:\/\/thefreedictionary.com'>The Free Dictionary<\/a> &#8230; and\/or &#8230;<\/li>\n<li><a target=_blank title='Google search engine' href='http:\/\/www.google.com'>Google<\/a> search engine &#8230; as much as anything because lots of the units of measure are expressed as &#8220;acronyms&#8221; (better than they would be as words &#8230; in our opinion).<\/p>\n<\/ul>\n<p>Please enjoy the game.<\/p>\n<hr>\n<p id='hjjmgt'>Previous relevant <a target=_blank title='HTML\/Javascript Jobs Match Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-jobs-match-game-tutorial\/'>HTML\/Javascript Jobs Match 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\/JobsMatch\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Jobs Match Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/JobsMatch\/JobsWordMatchGame.jpg\" title=\"HTML\/Javascript Jobs Match Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Jobs Match Game Tutorial<\/p><\/div>\n<p>Do you like word games?  Today&#8217;s game asks you to associate job descriptions with words &#8230; we&#8217;re going to call the game <i>&#8220;The Jobs Match Game&#8221;<\/i> (too snappy for you?!) &#8230; and you score points for correct word associations you supply that satisfy our relevance criteria (which is a bit subjective &#8230; you may disagree &#8230; <a target=_blank title='Contact Us' href='http:\/\/www.rjmprogramming.com.au\/Contact_Us.html'>Complaints Department<\/a>).  It uses English words, based on the dictionary arrangements at its (web) server.   Maybe it would be a good game to learn English vocabulary.<\/p>\n<p>Today&#8217;s data source is a book called <i>Five-Minute Activities<\/i> by Penny Ur and Andrew Wright.   We thank this source for their great Job Description word list, and the game concept itself, as outlined on page 50.<\/p>\n<p>This <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/JobsMatch\/\" title=\"Categories Game\">game<\/a> uses HTML and Javascript programming languages.<\/p>\n<p>Hopefully you can figure the rules when you click the picture above for a <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/JobsMatch\/\">live run<\/a>.<\/p>\n<p>Another thank you to <a target=_blank title='The Free Dictionary' href='http:\/\/thefreedictionary.com'>The Free Dictionary<\/a> for its great online presence as a dictionary resource, for the functionality to explain an unknown or incomplete answer for the word in question, for its dictionary meaning.  The image map &#8220;click parts of the picture&#8221; <a target=_blank title='Pointed at vocabulary tutorials' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=vocabulary'>vocabulary ESL tutorials<\/a> at this blog use the same resource to explain dictionary information about clicked on &#8220;things&#8221;.<\/p>\n<p>Programming features of this program are the Javascript use of <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> and  <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp' title='Javascript document.write'>document.write<\/a> to make use of pre-defined arrays.  Read more about Javascript eval with a previous tutorial called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3800' title='PHP\/Javascript Eval Primer Tutorial'>PHP\/Javascript Eval Primer Tutorial<\/a>.<\/p>\n<p>Anyway, see how you go with this practical game!<\/p>\n<p>Thanks to Mobilefish for ImageMap service at <a target=_blank title='Mobilefish ImageMap service' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php<\/a>.<\/p>\n<p>Here is a link to some downloadable HTML (with Javascript) programming code you could rename to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/JobsMatch\/matchpeople.html_GETME\" title=\"=matchpeople.html\">matchpeople.html<\/a><\/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='#7902' onclick='var dv=document.getElementById(\"d7902\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=ESL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7902' 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='#22566' onclick='var dv=document.getElementById(\"d22566\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22566' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;ve based a &#8220;Units of Measure&#8221; game off of our previously presented HTML\/Javascript Jobs Match Game Tutorial as shown below &#8230; believe it or not. Perhaps this calls for a bit of a blurb about seeing &#8220;patterns of use&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-units-of-measure-game-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,15,37],"tags":[476,477,576,652,1900,997,1319,1899,1402],"class_list":["post-22566","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-game","tag-games-2","tag-html","tag-javascript","tag-measure","tag-programming","tag-tutorial","tag-units","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22566"}],"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=22566"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22566\/revisions"}],"predecessor-version":[{"id":22575,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22566\/revisions\/22575"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}