{"id":27117,"date":"2016-12-26T03:01:08","date_gmt":"2016-12-25T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27117"},"modified":"2016-12-25T18:39:21","modified_gmt":"2016-12-25T08:39:21","slug":"html-select-element-dynamic-multiple-attribute-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-game-tutorial\/","title":{"rendered":"HTML Select Element Dynamic Multiple Attribute Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/p><\/div>\n<p>Today, we have a new game that makes use of HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element <a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use during the workings of the game.<\/p>\n<p>This is on the way to a mathematics statistics application and also looking back at yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Tutorial' href='#hsedmat'>HTML Select Element Dynamic Multiple Attribute Tutorial<\/a>&#8216;s first <i>HTML select element multiple attribute mode<\/i> blog posting here at this blog.<\/p>\n<p>For this game, unlike yesterday&#8217;s &#8230;<\/p>\n<blockquote><p>\nShould it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter\n<\/p><\/blockquote>\n<p> &#8230; we have &#8220;the full circle&#8221; applying today, where the user is &#8230;<\/p>\n<ul>\n<li>shown the game status in Single attribute mode &#8230; and &#8230;<\/li>\n<li>waiting for user interaction in Multiple attribute mode<\/li>\n<\/ul>\n<p> &#8230; and we need all of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript onclick event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onclick.asp'>onclick<\/a> (select) and onclick (option)<\/li>\n<li><a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'>onfocus<\/a> (select) and onfocus (option)<\/li>\n<\/ul>\n<p> &#8230; but curiously, not the usual <i><a target=_blank title='Event onchange information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onchange.asp'>onchange<\/a> (select)<\/i> event &#8230; to work the functionality for the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html\" title='Click picture'>Random Counting Numbers Game<\/a> whose HTML and Javascript code you can examine at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html_GETME\" title='random_counting_numbers.html'>random_counting_numbers.html<\/a> link.  Food for thought, we hope.<\/p>\n<hr>\n<p id='hsedmat'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-tutorial\/'>HTML Select Element Dynamic Multiple Attribute 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\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tz_places_multiple_video.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Tutorial<\/p><\/div>\n<p>Am sure a lot of web programmers would like to invent some generic code to allow the HTML select (&#8220;dropdown&#8221;) element be able to toggle between the &#8230;<\/p>\n<ol>\n<li>Single select attribute mode &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>Multiple<\/a> select attribute mode<\/li>\n<\/ol>\n<p> &#8230; dynamically, using Javascript DOM.  But in order to be able to write a practically useful generic bit of code you have to have a confluence of agreed design guidelines, with lots of people participating and sticking to the guidelines, or have a concept whose predictability about &#8220;event&#8221; logic is pretty easy to envisage and define, for a lot of programmers to agree upon.  But trying to pin down the &#8220;event&#8221; logic of a &#8230;<\/p>\n<ul>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onchange<\/i> event &#8230; or even the &#8230;<\/li>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onclick<\/i> event (as a first &#8220;wild&#8221; thought getting into the problem)<\/li>\n<\/ul>\n<p> &#8230; is like catching a worm at the bottom of a 27 storey building being thrown from the top &#8230; you need to know when to give up too &#8230; think <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this salutary thought<\/a>.<\/p>\n<p>But that doesn&#8217;t mean the idea of an HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled is not a good idea, but it just means you need to focus on &#8230;<\/p>\n<ul>\n<li>Should it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter<\/li>\n<li>Define what can be done to repeat the actions of the (what was only for the Single attribute mode of use) <i>onchange<\/i> event logic but for a scenario where that is applied several times for variable inputs, and is that requirement &#8230;\n<ol>\n<li>synchronous &#8230; or &#8230;<\/li>\n<li>asynchronous<\/li>\n<\/ol>\n<p> &#8230; and for us, today, we need &#8220;synchronous&#8221; alas (as &#8220;asynchronous&#8221; would be a lot easier) &#8230; and this will become apparent later\n<\/li>\n<\/ul>\n<p>Okay, &#8220;later&#8221; has arrived, and it is time to define where we applied an example of <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> in our web applications.  We decided to do it for our interfacings to our &#8230;<\/p>\n<ul>\n<li><a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.htm'>karaoke_youtube_api.htm<\/a> to change in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.html'>this way<\/a>, for today&#8217;s work, and that we last tweaked with <a target=_blank title='Australian Indigenous Language HTML Map Audio and YouTube Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-audio-and-youtube-tutorial\/'>Australian Indigenous Language HTML Map Audio and YouTube Tutorial<\/a> &#8230; and that supervises &#8230;<\/li>\n<li>&#8220;Child&#8221; HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>stop_start_youtube.html<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>this way<\/a> for today&#8217;s work, both establishing each other&#8217;s requirements for this new functionality via URL get parameter usage (ie. via use of the ? and &#038; of URLs), with or without HTML form element usage<\/li>\n<\/ul>\n<p>As we said earlier, we&#8217;re dealing with &#8220;synchronous&#8221; requirements here, giving the user the nominal video duration time, plus twenty seconds, to view the current video before the &#8220;child&#8221; calls the &#8220;parent&#8221; to change videos, powered via the Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer functionality, possible only because of the YouTube API&#8217;s video duration time information (which we already had stored on the text of the &#8220;dropdown&#8221; &#8230; we must have seen this coming?!).<\/p>\n<p>Okay, what we are doing here can be defined, and that is good for this project, but can you imagine a generic <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> for all the other myriad of uses HTML select (&#8220;dropdown&#8221;) elements are put to by programmers &#8230; recalls to mind that lame excuse at school &#8230; &#8220;it depends&#8221; &#8230; but that is true here, and generic thoughts will need a much more lateral thought process &#8220;outside the box&#8221; to get towards a better generic idea.<\/p>\n<p>However, in the meantime, this change today will have made quite a lot of difference to &#8230;<\/p>\n<ul>\n<li>YouTube API for Iframe embedded videos &#8220;parent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm'>live run<\/a> (where you perform a Search for YouTube videos of interest such as <a target=_blank title='Example search' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide'>this Adelaide search<\/a> example) &#8230; and the recent &#8230;<\/li>\n<li>TimeZone Places &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='tz_places.php'>live run<\/a> &#8230; and &#8230;<\/li>\n<li>Australian Indigenous Languages &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\" title=\"aboriginal_language_regions.html\">live run<\/a> &#8230; and &#8230;<\/li>\n<li>Country Quiz &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php\" title=\"country_flag_quiz.php\">live run<\/a><\/li>\n<\/ul>\n<p>And we hope you get something out of trying out this new additional functionality &#8230; the Single attribute mode of use is unchanged.<\/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='#d27104' onclick='var dv=document.getElementById(\"d27104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27104' 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='#d27117' onclick='var dv=document.getElementById(\"d27117\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27117' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today, we have a new game that makes use of HTML select element multiple attribute mode use during the workings of the game. This is on the way to a mathematics statistics application and also looking back at yesterday&#8217;s HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-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":[367,476,477,576,652,2092,861,2077,997,1866,1319],"class_list":["post-27117","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-dropdown","tag-game","tag-games-2","tag-html","tag-javascript","tag-multiple","tag-onclick","tag-onfocus","tag-programming","tag-select","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27117"}],"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=27117"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27117\/revisions"}],"predecessor-version":[{"id":27120,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27117\/revisions\/27120"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}