{"id":31625,"date":"2017-07-22T03:01:08","date_gmt":"2017-07-21T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31625"},"modified":"2017-07-21T20:42:05","modified_gmt":"2017-07-21T10:42:05","slug":"medical-roots-and-prefixes-and-suffixes-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/medical-roots-and-prefixes-and-suffixes-game-tutorial\/","title":{"rendered":"Medical Roots and Prefixes and Suffixes Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/health_fix_meaning.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Medical Roots and Prefixes and Suffixes Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/health_fix_meaning.jpg\" title=\"Medical Roots and Prefixes and Suffixes Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Medical Roots and Prefixes and Suffixes Game Tutorial<\/p><\/div>\n<p>For us, there is a lot to discuss regarding HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> (dropdown) elements.  Alas, the mobile platforms have limited the power of these types of elements with their lack of <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_size.asp' title='CSS size attribute information from w3schools'><i>size<\/i><\/a> attribute values greater than one, and the ability to &#8220;drill into&#8221; the (HTML select element) <a target=_blank title='CSS multiple attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_multiple.asp'><i>multiple<\/i><\/a> attribute implications to HTML <i>option<\/i> (sub)element events, like their <a target=_blank title='Event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'><i>onclick<\/i><\/a> events.  This, as also discussed recently, at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-nested-centering-via-multiple-select-tutorial\/' title='HTML Nested Centering via Multiple Select Tutorial'>HTML Nested Centering via Multiple Select Tutorial<\/a> makes our &#8220;dream&#8221; of timed HTML select (dropdown) element in <i>multiple<\/i> attribute mode controlled functionality (rather than relying on any accompanying HTML buttons), impractical for the mobile platforms.<\/p>\n<p>Nevertheless, today, with our &#8220;Health Root or Prefix or Suffix Meaning Game&#8221;, testing the user&#8217;s understanding of the meaning of various medical roots, prefixes and suffixes, we allow for two dropdowns related to <i>single selection mode<\/i> meanings and for the selection of <i>medical roots and prefixes and suffixes<\/i> in <i>single selection mode<\/i> for the mobile platforms, but in (our &#8220;dream&#8221;) &#8220;unaccompanied&#8221; HTML select element <i>timed multiple selection mode<\/i> for non-mobile platforms.  Now, with these non-mobile platform <i>timed multiple selection mode<\/i>s we need &#8230;<\/p>\n<ul>\n<li>effectively ignore that <i>multiple selection mode<\/i> dropdown&#8217;s <a target=_blank title='Event onchange information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onchange.asp'><i>onchange<\/i><\/a> event &#8230; in favour of &#8230;<\/li>\n<li>use a <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> function to continually check <i>multiple selection mode<\/i> dropdown selections &#8230; given a &#8230;<\/li>\n<li>delay is introduced into the logic to allow for user &#8220;thinking time&#8221; but not too long to be annoying, the triggering of which is interrupted (and started again) by any dropdown <a target=_blank title='Event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'><i>onclick<\/i><\/a> event occurrences<\/li>\n<\/ul>\n<p> &#8230; the affect of which, for non-mobile platforms, the ability to &#8220;drill into&#8221; the dropdown&#8217;s events, whereas with mobile platforms that &#8220;listener&#8221; for dropdown value changes is hampered by that dropdown only &#8220;releasing&#8221; its values after the mobile platform web browser logic supervision is over.  Hence the mobile platform need to accompany <i>multiple selection mode<\/i> dropdowns with a button.<\/p>\n<p>Let me explain a bit about what prompted this web application architecture thinking.  This is the first web application, to our memory that has a table with a left hand cell and a right hand cell where &#8230;<\/p>\n<ul>\n<li>we allow for either left hand cell or right hand cell to contain the &#8220;unknown&#8221; for the user&#8217;s interaction, or the known for the user&#8217;s interaction &#8230; the difference between the two being &#8230;<\/li>\n<li>a single selection in the left hand cell&#8217;s dropdown can result in only one correct right hand cell dropdown correct answer &#8230; but &#8230;<\/li>\n<li>a single selection in the right hand cell&#8217;s dropdown can sometimes result in several correct left hand cell dropdown answers<\/li>\n<\/ul>\n<p> &#8230; and for that last aspect to the &#8220;data architecture&#8221; features of this web application, we&#8217;d like to reward the non-mobile user with extensive knowledge, the chance to use a (timed) <i>multiple selection mode<\/i> dropdown to score points for all of their selections, and in that way to be able to have a &#8220;score&#8221; greater than the number of &#8220;goes&#8221;.<\/p>\n<p>An interesting limitation to <i>timed multiple selection mode<\/i> dropdowns like this is that, short of a button to press, it is best to present all the <i>option<\/i> subelements of the dropdown before the user&#8217;s eyes.  This can present the problem that it is not great here if the resultant dropdown, defined with a <i>size<\/i> attribute equal to the number of <i>option<\/i> (sub)elements, becomes so big it extends <a target=_blank title='Google search for Below the Fold' href='https:\/\/www.google.com.au\/search?q=below+the+meld&#038;oq=below+the+meld&#038;aqs=chrome..69i57j69i61l3.3437j0j7&#038;sourceid=chrome&#038;ie=UTF-8#q=below+the+fold&#038;*'>beyond the (screen) fold<\/a>.  This is not the end of the world, but it is a bit annoying, as might be our remedy today (though in our defence there is nothing stopping the user zooming the window with non-mobile web browsers), using the document.body <a target=_blank title='Event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onload.asp'><i>onload<\/i><\/a> event timed code line &#8230;<\/p>\n<p><code><br \/>\nvar smallfs=\"6px\";<br \/>\nvar origfs=window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a>(document.getElementById('root_prefix_suffix'), null).getPropertyValue(\"font-size\");<br \/>\n<\/code><\/p>\n<p> &#8230; to allow for &#8220;scrunched up &#8216;smallfs'&#8221; size &gt; 1 <i>timed multiple selection mode<\/i> left hand cell scenarios to toggle to &#8220;not scrunched up &#8216;origfs'&#8221; size = 1 <i>single selection mode<\/i> left hand cell scenarios, and back, as necessary, depending on the random &#8220;mode of question type&#8221; talked about in first point of list above.<\/p>\n<p>Another aspect to any such web application is &#8220;how not to give the game away (too easily)&#8221; by either of &#8230;<\/p>\n<ul>\n<li>leaving <a target=_blank title='Event onmouseover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseover.asp'><i>onmouseover<\/i><\/a> event information to be shown (giving the game away) &#8230; revolves around the use of <i>data attributes<\/i> here as well, as you can see being played out in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-subject-areas-game-data-attributes-tutorial\/' title='HTML\/Javascript Subject Areas Game Data Attributes Tutorial'>HTML\/Javascript Subject Areas Game Data Attributes Tutorial<\/a> &#8230; and\/or <\/li>\n<li>a one to one order of matching left hand cell dropdown element option subelements to those of the right hand cell<\/li>\n<\/ul>\n<p> &#8230; and the (rather doh!ish) solution to this is to work on the right hand cell data and filter (out repeated) <i>meaning<\/i> data items, and to alphabetically <a target=_blank title='Javascript array sort information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_sort.asp'>sort<\/a> them.<\/p>\n<p>Today&#8217;s HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/health_fix_meaning.html_GETME\" title='health_fix_meaning.html'>health_fix_meaning.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/health_fix_meaning.html\" title='Click picture'>live run<\/a> is here for you to peruse, or try out.  Thanks to <i>HLTAAP001 Recognise healthy body systems &#8211; Reading 1: Apply knowledge of the basic structure of the healthy human body NSW DET 2007<\/i> for the web content ideas.<\/p>\n<p>Today&#8217;s web application has big synergies with <a title='PHP\/Javascript Derivations Game Tutorial' href='#php\/jdgt'>PHP\/Javascript Derivations Game Tutorial<\/a> regarding Greek and Latin roots in the English language.<\/p>\n<hr>\n<p id='php\/jdgt'>Previous relevant <a target=_blank title='PHP\/Javascript Derivations Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php\/javascript-derivations-game-tutorial\/'>PHP\/Javascript Derivations 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\/PHP\/DerivationsGame\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP The Derivations Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/DerivationsGame\/DerivationsGame.jpg\" title=\"PHP\/Javascript Derivations Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript Derivations Game Tutorial<\/p><\/div>\n<p>Do you like word games?  Today&#8217;s game takes Latin and Greek root words, shows you their meaning, and asks you for a derived English Word based on this Latin or Greek root word &#8230; we&#8217;re going to call the game <i>&#8220;The Derivations Game&#8221;<\/i> &#8230; and you score a point for each word you supply that satisfies some criteria for whether they are derived from your Latin or Greek root (word).  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>Programmers often use <a target_blank title='Words (unix) information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Words_%28Unix%29'>Linux dictionary files<\/a> as a means to get a word list, and that list could be in any language, and for ours it is English, so to make it for another language, you\u2019d need a Linux dictionary arrangement (on your web server) with a different language base.<\/p>\n<p>This <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/DerivationsGame\/\" title=\"The Derivations Game\">game<\/a> has two parts to it for PHP and Javascript to respectively assess a word to use and arrange the user interaction.<\/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\/PHP\/DerivationsGame\/\">live run<\/a>.<\/p>\n<p>Thanks to &#8220;Text Types in English&#8221; by Mark Anderson and Kathy Anderson pp. 57-58 for the idea for this tutorial.<\/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 word, 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>Anyway, see how you go with this game of interest and history!<\/p>\n<p>Here is a link to some downloadable PHP (with Javascript) programming code you could rename to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/DerivationsGame\/latin_greek.php_GETME\" title=\"latin_greek.php\">latin_greek.php<\/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='#d6541' onclick='var dv=document.getElementById(\"d6541\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=44\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6541' 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='#d31625' onclick='var dv=document.getElementById(\"d31625\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/select\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31625' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>For us, there is a lot to discuss regarding HTML select (dropdown) elements. Alas, the mobile platforms have limited the power of these types of elements with their lack of size attribute values greater than one, and the ability to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/medical-roots-and-prefixes-and-suffixes-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,14,37],"tags":[51,174,2084,367,388,400,449,1801,543,576,652,683,762,795,2092,1631,861,870,2273,2270,997,1070,1866,1126,2272,2271,2274,1319,1827,1498],"class_list":["post-31625","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-above-the-fold","tag-button","tag-data-attributes","tag-dropdown","tag-english","tag-event","tag-fold","tag-getcomputedstyle","tag-greek","tag-html","tag-javascript","tag-latin","tag-medicine","tag-mobile","tag-multiple","tag-onchange","tag-onclick","tag-onload","tag-option","tag-prefix","tag-programming","tag-root","tag-select","tag-settimeout","tag-size","tag-suffix","tag-timed","tag-tutorial","tag-window-getcomputedstyle","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31625"}],"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=31625"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31625\/revisions"}],"predecessor-version":[{"id":31642,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31625\/revisions\/31642"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=31625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=31625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=31625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}