Robert James Metcalfe Blog

Changed within the thread of blog postings of the recent Google Chart Geo Chart Integration Speech Bubbles Popup Div Hashtag Tutorial was our PHP interfacer web application to …


say


… macOS command line tool for Text to Speech functionality.

Well, yesterday’s Live Captions work with Web Browser Live Captions Primer Tutorial got us to wondering whether Live Captions can be called into play with any of this “Intranet feeling” (ie. say only works on macOS) work.

Our research has us, so far, only working it for …

• non-mobile
• MAMP (ie. local web server)
• macOS
• Google Chrome
• Google Chrome settings allowing
• Accessibility system settings allowing
• macOS version allowing
• macOS device Chip type allowing
• macOS Language and Region … English (US) or English (Canada) … allowing

… means. Ouch?! Today’s consolation prize, anyone? Or perhaps this one? But, nevertheless, we proceed, and yes, Live Captions can get involved with this scenario, and Google Translate can get involved too, which makes it all kind of interesting. Please don’t expect perfection getting the same Text->Speech coming out of the Speech->Text but, as this functionality is coming from a big player, it could well speed up and become more precise over time, but for the meantime we offered a new Live Captions

• does not loop the audio “say” based audio
• plays it at half speed (which we saw gave a better chance for the Live Captions to keep up) …
  
function livecaptionit(ta) {
if (ta.innerHTML.indexOf('data:audio/') != -1) {
if (1 == 1) {
voiceoverit();
setTimeout(function(){
var auds=document.getElementsByTagName('audio');
if (eval('' + auds.length) > 0) {
auds[eval(-1 + auds.length)].playbackRate = 0.5;
auds[eval(-1 + auds.length)].loop=false;
auds[eval(-1 + auds.length)].play();
}
}, 5000);
setTimeout(function(){
var xauds=document.getElementsByTagName('audio');
if (eval('' + xauds.length) > 0) {
xauds[eval(-1 + xauds.length)].playbackRate = 1.0;
xauds[eval(-1 + xauds.length)].loop=true;
}
}, 35000);
} else {
document.getElementById('myaudio').style.display='inline-block';
document.getElementById('myaudiosrc').type='audio/' + ta.innerHTML.split('data:audio/')[1].split(',')[0].split(';')[0];
if (document.getElementById('audioname').value != '') {
document.getElementById('myaudiosrc').src='/' + document.getElementById('audioname').value;
} else {
document.getElementById('myaudiosrc').src=ta.innerHTML;
}
document.getElementById('myaudio').play();
}
}
}

function waitforavideo() {
if (document.getElementById('avideo')) {
if (eval('' + document.getElementById('avideo').innerHTML.split('</spa').length) > 2) {
document.getElementById('result').title='Double click for Live Captions play';
document.getElementById('butresult').style.display='inline-block';
return '';
}
}
setTimeout(waitforavideo, 1000);
}

function checkres() {
if (document.getElementById('result')) {
if (document.getElementById('result').innerHTML.indexOf('data:') == 0) {
document.getElementById('saysub').style.cursor='pointer';
if (!qresfound) {
if (qresdu != document.getElementById('result').innerHTML) {
if (eval('' + document.getElementById('audioname').value.length) > 6) {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (isChrome) {
setTimeout(waitforavideo, 1000);
}
qresdu=document.getElementById('result').innerHTML;
residues.push(qresdu);
tempidues.push('/tmp/' + document.getElementById('audioname').value.substring(0,eval(-6 + eval('' + document.getElementById('audioname').value.length))) + document.getElementById('audioname').value.slice(-6).replace(/\./g, '_macoshelp_' + Math.floor(Math.random() * 10897654) + '.'));
}
qresfound=false;
}
}
}
}
}


… regarding the changed downloadable PHP localhost URL http://localhost:8888/macos_say_record.php you should plonk into the MAMP document root folder.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Popup Div Hashtag Tutorial is shown below.

Back to the main workflow of Google Chart Geo Chart Integration Speech Bubbles Textarea Relative Media Tutorial the day before yesterday’s Window Opener and Parent Conduit Tutorial it becomes apparent working those relative URLs in amongst absolute URLs or data URI references within your Speech Bubble content, today we simulate …

• what we’ve done in the past overlaying the textarea element with a div one … but there is too little room in this project’s scenarios, so …
• we open a new popup with just the div linking content as above via a textarea onclick event modus operandi

… the content “mediarized” as user controlled, via a hashtag system that expands media within that popup div element via more Journal project thinking …

… where hashtags #qrcode and #play and #display and #listen and #embed and #show and #background are hashtag media effect options …

… using …

• the changed latest draft Cartoon creation and email sharing capable PHP web application
• the changed gchartgen.js external Javascript helper
• the changed window_opener_pal.html idea

---

Previous relevant Window Opener and Parent Conduit Tutorial is shown below.

After yesterday’s Google Chart Geo Chart Integration Speech Bubbles Textarea Relative Media Tutorial we come to another “generic detour” we want to attend to.

Yesterday’s relative URL, like …


/responsive_more.jpg


… set us to thinking how such a relative URL cannot work in the scenario …


var woo=window.open('','_blank','top=0,left=0,width=600,height=800');
woo.document.write([content]);


… but if we wrote some HTML to pass on content from the originator …


var woo=window.open('//www.rjmprogramming.com.au/window_opener_pal.html?hcontent=[content]','_blank','top=0,left=0,width=600,height=800');


… should [content] contain one of those such relative URLs we think that could be a different story. So window_opener_pal.html idea …


<html>
<head>
<title>Help RJM Programming Window Open Callers - RJM Programming - March, 2026</title>
<script type=text/javascript>

var hcontent=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('hcontent=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('hcontent=')[1].split('&')[0]) : '';
var functocall=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('functocall=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('functocall=')[1].split('&')[0]) : '';
var vartoref=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('vartoref=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('vartoref=')[1].split('&')[0]) : '';
var elid=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('elid=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('elid=')[1].split('&')[0]) : '';

function checkwop() {
if (window.opener) {
if (hcontent != '') {
document.body.innerHTML=hcontent;
} else if (functocall != '') {
console.warn('hcontent=("" + window.opener.' + functocall + '()).replace(/^undefined/g,"").replace(/^null/g,"")');
eval('hcontent=("" + window.opener.' + functocall + '()).replace(/^undefined/g,"").replace(/^null/g,"")');
if (hcontent == '' && elid != '') {
eval('document.body.innerHTML=("" + window.opener.document.getElementById("' + elid + '").outerHTML.replace(/none\;/g,"block;").replace("parent.getCursor","window.opener.getCursor")).replace(/^undefined/g,"").replace(/^null/g,"")');
}
} else if (vartoref != '') {
eval('hcontent=("" + window.opener.' + vartoref + ').replace(/^undefined/g,"").replace(/^null/g,"")');
if (hcontent == '' && elid != '') {
eval('document.body.innerHTML=("" + window.opener.document.getElementById("' + elid + '").outerHTML.replace(/none\;/g,"block;").replace("parent.getCursor","window.opener.getCursor")).replace(/^undefined/g,"").replace(/^null/g,"")');
}
} else if (elid != '') {
eval('document.body.innerHTML=("" + window.opener.document.getElementById("' + elid + '").outerHTML.replace(/none\;/g,"block;").replace("parent.getCursor","window.opener.getCursor")).replace(/^undefined/g,"").replace(/^null/g,"")');
}
} else if (window.parent != window.self) {
if (hcontent != '') {
document.body.innerHTML=hcontent;
} else if (functocall != '') {
eval('hcontent=("" + window.parent.' + functocall + '()).replace(/^undefined/g,"").replace(/^null/g,"")');
if (hcontent == '' && elid != '') {
eval('document.body.innerHTML=("" + window.parent.document.getElementById("' + elid + '").outerHTML.replace(/none\;/g,"block;").replace("parent.getCursor","window.opener.getCursor")).replace(/^undefined/g,"").replace(/^null/g,"")');
}
} else if (vartoref != '') {
eval('hcontent=("" + window.parent.' + vartoref + ').replace(/^undefined/g,"").replace(/^null/g,"")');
if (hcontent == '' && elid != '') {
eval('document.body.innerHTML=("" + window.parent.document.getElementById("' + elid + '").outerHTML.replace(/none\;/g,"block;").replace("parent.getCursor","window.opener.getCursor")).replace(/^undefined/g,"").replace(/^null/g,"")');
}
} else if (elid != '') {
eval('document.body.innerHTML=("" + window.parent.document.getElementById("' + elid + '").outerHTML.replace(/none\;/g,"block;").replace("parent.getCursor","window.opener.getCursor")).replace(/^undefined/g,"").replace(/^null/g,"")');
}
} else if (hcontent != '') {
document.body.innerHTML=hcontent;
}
}

</script>
</head>
<body onload=checkwop(); id=xxbody>
</body>
</html>


… is like our new see-through “conduit” friend.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Textarea Relative Media Tutorial is shown below.

Back to the main workflow of Google Chart Geo Chart Integration Speech Bubbles Textarea Onblur Tutorial as the day before yesterday’s Google Chart Geo Chart AppleScript Functionality Integration Bug Tutorial we touch on two steps, moving forward …

1. appended …
   

   #say

   … means by which …

   • textarea ondblclick event controlled
   • Intranet feeling
   • window.open popup
   • PHP localhost URL http://localhost:8888/macos_say_record.php
   • using exec to point to
   • underlying macOS and MAMP local Apache/PHP/MySql web server environment command say
   • means to turn Text to Speech

   … users can be offered a continuous Text to Speech execution modus operandi …

2. allow for image, video, audio media (just, so far) relative URL, such as …
   
/responsive_more.jpg

   … hence the “Relative Media” words in the blog posting title … that, if exist, add to the “hardcoding to textarea onclick to left savvy” link logic covering now …

   • YouTube 11 character … link to a YouTube video …
   • YouTube 34 character … link to a YouTube playlist …
   • Spotify 22 character … link to a Spotify playlist …
   • Strings with . and @ … link to a mailto: “a” link means of communication …
   • Strings mainly numerical … link to an SMS: “a” link means of communication
   • Strings starting with “http” or “//” … link to a URL, suiting ones like Wikipedia uses (at this stage)
   • Strings starting with a single “/” … link to a media (so far) relative URL that exists on the RJM Programming domain web server

… featuring in (with thanks to this link) …


var xtypes = ['image/tif', 'audio/x-m4r','audio/wav','audio/x-wav','audio/x-pn-realaudio','audio/x-mpegurl','audio/x-aiff','audio/mpeg','audio/mid',
'audio/basic','audio/ogg','video/x-sgi-movie','video/x-msvideo','video/quicktime','audio/mp3','video/mp4','video/mpeg',
'video/x-la-asf','video/ogg','video/webm','audio/mp4', 'image/jpeg', 'image/jpeg', 'image/png', 'image/gif', 'image/bmp',
'text/html', 'text/html', 'text/html', 'text/javascript', 'text/css', 'text/plain', 'text/xml', 'text/csv',
'application/vnd.ms-word', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/x-php', 'application/pdf', 'IMAGE/pdf',
'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.ms-powerpoint',
'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'video/mp4'];
var xexts = ['.tif','.m4r','.wav','.wav','.ram','.m3u','.aiff','.mp3','.rmi',
'.snd','.ogg','.movie','.avi','.mov','.mp3','.m4v','.mpeg',
'.lsx','.ogv','.webm','.m4a', '.jpg', '.jpeg', '.png', '.gif', '.bmp',
'.htm', '.html', '.htmls', '.js', '.css', '.txt', '.xml', '.csv',
'.doc', '.docx', '.php', '.pdf', '.pdf',
'.pptx', '.ppt',
'.xls', '.xlsx', '.mp4'];
var reluadd='', relulist=[];
var relunlist=[];
var pwind=0, pwinda=[];

async function checkUrlExists(url) { // thanks to https://www.google.com/search?q=can+a+window.open+second+parameter+pointing+to+iframe+name+be+used+to+check+for+existence+of+a+relative+URL+file+on+a+web+server&sca_esv=6b7c40959298e02e&rlz=1C5OZZY_en&sxsrf=ANbL-n5LheO67tq8kUgMIT0WDvjv3n25Rw%3A1774317391889&ei=T-_Baf36Namkvr0P55LamQQ&biw=1440&bih=732&ved=0ahUKEwi93vKut7eTAxUpkq8BHWeJNkMQ4dUDCBE&uact=5&oq=can+a+window.open+second+parameter+pointing+to+iframe+name+be+used+to+check+for+existence+of+a+relative+URL+file+on+a+web+server&gs_lp=Egxnd3Mtd2l6LXNlcnAigAFjYW4gYSB3aW5kb3cub3BlbiBzZWNvbmQgcGFyYW1ldGVyIHBvaW50aW5nIHRvIGlmcmFtZSBuYW1lIGJlIHVzZWQgdG8gY2hlY2sgZm9yIGV4aXN0ZW5jZSBvZiBhIHJlbGF0aXZlIFVSTCBmaWxlIG9uIGEgd2ViIHNlcnZlckgAUABYAHAAeAGQAQCYAQCgAQCqAQC4AQPIAQD4AQGYAgCgAgCYAwCSBwCgBwCyBwC4BwDCBwDIBwCACAA&sclient=gws-wiz-serp
try {
const response = await fetch(url, { method: 'HEAD' }); // Use HEAD to avoid downloading the file
// response.ok is true for status codes 200-299
if (reluadd != '') { relulist.push(reluadd); sofarothers.push(reluadd); sofarurls.push(reluadd); }
reluadd='';
pwind++;
return response.ok;
} catch (error) {
// This catch block handles network errors, not necessarily 404s
if (reluadd != '') { relunlist.push(reluadd); }
reluadd='';
pwind++;
return false;
}
}

function inline_linking(aname) {
var delayis=1000;
pwind=0;
pwinda=[];
// code here from previous work ...
if (relulist.indexOf(pword) == -1 && relunlist.indexOf(pword) == -1 && (pword + ' ').substring(0,1) == '/' && (pword + ' ').indexOf('//') == -1) {
if (pword.indexOf('.') != -1) {
if (xexts.indexOf('.' + pword.split('.')[eval(-1 + pword.split('.').length)].split('#')[0].toLowerCase()) != -1) {
if (xtypes[xexts.indexOf('.' + pword.split('.')[eval(-1 + pword.split('.').length)].split('#')[0].toLowerCase())].indexOf('image/') == 0) {
pwinda.push(pword);
setTimeout(function(){
// Example Usage (for a relative URL file on the same server)
reluadd=pwinda[pwind];
checkUrlExists(reluadd.split('#')[0]).then(exists => { //
console.log(exists ? "File exists!" : "File does not exist.");
});
}, delayis);
delayis+=3000;
} else if (xtypes[xexts.indexOf('.' + pword.split('.')[eval(-1 + pword.split('.').length)].split('#')[0].toLowerCase())].indexOf('video/') == 0) {
pwinda.push(pword);
setTimeout(function(){
// Example Usage (for a relative URL file on the same server)
reluadd=pwinda[pwind];
checkUrlExists(reluadd.split('#')[0]).then(exists => { //
console.log(exists ? "File exists!" : "File does not exist.");
});
}, delayis);
delayis+=3000;
} else if (xtypes[xexts.indexOf('.' + pword.split('.')[eval(-1 + pword.split('.').length)].split('#')[0].toLowerCase())].indexOf('audio/') == 0) {
pwinda.push(pword);
setTimeout(function(){
// Example Usage (for a relative URL file on the same server)
reluadd=pwinda[pwind];
checkUrlExists(reluadd.split('#')[0]).then(exists => { //
console.log(exists ? "File exists!" : "File does not exist.");
});
}, delayis);
delayis+=3000;
}
}
}
} else if (relulist.indexOf(pword) == -1 && relunlist.indexOf(pword) == -1 && (pword + ' ').substring(0,1) == '/' && (pword + ' ').indexOf('//') == 0) {
relulist.push(pword);
}
// code here from previous work ...
}


… incorporated in …

• the changed latest draft Cartoon creation and email sharing capable PHP web application
• the changed gchartgen.js external Javascript helper

… you can try out for yourself below if you like.

---

Previous relevant Google Chart Geo Chart AppleScript Functionality Integration Bug Tutorial is shown below.

After yesterday’s Google Chart Geo Chart Integration Speech Bubbles Textarea Intranet Feeling Tutorial we come to a “generic detour” we need to attend to.

Symptom …
The onhover smarts of the Google Chart Geo Chart suffer when the AppleScript integrations are loaded
Culprit …
We tracked it down to what we used to have … function ggmuchlater() { // thanks to https://dev-answers.com/solutions/3287e028/how-do-i-include-a-javascript-file-in-another-javascript-file if (!document.getElementById('apscr') && !document.getElementById('asue')) { var scriptz = document.createElement("script"); // create a script DOM node scriptz.src = '/apple_script_url.js?left=calc(100% - 60px)&top=2px&emojXi=128220&css=font-size:30px;opacity:0.8;&mustcontain=&'; // set its src to the provided URL document.head.appendChild(scriptz); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead) } } … working with … <script id=apXscr type=text/javascript src="/apple_script_url.js?left=calc(100% - 60px)&top=2px&emojXi=128220&css=font-size:30px;opacity:0.8;&mustcontain=&"></script>
Solution …
function gggmuchlater(evt) { // thanks to https://dev-answers.com/solutions/3287e028/how-do-i-include-a-javascript-file-in-another-javascript-file var scriptz = document.createElement("script"); // create a script DOM node scriptz.src = '/apple_script_url.js?left=calc(100% - 60px)&top=2px&emojXi=128220&css=font-size:30px;opacity:0.8;&mustcontain=&'; // set its src to the provided URL document.getElementById('bitsatend').appendChild(scriptz); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead) globevt=evt; setTimeout(function(){ justplayme(globevt); setTimeout(function(){ if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') != '') { window.location.reload(true); } else { location.href=document.URL; } }, 15000); }, 5000); } … working with, just … <a style="position:fixed;left:calc(100% - 60px);top:2px;cursor: pointer; text-decoration: none;font-size:30px; display: inline-block; background-color: green; border-bottom-right-radius: 85px; opacity: 1;" onclick="gggmuchlater(event);" title="Apple Script snapshot re-execution via macOS Desktop with double click emailing at left and top and double click SMS at bottom right corner only" id="asue">&#x1F4DD;</a>

… and the avoidance of use of document.head.appendChild(scriptz); (at least with a delayed window reload) did the trick to make the Geo Chart onhover functionality start working again, more consistently with …

• changed geo_chart.php Geo Chart
• a changed “external Javascript” apple_script_url.js
• the changed gchartgen.js external Javascript helper

… you can try out for yourself below if you like.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Textarea Intranet Feeling Tutorial is shown below.

Further to yesterday’s Google Chart Geo Chart Integration Speech Bubbles Textarea Onblur Tutorial today’s extension to textarea smarts, potentially, involves …

• textarea ondblclick event controlled
• Intranet feeling
• window.open popup
• PHP localhost URL http://localhost:8888/macos_say_record.php
• using exec to point to
• underlying macOS and MAMP local Apache/PHP/MySql web server environment command say
• means to turn Text to Speech

… allowing users to “cowsay say say” via the changed latest draft Cartoon creation and email sharing capable PHP web application teaming with the changed gchartgen.js external Javascript helper onkeydown keyboard event Javascript code which non-mobile you can try out for yourself below if you like.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Textarea Onblur Tutorial is shown below.

Adding onto yesterday’s Google Chart Geo Chart Integration Speech Bubbles Textarea Onclick Tutorial we’re creeping forward on functionality today, adding to …

1. address bar URL hashtag
2. blind typing … with, today …
3. textarea typing via it’s onblur or onpaste events

… allowing users to “cowsay say” via the changed “third draft” Cartoon creation and email sharing capable PHP web application teaming with the changed gchartgen.js external Javascript helper onkeydown keyboard event Javascript code which non-mobile you can try out for yourself below if you like.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Textarea Onclick Tutorial is shown below.

Onto yesterday’s Google Chart Geo Chart Integration Speech Bubbles Modus Operandi Tutorial within the Speech Bubble text we’ve added textarea onclick logic to detect clicks to the left of words which might describe such link interests such as YouTube video ID 11 character code words.

More detail on this to come via the changed gchartgen.js external Javascript helper onkeydown keyboard event Javascript code which non-mobile you can try out for yourself below if you like.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Modus Operandi Tutorial is shown below.

Onto yesterday’s Google Chart Geo Chart Integration Speech Bubbles Tutorial …

• web browser address bar “hashtag add” modus operandi for potential Google Chart Geo Chart Integration Speech Bubbles via our integration with the cowsay Python API / Command-line tool … today we add the less kludgy …
• non-mobile, ? and & argumented URL, hidden typing option to create Google Chart Geo Chart Integration Speech Bubbles

… via the changed gchartgen.js external Javascript helper onkeydown keyboard event Javascript code …


function gcokd(evt) {
var char = 0;
var kcs=[";".charCodeAt(0),"186","=".charCodeAt(0),"187",",".charCodeAt(0),"188","-".charCodeAt(0),"189",".".charCodeAt(0),"190","/".charCodeAt(0),"191","`".charCodeAt(0),"192","[".charCodeAt(0),"219","\\".charCodeAt(0),"220","]".charCodeAt(0),"221","'".charCodeAt(0),"222"];
var belows=["`","1","2","3","4","5","6","7","8","9","0","-","=","[","]",";","'",",",".","/","\\"];
var aboves=['~','!','@','#','$','%','^','&','*','(',')','_','+','{','}',':','"','<','>','?', '|']
if (nomoreokd) {
//document.title='no';
return true;
}
if (evt.altKey && lastkeymodifier != 'a') {
lastkeymodifier='a';
return true;
} else if (evt.ctrlKey && lastkeymodifier != 'c') {
lastkeymodifier='c';
return true;
} else if (evt.shiftKey && lastkeymodifier != 's') {
lastkeymodifier='s';
char = evt.which || evt.keyCode;
if (kcs.indexOf('' + (evt.which || evt.keyCode)) != -1) {
char=(kcs[eval(-1 + kcs.indexOf('' + (evt.which || evt.keyCode)))]); //.charCodeAt(0);
}
if (char == 46 || char == 8) {
if (okdcommentary != '') {
okdcommentary.substring(0,eval(-1 + okdcommentary.length));
if (('' + location.hash).indexOf('commentary=') != -1) {
if (okdcommentary != '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
} else {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
} else if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
}
} else if (char >= 10) {
console.warn('char=' + char + ' evt.keyCode=' + evt.keyCode + ' evt.which=' + evt.which);
if (belows.indexOf(String.fromCharCode(char)) != -1) {
//alert(56);
char=aboves[belows.indexOf(String.fromCharCode(char))].charCodeAt(0);
//alert(char);
okdcommentary+=String.fromCharCode(char);
//document.title=okdcommentary;
if (('' + location.hash).indexOf('commentary=') != -1) {
location.hash+=encodeURIComponent(String.fromCharCode(char));
} else if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
lastkeymodifier='';
} else if (String.fromCharCode(char) >= 'A' && String.fromCharCode(char) <= 'Z') {
char+=('a'.charCodeAt(0) - 'A'.charCodeAt(0));
okdcommentary+=String.fromCharCode(char);
//document.title=okdcommentary;
if (('' + location.hash).indexOf('commentary=') != -1) {
location.hash+=encodeURIComponent(String.fromCharCode(char));
} else if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
lastkeymodifier='';
}
}
return true;
}
char = evt.which || evt.keyCode;
//document.title='' + char + ' ... ';
if (kcs.indexOf('' + (evt.which || evt.keyCode)) != -1) {
char=(kcs[eval(-1 + kcs.indexOf('' + (evt.which || evt.keyCode)))]); //.charCodeAt(0);
//document.title+='' + char + ' .=. ';
}
if (char == 46 || char == 8) {
if (okdcommentary != '') {
okdcommentary.substring(0,eval(-1 + okdcommentary.length));
if (('' + location.hash).indexOf('commentary=') != -1) {
if (okdcommentary != '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
} else {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
} else if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
}
} else if (char >= 10) {
//document.getElementById('myh3').innerHTML='' + char + ' ' + evt.type;
//var chrCode = char - 48 * Math.floor(char / 48); // thanks to https://stackoverflow.com/questions/1772179/get-character-value-from-keycode-in-javascript-then-trim
//var chr = String.fromCharCode((96 <= char) ? chrCode: char);
//char=chr;
if (lastkeymodifier == 's' && String.fromCharCode(char) >= 'A' && String.fromCharCode(char) <= 'Z') {
char+=('a'.charCodeAt(0) - 'A'.charCodeAt(0));
} else if (String.fromCharCode(char) >= 'A' && String.fromCharCode(char) <= 'Z') {
char+=('A'.charCodeAt(0) - 'A'.charCodeAt(0));
}
if (lastkeymodifier == 's') {
if (belows.indexOf(String.fromCharCode(char)) != -1) {
//alert(56);
char=aboves[belows.indexOf(String.fromCharCode(char))].charCodeAt(0);
//alert(char);
}
}
okdcommentary+=String.fromCharCode(char);
//document.title=okdcommentary;
if (('' + location.hash).indexOf('commentary=') != -1) {
location.hash+=encodeURIComponent(String.fromCharCode(char));
} else if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
location.hash='#commentary=' + encodeURIComponent(okdcommentary);
}
}
lastkeymodifier='';
return true;
}

if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){ if (!nomoreokd) { document.body.onkeydown=function(event){ gcokd(event); } } }, 3000);
}


… which non-mobile you can try out for yourself below if you like.

---

Previous relevant Google Chart Geo Chart Integration Speech Bubbles Tutorial is shown below.

Yesterday’s HTML Canvas Memories Frog Game Speech Bubbles Tutorial kickstarted us into imagining other ways …

• our inhouse integrated cowsay Python API / Command-line tool interfacing … could …
• be used as hashtag based commentary or Speech Bubbles for our inhouse integrations with Google Charts, our “first cab off the rank” trying this idea being the Geo Chart

We honed in on the external Javascript called by many Google Chart integrators with the changed gchartgen.js external Javascript helper’s …


var washerelhis=(('' + document.URL + '#').split('#')[1]) + ' ';
if (decodeURIComponent(washerelhis).indexOf('commentary=') == 0) {
if (decodeURIComponent(washerelhis).indexOf(',') != -1) {
location.hash=location.hash.replace(/\,/g,' ').replace(/\%44/g,'%20');
washerelhis=washerelhis.replace(/\,/g,' ').replace(/\%44/g,'%20');
}
}

setInterval(postlhway, 3000);


… timer function as per …


function postlhway() {
var foundu='';
var rectcg=null;
var prefoundu='';
var herelhis=(('' + document.URL + '#').split('#')[1]);
if (herelhis == washerelhis && washerelhis != '') {
herelhis=(('#' + location.hash + '#').replace('##','#').split('#')[1]);
}
if (herelhis != washerelhis) {
if (decodeURIComponent(herelhis).indexOf('commentary=') == 0) {
if (document.getElementById('ifcom')) {
document.getElementById('ifcom').src='/cowsay.php?viagc=transXparent&inwords=' + (herelhis.substring(('commentary=').length).split('&')[0].replace(/\+/g,'%20'));
} else if (document.getElementById('dpostform') && document.getElementById('myh')) {
rectcg=document.getElementById('myh').getBoundingClientRect();
document.getElementById('dpostform').innerHTML+='<iframe allowTransparency=true id=ifcom src="/cowsay.php?viagc=transXparent&inwords=' + (herelhis.substring(('commentary=').length).split('&')[0].replace(/\+/g,'%20')) + '" frameborder=0 scrolling=no style="background-color:transparent;position:absolute;top:' + eval(-10 + rectcg.bottom) + 'px;left:' + rectcg.left + 'px;width:300px;height:72px;z-index:564;"></iframe>';
} else if (document.getElementById('dpostform') && document.getElementById('chart_div')) {
rectcg=document.getElementById('chart_div').getBoundingClientRect();
document.getElementById('dpostform').innerHTML+='<iframe allowTransparency=true id=ifcom src="/cowsay.php?viagc=transXparent&inwords=' + (herelhis.substring(('commentary=').length).split('&')[0].replace(/\+/g,'%20')) + '" frameborder=0 scrolling=no style="background-color:transparent;position:absolute;top:' + rectcg.top + 'px;left:' + rectcg.left + 'px;width:300px;height:72px;z-index:564;"></iframe>';
}
}
washerelhis=herelhis;
}
if (bimode == -1) {
if (document.getElementById('bkcol')) {
if (('' + document.getElementById('bkcol').style.backgroundImage).toLowerCase().indexOf('url(') != -1) {
foundu='' + ('' + document.getElementById('bkcol').style.backgroundImage).split('(')[eval(-1 + ('' + document.getElementById('bkcol').style.backgroundImage).split('(').length)].split(')')[0].replace(/^\"/g,'').replace(/\"$/g,'').replace(/^\'/g,'').replace(/\'$/g,'');
bimode=2;
prefoundu='+';
}
}
if (bimode == -1) {
if (('' + document.body.style.backgroundImage).toLowerCase().indexOf('url(') != -1) {
foundu='' + ('' + document.body.style.backgroundImage).split('(')[eval(-1 + ('' + document.body.style.backgroundImage).split('(').length)].split(')')[0].replace(/^\"/g,'').replace(/\"$/g,'').replace(/^\'/g,'').replace(/\'$/g,'');
bimode=1;
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
} else {
setInterval(function(){
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
}
}, 2000);
}
} else if (('' + document.body.innerHTML).indexOf('<style> body { background-image:') != -1) {
foundu='' + ('' + document.body.innerHTML.split('<style> body { background-image:')[1].split('}')[0]).split('(')[eval(-1 + ('' + document.body.innerHTML.split('<style> body { background-image:')[1].split('}')[0]).split('(').length)].split(')')[0].replace(/^\"/g,'').replace(/\"$/g,'').replace(/^\'/g,'').replace(/\'$/g,'');
bimode=1;
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
} else {
setInterval(function(){
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
}
}, 2000);
}
} else if (document.getElementById('bitsatend') && ('' + document.getElementById('bitsatend').innerHTML).indexOf('<style> body { background-image:') != -1) {
foundu='' + ('' + document.getElementById('bitsatend').innerHTML.split('<style> body { background-image:')[1].split('}')[0]).split('(')[eval(-1 + ('' + document.getElementById('bitsatend').innerHTML.split('<style> body { background-image:')[1].split('}')[0]).split('(').length)].split(')')[0].replace(/^\"/g,'').replace(/\"$/g,'').replace(/^\'/g,'').replace(/\'$/g,'');
bimode=1;
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
} else {
setInterval(function(){
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
}
}, 2000);
}
} else if (document.getElementById('bitsatend') && ('' + document.getElementById('bitsatend').innerHTML).indexOf('<style> #bkcol { background-image:') != -1) {
foundu='' + ('' + document.getElementById('bitsatend').innerHTML.split('<style> #bkcol { background-image:')[1].split('}')[0]).split('(')[eval(-1 + ('' + document.getElementById('bitsatend').innerHTML.split('<style> #bkcol { background-image:')[1].split('}')[0]).split('(').length)].split(')')[0].replace(/^\"/g,'').replace(/\"$/g,'').replace(/^\'/g,'').replace(/\'$/g,'');
bimode=2;
prefoundu='+';
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
} else {
setInterval(function(){
if (document.getElementById('iagc')) {
document.getElementById('iagc').style.width='1px';
document.getElementById('iagc').style.height='1px';
}
}, 2000);
}
}
}
}
if (foundu != '') {
if (document.getElementById('remail')) {
if (document.getElementById('remail').href.indexOf(encodeURIComponent('bi=')) == -1) {
if (document.getElementById('remail').href.indexOf(encodeURIComponent('#')) != -1 && document.getElementById('remail').href.indexOf(encodeURIComponent('&')) != -1) {
if (3 == 3) {
document.getElementById('remail').href+='' + encodeURIComponent('&#bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')));
if (document.getElementById('remail').href.indexOf('&body=') != -1) {
document.getElementById('rsms').href='sms:&body=' + (document.getElementById('remail').href.split('&body=')[1]);
} else {
document.getElementById('rsms').href+='' + encodeURIComponent('&#bi=') + prefoundu + encodeURIComponent(foundu);
}
} else {
document.getElementById('remail').href=document.getElementById('remail').href.replace(encodeURIComponent('&'), encodeURIComponent('&bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')) + '&'));
if (document.getElementById('remail').href.indexOf('&body=') != -1) {
document.getElementById('rsms').href='sms:&body=' + (document.getElementById('remail').href.split('&body=')[1]);
} else {
document.getElementById('rsms').href=document.getElementById('rsms').href.replace(encodeURIComponent('&'), encodeURIComponent('&bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')) + '&'));
}
}
} else if (document.getElementById('remail').href.indexOf(encodeURIComponent('#')) != -1) {
document.getElementById('remail').href=document.getElementById('remail').href.replace(encodeURIComponent('#'), encodeURIComponent('#bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')) + '&'));
if (document.getElementById('remail').href.indexOf('&body=') != -1) {
document.getElementById('rsms').href='sms:&body=' + (document.getElementById('remail').href.split('&body=')[1]);
} else {
document.getElementById('rsms').href=document.getElementById('rsms').href.replace(encodeURIComponent('#'), encodeURIComponent('#bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')) + '&'));
}
} else {
document.getElementById('remail').href+='' + encodeURIComponent('#bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')));
if (document.getElementById('remail').href.indexOf('&body=') != -1) {
document.getElementById('rsms').href='sms:&body=' + (document.getElementById('remail').href.split('&body=')[1]);
} else {
document.getElementById('rsms').href+='' + encodeURIComponent('#bi=') + prefoundu + encodeURIComponent(foundu.replace('?',encodeURIComponent('?')).replace('?',encodeURIComponent('&')));
}
}
}
}
}
}


… combined with the changed “third draft” Cartoon creation and email sharing capable PHP web application, where it’s hosting is such that a great degree of transparency is applied …

---

Previous relevant HTML Canvas Memories Frog Game Speech Bubbles Tutorial is shown below.

Yesterday’s HTML Canvas Memories Frog Game Drag and Drop Tutorial‘s new Frog mode of use adds to the degree of difficulty, no doubt.

And so, today, we’ve decided maybe some Speech Bubbles unique to each frog can be an additional memory aid. This was the opportunity to involve the great cowsay Python API / Command-line tool which we have written some PHP to integrate with here at RJM Programming. Add to that some Kermit sayings …


var rectc=null;

var cfttoggle=0;
var kermitisms=["It's not easy " + String.fromCharCode(10) + " being green.","Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","Life's like a movie, write your own ending. Keep believing, keep pretending.","Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","Just because you haven't found your talent yet, doesn't mean you don't have one.","If you have to eat two frogs, eat the ugliest one first.","Here's one other thing that I think every person or frog needs to be creative: friends.","I promised " + String.fromCharCode(10) + " me.","Time's fun when you're having " + String.fromCharCode(10) + " flies!","May success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"It's not easy " + String.fromCharCode(10) + " being green","Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here","Life's like a movie, write your own ending. Keep believing, keep pretending","Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me","Just because you haven't found your talent yet, doesn't mean you don't have one","If you have to eat two frogs, eat the ugliest one first","Here's one other thing that I think every person or frog needs to be creative: friends","I promised " + String.fromCharCode(10) + " me","Time's fun when you're having " + String.fromCharCode(10) + " flies","May success and a smile always be yours … even when you're knee-deep in the sticky muck of life",
"it's not easy " + String.fromCharCode(10) + " being green","hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here","life's like a movie, write your own ending. Keep believing, keep pretending","someday we'll find it, the rainbow connection. The lovers, the dreamers, and me","just because you haven't found your talent yet, doesn't mean you don't have one","if you have to eat two frogs, eat the ugliest one first","here's one other thing that I think every person or frog needs to be creative: friends","i promised " + String.fromCharCode(10) + " me","time's fun when you're having " + String.fromCharCode(10) + " flies","may success and a smile always be yours … even when you're knee-deep in the sticky muck of life",
"it's not easy " + String.fromCharCode(10) + " being green.","hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","life's like a movie, write your own ending. Keep believing, keep pretending.","someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","just because you haven't found your talent yet, doesn't mean you don't have one.","if you have to eat two frogs, eat the ugliest one first.","here's one other thing that I think every person or frog needs to be creative: friends.","i promised " + String.fromCharCode(10) + " me.","time's fun when you're having " + String.fromCharCode(10) + " flies!","may success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"- It's not easy " + String.fromCharCode(10) + " being green.","- Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","- Life's like a movie, write your own ending. Keep believing, keep pretending.","- Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","- Just because you haven't found your talent yet, doesn't mean you don't have one.","- If you have to eat two frogs, eat the ugliest one first.","- Here's one other thing that I think every person or frog needs to be creative: friends.","- I promised " + String.fromCharCode(10) + " me.","- Time's fun when you're having " + String.fromCharCode(10) + " flies!","- May success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"- It's not easy " + String.fromCharCode(10) + " being green. -","- Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here! -"
];
var kermitismowners=[];
var kermitismidxs=[];

function cft(inw,xz,yz) {
var ihuh=-1, jhuh=-1;
// cfttoggle=0 onediv =1 twodiv
// https://www.rjmprogramming.com.au/cowsay.php?inwords=well%20yes
// kermitisms[] via kermitismowners[]
if (!rectc) {
rectc=document.getElementById('canvaselement').getBoundingClientRect();
}
//alert('xz=' + xz + ' and yz=' + yz + ' ' + eval(rectc.left + xz) + ',' + eval(rectc.top + yz));
yz=eval(rectc.top + yz);
xz=eval(rectc.left + xz);
if (eval('' + kermitismowners.length) == 0) {
while (eval('' + kermitismidxs.length) < eval('' + kermitisms.length)) {
ihuh=Math.floor(Math.random() * 52);
while (kermitismidxs.indexOf(ihuh) != -1) {
ihuh=Math.floor(Math.random() * 52);
}
kermitismidxs.push(ihuh);
}
}
jhuh=kermitismowners.indexOf(inw);
if (jhuh == -1) {
kermitismowners.push(inw);
}
jhuh=kermitismowners.indexOf(inw);
if (cfttoggle == 0) {
document.getElementById('twodiv').innerHTML='';
document.getElementById('onediv').style.position='absolute';
document.getElementById('onediv').style.top='' + Math.max(0,eval(-80 + yz)) + 'px';
document.getElementById('onediv').style.left='' + Math.max(0,eval(-240 + xz)) + 'px';
document.getElementById('onediv').style.width='300px';
document.getElementById('onediv').style.height='100px';
//document.getElementById('onediv').style.overflowX='hidden';
//document.getElementById('onediv').innerHTML='<iframe src="//www.rjmprogramming.com.au/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 style="position:absolute;top=' + eval(-30 + yz) + 'px;left=' + xz + 'px;width=100px;height:60px;"></iframe>';
document.getElementById('onediv').innerHTML='<iframe src="/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 scrolling=no style="position:absolute;top:' + Math.max(0,eval(-80 + yz)) + 'px;left:' + Math.max(0,eval(-240 + xz)) + 'px;width:300px;height:100px;"></iframe>';
cfttoggle=1;
} else {
//document.getElementById('onediv').innerHTML='';
document.getElementById('twodiv').style.position='absolute';
document.getElementById('twodiv').style.top='' + Math.max(0,eval(-80 + yz)) + 'px';
document.getElementById('twodiv').style.left='' + Math.max(0,eval(-240 + xz)) + 'px';
document.getElementById('twodiv').style.width='300px';
document.getElementById('twodiv').style.height='100px';
//document.getElementById('twodiv').style.overflowX='hidden';
//document.getElementById('twodiv').innerHTML='<iframe src="//www.rjmprogramming.com.au/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 style="position:absolute;top=' + eval(-30 + yz) + 'px;left=' + xz + 'px;width=100px;height:60px;"></iframe>';
document.getElementById('twodiv').innerHTML='<iframe src="/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 scrolling=no style="position:absolute;top:' + Math.max(0,eval(-80 + yz)) + 'px;left:' + Math.max(0,eval(-240 + xz)) + 'px;width:300px;height:100px;"></iframe>';
cfttoggle=0;
}
//window.open('//www.rjmprogramming.com.au/cowsay.php?inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]),'_blank','top=40,left=40,width=100,height=100');

}


… and you have the means to add in that addition Speech Bubble uniquifying functionality in the changed memories.html Memories Game.

---

Previous relevant HTML Canvas Memories Frog Game Drag and Drop Tutorial is shown below.

We’re revisiting the HTML Canvas Memories Game Drag and Drop Tutorial‘s …

• Memories card game … allowing …
• frogs (or toad) images to substitute for the playing card images, as user selected

… the idea arising, again, from my sister’s great frog photographic selection.

This change involved two phases …

1. a phase creating 52 *.jpeg frog images to cover for each of the 52 *.gif playing card images …
2. a software change phase

… in the changed memories.html Memories Game.

---

Previous relevant HTML Canvas Memories Game Drag and Drop Tutorial is shown below.

The Canvas HTML element tag combines with some drag and drop event Javascript logic today with our revised Memories Card Game we first developed some time back with HTML/Javascript Canvas Memories Card Game Primer Tutorial as shown below. In the same line of thinking was yesterday’s HTML Colour Coded Tic Tac Toe Drag and Drop Tutorial.

An HTML5 canvas element can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

Today, with this topic, we’ve focussed on non-mobile platforms with the new drag and drop possibilities, but the old methods, with touch/click, will still work for mobile platforms, and at a later date we may find room for “drag and drop” improvement with the mobile platforms as well … in the fullness of time … given the constraints of economic belt tightening … over the course of the current forward estimates.

So what events, applied directly to the canvas element this time (incidentally, yesterday, this was not the case), were additionally of interest for non-mobile drag and drop functionality (in decreasing order of importance (where the already existant canvas “onclick” event remains the most important))?

• ondragstart=”drag(event)” … where we can differentiate a drag and drop (of the first card chosen) from a click/touch
• onmouseup=”omu(event)” … where we can get the (x,y) of the second card chosen
• onmousemove=”omo(event)” … not really important, but we can show it is a drag and drop up in the HTML h1 wording
• ondragover=”allowDrop(event)” … not called upon for non-mobile
• ondrop=”drop(event)” … not used for non-mobile

And what additional property?

• draggable=”true”

The end result on a non-mobile platform is that two cards separately clicked act very much like a drag and drop. Our drag and drop does not draw the card flopping onto the other, but shows a change in the HTML h1 wording.

Here is a link to some downloadable HTML programming code … rename to memories.html and how it changed for the tutorial below is described at this link.

And you may want to try a memories.htmllive run of this card game that tests your memory, and perseverance, at the very least.

---

Previous relevant HTML/Javascript Canvas Memories Card Game Primer Tutorial is shown below.

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

In today’s tutorial we mainly use the drawImage function to create a webpage where you can play the card game called Memories.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to memories.html

You’ll notice heavy use of the Javascript Math.random() function.

We hope you enjoy this Memories Card Game tutorial live run.

Yes … you’ve reached the end … have a top supportive day full of happy memories!

Stop Press

As of the 5th June 2015 you may notice this game changed to add functionality, and that the live run above might support some drag and drop functionality on non-mobile platforms so you may want to compare this to an old live run for how it worked before this date.

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.

---

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.

---

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

---

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