Colouring In Drag and Drop Reveal Wikipedia Images Tutorial

Posted on by
Colouring In Drag and Drop Reveal Wikipedia Images Tutorial

Colouring In Drag and Drop Reveal Wikipedia Images Tutorial

At first, today, we thought we’d apply new “show Wikipedia image” ideas via …

  • Ajax methodologies … but then saw that …
  • iframe … <iframe onload=ouriaj(this); id=”ourifaj” src=” style=display:none;></iframe> … calls

… better fitted in with our functionalities, but the “feel” of the changes is definitely Ajaxish. We’ve gone off traditional Ajax thinking that worked off the “onmouseover” event in recent years, given mobile platforms have no support for this, but here in the drag and drop realms we can start letting Ajax back into our thinking. Ajax can be that way to display information pertinent to a part of the webpage that the user shows an eventful interest in.

So this Wikipedia imagery is shown as a HTML div … <div id=”ourcanvas” class=”custom-alert” title=”Images thanks to Wikipedia”></div> …

<style>

.custom-alert {
display: inline-block;
/* visibility: visible; */
background-color: rgba(102,102,102,0.8);
color: #fff;
text-align: enter;
margin: 5% auto;
padding: 12px 28px;
opacity: 0.9;
z-index: 200;
}

</style>

… overlayed over the Reveal option World Map image via …


function pcpos() {
if (document.getElementById('splacecross')) {
var ajrect=document.getElementById('splacecross').getBoundingClientRect();
ajaxstuffx.push(eval('' + ajrect.left));
ajaxstuffy.push(eval('' + ajrect.top));
if (document.getElementById('spancb').innerHTML.indexOf(' any of mountain ') != -1) {
ajaxstuff.push(document.getElementById('spancb').innerHTML.split(' any of mountain ')[1].split('?')[0].replace(/\ /g,'_'));
//revealajaxit();
} else if (document.getElementById('spancb').innerHTML.indexOf(' any of waterfall ') != -1) {
ajaxstuff.push(document.getElementById('spancb').innerHTML.split(' any of waterfall ')[1].split('?')[0].replace(/\ /g,'_'));
}
}
}

function showStuff() {
if (zhr != null) {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
//alert(zhr.responseText);
document.getElementById('ourcanvas').style.position='absolute';
document.getElementById('ourcanvas').style.left='' + eval(10 + ajaxstuffx[eval(-1 + ajaxstuffx.length)]) + 'px';
document.getElementById('ourcanvas').style.top='' + eval(-600 + ajaxstuffx[eval(-1 + ajaxstuffx.length)]) + 'px';
document.getElementById('ourcanvas').style.width='600px';
document.getElementById('ourcanvas').style.height='600px';
document.getElementById('ourcanvas').innerHTML+=zhr.responseText;
}
}
}
}

function ajstuff(inspanoh) {
setTimeout(pcpos, 200);
return inspanoh;
}

function ajrstuff(inspanid) {
if (document.getElementById(inspanid).innerHTML.indexOf('<br>') != -1) {
ridis=inspanid;
var ajrect=document.getElementById(inspanid).getBoundingClientRect();
ajaxstuffx.push(eval('' + ajrect.left));
ajaxstuffy.push(eval('' + ajrect.top));
//alert(document.getElementById(inspanid).innerHTML.split('<br>')[1].split(' ...')[0].replace(/\ /g,'_'));
ajaxstuff.push(document.getElementById(inspanid).innerHTML.split('<br>')[1].split(' ...')[0].replace(/\ /g,'_'));
revealajaxit();
}
return inspanid;
}

function sbnull() {
document.getElementById('outcanvas').innerHTML='<div id="ourcanvas" class="custom-alert" title="Images thanks to Wikipedia"></div>';
document.getElementById('ourcanvas').innerHTML='';
}

function antirevealajaxit() {
zhr=null;
lastajaxstuff='';
ajstuff=[];
ajstuffx=[];
ajstuffy=[];
document.getElementById('ourcanvas').style.opacity='0.0';
document.getElementById('ourcanvas').innerHTML='';
document.getElementById('ourcanvas').style.width='0px';
document.getElementById('ourcanvas').style.height='0px';
sbnull();
}

function ouriaj(iois) {
if (iois != null && iois.src.indexOf('tznickname=') != -1) {
ajaconto = (iois.contentWindow || iois.contentDocument);
if (ajaconto.document) { ajaconto = ajaconto.document; }
//if (ajaconto != null) {
// alert(ajaconto.body.outerHTML);
//}
}
}

function changewim() {
if (document.getElementById('wim')) {
if (!document.getElementById('wim').checked) { wscoreafter=wscoreafter.replace(' checked', ' data-chk=""'); return ''; } else { wscoreafter=wscoreafter.replace(' data-chk=""', ' checked'); }
}
}

function revealajaxit() {
var dgis='', idis='splacecross';
if (document.getElementById('wim')) {
if (!document.getElementById('wim').checked) { wscoreafter=wscoreafter.replace(' checked', ' data-chk=""'); return ''; } else { wscoreafter=wscoreafter.replace(' data-chk=""', ' checked'); }
} else if (wscoreafter.trim() == '' || wscoreafter.indexOf(' checked') == -1) {
return '';
} else {
wscoreafter='';
}
var dgis='', idis='splacecross';
if (ridis != '') { idis=ridis; setTimeout(function(){ ridis=''; }, 3000); }
//alert(ajaxstuff[eval(-1 + ajaxstuff.length)]);
if (1 == 1) {
var inthere=-1;
if (ajaxstuff[eval(-1 + ajaxstuff.length)].indexOf('/wiki/') != -1) {
inthere=document.getElementById('tzlist').innerHTML.indexOf('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/option');
} else {
ajaxstuff.push((document.getElementById(idis).innerText.split(' is in ')[0].replace(/^x/g,'').replace(/^\./g,'').replace(String.fromCharCode(10),'').replace(/\ /g,'_')));
inthere=document.getElementById('tzlist').innerHTML.indexOf('/' + ajaxstuff[eval(-1 + ajaxstuff.length)] + '/option');
}
if (inthere != -1 || 3 == 3) {
if (7 == 7) {
document.getElementById('ourcanvas').style.position='absolute';
document.getElementById('ourcanvas').style.left='' + eval(50 + ajaxstuffx[eval(-1 + ajaxstuffx.length)]) + 'px';
document.getElementById('ourcanvas').style.top='' + eval(-350 + ajaxstuffx[eval(-1 + ajaxstuffy.length)]) + 'px';
document.getElementById('ourcanvas').style.width='600px';
document.getElementById('ourcanvas').style.height='600px';
document.getElementById('ourcanvas').style.opacity='0.3';
//document.getElementById('ourcanvas').innerHTML+=zhr.responseText;
//alert(ajaxstuff[eval(-1 + ajaxstuff.length)] + ' ' + inthere);
if (inthere != -1) {
if (ajaxstuff[eval(-1 + ajaxstuff.length)].indexOf('/wiki/') != -1) {
dgis='//www.rjmprogramming.com.au/PHP/fgc/?tzexact=' + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/')[0].split("'")[eval(-1 + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/')[0].split("'").length)] + '%2F' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '&tznickname=' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1];
} else {
dgis='//www.rjmprogramming.com.au/PHP/fgc/?tzexact=' + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)] + '/')[0].split("'")[eval(-1 + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)] + '/')[0].split("'").length)] + '%2F' + ajaxstuff[eval(-1 + ajaxstuff.length)] + '&tznickname=' + ajaxstuff[eval(-1 + ajaxstuff.length)];
}
} else {
dgis='//www.rjmprogramming.com.au/PHP/fgc/?tzexact=&tznickname=' + ajaxstuff[eval(-1 + ajaxstuff.length)];
}
if (dgis != document.getElementById('ourifaj').src && dgis.trim() != '') {
document.getElementById('ourifaj').src=dgis;
}
} else {
//alert(ajaxstuff[eval(-1 + ajaxstuff.length)]);
zhr = new XMLHttpRequest();
//alert('//www.rjmprogramming.com.au/PHP/fgc/?tzexact=' + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/')[0].split("'")[eval(-1 + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/')[0].split("'").length)] + '%2F' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '&tznickname=' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1]);
zhr.open('get', '//www.rjmprogramming.com.au/PHP/fgc/?tzexact=' + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/')[0].split("'")[eval(-1 + document.getElementById('tzlist').innerHTML.split('/' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '/')[0].split("'").length)] + '%2F' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1] + '&tznickname=' + ajaxstuff[eval(-1 + ajaxstuff.length)].split('/wiki/')[1], true);
zhr.onreadystatechange = showStuff;
zhr.send(null);
}
}
} else {
return '';
zhr = new XMLHttpRequest();
zhr.open('get', ajaxstuff[eval(-1 + ajaxstuff.length)], true);
zhr.onreadystatechange = showStuff;
zhr.send(null);
}
}

… as progress on top of the recent Colouring In Drag and Drop Mobile Journey Game Tutorial.

Codewise this needed …

Previous relevant Colouring In Drag and Drop Mobile Journey Game Tutorial is shown below.

Colouring In Drag and Drop Mobile Journey Game Tutorial

Colouring In Drag and Drop Mobile Journey Game Tutorial

We needed to considerably change yesterday’s Colouring In Drag and Drop Pseudo Element Content Tutorial “Journey Game” logic to work with mobile platforms, to do with …

  • for “easy” Journey Game options we change size of “mytable” table and hide any bottom 💣 bomb emoji display …

    var mapcontext=null;

    function canvasize() {

    //document.getElementById('xmwr').innerHTML+='<sty' + 'le> tr { height: 1vh; } </sty' + 'le>';
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('xmwr').innerHTML+='<sty' + 'le> td { overflow: hidden !important; } </sty' + 'le>';
    }

    var tryimg=document.createElement('img');
    tryimg.onload=function(e){
    var trrectis=null;
    var divvs=document.getElementById('mytable');
    newcanvas=document.getElementById('mymobilecanvas');

    //newcanvas.height=Math.round(tryimg.height * eval(('' + divvs.style.width).replace('px','')) / tryimg.width);
    newcanvas.width=eval(('' + divvs.style.width).replace('px',''));
    newcanvas.height=eval(0.5 * eval(('' + divvs.style.width).replace('px','')));

    mapcontext=newcanvas.getContext('2d');
    mapcontext.drawImage(tryimg, 0, 0, tryimg.width, tryimg.height, 0, 0, newcanvas.width, newcanvas.height);

    document.getElementById('mytbody').style.height='' + eval(0.5 * newcanvas.width) + 'px';
    document.getElementById('mytable').style.height='' + eval(0.5 * newcanvas.width) + 'px';

    //newcanvas.style.display='block';
    var divvsr=document.getElementById('mytable').getBoundingClientRect();
    var trls=document.getElementsByTagName('tr');
    for (var itrls=0; itrls<trls.length; itrls++) {
    if (('' + trls[itrls].id + ' ').substring(0,2) == 'tr') {
    trrectis=trls[itrls].getBoundingClientRect();
    if (('' + trls[itrls].id) != ('tr' + (across == 3 ? 99 : across)) && eval(eval('' + trrectis.top) - eval('' + divvsr.top)) > eval('' + eval(0.5 * newcanvas.width))) {
    trls[itrls].style.display='none';
    //alert('here ' + trls[itrls].id);
    } //else {
    //document.title='' + eval('' + trrectis.top) + ' - ' + eval('' + divvsr.top) + ' <= ' + eval('' + eval(0.5 * newcanvas.width));
    //}
    }
    }
    };
    tryimg.src='/HTMLCSS/HYP_50M_SR_W.jpg';

    return true;
    }
  • mobile tr (ie. table row) element heights were not constrained … but now are via directing mobile emoji content to cell itself …

    if (navigator.userAgent.match(/iPad/i)) {
    gonto.innerHTML='' + String.fromCodePoint(journeyemoji) + '';
    gonto.innerHTML='<span class=tiny style="font-size:4px;overflow:hidden;">' + String.fromCodePoint(journeyemoji) + '</span>';
    } else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    gonto.innerHTML='' + String.fromCodePoint(journeyemoji) + '';
    gonto.innerHTML='<span class=tiny style="font-size:2px;overflow:hidden;">' + String.fromCodePoint(journeyemoji) + '</span>';
    } else {
    gonto.innerHTML='<span class=tiny style="font-size:6px;">' + String.fromCodePoint(journeyemoji) + '</span>';
    }
  • Javascript popup alert window can be refused by the mobile platform web browsers (thanks to heads up that this can happen), especially if they “just proceed a location.href defining codeline” …

    if (document.getElementById('pensel').value == '128668') {
    journeycount++;
    evs.push(gred(onto));
    //document.title='' + onto.id;
    if (('' + onto.id).indexOf('TD') == 0) {
    if (!decided) {
    decided=true;
    ctyqgoes++;
    documentURL=document.URL;
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    onto.style.backgroundColor='darkred';
    //onto.innerHTL='<span class=tiny style="font-size:6px;background-color:darkred;">' + String.fromCodePoint(128165) + '</span>'; //String.fromCodePoint(128165);
    //document.getElementById('xmwr').innerHTML+='<sty' + 'le> #' + onto.id + "::after { content:'\\01F4A3'; } </sty" + 'le>';
    document.getElementById('xmwr').innerHTML+='<sty' + 'le> #' + onto.id + "::after { content:'\\01F4A5'; background-color: darkred; font-size:12px; } </sty" + 'le>';
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'Boom! ' + String.fromCodePoint(128165) + ' Sorry, we told you it was <font color=darkgreen>h</font><font color=greenyellow>a</font><font color=yellowgreen>z</font><font color=yellow>a</font><font color=pink>r</font><font color=orange>d</font><font color=lightred>o</font><font color=red>u</font><font color=darkred>s</font>?!');
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=' + czero + czero)) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    alert('Boom! ' + String.fromCodePoint(128165) + ' Sorry, we told you it was hazardous?!');
    if (locationhref.indexOf('journey=00') != -1) { locationhref=locationhref.replace('journey=00', 'journey=6'); }
    setTimeout(function(){     location.href=locationhref; }, 3000); //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=' + czero)) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    }
    //}
    }, 3000);
    //return null;
    }
    } else if (eval('' + journeycount) >= eval('' + (across == 3 ? 99 : across))) {
    if (eval(('' + onto.id).substring(2).split('_')[0].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == 1) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;

    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 3000);

    }
    } else if (eval(('' + onto.id).substring(2).split('_')[0].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == (across == 3 ? 99 : across)) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 3000);
    }
    } else if (eval(('' + onto.id).substring(2).split('_')[1].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == 1) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 8000);
    }
    } else if (eval(('' + onto.id).substring(2).split('_')[1].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == (across == 3 ? 99 : across)) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 8000);
    }
    }
    }
    } else {
    evs.push(onto);
    }
  • we needed some extra consideration sharing a “Journey Game” with email or SMS recipients …

    tableohprefixbit=tableohprefixbit.replace(encodeURIComponent(' (where red is nearest danger and you try to navigate between World edges)'), '');
    if (tableohprefixbit.indexOf('?') != -1 && documentURL.indexOf('journey=') == -1 && selem == 128668) {
    tableohprefixbit=tableohprefixbit.replace('?', '?journey=' + Math.floor(Math.random() * 19878675) + '&');
    }
  • we needed less wordiness for the mobile platforms regarding that instructional span element contents …
    <?php

    $changeanyto='width:' . trim(explode(';', explode('width:', str_replace(' (where red is nearest danger and you try to navigate between World edges)','',str_replace('+',' ',urldecode($_GET['tableohprefix']))))[1])[0]) . ';height:' . trim(explode(';', explode('height:', str_replace('+',' ',urldecode($_GET['tableohprefix'])))[1])[0]) . ';';

    ?>

Codewise this needed …

Previous relevant Colouring In Drag and Drop Hazardous Journey Game Tutorial is shown below.

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Back to thinking about Drag and Drop, a lot of the way it works, favours web application game development. You don’t even have to involve the “drop” part of the concept. Just using the “drag” part, and the “ondragover” event, in particular, can be interesting, as we hope you’ve picked up from the work of our current focus, our Colouring In web application.

Long way from just “Colouring In” by now. In actuality it could be “The Drag Show”, but we all know we don’t have the “realia pizzazz” for that title?!

Today, another Reveal option has been added onto the progress of yesterday’s Colouring In Drag and Drop Browse Button CSS Tutorial, which you could call …


Hazardous Journey Game

It involves …

  • map of the world background image … like the other Reveal quizzes and games … and …
  • hidden (like in the minesweeper game) table cells that stop the user in their tracks should they land on them … and …
  • the user can try to start at one World Map edge and try to get to another (over a long enough distance) … following …
  • colour coded Colouring In of table cells (the redder the more imminently dangerous) … as well as …
  • a “hint” system in the “easy” category of play showing these dangerous cells (being as, nobody here is saying anything about this game being easy … but Life Wasn’t Meant to be Easy)

In the PHP parent we capitalize the IDs of dangerous cells …

<?php

for ($thisrow=1; $thisrow<=$across; $thisrow++) {
$cthisrow='0000000000' . $thisrow;
//$rowsofar='<tr id=svgtr' . $thisrow . ' onclick=textbthis(event); style="width:100%;" id=tr' . substr($cthisrow, -$iacross, $iacross) . '></tr>';
$rowsofar='<tr id=tr' . ltrim(substr($cthisrow, -$iacross, $iacross),'0') . ' onclick=textbthis(event); style="width:100%;"></tr>';
//$rowsofar='<tr id=svgtr' . $thisrow . ' style="width:100%;"></tr>';
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$thistdid='td' . substr($cthisrow, -$iacross, $iacross) . '_';
for ($thiscol=1; $thiscol<=$across; $thiscol++) {
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$ibv=rand(0, $across);
if ($ibv < ($across / 11) && (isset($_GET['journey']) || isset($_POST['journey']))) {
$ynftone='td';
$ynfttwo='TD';
$yynftone='one';
$yynfttwo='two';
}
$cthiscol='0000000000' . $thiscol;
$thistdidsuffix='' . substr($cthiscol, -$iacross, $iacross) . '';
$rowsofar=str_replace('></tr>', '><td class="td' . str_replace($yynftone, $yynfttwo, 'one') . '" id=' . str_replace($ynftone, $ynfttwo, $thistdid) . $thistdidsuffix . ' style=text-align:center; data-answer=' . $ttcnt . '></td></tr>', $rowsofar);
}
$newih=str_replace('</tbody>', $rowsofar . '</tbody>', $newih);
}

?>

… and this is used in some new HTML and Javascript basis functionality …


var journeyred='red';

function gred(gonto) {
var dangercount=0;
var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];
var currow=('' + gonto.id).substring(2).split('_')[0];
var curcol=('' + gonto.id).substring(2).split('_')[1];
var jrow=eval('' + currow.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var jcol=eval('' + curcol.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var crow=currow;
var ccol=curcol;
journeyred=bxcols[0]; //bxcols[Math.floor(Math.random() * bxcols.length)];
if (('' + gonto.id).substring(0,2) == 'TD') {
journeyred='darkred';
} else {
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

//document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//if (dangercount != 0) { alert(dangercount); }
journeyred=bxcols[Math.round(dangercount)]; //'darkred';

}
return gonto;
}

Codewise this needed …

Previous relevant Colouring In Drag and Drop Browse Button CSS Tutorial is shown below.

Colouring In Drag and Drop Browse Button CSS Tutorial

Colouring In Drag and Drop Browse Button CSS Tutorial

Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue. One which is always coming up, in this regard, for us is …


input type=file browsing (from underlying operating system files) button

The thing is, as an improvement on yesterday’s Colouring In Drag and Drop Mobile Postcard Tutorial we’re butting up against this issue, because we wanted to make it more obvious for our mobile platform users of our Colouring In web application, that the way in to the functionality whereby they can create and share personalized (online) postcards is via them clicking that input type=file browsing button. And so we went looking for advice and came across this excellent link’s advice that got us to set up the scenario …

<?php

if (preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"])) { // thanks to https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device-in-php
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe onload="jifopen(this);" class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:228px;margin-top:-194px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
} else {
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-178px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
}

?>

… for mobile platforms, where, on opening the HTML iframe linking to this relevant input type=file browsing button we restyle according to …


var cbaconto=null;

function jifopen(iois) {
if (iois != null) {
cbaconto = (iois.contentWindow || iois.contentDocument);
if (cbaconto.document) { cbaconto = cbaconto.document; }
if (cbaconto != null) {
// Thanks to https://www.viget.com/articles/styling-native-file-upload-input-field/
setInterval(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\002709 Postcard \\002709'; } </sty" + 'le>';
setTimeout(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\01F4F7 Take Photo \\01F4F7'; } </sty" + 'le>';
}, 5000);
}, 10000);
}
}
}

… creating a small emoji assisted animation informing of Postcard “Take Photo” possibilities regarding Postcard creation ideas, via a click of this input type=file browsing button.

Codewise this needed …

Previous relevant Colouring In Drag and Drop Mobile Postcard Tutorial is shown below.

Colouring In Drag and Drop Mobile Postcard Tutorial

Colouring In Drag and Drop Mobile Postcard Tutorial

Yesterday’s Colouring In Drag and Drop Postcard Tutorial mentioned two issues with its Postcard creation functionalities that needed further attention …

We have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also …

… and today we look into that a bit more.

Regarding “We have more work to do regarding data limits (even with hashtagging) using mobile platforms” we were finding the “Take Photo” iOS Camera app functionality was producing images of more than 3000×4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn’t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient). So we did some pruning …


var lesserinurl='';

function checkspag() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {
newimg=document.createElement('img');
newimg.onload = function() {
// draw the image onto the canvas
//alert(11);
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (newimg.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(newimg.height * 800 / newimg.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);
} else {
newcanvas.width=newimg.width;
//alert('' + newimg.width + 'x' + newimg.height);
newcanvas.height=newimg.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0);
}
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
document.getElementById('result').innerHTML=lesserinurl;
//document.getElementById('inurl').value=lesserinurl;
//alert(lesserinurl);
//document.getElementById('inurl').blur();
}
newimg.src = document.getElementById('result').innerHTML;
setTimeout(checkspag, 5000);
} else if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {
imdu=document.getElementById('result').innerHTML.trim();
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';
//alert(' #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } ');
if (document.getElementById('ddstyle')) {
if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {
document.getElementById('ddstyle').innerHTML=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
} else {
if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {
//alert('Here');
document.getElementById('dstyle').innerHTML+=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
}
setTimeout(checkspag, 5000);
} else {
setTimeout(checkspag, 5000);
}
}

… using the great HTML5 canvas element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future. We’ll see.

And regarding “we have some text positioning to fix”, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, panned out …


var postcard=false;
var origmytablerect=null;

setTimeout(function(){
origmytablerect=document.getElementById('mytable').getBoundingClientRect();
console.log('356:' + origmytablerect.top);
var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');
if (1 == 1) {
woois.document.write('<html>' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '</html>');
//origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();
//console.log('56:' + origmytablerect.top);
if (eval('' + origmytablerect.top) > 0) {
var wasthetop=0, thespans=woois.document.getElementsByTagName('span');
for (var iispans=0; iispans<thespans.length; iispans++) {
if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {
console.log('10:' + thespans[iispans].outerHTML);
wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());
wasthetop-=eval('' + origmytablerect.top);
thespans[iispans].style.top='' + wasthetop + 'px';
}
}
}
woois.document.getElementById('mytable').style.position='fixed';
woois.document.getElementById('mytable').style.left='0px';
woois.document.getElementById('mytable').style.top='0px';
woois.document.getElementById('mytable').style.zIndex='23';
woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
} else {
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace('<div id="ta' + 'rget">', '<div id="ta' + 'rget" style="position:fixed;top:0px;left:0px;z-index:23;">') + '</html>');
woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="position:fixed;top:0px;left:0px;z-index:23;') + '</html>');
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="margin-top:-150px;z-index:23;') + '</html>');

woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
}
}, 15000);

Only a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis was needed to help out our Colouring In web application’s Postcard production ideas.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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

Canvas DrawImage First Parameter Primer Tutorial

Posted on by
Canvas DrawImage First Parameter Primer Tutorial

Canvas DrawImage First Parameter Primer Tutorial

Some time ago we presented a short tutorial about a great online product addressing a big area of interest to online users … online meetings. We showcased the great GoToMeeting, with GoToMeeting Primer Tutorial, and we remember using it to good effect among …

  • installing software remotely
  • diagnosing software and hardware issues remotely
  • discussing issues remoting
  • client liaisson remotely

… at a job involving EDI solutions with SAP Business One and Accpac. But that is just the subject matter basis here. Today we really want to use some media from that subject matter basis and use it’s video media as the first argument to the wonderful, the stupendous Canvas drawImage() Method, specifically its fascinating first parameter …

Syntax
Position the image on the canvas:

context.drawImage(img, x, y)
Position the image on the canvas, and specify width and height of the image:

context.drawImage(img, x, y, width, height)
Clip the image and position the clipped part on the canvas:

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)

Don’t be fooled! It is a method offering, thanks, so much more that just an …

el interface intrinsicHeight(el) intrinsicWidth(el)
HTMLImageElement el.naturalWidth el.naturalHeight
SVGImageElement el.[… special case] el.[… special case]
HTMLVideoElement el.videoWidth el.videoHeight
HTMLCanvasElement el.width el.height
ImageBitmap el.width el.height
OffscreenCanvas el.width el.height

… but whaaaaatttttt?! What happens here assigning a video object as a first parameter to the canvas (context)’s drawImage method? It takes a snapshot image of the slide of the playing (and if not, the first image of that) video! That means, couch that in a codeline like …


setInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);

… at the right time, and you can be playing a video into the canvas! Yay!!! Actually, we’ve done this before, and, call us innocents if you like, but this gave us the same thrill then, thanks to all the online contributors regarding heads up ideas here.

But we are “value adding” today. It hadn’t occurred to us that we could do this video to the right of the canvas and dedicate the left side to captions, and that over there, there was enough room to show the “whole blurb” … and nothing but the blurb, and that if we use …

  • HTML video element attribute … autostart=true
  • HTML video element attribute … autoplay=true
  • HTML video element attribute … loop=true

… even if they do not work right from the document.body onload event time, once the video play button is clicked, we could do without the actual video from then on, perhaps (we’ve allowed you to resurrect the video display, and have more work into the future, maybe, regarding the repercussions of this … we’ll see?!).

What form of caption source did we use? We happened to have a “.srt” format WebVTT file pertinent to the GoToMeeting video hanging about, and so we shoved it into the innards of an HTML textarea element, and coded it from there …


<html>
<head>
<title>SVG to Canvas - RJM Programming - May, 2024 ... thanks to https://jsfiddle.net/Na6X5/</title>
<style>
canvas {
border: 1px solid gray;
}
</style>
<script type='text/javascript'>
var divstrc='';
var timings=[];
var times=[];
var tstimes=[];
var blurbs=[];
var cf = "12px Verdana";
var thisy=20, thisi=0, thisc=0;
var can=null, ctx=null;
var collist=['black','blue','purple','magenta','darkred','darkgreen'];
var lenc=eval('' + collist.length);
var oppmode='none';

function tanal(intr) {
var pts=intr.split(':');
console.log(intr);
tstimes.push(eval(eval(pts[0] * 60 * 60 * 1000) + eval(pts[1] * 60 * 1000) + eval(pts[2] * 1000)));
return intr;
}

function onl() {
can = document.getElementById('canvas1');
ctx = can.getContext('2d');

var svg = document.getElementById('simage');
var oimg = document.getElementById('simg');
var ovid = document.getElementById('myvd');

divstrc=document.getElementById('divsrt').value;
timings=divstrc.split(' --> ');
//alert(timings.length);
times.push(tanal(timings[0].slice(-13).trim()));
for (var ii=1; ii<timings.length; ii++) {
if (1 == 2) { times.push(tanal(timings[ii].substring(0,13).trim())); }
if (eval(1 + ii) != eval('' + timings.length)) {
times.push(tanal(timings[ii].slice(-13).trim()));
} else {
times.push(tanal(timings[ii].substring(0,13).trim()));
}
blurbs.push(timings[ii].split(String.fromCharCode(10))[1]);
}

console.log(blurbs);
console.log(tstimes);

var img = new Image();
img.onload = function() {
//ctx.drawImage(svg, 0, 0);
//ctx.drawImage(img, 200, 0);
//ctx.drawImage(oimg, 400, 0);
//ovid.play();
setInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);
}
//img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
//img.src = "/hexagon.svg";
//img.src = "/homecircle.svg";
img.src=oimg.src;
}

function dotext() {
if (eval(1 + thisi) >= eval('' + tstimes.length)) {
thisc++;
if (thisc >= eval('' + collist.length)) {
collist.push(collist[eval(thisc % lenc)]);
}
return loadsrt('');
}
setTimeout(dotext, eval(tstimes[eval(1 + thisi)] - tstimes[eval(0 + thisi)]));
ctx.font = cf;
ctx.strokeStyle=collist[thisc];
ctx.strokeText(blurbs[thisi],20,thisy);
thisy+=15;
thisi++;
}

function loadsrt(dsp) {
thisi=0;
thisy=20;
setTimeout(dotext, tstimes[0]);
if (dsp != '') {
document.getElementById('mysummary').innerHTML='Please click to toggle video display ...';
}
return dsp;
}
</script>
</head>
<body onload="onl();">
<canvas style='background-color:yellow;' id="canvas1" width="1400" height="400"></canvas>

<div id=previd style="display:none;">
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>

<svg id="mySVGimage" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image id=simage href="/hexagon.svg" height="300" width="300" />
</svg>

<img id=simg src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<g>
<path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3 c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/>
<path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/>
<path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/>
<path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6 c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/>
<path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/>
<path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7 c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/>
<path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7 C20.6,84.2,23.2,86.3,26.2,88.2z"/>
<path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6 c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/>
</g>
</svg>'></img>
</div>

<details onclick=" document.getElementById('myvd').style.display=oppmode; if (oppmode == 'block') { oppmode='none'; } else { oppmode='block'; }" open><summary id=mysummary>Please click play button below ...</summary>
<video onplay="this.style.display=loadsrt('none');" id=myvd autoplay=true autostart=true loop=true controls><source src='/Mac/GoToMeeting/GoToMeeting.m4v' type='video/mp4'></source></video>
<div id=divhs style=display:inline-block;vertical-align:top;>
<h1>Video and Captions to Canvas</h1>
<h3>RJM Programming - May, 2024</h3>
<h4>Thanks to https://jsfiddle.net/Na6X5/</h4>
</div>
</details>

<textarea id=divsrt style="display:none;">
WEBVTT FILE

1
00:00:00.100 --> 00:00:01.000 D:vertical A:start
Welcome to our GoTo Meeting tutorial ...
{
"title": "GoTo Meeting tutorial image 1 of 5",
"description": "Welcome to our GoTo Meeting tutorial",
"src": "gm1.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

2
00:00:01.000 --> 00:00:04.000
... we've installed GoTo Meeting and started it up. We have done the invite so we will be the "Presenter" ...

3
00:00:04.000 --> 00:00:06.000
... we click "Show My Screen" ...
{
"title": "GoTo Meeting tutorial image 2 of 5",
"description": "Show My Screen",
"src": "gm2.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

4
00:00:06.000 --> 00:00:16.000
... which is enabled because we are the "Presenter". Now lets ready other things ready to make a connection ...

5
00:00:16.000 --> 00:00:22.000
... we click "Show My Webcam" and start Connecting ...
{
"title": "GoTo Meeting tutorial image 3 of 5",
"description": "Show My Webcam",
"src": "gm3.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

6
00:00:22.000 --> 00:00:24.000
... the GoTo Viewer appears showing you a view of the person you are meeting ...

7
00:00:24.000 --> 00:00:26.000
... we have "lift off" ...
{
"title": "GoTo Meeting tutorial image 4 of 5",
"description": "Lift Off",
"src": "gm4.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

8
00:00:26.000 --> 00:00:28.000
... lo and behold, we've called ourself ...

9
00:00:28.000 --> 00:00:32.000
... have a look at us looking at us ...

10
00:00:32.000 --> 00:00:52.000
... but don't let it blow your mind?!
{
"title": "GoTo Meeting tutorial image 5 of 5",
"description": "Don't blow your mind",
"src": "gm5.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}

11
00:00:52.000 --> 00:01:34.000
Leaving the GoTo Meeting now. See you again soon.
</textarea>

</body>
</html>

Yes, we started the day with a different idea, and end up where we are at with our first draft proof of concept Video to Canvas web application incarnation … again.

Previous relevant GoToMeeting Primer Tutorial is shown below.

GoToMeeting Primer Tutorial

GoToMeeting Primer Tutorial

Here is a tutorial that introduces you to GoToMeeting. GoToMeeting is a great user-friendly video conferencing software by Citrix.

For simple scenarios I’ve always felt comfortable with GoToMeeting for that video conferencing functionality, or for how I usually used it, remotely testing, troubleshooting and/or installing software on remote client sites. Other choices for all Windows scenarios, here are Remote Desktop, and for mixed scenarios, VNC.

GoToMeeting can work with a phone connection or by using the Microphone and Speakers at both ends of the connection. You can host the meeting or join the meeting, share your keyboard or mouse, share your display via a shared webcam, as necessary, meet straight away, or schedule it, or email an invitation … all in all there is a lot of great functionality. Like with Skype, audio and visual can be considered separate … from our tutorial session here is some audio, and here is some visual (ie. video).

Other such meeting ideas can be accessed via Skype, or WebEx Web Conferencing. All these are great ideas that can save companies lots of money on overseas trips!

Link to GoToMeeting “spiritual home” at GoToMeeting, which is owned by Citrix.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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

Colour Coded Mobile Form With Onsubmit Captcha Tutorial

Posted on by
Colour Coded Mobile Form With Onsubmit Captcha Tutorial

Colour Coded Mobile Form With Onsubmit Captcha Tutorial

Yes, am sure lots of you could have told me about yesterday’s Colour Coded Form With Onsubmit Captcha Tutorial …

But what about mobile?

Well, it’s your turn to say …

Told you so.

It’s the scenario whereby there is an onsubmit event logic defined and the user gets any chance at the “keyboard”, if they use the “go” button (at least on iOS) that was circumventing the Captcha logic we’d introduced. In the remedy, we got so very close to totally using, for the first time, the relatively recent …

… but what we found better (though inert was good for about 71/2 out of 8 scenarios (and with all the mobile scenarios)) was to use, occasionally, the rather crude …

  1. if you want to discourage keyboard usage ahead of arranging the Captcha image and span … for whatever reason …
  2. go, as soon as possible …

    [formElement].style.visibility='hidden';

    … until …
  3. the Captcha image and span have been appended to the [formElement].innerHTML (perhaps display:block; or perhaps display:none;) and any overlaying input type=button applied … then …
  4. as required, go …

    [formElement].style.visibility='visible';

… in a further changed colour_code_captcha.js external Javascript helping out colour_code_captcha.htm testing HTML with onsubmit already defined (or below) or testing HTML with no onsubmit already defined (or below).

Previous relevant Colour Coded Form With Onsubmit Captcha Tutorial is shown below.

Colour Coded Form With Onsubmit Captcha Tutorial

Colour Coded Form With Onsubmit Captcha Tutorial

We suspected there would be difficulties when, elaborating on yesterday’s Colour Coded Form Captcha Tutorial‘s start …

  • dynamically adding Captcha Colour Code logic (via the use of external Javascript) to an HTML webpage form … which had no form onsubmit event defined … when today we tested that logic for a form with existant onsubmit event logic (and needed) …
  • new dynamically adding Captcha Colour Code logic (via the use of external Javascript (still via the use of external Javascript …

    <script type='text/javascript' src='//www.rjmprogramming.com.au/colour_code_captcha.js' defer></script>

    ) for an HTML webpage form … which had an existant form onsubmit event defined

Recreating onsubmit logic panned out to be the wrong approach, and the KISS (“keep it simple signorina”) approach much more the go. We ended up …

  • recognising the existence of an onsubmit event
  • show the Colour Coded Captcha image and “span” question near the document.body onload event … at the same time as …
  • overlay the input type=submit (remembering from yesterday, that we arrange for this to exist) button with an input type=button

… to start with. If the user solves the Captcha that input type=button is made to disappear, allowing the true original input type=submit be used as per the original webpage design …


function onsubmitreturn(arguin) {
var farris=[], vscanvasoh='', ifarris=0, newcimgis=null;
if (imgcaptcha && submitcaptcha && spancaptcha && canvascaptcha && formelemofinterest) {
if (('' + arguin) != 'frombutton' || 8 == 8) {
if (('' + arguin).replace('null','').replace('undefined','') == '') {
arguin=imgcaptcha.getAttribute('data-clickedcol');
}
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
//alert('' + arguin + ' vs ' + mcollist[eval('' + formelemofinterest.getAttribute('data-need'))]);
if (('' + arguin).replace('#','').toLowerCase() == mcollist[eval('' + formelemofinterest.getAttribute('data-need'))].replace('#','').toLowerCase()) {
//alert('yay');
if (document.getElementById('myoverlaybo')) {
document.getElementById('myoverlaybo').style.display='none';
}
formelemofinterest.submit();
return true;
} else {
return false;
}
} else {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
return false;
}
} //else {
//if (!imgcaptcha) { alert('no img'); }
//if (!spancaptcha) { alert('no span'); }
//if (!canvascaptcha) { alert('no canvas'); }
//if (!formelemofinterest) { alert('no form'); }
//}
if (!canvascaptcha) {
if (document.getElementById('canvascaptcha')) {
canvascaptcha=document.getElementById('canvascaptcha');
}
if (!formelemofinterest) {
if (('' + arguin).replace('null','').replace('undefined','') == '') {
farris=document.getElementsByTagName('form');
if (eval('' + farris.length) > 0) {
formelemofinterest=farris[0];
if (formelemofinterest.innerHTML.indexOf('<canvas') != -1) {
vscanvasoh='<canvas' + formelemofinterest.innerHTML.split('<canvas')[0].split('>')[0] + '>';
farris=document.getElementsByTagName('canvas');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
canvascaptcha=farris[ifarris];
if (canvascaptcha.outerHTML.indexOf(' id=') == -1) {
canvascaptcha.id='canvascaptcha';
}
}
}
}
}
} else if (('' + arguin.innerHTML).replace('null','').replace('undefined','') != '') {
formelemofinterest=arguin;
if (formelemofinterest.innerHTML.indexOf('<canvas') != -1) {
vscanvasoh='<canvas' + formelemofinterest.innerHTML.split('<canvas')[0].split('>')[0] + '>';
farris=document.getElementsByTagName('canvas');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
canvascaptcha=farris[ifarris];
if (canvascaptcha.outerHTML.indexOf(' id=') == -1) {
canvascaptcha.id='canvascaptcha';
}
}
}
}
}
}
}

if (!formelemofinterest) { return false; }

if (!canvascaptcha) {
formelemofinterest.innerHTML+='<canvas id=canvascaptcha style=display:none;></canvas>';
canvascaptcha=document.getElementById('canvascaptcha');
}
if (!canvascaptcha) { return false; }
if (('' + canvascaptcha.getAttribute('data-initialized')).replace('null','').replace('undefined','') == '') {
newcimgis=new Image();
newcimgis.onload=function(e){
var osbit='';
iandcwidth=newcimgis.width;
iandcheight=newcimgis.height;
if (iandcwidth > 800) {
canvascaptcha.width=iandcwidth;
canvascaptcha.height=iandcheight;
} else {
canvascaptcha.width=800;
canvascaptcha.height=Math.round(newcimgis.height * 800 / newcimgis.width);
}
canvascaptchacontext=canvascaptcha.getContext('2d');
canvascaptchacontext.drawImage(newcimgis, 0, 0, newcimgis.width, newcimgis.height, 0, 0, canvascaptcha.width, canvascaptcha.height);
canvascaptcha.setAttribute('data-initialized', 'y');
mcolrand=eval(1 + Math.floor(Math.random() * eval(-1 + eval('' + mcollist.length))));
if (formelemofinterest.innerHTML.replace(/\"/g,'').replace(/\'/g,'').indexOf(' type=submit') == -1) {
formelemofinterest.innerHTML+='<br><input id=subcaptcha type=submit style=display:block; value=Submit></input><br><br><div id=cstuff><span id=spancaptcha style="display:none;background-color:' + mcollist[mcolrand] + ';">Click below on same colour as background of this text.<br>On success image disappears and you can retry.</span><br><br><img style=display:none; onclick=checkcaptcha(event); id=imgcaptcha data-clickedcol="#000000" width=' + canvascaptcha.width + ' height=' + canvascaptcha.height + ' src="' + canvascaptcha.toDataURL('image/png') + '"></img></div>';
submitcaptcha=document.getElementById('subcaptcha');
} else {
if (formelemofinterest.innerHTML.indexOf(' type="submit"') != -1) {
vscanvasoh='<input' + formelemofinterest.innerHTML.split(' type="submit"')[0].split('<input')[eval(-1 + formelemofinterest.innerHTML.split(' type="submit"')[0].split('<input').length)] + ' type="submit"' + formelemofinterest.innerHTML.split(' type="submit"')[1].split('>')[0] + '>';
farris=document.getElementsByTagName('input');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
} else if (formelemofinterest.innerHTML.indexOf(" type='submit'") != -1) {
vscanvasoh='<input' + formelemofinterest.innerHTML.split(" type='submit'")[0].split('<input')[eval(-1 + formelemofinterest.innerHTML.split(" type='submit'")[0].split('<input').length)] + " type='submit'" + formelemofinterest.innerHTML.split(" type='submit'")[1].split('>')[0] + '>';
farris=document.getElementsByTagName('input');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
} else {
vscanvasoh='<input' + formelemofinterest.innerHTML.split(" type=submit")[0].split('<input')[eval(-1 + formelemofinterest.innerHTML.split(" type=submit")[0].split('<input').length)] + " type=submit" + formelemofinterest.innerHTML.split(" type=submit")[1].split('>')[0] + '>';
farris=document.getElementsByTagName('input');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
formelemofinterest.innerHTML+='<br><br><div id=cstuff><span id=spancaptcha style="display:none;background-color:' + mcollist[mcolrand] + ';">Click below on same colour as background of this text.<br>On success image disappears and you can retry.</span><br><br><img style=display:none; onclick=checkcaptcha(event); id=imgcaptcha data-clickedcol="#000000" width=' + canvascaptcha.width + ' height=' + canvascaptcha.height + ' src="' + canvascaptcha.toDataURL('image/png') + '"></img></div>';
}
formelemofinterest.setAttribute('data-need', '' + mcolrand);
imgcaptcha=document.getElementById('imgcaptcha');
spancaptcha=document.getElementById('spancaptcha');

if (formelemofinterest.outerHTML.indexOf(' onsubmit=') == -1) {
formelemofinterest.onsubmit=function(){ return realonsubmitreturn(''); };
} else if (formelemofinterest.outerHTML.indexOf(' onsubmit="') != -1) {
osbit=formelemofinterest.outerHTML.split(' onsubmit="')[1].split('"')[0];
if (osbit.indexOf('onsubmitreturn(') == -1) {
oldOsHandler=formelemofinterest.onsubmit;
formelemofinterest.setAttribute('data-wasos', osbit);
if (11 == 11) {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
if (!submitcaptcha || 1== 1) {
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.replace(/\'/g,'').replace(/\"/g,'').indexOf(' type=submit') != -1) { // && !submitcaptcha) {
if (!submitcaptcha && overlaybrect == null) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
} else {
overlaybrect=submitcaptcha.getBoundingClientRect();
}
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo data-onclick="if (onsubmitreturn(' + "'frombutton'" + ')) { this.style.display=' + "'none'" + '; } "></input>';
overlaybo=document.getElementById('myverlaybo');
} else if (1 == 1) {
//alert('1:' + submitcaptcha.id);
overlaybrect=document.getElementById('mysub').getBoundingClientRect();
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo onclick="spancaptcha.style.display=' + "'inline'" + '; imgcaptcha.style.display=' + "'block'" + '; alert(1987); this.style.display=' + "'none'" + '; "></input>';
overlaybo=document.getElementById('myverlaybo');
//submitcaptcha.onmouseover=function(event){ document.title=('' + event.target.id); return realonsubmitreturn(''); };
//alert('11:' + submitcaptcha.id);
submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };
//alert('111:' + submitcaptcha.id + ' ' + submitcaptcha.outerHTML);
} else {
formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; } };
}
}
} else if (formelemofinterest.outerHTML.indexOf(" onsubmit='") != -1) {
osbit=formelemofinterest.outerHTML.split(" onsubmit='")[1].split("'")[0];
if (osbit.indexOf('onsubmitreturn(') == -1) {
oldOsHandler=formelemofinterest.onsubmit;
formelemofinterest.setAttribute('data-wasos', osbit);
if (11 == 11) {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
if (!submitcaptcha && overlaybrect == null) {
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.replace(/\'/g,'').replace(/\"/g,'').indexOf(' type=submit') != -1) { // && !submitcaptcha) {
if (!submitcaptcha && overlaybrect == null) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
} else {
overlaybrect=submitcaptcha.getBoundingClientRect();
}
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo data-onclick="if (onsubmitreturn(' + "'frombutton'" + ')) { this.style.display=' + "'none'" + '; } "></input>';
overlaybo=document.getElementById('myverlaybo');
} else if (1 == 1) {
//alert('' + submitcaptcha.id);
submitcaptcha.onmousedown=function(event){ return realonsubmitreturn(''); };
submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };
} else {
formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; } };
}
}
} else if (formelemofinterest.outerHTML.indexOf(' onsubmit=') != -1) {
osbit=formelemofinterest.outerHTML.split(' onsubmit=')[1].split(' ')[0];
if (osbit.indexOf('onsubmitreturn(') == -1) {
oldOsHandler=formelemofinterest.onsubmit;
formelemofinterest.setAttribute('data-wasos', osbit);
if (11 == 11) {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
if (!submitcaptcha || 2 == 2) {
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.replace(/\'/g,'').replace(/\"/g,'').indexOf(' type=submit') != -1) { // && !submitcaptcha) {
if (!submitcaptcha && overlaybrect == null) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
} else {
overlaybrect=submitcaptcha.getBoundingClientRect();
}
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo data-onclick="if (onsubmitreturn(' + "'frombutton'" + ')) { this.style.display=' + "'none'" + '; } "></input>';
overlaybo=document.getElementById('myverlaybo');
} else if (1 == 1) {
//alert('3:' + submitcaptcha.id);
submitcaptcha.onmousedown=function(event){ return realonsubmitreturn(''); };
submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };
} else {
formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; } };
}
}
}

};
setTimeout(function(){
newcimgis.src='data:image/webp;base64,UklGRl4JAABXRUJQVlA4TFEJAAAv/8TvAFWO47aNJEly/ll3uWb23mdETIAqEJYJ27jlP2ldJUmL4OXmWUiSiT+vKorqpIAtSayAqczxbr5ZTzK3uI16cFqLHXD63N7kOKgiN5Jt11bmf1QeuESHS0TYEAQxady3v7j36X4i3Ma2rSrnva8ZUAF1UAKpQw3uLoVpSO5ORurOk9t/Rm7bhqGAfKDddlzOlCUAMmxLWX27nz02V7aXtm2ubHtW8xGe2du2bXtmZR1UdZ+MeKvKiMrsuhEnphRQbFtbtuzns19GgFtyqleJLLrDIBiRu3vVyDSoxP9b39d/J2wkOVL586Pb1eOLT+DY1ha3+YgQFsKfsDLPyRazuVRZU7pUczr+Alme/Qs4tq0de877/qhsjOSPbaPNSulWfQag2rbtpM1KZ9t8vkwgbmvbVqKNRWRaERHN0aLb+ORI/51AkqRIWUf+0e2hQa7o5J8tAhRg7YNpjC4tMvghLO9kPV/AcGtisdAkSl63vsCl4A8qAARAYlC0ndEJPuCzsR6f8M38mokAoGliVZWeXMJos8KFycute6Auk6UZaUdoIjPkUAag9HOvIBVAolWU2AYpIBE2RME7ox0f8QP/wEri9RkMk7NJF+WeddB0bKulTQX/4z/+4z/+C/7Hf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/x3dl7rKLntCpv+8cVYxydibdbjtQxHjE0Mkfp+EGPcMLkMdNGltJpFfZKJba/+yZmwqjPwEu+M9XiDz/hD5JV5jGGrzUzOQx60y51blDaGNIOfFnIIKQxJqJpS92g7LGeCh/ofUYz54CTxwwAGJ08sU9oaYukkR3HEkY4WAcVBd8ceH3l+1JkMYsqAomDJIkW3vi7Xe5hkk9SlbI4612ivzmfLAAollarTnu/HHx5+yeaHX0442PkHqNo2Bcx3qiMdhZ+TgKk/tYYzIqm6bDpyqEtSmVlbYbcRmMGijPemMhhfC1VFSWlwFMHUn+B/wf/4j/8O/gv+939BxYY7HF84LqMjuS3qYJX+Xu/q8H+oOQVt63jczQucwxFnO1chdbrz5HMIIV6A1AnOd7bify6fMXIcASY2XqqWrF/GQqHypUqvV2Uqxyf74NgCrpar4Crlkrp6NgGQvKmAJS53DoYuwGS7i7IkUlLs5/0/yA99wORgf4cksLpUsf7s2iZat/KG+KagaTiQ0/4wlXaEwiJ9v4u2gVgyNEeMdP5D6nsoajIYK7Q+lAc0yS3iwb4tDwgwLItQqh/17r9a9UtEORN+RhS8wFu5xDNRNK0kNobGNH4MJttd+bPcyTKYyLQ+g1rZ+/zDbeYDOQowLItRahwlV20fztwJvyif/eGceCuKpsO/gdnvVK/oU7n4bu/LRboSa2Y2/IKM9of44L/gf/wX/I//Dv4L/sd//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md/e/t9BrV8tw/kKF3JVZM74Rf944tMTEPE0Bwx0vkPqe+hqMngJ+4zH8oDmuQW8WDflgcEGJZFKNWPevdfrfolZsPPiIIXeCuXeCaKppXExlY+iI6UJKMz84/sh+ai9CskgdVQah2tW3kmwr7+RxT5VNohEptDLF3pcq64ymUAxTmuEaVw+4LR1+Es17rMFaL3ydcClM4gwMTmGzWAYlsslKxbtXq11apGvYwQ2xQUteVmDVwNVyuXXJVZM5sOgJb+tqyNsHwCU0U+lg2G1RruIOXCwnEZHcltUQerUMrMWrdGYAaLnIImoIBvsCxN3xD5SvA//uM//uO/4H9nvMSGM6KQa7SMxNUPllW45T3uaiRVl02Hk6qaYlzvZkqfYtkR9uOIfeyvkNrDAWKWQcwHIVVF1ZmqJFWKVbej2mzmHwAl/W/PLg60j/30lpgPkZJim6rT7h8H3u/zst8TF3u/HnS39S9Qtf28p9+hjgdvd5ECFNugKM/0P6JYgVv8Mn7p+71SS59D/Wa5VLGtqtKP/RicPLEMmo79vG8GsdQyHDE2MUTc7raxIgOtgwClsKUz8ArvrLrxBh91BmMj8RQ01DL6ihbRXJRemccYttrM5DzkQbvcuUVpY1683ZW0wp4o+IAv+GzFjU/4RuZZqNVr28M5D6XXZzDarHChi3LPOqVNeX9hVxS8x2erPqPXmouWyYP/Bf87+I//gv8F/wv+x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x39n2UzDXXfznyRLjZD/O8yZsGnlv+/6n9Rn/zvNMYP28NIixqCtCy4+SGX3Xf8m0JjGz2+8IIlUK8thZn5s8Wslfu4OjIfEh1C/WYzSNyMYnLzSSGwBZdEfRkjd6hH3uZ8QvuMbRpoW7Tjfyffw3Vbb1HfxvdphsAGgpKqkmz3hXvfrLw96zDxAsU3V6Zb9x1fuXbt/lQt9o36hBSxH+uu+jmfdj6GveEH+sDIwjeUF+QupmiRGoMFs1X/uSiqx35CqqrrkZJJQIkdv8JJMaz3wH//x38F/wf/476wWSCGRw22k4jzhWoWrOEVmVLyYweC88Eek4x+koAd6oUsM+Ueu2e6ZLnlMq2/PdJJRv8Fq1rW6NXmv8oQFAIP01z1tZE0MfcIL0iLVM1qQ4iG2+folv/RgzIqt/gesv6yltyEvdj/QsJ/3rfDcILlXsndbpyi1HMLEZ6MYJp/1NklKWfwPqoq03ZX+m4buARrCbHfgq5FIL0PJMV1MktmuLiWnTXivMWqdCX7WdqSPEcZW4dOx4H/8F/yP//gv+B//Bf/jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/47sfGzRSg1XRCd8038CPxnf8wd2E/n43FzM9KDUMt/M/KtUs1+3nfEshsA';
}, 2000);
}

return false;
}

… in a changed colour_code_captcha.js external Javascript helping out the changed colour_code_captcha.htm testing HTML with onsubmit already defined …

Previous relevant Colour Coded Form Captcha Tutorial is shown below.

Colour Coded Form Captcha Tutorial

Colour Coded Form Captcha Tutorial

Are you human?

This is not such a silly question, in the online world. There are ways to access software with no real human intervention among …

  • legitimately
  • usefully
  • unintendedly
  • maliciously

… and if you design a web application looking after details entered by a user, often you want to ensure the processing is being done by a real user, in the first two ways.

Years ago, with this in mind, came CAPTCHA logic …

A CAPTCHA (/ˈkæp.tʃə/ KAP-chə) is a type of challenge–response test used in computing to determine whether the user is human in order to deter bot attacks and spam.

Those ones with the segmented images and you are asked to click in all parts containing a bike, for instance, yours truly finds very tricky. Yes, today’s idea from us is a lot simpler. It just involves …

  • colour coding
  • a Dutch artistic genius … Piet Mondrian …
  • Pixabay‘s access to that genius … thanks, all concerned …
  • a love of simplicity (and mostly, primary colours) …
  • HTML5 canvas element … especially it’s method …
  • getImageData() method

… allowing us to scrutinize image pixel colours at a clicked position. And just in case users are colour blind, we diss any colour names and use background comparison question reasoning in the code.

As seemingly silly as this sounds, it’s insertion into an HTML webpage form element’s onsubmit event logic (and we found out, we needed to force an input type=submit button, if not there), is an extra step to deter processes not being run by a real user accessing the form.

Today, we’ve supplied a really simple parent overseer colour_code_captcha.html example usage (that just writes a personalized (but not gift wrapped, alas) welcome message near the top of the webpage) …


<html>
<head>
<script type='text/javascript' src='//www.rjmprogramming.com.au/colour_code_captcha.js' defer></script>
<script type='text/javascript'>
var fname=location.search.split('fname=')[1] ? decodeURIComponent(location.search.split('fname=')[1].split('&')[0]) : "";
var lname=location.search.split('lname=')[1] ? decodeURIComponent(location.search.split('lname=')[1].split('&')[0]) : "";
</script>
</head>
<body onload="if ((fname + lname).trim() != '' && document.referrer.indexOf('/colour_code_captcha.') != -1) { document.getElementById('welcome').innerHTML='<h2>Welcome to ' + fname + ' ' + lname + ' at ' + ('' + new Date()) + ' ...</h2>'; }">
<div id=welcome></div>
<form data-onsubmit="return onsubmitreturn('');" action='./colour_code_captcha.html' method=GET>
<input style=text placeholder="First name" name=fname type=text></input><br>
<input style=text placeholder="Last name" name=lname type=text></input><br>
<br><input id=mysub type=submit value="Say hello ..."></input>
</form>
</body>
</html>

… of that one external Javascript script tool doing just about all the CAPTCHA work insinuated into the parent webpage’s first such HTML form element found, via colour_code_captcha.js first draft external Javascript you can also try below …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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

Colour Coded Form With Onsubmit Captcha Tutorial

Posted on by
Colour Coded Form With Onsubmit Captcha Tutorial

Colour Coded Form With Onsubmit Captcha Tutorial

We suspected there would be difficulties when, elaborating on yesterday’s Colour Coded Form Captcha Tutorial‘s start …

  • dynamically adding Captcha Colour Code logic (via the use of external Javascript) to an HTML webpage form … which had no form onsubmit event defined … when today we tested that logic for a form with existant onsubmit event logic (and needed) …
  • new dynamically adding Captcha Colour Code logic (via the use of external Javascript (still via the use of external Javascript …

    <script type='text/javascript' src='//www.rjmprogramming.com.au/colour_code_captcha.js' defer></script>

    ) for an HTML webpage form … which had an existant form onsubmit event defined

Recreating onsubmit logic panned out to be the wrong approach, and the KISS (“keep it simple signorina”) approach much more the go. We ended up …

  • recognising the existence of an onsubmit event
  • show the Colour Coded Captcha image and “span” question near the document.body onload event … at the same time as …
  • overlay the input type=submit (remembering from yesterday, that we arrange for this to exist) button with an input type=button

… to start with. If the user solves the Captcha that input type=button is made to disappear, allowing the true original input type=submit be used as per the original webpage design …


function onsubmitreturn(arguin) {
var farris=[], vscanvasoh='', ifarris=0, newcimgis=null;
if (imgcaptcha && submitcaptcha && spancaptcha && canvascaptcha && formelemofinterest) {
if (('' + arguin) != 'frombutton' || 8 == 8) {
if (('' + arguin).replace('null','').replace('undefined','') == '') {
arguin=imgcaptcha.getAttribute('data-clickedcol');
}
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
//alert('' + arguin + ' vs ' + mcollist[eval('' + formelemofinterest.getAttribute('data-need'))]);
if (('' + arguin).replace('#','').toLowerCase() == mcollist[eval('' + formelemofinterest.getAttribute('data-need'))].replace('#','').toLowerCase()) {
//alert('yay');
if (document.getElementById('myoverlaybo')) {
document.getElementById('myoverlaybo').style.display='none';
}
formelemofinterest.submit();
return true;
} else {
return false;
}
} else {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
return false;
}
} //else {
//if (!imgcaptcha) { alert('no img'); }
//if (!spancaptcha) { alert('no span'); }
//if (!canvascaptcha) { alert('no canvas'); }
//if (!formelemofinterest) { alert('no form'); }
//}
if (!canvascaptcha) {
if (document.getElementById('canvascaptcha')) {
canvascaptcha=document.getElementById('canvascaptcha');
}
if (!formelemofinterest) {
if (('' + arguin).replace('null','').replace('undefined','') == '') {
farris=document.getElementsByTagName('form');
if (eval('' + farris.length) > 0) {
formelemofinterest=farris[0];
if (formelemofinterest.innerHTML.indexOf('<canvas') != -1) {
vscanvasoh='<canvas' + formelemofinterest.innerHTML.split('<canvas')[0].split('>')[0] + '>';
farris=document.getElementsByTagName('canvas');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
canvascaptcha=farris[ifarris];
if (canvascaptcha.outerHTML.indexOf(' id=') == -1) {
canvascaptcha.id='canvascaptcha';
}
}
}
}
}
} else if (('' + arguin.innerHTML).replace('null','').replace('undefined','') != '') {
formelemofinterest=arguin;
if (formelemofinterest.innerHTML.indexOf('<canvas') != -1) {
vscanvasoh='<canvas' + formelemofinterest.innerHTML.split('<canvas')[0].split('>')[0] + '>';
farris=document.getElementsByTagName('canvas');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
canvascaptcha=farris[ifarris];
if (canvascaptcha.outerHTML.indexOf(' id=') == -1) {
canvascaptcha.id='canvascaptcha';
}
}
}
}
}
}
}

if (!formelemofinterest) { return false; }

if (!canvascaptcha) {
formelemofinterest.innerHTML+='<canvas id=canvascaptcha style=display:none;></canvas>';
canvascaptcha=document.getElementById('canvascaptcha');
}
if (!canvascaptcha) { return false; }
if (('' + canvascaptcha.getAttribute('data-initialized')).replace('null','').replace('undefined','') == '') {
newcimgis=new Image();
newcimgis.onload=function(e){
var osbit='';
iandcwidth=newcimgis.width;
iandcheight=newcimgis.height;
if (iandcwidth > 800) {
canvascaptcha.width=iandcwidth;
canvascaptcha.height=iandcheight;
} else {
canvascaptcha.width=800;
canvascaptcha.height=Math.round(newcimgis.height * 800 / newcimgis.width);
}
canvascaptchacontext=canvascaptcha.getContext('2d');
canvascaptchacontext.drawImage(newcimgis, 0, 0, newcimgis.width, newcimgis.height, 0, 0, canvascaptcha.width, canvascaptcha.height);
canvascaptcha.setAttribute('data-initialized', 'y');
mcolrand=eval(1 + Math.floor(Math.random() * eval(-1 + eval('' + mcollist.length))));
if (formelemofinterest.innerHTML.replace(/\"/g,'').replace(/\'/g,'').indexOf(' type=submit') == -1) {
formelemofinterest.innerHTML+='<br><input id=subcaptcha type=submit style=display:block; value=Submit></input><br><br><div id=cstuff><span id=spancaptcha style="display:none;background-color:' + mcollist[mcolrand] + ';">Click below on same colour as background of this text.<br>On success image disappears and you can retry.</span><br><br><img style=display:none; onclick=checkcaptcha(event); id=imgcaptcha data-clickedcol="#000000" width=' + canvascaptcha.width + ' height=' + canvascaptcha.height + ' src="' + canvascaptcha.toDataURL('image/png') + '"></img></div>';
submitcaptcha=document.getElementById('subcaptcha');
} else {
if (formelemofinterest.innerHTML.indexOf(' type="submit"') != -1) {
vscanvasoh='<input' + formelemofinterest.innerHTML.split(' type="submit"')[0].split('<input')[eval(-1 + formelemofinterest.innerHTML.split(' type="submit"')[0].split('<input').length)] + ' type="submit"' + formelemofinterest.innerHTML.split(' type="submit"')[1].split('>')[0] + '>';
farris=document.getElementsByTagName('input');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
} else if (formelemofinterest.innerHTML.indexOf(" type='submit'") != -1) {
vscanvasoh='<input' + formelemofinterest.innerHTML.split(" type='submit'")[0].split('<input')[eval(-1 + formelemofinterest.innerHTML.split(" type='submit'")[0].split('<input').length)] + " type='submit'" + formelemofinterest.innerHTML.split(" type='submit'")[1].split('>')[0] + '>';
farris=document.getElementsByTagName('input');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
} else {
vscanvasoh='<input' + formelemofinterest.innerHTML.split(" type=submit")[0].split('<input')[eval(-1 + formelemofinterest.innerHTML.split(" type=submit")[0].split('<input').length)] + " type=submit" + formelemofinterest.innerHTML.split(" type=submit")[1].split('>')[0] + '>';
farris=document.getElementsByTagName('input');
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.indexOf(vscanvasoh) == 0) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
formelemofinterest.innerHTML+='<br><br><div id=cstuff><span id=spancaptcha style="display:none;background-color:' + mcollist[mcolrand] + ';">Click below on same colour as background of this text.<br>On success image disappears and you can retry.</span><br><br><img style=display:none; onclick=checkcaptcha(event); id=imgcaptcha data-clickedcol="#000000" width=' + canvascaptcha.width + ' height=' + canvascaptcha.height + ' src="' + canvascaptcha.toDataURL('image/png') + '"></img></div>';
}
formelemofinterest.setAttribute('data-need', '' + mcolrand);
imgcaptcha=document.getElementById('imgcaptcha');
spancaptcha=document.getElementById('spancaptcha');

if (formelemofinterest.outerHTML.indexOf(' onsubmit=') == -1) {
formelemofinterest.onsubmit=function(){ return realonsubmitreturn(''); };
} else if (formelemofinterest.outerHTML.indexOf(' onsubmit="') != -1) {
osbit=formelemofinterest.outerHTML.split(' onsubmit="')[1].split('"')[0];
if (osbit.indexOf('onsubmitreturn(') == -1) {
oldOsHandler=formelemofinterest.onsubmit;
formelemofinterest.setAttribute('data-wasos', osbit);
if (11 == 11) {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
if (!submitcaptcha || 1== 1) {
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.replace(/\'/g,'').replace(/\"/g,'').indexOf(' type=submit') != -1) { // && !submitcaptcha) {
if (!submitcaptcha && overlaybrect == null) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
} else {
overlaybrect=submitcaptcha.getBoundingClientRect();
}
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo data-onclick="if (onsubmitreturn(' + "'frombutton'" + ')) { this.style.display=' + "'none'" + '; } "></input>';
overlaybo=document.getElementById('myverlaybo');
} else if (1 == 1) {
//alert('1:' + submitcaptcha.id);
overlaybrect=document.getElementById('mysub').getBoundingClientRect();
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo onclick="spancaptcha.style.display=' + "'inline'" + '; imgcaptcha.style.display=' + "'block'" + '; alert(1987); this.style.display=' + "'none'" + '; "></input>';
overlaybo=document.getElementById('myverlaybo');
//submitcaptcha.onmouseover=function(event){ document.title=('' + event.target.id); return realonsubmitreturn(''); };
//alert('11:' + submitcaptcha.id);
submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };
//alert('111:' + submitcaptcha.id + ' ' + submitcaptcha.outerHTML);
} else {
formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; } };
}
}
} else if (formelemofinterest.outerHTML.indexOf(" onsubmit='") != -1) {
osbit=formelemofinterest.outerHTML.split(" onsubmit='")[1].split("'")[0];
if (osbit.indexOf('onsubmitreturn(') == -1) {
oldOsHandler=formelemofinterest.onsubmit;
formelemofinterest.setAttribute('data-wasos', osbit);
if (11 == 11) {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
if (!submitcaptcha && overlaybrect == null) {
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.replace(/\'/g,'').replace(/\"/g,'').indexOf(' type=submit') != -1) { // && !submitcaptcha) {
if (!submitcaptcha && overlaybrect == null) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
} else {
overlaybrect=submitcaptcha.getBoundingClientRect();
}
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo data-onclick="if (onsubmitreturn(' + "'frombutton'" + ')) { this.style.display=' + "'none'" + '; } "></input>';
overlaybo=document.getElementById('myverlaybo');
} else if (1 == 1) {
//alert('' + submitcaptcha.id);
submitcaptcha.onmousedown=function(event){ return realonsubmitreturn(''); };
submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };
} else {
formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; } };
}
}
} else if (formelemofinterest.outerHTML.indexOf(' onsubmit=') != -1) {
osbit=formelemofinterest.outerHTML.split(' onsubmit=')[1].split(' ')[0];
if (osbit.indexOf('onsubmitreturn(') == -1) {
oldOsHandler=formelemofinterest.onsubmit;
formelemofinterest.setAttribute('data-wasos', osbit);
if (11 == 11) {
spancaptcha.style.display='inline';
imgcaptcha.style.display='block';
if (!submitcaptcha || 2 == 2) {
for (ifrarris=0; ifarris<farris.length; ifarris++) {
if (farris[ifarris].outerHTML.replace(/\'/g,'').replace(/\"/g,'').indexOf(' type=submit') != -1) { // && !submitcaptcha) {
if (!submitcaptcha && overlaybrect == null) {
submitcaptcha=farris[ifarris];
overlaybrect=submitcaptcha.getBoundingClientRect();
}
}
}
} else {
overlaybrect=submitcaptcha.getBoundingClientRect();
}
formelemofinterest.innerHTML+='<input type=button style="z-index:6754;position:absolute;top:' + overlaybrect.top + 'px;left:' + overlaybrect.left + 'px;width:' + overlaybrect.width + 'px;height:' + overlaybrect.height + 'px;" value="' + submitcaptcha.value + '" id=myoverlaybo data-onclick="if (onsubmitreturn(' + "'frombutton'" + ')) { this.style.display=' + "'none'" + '; } "></input>';
overlaybo=document.getElementById('myverlaybo');
} else if (1 == 1) {
//alert('3:' + submitcaptcha.id);
submitcaptcha.onmousedown=function(event){ return realonsubmitreturn(''); };
submitcaptcha.ontouchdown=function(event){ return realonsubmitreturn(''); };
} else {
formelemofinterest.onsubmit=function(event){ if (realonsubmitreturn()) { if (oldOsHandler){ oldOsHandler(); } } else { return false; } };
}
}
}

};
setTimeout(function(){
newcimgis.src='data:image/webp;base64,UklGRl4JAABXRUJQVlA4TFEJAAAv/8TvAFWO47aNJEly/ll3uWb23mdETIAqEJYJ27jlP2ldJUmL4OXmWUiSiT+vKorqpIAtSayAqczxbr5ZTzK3uI16cFqLHXD63N7kOKgiN5Jt11bmf1QeuESHS0TYEAQxady3v7j36X4i3Ma2rSrnva8ZUAF1UAKpQw3uLoVpSO5ORurOk9t/Rm7bhqGAfKDddlzOlCUAMmxLWX27nz02V7aXtm2ubHtW8xGe2du2bXtmZR1UdZ+MeKvKiMrsuhEnphRQbFtbtuzns19GgFtyqleJLLrDIBiRu3vVyDSoxP9b39d/J2wkOVL586Pb1eOLT+DY1ha3+YgQFsKfsDLPyRazuVRZU7pUczr+Alme/Qs4tq0de877/qhsjOSPbaPNSulWfQag2rbtpM1KZ9t8vkwgbmvbVqKNRWRaERHN0aLb+ORI/51AkqRIWUf+0e2hQa7o5J8tAhRg7YNpjC4tMvghLO9kPV/AcGtisdAkSl63vsCl4A8qAARAYlC0ndEJPuCzsR6f8M38mokAoGliVZWeXMJos8KFycute6Auk6UZaUdoIjPkUAag9HOvIBVAolWU2AYpIBE2RME7ox0f8QP/wEri9RkMk7NJF+WeddB0bKulTQX/4z/+4z/+C/7Hf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/zHf/x3dl7rKLntCpv+8cVYxydibdbjtQxHjE0Mkfp+EGPcMLkMdNGltJpFfZKJba/+yZmwqjPwEu+M9XiDz/hD5JV5jGGrzUzOQx60y51blDaGNIOfFnIIKQxJqJpS92g7LGeCh/ofUYz54CTxwwAGJ08sU9oaYukkR3HEkY4WAcVBd8ceH3l+1JkMYsqAomDJIkW3vi7Xe5hkk9SlbI4612ivzmfLAAollarTnu/HHx5+yeaHX0442PkHqNo2Bcx3qiMdhZ+TgKk/tYYzIqm6bDpyqEtSmVlbYbcRmMGijPemMhhfC1VFSWlwFMHUn+B/wf/4j/8O/gv+939BxYY7HF84LqMjuS3qYJX+Xu/q8H+oOQVt63jczQucwxFnO1chdbrz5HMIIV6A1AnOd7bify6fMXIcASY2XqqWrF/GQqHypUqvV2Uqxyf74NgCrpar4Crlkrp6NgGQvKmAJS53DoYuwGS7i7IkUlLs5/0/yA99wORgf4cksLpUsf7s2iZat/KG+KagaTiQ0/4wlXaEwiJ9v4u2gVgyNEeMdP5D6nsoajIYK7Q+lAc0yS3iwb4tDwgwLItQqh/17r9a9UtEORN+RhS8wFu5xDNRNK0kNobGNH4MJttd+bPcyTKYyLQ+g1rZ+/zDbeYDOQowLItRahwlV20fztwJvyif/eGceCuKpsO/gdnvVK/oU7n4bu/LRboSa2Y2/IKM9of44L/gf/wX/I//Dv4L/sd//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md//Md/e/t9BrV8tw/kKF3JVZM74Rf944tMTEPE0Bwx0vkPqe+hqMngJ+4zH8oDmuQW8WDflgcEGJZFKNWPevdfrfolZsPPiIIXeCuXeCaKppXExlY+iI6UJKMz84/sh+ai9CskgdVQah2tW3kmwr7+RxT5VNohEptDLF3pcq64ymUAxTmuEaVw+4LR1+Es17rMFaL3ydcClM4gwMTmGzWAYlsslKxbtXq11apGvYwQ2xQUteVmDVwNVyuXXJVZM5sOgJb+tqyNsHwCU0U+lg2G1RruIOXCwnEZHcltUQerUMrMWrdGYAaLnIImoIBvsCxN3xD5SvA//uM//uO/4H9nvMSGM6KQa7SMxNUPllW45T3uaiRVl02Hk6qaYlzvZkqfYtkR9uOIfeyvkNrDAWKWQcwHIVVF1ZmqJFWKVbej2mzmHwAl/W/PLg60j/30lpgPkZJim6rT7h8H3u/zst8TF3u/HnS39S9Qtf28p9+hjgdvd5ECFNugKM/0P6JYgVv8Mn7p+71SS59D/Wa5VLGtqtKP/RicPLEMmo79vG8GsdQyHDE2MUTc7raxIgOtgwClsKUz8ArvrLrxBh91BmMj8RQ01DL6ihbRXJRemccYttrM5DzkQbvcuUVpY1683ZW0wp4o+IAv+GzFjU/4RuZZqNVr28M5D6XXZzDarHChi3LPOqVNeX9hVxS8x2erPqPXmouWyYP/Bf87+I//gv8F/wv+x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x3/8x39n2UzDXXfznyRLjZD/O8yZsGnlv+/6n9Rn/zvNMYP28NIixqCtCy4+SGX3Xf8m0JjGz2+8IIlUK8thZn5s8Wslfu4OjIfEh1C/WYzSNyMYnLzSSGwBZdEfRkjd6hH3uZ8QvuMbRpoW7Tjfyffw3Vbb1HfxvdphsAGgpKqkmz3hXvfrLw96zDxAsU3V6Zb9x1fuXbt/lQt9o36hBSxH+uu+jmfdj6GveEH+sDIwjeUF+QupmiRGoMFs1X/uSiqx35CqqrrkZJJQIkdv8JJMaz3wH//x38F/wf/476wWSCGRw22k4jzhWoWrOEVmVLyYweC88Eek4x+koAd6oUsM+Ueu2e6ZLnlMq2/PdJJRv8Fq1rW6NXmv8oQFAIP01z1tZE0MfcIL0iLVM1qQ4iG2+folv/RgzIqt/gesv6yltyEvdj/QsJ/3rfDcILlXsndbpyi1HMLEZ6MYJp/1NklKWfwPqoq03ZX+m4buARrCbHfgq5FIL0PJMV1MktmuLiWnTXivMWqdCX7WdqSPEcZW4dOx4H/8F/yP//gv+B//Bf/jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/47sfGzRSg1XRCd8038CPxnf8wd2E/n43FzM9KDUMt/M/KtUs1+3nfEshsA';
}, 2000);
}

return false;
}

… in a changed colour_code_captcha.js external Javascript helping out the changed colour_code_captcha.htm testing HTML with onsubmit already defined …

Previous relevant Colour Coded Form Captcha Tutorial is shown below.

Colour Coded Form Captcha Tutorial

Colour Coded Form Captcha Tutorial

Are you human?

This is not such a silly question, in the online world. There are ways to access software with no real human intervention among …

  • legitimately
  • usefully
  • unintendedly
  • maliciously

… and if you design a web application looking after details entered by a user, often you want to ensure the processing is being done by a real user, in the first two ways.

Years ago, with this in mind, came CAPTCHA logic …

A CAPTCHA (/ˈkæp.tʃə/ KAP-chə) is a type of challenge–response test used in computing to determine whether the user is human in order to deter bot attacks and spam.

Those ones with the segmented images and you are asked to click in all parts containing a bike, for instance, yours truly finds very tricky. Yes, today’s idea from us is a lot simpler. It just involves …

  • colour coding
  • a Dutch artistic genius … Piet Mondrian …
  • Pixabay‘s access to that genius … thanks, all concerned …
  • a love of simplicity (and mostly, primary colours) …
  • HTML5 canvas element … especially it’s method …
  • getImageData() method

… allowing us to scrutinize image pixel colours at a clicked position. And just in case users are colour blind, we diss any colour names and use background comparison question reasoning in the code.

As seemingly silly as this sounds, it’s insertion into an HTML webpage form element’s onsubmit event logic (and we found out, we needed to force an input type=submit button, if not there), is an extra step to deter processes not being run by a real user accessing the form.

Today, we’ve supplied a really simple parent overseer colour_code_captcha.html example usage (that just writes a personalized (but not gift wrapped, alas) welcome message near the top of the webpage) …


<html>
<head>
<script type='text/javascript' src='//www.rjmprogramming.com.au/colour_code_captcha.js' defer></script>
<script type='text/javascript'>
var fname=location.search.split('fname=')[1] ? decodeURIComponent(location.search.split('fname=')[1].split('&')[0]) : "";
var lname=location.search.split('lname=')[1] ? decodeURIComponent(location.search.split('lname=')[1].split('&')[0]) : "";
</script>
</head>
<body onload="if ((fname + lname).trim() != '' && document.referrer.indexOf('/colour_code_captcha.') != -1) { document.getElementById('welcome').innerHTML='<h2>Welcome to ' + fname + ' ' + lname + ' at ' + ('' + new Date()) + ' ...</h2>'; }">
<div id=welcome></div>
<form data-onsubmit="return onsubmitreturn('');" action='./colour_code_captcha.html' method=GET>
<input style=text placeholder="First name" name=fname type=text></input><br>
<input style=text placeholder="Last name" name=lname type=text></input><br>
<br><input id=mysub type=submit value="Say hello ..."></input>
</form>
</body>
</html>

… of that one external Javascript script tool doing just about all the CAPTCHA work insinuated into the parent webpage’s first such HTML form element found, via colour_code_captcha.js first draft external Javascript you can also try below …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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

Colour Coded Form Captcha Tutorial

Posted on by
Colour Coded Form Captcha Tutorial

Colour Coded Form Captcha Tutorial

Are you human?

This is not such a silly question, in the online world. There are ways to access software with no real human intervention among …

  • legitimately
  • usefully
  • unintendedly
  • maliciously

… and if you design a web application looking after details entered by a user, often you want to ensure the processing is being done by a real user, in the first two ways.

Years ago, with this in mind, came CAPTCHA logic …

A CAPTCHA (/ˈkæp.tʃə/ KAP-chə) is a type of challenge–response test used in computing to determine whether the user is human in order to deter bot attacks and spam.

Those ones with the segmented images and you are asked to click in all parts containing a bike, for instance, yours truly finds very tricky. Yes, today’s idea from us is a lot simpler. It just involves …

  • colour coding
  • a Dutch artistic genius … Piet Mondrian …
  • Pixabay‘s access to that genius … thanks, all concerned …
  • a love of simplicity (and mostly, primary colours) …
  • HTML5 canvas element … especially it’s method …
  • getImageData() method

… allowing us to scrutinize image pixel colours at a clicked position. And just in case users are colour blind, we diss any colour names and use background comparison question reasoning in the code.

As seemingly silly as this sounds, it’s insertion into an HTML webpage form element’s onsubmit event logic (and we found out, we needed to force an input type=submit button, if not there), is an extra step to deter processes not being run by a real user accessing the form.

Today, we’ve supplied a really simple parent overseer colour_code_captcha.html example usage (that just writes a personalized (but not gift wrapped, alas) welcome message near the top of the webpage) …


<html>
<head>
<script type='text/javascript' src='//www.rjmprogramming.com.au/colour_code_captcha.js' defer></script>
<script type='text/javascript'>
var fname=location.search.split('fname=')[1] ? decodeURIComponent(location.search.split('fname=')[1].split('&')[0]) : "";
var lname=location.search.split('lname=')[1] ? decodeURIComponent(location.search.split('lname=')[1].split('&')[0]) : "";
</script>
</head>
<body onload="if ((fname + lname).trim() != '' && document.referrer.indexOf('/colour_code_captcha.') != -1) { document.getElementById('welcome').innerHTML='<h2>Welcome to ' + fname + ' ' + lname + ' at ' + ('' + new Date()) + ' ...</h2>'; }">
<div id=welcome></div>
<form data-onsubmit="return onsubmitreturn('');" action='./colour_code_captcha.html' method=GET>
<input style=text placeholder="First name" name=fname type=text></input><br>
<input style=text placeholder="Last name" name=lname type=text></input><br>
<br><input id=mysub type=submit value="Say hello ..."></input>
</form>
</body>
</html>

… of that one external Javascript script tool doing just about all the CAPTCHA work insinuated into the parent webpage’s first such HTML form element found, via colour_code_captcha.js first draft external Javascript you can also try below …

If this was interesting you may be interested in this too.

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

Colouring In Drag and Drop Mobile Journey Game Tutorial

Posted on by
Colouring In Drag and Drop Mobile Journey Game Tutorial

Colouring In Drag and Drop Mobile Journey Game Tutorial

We needed to considerably change yesterday’s Colouring In Drag and Drop Pseudo Element Content Tutorial “Journey Game” logic to work with mobile platforms, to do with …

  • for “easy” Journey Game options we change size of “mytable” table and hide any bottom 💣 bomb emoji display …

    var mapcontext=null;

    function canvasize() {

    //document.getElementById('xmwr').innerHTML+='<sty' + 'le> tr { height: 1vh; } </sty' + 'le>';
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('xmwr').innerHTML+='<sty' + 'le> td { overflow: hidden !important; } </sty' + 'le>';
    }

    var tryimg=document.createElement('img');
    tryimg.onload=function(e){
    var trrectis=null;
    var divvs=document.getElementById('mytable');
    newcanvas=document.getElementById('mymobilecanvas');

    //newcanvas.height=Math.round(tryimg.height * eval(('' + divvs.style.width).replace('px','')) / tryimg.width);
    newcanvas.width=eval(('' + divvs.style.width).replace('px',''));
    newcanvas.height=eval(0.5 * eval(('' + divvs.style.width).replace('px','')));

    mapcontext=newcanvas.getContext('2d');
    mapcontext.drawImage(tryimg, 0, 0, tryimg.width, tryimg.height, 0, 0, newcanvas.width, newcanvas.height);

    document.getElementById('mytbody').style.height='' + eval(0.5 * newcanvas.width) + 'px';
    document.getElementById('mytable').style.height='' + eval(0.5 * newcanvas.width) + 'px';

    //newcanvas.style.display='block';
    var divvsr=document.getElementById('mytable').getBoundingClientRect();
    var trls=document.getElementsByTagName('tr');
    for (var itrls=0; itrls<trls.length; itrls++) {
    if (('' + trls[itrls].id + ' ').substring(0,2) == 'tr') {
    trrectis=trls[itrls].getBoundingClientRect();
    if (('' + trls[itrls].id) != ('tr' + (across == 3 ? 99 : across)) && eval(eval('' + trrectis.top) - eval('' + divvsr.top)) > eval('' + eval(0.5 * newcanvas.width))) {
    trls[itrls].style.display='none';
    //alert('here ' + trls[itrls].id);
    } //else {
    //document.title='' + eval('' + trrectis.top) + ' - ' + eval('' + divvsr.top) + ' <= ' + eval('' + eval(0.5 * newcanvas.width));
    //}
    }
    }
    };
    tryimg.src='/HTMLCSS/HYP_50M_SR_W.jpg';

    return true;
    }
  • mobile tr (ie. table row) element heights were not constrained … but now are via directing mobile emoji content to cell itself …

    if (navigator.userAgent.match(/iPad/i)) {
    gonto.innerHTML='' + String.fromCodePoint(journeyemoji) + '';
    gonto.innerHTML='<span class=tiny style="font-size:4px;overflow:hidden;">' + String.fromCodePoint(journeyemoji) + '</span>';
    } else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    gonto.innerHTML='' + String.fromCodePoint(journeyemoji) + '';
    gonto.innerHTML='<span class=tiny style="font-size:2px;overflow:hidden;">' + String.fromCodePoint(journeyemoji) + '</span>';
    } else {
    gonto.innerHTML='<span class=tiny style="font-size:6px;">' + String.fromCodePoint(journeyemoji) + '</span>';
    }
  • Javascript popup alert window can be refused by the mobile platform web browsers (thanks to heads up that this can happen), especially if they “just proceed a location.href defining codeline” …

    if (document.getElementById('pensel').value == '128668') {
    journeycount++;
    evs.push(gred(onto));
    //document.title='' + onto.id;
    if (('' + onto.id).indexOf('TD') == 0) {
    if (!decided) {
    decided=true;
    ctyqgoes++;
    documentURL=document.URL;
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    onto.style.backgroundColor='darkred';
    //onto.innerHTL='<span class=tiny style="font-size:6px;background-color:darkred;">' + String.fromCodePoint(128165) + '</span>'; //String.fromCodePoint(128165);
    //document.getElementById('xmwr').innerHTML+='<sty' + 'le> #' + onto.id + "::after { content:'\\01F4A3'; } </sty" + 'le>';
    document.getElementById('xmwr').innerHTML+='<sty' + 'le> #' + onto.id + "::after { content:'\\01F4A5'; background-color: darkred; font-size:12px; } </sty" + 'le>';
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'Boom! ' + String.fromCodePoint(128165) + ' Sorry, we told you it was <font color=darkgreen>h</font><font color=greenyellow>a</font><font color=yellowgreen>z</font><font color=yellow>a</font><font color=pink>r</font><font color=orange>d</font><font color=lightred>o</font><font color=red>u</font><font color=darkred>s</font>?!');
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=' + czero + czero)) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    alert('Boom! ' + String.fromCodePoint(128165) + ' Sorry, we told you it was hazardous?!');
    if (locationhref.indexOf('journey=00') != -1) { locationhref=locationhref.replace('journey=00', 'journey=6'); }
    setTimeout(function(){     location.href=locationhref; }, 3000); //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=' + czero)) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    }
    //}
    }, 3000);
    //return null;
    }
    } else if (eval('' + journeycount) >= eval('' + (across == 3 ? 99 : across))) {
    if (eval(('' + onto.id).substring(2).split('_')[0].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == 1) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;

    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 3000);

    }
    } else if (eval(('' + onto.id).substring(2).split('_')[0].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == (across == 3 ? 99 : across)) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 3000);
    }
    } else if (eval(('' + onto.id).substring(2).split('_')[1].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == 1) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 8000);
    }
    } else if (eval(('' + onto.id).substring(2).split('_')[1].replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'')) == (across == 3 ? 99 : across)) {
    if (!decided) {
    decided=true;
    if (('' + document.getElementById('scy').value) == 'supereasy') {
    ctyqscore++;
    } else if (('' + document.getElementById('scy').value) == 'easy') {
    ctyqscore+=2;
    } else {
    ctyqscore+=3;
    }
    ctyqgoes++;
    document.getElementsByTagName('h1')[0].innerHTML=document.getElementsByTagName('h1')[0].innerHTML.replace('Experimental Drag and Drop', 'You made it! Congratulations! ');
    onto.style.backgroundColor='darkgreen';
    documentURL=document.URL;
    locationhref=(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    if (documentURL.indexOf('?') == -1) { documentURL=documentURL.replace('.php','.php?journey=' + Math.floor(Math.random() * 19878675)); }
    setTimeout(function(){
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    location.href=locationhref;
    } else {
    //setTimeout(function(){
    alert('You made it! Congratulations! ');
    location.href=locationhref; //(documentURL.split('&')[0].split('#')[0].replace('journey=', 'journey=7')) + '&scorej=' + ctyqscore + '&goesj=' + ctyqgoes + '#JourneyReveal';
    //}, 30);
    //return '';
    }
    }, 8000);
    }
    }
    }
    } else {
    evs.push(onto);
    }
  • we needed some extra consideration sharing a “Journey Game” with email or SMS recipients …

    tableohprefixbit=tableohprefixbit.replace(encodeURIComponent(' (where red is nearest danger and you try to navigate between World edges)'), '');
    if (tableohprefixbit.indexOf('?') != -1 && documentURL.indexOf('journey=') == -1 && selem == 128668) {
    tableohprefixbit=tableohprefixbit.replace('?', '?journey=' + Math.floor(Math.random() * 19878675) + '&');
    }
  • we needed less wordiness for the mobile platforms regarding that instructional span element contents …
    <?php

    $changeanyto='width:' . trim(explode(';', explode('width:', str_replace(' (where red is nearest danger and you try to navigate between World edges)','',str_replace('+',' ',urldecode($_GET['tableohprefix']))))[1])[0]) . ';height:' . trim(explode(';', explode('height:', str_replace('+',' ',urldecode($_GET['tableohprefix'])))[1])[0]) . ';';

    ?>

Codewise this needed …

Previous relevant Colouring In Drag and Drop Hazardous Journey Game Tutorial is shown below.

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Back to thinking about Drag and Drop, a lot of the way it works, favours web application game development. You don’t even have to involve the “drop” part of the concept. Just using the “drag” part, and the “ondragover” event, in particular, can be interesting, as we hope you’ve picked up from the work of our current focus, our Colouring In web application.

Long way from just “Colouring In” by now. In actuality it could be “The Drag Show”, but we all know we don’t have the “realia pizzazz” for that title?!

Today, another Reveal option has been added onto the progress of yesterday’s Colouring In Drag and Drop Browse Button CSS Tutorial, which you could call …


Hazardous Journey Game

It involves …

  • map of the world background image … like the other Reveal quizzes and games … and …
  • hidden (like in the minesweeper game) table cells that stop the user in their tracks should they land on them … and …
  • the user can try to start at one World Map edge and try to get to another (over a long enough distance) … following …
  • colour coded Colouring In of table cells (the redder the more imminently dangerous) … as well as …
  • a “hint” system in the “easy” category of play showing these dangerous cells (being as, nobody here is saying anything about this game being easy … but Life Wasn’t Meant to be Easy)

In the PHP parent we capitalize the IDs of dangerous cells …

<?php

for ($thisrow=1; $thisrow<=$across; $thisrow++) {
$cthisrow='0000000000' . $thisrow;
//$rowsofar='<tr id=svgtr' . $thisrow . ' onclick=textbthis(event); style="width:100%;" id=tr' . substr($cthisrow, -$iacross, $iacross) . '></tr>';
$rowsofar='<tr id=tr' . ltrim(substr($cthisrow, -$iacross, $iacross),'0') . ' onclick=textbthis(event); style="width:100%;"></tr>';
//$rowsofar='<tr id=svgtr' . $thisrow . ' style="width:100%;"></tr>';
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$thistdid='td' . substr($cthisrow, -$iacross, $iacross) . '_';
for ($thiscol=1; $thiscol<=$across; $thiscol++) {
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$ibv=rand(0, $across);
if ($ibv < ($across / 11) && (isset($_GET['journey']) || isset($_POST['journey']))) {
$ynftone='td';
$ynfttwo='TD';
$yynftone='one';
$yynfttwo='two';
}
$cthiscol='0000000000' . $thiscol;
$thistdidsuffix='' . substr($cthiscol, -$iacross, $iacross) . '';
$rowsofar=str_replace('></tr>', '><td class="td' . str_replace($yynftone, $yynfttwo, 'one') . '" id=' . str_replace($ynftone, $ynfttwo, $thistdid) . $thistdidsuffix . ' style=text-align:center; data-answer=' . $ttcnt . '></td></tr>', $rowsofar);
}
$newih=str_replace('</tbody>', $rowsofar . '</tbody>', $newih);
}

?>

… and this is used in some new HTML and Javascript basis functionality …


var journeyred='red';

function gred(gonto) {
var dangercount=0;
var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];
var currow=('' + gonto.id).substring(2).split('_')[0];
var curcol=('' + gonto.id).substring(2).split('_')[1];
var jrow=eval('' + currow.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var jcol=eval('' + curcol.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var crow=currow;
var ccol=curcol;
journeyred=bxcols[0]; //bxcols[Math.floor(Math.random() * bxcols.length)];
if (('' + gonto.id).substring(0,2) == 'TD') {
journeyred='darkred';
} else {
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

//document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//if (dangercount != 0) { alert(dangercount); }
journeyred=bxcols[Math.round(dangercount)]; //'darkred';

}
return gonto;
}

Codewise this needed …

Previous relevant Colouring In Drag and Drop Browse Button CSS Tutorial is shown below.

Colouring In Drag and Drop Browse Button CSS Tutorial

Colouring In Drag and Drop Browse Button CSS Tutorial

Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue. One which is always coming up, in this regard, for us is …


input type=file browsing (from underlying operating system files) button

The thing is, as an improvement on yesterday’s Colouring In Drag and Drop Mobile Postcard Tutorial we’re butting up against this issue, because we wanted to make it more obvious for our mobile platform users of our Colouring In web application, that the way in to the functionality whereby they can create and share personalized (online) postcards is via them clicking that input type=file browsing button. And so we went looking for advice and came across this excellent link’s advice that got us to set up the scenario …

<?php

if (preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"])) { // thanks to https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device-in-php
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe onload="jifopen(this);" class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:228px;margin-top:-194px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
} else {
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-178px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
}

?>

… for mobile platforms, where, on opening the HTML iframe linking to this relevant input type=file browsing button we restyle according to …


var cbaconto=null;

function jifopen(iois) {
if (iois != null) {
cbaconto = (iois.contentWindow || iois.contentDocument);
if (cbaconto.document) { cbaconto = cbaconto.document; }
if (cbaconto != null) {
// Thanks to https://www.viget.com/articles/styling-native-file-upload-input-field/
setInterval(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\002709 Postcard \\002709'; } </sty" + 'le>';
setTimeout(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\01F4F7 Take Photo \\01F4F7'; } </sty" + 'le>';
}, 5000);
}, 10000);
}
}
}

… creating a small emoji assisted animation informing of Postcard “Take Photo” possibilities regarding Postcard creation ideas, via a click of this input type=file browsing button.

Codewise this needed …

Previous relevant Colouring In Drag and Drop Mobile Postcard Tutorial is shown below.

Colouring In Drag and Drop Mobile Postcard Tutorial

Colouring In Drag and Drop Mobile Postcard Tutorial

Yesterday’s Colouring In Drag and Drop Postcard Tutorial mentioned two issues with its Postcard creation functionalities that needed further attention …

We have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also …

… and today we look into that a bit more.

Regarding “We have more work to do regarding data limits (even with hashtagging) using mobile platforms” we were finding the “Take Photo” iOS Camera app functionality was producing images of more than 3000×4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn’t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient). So we did some pruning …


var lesserinurl='';

function checkspag() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {
newimg=document.createElement('img');
newimg.onload = function() {
// draw the image onto the canvas
//alert(11);
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (newimg.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(newimg.height * 800 / newimg.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);
} else {
newcanvas.width=newimg.width;
//alert('' + newimg.width + 'x' + newimg.height);
newcanvas.height=newimg.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0);
}
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
document.getElementById('result').innerHTML=lesserinurl;
//document.getElementById('inurl').value=lesserinurl;
//alert(lesserinurl);
//document.getElementById('inurl').blur();
}
newimg.src = document.getElementById('result').innerHTML;
setTimeout(checkspag, 5000);
} else if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {
imdu=document.getElementById('result').innerHTML.trim();
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';
//alert(' #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } ');
if (document.getElementById('ddstyle')) {
if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {
document.getElementById('ddstyle').innerHTML=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
} else {
if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {
//alert('Here');
document.getElementById('dstyle').innerHTML+=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
}
setTimeout(checkspag, 5000);
} else {
setTimeout(checkspag, 5000);
}
}

… using the great HTML5 canvas element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future. We’ll see.

And regarding “we have some text positioning to fix”, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, panned out …


var postcard=false;
var origmytablerect=null;

setTimeout(function(){
origmytablerect=document.getElementById('mytable').getBoundingClientRect();
console.log('356:' + origmytablerect.top);
var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');
if (1 == 1) {
woois.document.write('<html>' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '</html>');
//origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();
//console.log('56:' + origmytablerect.top);
if (eval('' + origmytablerect.top) > 0) {
var wasthetop=0, thespans=woois.document.getElementsByTagName('span');
for (var iispans=0; iispans<thespans.length; iispans++) {
if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {
console.log('10:' + thespans[iispans].outerHTML);
wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());
wasthetop-=eval('' + origmytablerect.top);
thespans[iispans].style.top='' + wasthetop + 'px';
}
}
}
woois.document.getElementById('mytable').style.position='fixed';
woois.document.getElementById('mytable').style.left='0px';
woois.document.getElementById('mytable').style.top='0px';
woois.document.getElementById('mytable').style.zIndex='23';
woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
} else {
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace('<div id="ta' + 'rget">', '<div id="ta' + 'rget" style="position:fixed;top:0px;left:0px;z-index:23;">') + '</html>');
woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="position:fixed;top:0px;left:0px;z-index:23;') + '</html>');
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="margin-top:-150px;z-index:23;') + '</html>');

woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
}
}, 15000);

Only a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis was needed to help out our Colouring In web application’s Postcard production ideas.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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

Colouring In Drag and Drop Pseudo Element Content Tutorial

Posted on by
Colouring In Drag and Drop Pseudo Element Content Tutorial

Colouring In Drag and Drop Pseudo Element Content Tutorial

Our current Colouring In web application project has relied a lot on HTML table, then tbody, then tr (row), then td (table cell) elements, believe it or not, up to today, not requiring any …

  • traditional content (in Javascript DOM, that being the HTML element types with a formalized end tag‘s innerHTML attribute) … eg.

    document.getElementById('td01_01').innerHTML=''; // the first table cell of interest for Colouring In has no content

    … but neither have we been interested in the other …
  • CSS Pseudo-element approach to (shall we say) dynamically display content (eg. the day before yesterday’s Colouring In Drag and Drop Hazardous Journey Game Tutorial‘s Colouring In Drag and Drop Browse Button CSS Tutorial used CSS syntax like …
    <style>

    input[type="file"]::after { content: '\002709 Postcard \002709'; }

    </style>
    ) means by which we could specify table cell content using the Pseudo-element ::after way to add content ✉ Postcard ✉ after existing traditional content … for an example of an HTML element with no formalized end tag … with a formalized end tag it works the same way

… and we’re using both approaches to add emoji interest to our Hazardous Journey Game part of our Colouring In project today.

Is there a worry doing this? Sure, for us, because we want even and miniscularly dimensioned table cells that act a bit like (but are courser than) image pixels related to their tabular hosts. We need to make sure emoji content introduced is small enough to fit into those preordained width and height table cells, and so we designate small CSS property font-size or Javascript DOM [element].style.fontSize to fit these in without causing any ugly overflows.

It’s not a perfect algorithm but as part of today’s “emoji push” as a user drags a “tractor”, or is it a “ship”, pointer across the World Map image, ahead of time we’ve mapped that World Map image to a hidden HTML5 canvas element, and use those ideas we discussed at Region Picker Hover Tutorial to programmatically determine whether the pointer is over sea (use “ship” 🚢 emoji content) or land (use “tractor” 🚜 emoji content) …


var newcanvas=null, mapcontext=null, journeyemoji=128674;

function rgbToHex(r, g, b) { // thanks to https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mousemove
if (r > 255 || g > 255 || b > 255)
throw 'Invalid color component';
return ((r << 16) | (g << 8) | b).toString(16);
}

function canvasize() {

var tryimg=document.createElement('img');
tryimg.onload=function(e){
var divvs=document.getElementById('mytable');
newcanvas=document.getElementById('mymobilecanvas');

newcanvas.height=Math.round(tryimg.height * eval(('' + divvs.style.width).replace('px','')) / tryimg.width);
newcanvas.width=eval(('' + divvs.style.width).replace('px',''));

mapcontext=newcanvas.getContext('2d');
mapcontext.drawImage(tryimg, 0, 0, tryimg.width, tryimg.height, 0, 0, newcanvas.width, newcanvas.height);

//newcanvas.style.display='block';
};
tryimg.src='/HTMLCSS/HYP_50M_SR_W.jpg';

return true;
}

… used within “ondragover” event logic as per …


if (selem == 128506 || selem == 128668) {
if (ev.touches) {
if (ev.touches[0].pageX) {
pos3 = ev.touches[0].pageX;
pos4 = ev.touches[0].pageY;
} else {
pos3 = ev.touches[0].clientX;
pos4 = ev.touches[0].clientY;
}
//console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);
} else if (ev.clientX || ev.clientY) {
pos3 = ev.clientX;
pos4 = ev.clientY;
//console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);
} else {
pos3 = ev.pageX;
pos4 = ev.pageY;
//console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);
}
if (mapcontext) {
//document.title=('x=' + eval(pos3 - ctyqrect.left) + ' and y=' + eval(pos4 - ctyqrect.top));
var myp = mapcontext.getImageData(Math.round(eval(pos3 - ctyqrect.left)), Math.round(eval(pos4 - ctyqrect.top)), 1, 1).data;
var myhex = ('#' + ('000000' + rgbToHex(myp[0], myp[1], myp[2])).slice(-6)).toUpperCase();
if (myhex.substring(0,2) < '#A') { if (journeyemoji != 128674) { journeyemoji=128674; //String.fromCodePoint(128674); // ship //document.title='ship'; } } else { if (journeyemoji != 128668) { journeyemoji=128668; //String.fromCodePoint(128668); // tractor //document.title='tractor'; } } }
}

… and associated “ondragover” event called …


function gred(gonto) {
var dangercount=0;
var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];
var currow=('' + gonto.id).substring(2).split('_')[0];
var curcol=('' + gonto.id).substring(2).split('_')[1];
var jrow=eval('' + currow.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var jcol=eval('' + curcol.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var crow=currow;
var ccol=curcol;
journeyred=bxcols[0]; //bxcols[Math.floor(Math.random() * bxcols.length)];
if (('' + gonto.id).substring(0,2) == 'TD') {
journeyred='darkred';
} else {
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

//document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//if (dangercount != 0) { alert(dangercount); }
journeyred=bxcols[Math.round(dangercount)]; //'darkred';

}
gonto.innerHTML='<span style=font-size:6px;>' + String.fromCodePoint(journeyemoji) + '</span>';
return gonto;
}

… to add to the player’s interest, we’re hoping.

Codewise this needed …

Previous relevant Colouring In Drag and Drop Hazardous Journey Game Tutorial is shown below.

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Back to thinking about Drag and Drop, a lot of the way it works, favours web application game development. You don’t even have to involve the “drop” part of the concept. Just using the “drag” part, and the “ondragover” event, in particular, can be interesting, as we hope you’ve picked up from the work of our current focus, our Colouring In web application.

Long way from just “Colouring In” by now. In actuality it could be “The Drag Show”, but we all know we don’t have the “realia pizzazz” for that title?!

Today, another Reveal option has been added onto the progress of yesterday’s Colouring In Drag and Drop Browse Button CSS Tutorial, which you could call …


Hazardous Journey Game

It involves …

  • map of the world background image … like the other Reveal quizzes and games … and …
  • hidden (like in the minesweeper game) table cells that stop the user in their tracks should they land on them … and …
  • the user can try to start at one World Map edge and try to get to another (over a long enough distance) … following …
  • colour coded Colouring In of table cells (the redder the more imminently dangerous) … as well as …
  • a “hint” system in the “easy” category of play showing these dangerous cells (being as, nobody here is saying anything about this game being easy … but Life Wasn’t Meant to be Easy)

In the PHP parent we capitalize the IDs of dangerous cells …

<?php

for ($thisrow=1; $thisrow<=$across; $thisrow++) {
$cthisrow='0000000000' . $thisrow;
//$rowsofar='<tr id=svgtr' . $thisrow . ' onclick=textbthis(event); style="width:100%;" id=tr' . substr($cthisrow, -$iacross, $iacross) . '></tr>';
$rowsofar='<tr id=tr' . ltrim(substr($cthisrow, -$iacross, $iacross),'0') . ' onclick=textbthis(event); style="width:100%;"></tr>';
//$rowsofar='<tr id=svgtr' . $thisrow . ' style="width:100%;"></tr>';
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$thistdid='td' . substr($cthisrow, -$iacross, $iacross) . '_';
for ($thiscol=1; $thiscol<=$across; $thiscol++) {
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$ibv=rand(0, $across);
if ($ibv < ($across / 11) && (isset($_GET['journey']) || isset($_POST['journey']))) {
$ynftone='td';
$ynfttwo='TD';
$yynftone='one';
$yynfttwo='two';
}
$cthiscol='0000000000' . $thiscol;
$thistdidsuffix='' . substr($cthiscol, -$iacross, $iacross) . '';
$rowsofar=str_replace('></tr>', '><td class="td' . str_replace($yynftone, $yynfttwo, 'one') . '" id=' . str_replace($ynftone, $ynfttwo, $thistdid) . $thistdidsuffix . ' style=text-align:center; data-answer=' . $ttcnt . '></td></tr>', $rowsofar);
}
$newih=str_replace('</tbody>', $rowsofar . '</tbody>', $newih);
}

?>

… and this is used in some new HTML and Javascript basis functionality …


var journeyred='red';

function gred(gonto) {
var dangercount=0;
var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];
var currow=('' + gonto.id).substring(2).split('_')[0];
var curcol=('' + gonto.id).substring(2).split('_')[1];
var jrow=eval('' + currow.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var jcol=eval('' + curcol.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var crow=currow;
var ccol=curcol;
journeyred=bxcols[0]; //bxcols[Math.floor(Math.random() * bxcols.length)];
if (('' + gonto.id).substring(0,2) == 'TD') {
journeyred='darkred';
} else {
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

//document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//if (dangercount != 0) { alert(dangercount); }
journeyred=bxcols[Math.round(dangercount)]; //'darkred';

}
return gonto;
}

Codewise this needed …

Previous relevant Colouring In Drag and Drop Browse Button CSS Tutorial is shown below.

Colouring In Drag and Drop Browse Button CSS Tutorial

Colouring In Drag and Drop Browse Button CSS Tutorial

Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue. One which is always coming up, in this regard, for us is …


input type=file browsing (from underlying operating system files) button

The thing is, as an improvement on yesterday’s Colouring In Drag and Drop Mobile Postcard Tutorial we’re butting up against this issue, because we wanted to make it more obvious for our mobile platform users of our Colouring In web application, that the way in to the functionality whereby they can create and share personalized (online) postcards is via them clicking that input type=file browsing button. And so we went looking for advice and came across this excellent link’s advice that got us to set up the scenario …

<?php

if (preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"])) { // thanks to https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device-in-php
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe onload="jifopen(this);" class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:228px;margin-top:-194px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
} else {
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-178px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
}

?>

… for mobile platforms, where, on opening the HTML iframe linking to this relevant input type=file browsing button we restyle according to …


var cbaconto=null;

function jifopen(iois) {
if (iois != null) {
cbaconto = (iois.contentWindow || iois.contentDocument);
if (cbaconto.document) { cbaconto = cbaconto.document; }
if (cbaconto != null) {
// Thanks to https://www.viget.com/articles/styling-native-file-upload-input-field/
setInterval(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\002709 Postcard \\002709'; } </sty" + 'le>';
setTimeout(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\01F4F7 Take Photo \\01F4F7'; } </sty" + 'le>';
}, 5000);
}, 10000);
}
}
}

… creating a small emoji assisted animation informing of Postcard “Take Photo” possibilities regarding Postcard creation ideas, via a click of this input type=file browsing button.

Codewise this needed …

Previous relevant Colouring In Drag and Drop Mobile Postcard Tutorial is shown below.

Colouring In Drag and Drop Mobile Postcard Tutorial

Colouring In Drag and Drop Mobile Postcard Tutorial

Yesterday’s Colouring In Drag and Drop Postcard Tutorial mentioned two issues with its Postcard creation functionalities that needed further attention …

We have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also …

… and today we look into that a bit more.

Regarding “We have more work to do regarding data limits (even with hashtagging) using mobile platforms” we were finding the “Take Photo” iOS Camera app functionality was producing images of more than 3000×4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn’t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient). So we did some pruning …


var lesserinurl='';

function checkspag() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {
newimg=document.createElement('img');
newimg.onload = function() {
// draw the image onto the canvas
//alert(11);
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (newimg.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(newimg.height * 800 / newimg.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);
} else {
newcanvas.width=newimg.width;
//alert('' + newimg.width + 'x' + newimg.height);
newcanvas.height=newimg.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0);
}
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
document.getElementById('result').innerHTML=lesserinurl;
//document.getElementById('inurl').value=lesserinurl;
//alert(lesserinurl);
//document.getElementById('inurl').blur();
}
newimg.src = document.getElementById('result').innerHTML;
setTimeout(checkspag, 5000);
} else if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {
imdu=document.getElementById('result').innerHTML.trim();
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';
//alert(' #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } ');
if (document.getElementById('ddstyle')) {
if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {
document.getElementById('ddstyle').innerHTML=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
} else {
if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {
//alert('Here');
document.getElementById('dstyle').innerHTML+=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
}
setTimeout(checkspag, 5000);
} else {
setTimeout(checkspag, 5000);
}
}

… using the great HTML5 canvas element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future. We’ll see.

And regarding “we have some text positioning to fix”, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, panned out …


var postcard=false;
var origmytablerect=null;

setTimeout(function(){
origmytablerect=document.getElementById('mytable').getBoundingClientRect();
console.log('356:' + origmytablerect.top);
var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');
if (1 == 1) {
woois.document.write('<html>' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '</html>');
//origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();
//console.log('56:' + origmytablerect.top);
if (eval('' + origmytablerect.top) > 0) {
var wasthetop=0, thespans=woois.document.getElementsByTagName('span');
for (var iispans=0; iispans<thespans.length; iispans++) {
if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {
console.log('10:' + thespans[iispans].outerHTML);
wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());
wasthetop-=eval('' + origmytablerect.top);
thespans[iispans].style.top='' + wasthetop + 'px';
}
}
}
woois.document.getElementById('mytable').style.position='fixed';
woois.document.getElementById('mytable').style.left='0px';
woois.document.getElementById('mytable').style.top='0px';
woois.document.getElementById('mytable').style.zIndex='23';
woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
} else {
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace('<div id="ta' + 'rget">', '<div id="ta' + 'rget" style="position:fixed;top:0px;left:0px;z-index:23;">') + '</html>');
woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="position:fixed;top:0px;left:0px;z-index:23;') + '</html>');
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="margin-top:-150px;z-index:23;') + '</html>');

woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
}
}, 15000);

Only a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis was needed to help out our Colouring In web application’s Postcard production ideas.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Posted on by
Colouring In Drag and Drop Hazardous Journey Game Tutorial

Colouring In Drag and Drop Hazardous Journey Game Tutorial

Back to thinking about Drag and Drop, a lot of the way it works, favours web application game development. You don’t even have to involve the “drop” part of the concept. Just using the “drag” part, and the “ondragover” event, in particular, can be interesting, as we hope you’ve picked up from the work of our current focus, our Colouring In web application.

Long way from just “Colouring In” by now. In actuality it could be “The Drag Show”, but we all know we don’t have the “realia pizzazz” for that title?!

Today, another Reveal option has been added onto the progress of yesterday’s Colouring In Drag and Drop Browse Button CSS Tutorial, which you could call …


Hazardous Journey Game

It involves …

  • map of the world background image … like the other Reveal quizzes and games … and …
  • hidden (like in the minesweeper game) table cells that stop the user in their tracks should they land on them … and …
  • the user can try to start at one World Map edge and try to get to another (over a long enough distance) … following …
  • colour coded Colouring In of table cells (the redder the more imminently dangerous) … as well as …
  • a “hint” system in the “easy” category of play showing these dangerous cells (being as, nobody here is saying anything about this game being easy … but Life Wasn’t Meant to be Easy)

In the PHP parent we capitalize the IDs of dangerous cells …

<?php

for ($thisrow=1; $thisrow<=$across; $thisrow++) {
$cthisrow='0000000000' . $thisrow;
//$rowsofar='<tr id=svgtr' . $thisrow . ' onclick=textbthis(event); style="width:100%;" id=tr' . substr($cthisrow, -$iacross, $iacross) . '></tr>';
$rowsofar='<tr id=tr' . ltrim(substr($cthisrow, -$iacross, $iacross),'0') . ' onclick=textbthis(event); style="width:100%;"></tr>';
//$rowsofar='<tr id=svgtr' . $thisrow . ' style="width:100%;"></tr>';
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$thistdid='td' . substr($cthisrow, -$iacross, $iacross) . '_';
for ($thiscol=1; $thiscol<=$across; $thiscol++) {
$ynftone='youllneverfindthis';
$ynfttwo='youllneverfindthis';
$yynftone='youllneverfindthis';
$yynfttwo='youllneverfindthis';
$ibv=rand(0, $across);
if ($ibv < ($across / 11) && (isset($_GET['journey']) || isset($_POST['journey']))) {
$ynftone='td';
$ynfttwo='TD';
$yynftone='one';
$yynfttwo='two';
}
$cthiscol='0000000000' . $thiscol;
$thistdidsuffix='' . substr($cthiscol, -$iacross, $iacross) . '';
$rowsofar=str_replace('></tr>', '><td class="td' . str_replace($yynftone, $yynfttwo, 'one') . '" id=' . str_replace($ynftone, $ynfttwo, $thistdid) . $thistdidsuffix . ' style=text-align:center; data-answer=' . $ttcnt . '></td></tr>', $rowsofar);
}
$newih=str_replace('</tbody>', $rowsofar . '</tbody>', $newih);
}

?>

… and this is used in some new HTML and Javascript basis functionality …


var journeyred='red';

function gred(gonto) {
var dangercount=0;
var bxcols=['darkgreen','greenyellow','yellowgreen','yellow','pink','orange','lightred','red','darkred'];
var currow=('' + gonto.id).substring(2).split('_')[0];
var curcol=('' + gonto.id).substring(2).split('_')[1];
var jrow=eval('' + currow.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var jcol=eval('' + curcol.replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,'').replace(/^0/g,''));
var crow=currow;
var ccol=curcol;
journeyred=bxcols[0]; //bxcols[Math.floor(Math.random() * bxcols.length)];
if (('' + gonto.id).substring(0,2) == 'TD') {
journeyred='darkred';
} else {
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount++;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

//document.title='TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}
if (document.getElementById('TD' + ('00000000' + eval(1 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(1 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount++;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ccol )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + crow + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//document.title='TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) ;
if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(-2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

if (document.getElementById('TD' + ('00000000' + eval(-2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}
if (document.getElementById('TD' + ('00000000' + eval(2 + jrow)).slice(eval(0 - eval('' + currow.length))) + '_' + ('00000000' + eval(2 + jcol)).slice(eval(0 - eval('' + curcol.length))) )) {
dangercount+=0.5;
}

//if (dangercount != 0) { alert(dangercount); }
journeyred=bxcols[Math.round(dangercount)]; //'darkred';

}
return gonto;
}

Codewise this needed …

Previous relevant Colouring In Drag and Drop Browse Button CSS Tutorial is shown below.

Colouring In Drag and Drop Browse Button CSS Tutorial

Colouring In Drag and Drop Browse Button CSS Tutorial

Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue. One which is always coming up, in this regard, for us is …


input type=file browsing (from underlying operating system files) button

The thing is, as an improvement on yesterday’s Colouring In Drag and Drop Mobile Postcard Tutorial we’re butting up against this issue, because we wanted to make it more obvious for our mobile platform users of our Colouring In web application, that the way in to the functionality whereby they can create and share personalized (online) postcards is via them clicking that input type=file browsing button. And so we went looking for advice and came across this excellent link’s advice that got us to set up the scenario …

<?php

if (preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"])) { // thanks to https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device-in-php
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe onload="jifopen(this);" class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:228px;margin-top:-194px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
} else {
$templategame=str_replace('>Game</button>', '>Colouring In <font style=display:none;>Numbers Guessing Game</font> Game <br><font size=1>... drag <select onchange="document.getElementById(' . "'source'" . ').innerHTML=String.fromCodePoint(mwr(this.value));" id=pensel><option value=128396>pen 🖌</option><option value=9999>pencil ✏</option><option value=128397>crayon 🖍</option><option value=8598>totopleft ↖</option><option value=8599>totopright ↗</option>8624><option value=8624>topandright ↰</option><option value=8625>topandleft ↱</option><option value=8626>bottomandright ↲</option><option value=8627>bottomandleft ↳</option><option value=128506>World Reveal 🗺</option><option value=127754>Rivers 🌊</option><option value=127956>Mountain 🏔</option><option value=127966>Waterfall 🏞</option></select> over canvas to colour in</font></button> <span id=dimageb title="Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you" onclick="event.preventDefault(); woca=window.open(' . "'https://www.google.com/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))" . ';" style="padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;"><iframe class="spag" scrolling="no" data-onload="iifopen(this);" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-178px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe> <input onclick="event.stopPropagation();" id=inurl style=width:420px; onblur="if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . "'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . "'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'" . '); } }" type=url placeholder="Optional linework, postcard, other background image URL or text" value=""></input> <input onclick="event.stopPropagation();" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00></input></span><div id="doverlay" style=display:none;></div><div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>', $templategame); //'', $templategame);
}

?>

… for mobile platforms, where, on opening the HTML iframe linking to this relevant input type=file browsing button we restyle according to …


var cbaconto=null;

function jifopen(iois) {
if (iois != null) {
cbaconto = (iois.contentWindow || iois.contentDocument);
if (cbaconto.document) { cbaconto = cbaconto.document; }
if (cbaconto != null) {
// Thanks to https://www.viget.com/articles/styling-native-file-upload-input-field/
setInterval(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\002709 Postcard \\002709'; } </sty" + 'le>';
setTimeout(function() {
cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type="file"]::after { content:' + "'\\01F4F7 Take Photo \\01F4F7'; } </sty" + 'le>';
}, 5000);
}, 10000);
}
}
}

… creating a small emoji assisted animation informing of Postcard “Take Photo” possibilities regarding Postcard creation ideas, via a click of this input type=file browsing button.

Codewise this needed …

Previous relevant Colouring In Drag and Drop Mobile Postcard Tutorial is shown below.

Colouring In Drag and Drop Mobile Postcard Tutorial

Colouring In Drag and Drop Mobile Postcard Tutorial

Yesterday’s Colouring In Drag and Drop Postcard Tutorial mentioned two issues with its Postcard creation functionalities that needed further attention …

We have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also …

… and today we look into that a bit more.

Regarding “We have more work to do regarding data limits (even with hashtagging) using mobile platforms” we were finding the “Take Photo” iOS Camera app functionality was producing images of more than 3000×4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn’t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient). So we did some pruning …


var lesserinurl='';

function checkspag() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {
newimg=document.createElement('img');
newimg.onload = function() {
// draw the image onto the canvas
//alert(11);
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (newimg.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(newimg.height * 800 / newimg.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);
} else {
newcanvas.width=newimg.width;
//alert('' + newimg.width + 'x' + newimg.height);
newcanvas.height=newimg.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
newcanvas.getContext('2d').drawImage(newimg, 0, 0);
}
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
document.getElementById('result').innerHTML=lesserinurl;
//document.getElementById('inurl').value=lesserinurl;
//alert(lesserinurl);
//document.getElementById('inurl').blur();
}
newimg.src = document.getElementById('result').innerHTML;
setTimeout(checkspag, 5000);
} else if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {
imdu=document.getElementById('result').innerHTML.trim();
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';
//alert(' #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } ');
if (document.getElementById('ddstyle')) {
if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {
document.getElementById('ddstyle').innerHTML=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
} else {
if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {
//alert('Here');
document.getElementById('dstyle').innerHTML+=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(/\ /g,'+') + '); background-repeat:no-repeat; background-size:contain; } ';
}
}
setTimeout(checkspag, 5000);
} else {
setTimeout(checkspag, 5000);
}
}

… using the great HTML5 canvas element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future. We’ll see.

And regarding “we have some text positioning to fix”, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, panned out …


var postcard=false;
var origmytablerect=null;

setTimeout(function(){
origmytablerect=document.getElementById('mytable').getBoundingClientRect();
console.log('356:' + origmytablerect.top);
var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');
if (1 == 1) {
woois.document.write('<html>' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '</html>');
//origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();
//console.log('56:' + origmytablerect.top);
if (eval('' + origmytablerect.top) > 0) {
var wasthetop=0, thespans=woois.document.getElementsByTagName('span');
for (var iispans=0; iispans<thespans.length; iispans++) {
if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {
console.log('10:' + thespans[iispans].outerHTML);
wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());
wasthetop-=eval('' + origmytablerect.top);
thespans[iispans].style.top='' + wasthetop + 'px';
}
}
}
woois.document.getElementById('mytable').style.position='fixed';
woois.document.getElementById('mytable').style.left='0px';
woois.document.getElementById('mytable').style.top='0px';
woois.document.getElementById('mytable').style.zIndex='23';
woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
} else {
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace('<div id="ta' + 'rget">', '<div id="ta' + 'rget" style="position:fixed;top:0px;left:0px;z-index:23;">') + '</html>');
woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="position:fixed;top:0px;left:0px;z-index:23;') + '</html>');
//woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing="0" sty' + 'le="', ' cellspacing="0" sty' + 'le="margin-top:-150px;z-index:23;') + '</html>');

woois.document.getElementsByTagName('h1')[0].style.display='none';
woois.document.getElementsByTagName('h3')[0].style.display='none';
woois.document.getElementsByTagName('h3')[1].style.display='none';
woois.document.getElementsByTagName('h4')[0].style.display='none';
woois.document.getElementById('spancb').style.display='none';
woois.document.getElementById('dsource').style.display='none';
}
}, 15000);

Only a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis was needed to help out our Colouring In web application’s Postcard production ideas.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

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