{"id":48809,"date":"2020-04-26T03:01:03","date_gmt":"2020-04-25T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48809"},"modified":"2020-04-26T11:05:51","modified_gmt":"2020-04-26T01:05:51","slug":"fixed-questions-flexible-answers-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixed-questions-flexible-answers-quiz-tutorial\/","title":{"rendered":"Fixed Questions Flexible Answers Quiz Tutorial"},"content":{"rendered":"
\"Fixed<\/a>

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

Were you around for the recent HTML and Javascript and CSS Survey Levelling Tutorial<\/a> game relying on “position:fixed;” “overlaying”<\/a> ideas? Those same ideas pop up in today’s “Fixed Building Quiz” web application as with some of the recent Daylight Saving Time Iframe Sandbox Tutorial<\/a>‘s informational elements we wanted placed in the user’s line of sight.<\/p>\n

Yes, CSS “position: fixed;”<\/a> styling represents those webpage features you want to rely on, perhaps next to some other non CSS “position: fixed;” styling<\/i> elements that have a scrolling aspect to them below and above the fold perhaps. So it is the case with today’s “Fixed Questions Flexible Answers Quiz” or “Fixed Building Quiz”. We arrange a right hand side “fixed” area (with a brick background thanks to Freestock Textures<\/a> regarding the background imagery downloaded (then uploaded) that represents today’s quiz “Questions”. On the left scrollable and randomly ordered are a choice of 3 multiple choice “Answers” as cells within a table row within a table within an HTML div that can be scrolled while that right hand side remains “fixed”. 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

Enter the murky world of the platform differences handling the “scrolling” of windows versus documents versus elements. Ugh! That is, until, while using Safari’s excellent Web Inspector and using its Console tab to examine the (User assessment Javascript function) code (we saved ourselves heaps of worry via the stumbled upon)<\/font> …<\/p>\n


\nfunction checkpos() {
\n var qrect=document.getElementById('questionis').getBoundingClientRect();<\/font>
\n var vsminyis=0, vsmaxyis=0;
\n var delayis=2000;
\n var minyis=qrect.y;
\n var maxyis=minyis;
\n maxyis+=qrect.height;
\n var ijk, vsrect=null, answerwas='';
\n xgoes++
\n for (ijk=1; ijk<=cursuff; ijk++) {
\n if (document.getElementById('tdanswerslot' + ijk)) {
\n if (document.getElementById('tdanswerslot' + ijk).innerHTML != '') {
\n if (document.getElementById('tdanswerslot' + ijk).innerHTML.trim() == document.getElementById('tdanswerslot' + ijk).innerHTML) {
\n vsrect=document.getElementById('tdanswerslot' + ijk).getBoundingClientRect();<\/font>
\n vsminyis=vsrect.y;
\n vsmaxyis=vsminyis;
\n vsmaxyis+=vsrect.height;
\n if ((vsminyis >= minyis && vsminyis <= maxyis) || (vsmaxyis >= minyis && vsmaxyis <= maxyis)) {
\n score++;
\n } else if ((minyis >= vsminyis && minyis <= vsmaxyis) || (maxyis >= vsminyis && maxyis <= vsmaxyis)) {
\n score++;
\n }<\/font> else {
\n answerwas=' ... correct answer is ' + document.getElementById('tdanswerslot' + ijk).innerHTML.trim();
\n delayis=7000;
\n }
\n console.log(vsrect);
\n console.log(qrect);<\/font>
\n }
\n }
\n }
\n }
\n document.getElementById('xgoes').innerHTML='Score: ' + score + '\/' + xgoes + answerwas;
\n document.getElementById('zscore').innerHTML='Score: ' + score + '\/' + xgoes + answerwas;
\n \/\/document.getElementById('tableanswer').scrollTop = 0;
\n \/\/document.getElementById('divanswer').scrollBy(0,60);
\n \/\/document.getElementById('divanswer').innerHTML=diva;
\n setTimeout(pickquestion, delayis);
\n}
\n<\/code><\/p>\n

… pointing us to the fact that our limited left and top and width and height<\/i> excitement over the wonders of [element].getBoundingClientRect<\/a><\/font>() was enhanced about a week back by the discovery of right and bottom<\/i> and the joy of the discovery of 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 y and height<\/i> in code above saves the complication of trying to work the event timing of working out [element].scrollTop (and “murky such like”) complication, detecting when the correct left hand cell was sidled up somewhere within the right hand question “cell” as per the scoring rules of the quiz.<\/p>\n

Otherwise, quite a simple game and concept, the quiz question data being derived from the blog posting thread HTML\/Javascript Multiple Choice Quiz Reveal Tutorial<\/a>‘s web application (in turn, modelled on questions of Eggheads<\/a>).<\/p>\n

So, if you want to try out the HTML\/Javascript\/CSS fixed_quiz_building.html<\/a>‘s live run<\/a> link, feel free.<\/p>\n

\n

\n

Previous relevant HTML and Javascript and CSS Survey Levelling Tutorial<\/a> is shown below.<\/p>\n

\"HTML<\/a>

HTML and Javascript and CSS Survey Levelling Tutorial<\/p><\/div>\n

With the “terrestrial” side to Land Surveying (ie. that of the small distances kind), two “get out there and do it” skills spring to mind, those being …<\/p>\n