{"id":48823,"date":"2020-04-27T03:01:48","date_gmt":"2020-04-26T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48823"},"modified":"2020-04-27T06:59:17","modified_gmt":"2020-04-26T20:59:17","slug":"fixed-questions-flexible-answers-linear-gradient-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixed-questions-flexible-answers-linear-gradient-quiz-tutorial\/","title":{"rendered":"Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_quiz_building.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fb_quiz_predictors.jpg\" title=\"Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Fixed Questions Flexible Answers Quiz Tutorial' href='#fqfaqt'>Fixed Questions Flexible Answers Quiz Tutorial<\/a> proposed a world where scrolling to content is acceptable, but the fact is there are large parts of the design wooooorrrrlllld that thinks you should never get to have to scroll.  We&#8217;re not in that woooooooorrrrlllld personally speaking, like, but recognize that it is not the best situation to be in, so if there is scrolling involved to data that is mission critical to your web application&#8217;s workings we&#8217;d recommend trying to help the user out with hints about how the web application works via &#8230;<\/p>\n<ul>\n<li>text explanations (best in &#8220;fixed&#8221; areas) &#8230; but don&#8217;t forget the non-fixed parts, in the sense of &#8230;<\/li>\n<li>visual cues in non-&#8220;fixed&#8221; areas could be like &#8220;runway&#8221; lights, like the simple Javascript DOM linear-gradient logic we apply to the &#8220;Answer&#8221; cells as per (within the pretty self-explanatorily named &#8220;function pickquestion&#8221;) &#8230;<br \/>\n<code><br \/>\n    \/\/ Come in here with array \"thethree\" containing three indexes to \"Answer\" (table) cell numbers containing the 3 multiple choice answers<br \/>\n    \/\/ Come in here with \"cursuff\" being the number of \"Answer\" (table) cells<br \/>\n    thethree.sort(function(a, b){return a-b});<br \/>\n    kjh=42;<br \/>\n    for (jkh=eval(-1 + thethree[0]); jkh&gt;=1; jkh--) {<br \/>\n     if (kjh &lt; 100) {<br \/>\n     document.getElementById('tdanswerslot' + jkh).style.background='linear-gradient(to right, pink, ' + kjh + '%, yellow)';<br \/>\n     }<br \/>\n     kjh+=2;<br \/>\n    }<br \/>\n    console.log('fRom ' + eval(-1 + thethree[0]) + ' to 1');<br \/>\n    document.getElementById('tdanswerslot' + thethree[0]).style.background='linear-gradient(to right, pink, 40%, yellow)';<br \/>\n<br \/>\n    kjh=42;<br \/>\n    \/\/alert(Math.floor(eval(thethree[0] + thethree[1]) \/ 2) + ' should be bigger than ' + eval(1 + thethree[0]));<br \/>\n    for (jkh=eval(1 + thethree[0]); jkh&lt;=Math.floor(eval(thethree[0] + thethree[1]) \/ 2); jkh++) {<br \/>\n     if (kjh &lt; 100) {<br \/>\n     document.getElementById('tdanswerslot' + jkh).style.background='linear-gradient(to right, pink, ' + kjh + '%, yellow)';<br \/>\n     }<br \/>\n     kjh+=2;<br \/>\n    }<br \/>\n    console.log('FRom ' + eval(1 + thethree[0]) + ' to ' + Math.floor(eval(thethree[0] + thethree[1]) \/ 2));<br \/>\n<br \/>\n    kjh=42;<br \/>\n    for (jkh=eval(-1 + thethree[1]); jkh&gt;=Math.floor(eval(thethree[0] + thethree[1]) \/ 2); jkh--) {<br \/>\n     if (kjh &lt; 100) {<br \/>\n     document.getElementById('tdanswerslot' + jkh).style.background='linear-gradient(to right, pink, ' + kjh + '%, yellow)';<br \/>\n     }<br \/>\n     kjh+=2;<br \/>\n    }<br \/>\n    console.log('frOm ' + eval(-1 + thethree[1]) + ' to ' + Math.floor(eval(thethree[0] + thethree[1]) \/ 2));<br \/>\n<br \/>\n    document.getElementById('tdanswerslot' + thethree[1]).style.background='linear-gradient(to right, pink, 40%, yellow)';<br \/>\n<br \/>\n    kjh=42;<br \/>\n    \/\/alert(Math.floor(eval(thethree[1] + thethree[2]) \/ 2) + ' should be bigger than ' + eval(1 + thethree[1]));<br \/>\n    for (jkh=eval(1 + thethree[1]); jkh&lt;=Math.floor(eval(thethree[1] + thethree[2]) \/ 2); jkh++) {<br \/>\n     if (kjh &lt; 100) {<br \/>\n     document.getElementById('tdanswerslot' + jkh).style.background='linear-gradient(to right, pink, ' + kjh + '%, yellow)';<br \/>\n     }<br \/>\n     kjh+=2;<br \/>\n    }<br \/>\n    console.log('FrOm ' + eval(1 + thethree[1]) + ' to ' + Math.floor(eval(thethree[1] + thethree[2]) \/ 2));<br \/>\n<br \/>\n    kjh=42;<br \/>\n    for (jkh=eval(-1 + thethree[2]); jkh&gt;=Math.floor(eval(thethree[1] + thethree[2]) \/ 2); jkh--) {<br \/>\n     if (kjh &lt; 100) {<br \/>\n     document.getElementById('tdanswerslot' + jkh).style.background='linear-gradient(to right, pink, ' + kjh + '%, yellow)';<br \/>\n     }<br \/>\n     kjh+=2;<br \/>\n    }<br \/>\n    console.log('froM ' + eval(-1 + thethree[2]) + ' to ' + Math.floor(eval(thethree[1] + thethree[2]) \/ 2));<br \/>\n<br \/>\n    document.getElementById('tdanswerslot' + thethree[2]).style.background='linear-gradient(to right, pink, 40%, yellow)';<br \/>\n    kjh=42;<br \/>\n    for (jkh=eval(1 + thethree[2]); jkh&lt;cursuff; jkh++) {<br \/>\n     if (kjh &lt; 100) {<br \/>\n     document.getElementById('tdanswerslot' + jkh).style.background='linear-gradient(to right, pink, ' + kjh + '%, yellow)';<br \/>\n     }<br \/>\n     kjh+=2;<br \/>\n    }<br \/>\n    console.log('FroM ' + eval(1 + thethree[2]) + ' to ' + cursuff);<br \/>\n<\/code><br \/>\n &#8230; today, we hope encouraging (as a &#8220;runway&#8221; does) the direction to head in, for the user encountering mission critical data below the fold (or above the fold)<\/li>\n<\/ul>\n<p>And what about new functionality whereby static text (ie. implied blank before the word &#8220;Answer&#8221;) can become an HTML select (dropdown) element &#8230;<br \/>\n<code><br \/>\n&lt;select style='background-color:pink;' id=smode onchange=moving(this.value);&gt;&lt;option value=\"-800\"&gt;&lt;\/option&gt;&lt;option value=\"100\"&gt;Really Fast Moving&lt;\/option&gt;&lt;option value=\"200\"&gt;Fast Moving&lt;\/option&gt;&lt;option value=\"400\"&gt;Moving&lt;\/option&gt;&lt;option value=\"800\"&gt;Slow Moving&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><br \/>\n &#8230; that allows the user to gain extra score and allow a Slow through to Very Fast automated scrolling algorithm &#8220;wizz&#8221; the &#8220;Answer&#8221; cells past them, relying on their fast reactions to answer (though the user can still apply their own deliberate scrolling actions should they like &#8230; and for that we thank the &#8220;murk&#8221; clearers of <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/871399\/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window'>this useful link<\/a> for &#8230;<br \/>\n<code><br \/>\nfunction getScrollTop() {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/871399\/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window<br \/>\n    if(typeof pageYOffset!= 'undefined'){<br \/>\n        \/\/most browsers except IE before #9<br \/>\n        return pageYOffset;<br \/>\n    }<br \/>\n    else{<br \/>\n        var B= document.body; \/\/IE 'quirks'<br \/>\n        var D= document.documentElement; \/\/IE with doctype<br \/>\n        D= (D.clientHeight)? D: B;<br \/>\n        return D.scrollTop;<br \/>\n    }<br \/>\n}<br \/>\n<\/code><br \/>\n)?   Well, the dropdown was initially placed by us where it is apt, in the non-&#8220;fixed&#8221; &#8220;Answers&#8221; section, but readily admit that &#8220;whac-a-mole&#8221; scenarios can arise, and so we give opportunities for the user to change this setting in a new &#8220;fixed&#8221; wrong answer display overlaying the &#8220;Answers&#8221; section, as per &#8230;<\/p>\n<ul>\n<li>the static HTML <font color=blue>initialization<\/font> &#8230;<br \/>\n<code><br \/>\n<font color=blue>&lt;div id=divscore style='z-index:467;position:fixed;left:30px;top:200px;background-color:yellow;'&gt;&lt;\/div&gt;<\/font><br \/>\n&lt;\/body&gt;<br \/>\n<\/code><br \/>\n &#8230; and &#8230;\n<\/li>\n<li>added <font color=purple>codeline<\/font> to maintain within the <i>User assessment Javascript &#8220;checkpos&#8221; function<\/i> where a wrong answer is detected &#8230;<br \/>\n<code><br \/>\n var movedelay=-800;  \/\/ global var<font size=1>iable<\/font> initialization<br \/>\n<br \/>\n<font color=purple>document.getElementById('divscore').innerHTML=('Bad luck' + answerwas).replace(' answer', ' ' + document.getElementById('smode').outerHTML.replace(' id=', ' data-id=').replace(' value=\"' + movedelay + '\"', ' value=\"' + movedelay + '\" selected') + ' Answer');<\/font><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>So, again, if you want to try out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_quiz_building.html-GETME\" title=\"fixed_quiz_building.html\">the changed<\/a> HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_quiz_building.html-GETME\" title=\"fixed_quiz_building.html\">fixed_quiz_building.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_quiz_building.html\" title=\"Click picture\">live run<\/a> link, feel free.<\/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\/fixed-questions-flexible-answers-linear-gradient-quiz-tutorial\/'>Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fqfaqt'>Previous relevant <a target=_blank title='Fixed Questions Flexible Answers Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/fixed-questions-flexible-answers-quiz-tutorial\/'>Fixed Questions Flexible Answers Quiz 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\/fixed_quiz_building.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fixed Questions Flexible Answers Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fb_quiz.jpg\" title=\"Fixed Questions Flexible Answers Quiz Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Fixed Questions Flexible Answers Quiz Tutorial<\/p><\/div>\n<p>Were you around for the recent <a title='HTML and Javascript and CSS Survey Levelling Tutorial' href='#htmljcssslt'>HTML and Javascript and CSS Survey Levelling Tutorial<\/a> game relying on &#8220;position:fixed;&#8221; <a target=_blank title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlaying&#8221;<\/a> ideas?  Those same ideas pop up in today&#8217;s &#8220;Fixed Building Quiz&#8221; web application as with some of the recent <a target=_blank title='Daylight Saving Time Iframe Sandbox Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/daylight-saving-time-iframe-sandbox-tutorial\/'>Daylight Saving Time Iframe Sandbox Tutorial<\/a>&#8216;s informational elements we wanted placed in the user&#8217;s line of sight.<\/p>\n<p>Yes, CSS <a target=_blank title='CSS styling position property information from w3schools' href='https:\/\/www.w3schools.com\/css\/css_positioning.asp'>&#8220;position: fixed;&#8221;<\/a> styling represents those webpage features you want to rely on, perhaps next to some other <i>non CSS &#8220;position: fixed;&#8221; styling<\/i> elements that have a scrolling aspect to them below and above the fold perhaps.  So it is the case with today&#8217;s &#8220;Fixed Questions Flexible Answers Quiz&#8221; or &#8220;Fixed Building Quiz&#8221;.  We arrange a right hand side &#8220;fixed&#8221; area (with a brick background thanks to <a target=_blank title='Freestock Textures' href='\/\/freestocktextures.com\/texture\/brick-wall-renovated,760.html'>Freestock Textures<\/a> regarding the background imagery downloaded (then uploaded) that represents today&#8217;s quiz &#8220;Questions&#8221;.  On the left scrollable and randomly ordered are a choice of 3 multiple choice &#8220;Answers&#8221; as cells within a table row within a table within an HTML div that can be scrolled while that right hand side remains &#8220;fixed&#8221;.  To score, the user sidles the left hand answer over to line up with the right hand side question, and click a button to be assessed.<\/p>\n<p>Enter the murky world of the platform differences handling the &#8220;scrolling&#8221; of windows versus documents versus elements.  Ugh!  That is, until, while using Safari&#8217;s excellent Web Inspector and using its Console tab to examine the (User assessment Javascript function) code <font color=red>(we saved ourselves heaps of worry via the stumbled upon)<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction checkpos() {<br \/>\n  <font color=purple>var qrect=document.getElementById('questionis').getBoundingClientRect();<\/font><br \/>\n  var vsminyis=0, vsmaxyis=0;<br \/>\n  var delayis=2000;<br \/>\n  var minyis=qrect.y;<br \/>\n  var maxyis=minyis;<br \/>\n  maxyis+=qrect.height;<br \/>\n  var ijk, vsrect=null, answerwas='';<br \/>\n  xgoes++<br \/>\n  for (ijk=1; ijk&lt;=cursuff; ijk++) {<br \/>\n    if (document.getElementById('tdanswerslot' + ijk)) {<br \/>\n      if (document.getElementById('tdanswerslot' + ijk).innerHTML != '') {<br \/>\n       if (document.getElementById('tdanswerslot' + ijk).innerHTML.trim() == document.getElementById('tdanswerslot' + ijk).innerHTML) {<br \/>\n         <font color=purple>vsrect=document.getElementById('tdanswerslot' + ijk).getBoundingClientRect();<\/font><br \/>\n         vsminyis=vsrect.y;<br \/>\n         vsmaxyis=vsminyis;<br \/>\n         vsmaxyis+=vsrect.height;<br \/>\n         <font color=blue>if ((vsminyis &gt;= minyis && vsminyis &lt;= maxyis) || (vsmaxyis &gt;= minyis && vsmaxyis &lt;= maxyis)) {<br \/>\n           score++;<br \/>\n         } else if ((minyis &gt;= vsminyis && minyis &lt;= vsmaxyis) || (maxyis &gt;= vsminyis && maxyis &lt;= vsmaxyis)) {<br \/>\n           score++;<br \/>\n         }<\/font> else {<br \/>\n           answerwas=' ... correct answer is ' + document.getElementById('tdanswerslot' + ijk).innerHTML.trim();<br \/>\n           delayis=7000;<br \/>\n         }<br \/>\n         <font color=red>console.log(vsrect);<br \/>\n         console.log(qrect);<\/font><br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById('xgoes').innerHTML='Score: ' + score + '\/' + xgoes + answerwas;<br \/>\n  document.getElementById('zscore').innerHTML='Score: ' + score + '\/' + xgoes + answerwas;<br \/>\n  \/\/document.getElementById('tableanswer').scrollTop = 0;<br \/>\n  \/\/document.getElementById('divanswer').scrollBy(0,60);<br \/>\n  \/\/document.getElementById('divanswer').innerHTML=diva;<br \/>\n  setTimeout(pickquestion, delayis);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; pointing us to the fact that our limited <i>left and top and width and height<\/i> excitement over the wonders of [element].<font color=purple><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>() was enhanced about a week back by the discovery of <i>right and bottom<\/i> and the joy of the discovery of <i>x and y<\/i> today with this chance encounter (and lesson to read the documentation more thoroughly on first readings).  Because the combination of use of <i>y and height<\/i> in code above saves the complication of trying to work the event timing of working out [element].scrollTop (and &#8220;murky such like&#8221;) complication, detecting when the correct left hand cell was sidled up somewhere within the right hand question &#8220;cell&#8221; as per the scoring rules of the quiz.<\/p>\n<p>Otherwise, quite a simple game and concept, the quiz question data being derived from the blog posting thread <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-multiple-choice-quiz-reveal-tutorial\/' title='HTML\/Javascript Multiple Choice Quiz Reveal Tutorial'>HTML\/Javascript Multiple Choice Quiz Reveal Tutorial<\/a>&#8216;s web application (in turn, modelled on questions of <a target=_blank title='Eggheads BBC2 quiz landing page ... thanks for ideas' style='text-decoration:none;' href='http:\/\/www.bbc.co.uk\/programmes\/b006z736'>Eggheads<\/a>).<\/p>\n<p>So, if you want to try out the HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_quiz_building.html_GETME\" title=\"fixed_quiz_building.html\">fixed_quiz_building.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_quiz_building.html\" title=\"Click picture\">live run<\/a> link, feel free.<\/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\/fixed-questions-flexible-answers-quiz-tutorial\/'>Fixed Questions Flexible Answers Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmljcssslt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Levelling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-levelling-tutorial\/'>HTML and Javascript and CSS Survey Levelling 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\/parallax_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Levelling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.jpg\" title=\"HTML and Javascript and CSS Survey Levelling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Levelling Tutorial<\/p><\/div>\n<p>With the &#8220;terrestrial&#8221; side to Land Surveying (ie. that of the small distances kind), two &#8220;get out there and do it&#8221; skills spring to mind, those being &#8230;<\/p>\n<ul>\n<li>performing a <i>traverse<\/i> via the use of a <i>theodolite<\/i> (or &#8220;total station&#8221;) (as the web application works the mathematics of, off the field book, with the previous <a title='HTML and Javascript and CSS Survey Traverse Tutorial' href='#htmljcssstt'>HTML and Javascript and CSS Survey Traverse Tutorial<\/a>) working out the (&#8220;X&#8221;,&#8221;Y&#8221;) of 2D &#8220;life&#8221; &#8230; and today, we add to that with &#8230;<\/li>\n<li>performing a <i>levelling run<\/i> via the use of a <i>level<\/i> (or &#8220;total station&#8221;) &#8230;<\/li>\n<\/ul>\n<p> &#8230; and with today&#8217;s web application we simulate, to some degree, minus &#8220;how to level a level&#8221;, looking through the &#8220;level&#8221; viewer towards a &#8220;surveying staff&#8221; (held level and straight) on a point of something you want to know the elevation (or (3D &#8220;life&#8221;) &#8220;Z&#8221;) of in terrestrial terms, relative to known elevations you will probably want to start pointing at (the &#8220;surveying staff&#8221; being on) with your first (often a known &#8220;datum&#8221;) &#8230;<\/p>\n<ul>\n<li>Backsight &#8230; then &#8230;<\/li>\n<li>(however many Inter Sights followed by a) Foresight (and then back to Backsight, as necessary)<\/li>\n<\/ul>\n<p> &#8230; series of measurements (or &#8220;reading&#8221;) to derive &#8220;reduced levels&#8221; for each point the &#8220;surveying staff&#8221; visits.  This, in most practice, involves alternately leapfrogging (each other, at different times) &#8230;<\/p>\n<ul>\n<li>Land Surveyor recording and levelling the &#8220;level&#8221; &#8230; and a &#8230;<\/li>\n<li>Chainperson levelling and straightening the &#8220;surveying staff&#8221;<\/li>\n<\/ul>\n<p> &#8230; the &#8220;surveying staff&#8221; we simulate in our web application (somewhat) thanks to <a target=_blank title='Laser Survey Equipment' href='\/\/www.lasersurveyingequipment.com.au\/'>Cody<\/a>.<\/p>\n<p>That&#8217;s the &#8220;what&#8221; of the web application, but what about the &#8220;how&#8221; (let alone the <a target=_blank title=\"?\" href='https:\/\/www.youtube.com\/watch?v=RatKhtboq2E'>who<\/a>)?  Here, we thank the great <a target=_blank title='Parallax information from W3schools, thanks' href='\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_parallax'>W3schools parallax ideas<\/a>.<\/p>\n<p>The &#8220;central CSS smart&#8221; of these parallax ideas is the idea of &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  \/* Create the parallax scrolling effect *\/<br \/>\n  background-attachment: fixed;<br \/>\n  background-position: center;<br \/>\n  background-repeat: no-repeat;<br \/>\n  background-size: contain;<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>So take a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.html_GETME\" title=\"parallax_example.html\">parallax_example.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.html\" title=\"Click picture\">live run<\/a> link to see what we mean.<\/p>\n<hr>\n<p id='htmljcssstt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/'>HTML and Javascript and CSS Survey Traverse 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Tutorial<\/p><\/div>\n<p>Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts.   The tutorial subject matter is a webpage to perform Survey Traverse calculations.   A Survey Traverse is:<\/p>\n<blockquote><p>Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:<\/p>\n<p>    Less reconnaissance and organization needed;<br \/>\n    While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;<br \/>\n    Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;<br \/>\n    Traverse networks are free of the strength of figure considerations that happen in triangular systems;<br \/>\n    Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.<\/p>\n<p>The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/'>HTML<\/a> in action in a tutorial &#8230;<\/p>\n<p>Link to HTML &#8220;spiritual home&#8221; &#8230; <a target=_blank title='W3Schools' href='http:\/\/www.w3schools.com\/html\/'>at W3Schools<\/a> has many tutorials.<br \/>\nLink to Survey Traverse live run &#8230; <a target=_blank title='Survey Traverse live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html'>here<\/a>.<br \/>\nLink to Survey Traverse live run (additional Google Line Chart functionality)  <a target=_blank title='Survey Traverse live run with Google Line Chart' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php'>here<\/a>.<br \/>\nLink to Survey Traverse information &#8230; <a target=_blank title='Survey Traverse information' href='http:\/\/en.wikipedia.org\/wiki\/Traverse_(surveying)'>from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to some downloadable HTML code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html_GETME' title='Download me'>SurveyTraverse.html<\/a> which packages up a lot of Javascript and a little bit of CSS &#8230; or JaCvasScriptS &#8230; not sure whether this would ever catch on.<br \/>\nLink to some downloadable PHP programming code (additional Google Line Chart functionality) &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php_GETME' title='Download me'>SurveyTraverse.php<\/a>\n<\/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='#d1271' onclick='var dv=document.getElementById(\"d1271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1271' 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='#d46062' onclick='var dv=document.getElementById(\"d46062\"); 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='d46062' 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='#d48809' onclick='var dv=document.getElementById(\"d48809\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/getBoundingClientRect\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48809' 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='#d48823' onclick='var dv=document.getElementById(\"d48823\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48823' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Fixed Questions Flexible Answers Quiz Tutorial proposed a world where scrolling to content is acceptable, but the fact is there are large parts of the design wooooorrrrlllld that thinks you should never get to have to scroll. We&#8217;re not &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixed-questions-flexible-answers-linear-gradient-quiz-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,3287,281,367,2208,576,652,2020,894,997,1917,1107,1866,1319,2099,1418],"class_list":["post-48823","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-above-the-fold","tag-below-the-fold","tag-css","tag-dropdown","tag-getboundingclientrect","tag-html","tag-javascript","tag-linear-gradient","tag-overlay","tag-programming","tag-scroll","tag-scrolling","tag-select","tag-tutorial","tag-web-inspector","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48823"}],"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=48823"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48823\/revisions"}],"predecessor-version":[{"id":48829,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48823\/revisions\/48829"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}