{"id":27079,"date":"2016-12-24T03:01:47","date_gmt":"2016-12-23T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27079"},"modified":"2018-04-22T09:43:59","modified_gmt":"2018-04-21T23:43:59","slug":"html-superlative-compare-game-data-attributes-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-superlative-compare-game-data-attributes-tutorial\/","title":{"rendered":"HTML Superlative Compare Game Data Attributes Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/compared_to.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Superlative Compare Game Data Attributes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/compared_to.jpg\" title=\"HTML Superlative Compare Game Data Attributes Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Superlative Compare Game Data Attributes Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s web application game &#8220;Subject Areas&#8221; of <a title='HTML\/Javascript Subject Areas Game Data Attributes Tutorial' href='#hjsagdat'>HTML\/Javascript Subject Areas Game Data Attributes Tutorial<\/a>, as shown below, came in very handy as the starting point for the design and a large part of the workflow and coding of today&#8217;s &#8220;Comparisons and Superlatives&#8221; game, again primarily designed for testing and\/or improving some <i>question sentence<\/i> construction skills 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.  It&#8217;s easy to ask the questions, but getting the computer to answer &#8230; Gooooooooooogggggggglllllllleeeee?!<\/p>\n<p>So it&#8217;s <i>big &#8230; bigger &#8230; biggest<\/i> types of thinking with the game today, where the <a target=_blank title='Subject (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Subject_(grammar)'><i>subject<\/i><\/a> word(s) (where the rest of the (question) sentence (we were taught at school, in English grammar, is the <a target=_blank title='Predicate (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Predicate_(grammar)'>predicate<\/a>)) is matched by the user, interactively, with a suitable &#8230;<\/p>\n<ul>\n<li>comparative <a target=_blank title='Adjective (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Adjective'>adjective<\/a> &#8230; eg. taller &#8230; or &#8230;<\/li>\n<li>superlative adjective &#8230; eg. (the) tallest<\/li>\n<\/ul>\n<p> &#8230; along with a loose sanity check on sense, and then the user proceeds to also define a suitable &#8230;<\/p>\n<ul>\n<li>comparison <a target=_blank title='Object (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Object_(grammar)'>object<\/a> word(s) &#8230; and optionally &#8230;<\/li>\n<li>(additional) superlative <a target=_blank title='Object (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Object_(grammar)'>object<\/a> word(s) (prefixed by &#8221; and &#8220;)<\/li>\n<\/ul>\n<p>In doing this, and seeing the (question) sentences work, or not, you see that it is an &#8220;object&#8221; at play here, because where we have &#8220;subject&#8221; <a target=_blank title='Pronouns (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Pronoun'>pronouns<\/a> in the left hand list, by the time we want them to work in the right hand dropdown list of potential &#8220;object&#8221; <a target=_blank title='Pronouns (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Pronoun'>pronouns<\/a> we had to change their form, to have the (question) sentences be well formed sentences.  An example here is the &#8220;she&#8221; (as a subject) on the left hand column becomes &#8220;her&#8221; (as an object) on the right hand dropdown list.  This happens less with &#8220;subject&#8221; <a target=_blank title='Noun (grammar) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Noun'>nouns<\/a>.<\/p>\n<p>So why not try our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/compared_to.htm'>live run<\/a> or peruse the HTML and Javascript code behind its operation with <a target=_blank title='compared_to.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/compared_to.html_GETME'>compared_to.htm<\/a> today?<\/p>\n<p>Before we go, a catch up on <i>thank you<\/i>s to <i>Five-Minute Activities<\/i> by Penny Ur and Andrew Wright &#8230; ISBN: 978-0-521-39781-0 &#8230;<\/p>\n<ul>\n<li>Page 9 for today&#8217;s Superlative Comparing game &#8230; and &#8230;<\/li>\n<li>Page 54 for inspiration for yesterday&#8217;s Subject Areas game<\/li>\n<\/ul>\n<hr>\n<p id='hjsagdat'>Previous relevant <a target=_blank title='HTML\/Javascript Subject Areas Game Data Attributes Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-subject-areas-game-data-attributes-tutorial\/'>HTML\/Javascript Subject Areas Game Data Attributes 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\/subject_areas.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Subject Areas Game Data Attributes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas_better.jpg\" title=\"HTML\/Javascript Subject Areas Game Data Attributes Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Subject Areas Game Data Attributes Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s web application game &#8220;Subject Areas&#8221; which we started with <a title='HTML\/Javascript Subject Areas Game Tutorial' href='#hjsagt'>HTML\/Javascript Subject Areas Game Tutorial<\/a> had a weakness in <a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>&#8220;UX&#8221;<\/a> terms, and only for non-mobile platforms where <i>onmouseover<\/i> event means something &#8230; but a weakness nonetheless.  Perhaps it is good to develop a sense of such issues annoying you, and that way you learn things.<\/p>\n<p>So what are the specifics of this &#8220;weakness&#8221; (for non-mobile users)?  The dropdown being hovered on, in the old ways of yesterday, can give the game away, and make it too easy for the user to get the answer with no &#8220;thinking&#8221; effort.  The reason this has happened is due to the &#8220;old way&#8221; of adding a <i>title<\/i> property to all of the HTML <i>option<\/i> elements, that we use in a true data sense to make our game work &#8230; but nonetheless is the &#8220;weakness&#8221; we can remedy &#8230; with &#8230; <a target=_blank title='HTML and Javascript data attribute information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/Guide\/HTML\/Using_data_attributes'> <i>data attributes<\/i><\/a> and we&#8217;ve talked about this before at <a target=_blank title='XML to HTML PHP Three Ways Translation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-to-html-php-three-ways-translation-tutorial\/'>XML to HTML PHP Three Ways Translation Tutorial<\/a>.  And don&#8217;t want to come over all school master<i>ish<\/i> &#8216;n all, but &#8230; and isn&#8217;t there always a but<strike>t<\/strike> &#8230; <i>but<\/i> <font size=6 color=red>this is an important aspect<\/font> to adding data intelligence to your HTML work, and it doesn&#8217;t surprise me that in the title of that time we talked about it before there is <a target=_blank title='JSON information from w3schools' href='http:\/\/www.w3schools.com\/xml\/default.asp'>&#8220;XML&#8221;<\/a> mentioned.  XML normally has a lot of data intelligence, but <i>data attributes<\/i> can help you get towards some of that with your HTML web application work.  Specifically, HTML\/Javascript code-wise &#8230; we &#8230;<\/p>\n<ul>\n<li>used to, with HTML option elements, using the <i>title<\/i> property &#8230;\n<ol>\n<li>define <i>via<\/i> &#8230;<br \/>\n<code><br \/>\nselinnards += \"&lt;option <i>title=<\/i>'\" + ourwordlist[i].split(';')[1] + \"' value='\" + ourwordlist[i].split(';')[0] + \"'&gt;\" + ourwordlist[i].split(';')[0] + \"&lt;\/option&gt;\";<br \/>\n<\/code>\n<\/li>\n<li>reference <i>via<\/i> &#8230;<br \/>\n<code><br \/>\nif ((',' + selo.options[selo.selectedIndex]<i>.title<\/i> + ',').indexOf((',' + versus + ',')) != -1) {<br \/>\n \/\/ more code here<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<li> &#8230; versus &#8230; we now, with HTML option elements, using the data attribute &#8220;homespun&#8221; <i>data-title<\/i> data attribute &#8230;\n<ol>\n<li>define <b>via<\/b> &#8230;<br \/>\n<code><br \/>\nselinnards += \"&lt;option <b>data-title=<\/b>'\" + ourwordlist[i].split(';')[1] + \"' value='\" + ourwordlist[i].split(';')[0] + \"'&gt;\" + ourwordlist[i].split(';')[0] + \"&lt;\/option&gt;\";<br \/>\n<\/code>\n<\/li>\n<li>reference <b>via<\/b> &#8230;<br \/>\n<code><br \/>\nif ((',' + selo.options[selo.selectedIndex]<b>.getAttribute('data-title')<\/b> + ',').indexOf((',' + versus + ',')) != -1) {<br \/>\n \/\/ more code here<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Try our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.htm'>live run<\/a> (and\/or compare it to the <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.html'>old ways live run<\/a>) or peruse the HTML and Javascript code behind its operation with <a target=_blank title='subject_areas.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.html-GETME'>subject_areas.html<\/a> today, changed from yesterday in <a target=_blank title='subject_areas.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.html-GETME'>this way<\/a>.  Now you may notice examining this code, it does not exactly look as above, but this code above was working (and would still work) after an epiphany we had &#8230; but please don&#8217;t spread this epiphany around &#8230; especially on dry rye bread &#8230; that non-mobile users can have an improved game working this idea above, because there are probably ESL students, or others, who may want the hints that the onmouseover <i>title<\/i> property usage give, so how about we add a <i>degree of difficulty<\/i> concept to the game, for them, via &#8230;<\/p>\n<ul>\n<li>as <b>new<\/b> global variables &#8230;<br \/>\n<code><br \/>\nvar mode='difficult';<br \/>\nvar modeprefix='data-';<br \/>\n<\/code>\n<\/li>\n<li>at <i>onload<\/i> event (<i>unchanged code<\/i>) but changed HTML <b>just below that<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;body onload=\" <i>fillintable(0,'');<\/i> \" style=\"background-color:aqua;\"&gt;<br \/>\n&lt;h1&gt;Subject Areas <b>&lt;div id='ifnm' style=display:inline;&gt;&lt;\/div&gt; <\/b>&lt;a title='Your Own Subject Area' style='text-decoration:underline;cursor:pointer;' onclick='ask();'&gt;+&lt;\/a&gt;&lt;\/h1&gt;<br \/>\n<\/code>\n<\/li>\n<li>and at <i>fillintable(0,&#8221;)<\/i> call of function, the <b>new code<\/b> &#8230;<br \/>\n<code><br \/>\n<b>function locy(thisvalue) {<br \/>\n  location.href='.\/subject_areas.htm?score=' + score + '&goes=' + goes + '&difficulty=' + thisvalue;<br \/>\n}<br \/>\n<\/b><br \/>\nfunction fillintable(phase,addthis) {<br \/>\n  var i,j,thisrow=\"\",thesewords,k,selinnards='';<br \/>\n  if (phase == 0) {<br \/>\n <b>   mode=location.search.split('difficulty=')[1] ? location.search.split('difficulty=')[1].split('&')[0] : 'difficult';<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      phase=phase;<br \/>\n    } else if (mode.replace('difficult','') != '') {<br \/>\n      modeprefix='';<br \/>\n      document.getElementById('ifnm').innerHTML='&lt;select onchange=\" locy(this.value); \"&gt;&lt;option value=easy&gt;Hints (on hover) Game&lt;\/option&gt;&lt;option value=difficult&gt;No Hints Game&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n    } else {<br \/>\n      document.getElementById('ifnm').innerHTML='&lt;select onchange=\" locy(this.value); \"&gt;&lt;option value=difficult&gt;No Hints Game&lt;\/option&gt;&lt;option value=easy&gt;Hints (on hover) Game&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n    }<\/b><br \/>\n    var addit=location.search.split('addthis=')[1] ? decodeURIComponent(location.search.split('addthis=')[1]).split('&')[0] : '';<br \/>\n<\/code>\n<\/li>\n<li>and at the define, the code ideas coalesce, via &#8230;<br \/>\n<code><br \/>\nselinnards += \"&lt;option <b>\" + modeprefix + \"title=<\/b>'\" + ourwordlist[i].split(';')[1] + \"' value='\" + ourwordlist[i].split(';')[0] + \"'&gt;\" + ourwordlist[i].split(';')[0] + \"&lt;\/option&gt;\";<br \/>\n<\/code>\n<\/li>\n<li>and at the reference, the code ideas coalesce, via &#8230;<br \/>\n<code><br \/>\nif ((',' + selo.options[selo.selectedIndex]<b>.getAttribute(modeprefix + 'title')<\/b> + ',').indexOf((',' + versus + ',')) != -1) {<br \/>\n \/\/ more code here<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>As you can see, we really like Javascript global variables, but if you are like us in this way, be aware that this is not such a popular opinion.<\/p>\n<hr>\n<p id='hjsagt'>Previous relevant <a target=_blank title='HTML\/Javascript Subject Areas Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-subject-areas-game-tutorial\/'>HTML\/Javascript Subject Areas 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\/subject_areas.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Homonymns Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.jpg\" title=\"HTML\/Javascript Subject Areas Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Subject Areas Game Tutorial<\/p><\/div>\n<p>We&#8217;ve called today&#8217;s web application game &#8220;Subject Areas&#8221;, primarily designed for testing and\/or improving the vocabulary skills 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>We humans love to categorize things, and today, with this game of ours, we are facilitating that penchant we have by our &#8220;categories&#8221; being &#8220;Subjects&#8221;, like at school or in life, and the user of the game is asked to look down a list of words to pick ones where the word has a synergy with the &#8220;Subject&#8221;.  They score a point if we agree, and don&#8217;t think we don&#8217;t know if you cheat?!!?!?<\/p>\n<p>So why not try our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.htm'>live run<\/a> (which, today, acts differently to the web application that happens when you click the tutorial picture &#8230; more on that tomorrow, if you can&#8217;t guess it yourself?!) or peruse the HTML and Javascript code behind its operation with <a target=_blank title='subject_areas.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/subject_areas.html_GETME'>subject_areas.html<\/a> today (or at WordPress 4.1.1&#8217;s <a target=_blank title='HTML\/Javascript Subject Areas Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-subject-areas-game-tutorial\/'>HTML\/Javascript Subject Areas Game Tutorial<\/a>)?  That wasn&#8217;t rhetorical, was it?!<\/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='#d27032' onclick='var dv=document.getElementById(\"d27032\"); 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='d27032' 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='#d27051' onclick='var dv=document.getElementById(\"d27051\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/data-attributes\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27051' 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='#d27079' onclick='var dv=document.getElementById(\"d27079\"); 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='d27079' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s web application game &#8220;Subject Areas&#8221; of HTML\/Javascript Subject Areas Game Data Attributes Tutorial, as shown below, came in very handy as the starting point for the design and a large part of the workflow and coding of today&#8217;s &#8220;Comparisons &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-superlative-compare-game-data-attributes-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,15,37],"tags":[2090,151,2089,1980,503,513,537,576,849,917,1512,2087,2085,1111,1119,1120,1979,2086,2088,1319,1350,1356,1400,1421,1978,1456],"class_list":["post-27079","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-games","category-tutorials","tag-adjective","tag-blog","tag-comparison","tag-crawl","tag-gmail","tag-google","tag-grammar","tag-html","tag-object","tag-permalink","tag-permalinks","tag-predicate","tag-question","tag-search-engine","tag-sentence","tag-seo","tag-serach-engine-optimization","tag-subject","tag-superlative","tag-tutorial","tag-user-experience","tag-ux","tag-web","tag-website","tag-wen-server","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27079"}],"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=27079"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27079\/revisions"}],"predecessor-version":[{"id":37593,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27079\/revisions\/37593"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}