Yesterdayโs web application game โSubject Areasโ 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โs โComparisons and Superlativesโ game, again primarily designed for testing and/or improving some question sentence construction skills for ESL (or โEnglish as a Second or Foreign Languageโ) students. Itโs easy to ask the questions, but getting the computer to answer โฆ Gooooooooooogggggggglllllllleeeee?!
So itโs big โฆ bigger โฆ biggest types of thinking with the game today, where the subject word(s) (where the rest of the (question) sentence (we were taught at school, in English grammar, is the predicate)) is matched by the user, interactively, with a suitable โฆ
- comparative adjective โฆ eg. taller โฆ or โฆ
- superlative adjective โฆ eg. (the) tallest
โฆ along with a loose sanity check on sense, and then the user proceeds to also define a suitable โฆ
- comparison object word(s) โฆ and optionally โฆ
- (additional) superlative object word(s) (prefixed by โ and โ)
In doing this, and seeing the (question) sentences work, or not, you see that it is an โobjectโ at play here, because where we have โsubjectโ pronouns in the left hand list, by the time we want them to work in the right hand dropdown list of potential โobjectโ pronouns we had to change their form, to have the (question) sentences be well formed sentences. An example here is the โsheโ (as a subject) on the left hand column becomes โherโ (as an object) on the right hand dropdown list. This happens less with โsubjectโ nouns.
So why not try our liverun or peruse the HTML and Javascript code behind its operation with compared_tohtm today?
Before we go, a catch up on thank yous to .. by Penny Ur and Andrew Wright โฆ ISBN: 978-0-521-39781-0 โฆ
- Page 9 for todayโs Superlative Comparing game โฆ and โฆ
- Page 54 for inspiration for yesterdayโs Subject Areas game
Previous relevant HTML/Javascript Subject Areas Game Data Attributes Tutorial is shown below.
Yesterdayโs web application game โSubject Areasโ which we started with HTML/Javascript Subject Areas Game Tutorial had a weakness in โUXโ terms, and only for non-mobile platforms where onmouseover event means something โฆ but a weakness nonetheless. Perhaps it is good to develop a sense of such issues annoying you, and that way you learn things.
So what are the specifics of this โweaknessโ (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 โthinkingโ effort. The reason this has happened is due to the โold wayโ of adding a title property to all of the HTML option elements, that we use in a true data sense to make our game work โฆ but nonetheless is the โweaknessโ we can remedy โฆ with โฆ data attributes and weโve talked about this before at XML to HTML PHP Three Ways Translation Tutorial. And donโt want to come over all school masterish โn all, but โฆ and isnโt there always a butt โฆ but this is an important aspect to adding data intelligence to your HTML work, and it doesnโt surprise me that in the title of that time we talked about it before there is โXMLโ mentioned. XML normally has a lot of data intelligence, but data attributes can help you get towards some of that with your HTML web application work. Specifically, HTML/Javascript code-wise โฆ we โฆ
- used to, with HTML option elements, using the title property โฆ
- define via โฆ
selinnards += "<option title='" + ourwordlist[i].split(';')[1] + "' value='" + ourwordlist[i].split(';')[0] + "'>" + ourwordlist[i].split(';')[0] + "</option>"; - reference via โฆ
if ((',' + selo.options[selo.selectedIndex].title + ',').indexOf((',' + versus + ',')) != -1) {
// more code here
}
- define via โฆ
- โฆ versus โฆ we now, with HTML option elements, using the data attribute โhomespunโ data-title data attribute โฆ
- define via โฆ
selinnards += "<option data-title='" + ourwordlist[i].split(';')[1] + "' value='" + ourwordlist[i].split(';')[0] + "'>" + ourwordlist[i].split(';')[0] + "</option>"; - reference via โฆ
if ((',' + selo.options[selo.selectedIndex].getAttribute('data-title') + ',').indexOf((',' + versus + ',')) != -1) {
// more code here
}
- define via โฆ
Try our liverun (and/or compare it to the oldways live run) or peruse the HTML and Javascript code behind its operation with subject_areashtml today, changed from yesterday in thisway. 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 โฆ but please donโt spread this epiphany around โฆ especially on dry rye bread โฆ 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 title property usage give, so how about we add a degree of difficulty concept to the game, for them, via โฆ
- as new global variables โฆ
var mode='difficult';
var modeprefix='data-'; - at onload event (unchanged code) but changed HTML just below that โฆ
<body onload=" fillintable(0,''); " style="background-color:aqua;">
<h1>Subject Areas <div id='ifnm' style=display:inline;></div> <a title='Your Own Subject Area' style='text-decoration:underline;cursor:pointer;' onclick='ask();'>+</a></h1> - and at fillintable(0,โ) call of function, the new code โฆ
function locy(thisvalue) {
location.href='./subject_areas.htm?score=' + score + '&goes=' + goes + '&difficulty=' + thisvalue;
}
function fillintable(phase,addthis) {
var i,j,thisrow="",thesewords,k,selinnards='';
if (phase == 0) {
mode=location.search.split('difficulty=')[1] ? location.search.split('difficulty=')[1].split('&')[0] : 'difficult';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
phase=phase;
} else if (mode.replace('difficult','') != '') {
modeprefix='';
document.getElementById('ifnm').innerHTML='<select onchange=" locy(this.value); "><option value=easy>Hints (on hover) Game</option><option value=difficult>No Hints Game</option></select>';
} else {
document.getElementById('ifnm').innerHTML='<select onchange=" locy(this.value); "><option value=difficult>No Hints Game</option><option value=easy>Hints (on hover) Game</option></select>';
}
var addit=location.search.split('addthis=')[1] ? decodeURIComponent(location.search.split('addthis=')[1]).split('&')[0] : ''; - and at the define, the code ideas coalesce, via โฆ
selinnards += "<option " + modeprefix + "title='" + ourwordlist[i].split(';')[1] + "' value='" + ourwordlist[i].split(';')[0] + "'>" + ourwordlist[i].split(';')[0] + "</option>"; - and at the reference, the code ideas coalesce, via โฆ
if ((',' + selo.options[selo.selectedIndex].getAttribute(modeprefix + 'title') + ',').indexOf((',' + versus + ',')) != -1) {
// more code here
}
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.
Previous relevant HTML/Javascript Subject Areas Game Tutorial is shown below.
Weโve called todayโs web application game โSubject Areasโ, primarily designed for testing and/or improving the vocabulary skills for ESL (or โEnglish as a Second or Foreign Languageโ) students.
We humans love to categorize things, and today, with this game of ours, we are facilitating that penchant we have by our โcategoriesโ being โSubjectsโ, 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 โSubjectโ. They score a point if we agree, and donโt think we donโt know if you cheat?!!?!?
So why not try our liverun (which, today, acts differently to the web application that happens when you click the tutorial picture โฆ more on that tomorrow, if you canโt guess it yourself?!) or peruse the HTML and Javascript code behind its operation with subject_areashtml today (or at WordPress 4.1.1โs HTML/Javascript Subject Areas Game Tutorial)? That wasnโt rhetorical, was it?!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.