Tag Archives: image

SVG Shapes Collaboration Tutorial

We are all not islands! Though Tahiti sounds nice! Be that as it may, with our Show Some Shapes web application, further to yesterday’s SVG Media Shapes Tutorial we’ve reached the … anyone, anyone? Yes, Aoife … We’re “missing UYou too” … but don’t you think that’s a bit beside the point. And besides, weren’t you supposed to be cleaning windows this afternoon? Okay Brian … yes, you can be an island, if you like. But, can we get back to brass tacks … over there next to the “point”? What’s the “C” word that goes with “Sharing” (yes, thanks Ivan “and caring””)? Yes, that’s all well and good, but can we get back to the “C” word. “Co” … “Col” … “Coll” … (no, Colleen … not “Collyflower”) … give up … how about … Collaborate ? Yes, people share and collaborate. But, in order to collaborate … somebody has to initiate … and hopefully … a collaborator reads and/or listens … then, often optionally … returns a measured response … and so on and so forth etcetera etcetera etcetera Class??!! …………………. class?! …… dismissed In the online world, good “initiators”, we find, are either … email … 📧 and/or … SMS … 📟 … respectively catered for, in HTML, via “a” links featuring an href attribute starting with “mailto:” or “sms:” … document.write(“<a style=display:none; id=asms href=’sms:&body=” + encodeURIComponent(document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?via=’) + “‘></a><a style=display:none; id=aemail href=’mailto:?subject=Show%20Some%20Shapes” + encodeURIComponent(‘ (link validity expires in 10 minutes from now)’) + “&body=” + encodeURIComponent(document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?via=’) + “‘></a><iframe frameborder=0 name=ifstyle id=ifstyle src=’//www.rjmprogramming.com.au/PHP/fgc/index.php” + via + “‘ style=display:none;></iframe>”); … respectively. Later, we append to those href attribute URLs an encodeURIComponent version of a uniquifier (for an initiator) … var alltemp=”; function alltempf() { if (imageoverlay && iframeoverlay) { alltemp=(‘<html><head></head><body oncontextmenu=”parent.pnosharenow();” onclick=”window.open(‘ + “‘” + document.URL.split(‘#’)[0].split(‘?’)[0] + “‘,’_blank’,’top=200,left=200,width=800,height=800′” + ‘);” title=”Click to make your own Shapes in new window or right click for finished here and make your own Shapes below”>’ + simage + siframe + document.getElementById(‘doverlay’).outerHTML + ‘</body></html>’); } else if (imageoverlay) { alltemp=(‘<html><head></head><body oncontextmenu=”parent.pnosharenow();” onclick=”window.open(‘ + “‘” + document.URL.split(‘#’)[0].split(‘?’)[0] + “‘,’_blank’,’top=200,left=200,width=800,height=800′” + ‘);” title=”Click to make your own Shapes in new window or right click for finished here and make your own Shapes below”>’ + simage + document.getElementById(‘doverlay’).outerHTML + ‘</body></html>’); } else if (iframeoverlay) { alltemp=(‘<html><head></head><body oncontextmenu=”parent.pnosharenow();” onclick=”window.open(‘ + “‘” + document.URL.split(‘#’)[0].split(‘?’)[0] + “‘,’_blank’,’top=200,left=200,width=800,height=800′” + ‘);” title=”Click to make your own Shapes in

Posted in Animation, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

SVG Media Shapes Tutorial

To have a web application such as the Show Some Shapes one of yesterday’s SVG Image Shapes Tutorial be able to claim that it accepts all “media” inputs, it should, at least, accept, in some way shape (chortle, chortle), or form (tee hee) … image … data input, even as yesterday’s did … but also, as today’s attends to … video … and … audio … data inputs. At first, in doing these last two media categories, we’d work it, using … SVG foreignObject element usage … but we seemed to run into difficulties, so, instead, resorted to … iframe srcdoc methodologies … effectively swapping the onus being on 404.php to deliver and onto, rather, our changed eighth draft Show Some Shapes web application (you can also try below) … in achieving this new functionality. The pivotal HTML form (plug and play) onsubmit event logic newly added … function maybepost() { if (document.getElementById(‘existtemporarily’).value.indexOf(‘image/’) != -1) { return true; } if (lastfocus.indexOf(‘iframe’) != -1 || lastfocus.indexOf(‘image’) != -1) { imagestring=’data:’; equalsr=encodeURIComponent(imagestring); equalsrif=encodeURIComponent(imagestring); if (document.getElementById(‘existtemporarily’).value.indexOf(‘audio/’) != -1) { document.getElementById(‘myiframe’ + iframeprevs).src=thenifagain(document.getElementById(‘myiframe’ + iframeprevs).src.replace(lastiframesuffix.toUpperCase(), ‘image’).replace(lastiframesuffix, ‘image’)).split(‘=’)[0] + ‘=’ + maybenoifshadows(encodeURIComponent(imagestring)); //equalsrif; document.getElementById(‘myiframe’ + iframeprevs).srcdoc='<html><body style=”opacity:0.2;width:’ + ififw + ‘px;height:’ + ififh + ‘px;”><audio controls=”true” loop=”true” muted=”true” crossorigin=”anonymous”><source’ + typeeq + ‘ src=”‘ + document.getElementById(‘existtemporarily’).value.split(‘#audio’)[0] + ‘”></source></audio></body></html>’; document.getElementById(‘thiframeopt’).innerText=’Iframe … showing audio above’; document.getElementById(‘seliframeoverlay’).value=’overlay’; } else if (document.getElementById(‘existtemporarily’).value.indexOf(‘video/’) != -1) { document.getElementById(‘myiframe’ + iframeprevs).src=thenifagain(document.getElementById(‘myiframe’ + iframeprevs).src.replace(lastiframesuffix.toUpperCase(), ‘image’).replace(lastiframesuffix, ‘image’)).split(‘=’)[0] + ‘=’ + maybenoifshadows(encodeURIComponent(imagestring)); //equalsrif; document.getElementById(‘myiframe’ + iframeprevs).srcdoc='<html><body style=”opacity:0.8;width:’ + ififw + ‘px;height:’ + ififh + ‘px;”><video controls=”true” height=”90%” width=”90%” autoplay=”true” loop=”true” muted=”true” crossorigin=”anonymous”><source’ + typeeq + ‘ src=”‘ + document.getElementById(‘existtemporarily’).value.split(‘#video’)[0] + ‘”></source></video></body></html>’; document.getElementById(‘thiframeopt’).innerText=’Iframe … showing video above’; document.getElementById(‘seliframeoverlay’).value=’overlay’; } imagestring=”; lastiframesuffix=’image’; document.getElementById(‘thiframesel’).value=”; } document.body.style.cursor=’pointer’; return false; } … refers to an overriding srcdoc attribute filled out and populated, and which overrides any other src attribute linked to the relevant HTML iframe element. We thought including audio media input as an option, could open the door to, eventually, share an SVG based annotated presentation which includes an (optionally used) audio commentary. Previous relevant SVG Image Shapes Tutorial is shown below. Am sure some of you have been waiting for it?! Here it is … What (some of) you’ve been waiting for? Yes, images are the input to our shapes web application as today’s work. And yes, SVG has an image element type. And so, on top of yesterday’s SVG Shapes Animations Tutorial, today, we offer either …

Posted in Animation, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

SVG Image Shapes Tutorial

Am sure some of you have been waiting for it?! Here it is … What (some of) you’ve been waiting for? Yes, images are the input to our shapes web application as today’s work. And yes, SVG has an image element type. And so, on top of yesterday’s SVG Shapes Animations Tutorial, today, we offer either … image URL … or … browsed for image … in amongst the “iframe modus operandi” choices, as a new functionality option. Once the image, as SVG, is in place, you may then be tempted to overlay other SVG or line or text annotations on top, for your creation. The WordPress PHP 404.php needed to cater for this … <?php $rvalis=str_replace(‘+’,’ ‘,urldecode(explode(‘&’,explode(‘=’, $_SERVER[‘QUERY_STRING’])[1])[0])); $semicrvals=explode(‘;’, $rvalis); if (strpos($_SERVER[‘QUERY_STRING’], ‘=+data’) !== false || strpos($_SERVER[‘QUERY_STRING’], ‘=%20data’) !== false) { if (file_exists(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’)) { while (filesize(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’) == 0) { sleep(3); } sleep(3); $rvalis=’ ‘ . file_get_contents(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’); unlink(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’); } else { exit; } } else if (strpos($_SERVER[‘QUERY_STRING’], ‘=data’) !== false || strpos($_SERVER[‘QUERY_STRING’], ‘=data’) !== false) { if (file_exists(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’)) { while (filesize(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’) == 0) { sleep(3); } sleep(3); $rvalis=” . file_get_contents(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’); unlink(sys_get_temp_dir() . DIRECTORY_SEPARATOR . ‘existtemporarily’ . fgcserver_remote_addr() . ‘.txt’); } else { exit; } } // // ahead of // if (strpos(strtolower($_SERVER[‘QUERY_STRING’]), ‘image=’) !== false) { $inbetween=restcheck(str_replace(‘:’,’ ‘,str_replace(‘`’,’ ‘,str_replace(‘;’,’ ‘,str_replace(‘+’,’ ‘,urldecode(ourexplode(‘image=’, str_replace(‘?svg’,”,str_replace(‘??svg’,”,(‘?’ . $_SERVER[‘QUERY_STRING’]))))[0])))))); if ($inbetween != ”) { $inbetween=trim($inbetween); $inbw=explode(‘ ‘, str_replace(‘ ‘,’ ‘,str_replace(‘ ‘,’ ‘,str_replace(‘ ‘,’ ‘,str_replace(‘ ‘,’ ‘,$inbetween))))); if (sizeof($inbw) == 1) { $fillc=ffcolcheck($inbw[0]); } else if (sizeof($inbw) >= 2) { if (trim($inbw[0]) != ”) { $fillc=fcolcheck($inbw[0]); } if (trim($inbw[1]) != ”) { $strokec=colcheck($inbw[1]); } } } $plusline=str_replace(‘fillc’, $fillc, str_replace(‘strokec’, $strokec, $plusline)); $thehome=’ L ‘ . ($newWidth / 2) . ‘ ‘ . ($newHeight / 2) . ‘ Z’; if (substr(trim(($rvalis . ‘0’)),0,1) >= ‘0’ && substr(trim(($rvalis . ‘0’)),0,1) <= ‘9’) { header(‘Content-Type: image/svg+xml’); echo ‘<?xml version=”1.0″ standalone=”no”?> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg width=”‘ . ($newWidth / 1) . ‘” height=”‘ . ($newHeight / 1) . ‘” version=”1.1″ xmlns=”http://www.w3.org/2000/svg”>’ . $deffilter . ‘ <rect’ . $usefilter . ‘ x=”0″ y=”0″ width=”‘ . ($newWidth / 1) . ‘” height=”‘

Posted in Animation, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Javascript Lazy Evaluation Timestamp Game Tutorial

Where does your “good value” index lie? We ask, because an underlying principle of this blog, is that we are most interested in online facilities that are free. Always have been. Always will be. Let me talk about a few examples in this blog posting thread, those being … Wikipedia … encyclopaedic data … Google Geo Chart … map data … emojis … are a free resource, out there on the net, helping out we “graphically challenged” content producers … thanks, whoever … and today, we’ve been interested before, but today, we go further, regarding the free aspects to … Internationalization … in the online world, thanks … today acting a tad like a free language translator … albeit … … just for date timestamps, only. Still, and all, these generous arrangements online, should be applauded. Thanks, peepholespeople! Of course, there should be more of them, but to discover some of them, allows for that “added joy of discovery” stumbling upon what is possible, for free, out there! And so, adding onto yesterday’s Javascript Lazy Evaluation Languages Game Tutorial‘s … Country Capitals Game In the Hour Game … and today we introduce the … Languages Game … snapshot of main dropdown functionality choices, today, we add … In the Timestamp Game … as a hybrid between … In the Hour Game … regarding its “when” datetime arrangements and … Languages Game … regarding its “locale” smarts … we add to … function getnextcountrycode(inforce) { var ccr=”, sccr=”, wasccr=”, interimh=0, thiscc=”, lno=0, ctylist=[], irx=0, myccis=”, ijk=0; if (eval(” + ccodes.length) < 9) { var mycc=document.getElementById(‘myctable’).innerHTML; var opts=document.getElementsByTagName(‘option’), longis=”, latis=”; var ths=document.getElementsByTagName(‘th’); if (goodatry > 0 && inforce != 0 && eval(1 + eval(” + cplaces.length)) == Math.abs(inforce)) { //alert(gproposedanswer + ‘ vs ‘ + cplaces.length); atry=goodatry; optfinds+=opts[eval(” + atry)].value + ‘ ‘; ccodes.push(opts[eval(” + atry)].value); cnames.push(opts[eval(” + atry)].innerText); ccapitals.push(mycc.split(“<th>” + opts[eval(” + atry)].innerText + “</th><th>”)[1].split(“<“)[0]); subfroms.push(‘[-89.0000|-88.0000|~From~,2]’); goodatry=eval(-1 * Math.abs(goodatry)); //sofarhrs+=yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0] + ‘ ‘; tzas.push(yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘>’)[1].split(‘<‘)[0]); interimh=eval(eval(eval(eval(” + yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0].replace(‘+’,”)) + uhour) + 24) % 24); if (uhour < interimh && yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0].indexOf(‘-‘) != -1) { for (ijk=1; ijk<=9; ijk++) { doff.push(-1); } } else if (uhour > interimh && yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0].indexOf(‘-‘) == -1) { for (ijk=1; ijk<=9; ijk++) { doff.push(1); } } else { for

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Javascript Lazy Evaluation Languages Game Tutorial

Now that we have three game modes, further to the recent Javascript Lazy Evaluation Game Scroll Into View Tutorial, with … Country Capitals Game In the Hour Game … and today we introduce the … Languages Game … the HTML button element “traffic cop” for this, up to now, is given a rest, in favour of a new HTML “select” (ie. dropdown) element that is much better equipped for scenarios of more than two choices. The “Languages Game” concept would be really simple if every country had one spoken language, but the world does not work this way. But, do you remember when we last presented Fairy Story Chrome Dictation Punctuation Tutorial? There, we were referencing Text to Speech software that Google has demonstrated at https://www.google.com/intl/en/chrome/demos/speech.html (for you Google Chrome users out there). Well, it’s full of great ideas regarding … the mapping of a given Language name (along with its associated code) … to … one or more locales … In computing, a locale is a set of parameters that defines the user’s language, region and any special variant preferences that the user wants to see in their user interface. Usually a locale identifier consists of at least a language code and a country/region code. Locale is an important aspect of i18n. … and this forms the basis of how we might map a language code back to a country code, for our Languages Game today. Take a look at some new Javascript to help here … function mybutclick(selo) { var suffix=”; if (selo.value == ”) { if (simple) { document.getElementById(‘mybut’).click(); } } else { they=selo.value; //if (!simple) { document.getElementById(‘mybut’).click(); } if (document.URL.indexOf(‘?’) == -1) { suffix=’?simple=’ + drilldown; } else if (document.URL.indexOf(‘simple=’) == -1) { suffix=’&simple=’ + drilldown; } location.href=(document.URL.split(‘#’)[0] + suffix).replace(‘simple=’ + drilldown, ‘simple=’ + they); drilldown=they; } } function butrand(asify) { var myccis=”, lno=0, irx=0, ctylist=[], jrx=-1; var opts=[]; if (document.getElementById(‘selmode’).value.replace(/^y/g,”) != ”) { if (document.getElementById(‘selmode’).value == ‘lang’) { if (drilldown == ‘lang’) { opts=document.getElementsByTagName(‘option’); while (jrx == -1) { lno=Math.floor(Math.random() * 59); document.getElementById(‘select_language’).value=” + lno; updateCountry(); rellang=document.getElementById(‘select_language’).innerHTML.split(‘ value=”‘ + lno + ‘”>’)[1].split(‘<‘)[0]; ctylist=document.getElementById(‘select_dialect’).innerHTML.split(‘-‘); jrx=eval(1 + Math.floor(Math.random() * eval(-1 + ctylist.length))); myccis=ctylist[jrx].split(‘”‘)[0]; //alert(myccis + ‘ … ‘ + opts[0].value + ‘ +++ ‘ + ctylist[eval(-1 + jrx)].split(‘”‘)[eval(-1 + ctylist[eval(-1 + jrx)].split(‘”‘).length)] + ‘-‘ + myccis); for (irx=0; irx<optslength; irx++) { //alert(opts[irx].value + ‘ vs ‘ + myccis); if (opts[irx].value == myccis) { atry=irx; rellangkb=butviacml(ctylist[eval(-1 + jrx)].split(‘”‘)[eval(-1

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Javascript Lazy Evaluation Game Scroll Into View Tutorial

Within the changes involved in the recent Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial you may have seen the change … if (window.self !== window.top) { answer=answer; } else { document.getElementById(‘source’).scrollIntoView(); } What is the motivation for that change? Well, if a blog posting contains an HTML iframe pointing at our latest Country Capital or In the Hour Game web application, it would annoyingly scroll down to the webpage position of element document.getElementById(‘source’) in that iframe without the user having clicked any buttons. Dead annoying! But then, can this same idea, or a similar scrolling equivalence help us out sometimes, on the other side of the coin? Well, yes, and that ability, encapulated in the logic of two clonish dropdowns … one dropdown up the top of the webpage … and another “clone” … dropdown to right in the middle of the table heightwise, roughly, as a position:fixed … function overtoright(inspano) { if (window.self !== window.top) { answer=answer; } else { var rectxo=document.getElementById(‘mytable’).getBoundingClientRect(); inspano.style.position=’fixed’; inspano.style.left=” + eval(10 + eval(” + rectxo.right)) + ‘px’; //” + eval(-20 + screen.width) + ‘px’; inspano.style.top=” + Math.floor(eval(rectxo.top + rectxo.bottom) / 2) + ‘px’; inspano.style.zIndex=’99’; inspano.style.display=’inline-block’; } return inspano; } … element, so as to be within view more often … helping to offer … scrolling positional possibilities, as above … is timely way to be able to help out … Geo Chart iframe scaling of itself and its contents … function siv(selo) { var ijk=0, ifsz=[], newishw=0, newishh=0; if ((” + selo.value).trim() != ”) { if ((” + selo.value).trim() == ‘0’) { window.scrollTo(0,0); } else if ((” + selo.value).trim() == ‘++’) { ifsz=document.getElementsByTagName(‘iframe’); for (ijk=0; ijk<ifsz.length; ijk++) { if (ifsz[ijk].src.indexOf(‘title=’) != -1) { if ((” + ifsz[ijk].style.width).trim() == ”) { ifsz[ijk].style.width=” + ifsz[ijk].getBoundingClientRect().width + ‘px’; } ifsz[ijk].style.width=” + Math.floor(eval(eval((” + ifsz[ijk].style.width.replace(‘100%’,’834px’)).replace(‘px’,”)) * 1.1)) + ‘px’; ifsz[ijk].style.height=” + Math.floor(eval(eval((” + ifsz[ijk].style.height).replace(‘px’,”)) * 1.1)) + ‘px’; newishw=ifsz[ijk].src.split(‘width=’)[1].split(‘&’)[0]; newishh=ifsz[ijk].src.split(‘height=’)[1].split(‘&’)[0]; ifsz[ijk].src=ifsz[ijk].src.replace(‘width=’ + newishw, ‘width=’ + Math.floor(eval(1.1 * eval(” + newishw)))).replace(‘height=’ + newishh, ‘height=’ + Math.floor(eval(1.1 * eval(” + newishh)))); } } } else if ((” + selo.value).trim() == ‘–‘) { ifsz=document.getElementsByTagName(‘iframe’); for (ijk=0; ijk<ifsz.length; ijk++) { if (ifsz[ijk].src.indexOf(‘title=’) != -1) { if ((” + ifsz[ijk].style.width).trim() == ”) { ifsz[ijk].style.width=” + ifsz[ijk].getBoundingClientRect().width + ‘px’; } ifsz[ijk].style.width=” + Math.floor(eval(eval((” + ifsz[ijk].style.width.replace(‘100%’,’834px’)).replace(‘px’,”)) / 1.1)) + ‘px’; ifsz[ijk].style.height=” + Math.floor(eval(eval((” + ifsz[ijk].style.height).replace(‘px’,”)) / 1.1)) + ‘px’; newishw=ifsz[ijk].src.split(‘width=’)[1].split(‘&’)[0]; newishh=ifsz[ijk].src.split(‘height=’)[1].split(‘&’)[0]; ifsz[ijk].src=ifsz[ijk].src.replace(‘width=’ + newishw, ‘width=’ + Math.floor(eval(eval(” + newishw) / 1.1))).replace(‘height=’ +

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial

Regarding yesterday’s Javascript Lazy Evaluation Country Game Hints Tutorial progress with the “In the Hour” mode of game play, we thought there would only be the rare annoyance regarding Daylight Saving alterations to the default timezone offsets to GMT time, but there were more than we realized, prompting us to start using codelines like … var newd = new Date(new Date().toLocaleString(“en-US”, {timeZone: yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘>’)[1].split(‘<‘)[0]})); … to start working out timezone offsets in the client world (as you may remember us discussing with SVG Network Clock Minimize Tutorial in recent times) checking on those PHP timezone derivations we default to, but might be wrong by an hour, regarding Daylight Saving timezone arrangements in place for certain times of the year in some countries … var cinthehourspush=((‘0’ + eval(eval(eval(eval(yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0].replace(‘+’,”)) + uhour) + 24) % 24)).slice(-2) + ‘:’ + (‘0’ + umin).slice(-2)); var newd = new Date(new Date().toLocaleString(“en-US”, {timeZone: yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘>’)[1].split(‘<‘)[0]})); var newh=eval((” + newd).split(‘:’)[0].split(‘ ‘)[eval(-1 + (” + newd).split(‘:’)[0].split(‘ ‘).length)]); if (cinthehourspush.indexOf(” + (‘0’ + newh).slice(-2)) != 0) { var oldh=eval(” + cinthehourspush.split(‘:’)[0]); if (oldh != newh) { //alert(‘uhour=’ + uhour + ‘ and oldh=’ + oldh + cinthehourspush.substring(2) + ‘ goes with ‘ + yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0] + ‘ and newh=’ + newh + cinthehourspush.substring(2)); if (newh < uhour && newh == 0 && uhour == 23) { sofarhrs+=’+’ + eval(24 – uhour) + ‘ ‘; } else if (newh > uhour && newh == 23 && uhour == 0) { sofarhrs+=’-‘ + eval(24 – newh) + ‘ ‘; } else if (oldh > uhour) { sofarhrs+=yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0].replace(” + eval(oldh – uhour), ” + eval(newh – uhour)) + ‘ ‘; } else if (oldh < uhour) { sofarhrs+=yourtzlist.split(‘,’ + opts[eval(” + atry)].value + ‘,’)[1].split(‘”‘)[0].replace(” + eval(uhour – oldh), ” + eval(uhour – newh)) + ‘ ‘; } else if (newh > uhour) { sofarhrs+=’+’ + eval(newh – uhour) + ‘ ‘; } else if (newh < uhour) { sofarhrs+=’-‘ + eval(uhour – newh) + ‘ ‘; } } gcinthehourspush=” + (‘0′ + newh).slice(-2) + cinthehourspush.substring(2); } We’ve also added in more linking that adds on to yesterday’s existant … Placename links to Wikipedia … so that now we also have … Country links to Wikipedia … and … TimeZone information links added to the “just after”

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Javascript Lazy Evaluation Country Game Hints Tutorial

Ideally, yesterday’s Javascript Lazy Evaluation Country In the Hour Game Tutorial suits … geography buffs … all the way through to … geography students … alike. Or at least we’d like to help this be so, and in that respect we decided to offer two modes of Hints for the Country Game (whether that be Capitals Game or In the Hour Game) play … show country flags (ie. those “combination emojis” for the country flags, derivable from that country’s ISO 2 letter country code) … var useflags=location.search.split(‘flags=’)[1] ? true : false; useflags=location.search.split(‘wimgs=’)[1] ? true : useflags; function checkflags(cbo, cbochecked) { if (cbochecked || document.getElementById(‘wimgs’).checked) { useflags=true; } else { useflags=false; } applyhints(”); } function orflag(thiscc) { var ccchar=”, ccsuff=”; var lri=’ABCDEFGHIJKLMNOPQRSTUVWXYZ’; var dri=[‘127462′,’127463′,’127464′,’127465′,’127466′,’127467′,’127468′,’127469′,’127470′,’127471′,’127472′,’127473′,’127474′,’127475′,’127476′,’127477′,’127478′,’127479′,’127480′,’127481′,’127482′,’127483′,’127484′,’127485′,’127486′,’127487′]; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval(” + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(eval(” + dri[eval(” + lri.indexOf(ccchar))])); //’&#’ + dri[eval(” + lri.indexOf(ccchar))] + ‘;’; } return ccsuff; } function applyhints(towhat) { var yt=”, nnyt=”; if (useflags) { if (document.getElementById(‘flags’).checked) { myflag=orflag(ccodes[eval(-1 + answer)]); document.getElementById(‘source’).style.backgroundImage=’URL(“‘ + svgtemp.replace(’48’,’96’).replace(‘30%’,’49%’).replace(‘>1 +’, ‘>’ + myflag) + ‘”)’; document.getElementById(‘source’).style.backgroundPosition=’right center’; document.getElementById(‘source’).style.backgroundRepeat=’no-repeat’; } if (document.getElementById(‘wimgs’).checked) { if (yourtzlist.indexOf(‘,’ + ccodes[eval(-1 + answer)] + ‘,’) != -1) { yt=yourtzlist.split(‘,’ + ccodes[eval(-1 + answer)] + ‘,’)[1].split(‘>’)[1].split(‘<‘)[0]; nnyt=yt.replace(yt.split(‘/’)[0] + ‘/’,”); //alert(document.getElementById(‘tzi’).src.split(‘?’)[0].split(‘#’)[0] + ‘?tzexact=’ + encodeURIComponent(yt.replace(/\ /g,’_’)) + ‘&tznickname=’ + encodeURIComponent( nnyt.replace(/\ /g,’_’) )); document.getElementById(‘tzi’).src=document.getElementById(‘tzi’).src.split(‘?’)[0].split(‘#’)[0] + ‘?tzexact=’ + encodeURIComponent(yt.replace(/\ /g,’_’)) + ‘&tznickname=’ + encodeURIComponent( nnyt.replace(/\ /g,’_’) ); } } } else { document.getElementById(‘source’).style.backgroundImage=”; document.getElementById(‘source’).style.backgroundRepeat=’no-repeat’; document.getElementById(‘ourcanvas’).style.backgroundImage=”; document.getElementById(‘ourcanvas’).style.backgroundRepeat=’no-repeat’; } return towhat; } …and/or … Wikipedia images … function checkwimgs(cbo, cbochecked) { if (cbochecked || document.getElementById(‘flags’).checked) { useflags=true; } else { useflags=false; } applyhints(”); } function fgcit(iois) { var outof=[“left top”,”left center”,”left bottom”,”right top”,”right center”,”right bottom”,”center top”,”center center”,”center bottom”]; var startwith=”, endwith=”, imglist=[]; if (iois != null) { if (iois.src.indexOf(‘tzexact=’) != -1) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { if (aconto.body.outerHTML.replace(/\&quot\;/g,”‘”).indexOf(“document.getElementById(‘ourcanvas’).style.background”) != -1) { //document.getElementById(‘ourcanvas’).style.backgroundRepeat=’no-repeat’; startwith=”document.getElementById[‘ourcanvas’].style.background” + aconto.body.outerHTML.replace(/\&amp\;/g,”&”).replace(/\&quot\;/g,”‘”).split(“document.getElementById(‘ourcanvas’).style.background”)[1].split(‘;’)[0] + ‘;’; imglist=startwith.split(‘,’); for (var jiu=0; jiu<imglist.length; jiu++) { if (jiu == 0) { endwith=imglist[jiu].trim().replace(/\)/g, ‘) ‘ + outof[0] + ‘ no-repeat’).replace(‘URL(‘, ‘linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),URL(‘); } else { endwith+=’,’ + imglist[jiu].replace(‘)’, ‘) ‘ + outof[eval(jiu % outof.length)] + ‘ no-repeat’) } } eval(endwith.replace(“document.getElementById[‘ourcanvas’].”, “document.getElementById(‘ourcanvas’).”)); } } } } } } After all, most of us are not destined to visit or travel or tour all these countries, alas! And so, again, hope you try the changed gradual_reveal_country_game.html‘s Country

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment