{"id":48248,"date":"2020-03-14T03:01:36","date_gmt":"2020-03-13T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48248"},"modified":"2020-03-12T21:11:22","modified_gmt":"2020-03-12T11:11:22","slug":"javascript-rectangle-analyze-follow-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-follow-up-tutorial\/","title":{"rendered":"Javascript Rectangle Analyze Follow Up Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rectangle Analyze Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze_more.jpg\" title=\"Javascript Rectangle Analyze Follow Up Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Rectangle Analyze Follow Up Tutorial<\/p><\/div>\n<p>As improvements to yesterday&#8217;s <a title='Javascript Rectangle Analyze Primer Tutorial' href='#jrapt'>Javascript Rectangle Analyze Primer Tutorial<\/a> we thought &#8230;<\/p>\n<ul>\n<li>allow the user to change the number of colours from its default 11 &#8230; and we thank <a target=_blank title='Useful link, thanks' href='https:\/\/htmlcolorcodes.com\/color-names\/'>Color Names \u2014 HTML Color Codes<\/a> to allow us to get to around 140 HTML colour names &#8230;<br \/>\n<code><br \/>\n        \/\/ Thanks to https:\/\/htmlcolorcodes.com\/color-names\/ below<br \/>\n        var allcols=['lime','black','blue','purple','navy','teal','fuchsia','olive','maroon','gray','green',<br \/>\n'IndianRed','LightCoral','Salmon','DarkSalmon','LightSalmon','Crimson','Red','FireBrick','DarkRed',<br \/>\n'Pink','LightPink','HotPink','DeepPink','MediumVioletRed','PaleVioletRed','Coral',<br \/>\n'Tomato','OrangeRed','DarkOrange','Orange','Gold','Yellow','LightYellow',<br \/>\n'LemonChiffon','LightGoldenrodYellow','PapayaWhip','Moccasin','PeachPuff',<br \/>\n'PaleGoldenrod','Khaki','DarkKhaki','Lavender','Thistle',<br \/>\n'Plum','Violet','Orchid','Fuchsia','Magenta',<br \/>\n'MediumOrchid','MediumPurple','RebeccaPurple',<br \/>\n'BlueViolet','DarkViolet','DarkOrchid','DarkMagenta',<br \/>\n'Indigo','SlateBlue','DarkSlateBlue','MediumSlateBlue',<br \/>\n'GreenYellow','Chartreuse','LawnGreen','LimeGreen',<br \/>\n'PaleGreen','LightGreen','MediumSpringGreen','SpringGreen',<br \/>\n'MediumSeaGreen','SeaGreen','ForestGreen','DarkGreen',<br \/>\n'YellowGreen','OliveDrab','DarkOliveGreen','MediumAquamarine','DarkSeaGreen',<br \/>\n'LightSeaGreen','DarkCyan','Aqua','Cyan','LightCyan','PaleTurquoise',<br \/>\n'Aquamarine','Turquoise','MediumTurquoise','DarkTurquoise',<br \/>\n'CadetBlue','SteelBlue','LightSteelBlue','PowderBlue',<br \/>\n'LightBlue','SkyBlue','LightSkyBlue','DeepSkyBlue','DodgerBlue','CornflowerBlue',<br \/>\n'MediumSlateBlue','RoyalBlue','MediumBlue','DarkBlue','Navy',<br \/>\n'MidnightBlue','Cornsilk','BlanchedAlmond','Bisque','NavajoWhite','Wheat',<br \/>\n'BurlyWood','Tan','RosyBrown','SandyBrown','Goldenrod',<br \/>\n'DarkGoldenrod','Peru','Chocolate','SaddleBrown','Sienna','Brown','Snow',<br \/>\n'HoneyDew','MintCream','Azure','AliceBlue','GhostWhite','WhiteSmoke','SeaShell',<br \/>\n'Beige','OldLace','FloralWhite','Ivory','AntiqueWhite','Linen',<br \/>\n'LavenderBlush','MistyRose','Gainsboro','LightGray','Silver','DarkGray','DimGray',<br \/>\n'LightSlateGray','SlateGray','DarkSlateGray'];<br \/>\n<\/code><br \/>\n &#8230; for use here &#8230; <font color=blue>checking for prompt window driven user (?numcols=) argument control<\/font> response &#8230;<br \/>\n <code><br \/>\n        var bks='&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;';<br \/>\n        <font color=blue>var argnumcols=location.search.split('numcols=')[1] ? decodeURIComponent(location.search.split('numcols=')[1].split('&')[0]) : '11';<\/font><br \/>\n        var cols=['lime','black','blue','purple','navy','teal','fuchsia','olive','maroon','gray','green'];<br \/>\n        var xs=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ys=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ls=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ts=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var ws=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var hs=[0,0,0,0,0,0,0,0,0,0,0];<br \/>\n        var pw=[null,null,null,null,null,null,null,null,null,null,null];<br \/>\n        var ps=[null,null,null,null,null,null,null,null,null,null,null];<br \/>\n        if (eval('' + argnumcols) != 11) {<br \/>\n          if (eval('' + argnumcols) >= 40) { bks='&amp;nbsp;&amp;nbsp;'; }<br \/>\n          cols=[];<br \/>\n          xs=[];<br \/>\n          ys=[];<br \/>\n          ls=[];<br \/>\n          ts=[];<br \/>\n          ws=[];<br \/>\n          hs=[];<br \/>\n          pw=[];<br \/>\n          ps=[];<br \/>\n          for (var ijk=0; ijk&lt;argnumcols; ijk++) {<br \/>\n           cols.push(allcols[ijk]);<br \/>\n           xs.push(0);<br \/>\n           ys.push(0);<br \/>\n           ls.push(0);<br \/>\n           ts.push(0);<br \/>\n           ws.push(0);<br \/>\n           hs.push(0);<br \/>\n           pw.push(null);<br \/>\n           ps.push(null);<br \/>\n          }<br \/>\n        }<br \/>\n <\/code>\n<\/li>\n<li>and if this results in a bit too crowded a scenario we now allow a click on the GIS Report Table to open that report in a new popup window <font color=blue>as per the changed<\/font> &#8230;<br \/>\n<code><br \/>\n        var prehtmltablerteport='&lt;table <font color=blue>onclick=\"woit(this);\" title=\"Show in new window\" <\/font>id=mytable border=1 id=trep style=width:30%;align:right;z-index:67;margin-right:10px;&gt;&lt;tr&gt;&lt;th&gt;Colour&lt;\/th&gt;&lt;th&gt;Intersects?&lt;\/th&gt;&lt;th&gt;Is within?&lt;\/th&gt;&lt;th&gt;Adjacent to?&lt;\/th&gt;&lt;th&gt;Separate to?&lt;input id=iootw type=text style=position:absolute;top:-200px;left:-200px; value=\"\"&gt;&lt;\/input&gt;&lt;\/th&gt;&lt;\/tr&gt;&lt;\/table&gt;';<br \/>\n<\/code><br \/>\n &#8230; calling on the new Javascript function &#8230;<br \/>\n<code><br \/>\n        var wo=null;<br \/>\n        function woit(tois) {<br \/>\n          if (wo != null) {<br \/>\n            wo.close();<br \/>\n            wo=null;<br \/>\n          }<br \/>\n          wo=window.open('','_blank','top=20,left=20,width=900,height=900');<br \/>\n          wo.document.write('&lt;html&gt;&lt;body&gt;' + tois.outerHTML + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n        }<br \/>\n<\/code>\n<\/ul>\n<p>You can try this with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html---GETME\" title=\"rectangle_analyze.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html---GETME\" title=\"rectangle_analyze.htm\">rectangle_analyze.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.htm\" title=\"Click picture\">live run<\/a> link is there for your perusal should this be of interest.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-follow-up-tutorial\/'>Javascript Rectangle Analyze Follow Up Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jrapt'>Previous relevant <a target=_blank title='Javascript Rectangle Analyze Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-primer-tutorial\/'>Javascript Rectangle Analyze 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\/rectangle_analyze.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rectangle Analyze Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.jpg\" title=\"Javascript Rectangle Analyze Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Rectangle Analyze Primer Tutorial<\/p><\/div>\n<p>We&#8217;re not trying to compare programming to Michelangelo&#8217;s art, but did you know that he chose the marble he wanted at the quarry, presumably imagining what was possible with that marble?<\/p>\n<p>In line with that, do you like &#8220;glass half full&#8221; thinking rather than &#8220;glass half empty&#8221; thinking?   We prefer the &#8220;glass half full&#8221; choice, and use that thinking (and a &#8220;laziness&#8221; &#8220;background noise&#8221;) to see what has come before to shape the workings of a new programming project.<\/p>\n<p>This new project touches on GIS (<a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Geographic_information_system' title='GIS information from Wikipedia'>Geographic Information System<\/a>) ideas, but is a simplified form, so far, regarding unrotated rectangle HTML (div) data set (of 11) to check (amongst them) for &#8230;<\/p>\n<ul>\n<li>does rectangle A <b>intersect with<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>within<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>adjacent to<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>separate to<\/b> rectangle B?<\/li>\n<\/ul>\n<p>How to approach our programming aim above?  Well, we thought we&#8217;d base it on that of <a title='HTML\/Javascript PopUp Mouseover Event Game Tutorial' href='#html\/jpumegt'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a>.  Huh?!  Yes, &#8220;laziness&#8221; thoughts will have a programmer&#8217;s mind fishing for another project that randomly creates those (HTML div) elements, and this was the attraction.  Then you need to start &#8220;Michelangelo&#8221;ing the new web application from the old, and we decided if we could not creep up on a web application that can create a &#8220;tabular report (of any sort) to the right&#8221; within an hour&#8217;s work, then we would classify that as a bad &#8220;glass half full&#8221; approach.  Thankfully, though, it panned out to be a good approach, so read on.<\/p>\n<p>And then there is all that knowledge on the &#8220;net&#8221; helping formulate three Javascript functions to help with the GIS logic thoughts above as per &#8230;<\/p>\n<p><code><br \/>\n        function intersectRect(r1, r2) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection' href='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection'>https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection<\/a><br \/>\n         return !(r2.left &gt; r1.right ||<br \/>\n           r2.right &lt; r1.left ||<br \/>\n           r2.top &gt; r1.bottom ||<br \/>\n           r2.bottom &lt; r1.top);<br \/>\n        }<br \/>\n<br \/> <br \/>\n        function adjacentTo(r1, r2) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection' href='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection'>https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection<\/a><br \/>\n           if (intersectRect(r1, r2)) {<br \/>\n           return (r2.left == r1.right ||<br \/>\n           r2.right == r1.left ||<br \/>\n           r2.top == r1.bottom ||<br \/>\n           r2.bottom == r1.top);<br \/>\n           } else {<br \/>\n           return false;<br \/>\n           }<br \/>\n        }<br \/>\n<br \/> <br \/>\n        function contains(r1, r2) {  \/\/ thanks to <a target=_blankl title='https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c' href='https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c'>https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c<\/a><br \/>\n           if (   (r2.right) &lt; (r1.right)<br \/>\n               && (r2.left) &gt; (r1.left)<br \/>\n               && (r2.top) &gt; (r1.top)<br \/>\n               && (r2.bottom) &lt; (r1.bottom) ) {<br \/>\n             return true;<br \/>\n           } else {<br \/>\n             return false;<br \/>\n           }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>&#8220;data organized&#8221;<\/font> via &#8230;<\/p>\n<p><code><br \/>\n        var cmds=[];<br \/>\n        var rects=[];<br \/>\n<br \/>\n        function MakePopup(event, popupWindow, popupIsShown, colis, lis, tis, wis, his<font color=blue>, indx<\/font>) {<br \/>\n            if (<font color=blue>1 == 56 && <\/font>window.createPopup) {        \/\/Internet Explorer<br \/>\n                if (!popupWindow) {<br \/>\n                    popupWindow = window.createPopup();<br \/>\n                    var popupBody = popupWindow.document.body;<br \/>\n                    popupBody.style.backgroundColor = colis; \/\/\"lightblue\";<br \/>\n                    <font color=blue>cmds.push(\"document.getElementById('col\" + indx + \"').style.backgroundColor='\" + colis + \"'\");<br \/>\n                    if (indx == 0) {  setTimeout(andlater,200);     } <\/font><br \/>\n                    popupBody.style.border = \"solid black 1px\";<br \/>\n                    if (1 == 2) popupBody.innerHTML = \"Click outside to close.\";<br \/>\n                }<br \/>\n                popupWindow.show (lis, tis, wis, his, document.body); \/\/100, 100, 150, 25, document.body);<br \/>\n                pword=\"client\";<br \/>\n            }<br \/>\n            else {<br \/>\n                if (!popupIsShown) {<br \/>\n                    if (!popupWindow) {<br \/>\n                       popupWindow = document.createElement(\"div\");<br \/>\n                        popupWindow.style.backgroundColor = colis; \/\/\"lightblue\";<br \/>\n                    <font color=blue>cmds.push(\"document.getElementById('col\" + indx + \"').style.backgroundColor='\" + colis + \"'\");<br \/>\n                    if (indx == 0) {  setTimeout(andlater,200);     } <\/font><br \/>\n                        popupWindow.style.border = \"solid black 1px\";<br \/>\n                        popupWindow.style.position = \"absolute\";<br \/>\n                        popupWindow.style.width = wis + \"px\";  \/\/150<br \/>\n                        popupWindow.style.height = his + \"px\";  \/\/25<br \/>\n                        popupWindow.style.top = tis + \"px\";  \/\/\"100px\";<br \/>\n                        popupWindow.style.left = lis + \"px\";  \/\/\"100px\";<br \/>\n                        if (1 == 2) popupWindow.innerHTML = \"Click outside to close.\";<br \/>\n                    }<br \/>\n<br \/>\n                    document.body.appendChild(popupWindow);<br \/>\n                    <font color=blue>rects.push(popupWindow.<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>());<\/font><br \/>\n                    if (pword == \"\") window.addEventListener('mouseover', MouseOver, true);<br \/>\n                    popupIsShown = true;<br \/>\n                    \/\/ to avoid that the current click event propagates up<br \/>\n                    if (pword == \"\") event.stopPropagation ();<br \/>\n                }<br \/>\n                pword=\"page\";<br \/>\n            }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; and feeding into the GIS report HTML table updating Javascript &#8230;<\/p>\n<p><code><br \/>\n        function andlater() {<br \/>\n          for (var ji=0; ji&lt;cmds.length; ji++) {<br \/>\n            eval(cmds[ji]);<br \/>\n          }<br \/>\n          for (var kji=0; kji&lt;rects.length; kji++) {<br \/>\n            var seprt=false;<br \/>\n            document.getElementById('intersects' + kji).innerHTML='';<br \/>\n            document.getElementById('within' + kji).innerHTML='';<br \/>\n            document.getElementById('adjacent' + kji).innerHTML='';<br \/>\n            document.getElementById('separate' + kji).innerHTML='';<br \/>\n            for (var mji=0; mji&lt;rects.length; mji++) {<br \/>\n             if (mji != kji) {<br \/>\n              seprt=true;<br \/>\n              if (mji &gt; kji || 1 == 1) {<br \/>\n                if (intersectRect(rects[kji], rects[mji])) {<br \/>\n                  seprt=false;<br \/>\n                  if (document.getElementById('intersects' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                  document.getElementById('intersects' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                  }<br \/>\n                }<br \/>\n                if (adjacentTo(rects[kji], rects[mji])) {<br \/>\n                  seprt=false;<br \/>\n                  if (document.getElementById('adjacent' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                  document.getElementById('adjacent' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                  }<br \/>\n                }<br \/>\n              }<br \/>\n              if (contains(rects[mji], rects[kji])) {<br \/>\n                seprt=false;<br \/>\n                if (document.getElementById('within' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                document.getElementById('within' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                }<br \/>\n              }<br \/>\n              if (seprt) {<br \/>\n                document.getElementById('separate' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n              }<br \/>\n             }<br \/>\n            }<br \/>\n          }<br \/>\n          cmds=[];<br \/>\n          rects=[];<br \/>\n        }<br \/>\n<\/code><\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html--GETME\" title=\"rectangle_analyze.html\">The chiselled<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html--GETME\" title=\"rectangle_analyze.html\">rectangle_analyze.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html\" title=\"Click picture\">live run<\/a> link is there for your perusal should this be of interest.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-popup-mouseover-event-game-tutorial\/'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jpumegt'>Previous relevant <a target=_blank title='HTML\/Javascript PopUp Mouseover Event Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-popup-mouseover-event-game-tutorial\/'>HTML\/Javascript PopUp Mouseover Event 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\/popuptest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript PopUp Mouseover Event Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.jpg\" title=\"HTML\/Javascript PopUp Mouseover Event Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/p><\/div>\n<p>Are you &#8230;<\/p>\n<ul>\n<li>a fan of <a target=_blank title='Tom Cruise avoiding laser beams' href='http:\/\/www.youtube.com\/watch?v=ar0xLps7WSY'>Mission Impossible<\/a><\/li>\n<li>amazed when Rafael Nadal avoids walking on the lines<\/li>\n<li>when accidentally dropping your toast, hoping it lands butter up<\/li>\n<\/ul>\n<p>&#8230;?  If you scored 2 or above &#8230; please read on.  If you scored zero &#8230; well, I&#8217;m speechless!<\/p>\n<p>Today we&#8217;ve written a mouse movement and popup window game for your perusal after the great advice we stumbled upon with this webpage about the <a target=_blank title='Window object createPopup method' href='http:\/\/help.dottoro.com\/ljsxcrhv.php'>createPopup<\/a> Window (object) method &#8230; thanks.<\/p>\n<p>The idea of this game (for laptops) is to &#8230;<\/p>\n<ul>\n<li>not step on any tiles of the obstacle course presented to you once you click the button<\/li>\n<li>keep your mouse moving in an interesting way<\/li>\n<li>move the mouse fast enough to avoid the program claim of passivity &#8230; like in <a target=_blank title='Judo passivity' href='http:\/\/judoadvisor.com\/2011\/07\/pressure-passivity-shido-yuko-and-how-they-work-in-judo-competition\/'>Judo<\/a><\/li>\n<\/ul>\n<p>The workings of the game in HTML and Javascript rely on &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Window object createPopup method' href='http:\/\/help.dottoro.com\/ljsxcrhv.php'>createPopup<\/a> Window object method<\/li>\n<li>the <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/event_onmouseover.asp' title='Mouseover event information from w3schools'>(on)mouseover<\/a> mouse event<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' title='Javascript setInterval information from w3schools'>setInterval<\/a> timer<\/li>\n<li>clearing and rewriting document.body.<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp' title='Javascript DOM innerHTML information from w3schools'>innerHTML<\/a> (rather than reloading webpage with a URL of any sort)<\/li>\n<\/ul>\n<p>So try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html\" title=\"Click picture\">live run<\/a> and\/or examine, download, or use the HTML and Javascript (DOM) source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html_GETME\" title=\"popuptest.html\">popuptest.html<\/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='#d14772' onclick='var dv=document.getElementById(\"d14772\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14772' 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='#d48239' onclick='var dv=document.getElementById(\"d48239\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gis\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48239' 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='#d48248' onclick='var dv=document.getElementById(\"d48248\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/colour\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48248' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As improvements to yesterday&#8217;s Javascript Rectangle Analyze Primer Tutorial we thought &#8230; allow the user to change the number of colours from its default 11 &#8230; and we thank Color Names \u2014 HTML Color Codes to allow us to get &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-follow-up-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":[3253,224,2654,484,2208,3256,3252,748,752,2641,2132,3255,3254],"class_list":["post-48248","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-adjacent","tag-colour","tag-geographic-information-system","tag-geometry","tag-getboundingclientrect","tag-html-colour-name","tag-intersect","tag-mapping","tag-mathematics","tag-michelangelo","tag-rectangle","tag-separate","tag-within"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48248"}],"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=48248"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48248\/revisions"}],"predecessor-version":[{"id":48255,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48248\/revisions\/48255"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}