{"id":63858,"date":"2024-06-11T03:01:43","date_gmt":"2024-06-10T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63858"},"modified":"2024-06-09T14:30:11","modified_gmt":"2024-06-09T04:30:11","slug":"australian-geographical-quiz-scrolling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-geographical-quiz-scrolling-tutorial\/","title":{"rendered":"Australian Geographical Quiz Scrolling Tutorial"},"content":{"rendered":"
\"Australian<\/a>

Australian Geographical Quiz Scrolling Tutorial<\/p><\/div>\n

We were a little gobsmacked revisiting the 2017 era Australian Geographical Quiz Context Tutorial<\/a> quiz web application (and thanks to Australian Geographic<\/a> website here) that looking through the code … arrrgggghhh … the string …<\/p>\n

\n.scroll\n<\/p><\/blockquote>\n

… was missing. Why should it be there? Well, on a re-run through of how the Australian Geographical Quiz<\/a> web application worked, we were asked to click on …<\/p>\n

\nWilsons Promontory\n<\/p><\/blockquote>\n

… which did not send us into a tizzy by itself. Oh no! We never panic?! Even without the apostrophe in Wilsons we handled that … no worries … we realize that could have been because two (or more) guys or gals or both called Wilson were standing together at just the right time and place (or sent there by Karen<\/a>) when a “promontory” needed naming … no problems. No, what caused our “too fragile” web application diffs was the way we had to scroll down to that esteemed Victorian coastal location<\/a> in our (temporarily, mind you)<\/font> less esteemious web application. We got funny places mentioned as our nearest “place of click”, and it was then the “true horror” happened (ie. with our code scouring reveal) … no “false horror” around here … no … it was “true” all right … we’re here to tell you! Any obs!<\/strike> Okay?!<\/p>\n

\nThe fix, you ask?!\n<\/p><\/blockquote>\n

Glad you asked! Take a look<\/font> at (where we also catered for mobile platforms<\/font> better too) …<\/p>\n


\nfunction icheck(evt) {
\n if (realclick) {
\n var x,y;
\n if (evt.touches) {
\n if (evt.touches[0].pageX) {
\n x = (eval(evt.touches[0].pageX + document.body.scrollLeft * 1) * 1);
\n y = (eval(evt.touches[0].pageY + document.body.scrollTop * 1) * 1);
\n } else {
\n x = (eval(evt.touches[0].clientX + document.body.scrollLeft * 1) * 1);
\n y = (eval(evt.touches[0].clientY + document.body.scrollTop * 1) * 1);
\n }
\n } else <\/font>if (evt.clientX || evt.clientY) {
\n x = (eval(<\/font>evt.clientX + document.body.scrollLeft * 1) * 1)<\/font>;
\n y = (eval(<\/font>evt.clientY + document.body.scrollTop * 1) * 1)<\/font>;
\n } else {
\n x = (eval(<\/font>evt.pageX + document.body.scrollLeft * 1) * 1)<\/font>;
\n y = (eval(<\/font>evt.pageY + document.body.scrollTop * 1) * 1)<\/font>;
\n }
\n var distco=((x - midcoords[placepick][0]) * (x - midcoords[placepick][0])) + ((y - midcoords[placepick][1]) * (y - midcoords[placepick][1]));
\n var halfpoint='';
\n
\n var davw=' ... you are very cold ';
\n if (distco <= verywarm) {
\n halfpoint='0.5';
\n davw=\" ... you are very warm (and it's possible there is an overlap, so you score the 0.5 choosing this with OK button) \";
\n } else if (distco <= warm) {
\n davw=' ... you are warm ';
\n } else if (distco <= cool) {
\n davw=' ... you are cool ';
\n } else if (distco <= cold) {
\n davw=' ... you are cold ';
\n }
\n
\n var nearestplace='';
\n var nearestdistco=-1;
\n for (var jwhich=0; jwhich<midcoords.length; jwhich++) {
\n distco=((midcoords[jwhich][0] - x) * (midcoords[jwhich][0] - x)) + ((midcoords[jwhich][1] - y) * (midcoords[jwhich][1] - y));
\n if (jwhich == 0) {
\n nearestplace=places[jwhich].replace(\/_\/g,' ');
\n nearestdistco=distco;
\n } else if (distco < nearestdistco) {
\n nearestplace=places[jwhich].replace(\/_\/g,' ');
\n nearestdistco=distco;
\n }
\n }
\n goes++;
\n if (nearestplace == placechosen.replace(\/_\/g,' ')) {
\n score+=factor;
\n setTimeout(resetit, 200);
\n setTimeout(pickone,1000);
\n } else {
\n var ans=prompt('You clicked nearest to ' + nearestplace + ' (0 for YouTube search, -0 for Australian Geographic search, +0 Both, 0.0 for Context in Map Legend) but we wanted you to identify ' + placechosen.replace(\/_\/g,' ') + ' (1 for YouTube search, -1 for Australian Geographic search, +1 Both, 1.1 for Context in Map Legend)' + davw + ' ... try again ... or ... Choose to Cancel', halfpoint);
\n if (ans == null) {
\n \/\/alert(92);
\n setTimeout(pickone,2000);
\n } else if (ans == '0.0') {
\n if (lgo != null) lgo.close();
\n lgo=window.open(pathto + 'legend_via_map.htm?url=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0]) + '&tarea=&submit=Create+Legend+for+HTML+Map+Data&whereami=where-am-i&whatami=what-am-i&secret=secret#' + nearestplace.replace(\/ \/g,'_'), '_blank');
\n } else if (ans == '1.1') {
\n if (lgo != null) lgo.close();
\n lgo=window.open(pathto + 'legend_via_map.htm?url=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0]) + '&tarea=&submit=Create+Legend+for+HTML+Map+Data&whereami=where-am-i&whatami=what-am-i&secret=secret#' + placechosen.replace(\/ \/g,'_'), '_blank');
\n } else if (ans == '-0') {
\n if (ago != null) ago.close();
\n ago=window.open('http:\/\/www.australiangeographic.com.au\/search\/search?query=' + nearestplace.replace(\/ \/g,'%20').replace(\/_\/g,'%20'),'_blank','top=15,left=15,width=300,height=300');
\n } else if (ans == '-1') {
\n if (ago != null) ago.close();
\n ago=window.open('http:\/\/www.australiangeographic.com.au\/search\/search?query=' + placechosen.replace(\/ \/g,'%20').replace(\/_\/g,'%20'),'_blank','top=15,left=15,width=300,height=300');
\n } else if (ans.replace('+','') == '0') {
\n if (yto == null) {
\n if (document.title.indexOf('Country ') != 0) document.title='Country ' + document.title;
\n document.getElementById('youtube').innerHTML='<a ontouchstart=\" realclick=false; setTimeout(resetit,1000); \" onclick=\" realclick=false; setTimeout(resetit,1000);\" title=\"Back to top\" href=\"#iag\">Back to top<\/a><iframe style=width:900px;height:700px; id=iyto src=\"' + pathto + 'karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=%20%20%20%20%20%20%20' + nearestplace.replace(\/ \/g,'%20').replace(\/_\/g,'%20') + '\"><\/iframe>';
\n yto=document.getElementById('iyto');
\n } else {
\n yto.src=pathto + 'karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=%20%20%20%20%20%20%20' + nearestplace.replace(\/ \/g,'%20').replace(\/_\/g,'%20');
\n }
\n if (ans == '+0') {
\n if (ago != null) ago.close();
\n ago=window.open('http:\/\/www.australiangeographic.com.au\/search\/search?query=' + nearestplace.replace(\/ \/g,'%20').replace(\/_\/g,'%20'),'_blank','top=15,left=15,width=300,height=300');
\n }
\n location.href='#iyto';
\n } else if (ans.replace('+','') == '1') {
\n if (yto == null) {
\n if (document.title.indexOf('Country ') != 0) document.title='Country ' + document.title;
\n document.getElementById('youtube').innerHTML='<a ontouchstart=\" realclick=false; setTimeout(resetit,1000); \" onclick=\" realclick=false; setTimeout(resetit,1000);\" title=\"Back to top\" href=\"#iag\">Back to top<\/a><iframe style=width:900px;height:700px; id=iyto src=\"' + pathto + 'karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=%20%20%20%20%20%20%20' + placechosen.replace(\/ \/g,'%20').replace(\/_\/g,'%20') + '\"><\/iframe>';
\n yto=document.getElementById('iyto');
\n } else {
\n yto.src=pathto + 'karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=%20%20%20%20%20%20%20' + placechosen.replace(\/ \/g,'%20').replace(\/_\/g,'%20');
\n }
\n if (ans == '+1') {
\n if (ago != null) ago.close();
\n ago=window.open('http:\/\/www.australiangeographic.com.au\/search\/search?query=' + placechosen.replace(\/ \/g,'%20').replace(\/_\/g,'%20'),'_blank','top=15,left=15,width=300,height=300');
\n }
\n location.href='#iyto';
\n } else if (ans == '0.5') {
\n score+=0.5;
\n setTimeout(pickone,2000);
\n }
\n setTimeout(resetit, 200);
\n }
\n document.getElementById('score').innerHTML='Score: ' + score + '\/' + goes;
\n }
\n return '';
\n}
\n<\/code><\/p>\n

… in agmap.htm<\/a>, changed in this way<\/a> using the Australian Geographical Quiz<\/a> web application.<\/p>\n

\n

\n

Previous relevant Australian Geographical Quiz Context Tutorial<\/a> is shown below.<\/p>\n

\"Australian<\/a>

Australian Geographical Quiz Context Tutorial<\/p><\/div>\n

We are continuing on with our Australian Geographic quiz today, building on our Australian Geographical Quiz Primer Tutorial<\/a> start yesterday, with some added functionality to assist with “finding out more”. Which is natural for us when we come upon information we have never heard of before. What the “net” has most helped us out with in this respect is its potential as a reference source with …<\/p>\n