{"id":48831,"date":"2020-04-28T03:01:55","date_gmt":"2020-04-27T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48831"},"modified":"2024-09-08T16:55:45","modified_gmt":"2024-09-08T06:55:45","slug":"fixed-questions-above-the-fold-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixed-questions-above-the-fold-quiz-tutorial\/","title":{"rendered":"Fixed Questions Above the Fold Quiz Tutorial"},"content":{"rendered":"
\"Fixed<\/a>

Fixed Questions Above the Fold Quiz Tutorial<\/p><\/div>\n

If we count “time” as the 4th dimension … no, <\/font>Nala<\/img><\/span>, not the paw paw paw<\/a> thingy … <\/font> we find it kind of funny that out of …<\/p>\n

    \n
  1. width or x<\/li>\n
  2. height or y<\/li>\n
  3. depth or z<\/li>\n
  4. time<\/li>\n<\/ol>\n

    … those “x and y” (and sometimes “z”) get grouped together so much as to be indistinguishable, and yet, with lots of web application programming, “scrolling in Y” feels a lot different to “scrolling in X” (ask any Tinder<\/a> user). So much so, for us, that when we see web content not disappearing down the bottom, but “quietly” disappearing off to the right, we don’t count it as not all being “above the fold” content. Anyway, that is the reason for today’s quiz project, that being a Numerical Quiz (thanks to What’s Special About This Number?<\/a>) with integer digit answers presented as table cells (again), but this time the scrolling required to make your answer (choices) is via horizontal scrolling.<\/p>\n

    Though quite a few elements in today’s above_the_fold_hscroll_quiz.html<\/a>‘s live run<\/a> link start out with no reference to “position:absolute;” nor “position:fixed;” we, at the document.body “onload” event logic, make a lot of (the default relative) non-position-defined elements become “position:fixed;” as per …<\/p>\n


    \nfunction thisonl() {
    \n divoptt=document.getElementById('divoptt').innerHTML;
    \n divoptb=document.getElementById('divoptb').innerHTML;
    \n var rectisa=document.getElementById('mya').getBoundingClientRect();
    \n document.getElementById('overlayband').innerHTML='<div style=\"position:fixed;opacity:0.2;z-index:-5;top:150px;left:' + rectisa.left + 'px;width:' + rectisa.width + 'px;height:100vh;background-color:orange;\"><\/div>';
    \n rectisa=document.getElementById('xgoes').getBoundingClientRect();
    \n document.getElementById('xgoes').style.left='' + rectisa.left + 'px';
    \n document.getElementById('xgoes').style.top='' + rectisa.top + 'px';
    \n document.getElementById('xgoes').style.position='fixed';
    \n rectisa=document.getElementById('myh2').getBoundingClientRect();
    \n document.getElementById('myh2').style.left='' + rectisa.left + 'px';
    \n document.getElementById('myh2').style.top='' + rectisa.top + 'px';
    \n document.getElementById('myh2').style.position='fixed';
    \n rectisa=document.getElementById('myh1').getBoundingClientRect();
    \n document.getElementById('myh1').style.left='' + rectisa.left + 'px';
    \n document.getElementById('myh1').style.top='' + rectisa.top + 'px';
    \n document.getElementById('myh1').style.position='fixed';
    \n

    \n document.getElementById('mya').click();
    \n}
    \n<\/code><\/p>\n

    … to keep things in front of our eyes except for those horizontal scrollable user-answer-hosting HTML table (nested within HTML div) elements that get that way because they are “position:absolute;” “width:196%;” as per …<\/p>\n


    \n<div id='divoptt'><table id=topt style=\"text-align:center;vertical-align:top;border:20px inset green;position:absolute;top:380px;left:0px;width:196%;height:100px;background:linear-gradient(to right, yellow, pink);z-index:234;text-align:left;font-size:24px;\">
    \n<tr><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t0>0<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t1>1<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t2>2<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t3>3<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t4>4<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t5>5<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t6>6<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t7>7<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t8>8<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t9>9<\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><\/tr>
    \n<\/table><\/div>
    \n<div id='divoptb'><table id=bott style=\"text-align:center;vertical-align:top;border:20px inset green;position:absolute;top:530px;left:0px;width:196%;height:100px;background:linear-gradient(to right, yellow, pink);z-index:234;text-align:left;font-size:24px;\">
    \n<tr><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x0>0<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x1>1<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x2>2<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x3>3<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x4>4<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x5>5<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x6>6<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x7>7<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x8>8<\/td><td>        <\/td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x9>9<\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><td>        <\/td><\/tr>
    \n<\/table><\/div>
    \n<\/code><\/p>\n

    … representing the “up to two” digit answers (ie. number in range from 1 to 99) required to score in this quiz.<\/p>\n

    We think “quite a contrast” having this “horizontal scrolling” design as a comparison to yesterday’s “vertical scrolling” of Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial<\/a>, to us “the web application you have scrolling when you don’t have a web application, scrolling”<\/a>.<\/p>\n

    \n

    \n

    Previous relevant Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial<\/a> is shown below.<\/p>\n

    \"Fixed<\/a>

    Fixed Questions Flexible Answers Linear Gradient Quiz Tutorial<\/p><\/div>\n

    Yesterday’s 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’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’s workings we’d recommend trying to help the user out with hints about how the web application works via …<\/p>\n