{"id":46373,"date":"2019-09-12T03:01:09","date_gmt":"2019-09-11T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46373"},"modified":"2019-09-11T13:21:06","modified_gmt":"2019-09-11T03:21:06","slug":"smooth-spinner-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/smooth-spinner-game-tutorial\/","title":{"rendered":"Smooth Spinner Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Smooth Spinner Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/smooth_spinner_game.jpg\" title=\"Smooth Spinner Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Smooth Spinner Game Tutorial<\/p><\/div>\n<p>Adding onto the recent <a title='Onmouseover and Onmouseout Event Monitoring Tutorial' href='#ooemt'>Onmouseover and Onmouseout Event Monitoring Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>Simple Maths Timer Game<\/li>\n<li>Onmouseover and Onmouseout Monitor &#8230; we add, today, a new &#8230;<\/li>\n<li>Smooth Spinner Game<\/li>\n<\/ul>\n<p> &#8230; test of a user&#8217;s control, nerve and patience, where they need to hover (or click, for mobile devices) in consecutive order to maximise their score, that is also made up of a speed component to put dawdlers in their place <font size=1>&#8230; ie. not nirvana<\/font>.<\/p>\n<p>Yes, non-mobile players will score better than mobile device players, because of the existence of an onmouseover (ie. hover) event.  This same lament for mobile devices is a similar lament regarding a lot of Ajax functionality thoughts, which were very suited to making use of the onmouseover event.<\/p>\n<p>With this game we can work in either &#8230;<\/p>\n<ul>\n<li>Simple Maths Timer Game&#8217;s table cell mode &#8230; or &#8230;<\/li>\n<li>Onmouseover and Onmouseout Monitor&#8217;s div element mode<\/li>\n<\/ul>\n<p> &#8230; and so it is really only the new scoring arrangements, and the changing of &#8220;binary&#8221; H1 click toggling to &#8220;ternary&#8221; (or more) select element selection, involved in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html---GETME\">mo_me_rt_t.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\"><strike>dual<\/strike>ternary purpose live run<\/a> link, today.<\/p>\n<p>Before we leave this posting a coding approach we&#8217;d never used up until now got involved in the use of the new select (dropdown) element introduced.  We gave &#8220;ID&#8221; properties to all option sub-members to the select element.  We also wanted to keep the traditional size=1 way of select elements (and always on mobile platforms), aware of not overusing height up the top of the webpage.  The select element can serve a dual purpose here &#8230;<\/p>\n<ul>\n<li>always show, in words, the other two modes of functionality, to help the user &#8230; and this can be contained in that first option element&#8217;s innerHTML property &#8230; and&#8230;<\/li>\n<li>the other two option elements can be rearranged value-wise and innerHTML-wise (they are always the same, for these two) for uniquifying option values, and at the end of the onchange logic &#8230;<br \/>\n<code><br \/>\nfunction stoggle(osel) {<br \/>\n  var three=3, wasv='', newoi=' versus ', cs=['Simple Maths Timer Game','Onmouseover and Onmouseout Monitor','Smooth Spinner Game'], nv=osel.value;<br \/>\n  if (osel.value != modeofgame) {<br \/>\n    wasv=document.getElementById('myh1').innerHTML.split('&')[0].split('&lt;')[0];<br \/>\n    document.getElementById('soption').value=nv;<br \/>\n    for (var ics=0; ics&lt;cs.length; ics++) {<br \/>\n      if (cs[ics] != nv) {  if (newoi == ' versus ') { newoi+=cs[ics];  document.getElementById('o2').value=cs[ics];  document.getElementById('o2').innerHTML=cs[ics]; } else {   newoi+=' or ' + cs[ics];   document.getElementById('o' + three).value=cs[ics];  document.getElementById('o' + three).innerHTML=cs[ics]; three++;   }     }<br \/>\n    }<br \/>\n    document.getElementById('soption').innerHTML=newoi;<br \/>\n    document.getElementById('myh1').innerHTML=nv;<br \/>\n    document.getElementById('stoggle').value=nv;<br \/>\n    modeofgame=nv;<br \/>\n    if (modeofgame == \"Simple Maths Timer Game\" && wasv != \"Simple Maths Timer Game\") { \/\/\"Onmouseover and Onmouseout Monitor\") {<br \/>\n     location.href=document.URL;<br \/>\n    } else if (modeofgame == \"Onmouseover and Onmouseout Monitor\") {<br \/>\n     divonl();<br \/>\n    } else if (modeofgame == \"Smooth Spinner Game\") {<br \/>\ndocument.getElementById('score').innerHTML='';<br \/>\ndocument.getElementById('sofar').style.display='none';<br \/>\ndocument.getElementById('bclear').style.display='none';<br \/>\ndocument.getElementById('prebonus').style.display='none';<br \/>\ndocument.getElementById('bonus').style.display='none';<br \/>\nif (wasv == \"Simple Maths Timer Game\") {<br \/>\ndocument.getElementById('myq').style.fontSize='10px';<br \/>\ndocument.getElementById('mya').style.fontSize='10px';<br \/>\ndocument.getElementById('myq').innerHTML='Hover or Click&lt;br&gt; clockwise or anticlockwise';<br \/>\ndocument.getElementById('mya').innerHTML=' ... as fast&lt;br&gt; as you can ...';<br \/>\n}<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; always setting the select (dropdown) value equal to the first option value, and so always showing, in words, the full picture, for the user <font size=1>&#8230; yoo hoo, you can wake up now!<\/font>\n<\/li>\n<\/ul>\n<hr>\n<p id='ooemt'>Previous relevant <a target=_blank title='Onmouseover and Onmouseout Event Monitoring Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/onmouseover-and-onmouseout-event-monitoring-tutorial\/'>Onmouseover and Onmouseout Event Monitoring 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\/mo_me_rt_t.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Onmouseover and Onmouseout Event Monitoring Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/momertt.jpg\" title=\"Onmouseover and Onmouseout Event Monitoring Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Onmouseover and Onmouseout Event Monitoring Tutorial<\/p><\/div>\n<p>Perhaps you were reading yesterday&#8217;s <a title='Maths Ouija Board Quiz Primer Tutorial' href='#mobqpt'>Maths Ouija Board Quiz Primer Tutorial<\/a> and wondering &#8220;what gives with the &#8216;mo_me_rt_t.htm&#8217; name of the web application&#8221;?  Well, the original inspiration at <a target=_blank title='Moving the mouse: mouseover\/out, mouseenter\/leave' href='https:\/\/javascript.info\/mousemove-mouseover-mouseout-mouseenter-mouseleave'>&#8220;Moving the mouse: mouseover\/out, mouseenter\/leave&#8221;<\/a>, thanks, was for an Onmouseover and Onmouseout Event Monitor web application, and today we go back and add to &#8230;<\/p>\n<ul>\n<li>Maths Ouija Board Quiz &#8230; based on table cells &#8230; to &#8230;<\/li>\n<li>Onmouseover and Onmouseout Event Monitoring &#8230; based on div elements &#8230;<\/li>\n<\/ul>\n<p> &#8230; because nested hierarchical element arrangements like with HTML tables (with their cells) muddy the waters quite a bit trying to show the user a log also involving &#8230;<\/p>\n<blockquote cite='https:\/\/javascript.info\/mousemove-mouseover-mouseout-mouseenter-mouseleave'><p>\nThese events are special, because they have property relatedTarget. This property complements target. When a mouse leaves one element for another, one of them becomes target, and the other one \u2013 relatedTarget.<br \/>\n<br \/>\nFor mouseover:<br \/>\n<br \/>\nevent.target \u2013 is the element where the mouse came over.<br \/>\nevent.relatedTarget \u2013 is the element from which the mouse came (relatedTarget \u2192 target).<br \/>\nFor mouseout the reverse:<br \/>\n<br \/>\nevent.target \u2013 is the element that the mouse left.<br \/>\nevent.relatedTarget \u2013 is the new under-the-pointer element, that mouse left for (target \u2192 relatedTarget).\n<\/p><\/blockquote>\n<p> &#8230; and we want to mull over this, starting by logging event behaviour.  We allow for an HTML h1 click\/touch toggling of functionality, and we initially have the table cells show, but a toggling, maps over these table cells, position and all, with &#8230;<\/p>\n<ul>\n<li>HTML divs &#8230;<\/li>\n<li>CSS styled like table cells (ie. td) &#8230; and using &#8230;<\/li>\n<li>HTML table cell (ie. td) outerHTML property &#8230; added with &#8230;<\/li>\n<li>&#8220;overlay&#8221; favourites &#8230;\n<ol>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li>[HTML element].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>() method to arrive with properties top, left, width, height (as we did with HTML map area subelements mapped to div when we presented <a target=_blank title='Very Versus Too Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/very-versus-too-game-primer-tutorial\/'>Very Versus Too Game Primer Tutorial<\/a>)<\/li>\n<\/ol>\n<p> &#8230; and &#8220;underlay&#8221; [HTML element].style.display=&#8217;none&#8217; or [HTML element].style.visibility=&#8217;hidden&#8217;\n<\/li>\n<\/ul>\n<p>See <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html--GETME\">mo_me_rt_t.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\">dual purpose live run<\/a> link.<\/p>\n<hr>\n<p id='mobqpt'>Previous relevant <a target=_blank title='Maths Ouija Board Quiz Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/maths-ouija-board-quiz-primer-tutorial\/'>Maths Ouija Board Quiz Primer 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\/mo_me_rt_t.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Maths Ouija Board Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.jpg\" title=\"Maths Ouija Board Quiz Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Maths Ouija Board Quiz Primer Tutorial<\/p><\/div>\n<p>We&#8217;re not really using a ouija board with today&#8217;s Maths Quiz web application, but if you use the mouse or trackpad means by which to answer the Maths arithmetic, it can feel like an ouija board in play.<\/p>\n<p>We&#8217;ve arranged answers that just involve numbers so can have it that &#8230;<\/p>\n<ul>\n<li>keyboard numbers can be interpreted as part of a user&#8217;s answer &#8230;<\/li>\n<li>keyboard non-numbers can be interpreted as go check the answer &#8230;<\/li>\n<li>onmouseover or onclick of number buttons are interpreted as part of a user&#8217;s answer &#8230;<\/li>\n<li>onmouseover or onclick of &#8220;Check Answer&#8221; buttons go check the answer<\/li>\n<\/ul>\n<p>The third of those above you may wonder about double ups.  We left a setTimeout period of no doubling up between onmouseover and onclick event logics to help here.<\/p>\n<p>Today&#8217;s quiz scoring allows for bonus points for those quick to answer.  The countdown of bonus points, as above, is achieved via a setTimeout timer.<\/p>\n<p>Do you want to give today&#8217;s HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html-GETME\">mo_me_rt_t.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\">a go<\/a>?  We hope you do!<\/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='#d46326' onclick='var dv=document.getElementById(\"d46326\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46326' 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='#d46341' onclick='var dv=document.getElementById(\"d46341\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/event\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46341' 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='#d46373' onclick='var dv=document.getElementById(\"d46373\"); 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='d46373' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Adding onto the recent Onmouseover and Onmouseout Event Monitoring Tutorial &#8230; Simple Maths Timer Game Onmouseover and Onmouseout Monitor &#8230; we add, today, a new &#8230; Smooth Spinner Game &#8230; test of a user&#8217;s control, nerve and patience, where they &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/smooth-spinner-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":[1554,174,1580,342,367,400,476,477,576,652,673,752,3004,861,2337,1661,871,2273,997,1866,1238,1319,1891],"class_list":["post-46373","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-arithmetic","tag-button","tag-cell","tag-div","tag-dropdown","tag-event","tag-game","tag-games-2","tag-html","tag-javascript","tag-keyboard","tag-mathematics","tag-maths","tag-onclick","tag-onkeypress","tag-onmouseout","tag-onmouseover","tag-option","tag-programming","tag-select","tag-table","tag-tutorial","tag-user"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46373"}],"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=46373"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46373\/revisions"}],"predecessor-version":[{"id":46375,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46373\/revisions\/46375"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}