Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

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

Posted in Photography, Trips | Tagged , , | 34 Comments

SVG Network Digital and Analogue Clock Tutorial

SVG Network Digital and Analogue Clock Tutorial

SVG Network Digital and Analogue Clock Tutorial

The recent SVG Network Clock Primer Tutorial work created …

  • an SVG (text element) based network Digital clock … and today we extend functionality to add …
  • an SVG (circle and line element) based network Analogue clock

… and allow for the SVG text element content also be a tooltip for the SVG circle element via SVG title subelement


<svg width="100%" height="100%" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" onload="init(evt);">
<defs>
<radialGradient id="navyGradient"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="navy"/>
<stop offset="100%" stop-color="purple"/>
</radialGradient>
<radialGradient id="yellowGradient"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="yellow"/>
<stop offset="100%" stop-color="orange"/>
</radialGradient>
</defs>
<text id="sclock" x="30" y="30" fill="green" class="Rrrrr" text-anchor="left">
Time goes here
</text>
<g>
<circle id="cclock" cx="200" cy="200" r="150" fill="transparent">
<title></title>
</circle>
<line id="chour" x1="200" y1="200" x2="200" y2="100" style="stroke:transparent;stroke-width:3" />
<line id="cminute" x1="200" y1="200" x2="340" y2="200" style="stroke:transparent;stroke-width:2" />
<line id="csecond" x1="200" y1="200" x2="200" y2="320" style="stroke:transparent;stroke-width:1" />
</g>
</svg>

referenced via …


var sclock;
var cclock, cclocktitle;
var chour;
var cminute;
var csecond;

function init(evt) {
if (window.svgDocument == null) {
svgDocument = evt.target.ownerDocument;
}
sclock = svgDocument.getElementById("sclock").firstChild;
cclock = svgDocument.getElementById("cclock");
cclocktitle = svgDocument.getElementById("cclock").firstElementChild;
chour = svgDocument.getElementById("chour");
cminute = svgDocument.getElementById("cminute");
csecond = svgDocument.getElementById("csecond");
gettime();
}

function gettime() {
getURL('<?php echo $turl; ?>', showtime);
}

function showtime(rsp) {
var tstmp=rsp.content.split('<')[0];
var hmsbit='';
if (rsp.content.indexOf('<circle') != -1) {
cclocktitle.innerHTML=tstmp;
hmsbit=eachsecond(tstmp.split(' ')[1]);
if (eval(tstmp.split(' ')[1].split(':')[0]) >= 12) {
cclock.style.fill = 'url(#navyGradient)'; // 'navy';
chour.style.stroke = 'white';
cminute.style.stroke = 'white';
csecond.style.stroke = 'white';
} else {
cclock.style.fill = 'url(#yellowGradient)'; // 'yellow';
chour.style.stroke = 'navy';
cminute.style.stroke = 'navy';
csecond.style.stroke = 'navy';
}
chour.setAttribute('x2', hmsbit.split(',')[0]);
chour.setAttribute('y2', hmsbit.split(',')[1]);
cminute.setAttribute('x2', hmsbit.split(',')[2]);
cminute.setAttribute('y2', hmsbit.split(',')[3]);
csecond.setAttribute('x2', hmsbit.split(',')[4]);
csecond.setAttribute('y2', hmsbit.split(',')[5]);
}
if (document.URL.indexOf('analogue=') != -1) {
sclock.data = ''; //rsp.content.split('<')[0];
} else {
sclock.data = tstmp; //rsp.content.split('<')[0];
}
setTimeout('gettime()', 1000);
}

… all changes regarding the svg_clock.php of SVG Network Clock web application of …


Previous relevant SVG Network Clock Primer Tutorial is shown below.

SVG Network Clock Primer Tutorial

SVG Network Clock Primer Tutorial

Another approach to a Digital Clock web application is off and running today, reminiscent of some of the concepts in Digital Clock Styling for Daylight Saving Tutorial. Today’s difference though is a significant one involving …

… and we’d like to thank The PHP Anthology (Volume II: Applications) by Harry Fuecks (ISBN: 0-9579218-4-5) for the inspiration of methodologies used. We are encouraged to move on from this “proof of concept” beginning because we are enthusiastic to build on the very simple SVG text element beginnings with more advanced work in future blogs.

Feel free to try it yourself here or look below at (initially) a GMT digital clock …


Previous relevant Digital Clock Styling for Daylight Saving Tutorial is shown below.

Digital Clock Styling for Daylight Saving Tutorial

Digital Clock Styling for Daylight Saving Tutorial

The Daylight Saving Time web application we talked about with Daylight Saving Time TimeZone Emoji Tutorial starts out showing a digital clock displaying the time at various Timezone Places around the world. It occurred to us, this morning, looking over at the alarm clock (also digital) that it would be interesting to recreate that look, at least a bit. But what immediately seemed appealing was not any photography or media based work, but the really simple CSS idea to make use of …

  • HTML table elements containing …
  • two tr row elements per numeral (or digit) of time to define … each row containing a …
  • single td cell with the content &nbsp; (ie. non-breaking space) … but working to define the numbers via the correct combinations of use of …
    1. style=’border-top:28px solid red;’
    2. style=’border-bottom:28px solid red;’
    3. style=’border-left:28px solid red;’
    4. style=’border-right:28px solid red;’

    … for all the td cells involved

… reminding me of how incredible it is that just a few lines can be used by artists to have a viewer know exactly what they were depicting. More with faces, mind you, but even so, is an interesting part of how our brains work.

The code changes just involve a new array in the Javascript as per …


var dcborder=[
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid transparent;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid transparent;border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-top:28px solid red;border-left:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-top:28px solid red;border-right:28px solid red;border-bottom:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid transparent;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid transparent;border-right:28px solid red;border-top:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;'> </td></tr><tr><td style='border-right:28px solid red;border-top:28px solid red;border-bottom:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;'> </td></tr><tr><td style='border-right:28px solid red;border-top:28px solid red;border-bottom:28px solid red;border-left:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-top:28px solid red;border-right:28px solid red;'> </td></tr></table>"
];

… and modified code that writes out the digital clock numerals …


function dc(chuh, subclass) {
var retval="";
if (subclass == 'hour' && chuh.length == 1) chuh='0' + chuh;
for (var iy=0; iy<chuh.length; iy++) {
if (document.URL.indexOf('dcviaborder=') != -1) {
retval+='<td>' + dcborder[eval('' + chuh.substring(iy, eval(1 + iy)))] + '</td>';
} else {

retval+='<td><h1 class="a' + chuh.substring(iy, eval(1 + iy)) + ' ' + subclass + '"></h1></td>';
}
}
return retval;
}

… and the HTML means by which the user can toggle between the two digital clock looks


<h1 align='center'>Daylight Saving Time Information <a style='text-decoration:underline;cursor:pointer;' onclick=" if (document.URL.indexOf('dcviaborder=') != -1) { location.href=document.URL.replace('dcviaborder=','dcviaXborder='); } else { location.href=(document.URL + '&dcviaborder=y').replace('.html&','.html?'); }" title="Toggle look of Digital Clock">&#128158;</a> RJM Programming - September, 2015</h1>

You can see this new digital clock look and contrast it to the old digital clock look with the changes we made to daylight_saving_time.html for your perusal.


Previous relevant Daylight Saving Time TimeZone Emoji Tutorial is shown below.

Daylight Saving Time TimeZone Emoji Tutorial

Daylight Saving Time TimeZone Emoji Tutorial

The last time we added a change to our Daylight Saving TimeZone Information web application was during our Other Side of the World Google Chart Tutorial work, and then, so many things were going on with interfacing and integration we didn’t really revisit the Daylight Saving TimeZone Information web application for itself, as it is so good to do every now and then to …

  • incorporate new things you’ve learnt
  • check on functionality that has fallen by the wayside (or, sin of all sins, never got to the wayside)

Our recent perusals around the “wooooooooorrrrllldd” of CSS3 reminded us of the power of CSS Selectors, especially the ones that came in with CSS3. The “two out of three” that we use today are described on today’s tutorial picture as well as we’d want to do here … so here goes …

Featuring
CSS3 Selectors for element attributes
^= (starts with)
*= (contains)
$= (ends with … not used)
Thanks to

//www.webreference.com/authoring/css3/index.html

When you try to memorize syntax do you look for “linkages”? Yes, you can find anything on the net. But seriously, this CSS syntax can be remembered because it uses the characters of a lot of RegEx wildcarding systems. Another kind of “linkage” we saw between this CSS(3) Selector functionality, and where it would be useful, was that we’d noted that TimeZone identifiers have a name, and generally they take a form …


Region/Placename

… and that Region (plus or minus the “/“) felt to us like a good candidate for functionality enhancement via the CSS(3) Selectors above. You can judge for yourself way below, or by clicking today’s tutorial picture.

Three other “popular” items around here, featuring, today, are …

  • emojis (some of which were multiple and so we wish to rethank Iemoji (multiple HTML entity information) and FileFormat Information (normal HTML entity information) and Emojipedia (finding them) for these emoji lookups, as well as the CSS syntax help from this webpage (needed, because, unbelievable to us, we’d only ever done this with Javascript, in the past)), and their role to help internationalization of your web applications, and to add a bit of colour, and cuteness
  • HTML element alt attribute when a data busy HTML select element option tag (the tag that we get most satisfaction from, making busy … it has to be said) is already using …
    1. title
    2. value
    3. text (or innerHTML)

    … and you come along later not wanting to clobber any good logic looking for another “data place” to populate with your new “data item” (of interest) … well, that could be the “oft neglected except perhaps with the HTML img tag” alt attribute

  • CSS selector :before

Apart from that alt logic above the changes we made to daylight_saving_time.html amounted to changes adding in new CSS(3) Selectors (that just happen … the joy of CSS, we guess) …


<style>
a[title*="Africa/"]:before { content: '\01f30d' }
a[title*="Europe/"]:before { content: '\01f4b6' }
a[title*="America/"]:before { content: '\01f30e' }
a[title*="Asia/"]:before { content: '\01f30f' }
a[title*="Australia/"]:before { content: '\01f1e6\01f1fa' }
a[title*="Indian/"]:before { content: '\01f1ee\01f1f3' }
a[title*="Pacific/"]:before { content: '\01f3dd' }
a[title*="Arctic/"]:before { content: '\01f1ec\01f1f1' }
a[title*="Antarctica/"]:before { content: '\01f1e6\01f1f6' }
a[title*="Atlantic/"]:before { content: '\01f30a' }
option[value*="Africa"]:before { content: '\01f30d' }
option[value*="Europe"]:before { content: '\01f4b6' }
option[value*="America"]:before { content: '\01f30e' }
option[value*="Asia"]:before { content: '\01f30f' }
option[value*="Australia"]:before { content: '\01f1e6\01f1fa' }
option[value*="Indian"]:before { content: '\01f1ee\01f1f3' }
option[value*="Pacific"]:before { content: '\01f3dd' }
option[value*="Arctic"]:before { content: '\01f1ec\01f1f1' }
option[value*="Antarctica"]:before { content: '\01f1e6\01f1f6' }
option[value*="Atlantic"]:before { content: '\01f30a' }
option[alt^="Africa/"]:before { content: '\01f30d' }
option[alt^="Europe/"]:before { content: '\01f4b6' }
option[alt^="America/"]:before { content: '\01f30e' }
option[alt^="Asia/"]:before { content: '\01f30f' }
option[alt^="Australia/"]:before { content: '\01f1e6\01f1fa' }
option[alt^="Indian/"]:before { content: '\01f1ee\01f1f3' }
option[alt^="Pacific/"]:before { content: '\01f3dd' }
option[alt^="Arctic/"]:before { content: '\01f1ec\01f1f1' }
option[alt^="Antarctica/"]:before { content: '\01f1e6\01f1f6' }
option[alt^="Atlantic/"]:before { content: '\01f30a' }
</style>

You can see these predominantly CSS styling changes for yourself at this live run link.


Previous relevant Other Side of the World Google Chart Tutorial is shown below.

Other Side of the World Google Chart Tutorial

Other Side of the World Google Chart Tutorial

Google Charts provides great chart tools for various purposes. We already use the Map Chart heavily with our “Other Side of the World” recent web application we last talked about below with Other Side of the World Continents and Countries Tutorial. This is no surprise given the geolocation and positioning and mapping aspects to the project. But also apt is the …

  • Geo Chart which displays nominated countries and/or regions on a world map … and we also thought it would be good to call on a …
  • Bar Chart can display Great Circle distances between places the user identifies during an execution of the “Other Side of the World” web application session

Over time you get a feeling for what Google Chart suits what scenario of data arrangements. Perhaps, here it would be instructional to read Google’s miscellaneous examples if you are wondering what is possible with this great software suite. We interface to many of these charts here at this blog and to read through these you could visit this link.

Today, as far as this “feel” goes, we’d like to admire how the Google Chart “way” of being housed in an HTML div element leads itself to scaling ready for smaller format devices, so long as you, the coder above, “play the game” so to speak, trying to specify percentage values for HTML element width properties where possible. This came to play with today’s Google Chart Bar Chart “fitting in” with right column table cell (td) widths with today’s “Other Side of the World” web application.

These two code files were involved in these changes …

  1. other_side_of_the_world.htm (changed in this way) … and you can try a live run or Seattle live run
  2. tz_places.php (changed this way)

As per usual, we encourage you to try the web application, and compare the goings on with code, and a good web inspector tool.


Previous relevant Other Side of the World Continents and Countries Tutorial is shown below.

Other Side of the World Continents and Countries Tutorial

Other Side of the World Continents and Countries Tutorial

Today, as with WordPress 4.1.1’s Other Side of the World Continents and Countries Tutorial, we came across a scenario where there was a tiny advantage being Australian, in that our “Continent Name” equals our “Country Name” … which I suppose you could argue for Antarctica, maybe?!

We were amused by this at school, and now have the first real world “application” of this in that today’s task, much harder than we thought it would be, was, with our “Other Side of the World” web application (we last talked about with Other Side of the World Timezone Tutorial as shown below) to link the two bigger data sets up the top of the list of three datasets going on with our application …

The Weather Underground tends to talk about Placenames and their Country Names whereas the PHP TimeZones tend to link Placenames with Continent (or region) Names … and the missing link between these two talking to each other a good percentage of the time involves the PHP’s getLocation() functionality we’ve talked about before as a method for the DateTimeZone class, along with some 2 character ISO Country code information you can read more about at //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name.

Making this link has lots of benefits …

  • our “closest to” lists now have more data to call on (supplementing the last of those datasets above) … and …
  • we can now allow for searches by Country on that top HTML select (dropdown) element …
  • we can fill in more specified places now that we can add in a Country so often and often reach a point with the Weather Underground scrutiny where there is only one returned value, at which point, some days ago, we added logic to say just go and display this on the Map Chart and the rest straight away to save some time
  • people tend to think of a Country when they think of a place, at least on dry land, that is.

An unusual code threesome were involved in these changes …

  1. other_side_of_the_world.htm (changed in this way) … and you can try a live run or Johannesburg live run
  2. daylight_saving_time.html (changed this way)
  3. tz_places.php (changed this way)

… that last one getting a new calling method just for this purpose of …

  • take a placename
  • take its inputted Continent (or region) Name … and …
  • have the supervisory codes send to tz_places.php a $_GET[] call for the purpose of …
  • using getLocation() functionality find a 2 character ISO Country Code … and …
  • link this to a full Country Name via various arrays we have in the PHP … and finish off by …
  • sign off the PHP (in an HTML iframe element) by changing relevant fields in top.document or parent.document DOM HTML elements via a simple HTML body onload event method of making those changes and exiting the called PHP … allowing for …
  • supervisors pick up their usual logic flows once we have a Placename,CountryName textbox scenario going

Of course “Australia” the continent name being the same as “Australia” the country name saves so much time I’ll think I’ll have that cup of coffee now. See ya!


Previous relevant Other Side of the World Timezone Tutorial is shown below.

Other Side of the World Timezone Tutorial

Other Side of the World Timezone Tutorial

We’ve got a lot of “where” functionality mixed in with “when” functionality with our “Other Side of the World” web application. To us, the easiest way to link “where” and “when” in the world is the concept of Earth’s timezones. We spent a lot of time looking into this with the blog thread ending with TimeZone Country Places Data Tutorial and then it went through another makeover when we tackled its integration into the Weather Underground API inspired blog postings culminating in Weather API via Iframe jQuery Ajax AutoComplete Tutorial

Reading down that first blog posting thread to its “Primer Tutorial”

Into the mix of the logic here, we need to venture into the world of two letter ISO Country Codes, and we work this with help from //php.net/manual/en/datetimezone.getlocation.php and //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name and //php.net/manual/en/function.timezone-identifiers-list.php and //www.timezoneconverter.com/ to “hardcode” our HTML select “dropdown” elements we create in the process, and offer TimeZone information HTML select “dropdown” elements as well.

… you can see how good PHP is, natively, with timezones, and how approachable all this is for all PHP programmers … exciting stuff!

And there’s another series of blog postings culminating in HTML/PHP Timezone Feed Function Keys Tutorial involved in this same realm of thinking, that we use today (as with WordPress 4.1.1’s Other Side of the World Timezone Tutorial), along with the … you guessed it … Client Pre-emptive Iframe technique approaches to making use of what it helps with. Integrating “what it helps with” is quite interesting, and quite “Ajax”y in its ways. We call its supervisory web application into a new HTML iframe element of our “Other Side of the World” web application and pluck out only its initial “Digital Clock” HTML table display, and transfer that HTML table and its modified CSS styling over into a new HTML div element within the “Other Side of the World” web application, initially style “display:none;” but capable of being called into play via the user selecting an “Hour Time of the Day” value of interest, that causes the iframed daylight_saving_time.html (changed this way).

What the user sees/does to use this new functionality looks like …

  • they see the “Hour of the Day” dropdown
  • they select an “Hour of the Day” value of interest … in today’s tutorial picture, here in AEST Australia (around about 8pm) we chose “07am”
  • the “Digital Clock” flashes random current times of day from around the “TimeZone Places World” and when it lobs onto the first matching time between 07am and 08am (exclusive) …
  • that matching “TimeZone Place” is copied into the “Other Side of the World” Place textbox … and …
  • the “Weather Underground” (autocomplete) database is scrutinized for a match, and if so …
  • the Map Chart shows the matched place as the base position along with its “Other Side of the World” counterpart, allowing for Google Chart click/touch (its “select”) event logic to allow for other functionalities that include a Weather link and TimeZone information (with a current time of day) … along with the …
  • usual “packdrill” for TimeZone Places iframe table cell and YouTube API Embedded iframe table cell in the (now) bottom row of the “Other Side of the World” (big) table element

The code for these TimeZone integration changes, building on yesterday’s Other Side of the World Map Chart Styling Tutorial, remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of additional TimeZone functionalities today) if you like, or want to try out (or try out for a specific (argument) location, such as Tokyo try out), again. The Client Pre-emptive Iframe reading and use of PHP continues today, making great use of its TimeZone code talents.


Previous relevant Other Side of the World Map Chart Styling Tutorial is shown below.

Other Side of the World Map Chart Styling Tutorial

Other Side of the World Map Chart Styling Tutorial

You’ll have noticed with our “Other Side of the World” web application of recent days … or maybe not, if you were dozing off … how much use we make of the Google Charts Map Chart functionality. Can’t do without it … thanks, Google.

Now if you go to read about the Google Chart Map Chart you may end up at this very interesting webpage, and even if it was some time back you were last there, it is always worth checking back in every now and then for information on changes, or to reread this functionality rich software suite documentation. We only touch the “tip of the iceberg” with the way we interface to Google Charts, but today we want to take some small steps to improving on that. Even taking small steps, when dealing with a third-party product so rich in possibilities, we try to be generic and be able to offer more to those adventurous users out there, both laptop and mobile (at least iPad only at this stage) users.

So we have set up a way for iPad users using the mobile app to be able to save their comma prefixed …

  • localized Google Chart Map Chart styling ideas from here when they interactively enter Map Chart criteria … and for …
  • all users of our “Other Side of the World” web application get an additional non-default Google Chart Map Chart “Styled Map” tab (in addition to their default “Map” and “Satellite” tabs), and some non-default Google Chart Map Chart icons … thanks to Icons-Land here

The new icons for that latter scenario also feature a different icon showing after a “pin” icon is selected (ie. the Google Chart click/touch “select” event is called into play).

The code for these Map Chart changes remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of Google Chart Map Chart purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Beijing try out), again. The major changes related to in the Google Chart Map Chart web application PHP you could call map.php, and which changed in this way, starting down our long path towards more Map Chart styling possibilities.


Previous relevant Other Side of the World Iframe Tutorial is shown below.

Other Side of the World Iframe Tutorial

Other Side of the World Iframe Tutorial

Our “Other Side of the World” web application we’ve been developing lately has made extensive use of the HTML iframe element, mainly as a “reader” of data in that Client Pre-emptive Iframe technique way. But the HTML iframe element is probably better known for its data integration and display talents, and it is these that we call upon today, to (software) integrate two other existing sources of data so that, display-wise we have four table (td) cells in play now those being the original …

We now think the use of all this can have you hopping around the world discovering lots of geographical based, video based and timezone based information about lots of places around the world, lots of which you may never have known much about.

We’ve software integrated today, as well as integrated “where” web application thoughts with “when” web application thoughts.

Another feature of today’s changes involves the geolocation features of the Javascript …


navigator.geolocation.getCurrentPosition(success[, error[, options]])

… syntax method of allowing Location Services, if allowed by the user, return a latitude and longitude position of the user themselves, information used at the instigation of the web application, and which we also used with HTML/Javascript Where Does It Get Me To Primer Tutorial and Google Chart Map Chart Select Event Primer Tutorial in the past.

The code for this remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our HTML iframe (software) integration purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Alice Springs try out), again. It also required small changes to …

We hope you try it out and discover some new things!


Previous relevant Other Side of the World Onblur Tutorial is shown below.

Other Side of the World Onblur Tutorial

Other Side of the World Onblur Tutorial

The onblur event in web programming is a very important event regarding interactive keyboard entries made by the user. We base new functionality, today, with our “Other Side of the World” web application, by allowing a user who enters in their own “place” information, can have that information filtered through the same “autocomplete” database provided by the wonderful Weather Underground and its great API service.

When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the onkeyup keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box … hence the onblur event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same …

  • placename
  • country … linked to …
  • latitude
  • longitude

… fields as talked about yesterday when we presented Other Side of the World Places Tutorial as shown below.

So that’s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting Weather API via Iframe jQuery Ajax AutoComplete Tutorial from some time back, the changes for which we’ll explain later.

Again we call on Client Pre-emptive Iframe techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.

The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our onblur event purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Darwin try out), again. It also required small changes to …


Previous relevant Other Side of the World Places Tutorial is shown below.

Other Side of the World Places Tutorial

Other Side of the World Places Tutorial

A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like …

  1. Sun Angle at noon
  2. Moon Angle at noon
  3. Coriolis Effect
  4. Distance between Geographical Locations
  5. Weather at Geographical Location

… and that we eventually added some “placename” capabilities to all this, introduced with PHP/Javascript/HTML Sun Angle Tutorial, which harnessed all this useful goodwill of this useful webpage (thanks) publishing some placename geographicals data.

  • placename
  • country … linked to …
  • latitude
  • longitude

… and that we “channel” today, via our beloved Client Pre-emptive Iframe techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added “placename” functionality to our “Other Side of the World” web application we started presenting yesterday with Other Side of the World Primer Tutorial as shown below.

Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an onclick event (after an onchange event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the …

  • placename (, country) (Great Circle Distance in km away)
  • latitude
  • longitude

… HTML input type=text and type=number fields automatically. In the normal case of events in non-Firefox web browsers an onchange event change of value to a non-nothing value just causes that select element value to be one of the places shown on the Google Charts Map Chart that we display.

The default is to show five of the nearest placenames in the derived list, but a “+” button can increase that number of “nearest”s as required.

The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our purposes today) if you like, or want to try out, again perhaps?


Previous relevant Other Side of the World Primer Tutorial is shown below.

Other Side of the World Primer Tutorial

Other Side of the World Primer Tutorial

Today we’ve written a first draft of an “Other Side of the World” web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user …

  • the position of the place that they enter in for their latitude and longitude … as well as …
  • “the other side of the world” to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location

Is this our “sister” location? Am not sure. But somebody was telling “Porkies” to me as a child where we were told “China” as being on the other side.

The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.html if you like, or want to try out.

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.

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

Worldbank API and Looks Nice Debugging Styles Tutorial

Worldbank API and Looks Nice Debugging Styles Tutorial

Worldbank API and Looks Nice Debugging Styles Tutorial

Back on the way to Worldbank API Comparison Year More Indicators Tutorial with the recent “makeover start” we had occasion to, with …

And yes, on that last item you may remember with Looks Nice Nearby Speech to Text Game Video Tutorial a theory we had …

navigation reversal fixes in wls_vs_php.htm (calling colour_wheel.html) needing to add new codeline to terminate Javascript activity (used for the first time that we can remember, ever, and thanks to this webpage)) to stop colour_wheel.html click navigation reversals …

… an idea that did seem to help with Safari but did not seem to fix the “navigation reversal” feelings on Google Chrome, to the extent that the word “furphy” springs to mind. So we continued for half a day, without success, on different “stop Javascript” strategies, with no success. And then we stumbled onto …


Google Chrome's View -> Developer -> Developer Tools and its Source tab (or panel)

… and a combination of surprise, investigation and programmer’s “aaaaaaaaahhhhh” ensued, for us. A lesson in blinkered thinking to …

  • limit scope of looking for problem to …

    … bad … and …

  • limit scope of looking to the timing of the problem, but on odd occasions the problem can be to do with the precursors to that problem

… and so we found …

  • the “grandparent” PHP changed PHP code of speech_supervisor.php with its live run … now works better with these tiny changes …
  • regarding that “grandparent”‘s textbox’s “onblur” event origins of the navigation (that you can see, and resulted to us tweaking to, with today’s tutorial picture, in that we had forgotten to check for non essential “onblur” event logic repeats when clicking on that right hand table cell (in the “grandparent”‘s view of the woooooorrrrrrllllldddd) … as per new …

    var lastval=''; // global variable

    … now gets used with the “grandparent”‘s (associated) textbox’s “onblur” event logic changes

    onblur="if (this.value.length > 0 && this.value != lastval) { if (1 == 1) { placeme(this.value); } else { thisresult=this.value + resultsuffix; } }"

    … and then variable lastval gets it’s new value at …

    function placeme(pwhere) {
    if (pwhere != '') {
    lastval=pwhere;
    // rest of logic
    }
    }

    … ensuring double “onblur” event logic executions are avoided

We think hard and fast debugging style methodology thinking can be a bit restrictive, when you consider the contrast between these two (perfectly acceptable in our programming wooooorrrrlllldd) approaches. Lateral thinking can help us too, perhaps to broaden the discussion, and emoliate our prejudices. And bravo the client side web browser web inspectors of this woooooooorrrrrrrlllllldddd.

Stop Press

We’ve added some additional emoji flag functionality into Looks Nice Game via …

  1. the “parent” HTML the changed wls_vs_php.htm … calling …
  2. the “child” HTML the changed colour_wheel.html

Previous relevant Worldbank API Comparison Year More Indicators Tutorial is shown below.

Worldbank API Comparison Year More Indicators Tutorial

Worldbank API Comparison Year More Indicators Tutorial

Today’s progress onto yesterday’s Worldbank API Comparison Year Google Chart Mobile Tutorial is a callback to the original reason for the work, that being a graphical way to present what is the real marvel of proceedings, the amazing breadth and depth of public data presented at The World Bank – Indicators | Data, thanks. Sometimes we tend to ignore the primary source of information, but we need to acknowledge every now and again, such “founts of information”, broken into indicators within the categories …

  • Agriculture & Rural Development
  • Aid Effectiveness
  • Climate Change
  • Economy & Growth
  • Education
  • Energy & Mining
  • Environment
  • External Debt
  • Financial Sector
  • Gender
  • Health
  • Infrastructure
  • Poverty
  • Private Sector
  • Public Sector
  • Science & Technology
  • Social Development
  • Social Protection & Labor
  • Trade
  • Urban Development

Pretty impressive! We’ve chosen a few new indicators to add to the pre-existant top two of …

  • Population
  • Gross Domestic Product
  • Access to electricity (% of population)
  • Forest Area (sq km)
  • Agricultural Land (sq km)
  • Fertility rate, total (births per woman)
  • Hospital Beds (per 1,000 people)
  • Rail Lines (total route-km)
  • Labor Force, Total
  • Population density (people per sq. km of land area)
  • Time required to start a business (days)

… “Access to electricity (% of population)” noteworthy Pie Chart wise benefitting from option part pieSliceText: “value”, … the general “theme” being the more we all find out, the better we are to tackle the worldwide discussions we all need to have regarding Earth’s big issues.

This needed changes to …


Previous relevant Worldbank API Comparison Year Google Chart Mobile Tutorial is shown below.

Worldbank API Comparison Year Google Chart Mobile Tutorial

Worldbank API Comparison Year Google Chart Mobile Tutorial

Yesterday’s Worldbank API Comparison Year Pie Chart Differences Tutorial involved Google Charts Pie Chart Difference graphics that …

  • needed work to be functional on mobile platforms, allowing for some Javascript tweaking of the options of those Google ChartPie Chart Difference options … with the …
  • “parent” supervisory web application has HTML (and Javascript and CSS) you could call worldbank_population_data.htm changed in this way … supplying a screen width …

    var whsuffix='';
    var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
    var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
    var rectis=document.body.getBoundingClientRect();
    if (('' + rectis.width).replace('px','').replace(/0/g,'') != '' && ('' + rectis.height).replace('px','').replace(/0/g,'') != '') {
    deviceWidth=('' + rectis.width).replace('px','');
    deviceHeight=('' + rectis.height).replace('px','');
    }
    whsuffix='&swidth=' + ('' + eval(('' + deviceWidth).replace('px','')) * 1.0) + '&sheight=' + ('' + eval(('' + deviceHeight).replace('px','')) * 1.0);

    … via a suffix to its URL call of the …
  • “child” supervised you could call worldbank_population_data.php changed in this way
    <?php

    $widea=620;
    if (isset($_GET['swidth'])) {
    $widea=$_GET['swidth'];
    $widea/=3.0;
    } else if (isset($_POST['swidth'])) {
    $widea=$_POST['swidth'];
    $widea/=3.0;
    }
    $widea=round($widea);
    //
    // later ... in an echo " some HTML " bit ...
    //
    <input type='hidden' name='moreopt' value=' width: " . $widea . ", height: 1200, chartArea: { width: \"86%\", height: \"70%\" }, '></input>

    ?>
    … we think we’ve come up with a better compromise for all … and today we turn a lot of attention to …
  • start improving the Year “through to” Year functionality calling on …
  • Area Chart interfacing area_chart.php is the changed PHP programming source code as per changes
  • Bar Chart interfacing bar_chart.php is the changed PHP programming source code as per changes
  • Column Chart interfacing column_chart.php is the changed PHP programming source code as per changes
  • Line Chart interfacing line_chart.php is the changed PHP programming source code as per changes
  • … what we like to think of as “the statistical charts”, improving …

    1. emoji flags
    2. legend size … and in so doing, opening the door to …
    3. future parameterization of these chart options, via a “parent”‘s business logic (without having to change the Charts so much again)

    … also affecting …

  • pie_chart.php changed this way
  • pie_chart_diff.php changed this way

As you may well be familiar with, here is a live run link to try this WorldBank data reporting yourself.


Previous relevant Worldbank API Comparison Year Pie Chart Differences Tutorial is shown below.

Worldbank API Comparison Year Pie Chart Differences Tutorial

Worldbank API Comparison Year Pie Chart Differences Tutorial

When you compare two year data sets with the web application of yesterday’s Worldbank API World Country Reporting Revisit Tutorial you are likely to be accessing the Google Charts Pie Chart Differences tool using Google”smarts” to compare two data sets via three graphical components.

Those “graphical components” are each “entities” in terms of servicing any Google Charts “select” event logic. In order to still have some “select” (onclick) event logic we needed to compromise in two ways …

  • onmouseover tooltips could not be supported
  • the smaller Pie Chart slices two small to display a percentage value have not be zeroed into

… and so we become keen to help out here in two ways …

  1. try to make the legend not need clicking (and so size it to be a full list, at least for single letter executions) … thanks to this useful link, thanks, for lead to

    <form onsubmit='return preiframeviaurl();' target='myiframe' id='myform' style='display:none;' method='POST' action='" . $preudiff . $udiff . ".php'>
    <input type='hidden' name='title' id='title' value='" . $reportmode2 . " by World Country " . $startswith . " for Year " . $tbit . "'></input>
    " . $onclick . "
    <input type='hidden' name='task' id='task' value='" . $reportmode . "'></input>
    <input type='hidden' name='desc' id='desc' value='" . $reportmode . "'></input>
    <input type='hidden' name='label' id='label' value='Year'></input>
    <input type='hidden' name='value' id='value' value='" . str_replace('%2c','',str_replace('%2C','',$valuelist)) . "'></input>
    <input type='hidden' name='onclick' value='y'></input>
    <input type='hidden' name='moreopt' value=' width: 620, height: 1200, chartArea: { width: \"50%\", height: \"70%\" }, '></input>
    <input type='hidden' name='data' id='data' value='" . explode("&data=",$url)[1] . "'></input>" . "\n" . $idata2 . "\n" . "
    <input id='mysubmit' type='submit' value='Draw Pie Chart'></input>
    </form>
  2. make sure a full data list appears (along with emoji flags and population numbers) in the Javascript prompt window value part

This involved the “supervisory child” …


Previous relevant Worldbank API World Country Reporting Revisit Tutorial is shown below.

Worldbank API World Country Reporting Revisit Tutorial

Worldbank API World Country Reporting Revisit Tutorial

We’re revisiting the PHP web application of Worldbank API World Country Reporting Regex Tutorial for a few days to …

  • add some emoji flags
  • fix some event logic weaknesses, starting today with the single year Worldbank Data incarnations (thanks to World Bank API), but not finished as far as comparison years Worldbank Data incarnations
  • fix Mixed Content issues to allow for seamless SSL https: or http: URL usage

So, today, both “parent” HTML and “child” PHP changed today so that …

… overseeing Google Chart Pie Chart interfacing that changed as per pie_chart.php changed this way and pie_chart_diff.php changed this way.

Try a live run link for yourself to see where we are going with this.


Previous relevant Worldbank API World Country Reporting Regex Tutorial is shown below.

Worldbank API World Country Reporting Regex Tutorial

Worldbank API World Country Reporting Regex Tutorial

Don’t know why, but have often equated regex work in Javascript or PHP with “RegEx Rangers”, or some such other “superhero” categorization. That is because to wield RegEx principles is a bit like swinging a sword through the “butter” of coding problems. Its use can feel arcane, but using it can solve so many issues and simplify projects, it is unbelievable. Trouble I’ve always found is that I like to be presented with a RegEx “ask” as a user, but don’t think a lot of people like it. An upcoming tutorial, though, will show the wonders of a “RegEx” scenario for a text editing job we did recently … we’ll keep you posted on that.

But back to today’s “RegEx” thinking, building on top of yesterday’s Worldbank API World Country Reporting Range Tutorial. We ended up asking the user for optional “RegEx” matching criteria for name matches between the Worldbank API data’s …

  • key (or name)
  • value (numerical)

… properties, to add to the pre-existing, and still available, the “starting with” name filtering functionality we’ve had working ever since Worldbank API World Country Population Report Tutorial as shown way below.

RegEx “thinking” exists for both server and client parts of web applications, for us, consecutively with …

… and we use it with serverside PHP today, under the auspices of the preg_match function, though we most often use RegEx thinking with the Javascript replace function, as the way to make substitutions for more than one occurrence, (the one occurrence design being) a default “curiosity” (but can be useful too) about Javascript’s version of substitution. You may know this RegEx usage of the Javascript replace function as “global substitution”.

If you’re new to RegEx thinking let me outline just a few tips …

  • ^ can mean “start of”
  • $ can mean “end of”
  • . can sometimes mean “one existant character wildcard” … or sometimes it is % or ? for this in other “systems”
  • * can often mean “zero or more of preceding character wildcard”
  • [] and () bracketing rules are pretty crucial for the more esoteric usages … also study | usage

In our tutorial picture we are showing “land$” countries that would feature, if Greenland goes independent one day …

  • Greenland … “full of ice” … and …
  • Iceland … “full of green”

Again, both “parent” HTML and “child” PHP changed today so that …

… to facilitate better (optional) Country name filtering for users of the web application.


Previous relevant Worldbank API World Country Reporting Range Tutorial is shown below.

Worldbank API World Country Reporting Range Tutorial

Worldbank API World Country Reporting Range Tutorial

If you’ve been keeping up to date with the latest thread of blog postings regarding our “Worldbank API World Country Reporting Project” web application, you’ll notice that there is no mention of a Worldbank API indicators in the blog title. That is because we still have “generic” matters to consider, but that is not an imposition to the web application design today. Today, as well as …

  • the original alphabetic starting with country filter (to key below) … we’ve added, today, a …
  • value “range” filter (to value below) applied to the reporting theme’s numerical value

… and because everything reported on has a …

  • key (or name)
  • value (numerical)

… basis, we can apply today’s value “range” filter generically “across the board” (for any of the indicators “Population” and “Gross Domestic Product”, so far).

Why do we use the word “filter” here? Well, a filter limits something, and we’re limiting the maximum amount of output data reported on, by, optionally, taking what a user says about the minimum and maximum (numerical) value ranges for data reporting.

In the case of Google Charts, when there is lots of data too close together to view it definitively, it does some clever data reduction, and we have a means today, to get in under that data reduction to more esoteric reporting possibilities, as a result of our new filter, used well by the user.

Let’s show you how a cluttered //www.rjmprogramming.com.au/PHP/worldbank_population_data.php?startswith=C&year=2015&yearvs=-2011&justletters=y

… can become uncluttered //www.rjmprogramming.com.au/PHP/worldbank_population_data.php?startswith=C&year=2015&yearvs=-2011&max=40000000&justletters=y for those smaller values, by using this value “range” filter below …

So yet again, both “parent” HTML and “child” PHP changed today so that …

  • “parent” supervisory web application has HTML (and Javascript and CSS) you could call worldbank_population_data.htm changed in this way
  • “child” supervised you could call worldbank_population_data.php changed in this way that if you examine you can see the use of PHP cookie methods for the first time here (as we usually use Javascript), specifically, reading and creating (via PHP setcookie method) HTTP Cookies as per the code …

    function rangeget($basis) {
    global $reportmode;
    $cookie_name = "Worldbank_" . str_replace(" ","_",$reportmode) . "_" . $basis;
    if (isset($_COOKIE[$cookie_name])) {
    return $_COOKIE[$cookie_name];
    }
    return 0.0;
    }

    function rangeset($basis, $val) {
    global $reportmode, $startswith;
    if ($startswith == "") {
    $cookie_name = "Worldbank_" . str_replace(" ","_",$reportmode) . "_" . $basis;
    $cookie_value = $val;
    setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/PHP/"); // 86400 = 1 day
    return $val;
    }
    return rangeget($basis);
    }

And so yet again, we would welcome you trying this web application for yourself to try out the new value range filtering functionality that we also talk about at WordPress 4.1.1’s Worldbank API World Country Reporting Range Tutorial.


Previous relevant Worldbank API World Country Gross Domestic Product Tutorial is shown below.

Worldbank API World Country Gross Domestic Product Tutorial

Worldbank API World Country Gross Domestic Product Tutorial

We’ve changed onion types today in our quest for the ultimate “onion of the 4th dimension” concept this project, that being our … oops, the goalposts have shifted … web application project “Worldbank API World Country Population Report Project” where we extend the “scope” of the “indicators” we can report on to those we presented yesterday with Worldbank API World Country Population Period Tutorial, those being the original …

… and here you may have sneaked a peek below to see that …

  • nothing codewise has been added to in terms of “pieces of code” … we thank the excellence of (the organization of the) Worldbank API for this, as the form of the GDP data is not enough different to that of the Population data to warrant us thinking that we needed to change anything other than versions … and …
  • nothing codewise has been renamed in terms of “pieces of code” … and that is us … we’re not embarrassed that a “guinea pig” for an idea gets extended into a bigger picture … so long as “Worldbank” is there in the name somewhere

This “guinea pig” method of extending a project has its advantages and disadvantages as most methods of doing things (inherently) have (their own) advantages and disadvantages. The “guinea pig” approach may suffer if things become complex later when you try to fit in another “extended” concept that is a bit of a “square hole” being forced into our “round socket” … (😄💖🔴). Conversely, if things stay simple enough, why not use methods like …

  • plugging in a programmatic “variable” where once there was a “hardcoding” … and …
  • plugging in (the equivalent of) an HTML select element “dropdown” where once there was a titular piece of text

… to keep on pushing out the “onion” types … we know you’re out there … come an’ show us the cut of your jib!

Yet again, both “parent” HTML and “child” PHP changed today for the new extended “indicator” reporting (adding GDP to pre-existing Population indicator(s)), so that …

And yet again, we would welcome you trying this web application for yourself to try out this new “layer” of functionality “positioning”.


Previous relevant Worldbank API World Country Population Period Tutorial is shown below.

Worldbank API World Country Population Period Tutorial

Worldbank API World Country Population Period Tutorial

Yesterday’s Worldbank API World Country Population Trend Tutorial started us on the topic of “trends” with data and our Google Chart Pie Chart Differences representation of Worldbank API derived data took the form of the first of …

  • snapshot (of two different snapshotted times) … but today we turn our attention to …
  • period of time (of several regular snapshotted times)

… and for the purposes of this latter “chart” reporting we like, around here, still talking in terms of Google Charts, in order of our opinion “regarding quality of reporting purpose” with regard to this Worldbank API Population data reporting …

  • Line Chart
  • Column Chart
  • Bar Chart
  • Area Chart

… all Google Chart “types” looking for the same basic form of data, the hint, in the first place, why we associate these all together with that new period of time reporting options we’ve integrated into the web application at the “parent” HTML supervisor level by, for every new option from yesterday of the form [year] compared to in that top lefthand HTML select element “dropdown”, we also add in an associated [year] through to “dropdown” option which, if selected, will present the user with the opportunity to select the type of Google Chart they’d like to see from the list of four chart types as described above.

Again, both “parent” HTML and “child” PHP changed today for that period of time concept of reporting, so that …

And again, we would welcome you trying this web application for yourself, to get this into perspective regarding perhaps, your own opinions about the pros and cons, strengths and weaknesses of the various very useful Google Chart ideas we appreciate for those reporting tasks, helping support the adage “every picture is worth a thousand words”.


Previous relevant Worldbank API World Country Population Trend Tutorial is shown below.

Worldbank API World Country Population Trend Tutorial

Worldbank API World Country Population Trend Tutorial

The “onion of the 4th dimension” way to go (after yesterday’s Worldbank API World Country Population Report Tutorial as shown below) for our latest web application project “Worldbank API World Country Population” we like is to now start thinking of a means to show “trends” in population. With this in mind there is a ready made Google Chart Pie Chart Differences to help here. With the Google Chart Pie Chart Differences we’ll supply two different years worth of data, and the cleverness of this Google Chart product is called into play to show three Pie Charts, namely …

  • original year’s Pie Chart Worldbank API data
  • “compared to” year‘s Pie Chart data
  • a Google Chart Pie Chart Differences “trend” Pie Chart showing an “inner ring” Pie Chart within an “outer ring” Pie Chart where you can get a sense of “trends” that are taking place

… that is manifested in the “parent” HTML code by changing the previous hardcoded “Year” word with an HTML select element “dropdown” element to define that optional second “compared to” year of interest.

The other new functionality today is a “share” via Email emoji (HTML a link “button”) that latches on to the user’s Email client program via Middle Word Share Tutorial‘s approach, namely …

mailto:[emailAddress]?subject=[Subject]&body=[URLtoLinkTo] type of href property (on that link). As you can imagine, it is possible to piece together a Javascript encodeURIComponent() version of [URLtoLinkTo] value via the current webpage’s document.URL

… the curious variation being that we don’t think of the “parent” HTML’s document.URL here (in blurb above), but, rather, it is more useful to consider the “child” HTML iframe element PHP’s document.URL both as an easier to code concept, and the simplifier of “length of data” GET vs POST HTML form element originated data issues. You see, if your data getting to the Pie Chart is over a certain length, it will be POSTed and you would lose the opportunity to Email this (in that mailto: email client program way), because you rely on real GET method URLs for this approach. At the “view” of the middle “child” PHP, though, it gets its calls, always, in a GET URL way, so it is, counterintuitively, the best (and simplest) place to intervene and code for this Email “share” functionality.

Both “parent” HTML and “child” PHP changed today, so that …

We would welcome you trying this web application for yourself, to get this into perspective.


Previous relevant Worldbank API World Country Population Report Tutorial is shown below.

Worldbank API World Country Population Report Tutorial

Worldbank API World Country Population Report Tutorial

In yesterday’s Worldbank API World Country Population Primer Tutorial, as shown below, we noted …

the data is presented in some way shape or form with the Pie Chart, but for all the advantages of lots of information in the one place, it does suffer a bit with clutter

… and today we show some practical strategies to be more clear (less cluttered) with the data, should the user, optionally, be interested, here.

In practical terms, we built a supervisory HTML “parent” you could call worldbank_population_data.html (with this new live run link) on top of yesterday’s “duck with the legs moving fast” hard working “child” HTML iframe element housed PHP worldbank_population_data.php (changed this way to accomodate this move).

If you had to break up a huge chunk of Worldbank API data related to World Countries and their Population, what would you research as an idea to do this? No doubt a lot of people would agree with how we approach it, that being …


report via a "starting with" alphabetic criteria

Makes sense? We hope so, and we’ll also ask for a Year of interest, with the caveat that we should offer the user the “absolute thinking” that would say if you are doing a report on …


Population by World Country A for year 2015

… for example, you should offer the user to show Pie Charts for the two scenarios below …

  • World Country A Populations compared to each other … or …
  • World Country A Populations compared to each other and a Non-A Population entry (which totals all non-A country populations)

We could present these functionality options in an HTML select element “dropdown”, but we think today, we’ll use a top menu of HTML a links to interface to the user of this “parent” supervisory web application we welcome you to try out for yourself.


Previous relevant Worldbank API World Country Population Primer Tutorial is shown below.

Worldbank API World Country Population Primer Tutorial

Worldbank API World Country Population Primer Tutorial

Today we’re revisiting the absolutely astonishing resource that the Worldbank API website provides. Such free public sources of data are very much appreciated in our books. Not so much in our pamphlets, but definitely in the books. Revisiting we thought, perhaps, we heard you ask … or were you passing wind? Glad you asked. Remember when we presented PHP Worldbank Growth of Merchandise Trade Tutorial, as shown below? Then, we used Google Chart Bubble Chart to present reams of information. Today, we again broach “reams” of Wordbank Population data per country to present a Google Chart Pie Chart report.

On our “first draft” of this web application project we create just the one pie chart, but we do that, along the way showing you a couple of things …

  • the “reams” of data is processed on the understanding it could be sent to an HTML iframe as a URL plonked into that iframe element’s src property (as if), or if that URL is too long then that data is plugged into the HTML form and then sent (POSTed) to that same HTML iframe (whose name is the same as the form element’s target=name) via an HTML form element whose action property is set to …

    //www.rjmprogramming.com.au/PHP/PieChart/pie_chart.php
  • the data is presented in some way shape or form with the Pie Chart, but for all the advantages of lots of information in the one place, it does suffer a bit with clutter

… and so we try some strategies to help with those clutter issues above in blog postings to come.

In the meantime, why not try a live run of the underlying PHP (serverside) web application you could call worldbank_population_data.php featuring …

  • use of PHP file_get_contents() to extract …
  • JSON data is extracted and parsed to help piece together that URL to the Google Chart Pie Chart, as mentioned way above

Previous relevant PHP Worldbank Growth of Merchandise Trade Tutorial is shown below.

PHP Worldbank Growth of Merchandise Trade Tutorial

PHP Worldbank Growth of Merchandise Trade Tutorial

We’ve said it before, and (no doubt) we’ll say it again … there are great public data sources out there for you to explore.

As far as international data goes the Worldbank series of statistics is great, so, thanks.

Today we combine the Worldbank data for Growth of Merchandise Trade 2003-2013 with the wonderful Google Chart Bubble Chart to create (52 = (first letters of country name) 26 x 2 (concepts: Exports and Imports)) reporting charts of interest, we hope. Again, as with any reporting subject, it is a personal thing, whether the subject matter of a report is of interest, but you could say that about so many things in life.

So, we offer some PHP source code you could call growth_of_merchandise_trade.php and a live run link as well, the full loading of which requires patience.

Stop Press

Tomorrow we go over what was needed to change PHP code above to be more mobile friendly …

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.

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

SVG Network Clock Primer Tutorial

SVG Network Clock Primer Tutorial

SVG Network Clock Primer Tutorial

Another approach to a Digital Clock web application is off and running today, reminiscent of some of the concepts in Digital Clock Styling for Daylight Saving Tutorial. Today’s difference though is a significant one involving …

… and we’d like to thank The PHP Anthology (Volume II: Applications) by Harry Fuecks (ISBN: 0-9579218-4-5) for the inspiration of methodologies used. We are encouraged to move on from this “proof of concept” beginning because we are enthusiastic to build on the very simple SVG text element beginnings with more advanced work in future blogs.

Feel free to try it yourself here or look below at (initially) a GMT digital clock …


Previous relevant Digital Clock Styling for Daylight Saving Tutorial is shown below.

Digital Clock Styling for Daylight Saving Tutorial

Digital Clock Styling for Daylight Saving Tutorial

The Daylight Saving Time web application we talked about with Daylight Saving Time TimeZone Emoji Tutorial starts out showing a digital clock displaying the time at various Timezone Places around the world. It occurred to us, this morning, looking over at the alarm clock (also digital) that it would be interesting to recreate that look, at least a bit. But what immediately seemed appealing was not any photography or media based work, but the really simple CSS idea to make use of …

  • HTML table elements containing …
  • two tr row elements per numeral (or digit) of time to define … each row containing a …
  • single td cell with the content &nbsp; (ie. non-breaking space) … but working to define the numbers via the correct combinations of use of …
    1. style=’border-top:28px solid red;’
    2. style=’border-bottom:28px solid red;’
    3. style=’border-left:28px solid red;’
    4. style=’border-right:28px solid red;’

    … for all the td cells involved

… reminding me of how incredible it is that just a few lines can be used by artists to have a viewer know exactly what they were depicting. More with faces, mind you, but even so, is an interesting part of how our brains work.

The code changes just involve a new array in the Javascript as per …


var dcborder=[
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid transparent;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid transparent;border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-top:28px solid red;border-left:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-top:28px solid red;border-right:28px solid red;border-bottom:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid transparent;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid transparent;border-right:28px solid red;border-top:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;'> </td></tr><tr><td style='border-right:28px solid red;border-top:28px solid red;border-bottom:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;'> </td></tr><tr><td style='border-right:28px solid red;border-top:28px solid red;border-bottom:28px solid red;border-left:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr></table>",
"<table style='padding:5px 5px 5px 5px;' cellpadding=12><tr><td style='border-top:28px solid red;border-left:28px solid red;border-right:28px solid red;'> </td></tr><tr><td style='border-bottom:28px solid red;border-top:28px solid red;border-right:28px solid red;'> </td></tr></table>"
];

… and modified code that writes out the digital clock numerals …


function dc(chuh, subclass) {
var retval="";
if (subclass == 'hour' && chuh.length == 1) chuh='0' + chuh;
for (var iy=0; iy<chuh.length; iy++) {
if (document.URL.indexOf('dcviaborder=') != -1) {
retval+='<td>' + dcborder[eval('' + chuh.substring(iy, eval(1 + iy)))] + '</td>';
} else {

retval+='<td><h1 class="a' + chuh.substring(iy, eval(1 + iy)) + ' ' + subclass + '"></h1></td>';
}
}
return retval;
}

… and the HTML means by which the user can toggle between the two digital clock looks


<h1 align='center'>Daylight Saving Time Information <a style='text-decoration:underline;cursor:pointer;' onclick=" if (document.URL.indexOf('dcviaborder=') != -1) { location.href=document.URL.replace('dcviaborder=','dcviaXborder='); } else { location.href=(document.URL + '&dcviaborder=y').replace('.html&','.html?'); }" title="Toggle look of Digital Clock">&#128158;</a> RJM Programming - September, 2015</h1>

You can see this new digital clock look and contrast it to the old digital clock look with the changes we made to daylight_saving_time.html for your perusal.


Previous relevant Daylight Saving Time TimeZone Emoji Tutorial is shown below.

Daylight Saving Time TimeZone Emoji Tutorial

Daylight Saving Time TimeZone Emoji Tutorial

The last time we added a change to our Daylight Saving TimeZone Information web application was during our Other Side of the World Google Chart Tutorial work, and then, so many things were going on with interfacing and integration we didn’t really revisit the Daylight Saving TimeZone Information web application for itself, as it is so good to do every now and then to …

  • incorporate new things you’ve learnt
  • check on functionality that has fallen by the wayside (or, sin of all sins, never got to the wayside)

Our recent perusals around the “wooooooooorrrrllldd” of CSS3 reminded us of the power of CSS Selectors, especially the ones that came in with CSS3. The “two out of three” that we use today are described on today’s tutorial picture as well as we’d want to do here … so here goes …

Featuring
CSS3 Selectors for element attributes
^= (starts with)
*= (contains)
$= (ends with … not used)
Thanks to

//www.webreference.com/authoring/css3/index.html

When you try to memorize syntax do you look for “linkages”? Yes, you can find anything on the net. But seriously, this CSS syntax can be remembered because it uses the characters of a lot of RegEx wildcarding systems. Another kind of “linkage” we saw between this CSS(3) Selector functionality, and where it would be useful, was that we’d noted that TimeZone identifiers have a name, and generally they take a form …


Region/Placename

… and that Region (plus or minus the “/“) felt to us like a good candidate for functionality enhancement via the CSS(3) Selectors above. You can judge for yourself way below, or by clicking today’s tutorial picture.

Three other “popular” items around here, featuring, today, are …

  • emojis (some of which were multiple and so we wish to rethank Iemoji (multiple HTML entity information) and FileFormat Information (normal HTML entity information) and Emojipedia (finding them) for these emoji lookups, as well as the CSS syntax help from this webpage (needed, because, unbelievable to us, we’d only ever done this with Javascript, in the past)), and their role to help internationalization of your web applications, and to add a bit of colour, and cuteness
  • HTML element alt attribute when a data busy HTML select element option tag (the tag that we get most satisfaction from, making busy … it has to be said) is already using …
    1. title
    2. value
    3. text (or innerHTML)

    … and you come along later not wanting to clobber any good logic looking for another “data place” to populate with your new “data item” (of interest) … well, that could be the “oft neglected except perhaps with the HTML img tag” alt attribute

  • CSS selector :before

Apart from that alt logic above the changes we made to daylight_saving_time.html amounted to changes adding in new CSS(3) Selectors (that just happen … the joy of CSS, we guess) …


<style>
a[title*="Africa/"]:before { content: '\01f30d' }
a[title*="Europe/"]:before { content: '\01f4b6' }
a[title*="America/"]:before { content: '\01f30e' }
a[title*="Asia/"]:before { content: '\01f30f' }
a[title*="Australia/"]:before { content: '\01f1e6\01f1fa' }
a[title*="Indian/"]:before { content: '\01f1ee\01f1f3' }
a[title*="Pacific/"]:before { content: '\01f3dd' }
a[title*="Arctic/"]:before { content: '\01f1ec\01f1f1' }
a[title*="Antarctica/"]:before { content: '\01f1e6\01f1f6' }
a[title*="Atlantic/"]:before { content: '\01f30a' }
option[value*="Africa"]:before { content: '\01f30d' }
option[value*="Europe"]:before { content: '\01f4b6' }
option[value*="America"]:before { content: '\01f30e' }
option[value*="Asia"]:before { content: '\01f30f' }
option[value*="Australia"]:before { content: '\01f1e6\01f1fa' }
option[value*="Indian"]:before { content: '\01f1ee\01f1f3' }
option[value*="Pacific"]:before { content: '\01f3dd' }
option[value*="Arctic"]:before { content: '\01f1ec\01f1f1' }
option[value*="Antarctica"]:before { content: '\01f1e6\01f1f6' }
option[value*="Atlantic"]:before { content: '\01f30a' }
option[alt^="Africa/"]:before { content: '\01f30d' }
option[alt^="Europe/"]:before { content: '\01f4b6' }
option[alt^="America/"]:before { content: '\01f30e' }
option[alt^="Asia/"]:before { content: '\01f30f' }
option[alt^="Australia/"]:before { content: '\01f1e6\01f1fa' }
option[alt^="Indian/"]:before { content: '\01f1ee\01f1f3' }
option[alt^="Pacific/"]:before { content: '\01f3dd' }
option[alt^="Arctic/"]:before { content: '\01f1ec\01f1f1' }
option[alt^="Antarctica/"]:before { content: '\01f1e6\01f1f6' }
option[alt^="Atlantic/"]:before { content: '\01f30a' }
</style>

You can see these predominantly CSS styling changes for yourself at this live run link.


Previous relevant Other Side of the World Google Chart Tutorial is shown below.

Other Side of the World Google Chart Tutorial

Other Side of the World Google Chart Tutorial

Google Charts provides great chart tools for various purposes. We already use the Map Chart heavily with our “Other Side of the World” recent web application we last talked about below with Other Side of the World Continents and Countries Tutorial. This is no surprise given the geolocation and positioning and mapping aspects to the project. But also apt is the …

  • Geo Chart which displays nominated countries and/or regions on a world map … and we also thought it would be good to call on a …
  • Bar Chart can display Great Circle distances between places the user identifies during an execution of the “Other Side of the World” web application session

Over time you get a feeling for what Google Chart suits what scenario of data arrangements. Perhaps, here it would be instructional to read Google’s miscellaneous examples if you are wondering what is possible with this great software suite. We interface to many of these charts here at this blog and to read through these you could visit this link.

Today, as far as this “feel” goes, we’d like to admire how the Google Chart “way” of being housed in an HTML div element leads itself to scaling ready for smaller format devices, so long as you, the coder above, “play the game” so to speak, trying to specify percentage values for HTML element width properties where possible. This came to play with today’s Google Chart Bar Chart “fitting in” with right column table cell (td) widths with today’s “Other Side of the World” web application.

These two code files were involved in these changes …

  1. other_side_of_the_world.htm (changed in this way) … and you can try a live run or Seattle live run
  2. tz_places.php (changed this way)

As per usual, we encourage you to try the web application, and compare the goings on with code, and a good web inspector tool.


Previous relevant Other Side of the World Continents and Countries Tutorial is shown below.

Other Side of the World Continents and Countries Tutorial

Other Side of the World Continents and Countries Tutorial

Today, as with WordPress 4.1.1’s Other Side of the World Continents and Countries Tutorial, we came across a scenario where there was a tiny advantage being Australian, in that our “Continent Name” equals our “Country Name” … which I suppose you could argue for Antarctica, maybe?!

We were amused by this at school, and now have the first real world “application” of this in that today’s task, much harder than we thought it would be, was, with our “Other Side of the World” web application (we last talked about with Other Side of the World Timezone Tutorial as shown below) to link the two bigger data sets up the top of the list of three datasets going on with our application …

The Weather Underground tends to talk about Placenames and their Country Names whereas the PHP TimeZones tend to link Placenames with Continent (or region) Names … and the missing link between these two talking to each other a good percentage of the time involves the PHP’s getLocation() functionality we’ve talked about before as a method for the DateTimeZone class, along with some 2 character ISO Country code information you can read more about at //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name.

Making this link has lots of benefits …

  • our “closest to” lists now have more data to call on (supplementing the last of those datasets above) … and …
  • we can now allow for searches by Country on that top HTML select (dropdown) element …
  • we can fill in more specified places now that we can add in a Country so often and often reach a point with the Weather Underground scrutiny where there is only one returned value, at which point, some days ago, we added logic to say just go and display this on the Map Chart and the rest straight away to save some time
  • people tend to think of a Country when they think of a place, at least on dry land, that is.

An unusual code threesome were involved in these changes …

  1. other_side_of_the_world.htm (changed in this way) … and you can try a live run or Johannesburg live run
  2. daylight_saving_time.html (changed this way)
  3. tz_places.php (changed this way)

… that last one getting a new calling method just for this purpose of …

  • take a placename
  • take its inputted Continent (or region) Name … and …
  • have the supervisory codes send to tz_places.php a $_GET[] call for the purpose of …
  • using getLocation() functionality find a 2 character ISO Country Code … and …
  • link this to a full Country Name via various arrays we have in the PHP … and finish off by …
  • sign off the PHP (in an HTML iframe element) by changing relevant fields in top.document or parent.document DOM HTML elements via a simple HTML body onload event method of making those changes and exiting the called PHP … allowing for …
  • supervisors pick up their usual logic flows once we have a Placename,CountryName textbox scenario going

Of course “Australia” the continent name being the same as “Australia” the country name saves so much time I’ll think I’ll have that cup of coffee now. See ya!


Previous relevant Other Side of the World Timezone Tutorial is shown below.

Other Side of the World Timezone Tutorial

Other Side of the World Timezone Tutorial

We’ve got a lot of “where” functionality mixed in with “when” functionality with our “Other Side of the World” web application. To us, the easiest way to link “where” and “when” in the world is the concept of Earth’s timezones. We spent a lot of time looking into this with the blog thread ending with TimeZone Country Places Data Tutorial and then it went through another makeover when we tackled its integration into the Weather Underground API inspired blog postings culminating in Weather API via Iframe jQuery Ajax AutoComplete Tutorial

Reading down that first blog posting thread to its “Primer Tutorial”

Into the mix of the logic here, we need to venture into the world of two letter ISO Country Codes, and we work this with help from //php.net/manual/en/datetimezone.getlocation.php and //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name and //php.net/manual/en/function.timezone-identifiers-list.php and //www.timezoneconverter.com/ to “hardcode” our HTML select “dropdown” elements we create in the process, and offer TimeZone information HTML select “dropdown” elements as well.

… you can see how good PHP is, natively, with timezones, and how approachable all this is for all PHP programmers … exciting stuff!

And there’s another series of blog postings culminating in HTML/PHP Timezone Feed Function Keys Tutorial involved in this same realm of thinking, that we use today (as with WordPress 4.1.1’s Other Side of the World Timezone Tutorial), along with the … you guessed it … Client Pre-emptive Iframe technique approaches to making use of what it helps with. Integrating “what it helps with” is quite interesting, and quite “Ajax”y in its ways. We call its supervisory web application into a new HTML iframe element of our “Other Side of the World” web application and pluck out only its initial “Digital Clock” HTML table display, and transfer that HTML table and its modified CSS styling over into a new HTML div element within the “Other Side of the World” web application, initially style “display:none;” but capable of being called into play via the user selecting an “Hour Time of the Day” value of interest, that causes the iframed daylight_saving_time.html (changed this way).

What the user sees/does to use this new functionality looks like …

  • they see the “Hour of the Day” dropdown
  • they select an “Hour of the Day” value of interest … in today’s tutorial picture, here in AEST Australia (around about 8pm) we chose “07am”
  • the “Digital Clock” flashes random current times of day from around the “TimeZone Places World” and when it lobs onto the first matching time between 07am and 08am (exclusive) …
  • that matching “TimeZone Place” is copied into the “Other Side of the World” Place textbox … and …
  • the “Weather Underground” (autocomplete) database is scrutinized for a match, and if so …
  • the Map Chart shows the matched place as the base position along with its “Other Side of the World” counterpart, allowing for Google Chart click/touch (its “select”) event logic to allow for other functionalities that include a Weather link and TimeZone information (with a current time of day) … along with the …
  • usual “packdrill” for TimeZone Places iframe table cell and YouTube API Embedded iframe table cell in the (now) bottom row of the “Other Side of the World” (big) table element

The code for these TimeZone integration changes, building on yesterday’s Other Side of the World Map Chart Styling Tutorial, remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of additional TimeZone functionalities today) if you like, or want to try out (or try out for a specific (argument) location, such as Tokyo try out), again. The Client Pre-emptive Iframe reading and use of PHP continues today, making great use of its TimeZone code talents.


Previous relevant Other Side of the World Map Chart Styling Tutorial is shown below.

Other Side of the World Map Chart Styling Tutorial

Other Side of the World Map Chart Styling Tutorial

You’ll have noticed with our “Other Side of the World” web application of recent days … or maybe not, if you were dozing off … how much use we make of the Google Charts Map Chart functionality. Can’t do without it … thanks, Google.

Now if you go to read about the Google Chart Map Chart you may end up at this very interesting webpage, and even if it was some time back you were last there, it is always worth checking back in every now and then for information on changes, or to reread this functionality rich software suite documentation. We only touch the “tip of the iceberg” with the way we interface to Google Charts, but today we want to take some small steps to improving on that. Even taking small steps, when dealing with a third-party product so rich in possibilities, we try to be generic and be able to offer more to those adventurous users out there, both laptop and mobile (at least iPad only at this stage) users.

So we have set up a way for iPad users using the mobile app to be able to save their comma prefixed …

  • localized Google Chart Map Chart styling ideas from here when they interactively enter Map Chart criteria … and for …
  • all users of our “Other Side of the World” web application get an additional non-default Google Chart Map Chart “Styled Map” tab (in addition to their default “Map” and “Satellite” tabs), and some non-default Google Chart Map Chart icons … thanks to Icons-Land here

The new icons for that latter scenario also feature a different icon showing after a “pin” icon is selected (ie. the Google Chart click/touch “select” event is called into play).

The code for these Map Chart changes remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of Google Chart Map Chart purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Beijing try out), again. The major changes related to in the Google Chart Map Chart web application PHP you could call map.php, and which changed in this way, starting down our long path towards more Map Chart styling possibilities.


Previous relevant Other Side of the World Iframe Tutorial is shown below.

Other Side of the World Iframe Tutorial

Other Side of the World Iframe Tutorial

Our “Other Side of the World” web application we’ve been developing lately has made extensive use of the HTML iframe element, mainly as a “reader” of data in that Client Pre-emptive Iframe technique way. But the HTML iframe element is probably better known for its data integration and display talents, and it is these that we call upon today, to (software) integrate two other existing sources of data so that, display-wise we have four table (td) cells in play now those being the original …

We now think the use of all this can have you hopping around the world discovering lots of geographical based, video based and timezone based information about lots of places around the world, lots of which you may never have known much about.

We’ve software integrated today, as well as integrated “where” web application thoughts with “when” web application thoughts.

Another feature of today’s changes involves the geolocation features of the Javascript …


navigator.geolocation.getCurrentPosition(success[, error[, options]])

… syntax method of allowing Location Services, if allowed by the user, return a latitude and longitude position of the user themselves, information used at the instigation of the web application, and which we also used with HTML/Javascript Where Does It Get Me To Primer Tutorial and Google Chart Map Chart Select Event Primer Tutorial in the past.

The code for this remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our HTML iframe (software) integration purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Alice Springs try out), again. It also required small changes to …

We hope you try it out and discover some new things!


Previous relevant Other Side of the World Onblur Tutorial is shown below.

Other Side of the World Onblur Tutorial

Other Side of the World Onblur Tutorial

The onblur event in web programming is a very important event regarding interactive keyboard entries made by the user. We base new functionality, today, with our “Other Side of the World” web application, by allowing a user who enters in their own “place” information, can have that information filtered through the same “autocomplete” database provided by the wonderful Weather Underground and its great API service.

When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the onkeyup keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box … hence the onblur event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same …

  • placename
  • country … linked to …
  • latitude
  • longitude

… fields as talked about yesterday when we presented Other Side of the World Places Tutorial as shown below.

So that’s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting Weather API via Iframe jQuery Ajax AutoComplete Tutorial from some time back, the changes for which we’ll explain later.

Again we call on Client Pre-emptive Iframe techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.

The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our onblur event purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Darwin try out), again. It also required small changes to …


Previous relevant Other Side of the World Places Tutorial is shown below.

Other Side of the World Places Tutorial

Other Side of the World Places Tutorial

A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like …

  1. Sun Angle at noon
  2. Moon Angle at noon
  3. Coriolis Effect
  4. Distance between Geographical Locations
  5. Weather at Geographical Location

… and that we eventually added some “placename” capabilities to all this, introduced with PHP/Javascript/HTML Sun Angle Tutorial, which harnessed all this useful goodwill of this useful webpage (thanks) publishing some placename geographicals data.

  • placename
  • country … linked to …
  • latitude
  • longitude

… and that we “channel” today, via our beloved Client Pre-emptive Iframe techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added “placename” functionality to our “Other Side of the World” web application we started presenting yesterday with Other Side of the World Primer Tutorial as shown below.

Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an onclick event (after an onchange event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the …

  • placename (, country) (Great Circle Distance in km away)
  • latitude
  • longitude

… HTML input type=text and type=number fields automatically. In the normal case of events in non-Firefox web browsers an onchange event change of value to a non-nothing value just causes that select element value to be one of the places shown on the Google Charts Map Chart that we display.

The default is to show five of the nearest placenames in the derived list, but a “+” button can increase that number of “nearest”s as required.

The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our purposes today) if you like, or want to try out, again perhaps?


Previous relevant Other Side of the World Primer Tutorial is shown below.

Other Side of the World Primer Tutorial

Other Side of the World Primer Tutorial

Today we’ve written a first draft of an “Other Side of the World” web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user …

  • the position of the place that they enter in for their latitude and longitude … as well as …
  • “the other side of the world” to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location

Is this our “sister” location? Am not sure. But somebody was telling “Porkies” to me as a child where we were told “China” as being on the other side.

The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.html if you like, or want to try out.

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.

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

Looks Nice Nearby Speech to Text Game Video Tutorial

Looks Nice Nearby Speech to Text Game Video Tutorial

Looks Nice Nearby Speech to Text Game Video Tutorial

Onto yesterday’s Looks Nice Nearby Speech to Text Game Share Tutorial today we have changes as per …

  1. the “grandparent” PHP changed PHP code of speech_supervisor.php with its live run … supervising …
  2. the “parent” HTML the changed wls_vs_php.htm … calling …
  3. the “child” HTML the changed colour_wheel.html
  4. the “grandchild” HTML the changed karaoke_youtube_api.htm helps out with video dropdown menu

… with a few improvements today …

  • one you might call a bug (or annoyance) getting rid of a lot of …
    1. navigation reversal fixes in wls_vs_php.htm (calling colour_wheel.html) needing to add new codeline to terminate Javascript activity (used for the first time that we can remember, ever, and thanks to this webpage)) to stop colour_wheel.html click navigation reversals …

      hangon=true;
      location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent('' + readlat) + '&altlongis=' + encodeURIComponent('' + readlong) + '&extrastyle=%20'; // + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0]);
      throw new Error("Stop script");
    2. unnecessary webpage displays in wls_vs_php.htm via a new “whole of content” encasing …

      … initially (as for global “var hangon=false;”), until not a navigation as exemplied above (where “hangon=true;” happens), when …

      if (!hangon) { document.getElementById('bigdiv').style.display='block'; }

      … can often avoid a flash of non-relevant webpage annoying the user

  • one you would call a functionality improvement whereby YouTube videos can now be played in a table of HTML iframe elements in a linked (at the head) list approach in karaoke_youtube_api.htm (the only original line of code) …

    if (window.parent) {
    if (parent.document.getElementById('parnext2') && parent.document.getElementById('divideo')) {
    var cellnum=2;
    while (parent.document.getElementById('parnext' + cellnum).innerHTML != '') {
    cellnum++;
    }
    parent.document.getElementById('parnext' + cellnum).innerHTML="<table style=display:table-cell;><tr><td id=parnext" + eval(1 + eval('' + cellnum)) + "></td></tr></table><iframe id='myiframe" + cellnum + "' style='z-index:-4;width:720px;height:410px;' src='" + document.URL.split('karaoke_')[0] + "stop_start_youtube.html?vid=" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix) + "'></iframe>";
    } else if (parent.document.getElementById('myiframe') && parent.document.getElementById('divideo')) {
    parent.document.getElementById('myiframe').src=document.URL.split('karaoke_')[0] + "stop_start_youtube.html?vid=" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix);
    } else if (parent.document.getElementById('placeforvideo') && parent.document.getElementById('divideo')) {
    parent.document.getElementById('placeforvideo').innerHTML="<details open><summary>YouTube Videos</summary><table style='overflow:scroll !important;' id=partable><tr id=parrow><td id=parnext2></td><td><iframe id='myiframe' style='z-index:-4;width:720px;height:410px;' src='" + document.URL.split('karaoke_')[0] + "stop_start_youtube.html?vid=" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix) + "'></iframe></td></tr></table></details>";
    if (parent.document.getElementById('divnoresize')) {
    parent.document.getElementById('divnoresize').innerHTML='xxx';
    }
    } else {
    window.open(document.URL.split('karaoke_')[0] + "stop_start_youtube.html?vid=" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix), '_blank', 'left=10,top=10,width=600,height=600');
    }
    } else {
    window.open(document.URL.split('karaoke_')[0] + "stop_start_youtube.html?vid=" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix), '_blank', 'left=10,top=10,width=600,height=600');
    }
  • mobile platform …
    1. meta viewport tag (the usual …

      <meta name='viewport' content='width=device-width, initial-scale=1'>

      … is used)
    2. positioning code in speech_supervisor.php (involving “overlay” ideas for mobile platforms) …

      if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
      document.getElementById('tdright').innerHTML+='<iframe id=ifsgetto style="position:absolute;top:35vh;left:2%;width:96%;height:900px;z-index:20;" src="../HTMLCSS/wls_vs_php.htm?oneorother=' + encodeURIComponent(encodeURIComponent(pwhere)) + '"></iframe>';
      location.href='#ifsgetto';
      } else {
      document.getElementById('tdright').innerHTML='<iframe style="width:100%;height:900px;" src="../HTMLCSS/wls_vs_php.htm?oneorother=' + encodeURIComponent(encodeURIComponent(pwhere)) + '"></iframe>';
      }
    3. text box focus considerations in speech_supervisor.php …

      if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
      lasturlis=lasturlis;
      } else {
      document.getElementById('iblah').focus();
      }

This you can try out, again (with the remote).


Previous relevant Looks Nice Nearby Speech to Text Game Share Tutorial is shown below.

Looks Nice Nearby Speech to Text Game Share Tutorial

Looks Nice Nearby Speech to Text Game Share Tutorial

Yesterday’s Looks Nice Nearby Speech to Text Game Tutorial ironed out a data size issue between the web application components 2 and 3 below …

  1. the “grandparent” PHP changed PHP code of speech_supervisor.php with its live run … supervising …
  2. the “parent” HTML the changed wls_vs_php.htm … calling …
  3. the “child” HTML the changed colour_wheel.html

… as what goes towards the makeup of the “Looks Nice Game” (of world places). But we had no such large data size issue between components 1 and 2, and that being the case, and component 2 being HTML we choose, as a Sharing mechanism …

  • “a” “mailto:” link (call on the email client application) technique of sending email … or …
  • “a” “sms:” link (call on the messaging client application) technique of sending sms

… being as all we would need to add Share functionality, timing it as an intervention point between components 1 and 2 … for the “Oodnadatta looks nice” case … in an Email or SMS “body” section … is …


https://www.rjmprogramming.com.au/HTMLCSS/wls_vs_php.htm?oneorother=Oodnadatta

… and you can see how a substitution of “mailto:” for “sms:” and vice versa in the two …

Email 📧 SMS 📟
Email URL (you can see via hovering over) SMS URL (you can see via hovering over)

… is pretty programmatically easy, and all possible as easy if you can arrange for simple URLs to control navigation at some interventional stage of an HTML component web application workflow.


Previous relevant Looks Nice Nearby Speech to Text Game Tutorial is shown below.

Looks Nice Nearby Speech to Text Game Tutorial

Looks Nice Nearby Speech to Text Game Tutorial

In order to progress yesterday’s Looks Nice Speech to Text Game Tutorial‘s functionality from only locating your Country Capitals and TimeZone Places to, today, including a lot more places you might find geographical references for (and link them to a nearby TimeZone place in that same country), we interplay two changing HTML web applications and find we need to implement another scenario like Window LocalStorage Client Versus Server Primer Tutorial‘s …

Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML/Javascript recipient via ? and & argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we’ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.

Hint: Yes, we’ve raved on about this too?! Does the blog posting title give it away? Okay, yes, it should read “localStorage”, but thought we’d gone past such juvenile finickiness since the Whac-A-Mole controversy of 1st December 2019 (or even The Great Tea Trolley Disaster of ’67, we daresay).

It can even use a “self-destruct” approach to the use of this “localStorage” on having used it because …

  • the web application knows who is using it (localStorage) … and on having accessed and read it …
  • the web application knows it (localStorage) is of no use to any other user (in this web application’s case, at least)

… because we are passing information from a web application (doesn’t matter whether HTML or PHP) to HTML we have no HTML form method=POST available to us (though we could just encase the entire HTML into some PHP innards) and there is enough data that would start resulting in HTTP Error 414 request URI too long issues in an HTML form method=GET scenario.

On the sender HTML the changed wls_vs_php.htm side we have calling Javascript code like …

if (window.localStorage) {
localStorage.setItem('wls_vs_php_colour_wheel_style', encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0].replace('display: none;','')));
location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[0]) + '&altlongis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[1]) + '&extrastyle=%20'; // + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0]);
} else {
location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[0]) + '&altlongis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[1]) + '&extrastyle=' + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0].replace('display: none;',''));
}

And at the receiving HTML the changed colour_wheel.html side we have called Javascript code like …

var altplacename=location.search.split('butp=')[1] ? decodeURIComponent(location.search.split('butp=')[1].split('&')[0]) : '';
var placeurl=location.search.split('placeurl=')[1] ? decodeURIComponent(location.search.split('placeurl=')[1].split('&')[0]) : '';
var extrastyle=location.search.split('extrastyle=')[1] ? extralocal(decodeURIComponent(location.search.split('extrastyle=')[1].split('&')[0]).replace(/\+/g,' ')) : '';
var altlatis=location.search.split('altlatis=')[1] ? decodeURIComponent(location.search.split('altlatis=')[1].split('&')[0]) : '';
var altlongis=location.search.split('altlongis=')[1] ? decodeURIComponent(location.search.split('altlongis=')[1].split('&')[0]) : '';

function extralocal(proposedes) {
if (proposedes != '' && proposedes.trim() == '') {
if (window.localStorage) {
if (('' + localStorage.getItem('wls_vs_php_colour_wheel_style')) != '') {
var retvis=decodeURIComponent(localStorage.getItem('wls_vs_php_colour_wheel_style'));
localStorage.removeItem('wls_vs_php_colour_wheel_style');
return retvis;
}
}
}
return proposedes;
}

… making the HTML be able to accept vastly bigger amounts of data, process it, and even, in this case, where no other application would be interested in it, “self-destruct” it. You will have noticed the deliberate ordering of the arguments so that the lengthy one is last in the list, because we know the others will not overshoot the web server’s URL length limit on their own, and we signal that the lengthy “extrastyle” data might exist in window.localStorage by passing across one blank rather than nothing.

Again, we hope you try it out (with the remote) with some other place name candidates like Oodnadatta.


Previous relevant Looks Nice Speech to Text Game Tutorial is shown below.

Looks Nice Speech to Text Game Tutorial

Looks Nice Speech to Text Game Tutorial

It’s been too long getting back to some Speech to Text work, made possible for us via the very generous Google Speech to Text API functionality we last talked about at Contextualize Speech to Text to Speech LibreOffice Template Tutorial.

What prompted the revisit? Tahiti. Yes, many years ago here in Australia we had an “earworm” of a television commercial that stuck in a lot of minds …

… including yours truly. Now we’re not saying we agree with the sentiments of the advertisement, but it is fun to picture yourself sitting in the bath of a private plane in the age of Siri and Cortana and within “microphone shot” of an order to the cockpit (and no pits were harmed in the making of this blog post).

And so we looked into it, and did find the usual “speech to text” Google Chrome limitation, but then thought for others we could provide a textbox (rather than making them eat the leftover cake, that is), and found it needed interfacing on two fronts …

  • the supervisory changed PHP code of speech_supervisor.php with its live run needed to be tweaked in the addition of a new select (dropdown) element “Tahiti Looks Nice Game” option … the selection of which calls …
  • the supervised the changed wls_vs_php.htm

    var getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getoneorother=location.search.split('oneorother=')[1] ? decodeURIComponent(location.search.split('oneorother=')[1].split('&')[0]).replace(/\+/g,' ') : '';

    // ... and then later within document.body onload event Javascript logic ...

    if (getoneorother != '' && getcapitals == '' && getcountries == '') {
    var nomore=false, thectyis='', theccis='', vstwo, vsthree, thespi='';
    var vsone=document.getElementById('scapitals').innerHTML;
    vstwo=document.getElementById('selceq').innerHTML;
    vsthree=document.getElementById('sele').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    thespi='' + vsone.split('">' + thectyis)[0].split(' value="')[eval(-1 + vsone.split('">' + thectyis)[0].split(' value="').length)].split('"')[0];
    if (vstwo.indexOf('>' + getoneorother) != -1) {
    thectyis=getoneorother + vstwo.split('>' + getoneorother)[1].split('<')[0];
    theccis=vstwo.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vstwo.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    } else if (vstwo.toUpperCase().indexOf('>' + thespi.toUpperCase()) != -1) {
    thectyis=thectyis + vstwo.split('>' + thespi)[1].split('<')[0];
    theccis=vstwo.split('>' + thespi)[0].split(' value="')[eval(-1 + vstwo.split('>' + thespi)[0].split(' value="').length)].split('"')[0];
    vstwo=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vstwo.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else {
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    } else if (vstwo.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vstwo.split('/' + getoneorother)[0].split('>')[eval(-1 + vstwo.split('/' + getoneorother)[0].split('>').length)];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + getoneorother + vstwo.split('/' + getoneorother)[1]).replace(/\ /g,'_');
    } else if (vsone.toUpperCase().indexOf(' value="' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    theccis=getoneorother + vsone.split(' value="' + getoneorother)[1].split('"')[0];
    thectyis=vsone.split(' value="' + theccis + '">')[1].split('<')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    if (!nomore) {
    vsone=document.getElementById('selceq').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    //document.URL.split('?')[0].split('#')[0] + '?andgo=y&countries=' + encodeURIComponent(thectyis) + '&capitals=' +
    }
    if (!nomore) {
    if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    }
    }
    }
    }

We hope you try it out (with the remote).


Previous relevant Contextualize Speech to Text to Speech LibreOffice Template Tutorial is shown below.

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Maybe it’s just my weakness, but what I often find writing web applications is that I come back to them several months later and wonder, sometimes, how to work them. This is a weakness of “contextualization”.

Contextualization is putting your audience “into the picture” as much as is possible. Who says this is always easy? We’re not, but it is really good to try. A big thing in the programmer’s favour with respect to good contextualization practice is if you control the processes. Luckily with the current “Speech to Text to Speech” web application ideas, we control the data. Never forget the power of this, if you happen to lose sight of this ( … but then I guess it’s too late … boo hoo). Barring lack of backward compatibility, our vision of the “sin of all sins”, when you control the data you get to control …

  • the look of things
  • the placement of things (which we also have the parent do a bit of with today’s work)
  • your own data delimitation, or other data arrangement, rules
  • the relationships between parent and child HTML web page and child iframe or popup window arrangements

You may have heard us talking about “hard working duck” child iframe HTML components to projects? In these designs the child is doing the bulk of the work. Up to now, with our LibreOffice template “ducks” (in their HTML iframe elements) have been crucial but not dynamically hardworking as such. More just the scaffolding for the job. But today we’re giving them more to do, because after several days thinking of approaches to it, we’ve “landed” onto the approach for added “contextualization” that goes along the lines …

  1. the parent Speech to Text to Speech PHP supervisor will have the added role with a new …

    <input type=hidden id=thefocusis value=''></input>

    … to “pledge” to …

    1. keep it populated with a number representing the bit after “s” for the ID of the span element containing a form prompt label where the focus is near (focus is actually on the accompanying input type=text textbox element)
    2. window.scrollTo(0,0); // few seconds after a change of focus … not too much to ask?!
  2. the children (ie. any LibreOffice template piece of HTML from now on) in iframe elements get a new bit of Javascript near the end of their document.body (ie. before </body>) .. as per …

    <script type='text/javascript'>

    var thelastfocuswas=-1;
    var thisfocusis=-1;

    function keepacheck() {
    var ic=parent.document.getElementById('thefocusis').value;
    if (ic != '') {
    if (eval(ic) != thelastfocuswas) {
    if (thelastfocuswas != -1) {
    document.getElementById('span_' + thelastfocuswas).style.border='0px solid orange';
    }
    thisfocusis=eval(ic);
    document.getElementById('span_' + thisfocusis).style.border='2px solid orange';
    location.href='#' + 'span_' + thisfocusis;
    thelastfocuswas=thisfocusis;
    }
    }
    }

    function fixbody() {
    var ij, inhtml=document.body.innerHTML;
    var outhtml=inhtml;
    var sis=' style="border:2px solid orange;" ';
    if (document.URL.indexOf('goto=') != -1) {
    if (parent.document) {
    if (parent.document.getElementById('thefocusis')) {
    var candidates=outhtml.split('&l' + 't;');
    var cl=candidates.length;
    if (candidates.length > 1) {
    for (ij=1; ij<cl; ij++) {
    if (candidates[ij].indexOf('&g' + 't;') != -1) {
    if (candidates[eval(-1 + ij)].indexOf('spa' + 'n_') == -1) {
    outhtml=outhtml.replace('&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;', '<span' + sis + ' id=span_' + eval(-1 + ij) + '>&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;</span>');
    sis='';
    thelastfocuswas=0;
    parent.document.getElementById('thefocusis').value='0';
    candidates=outhtml.split('&l' + 't;');
    }
    }
    }
    }
    }
    }
    if (outhtml != inhtml) {
    document.body.innerHTML=outhtml;
    setInterval(keepacheck, 1000);
    }
    }
    // return outhtml;
    }

    setTimeout(fixbody, 2000);

    </script>

    … which …

    1. two seconds after loading, looks through its own document.body.innerHTML for &lt;[Parameter Label]&gt; findings to …
    2. encase all such findings within <span id=span_[countOfSuchFindingsStartingAtZereo]> and </span> … saved into a revised …
    3. new document.body.innerHTML representation as above is “slapped over” the existant document.body.innerHTML … and …
    4. parent.document.getElementById(‘thefocusis’).value=’0′; // to get the ball rolling and from then on …
    5. setInterval(keepacheck, 1000); // keeps an eye out for when the parent changes its focus .. so that when it does and for this initial ‘0’ one here now …
    6. the span element equivalent of the one onfocus in the parent is given an orange border here (and any one from the past has its border made to be invisible) … and we …
    7. hashtag navigate our way to this place in the “contextualization” half zoomed in middle cell iframe data via … location.href=’#span_’ + [idOfParentElementInFocus];
  3. … and so putting this into play leaves the user seeing where they are up to in the context of a finished product while they are answering prompt (questions). Are we there yet?!

    Adding to the recent Agenda Speech to Text to Speech LibreOffice Wizard Tutorial progress, then we have changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this (getting all this into content) Agenda live run.

    You can also see this play out at WordPress 4.1.1’s Contextualize Speech to Text to Speech LibreOffice Template Tutorial.


    Previous relevant Agenda Speech to Text to Speech LibreOffice Wizard Tutorial is shown below.

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    We’re happy here, finally, to move onto a new concept with the “Speech to Text to Speech” web application blog posting thread, building on yesterday’s Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial using the recent …

    • Curriculum Vitae (concept) logic … as the basis for a new …
    • Agenda (concept) … an HTML “template” of which is derived from a LibreOffice Wizard Template

    In case we can genericize for a user “owned” additional concept (at a later date), we take careful note of what we have to do to achieve this “by hand”. We’ll see.

    Along the way we changed a couple of things …

    • on a rudimentary call of the web application, on non-mobile platforms, our top (HTML select) dropdown is made to have the size of the number of option “subelements”, so that that non-mobile user can see all the functionality available as they enter the web application
    • for Surveys and Business Letter template and Curriculum Vitae and now Agenda templates we were annoyed by how when there are lots of questions for the user to answer, it went below the fold of the screen eventually, an annoyance self created by the coding of <br> linefeeds after input type=text elements that are removed now, but put back in front of the span elements when they are all reshown again at the end of the form “asking” … the [element].style.display=’none’ DOM statements were good though, rather than [element].style.visibility=’hidden’ DOM statements applied to form elements just answered, as the latter leaves whitespace while the former collapses that whitespace

    Let’s talk about this Agenda template created via a Wizard at LibreOffice, thanks again. As you can see from the …

    sequence of dialog boxes that lead the user through a series of well-defined steps

    … the LibreOffice Wizard alone will suit a lot of people’s purposes for this Agenda meeting concept via a desktop application. The difference with our web application, though, is that it is “web” transportable with how (and where) you could use this functionality.

    The agenda concept hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Agenda live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Do you remember with yesterday’s Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial how we presented a YouTube video means of catering for some automated audio prompting with our Curriculum Vitae web application following our “subdream” of …

    • not having the user to have to lift their head but just dictating all their answers … or …
    • not having the user to have to lift their head but just typing in all their answers

    … and that the other choice in these “uploaded” inhouse content ideas is today’s interfacing “subproject” … and we present this posting courtesy of our “yellow submarine” room … tee, hee

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    For audio (or video) content we can use an (s)ftp file transfer desktop application like FileZilla to perform the uploading of the media files, which we create on Mac OS X’s very useful QuickTime Player desktop application. We are forever using its great Screen Capture functionality, and with this work we combine that with separate Audio Capture sessions that become audio clips added onto the Screen Capture via QuickTime Player’s …


    Edit -> Add Clip

    … option. But those audio clips can also sit alone as an *.m4a file (we called cvtalk.m4a) sitting on the rjmprogramming.com.au web server, and though we could use that media in an audio HTML element, as below …

    Audio Prompting for Curriculum Vitae

    … we prefer to have “less baggage” around today to try to limit “focus clashes” and so make use of the Javascript “Audio” object to work these audio promptings for our Curriculum Vitae web application. As for yesterday, we use caption subtitles files to determine when (and where) to start and stop the audio, where, if these are called [start] and [end] (values in seconds), the broad brush approach to playing the audio prompt is …


    var mediao = new Audio('cvtalk.m4a'); // initialize Audio object in global variable

    function medias() {
    if (mediao) {
    mediao.pause();
    }
    }

    // When called on to play a particular audio prompting, and have plucked out from the global array the relevant [start] and [end] values
    mediao.currentTime = [start];
    mediao.play();
    setTimeout(medias, Math.floor(eval(eval([end] - [start]) * 1000)));

    We now have three types of automated audio prompting choices, in priority usage …

    • Mac OS X say Speech to Text (via MAMP local Apache/PHP/MySql web server)
    • Audio (or Video) on rjmprogramming.com.au website
    • YouTube Video on YouTube

    … and so, now, we need to have a mechanism to offer the user the offer to refuse this service, and if they do, it could be that they wanted to use a different “mode of service”, and so we now offer a new HTML select element (dropdown) to allow for that possibility.

    And, again, we have today’s uploaded prompting (audio and video) media content ideas, augmenting a default preferred (but rare) Mac OS X MAMP say idea, hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Yesterday’s Curriculum Vitae Speech to Text to Speech Prompting Tutorial was about a generic automated prompting solution, but was suited to a relatively small audience, alas. The other choice here is to make your own audio content that you upload, two options for which we can think of being …

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website (which we’ll talk more about soon) … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    But how do we tell the interface we have where to start and stop the video? We construct one of those caption subtitles files, the same one you can see in play below with this YouTube video that we constructed, uploaded, and use for users constructing a Curriculum Vitae and saying they would not mind some prompting …

    There are two approaches here with piecing together the media …

      • create an audio track (and we use Mac OS X QuickTime Player for all this) and take a note of its length … then (like we did for the YouTube video above) …
      • create a screen capture video of that same length
      • Add the Clip of the audio to the end of the video and upload to YouTube

      • create a screen capture video of the actions to create a Curriculum Vitae
      • create an audio track (and we use Mac OS X QuickTime Player for all this) while playing that screen capture video back to yourself … then …
      • Add the Clip of the audio to the end of the video and upload to YouTube … as per …

      Adding to yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s uploaded prompting media content ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


      Previous relevant Curriculum Vitae Speech to Text to Speech Prompting Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Regulars to this current blog posting thread on the theme of “Speech to Text to Speech” will know …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      … but may not know that we also have a “subdream” of (attempting to) getting it so that one or other of …

      • not having the user to have to lift their head but just dictating all their answers … or …
      • not having the user to have to lift their head but just typing in all their answers

      … except perhaps for button presses … can be achieved. We’re not sure here whether this can be achieved, but we do know of a thing we need to do for sure to even get an inkling of a notion on the way to attempting to achieve this “subdream”, that being …


      "we need to be able to use an automated Text to Speech mechanism to have the web application say the words of the prompts to Curriculum Vitae or Survey questions"

      … because only then can we not lift our heads either from looking straight ahead (for Speech to Text dictations) or looking down at a textbox on the screen (for no Speech to Text dictations) during the “prompting phase” of these web applications. Why bother? As much as for “it might make the web application very beneficial”, we would say also that you learn a lot trying.

      Can tell you even before starting on the missing piece to the “jigsaw” that the biggest problem, as often is the case with web applications made up of many components, you run out of timing places to have the “focus” of the webpage being at the correct spot, at any given time. It is the “Speech to Text” bit that is most sensitive here, as well as the fact that a curious thing we know of already, to our amusement, is that the “Speech to Text” can pick up with the microphone words other than the ones the user uttered, like from a radio or television, but not Nala’s woof?! And now we are introducing a new idea where the speakers of the device or computer are bound to be picked up by that same device or computer’s microphone, surely. Well, first off … please don’t call me Shirley … and we’ll see what we end up with here, rather than worrying about every detail now, though think earphones (or headphones) may be one thought.

      Our first idea of a few, today, regarding “not lifting heads” is for those …

      • Mac OS X
      • MAMP (local Apache/PHP/MySql)

      … afficianados out there. Yes, we are intrigued by that internet/intranet type of feeling of combining a “public domain/MAMP local web server” “parent/popup child” scenario that we got into a bit with the blog posting thread headed by Zipfiles in PHP Media Gallery Synchronize Tutorial, and which we are “channelling” today, to the extent that its web application is called as an HTML “iframe child” of our parent web application today, to detect the existence of the two conditions above as to whether to “attempt” the automated “Text to Speech Prompting” we are after. Why “attempted” in double quotes? Well, on the internet, it is rude not to give forewarning of the computer speakers being brought into play without the user’s consent … it’s just a good thing to allow the user to refuse this functionality, if that’s their wish.

      In that aforesaidmentioned blog posting thread you will hear mentioned the wonderful Mac OS X command line say command … say no more… chortle,chortle.

      So, continuing on from yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s Mac OS X/MAMP “say” Text to Speech ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run. You may recall the say.php which has a “popup child” relationship here.


      Previous relevant Curriculum Vitae Speech to Text to Speech Internationalization Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      The modifications of yesterday’s Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial all had a good generic feel to them, but something was definitely missing. Is it too late to ask you to close your eyes and not read the blog posting title? It’s “internationalization” issues, regarding language.

      Language “internationalization” is pretty important, especially for a Curriculum Vitae application. What’s the point of writing a Curriculum Vitae in a language not suited to the people who are meant to read it. Up to now, though, our inhouse addons to the Google

      … already cater for this language “internationalization” very well already, and we feel that we should try our hardest to continue on that sentiment with the “inhouse” work.

      Working from the end result objectives back and through we need to …

      • organize webpage structure via good advice of this link, thanks …

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        ...

        … except that the “en” is English and we want to allow for other two letter language codes the user can choose from the lower middle cell language dropdown (but please allow for translations by doing this before changing any upper middle cell language dropdown)
      • on body element define a dir=”auto” to try to cater for languages whose text is designed to run right to left
      • we use the same codebase for many “layers” of navigation, and throughout that in all ($_GET[]) web browser address bar URLs and ($_POST[]) method=POST forms, we need to be passing any language code information selected by the user along to any webpages which follow all the way through to the end report, such as a Curriculum Vitae report (or document)
      • hardest of all for today, we need to, for the …

        new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter

        intervene at the point with PHP code where we define a default textbox field value …

        function ourstr_replace($froms, $tos, $tstr) {
        global $qqhval;
        $lc="";
        $prevlc="";
        if ($tstr == "") return $tstr;
        $rs=str_replace($froms, $tos, $tstr);
        $xrs=substr($rs,0,1);
        $lc=$xrs;
        for ($ir=1; $ir<strlen($rs); $ir++) {
        if (substr(($rs . " "),$ir,2) == "of") {
        if (substr($rs,(-1 + $ir),1) >= '0' && substr($rs,(-1 + $ir),1) <= '9') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= '0' && substr($rs,$ir,1) <= '9') {
        if (substr($rs,(-1 + $ir),1) == 'f') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= 'A' && substr($rs,$ir,1) <= 'Z') {
        if (substr($rs,(-1 + $ir),1) != ' ') $xrs.=" ";
        }
        $prevlc=$lc;
        $lc=substr($rs,$ir,1);
        $xrs.=substr($rs,$ir,1);
        }
        if ($lc == " ") {
        if ($prevlc == " ") {
        $qqhval=$qqhval; // more to do
        }
        $qqhval=lookup(str_replace("Translation for English word ","",str_replace("Translation for English words ","",$xrs))); //substr($xrs,0,(strlen($xrs) - 1));
        }
        return $xrs;
        }

        … and then bring into play the incredible MyMemory API translations (returning JSON data, by default), thanks, via …



        function lookup($ptoobig) {
        global $langcode;
        $mymc="";
        if (str_replace("en","",$langcode) != '' && strlen(trim($ptoobig)) > 0) {
        $pokay=trim($ptoobig);
        $purl="HTTP://api.mymemory.translated.net/get?q=" . str_replace("+","%20",urlencode($pokay)) . "&langpair=en|" . $langcode;
        // HTTP://api.mymemory.translated.net/get?q=Hello%20World!&langpair=en|it#Ciao Mondo!
        // {"responseData":{"translatedText":"Ciao Mondo!","match":1},"quotaFinished":false,"responseDetails":"","responseStatus":200,"responderId":"242","exception_code":null,"matches":[{"id":"562784765","segment":"Hello World!","translation":"Ciao Mondo!","quality":"74","reference":null,"usage-count":97,"subject":"All","created-by":"MateCat","last-updated-by":"MateCat","create-date":"2018-05-24 22:32:33","last-update-date":"2018-05-24 22:32:33","match":1}]}
        if (file_exists("mym.txt")) $mymc=file_get_contents("mym.txt");
        $findings=explode($purl, $mymc);
        if (sizeof($findings) > 1) {
        if (strlen(explode("\n", $findings[1])[0]) <= 1) {
        return $ptoobig;
        } else {
        return html_entity_decode(str_replace('\u','&#x',substr(explode("\n", $findings[1])[0],1)), ENT_QUOTES, "UTF-8") . " ";
        }
        } else {
        $thisf=str_replace(" "," ",file_get_contents($purl));
        if (strpos($thisf, "responseData") !== false) {
        $fndis=false;
        if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"' . strtolower(trim($ptoobig)) . '"') !== false) {
        if (strpos($thisf, '"segment":"' . strtoupper(trim($ptoobig)) . '","translation":"' . strtoupper(trim($ptoobig)) . '"') !== false) {
        $fndis=false;
        } else {
        $fndis=true;
        file_put_contents("mym.txt", $mymc . $purl . "#" . trim($ptoobig) . "\n");
        return $ptoobig;
        }
        }
        if (!$fndis) {
        if (strpos($thisf, '{"translatedText":"') !== false) {
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', explode('{"translatedText":"', $thisf)[1])[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', explode('{"translatedText":"', $thisf)[1])[0]), ENT_QUOTES, "UTF-8") . " ";
        } else if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') !== false) {
        $fndat=strrpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') + strlen('"segment":"' . strtolower(trim($ptoobig)) . '","translation":"');
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', substr($thisf, $fndat))[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', substr($thisf, $fndat))[0]), ENT_QUOTES, "UTF-8") . " ";
        } else {
        file_put_contents("mym.txt", $mymc . $purl . "\n");
        return $ptoobig;
        }
        }
        } else {
        return $ptoobig;
        }
        }
        }
        return $ptoobig;
        }

      On a whole other level the Google Chrome web browser has an inbuilt translation ability, which users may prefer.

      Today’s language “internationalization” improved functionality hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option, perhaps after first picking a language code from the language code dropdown below it, allowing for those potential translations to be automated into the form default textbox field values.


      Previous relevant Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      We started on a Curriculum Vitae (via LibreOffice template) yesterday with Curriculum Vitae Speech to Text LibreOffice Tutorial and today’s work is “consolidation” before adding any new functionality as such, because we saw improvements galore that could improve what we had as of yesterday.

      Today, as you can see a lot of on today’s tutorial picture, we …

      • when in the Survey and Curriculum Vitae options we used to lose the chance to select other options from the main HTML select element dropdown, and that is fixed today
      • the prompts no longer show underscores
      • so user can get help with, or hear via Text to Speech, the user can now select a language of choice from the language dropdown, and do any of …
        1. onhover (ie. onmouseover)
        2. onclick
        3. have separate window open on arrival of new prompt (as designated by user) … of …

        Google Translate window that often has Text to Speech capabilities

      • better focus to prompt textboxes of forms both as an alternative in Google Chrome, and/or “as the main game” for other web browser types
      • add onblur logic on prompt textboxes of forms enforce at least space and/or some change to a default value, to allow this prompt textbox keyboard entry be accepted as a final value for this Curriculum Vitae or Survey form field value
      • new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter
      • flag to user the way they can enter <br> within prompt textboxes for multiline data entries, via the prompt textboxes onhover (ie. onmouseover) induced title property
      • allow for two types of email ideas …
        1. email the link to a Curriculum Vitae form to fill out to an emailee via the local email client program via an a mailto: email link
        2. email the resultant Curriculum Vitae report (or document) via PHP mail methodology using an HTML email attachment

      No doubt you can think of some improvements too?!

      Today’s “LibreOffice Template” Curriculum Vitae (and Survey) improved functionality hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option.


      Previous relevant Curriculum Vitae Speech to Text LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      With the recent Speech to Text LibreOffice Template Tutorial we opined …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Are we there yet? We’re getting there.

      Today’s work on a simple Curriculum Vitae takes a …

      • LibreOffice template Curriculum Vitae (thanks) …
      • Save As… HTML Document (Writer) (.html) … and new to today’s Curriculum Vitae template …
      • Amend that HTML to add in our own &lt;Parameter Label&gt; … and new today …
      • Add more &lt;Parameter Label&gt; entries allowing for CSS overrides, using for the first time, an HTML textarea (form) element (for a multi-line text entry), entered by the user, optionally changing the default LibreOffice Curriculum Vitae template styling … but as per a lot of the other additions of functionality …
      • We add an HTML select (dropdown) element option to go directly to the user defined &lt;Parameter Label&gt; value definitions … ready for the coalescing at the usual …
      • A report button click/touch shows a webpage Curriculum Vitae resultant report (a fair bit like a form, today)

      And so today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option. On the Google Chrome web browser you could be dictating your Curriculum Vitae in no time!


      Previous relevant Speech to Text LibreOffice Template Tutorial is shown below.

      Speech to Text LibreOffice Template Tutorial

      Speech to Text LibreOffice Template Tutorial

      If you like interpretive computer languages, or “substitutional” type thinking, you would gravitate towards templates. Templates in Word Processing circles, in LibreOffice circles to be precise, which are the circles apt to today’s work, are designed to contain a lot of the donkey work associated with a “thematic document”, like today’s “Business Letter” featured in today’s tutorial picture. Those templates then form the basis for final documents that “plug in” real data where the template has sought to parameterize its data, the LibreOffice (New->Template Save As… HTML Document (Writer) (.html)) via …


      &lt;Parameter Label&gt;

      Yesterday’s Speech to Text Hangman Game Tutorial was good preparation for today, but the real synergies lie with the previous Speech to Text Survey Tutorial as this “LibreOffice Template” side to the story is that “Survey” side to the story but …

      • with the “Label=Value” paradigm we can deduce the “Label” bits from the LibreOffice template rather than having to ask an administrator user to define … and then when executing the …
      • report uses the LibreOffice template (that has parameter substitutions run over it) as its basis rather than a generated HTML table that is populated

      … and so the user can add a URL to a LibreOffice Template “HTML Document (Writer) (.html)” to flag this difference in functionality after selecting the newly named …


      Survey or LibreOffice Template

      … HTML select element option. We hope you can see how time saving this template usage could be for you. We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this live run link.


      Previous relevant Speech to Text Hangman Game Tutorial is shown below.

      Speech to Text Hangman Game Tutorial

      Speech to Text Hangman Game Tutorial

      ESL students can also benefit from forms of learning that are games, and yesterday’s Speech to Text Vocabulary Phrases Tutorial‘s new option to our Google Speech to Text API series of web application functionalities lends itself to an extension of that with a “spelling” component in the form of the popular “Hangman” game many families and school students are likely to know quite well.

      With “Hangman” we want to involve two players, one taking on the web application’s choice of English phrase to solve, and deciding whether to pass on a hint, or not to the other player trying to solve the English phrase letter by letter. Scoring-wise that second player’s score improves if the player solves it before the “noose” comes into play, else the score is reduced by the length of the English phrase involved.

      So what was involved?

      • map tag creation, thanks to the great mobilefish
      • the area tag to div overlay position:absolute ideas as also presented with Very Versus Too Game Primer Tutorial help with initial masking of image parts, before later making that mask have a transparent colour, as a player picks a letter that does not appear in the English phrase attempting to be solved …

        function areatodiv() {
        var areas=document.getElementsByTagName('area'), coordsare=[];
        for (var i=0; i<areas.length; i++) {
        if (('' + areas[i].coords).indexOf(',') != -1) {
        coordsare=areas[i].coords.split(',');
        document.body.innerHTML += "<div onclick=\" document.getElementById(this.id.replace('div','i')).style.zIndex='11'; this.style.zIndex='-9'; this.style.display='transparent';\" id='div" + eval(i + 1) + "' style='border:0px solid red;overflow:hidden;display:block;z-index:3;position:absolute;left:" + eval(-2 + eval(coordsare[0])) + ";top:" + eval(-2 + eval(coordsare[1])) + ";width:" + eval(12 + eval(coordsare[2]) - eval(coordsare[0])) + ";height:" + eval(12 + eval(coordsare[3]) - eval(coordsare[1])) + ";background-color:white;'></div>";
        }
        }
        if (document.URL.indexOf('tosolve=') != -1) {
        ts = location.search.split('tosolve=')[1] ? decodeURIComponent(location.search.split('tosolve=')[1].split('&')[0]) : '';
        cp = location.search.split('curplayer=')[1] ? decodeURIComponent(location.search.split('curplayer=')[1].split('&')[0]) : '1';
        var cl = location.search.split('clue=')[1] ? decodeURIComponent(location.search.split('clue=')[1].split('&')[0]) : '';
        if (ts == '' || !parent.document.getElementById('score') || !parent.document.getElementById('shangman')) {
        doclick();
        } else {
        hscores[0]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[0]);
        hscores[1]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[1]);
        if (cl != '') {
        document.getElementById('clues').innerHTML='Hint: ' + cl;
        } else {
        document.getElementById('clues').innerHTML=cl;
        }
        document.getElementById('divs').setAttribute('data-title', ts);
        for (var ii=0; ii<ts.length; ii++) {
        thisc=ts.substring(ii,eval(1 + ii));
        if (thisc.toLowerCase() >= 'a' && thisc.toLowerCase() <= 'z') {
        thisc='_';
        }
        document.getElementById('divs').innerHTML+=thisc;
        }
        document.getElementById('divs').style.display='block';
        document.getElementById('clues').style.display='block';
        document.getElementById('sels').style.display='block';
        ihsels=document.getElementById('sels').innerHTML;
        }
        } else {
        doclick();
        }
        }

        … as called at the document.body onload event
      • the player letter selection is via an HTML select element size=27 (on non-mobile, so that the player sees all the choices at once)
      • duplicate choices, as we so often do, are quietly rejected via a comparison of the player choice against a global variable we often call “sofar” which is appended by new letter selections
      • additional “final slide” (far too gory to go into) presented when things go wrong

      Today’s “Hangman” game hosting changed PHP code of speech_supervisor.php can be tried out at this Hangman Game mode live run link (or you can use the default live run link), which we hope you or someone you know will try out. The new child HTML iframe code is hangman_bg.html for your perusal.


      Previous relevant Speech to Text Vocabulary Phrases Tutorial is shown below.

      Speech to Text Vocabulary Phrases Tutorial

      Speech to Text Vocabulary Phrases Tutorial

      ESL students can struggle with English Phrases and Idioms, and with that in mind we channel the ideas of the previous English Phrase Guessing Game Primer Tutorial on top of the previous build up from Speech to Text to Speech Tutorial to add a new option called “Vocabulary Phrases” to our Dropdown List of functionality making use of the great Google Speech to Text API.

      But it’s not just pronunciation of the “Vocabulary Phrases” that is of interest here, which the Google Chrome web browser microphone based Google Speech to Text API can be helpful for. Learners of English can be baffled by the completely different meaning of a phrase that can sometimes only have a tenuous connection with the meanings of the individual words making it up. In order to help here we add …

      • “pick another phrase” button … can mean “give up” and/or “life is too short”
      • “look for more information about the phrase” link to … you guessed it … the Google search engine result set … thanks
      • ways for the user to control …
        1. Minimum phrase length
        2. Maximum phrase length
        3. Maximum length of any one word of the phrase

      Today’s “Vocabulary Phrases” changed PHP code of speech_supervisor.php can be tried out at this Vocabulary Phrases mode live run link (or you can use the default live run link), which we hope you or someone you know will find useful.


      Previous relevant Speech to Text to Speech Tutorial is shown below.

      Speech to Text to Speech Tutorial

      Speech to Text to Speech Tutorial

      It’s ESL thoughts back at the top of our thinking today building on yesterday’s Speech to Text Hierarchy Tutorial. We’re going the full circle today, improving on what we have already as far as an ESL learner might be concerned (or perhaps other users too) allowing the user the ability to …


      hear it back

      … via the brilliant Google Translate and its “Text to Speech” capabilities. Hence, “Speech to Text to Speech” in today’s blog posting title.

      We see a twofold advantage here, in that …

      • if a user doesn’t have the foggiest what is going on, they can select a language, and have the middle table cell question (or answer) be translated from English, for themselves … and …
      • in the Google Chrome web browser incarnation, they may answer something and see the transcription happen, and then “hear that (transcription) back”

      … that latter functionality could highlight pronunciation weaknesses, perhaps. Not that we are saying this replaces talking to an active speaker of the language you want to learn, but sometimes there’s just no one about that speaks that language. I’ve tried talking to Nala, but she’s far too dogmatic … boom, boom … though think she might be practising Dalmation out the back of an evening.

      What’s the new mechanism to make this happen? A new HTML select element dropdown of languages is show in the middle table cell, augmenting the Google Speech to Text API language dropdowns, that if populated with a “language of interest” value then looks to either/both …

      • middle table cell question (or answer) … and/or …
      • contents of left (or perhaps right) table cells

      … as the wording to be submitted to Google Translate for translation, in a new window. As you may have seen before if you’ve used Google Translate, once there doing a translation, oftentimes you will be offered a loudspeaker icon on either side of the translation to hear a voice say the words in that language, with the accent of a native speaker (though computerlike).

      Today’s “hearing it back” changed PHP code of speech_supervisor.php can be tried out at this live run link, which we hope you find useful.


      Previous relevant Speech to Text Hierarchy Tutorial is shown below.

      Speech to Text Hierarchy Tutorial

      Speech to Text Hierarchy Tutorial

      Are you amazed like me at how computer software can eventually be boiled down to the difference between …

      • 1
      • 0

      … call it what you will … yes versus notrue versus false (boolean values) … on versus offthe “binary” design?

      If you have the patience, you can break really complex decision making (that you might model with a flow chart) via “yes” versus “no” binary decisions, based on the right questions to ask. And that is what we are doing today, recalling that earlier presented HTML/Javascript Animal Categorization Tutorial to Categorize Animals based on questions.

      As you answer these questions, all effectively “yes” versus “no” ones, you are breaking into the animal kingdom categorization hierarchy to identify an animal of interest you are interested in categorizing. As computers do, no imagination here, but they break the problems they are presented with into “binary” decisions, to get down to the fundamentals of it all.

      And the “yes” and “no” of various languages are just about the most important words for artificial intelligence systems to recognize, so with this in mind, we thought it a good fit to use the right hand cell to open that previous Animal Categorization web application in its own HTML “child” iframe to supply the “parent” with the questions that flow through it and on up to the “parent” where, if using Google Chrome web browser, a “yes” versus “no” spoken answer may return to the “child” for further “hierarchical tunnelling”.

      The changes needed for the “child” iframe web application HTML and Javascript logic revolved around its usage of the “perfect fit” …


      confirm(questionPrompt); // returns true for OK button press and false for Cancel button press

      … “true” and “false” function. But today, because Javascript does not have a sleep function, we needed to add a third return value that we decide to be blank (ie. string “”). Trouble with this is that “” equates to false by Javascript, so in our modified …


      function ourconfirm(prom) {
      var wo=null;
      if (parent.document) {
      if (parent.document.getElementById('divac')) {
      if (parent.document.getElementById('divac').innerHTML == '') {
      parent.document.getElementById('divac').innerHTML=prom.replace('(OK is yes, Cancel is no)','');
      if (parent.document.getElementById('sq')) {
      parent.document.getElementById('sq').innerHTML='<b>' + parent.document.getElementById('divac').innerHTML + '</b><br><br>';
      }
      return "";
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'yes') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'true';
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'no') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'false';
      } else {
      return "";
      }
      } else {
      var cr = confirm(prom);
      if (cr == true) return 'true';
      return 'false';
      }
      } else {
      var crr = confirm(prom);
      if (crr == true) return 'true';
      return 'false';
      }
      }

      … the true and false boolean values become string returns … called, as per our example code snippet, in this changed way


      if (flat_bodied == "") var flat_bodied = ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));
      if (flat_bodied == "") { setTimeout(animal_categorize,5000); return; } else if (flat_bodied == 'true') {
      type_animal = stuff_outside_caret(document.getElementById("flatworm").innerHTML);
      } else {
      type_animal = stuff_outside_caret(document.getElementById("worm_leech").innerHTML);
      }

      … converting many local variables into global variables, as per this declaration above now (declared) up near the top of the Javascript …


      var flat_bodied = ""; // ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));

      … in today’s changed HTML and Javascript code of animal_categorization.html.

      Adding a new “Animal Categorization” HTML select element (dropdown) option onto yesterday’s Speech to Text Survey Tutorial for today’s changed PHP code of speech_supervisor.php, you can be trying this out at this live run link.


      Previous relevant Speech to Text Survey Tutorial is shown below.

      Speech to Text Survey Tutorial

      Speech to Text Survey Tutorial

      On top of yesterday’s Speech to Text ESL Tutorial we add, for the first time, a “Survey” functionality not needing a two player setup. This leaves the right hand table cell to be able to contain an HTML form element, used to “survey” the user on the survey questions you set up when selecting a new “Survey” HTML select element (dropdown) option.

      And so this is where our language of design, PHP, comes to the fore, as a useful language to process the potential for huge amounts of data related to the survey you design.

      We design the web application “Survey” component, so as to be able to email off either/both …

      • survey form as an HTML email attachment via the PHP mail method
      • survey form results as an HTML email link via an a mailto: link to the default email client application of the user

      PHP has it over HTML …

      • creating email as per the first option above … and …
      • being able to post process method=POST data from an HTML form element, where much more data can be handled

      This new functionality can be accessed via an option of the dropdown of this live run link, or a “cut to the chase” survey link for today’s changed PHP code of speech_supervisor.php.


      Previous relevant Speech to Text ESL Tutorial is shown below.

      Speech to Text ESL Tutorial

      Speech to Text ESL Tutorial

      When you involve audio input into a web application it is likely that that web application can become useful with learning a language, such as with ESL (English as a second or foreign language) usage, especially as such learning has …

      • spoken
      • reading
      • writing

      … components to it. As you would appreciate, once the learner is speaking and then that (spoken content) is written out (as a transcript), and the learner is then reading that content, the web application can be a “double whammy” effective learning tool.

      We extend the web application’s functionality from yesterday’s Speech to Text Primer Tutorial using a technique we often use, that being changing the original (guinea pig usage) word “Quiz” into it plus other options presented in a …

      • HTML select (dropdown) element … as per HTML “onload” event …

        <body onload="document.getElementById('preq').innerHTML=dds('Quiz'); document.getElementById('kb').focus(); pickq();">

        … call of the Javascript …

        function dds(qwhat) {
        var selbit="<select id=selbit onchange=' location.href=document.URL.split(\"#\")[0].split(\"?\")[0] + \"?mode=\" + this.value; '><option value=0>" + modes[0] + "</option></select>";
        for (var iselbit=1; iselbit<modes.length; iselbit++) {
        if (mode == iselbit) {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + " selected>" + modes[iselbit] + "</option></select>");
        } else {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + ">" + modes[iselbit] + "</option></select>");
        }
        }
        return qwhat.replace('Quiz',selbit);
        }


        … that sets off onchange event logic to …

      • reload the webpage with a URL ?mode= argument flagging this that is …
      • detected via

        var mode=location.search.split('mode=')[1] ? eval(decodeURIComponent(location.search.split('mode=')[1].split('&')[0])) : 0;
        var modes=["Quiz","Tongue Twisters","Haiku"];
        var arraynames=["questions","tongue_twisters","haiku"];
        var delims=["?","~","`"];
        var bcols=["yellow","lightgreen","lightblue"];

        … enabling, as necessary the …
      • “mapping” of other usage arrays (we are responsible for garnering) onto the original (guinea pig) array “questions” (within “dds” function above) via

        if (mode != 0) {
        eval(arraynames[0] + "=" + arraynames[mode]);

        document.getElementById('tdm').style.backgroundColor=bcols[mode];
        }

      That leaves, apart from the extra content duties, a new scoring mechanism, one new one of which analyzes question words against answer words and scores positive word length score components for answer words found in question words and negative word length score components for question words not found in answer words.

      Again, feel free to have a look at today’s changed PHP code of speech_supervisor.php‘s “Speaking Quiz plus ESL Others”.


      Previous relevant Speech to Text Primer Tutorial is shown below.

      Speech to Text Primer Tutorial

      Speech to Text Primer Tutorial

      There was some great advice that had us dipping our toes into “Speech to Text” web application thoughts. You probably know yourself about the brilliant Google Translate and its “Text to Speech’ capabilities (or read some of our postings here such as Italian French Spanish Verb Conjugation Text to Speech Tutorial)? Well, it’s Google again supplying the brilliance for the obverse ideas used today in our “Speaking Quiz” web application idea.

      “Speaking”, that is, if you are using a recent enough version of the Google Chrome web browser, some HTML aspects of which are eloquently explained by this very useful link utilizing the wonderful Google Speech to Text API.

      If you are interested in “Speech to Text” you should also check out the very interesting Diagflow … Speech to Text.

      Thanks everyone, for these artificial intelligence “dipping our toes” encouragement. Feel free to have a look at today’s PHP code of speech_supervisor.php‘s “Speaking Quiz”.


      Previous relevant Italian French Spanish Verb Conjugation Text to Speech Tutorial is shown below.

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Event Tutorial as shown below we’ve increased functionality of English translations by adding Google Translate Text to Speech capabilities to …

      • Italian
      • French
      • Spanish

      … via a new “loudspeaker” icon.

      Some of the talking points with today’s changes involve …

      • a “reveal” idea whereby the showing of an HTML element is controlled by its Javascript DOM [element].style.width CSS property, whereby the element is effectively invisible at width:1px and in our case today becomes visible, at width:20px, and, thus, clickable, for Google Translate popup window translation and text to speech capabilities via the control of …
      • binary decision making GUI ease of using HTML input tag type=checkbox and the associated Javascript DOM document.getElementById([element]).checked … because …
      • UX-wise it is good to forewarn users with an option when it comes to functionality involving sound
      • use of Javascript DOM document.getElementsByTagName(‘img’) as a means by which to manipulate HTML elements that are not necessarily provided with an ID global property

      As per the other tutorials in this thread, even with new Google Translate Text to Speech and Translation capabilities, nothing changes today about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.


      Previous relevant Italian and French and Spanish Verb Conjugation Event Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Event Tutorial

      Italian and French and Spanish Verb Conjugation Event Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Tense Tutorial as shown below we’ve increased functionality of English transaltions to …

      • Italian
      • French
      • Spanish

      … and the conjugations from WordReference.com by offering onmouseover (ie. hover) or onclick (or mobile touch) event logic for conjugations offered by using the wonderful MyMemory resource to translate these verb conjugations back into English, and present them in an additional column with a different background colour.

      You may recall us using MyMemory once before when we presented HTML/Javascript Hearing and Listening Primer Tutorial earlier on.

      As per the other tutorials in this thread, but even more so with gleaning information from the MyMemory API via a get method, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try out this new functionality.


      Previous relevant Italian and French and Spanish Verb Conjugation Tense Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      We’ve followed up on Italian Verb Conjugation and Tense Tutorial as shown below with “tense” context to some of the conjugations of …

      • Italian
      • French
      • Spanish

      Say “some of the” because …

      Even amongst the conjugating language “triplets” above, noticed that when it comes to the “tense” involved, there can be variations, but don’t need to tell a lot of you this old news. Did set me to thinking a bit about the The Tower of Babel story from the Bible, though. What would the world be like if we all spoke the one language? Esperanto, everyone?

      There’s a link between “language” and “life”. That’s why a language without “verbs” is not a language. And the Earth back in those dark days before any life, had no conduits for “language”. And it’s hard to see how “life” sort of started up? But I guess chemistry experts might be able to tell us how this might have come about.

      “Language” is all about patterns, and mirrors human progress with its “pattern” and “organization” and “flexibility” as a huge part of why we as “humans” got to be such agents of change on Earth. Just wish there had really been a more successful Doctor Dolittle in human history that could have got the “inside goss” (so to speak) on what we could have done better to protect the world’s environments.

      As per the other tutorials in this thread, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try it out, and even contemplate sending us some feedback.


      Previous relevant Italian Verb Conjugation and Tense Tutorial is shown below.

      Italian Verb Conjugation and Tense Tutorial

      Italian Verb Conjugation and Tense Tutorial

      Again, we saw that we could extend the functionality of the recent Italian and French and Spanish Verb Conjugation Tutorial as shown below, by, for Italian, to start with, trying to help the native English speaker out for where to look on the “conjugation” table presented for the English verb of interest, regarding conjugation information that might match their (verb) tense of interest.

      As you probably well know, every language on Earth has its peculiarities regarding how we express ourselves with regard to time, and a lot of that is associated with the verbs, or action words we use, and in the case of …

      • Italian
      • French
      • Spanish

      … that expression of the context of time in the grammatical usage, especially for people speaking the language, is reflected by conjugations made to the verb. Conversely, as I, a native English speaker, got to think about as this web application proceeded, English has words like “am” and “have” and “having” and “been” and “will” and “shall” and “is” and “are” and “was” and “were” and “would” and “should” and “has” and “had” and “to” and ‘”be” and “being” preceeding verbs, which can have, basically, two suffixes “-ing” and “-ed” (expressing present participles and past participles respectively) to try to do what conjugation does for Italian (we program for today) and French and Spanish languages.

      But there’s more to “tense” than Past, Present and Future as you well can imagine should you learn a language other than your native tongue, which you tend to “go along with the flow” perhaps unaware that “tense” exists, for some learners. There are concepts as layers on top about the context of the time the person is speaking relative to the time they are or were talking about … it gets complex … so you get concepts like “Present Perfect Progressive” (which we did a tutorial about at HTML/Javascript Present Perfect Progressive Primer Tutorial) if you get right into the ins and outs of all this grammar … which you might need to do to master that second language.

      Yet again, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in Italian “tense” thoughts in this way, with this live run link.

      Again, we hope you try some Italian, with specified “tense” prefix words and suffix endings, to see how the new functionality helps you out with Italian verb conjugations.


      Previous relevant Italian and French and Spanish Verb Conjugation Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tutorial

      Italian and French and Spanish Verb Conjugation Tutorial

      We saw that we could extend the functionality of yesterday’s Italian Verb Conjugation Primer Tutorial as shown below, by accessing other resources from the great WordReference.com, adding French and Spanish verb conjugation to yesterday’s Italian verb conjugation.

      As a rule we tend to find that replacing text with HTML select “dropdown” menus can help out this adaption pretty effectively. The other feature of today’s Javascript coding is the use of eval to team with the language code to direct user traffic to the correct parts of the WordReference.com website.

      Along the way we added some background “flag” imagery we found at Science Kids … thanks, heaps.

      Down the little brick road we also added a couple of hashtag navigators, HTML a links that just navigate within the page, allowing the user to move from the conjugation yellow zone to the translation zone (if you translated from English), as much as anything because the conjugation may need to be prompted by picking the “verb” amongst the list of “translated” possibilities, which you can then feed into the rightmost HTML input type=text textbox to, more than likely, get the (verb) conjugation you may have missed with the first pass.

      Nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish in this way, with this live run link.

      Hope you try it out.


      Previous relevant Italian Verb Conjugation Primer Tutorial is shown below.

      Italian Verb Conjugation Primer Tutorial

      Italian Verb Conjugation Primer Tutorial

      Learning Italian as a native English speaker is best done when you are young, and beginning recently on this quest, I learnt a bit of this.

      To me, what stuck out, was how easy we get it in English with regard to (the lack of) conjugating verbs, or articles, or adjectives, in our grammar.

      Is it that, in English, we can say something in a hurry and, sort of, wait to fix it up later, because we don’t conjugate verbs in our mind, or is this not how it works in other languages? Actually, am pretty sure no, because conjugation is done so fast in the minds of Italian speakers that it is no issue … hard to imagine, though, from where I’m standing … well, actually, sitting. Am not here to say, but know it is this, that teachers of Italian to English native speakers, concentrate on in early lessons.

      With this in mind, we don’t for one second pretend we are not using the wonderful resources at WordReference.com with today’s web application, but we thank them for their brilliance, and just rearrange things that you could glean perfectly well from here but need to take a few more steps to reach the conjugation (today it’s just verbs) web page bits, whereas we throw the conjugation bits straight at you. And yes, we do try to cater for the irregular verbs, and where they are regular you should see the word “regular” mentioned in the yellow zone conjugation areas … because we all know … well, you know what we mean?!

      The techniques used today do away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html with this live run link.

      So we hope you enjoy this break from our usual (other way around) ESL game (if it’s a game) to some “Conjugate, Italian Style” play.

      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.


      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.

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

Looks Nice Nearby Speech to Text Game Share Tutorial

Looks Nice Nearby Speech to Text Game Share Tutorial

Looks Nice Nearby Speech to Text Game Share Tutorial

Yesterday’s Looks Nice Nearby Speech to Text Game Tutorial ironed out a data size issue between the web application components 2 and 3 below …

  1. the “grandparent” PHP changed PHP code of speech_supervisor.php with its live run … supervising …
  2. the “parent” HTML the changed wls_vs_php.htm … calling …
  3. the “child” HTML the changed colour_wheel.html

… as what goes towards the makeup of the “Looks Nice Game” (of world places). But we had no such large data size issue between components 1 and 2, and that being the case, and component 2 being HTML we choose, as a Sharing mechanism …

  • “a” “mailto:” link (call on the email client application) technique of sending email … or …
  • “a” “sms:” link (call on the messaging client application) technique of sending sms

… being as all we would need to add Share functionality, timing it as an intervention point between components 1 and 2 … for the “Oodnadatta looks nice” case … in an Email or SMS “body” section … is …


https://www.rjmprogramming.com.au/HTMLCSS/wls_vs_php.htm?oneorother=Oodnadatta

… and you can see how a substitution of “mailto:” for “sms:” and vice versa in the two …

Email 📧 SMS 📟
Email URL (you can see via hovering over) SMS URL (you can see via hovering over)

… is pretty programmatically easy, and all possible as easy if you can arrange for simple URLs to control navigation at some interventional stage of an HTML component web application workflow.


Previous relevant Looks Nice Nearby Speech to Text Game Tutorial is shown below.

Looks Nice Nearby Speech to Text Game Tutorial

Looks Nice Nearby Speech to Text Game Tutorial

In order to progress yesterday’s Looks Nice Speech to Text Game Tutorial‘s functionality from only locating your Country Capitals and TimeZone Places to, today, including a lot more places you might find geographical references for (and link them to a nearby TimeZone place in that same country), we interplay two changing HTML web applications and find we need to implement another scenario like Window LocalStorage Client Versus Server Primer Tutorial‘s …

Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML/Javascript recipient via ? and & argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we’ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.

Hint: Yes, we’ve raved on about this too?! Does the blog posting title give it away? Okay, yes, it should read “localStorage”, but thought we’d gone past such juvenile finickiness since the Whac-A-Mole controversy of 1st December 2019 (or even The Great Tea Trolley Disaster of ’67, we daresay).

It can even use a “self-destruct” approach to the use of this “localStorage” on having used it because …

  • the web application knows who is using it (localStorage) … and on having accessed and read it …
  • the web application knows it (localStorage) is of no use to any other user (in this web application’s case, at least)

… because we are passing information from a web application (doesn’t matter whether HTML or PHP) to HTML we have no HTML form method=POST available to us (though we could just encase the entire HTML into some PHP innards) and there is enough data that would start resulting in HTTP Error 414 request URI too long issues in an HTML form method=GET scenario.

On the sender HTML the changed wls_vs_php.htm side we have calling Javascript code like …

if (window.localStorage) {
localStorage.setItem('wls_vs_php_colour_wheel_style', encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0].replace('display: none;','')));
location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[0]) + '&altlongis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[1]) + '&extrastyle=%20'; // + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0]);
} else {
location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[0]) + '&altlongis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[1]) + '&extrastyle=' + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0].replace('display: none;',''));
}

And at the receiving HTML the changed colour_wheel.html side we have called Javascript code like …

var altplacename=location.search.split('butp=')[1] ? decodeURIComponent(location.search.split('butp=')[1].split('&')[0]) : '';
var placeurl=location.search.split('placeurl=')[1] ? decodeURIComponent(location.search.split('placeurl=')[1].split('&')[0]) : '';
var extrastyle=location.search.split('extrastyle=')[1] ? extralocal(decodeURIComponent(location.search.split('extrastyle=')[1].split('&')[0]).replace(/\+/g,' ')) : '';
var altlatis=location.search.split('altlatis=')[1] ? decodeURIComponent(location.search.split('altlatis=')[1].split('&')[0]) : '';
var altlongis=location.search.split('altlongis=')[1] ? decodeURIComponent(location.search.split('altlongis=')[1].split('&')[0]) : '';

function extralocal(proposedes) {
if (proposedes != '' && proposedes.trim() == '') {
if (window.localStorage) {
if (('' + localStorage.getItem('wls_vs_php_colour_wheel_style')) != '') {
var retvis=decodeURIComponent(localStorage.getItem('wls_vs_php_colour_wheel_style'));
localStorage.removeItem('wls_vs_php_colour_wheel_style');
return retvis;
}
}
}
return proposedes;
}

… making the HTML be able to accept vastly bigger amounts of data, process it, and even, in this case, where no other application would be interested in it, “self-destruct” it. You will have noticed the deliberate ordering of the arguments so that the lengthy one is last in the list, because we know the others will not overshoot the web server’s URL length limit on their own, and we signal that the lengthy “extrastyle” data might exist in window.localStorage by passing across one blank rather than nothing.

Again, we hope you try it out (with the remote) with some other place name candidates like Oodnadatta.


Previous relevant Looks Nice Speech to Text Game Tutorial is shown below.

Looks Nice Speech to Text Game Tutorial

Looks Nice Speech to Text Game Tutorial

It’s been too long getting back to some Speech to Text work, made possible for us via the very generous Google Speech to Text API functionality we last talked about at Contextualize Speech to Text to Speech LibreOffice Template Tutorial.

What prompted the revisit? Tahiti. Yes, many years ago here in Australia we had an “earworm” of a television commercial that stuck in a lot of minds …

… including yours truly. Now we’re not saying we agree with the sentiments of the advertisement, but it is fun to picture yourself sitting in the bath of a private plane in the age of Siri and Cortana and within “microphone shot” of an order to the cockpit (and no pits were harmed in the making of this blog post).

And so we looked into it, and did find the usual “speech to text” Google Chrome limitation, but then thought for others we could provide a textbox (rather than making them eat the leftover cake, that is), and found it needed interfacing on two fronts …

  • the supervisory changed PHP code of speech_supervisor.php with its live run needed to be tweaked in the addition of a new select (dropdown) element “Tahiti Looks Nice Game” option … the selection of which calls …
  • the supervised the changed wls_vs_php.htm

    var getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getoneorother=location.search.split('oneorother=')[1] ? decodeURIComponent(location.search.split('oneorother=')[1].split('&')[0]).replace(/\+/g,' ') : '';

    // ... and then later within document.body onload event Javascript logic ...

    if (getoneorother != '' && getcapitals == '' && getcountries == '') {
    var nomore=false, thectyis='', theccis='', vstwo, vsthree, thespi='';
    var vsone=document.getElementById('scapitals').innerHTML;
    vstwo=document.getElementById('selceq').innerHTML;
    vsthree=document.getElementById('sele').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    thespi='' + vsone.split('">' + thectyis)[0].split(' value="')[eval(-1 + vsone.split('">' + thectyis)[0].split(' value="').length)].split('"')[0];
    if (vstwo.indexOf('>' + getoneorother) != -1) {
    thectyis=getoneorother + vstwo.split('>' + getoneorother)[1].split('<')[0];
    theccis=vstwo.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vstwo.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    } else if (vstwo.toUpperCase().indexOf('>' + thespi.toUpperCase()) != -1) {
    thectyis=thectyis + vstwo.split('>' + thespi)[1].split('<')[0];
    theccis=vstwo.split('>' + thespi)[0].split(' value="')[eval(-1 + vstwo.split('>' + thespi)[0].split(' value="').length)].split('"')[0];
    vstwo=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vstwo.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else {
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    } else if (vstwo.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vstwo.split('/' + getoneorother)[0].split('>')[eval(-1 + vstwo.split('/' + getoneorother)[0].split('>').length)];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + getoneorother + vstwo.split('/' + getoneorother)[1]).replace(/\ /g,'_');
    } else if (vsone.toUpperCase().indexOf(' value="' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    theccis=getoneorother + vsone.split(' value="' + getoneorother)[1].split('"')[0];
    thectyis=vsone.split(' value="' + theccis + '">')[1].split('<')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    if (!nomore) {
    vsone=document.getElementById('selceq').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    //document.URL.split('?')[0].split('#')[0] + '?andgo=y&countries=' + encodeURIComponent(thectyis) + '&capitals=' +
    }
    if (!nomore) {
    if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    }
    }
    }
    }

We hope you try it out (with the remote).


Previous relevant Contextualize Speech to Text to Speech LibreOffice Template Tutorial is shown below.

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Maybe it’s just my weakness, but what I often find writing web applications is that I come back to them several months later and wonder, sometimes, how to work them. This is a weakness of “contextualization”.

Contextualization is putting your audience “into the picture” as much as is possible. Who says this is always easy? We’re not, but it is really good to try. A big thing in the programmer’s favour with respect to good contextualization practice is if you control the processes. Luckily with the current “Speech to Text to Speech” web application ideas, we control the data. Never forget the power of this, if you happen to lose sight of this ( … but then I guess it’s too late … boo hoo). Barring lack of backward compatibility, our vision of the “sin of all sins”, when you control the data you get to control …

  • the look of things
  • the placement of things (which we also have the parent do a bit of with today’s work)
  • your own data delimitation, or other data arrangement, rules
  • the relationships between parent and child HTML web page and child iframe or popup window arrangements

You may have heard us talking about “hard working duck” child iframe HTML components to projects? In these designs the child is doing the bulk of the work. Up to now, with our LibreOffice template “ducks” (in their HTML iframe elements) have been crucial but not dynamically hardworking as such. More just the scaffolding for the job. But today we’re giving them more to do, because after several days thinking of approaches to it, we’ve “landed” onto the approach for added “contextualization” that goes along the lines …

  1. the parent Speech to Text to Speech PHP supervisor will have the added role with a new …

    <input type=hidden id=thefocusis value=''></input>

    … to “pledge” to …

    1. keep it populated with a number representing the bit after “s” for the ID of the span element containing a form prompt label where the focus is near (focus is actually on the accompanying input type=text textbox element)
    2. window.scrollTo(0,0); // few seconds after a change of focus … not too much to ask?!
  2. the children (ie. any LibreOffice template piece of HTML from now on) in iframe elements get a new bit of Javascript near the end of their document.body (ie. before </body>) .. as per …

    <script type='text/javascript'>

    var thelastfocuswas=-1;
    var thisfocusis=-1;

    function keepacheck() {
    var ic=parent.document.getElementById('thefocusis').value;
    if (ic != '') {
    if (eval(ic) != thelastfocuswas) {
    if (thelastfocuswas != -1) {
    document.getElementById('span_' + thelastfocuswas).style.border='0px solid orange';
    }
    thisfocusis=eval(ic);
    document.getElementById('span_' + thisfocusis).style.border='2px solid orange';
    location.href='#' + 'span_' + thisfocusis;
    thelastfocuswas=thisfocusis;
    }
    }
    }

    function fixbody() {
    var ij, inhtml=document.body.innerHTML;
    var outhtml=inhtml;
    var sis=' style="border:2px solid orange;" ';
    if (document.URL.indexOf('goto=') != -1) {
    if (parent.document) {
    if (parent.document.getElementById('thefocusis')) {
    var candidates=outhtml.split('&l' + 't;');
    var cl=candidates.length;
    if (candidates.length > 1) {
    for (ij=1; ij<cl; ij++) {
    if (candidates[ij].indexOf('&g' + 't;') != -1) {
    if (candidates[eval(-1 + ij)].indexOf('spa' + 'n_') == -1) {
    outhtml=outhtml.replace('&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;', '<span' + sis + ' id=span_' + eval(-1 + ij) + '>&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;</span>');
    sis='';
    thelastfocuswas=0;
    parent.document.getElementById('thefocusis').value='0';
    candidates=outhtml.split('&l' + 't;');
    }
    }
    }
    }
    }
    }
    if (outhtml != inhtml) {
    document.body.innerHTML=outhtml;
    setInterval(keepacheck, 1000);
    }
    }
    // return outhtml;
    }

    setTimeout(fixbody, 2000);

    </script>

    … which …

    1. two seconds after loading, looks through its own document.body.innerHTML for &lt;[Parameter Label]&gt; findings to …
    2. encase all such findings within <span id=span_[countOfSuchFindingsStartingAtZereo]> and </span> … saved into a revised …
    3. new document.body.innerHTML representation as above is “slapped over” the existant document.body.innerHTML … and …
    4. parent.document.getElementById(‘thefocusis’).value=’0′; // to get the ball rolling and from then on …
    5. setInterval(keepacheck, 1000); // keeps an eye out for when the parent changes its focus .. so that when it does and for this initial ‘0’ one here now …
    6. the span element equivalent of the one onfocus in the parent is given an orange border here (and any one from the past has its border made to be invisible) … and we …
    7. hashtag navigate our way to this place in the “contextualization” half zoomed in middle cell iframe data via … location.href=’#span_’ + [idOfParentElementInFocus];
  3. … and so putting this into play leaves the user seeing where they are up to in the context of a finished product while they are answering prompt (questions). Are we there yet?!

    Adding to the recent Agenda Speech to Text to Speech LibreOffice Wizard Tutorial progress, then we have changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this (getting all this into content) Agenda live run.

    You can also see this play out at WordPress 4.1.1’s Contextualize Speech to Text to Speech LibreOffice Template Tutorial.


    Previous relevant Agenda Speech to Text to Speech LibreOffice Wizard Tutorial is shown below.

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    We’re happy here, finally, to move onto a new concept with the “Speech to Text to Speech” web application blog posting thread, building on yesterday’s Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial using the recent …

    • Curriculum Vitae (concept) logic … as the basis for a new …
    • Agenda (concept) … an HTML “template” of which is derived from a LibreOffice Wizard Template

    In case we can genericize for a user “owned” additional concept (at a later date), we take careful note of what we have to do to achieve this “by hand”. We’ll see.

    Along the way we changed a couple of things …

    • on a rudimentary call of the web application, on non-mobile platforms, our top (HTML select) dropdown is made to have the size of the number of option “subelements”, so that that non-mobile user can see all the functionality available as they enter the web application
    • for Surveys and Business Letter template and Curriculum Vitae and now Agenda templates we were annoyed by how when there are lots of questions for the user to answer, it went below the fold of the screen eventually, an annoyance self created by the coding of <br> linefeeds after input type=text elements that are removed now, but put back in front of the span elements when they are all reshown again at the end of the form “asking” … the [element].style.display=’none’ DOM statements were good though, rather than [element].style.visibility=’hidden’ DOM statements applied to form elements just answered, as the latter leaves whitespace while the former collapses that whitespace

    Let’s talk about this Agenda template created via a Wizard at LibreOffice, thanks again. As you can see from the …

    sequence of dialog boxes that lead the user through a series of well-defined steps

    … the LibreOffice Wizard alone will suit a lot of people’s purposes for this Agenda meeting concept via a desktop application. The difference with our web application, though, is that it is “web” transportable with how (and where) you could use this functionality.

    The agenda concept hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Agenda live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Do you remember with yesterday’s Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial how we presented a YouTube video means of catering for some automated audio prompting with our Curriculum Vitae web application following our “subdream” of …

    • not having the user to have to lift their head but just dictating all their answers … or …
    • not having the user to have to lift their head but just typing in all their answers

    … and that the other choice in these “uploaded” inhouse content ideas is today’s interfacing “subproject” … and we present this posting courtesy of our “yellow submarine” room … tee, hee

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    For audio (or video) content we can use an (s)ftp file transfer desktop application like FileZilla to perform the uploading of the media files, which we create on Mac OS X’s very useful QuickTime Player desktop application. We are forever using its great Screen Capture functionality, and with this work we combine that with separate Audio Capture sessions that become audio clips added onto the Screen Capture via QuickTime Player’s …


    Edit -> Add Clip

    … option. But those audio clips can also sit alone as an *.m4a file (we called cvtalk.m4a) sitting on the rjmprogramming.com.au web server, and though we could use that media in an audio HTML element, as below …

    Audio Prompting for Curriculum Vitae

    … we prefer to have “less baggage” around today to try to limit “focus clashes” and so make use of the Javascript “Audio” object to work these audio promptings for our Curriculum Vitae web application. As for yesterday, we use caption subtitles files to determine when (and where) to start and stop the audio, where, if these are called [start] and [end] (values in seconds), the broad brush approach to playing the audio prompt is …


    var mediao = new Audio('cvtalk.m4a'); // initialize Audio object in global variable

    function medias() {
    if (mediao) {
    mediao.pause();
    }
    }

    // When called on to play a particular audio prompting, and have plucked out from the global array the relevant [start] and [end] values
    mediao.currentTime = [start];
    mediao.play();
    setTimeout(medias, Math.floor(eval(eval([end] - [start]) * 1000)));

    We now have three types of automated audio prompting choices, in priority usage …

    • Mac OS X say Speech to Text (via MAMP local Apache/PHP/MySql web server)
    • Audio (or Video) on rjmprogramming.com.au website
    • YouTube Video on YouTube

    … and so, now, we need to have a mechanism to offer the user the offer to refuse this service, and if they do, it could be that they wanted to use a different “mode of service”, and so we now offer a new HTML select element (dropdown) to allow for that possibility.

    And, again, we have today’s uploaded prompting (audio and video) media content ideas, augmenting a default preferred (but rare) Mac OS X MAMP say idea, hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Yesterday’s Curriculum Vitae Speech to Text to Speech Prompting Tutorial was about a generic automated prompting solution, but was suited to a relatively small audience, alas. The other choice here is to make your own audio content that you upload, two options for which we can think of being …

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website (which we’ll talk more about soon) … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    But how do we tell the interface we have where to start and stop the video? We construct one of those caption subtitles files, the same one you can see in play below with this YouTube video that we constructed, uploaded, and use for users constructing a Curriculum Vitae and saying they would not mind some prompting …

    There are two approaches here with piecing together the media …

      • create an audio track (and we use Mac OS X QuickTime Player for all this) and take a note of its length … then (like we did for the YouTube video above) …
      • create a screen capture video of that same length
      • Add the Clip of the audio to the end of the video and upload to YouTube

      • create a screen capture video of the actions to create a Curriculum Vitae
      • create an audio track (and we use Mac OS X QuickTime Player for all this) while playing that screen capture video back to yourself … then …
      • Add the Clip of the audio to the end of the video and upload to YouTube … as per …

      Adding to yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s uploaded prompting media content ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


      Previous relevant Curriculum Vitae Speech to Text to Speech Prompting Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Regulars to this current blog posting thread on the theme of “Speech to Text to Speech” will know …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      … but may not know that we also have a “subdream” of (attempting to) getting it so that one or other of …

      • not having the user to have to lift their head but just dictating all their answers … or …
      • not having the user to have to lift their head but just typing in all their answers

      … except perhaps for button presses … can be achieved. We’re not sure here whether this can be achieved, but we do know of a thing we need to do for sure to even get an inkling of a notion on the way to attempting to achieve this “subdream”, that being …


      "we need to be able to use an automated Text to Speech mechanism to have the web application say the words of the prompts to Curriculum Vitae or Survey questions"

      … because only then can we not lift our heads either from looking straight ahead (for Speech to Text dictations) or looking down at a textbox on the screen (for no Speech to Text dictations) during the “prompting phase” of these web applications. Why bother? As much as for “it might make the web application very beneficial”, we would say also that you learn a lot trying.

      Can tell you even before starting on the missing piece to the “jigsaw” that the biggest problem, as often is the case with web applications made up of many components, you run out of timing places to have the “focus” of the webpage being at the correct spot, at any given time. It is the “Speech to Text” bit that is most sensitive here, as well as the fact that a curious thing we know of already, to our amusement, is that the “Speech to Text” can pick up with the microphone words other than the ones the user uttered, like from a radio or television, but not Nala’s woof?! And now we are introducing a new idea where the speakers of the device or computer are bound to be picked up by that same device or computer’s microphone, surely. Well, first off … please don’t call me Shirley … and we’ll see what we end up with here, rather than worrying about every detail now, though think earphones (or headphones) may be one thought.

      Our first idea of a few, today, regarding “not lifting heads” is for those …

      • Mac OS X
      • MAMP (local Apache/PHP/MySql)

      … afficianados out there. Yes, we are intrigued by that internet/intranet type of feeling of combining a “public domain/MAMP local web server” “parent/popup child” scenario that we got into a bit with the blog posting thread headed by Zipfiles in PHP Media Gallery Synchronize Tutorial, and which we are “channelling” today, to the extent that its web application is called as an HTML “iframe child” of our parent web application today, to detect the existence of the two conditions above as to whether to “attempt” the automated “Text to Speech Prompting” we are after. Why “attempted” in double quotes? Well, on the internet, it is rude not to give forewarning of the computer speakers being brought into play without the user’s consent … it’s just a good thing to allow the user to refuse this functionality, if that’s their wish.

      In that aforesaidmentioned blog posting thread you will hear mentioned the wonderful Mac OS X command line say command … say no more… chortle,chortle.

      So, continuing on from yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s Mac OS X/MAMP “say” Text to Speech ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run. You may recall the say.php which has a “popup child” relationship here.


      Previous relevant Curriculum Vitae Speech to Text to Speech Internationalization Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      The modifications of yesterday’s Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial all had a good generic feel to them, but something was definitely missing. Is it too late to ask you to close your eyes and not read the blog posting title? It’s “internationalization” issues, regarding language.

      Language “internationalization” is pretty important, especially for a Curriculum Vitae application. What’s the point of writing a Curriculum Vitae in a language not suited to the people who are meant to read it. Up to now, though, our inhouse addons to the Google

      … already cater for this language “internationalization” very well already, and we feel that we should try our hardest to continue on that sentiment with the “inhouse” work.

      Working from the end result objectives back and through we need to …

      • organize webpage structure via good advice of this link, thanks …

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        ...

        … except that the “en” is English and we want to allow for other two letter language codes the user can choose from the lower middle cell language dropdown (but please allow for translations by doing this before changing any upper middle cell language dropdown)
      • on body element define a dir=”auto” to try to cater for languages whose text is designed to run right to left
      • we use the same codebase for many “layers” of navigation, and throughout that in all ($_GET[]) web browser address bar URLs and ($_POST[]) method=POST forms, we need to be passing any language code information selected by the user along to any webpages which follow all the way through to the end report, such as a Curriculum Vitae report (or document)
      • hardest of all for today, we need to, for the …

        new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter

        intervene at the point with PHP code where we define a default textbox field value …

        function ourstr_replace($froms, $tos, $tstr) {
        global $qqhval;
        $lc="";
        $prevlc="";
        if ($tstr == "") return $tstr;
        $rs=str_replace($froms, $tos, $tstr);
        $xrs=substr($rs,0,1);
        $lc=$xrs;
        for ($ir=1; $ir<strlen($rs); $ir++) {
        if (substr(($rs . " "),$ir,2) == "of") {
        if (substr($rs,(-1 + $ir),1) >= '0' && substr($rs,(-1 + $ir),1) <= '9') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= '0' && substr($rs,$ir,1) <= '9') {
        if (substr($rs,(-1 + $ir),1) == 'f') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= 'A' && substr($rs,$ir,1) <= 'Z') {
        if (substr($rs,(-1 + $ir),1) != ' ') $xrs.=" ";
        }
        $prevlc=$lc;
        $lc=substr($rs,$ir,1);
        $xrs.=substr($rs,$ir,1);
        }
        if ($lc == " ") {
        if ($prevlc == " ") {
        $qqhval=$qqhval; // more to do
        }
        $qqhval=lookup(str_replace("Translation for English word ","",str_replace("Translation for English words ","",$xrs))); //substr($xrs,0,(strlen($xrs) - 1));
        }
        return $xrs;
        }

        … and then bring into play the incredible MyMemory API translations (returning JSON data, by default), thanks, via …



        function lookup($ptoobig) {
        global $langcode;
        $mymc="";
        if (str_replace("en","",$langcode) != '' && strlen(trim($ptoobig)) > 0) {
        $pokay=trim($ptoobig);
        $purl="HTTP://api.mymemory.translated.net/get?q=" . str_replace("+","%20",urlencode($pokay)) . "&langpair=en|" . $langcode;
        // HTTP://api.mymemory.translated.net/get?q=Hello%20World!&langpair=en|it#Ciao Mondo!
        // {"responseData":{"translatedText":"Ciao Mondo!","match":1},"quotaFinished":false,"responseDetails":"","responseStatus":200,"responderId":"242","exception_code":null,"matches":[{"id":"562784765","segment":"Hello World!","translation":"Ciao Mondo!","quality":"74","reference":null,"usage-count":97,"subject":"All","created-by":"MateCat","last-updated-by":"MateCat","create-date":"2018-05-24 22:32:33","last-update-date":"2018-05-24 22:32:33","match":1}]}
        if (file_exists("mym.txt")) $mymc=file_get_contents("mym.txt");
        $findings=explode($purl, $mymc);
        if (sizeof($findings) > 1) {
        if (strlen(explode("\n", $findings[1])[0]) <= 1) {
        return $ptoobig;
        } else {
        return html_entity_decode(str_replace('\u','&#x',substr(explode("\n", $findings[1])[0],1)), ENT_QUOTES, "UTF-8") . " ";
        }
        } else {
        $thisf=str_replace(" "," ",file_get_contents($purl));
        if (strpos($thisf, "responseData") !== false) {
        $fndis=false;
        if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"' . strtolower(trim($ptoobig)) . '"') !== false) {
        if (strpos($thisf, '"segment":"' . strtoupper(trim($ptoobig)) . '","translation":"' . strtoupper(trim($ptoobig)) . '"') !== false) {
        $fndis=false;
        } else {
        $fndis=true;
        file_put_contents("mym.txt", $mymc . $purl . "#" . trim($ptoobig) . "\n");
        return $ptoobig;
        }
        }
        if (!$fndis) {
        if (strpos($thisf, '{"translatedText":"') !== false) {
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', explode('{"translatedText":"', $thisf)[1])[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', explode('{"translatedText":"', $thisf)[1])[0]), ENT_QUOTES, "UTF-8") . " ";
        } else if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') !== false) {
        $fndat=strrpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') + strlen('"segment":"' . strtolower(trim($ptoobig)) . '","translation":"');
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', substr($thisf, $fndat))[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', substr($thisf, $fndat))[0]), ENT_QUOTES, "UTF-8") . " ";
        } else {
        file_put_contents("mym.txt", $mymc . $purl . "\n");
        return $ptoobig;
        }
        }
        } else {
        return $ptoobig;
        }
        }
        }
        return $ptoobig;
        }

      On a whole other level the Google Chrome web browser has an inbuilt translation ability, which users may prefer.

      Today’s language “internationalization” improved functionality hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option, perhaps after first picking a language code from the language code dropdown below it, allowing for those potential translations to be automated into the form default textbox field values.


      Previous relevant Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      We started on a Curriculum Vitae (via LibreOffice template) yesterday with Curriculum Vitae Speech to Text LibreOffice Tutorial and today’s work is “consolidation” before adding any new functionality as such, because we saw improvements galore that could improve what we had as of yesterday.

      Today, as you can see a lot of on today’s tutorial picture, we …

      • when in the Survey and Curriculum Vitae options we used to lose the chance to select other options from the main HTML select element dropdown, and that is fixed today
      • the prompts no longer show underscores
      • so user can get help with, or hear via Text to Speech, the user can now select a language of choice from the language dropdown, and do any of …
        1. onhover (ie. onmouseover)
        2. onclick
        3. have separate window open on arrival of new prompt (as designated by user) … of …

        Google Translate window that often has Text to Speech capabilities

      • better focus to prompt textboxes of forms both as an alternative in Google Chrome, and/or “as the main game” for other web browser types
      • add onblur logic on prompt textboxes of forms enforce at least space and/or some change to a default value, to allow this prompt textbox keyboard entry be accepted as a final value for this Curriculum Vitae or Survey form field value
      • new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter
      • flag to user the way they can enter <br> within prompt textboxes for multiline data entries, via the prompt textboxes onhover (ie. onmouseover) induced title property
      • allow for two types of email ideas …
        1. email the link to a Curriculum Vitae form to fill out to an emailee via the local email client program via an a mailto: email link
        2. email the resultant Curriculum Vitae report (or document) via PHP mail methodology using an HTML email attachment

      No doubt you can think of some improvements too?!

      Today’s “LibreOffice Template” Curriculum Vitae (and Survey) improved functionality hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option.


      Previous relevant Curriculum Vitae Speech to Text LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      With the recent Speech to Text LibreOffice Template Tutorial we opined …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Are we there yet? We’re getting there.

      Today’s work on a simple Curriculum Vitae takes a …

      • LibreOffice template Curriculum Vitae (thanks) …
      • Save As… HTML Document (Writer) (.html) … and new to today’s Curriculum Vitae template …
      • Amend that HTML to add in our own &lt;Parameter Label&gt; … and new today …
      • Add more &lt;Parameter Label&gt; entries allowing for CSS overrides, using for the first time, an HTML textarea (form) element (for a multi-line text entry), entered by the user, optionally changing the default LibreOffice Curriculum Vitae template styling … but as per a lot of the other additions of functionality …
      • We add an HTML select (dropdown) element option to go directly to the user defined &lt;Parameter Label&gt; value definitions … ready for the coalescing at the usual …
      • A report button click/touch shows a webpage Curriculum Vitae resultant report (a fair bit like a form, today)

      And so today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option. On the Google Chrome web browser you could be dictating your Curriculum Vitae in no time!


      Previous relevant Speech to Text LibreOffice Template Tutorial is shown below.

      Speech to Text LibreOffice Template Tutorial

      Speech to Text LibreOffice Template Tutorial

      If you like interpretive computer languages, or “substitutional” type thinking, you would gravitate towards templates. Templates in Word Processing circles, in LibreOffice circles to be precise, which are the circles apt to today’s work, are designed to contain a lot of the donkey work associated with a “thematic document”, like today’s “Business Letter” featured in today’s tutorial picture. Those templates then form the basis for final documents that “plug in” real data where the template has sought to parameterize its data, the LibreOffice (New->Template Save As… HTML Document (Writer) (.html)) via …


      &lt;Parameter Label&gt;

      Yesterday’s Speech to Text Hangman Game Tutorial was good preparation for today, but the real synergies lie with the previous Speech to Text Survey Tutorial as this “LibreOffice Template” side to the story is that “Survey” side to the story but …

      • with the “Label=Value” paradigm we can deduce the “Label” bits from the LibreOffice template rather than having to ask an administrator user to define … and then when executing the …
      • report uses the LibreOffice template (that has parameter substitutions run over it) as its basis rather than a generated HTML table that is populated

      … and so the user can add a URL to a LibreOffice Template “HTML Document (Writer) (.html)” to flag this difference in functionality after selecting the newly named …


      Survey or LibreOffice Template

      … HTML select element option. We hope you can see how time saving this template usage could be for you. We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this live run link.


      Previous relevant Speech to Text Hangman Game Tutorial is shown below.

      Speech to Text Hangman Game Tutorial

      Speech to Text Hangman Game Tutorial

      ESL students can also benefit from forms of learning that are games, and yesterday’s Speech to Text Vocabulary Phrases Tutorial‘s new option to our Google Speech to Text API series of web application functionalities lends itself to an extension of that with a “spelling” component in the form of the popular “Hangman” game many families and school students are likely to know quite well.

      With “Hangman” we want to involve two players, one taking on the web application’s choice of English phrase to solve, and deciding whether to pass on a hint, or not to the other player trying to solve the English phrase letter by letter. Scoring-wise that second player’s score improves if the player solves it before the “noose” comes into play, else the score is reduced by the length of the English phrase involved.

      So what was involved?

      • map tag creation, thanks to the great mobilefish
      • the area tag to div overlay position:absolute ideas as also presented with Very Versus Too Game Primer Tutorial help with initial masking of image parts, before later making that mask have a transparent colour, as a player picks a letter that does not appear in the English phrase attempting to be solved …

        function areatodiv() {
        var areas=document.getElementsByTagName('area'), coordsare=[];
        for (var i=0; i<areas.length; i++) {
        if (('' + areas[i].coords).indexOf(',') != -1) {
        coordsare=areas[i].coords.split(',');
        document.body.innerHTML += "<div onclick=\" document.getElementById(this.id.replace('div','i')).style.zIndex='11'; this.style.zIndex='-9'; this.style.display='transparent';\" id='div" + eval(i + 1) + "' style='border:0px solid red;overflow:hidden;display:block;z-index:3;position:absolute;left:" + eval(-2 + eval(coordsare[0])) + ";top:" + eval(-2 + eval(coordsare[1])) + ";width:" + eval(12 + eval(coordsare[2]) - eval(coordsare[0])) + ";height:" + eval(12 + eval(coordsare[3]) - eval(coordsare[1])) + ";background-color:white;'></div>";
        }
        }
        if (document.URL.indexOf('tosolve=') != -1) {
        ts = location.search.split('tosolve=')[1] ? decodeURIComponent(location.search.split('tosolve=')[1].split('&')[0]) : '';
        cp = location.search.split('curplayer=')[1] ? decodeURIComponent(location.search.split('curplayer=')[1].split('&')[0]) : '1';
        var cl = location.search.split('clue=')[1] ? decodeURIComponent(location.search.split('clue=')[1].split('&')[0]) : '';
        if (ts == '' || !parent.document.getElementById('score') || !parent.document.getElementById('shangman')) {
        doclick();
        } else {
        hscores[0]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[0]);
        hscores[1]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[1]);
        if (cl != '') {
        document.getElementById('clues').innerHTML='Hint: ' + cl;
        } else {
        document.getElementById('clues').innerHTML=cl;
        }
        document.getElementById('divs').setAttribute('data-title', ts);
        for (var ii=0; ii<ts.length; ii++) {
        thisc=ts.substring(ii,eval(1 + ii));
        if (thisc.toLowerCase() >= 'a' && thisc.toLowerCase() <= 'z') {
        thisc='_';
        }
        document.getElementById('divs').innerHTML+=thisc;
        }
        document.getElementById('divs').style.display='block';
        document.getElementById('clues').style.display='block';
        document.getElementById('sels').style.display='block';
        ihsels=document.getElementById('sels').innerHTML;
        }
        } else {
        doclick();
        }
        }

        … as called at the document.body onload event
      • the player letter selection is via an HTML select element size=27 (on non-mobile, so that the player sees all the choices at once)
      • duplicate choices, as we so often do, are quietly rejected via a comparison of the player choice against a global variable we often call “sofar” which is appended by new letter selections
      • additional “final slide” (far too gory to go into) presented when things go wrong

      Today’s “Hangman” game hosting changed PHP code of speech_supervisor.php can be tried out at this Hangman Game mode live run link (or you can use the default live run link), which we hope you or someone you know will try out. The new child HTML iframe code is hangman_bg.html for your perusal.


      Previous relevant Speech to Text Vocabulary Phrases Tutorial is shown below.

      Speech to Text Vocabulary Phrases Tutorial

      Speech to Text Vocabulary Phrases Tutorial

      ESL students can struggle with English Phrases and Idioms, and with that in mind we channel the ideas of the previous English Phrase Guessing Game Primer Tutorial on top of the previous build up from Speech to Text to Speech Tutorial to add a new option called “Vocabulary Phrases” to our Dropdown List of functionality making use of the great Google Speech to Text API.

      But it’s not just pronunciation of the “Vocabulary Phrases” that is of interest here, which the Google Chrome web browser microphone based Google Speech to Text API can be helpful for. Learners of English can be baffled by the completely different meaning of a phrase that can sometimes only have a tenuous connection with the meanings of the individual words making it up. In order to help here we add …

      • “pick another phrase” button … can mean “give up” and/or “life is too short”
      • “look for more information about the phrase” link to … you guessed it … the Google search engine result set … thanks
      • ways for the user to control …
        1. Minimum phrase length
        2. Maximum phrase length
        3. Maximum length of any one word of the phrase

      Today’s “Vocabulary Phrases” changed PHP code of speech_supervisor.php can be tried out at this Vocabulary Phrases mode live run link (or you can use the default live run link), which we hope you or someone you know will find useful.


      Previous relevant Speech to Text to Speech Tutorial is shown below.

      Speech to Text to Speech Tutorial

      Speech to Text to Speech Tutorial

      It’s ESL thoughts back at the top of our thinking today building on yesterday’s Speech to Text Hierarchy Tutorial. We’re going the full circle today, improving on what we have already as far as an ESL learner might be concerned (or perhaps other users too) allowing the user the ability to …


      hear it back

      … via the brilliant Google Translate and its “Text to Speech” capabilities. Hence, “Speech to Text to Speech” in today’s blog posting title.

      We see a twofold advantage here, in that …

      • if a user doesn’t have the foggiest what is going on, they can select a language, and have the middle table cell question (or answer) be translated from English, for themselves … and …
      • in the Google Chrome web browser incarnation, they may answer something and see the transcription happen, and then “hear that (transcription) back”

      … that latter functionality could highlight pronunciation weaknesses, perhaps. Not that we are saying this replaces talking to an active speaker of the language you want to learn, but sometimes there’s just no one about that speaks that language. I’ve tried talking to Nala, but she’s far too dogmatic … boom, boom … though think she might be practising Dalmation out the back of an evening.

      What’s the new mechanism to make this happen? A new HTML select element dropdown of languages is show in the middle table cell, augmenting the Google Speech to Text API language dropdowns, that if populated with a “language of interest” value then looks to either/both …

      • middle table cell question (or answer) … and/or …
      • contents of left (or perhaps right) table cells

      … as the wording to be submitted to Google Translate for translation, in a new window. As you may have seen before if you’ve used Google Translate, once there doing a translation, oftentimes you will be offered a loudspeaker icon on either side of the translation to hear a voice say the words in that language, with the accent of a native speaker (though computerlike).

      Today’s “hearing it back” changed PHP code of speech_supervisor.php can be tried out at this live run link, which we hope you find useful.


      Previous relevant Speech to Text Hierarchy Tutorial is shown below.

      Speech to Text Hierarchy Tutorial

      Speech to Text Hierarchy Tutorial

      Are you amazed like me at how computer software can eventually be boiled down to the difference between …

      • 1
      • 0

      … call it what you will … yes versus notrue versus false (boolean values) … on versus offthe “binary” design?

      If you have the patience, you can break really complex decision making (that you might model with a flow chart) via “yes” versus “no” binary decisions, based on the right questions to ask. And that is what we are doing today, recalling that earlier presented HTML/Javascript Animal Categorization Tutorial to Categorize Animals based on questions.

      As you answer these questions, all effectively “yes” versus “no” ones, you are breaking into the animal kingdom categorization hierarchy to identify an animal of interest you are interested in categorizing. As computers do, no imagination here, but they break the problems they are presented with into “binary” decisions, to get down to the fundamentals of it all.

      And the “yes” and “no” of various languages are just about the most important words for artificial intelligence systems to recognize, so with this in mind, we thought it a good fit to use the right hand cell to open that previous Animal Categorization web application in its own HTML “child” iframe to supply the “parent” with the questions that flow through it and on up to the “parent” where, if using Google Chrome web browser, a “yes” versus “no” spoken answer may return to the “child” for further “hierarchical tunnelling”.

      The changes needed for the “child” iframe web application HTML and Javascript logic revolved around its usage of the “perfect fit” …


      confirm(questionPrompt); // returns true for OK button press and false for Cancel button press

      … “true” and “false” function. But today, because Javascript does not have a sleep function, we needed to add a third return value that we decide to be blank (ie. string “”). Trouble with this is that “” equates to false by Javascript, so in our modified …


      function ourconfirm(prom) {
      var wo=null;
      if (parent.document) {
      if (parent.document.getElementById('divac')) {
      if (parent.document.getElementById('divac').innerHTML == '') {
      parent.document.getElementById('divac').innerHTML=prom.replace('(OK is yes, Cancel is no)','');
      if (parent.document.getElementById('sq')) {
      parent.document.getElementById('sq').innerHTML='<b>' + parent.document.getElementById('divac').innerHTML + '</b><br><br>';
      }
      return "";
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'yes') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'true';
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'no') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'false';
      } else {
      return "";
      }
      } else {
      var cr = confirm(prom);
      if (cr == true) return 'true';
      return 'false';
      }
      } else {
      var crr = confirm(prom);
      if (crr == true) return 'true';
      return 'false';
      }
      }

      … the true and false boolean values become string returns … called, as per our example code snippet, in this changed way


      if (flat_bodied == "") var flat_bodied = ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));
      if (flat_bodied == "") { setTimeout(animal_categorize,5000); return; } else if (flat_bodied == 'true') {
      type_animal = stuff_outside_caret(document.getElementById("flatworm").innerHTML);
      } else {
      type_animal = stuff_outside_caret(document.getElementById("worm_leech").innerHTML);
      }

      … converting many local variables into global variables, as per this declaration above now (declared) up near the top of the Javascript …


      var flat_bodied = ""; // ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));

      … in today’s changed HTML and Javascript code of animal_categorization.html.

      Adding a new “Animal Categorization” HTML select element (dropdown) option onto yesterday’s Speech to Text Survey Tutorial for today’s changed PHP code of speech_supervisor.php, you can be trying this out at this live run link.


      Previous relevant Speech to Text Survey Tutorial is shown below.

      Speech to Text Survey Tutorial

      Speech to Text Survey Tutorial

      On top of yesterday’s Speech to Text ESL Tutorial we add, for the first time, a “Survey” functionality not needing a two player setup. This leaves the right hand table cell to be able to contain an HTML form element, used to “survey” the user on the survey questions you set up when selecting a new “Survey” HTML select element (dropdown) option.

      And so this is where our language of design, PHP, comes to the fore, as a useful language to process the potential for huge amounts of data related to the survey you design.

      We design the web application “Survey” component, so as to be able to email off either/both …

      • survey form as an HTML email attachment via the PHP mail method
      • survey form results as an HTML email link via an a mailto: link to the default email client application of the user

      PHP has it over HTML …

      • creating email as per the first option above … and …
      • being able to post process method=POST data from an HTML form element, where much more data can be handled

      This new functionality can be accessed via an option of the dropdown of this live run link, or a “cut to the chase” survey link for today’s changed PHP code of speech_supervisor.php.


      Previous relevant Speech to Text ESL Tutorial is shown below.

      Speech to Text ESL Tutorial

      Speech to Text ESL Tutorial

      When you involve audio input into a web application it is likely that that web application can become useful with learning a language, such as with ESL (English as a second or foreign language) usage, especially as such learning has …

      • spoken
      • reading
      • writing

      … components to it. As you would appreciate, once the learner is speaking and then that (spoken content) is written out (as a transcript), and the learner is then reading that content, the web application can be a “double whammy” effective learning tool.

      We extend the web application’s functionality from yesterday’s Speech to Text Primer Tutorial using a technique we often use, that being changing the original (guinea pig usage) word “Quiz” into it plus other options presented in a …

      • HTML select (dropdown) element … as per HTML “onload” event …

        <body onload="document.getElementById('preq').innerHTML=dds('Quiz'); document.getElementById('kb').focus(); pickq();">

        … call of the Javascript …

        function dds(qwhat) {
        var selbit="<select id=selbit onchange=' location.href=document.URL.split(\"#\")[0].split(\"?\")[0] + \"?mode=\" + this.value; '><option value=0>" + modes[0] + "</option></select>";
        for (var iselbit=1; iselbit<modes.length; iselbit++) {
        if (mode == iselbit) {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + " selected>" + modes[iselbit] + "</option></select>");
        } else {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + ">" + modes[iselbit] + "</option></select>");
        }
        }
        return qwhat.replace('Quiz',selbit);
        }


        … that sets off onchange event logic to …

      • reload the webpage with a URL ?mode= argument flagging this that is …
      • detected via

        var mode=location.search.split('mode=')[1] ? eval(decodeURIComponent(location.search.split('mode=')[1].split('&')[0])) : 0;
        var modes=["Quiz","Tongue Twisters","Haiku"];
        var arraynames=["questions","tongue_twisters","haiku"];
        var delims=["?","~","`"];
        var bcols=["yellow","lightgreen","lightblue"];

        … enabling, as necessary the …
      • “mapping” of other usage arrays (we are responsible for garnering) onto the original (guinea pig) array “questions” (within “dds” function above) via

        if (mode != 0) {
        eval(arraynames[0] + "=" + arraynames[mode]);

        document.getElementById('tdm').style.backgroundColor=bcols[mode];
        }

      That leaves, apart from the extra content duties, a new scoring mechanism, one new one of which analyzes question words against answer words and scores positive word length score components for answer words found in question words and negative word length score components for question words not found in answer words.

      Again, feel free to have a look at today’s changed PHP code of speech_supervisor.php‘s “Speaking Quiz plus ESL Others”.


      Previous relevant Speech to Text Primer Tutorial is shown below.

      Speech to Text Primer Tutorial

      Speech to Text Primer Tutorial

      There was some great advice that had us dipping our toes into “Speech to Text” web application thoughts. You probably know yourself about the brilliant Google Translate and its “Text to Speech’ capabilities (or read some of our postings here such as Italian French Spanish Verb Conjugation Text to Speech Tutorial)? Well, it’s Google again supplying the brilliance for the obverse ideas used today in our “Speaking Quiz” web application idea.

      “Speaking”, that is, if you are using a recent enough version of the Google Chrome web browser, some HTML aspects of which are eloquently explained by this very useful link utilizing the wonderful Google Speech to Text API.

      If you are interested in “Speech to Text” you should also check out the very interesting Diagflow … Speech to Text.

      Thanks everyone, for these artificial intelligence “dipping our toes” encouragement. Feel free to have a look at today’s PHP code of speech_supervisor.php‘s “Speaking Quiz”.


      Previous relevant Italian French Spanish Verb Conjugation Text to Speech Tutorial is shown below.

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Event Tutorial as shown below we’ve increased functionality of English translations by adding Google Translate Text to Speech capabilities to …

      • Italian
      • French
      • Spanish

      … via a new “loudspeaker” icon.

      Some of the talking points with today’s changes involve …

      • a “reveal” idea whereby the showing of an HTML element is controlled by its Javascript DOM [element].style.width CSS property, whereby the element is effectively invisible at width:1px and in our case today becomes visible, at width:20px, and, thus, clickable, for Google Translate popup window translation and text to speech capabilities via the control of …
      • binary decision making GUI ease of using HTML input tag type=checkbox and the associated Javascript DOM document.getElementById([element]).checked … because …
      • UX-wise it is good to forewarn users with an option when it comes to functionality involving sound
      • use of Javascript DOM document.getElementsByTagName(‘img’) as a means by which to manipulate HTML elements that are not necessarily provided with an ID global property

      As per the other tutorials in this thread, even with new Google Translate Text to Speech and Translation capabilities, nothing changes today about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.


      Previous relevant Italian and French and Spanish Verb Conjugation Event Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Event Tutorial

      Italian and French and Spanish Verb Conjugation Event Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Tense Tutorial as shown below we’ve increased functionality of English transaltions to …

      • Italian
      • French
      • Spanish

      … and the conjugations from WordReference.com by offering onmouseover (ie. hover) or onclick (or mobile touch) event logic for conjugations offered by using the wonderful MyMemory resource to translate these verb conjugations back into English, and present them in an additional column with a different background colour.

      You may recall us using MyMemory once before when we presented HTML/Javascript Hearing and Listening Primer Tutorial earlier on.

      As per the other tutorials in this thread, but even more so with gleaning information from the MyMemory API via a get method, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try out this new functionality.


      Previous relevant Italian and French and Spanish Verb Conjugation Tense Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      We’ve followed up on Italian Verb Conjugation and Tense Tutorial as shown below with “tense” context to some of the conjugations of …

      • Italian
      • French
      • Spanish

      Say “some of the” because …

      Even amongst the conjugating language “triplets” above, noticed that when it comes to the “tense” involved, there can be variations, but don’t need to tell a lot of you this old news. Did set me to thinking a bit about the The Tower of Babel story from the Bible, though. What would the world be like if we all spoke the one language? Esperanto, everyone?

      There’s a link between “language” and “life”. That’s why a language without “verbs” is not a language. And the Earth back in those dark days before any life, had no conduits for “language”. And it’s hard to see how “life” sort of started up? But I guess chemistry experts might be able to tell us how this might have come about.

      “Language” is all about patterns, and mirrors human progress with its “pattern” and “organization” and “flexibility” as a huge part of why we as “humans” got to be such agents of change on Earth. Just wish there had really been a more successful Doctor Dolittle in human history that could have got the “inside goss” (so to speak) on what we could have done better to protect the world’s environments.

      As per the other tutorials in this thread, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try it out, and even contemplate sending us some feedback.


      Previous relevant Italian Verb Conjugation and Tense Tutorial is shown below.

      Italian Verb Conjugation and Tense Tutorial

      Italian Verb Conjugation and Tense Tutorial

      Again, we saw that we could extend the functionality of the recent Italian and French and Spanish Verb Conjugation Tutorial as shown below, by, for Italian, to start with, trying to help the native English speaker out for where to look on the “conjugation” table presented for the English verb of interest, regarding conjugation information that might match their (verb) tense of interest.

      As you probably well know, every language on Earth has its peculiarities regarding how we express ourselves with regard to time, and a lot of that is associated with the verbs, or action words we use, and in the case of …

      • Italian
      • French
      • Spanish

      … that expression of the context of time in the grammatical usage, especially for people speaking the language, is reflected by conjugations made to the verb. Conversely, as I, a native English speaker, got to think about as this web application proceeded, English has words like “am” and “have” and “having” and “been” and “will” and “shall” and “is” and “are” and “was” and “were” and “would” and “should” and “has” and “had” and “to” and ‘”be” and “being” preceeding verbs, which can have, basically, two suffixes “-ing” and “-ed” (expressing present participles and past participles respectively) to try to do what conjugation does for Italian (we program for today) and French and Spanish languages.

      But there’s more to “tense” than Past, Present and Future as you well can imagine should you learn a language other than your native tongue, which you tend to “go along with the flow” perhaps unaware that “tense” exists, for some learners. There are concepts as layers on top about the context of the time the person is speaking relative to the time they are or were talking about … it gets complex … so you get concepts like “Present Perfect Progressive” (which we did a tutorial about at HTML/Javascript Present Perfect Progressive Primer Tutorial) if you get right into the ins and outs of all this grammar … which you might need to do to master that second language.

      Yet again, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in Italian “tense” thoughts in this way, with this live run link.

      Again, we hope you try some Italian, with specified “tense” prefix words and suffix endings, to see how the new functionality helps you out with Italian verb conjugations.


      Previous relevant Italian and French and Spanish Verb Conjugation Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tutorial

      Italian and French and Spanish Verb Conjugation Tutorial

      We saw that we could extend the functionality of yesterday’s Italian Verb Conjugation Primer Tutorial as shown below, by accessing other resources from the great WordReference.com, adding French and Spanish verb conjugation to yesterday’s Italian verb conjugation.

      As a rule we tend to find that replacing text with HTML select “dropdown” menus can help out this adaption pretty effectively. The other feature of today’s Javascript coding is the use of eval to team with the language code to direct user traffic to the correct parts of the WordReference.com website.

      Along the way we added some background “flag” imagery we found at Science Kids … thanks, heaps.

      Down the little brick road we also added a couple of hashtag navigators, HTML a links that just navigate within the page, allowing the user to move from the conjugation yellow zone to the translation zone (if you translated from English), as much as anything because the conjugation may need to be prompted by picking the “verb” amongst the list of “translated” possibilities, which you can then feed into the rightmost HTML input type=text textbox to, more than likely, get the (verb) conjugation you may have missed with the first pass.

      Nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish in this way, with this live run link.

      Hope you try it out.


      Previous relevant Italian Verb Conjugation Primer Tutorial is shown below.

      Italian Verb Conjugation Primer Tutorial

      Italian Verb Conjugation Primer Tutorial

      Learning Italian as a native English speaker is best done when you are young, and beginning recently on this quest, I learnt a bit of this.

      To me, what stuck out, was how easy we get it in English with regard to (the lack of) conjugating verbs, or articles, or adjectives, in our grammar.

      Is it that, in English, we can say something in a hurry and, sort of, wait to fix it up later, because we don’t conjugate verbs in our mind, or is this not how it works in other languages? Actually, am pretty sure no, because conjugation is done so fast in the minds of Italian speakers that it is no issue … hard to imagine, though, from where I’m standing … well, actually, sitting. Am not here to say, but know it is this, that teachers of Italian to English native speakers, concentrate on in early lessons.

      With this in mind, we don’t for one second pretend we are not using the wonderful resources at WordReference.com with today’s web application, but we thank them for their brilliance, and just rearrange things that you could glean perfectly well from here but need to take a few more steps to reach the conjugation (today it’s just verbs) web page bits, whereas we throw the conjugation bits straight at you. And yes, we do try to cater for the irregular verbs, and where they are regular you should see the word “regular” mentioned in the yellow zone conjugation areas … because we all know … well, you know what we mean?!

      The techniques used today do away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html with this live run link.

      So we hope you enjoy this break from our usual (other way around) ESL game (if it’s a game) to some “Conjugate, Italian Style” play.

      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.


      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.

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

Looks Nice Nearby Speech to Text Game Tutorial

Looks Nice Nearby Speech to Text Game Tutorial

Looks Nice Nearby Speech to Text Game Tutorial

In order to progress yesterday’s Looks Nice Speech to Text Game Tutorial‘s functionality from only locating your Country Capitals and TimeZone Places to, today, including a lot more places you might find geographical references for (and link them to a nearby TimeZone place in that same country), we interplay two changing HTML web applications and find we need to implement another scenario like Window LocalStorage Client Versus Server Primer Tutorial‘s …

Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML/Javascript recipient via ? and & argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we’ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.

Hint: Yes, we’ve raved on about this too?! Does the blog posting title give it away? Okay, yes, it should read “localStorage”, but thought we’d gone past such juvenile finickiness since the Whac-A-Mole controversy of 1st December 2019 (or even The Great Tea Trolley Disaster of ’67, we daresay).

It can even use a “self-destruct” approach to the use of this “localStorage” on having used it because …

  • the web application knows who is using it (localStorage) … and on having accessed and read it …
  • the web application knows it (localStorage) is of no use to any other user (in this web application’s case, at least)

… because we are passing information from a web application (doesn’t matter whether HTML or PHP) to HTML we have no HTML form method=POST available to us (though we could just encase the entire HTML into some PHP innards) and there is enough data that would start resulting in HTTP Error 414 request URI too long issues in an HTML form method=GET scenario.

On the sender HTML the changed wls_vs_php.htm side we have calling Javascript code like …

if (window.localStorage) {
localStorage.setItem('wls_vs_php_colour_wheel_style', encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0].replace('display: none;','')));
location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[0]) + '&altlongis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[1]) + '&extrastyle=%20'; // + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0]);
} else {
location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + nearesttz.replace(/\ /g,'_') + '&butp=' + encodeURIComponent(getoneorother) + '&placeurl=' + encodeURIComponent(document.getElementById('ourcanvas').title) + '&altlatis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[0]) + '&altlongis=' + encodeURIComponent(document.getElementById('placegeo').value.split(',')[1]) + '&extrastyle=' + encodeURIComponent(document.getElementById('ourcanvas').outerHTML.split(' style="')[1].split('"')[0].replace('display: none;',''));
}

And at the receiving HTML the changed colour_wheel.html side we have called Javascript code like …

var altplacename=location.search.split('butp=')[1] ? decodeURIComponent(location.search.split('butp=')[1].split('&')[0]) : '';
var placeurl=location.search.split('placeurl=')[1] ? decodeURIComponent(location.search.split('placeurl=')[1].split('&')[0]) : '';
var extrastyle=location.search.split('extrastyle=')[1] ? extralocal(decodeURIComponent(location.search.split('extrastyle=')[1].split('&')[0]).replace(/\+/g,' ')) : '';
var altlatis=location.search.split('altlatis=')[1] ? decodeURIComponent(location.search.split('altlatis=')[1].split('&')[0]) : '';
var altlongis=location.search.split('altlongis=')[1] ? decodeURIComponent(location.search.split('altlongis=')[1].split('&')[0]) : '';

function extralocal(proposedes) {
if (proposedes != '' && proposedes.trim() == '') {
if (window.localStorage) {
if (('' + localStorage.getItem('wls_vs_php_colour_wheel_style')) != '') {
var retvis=decodeURIComponent(localStorage.getItem('wls_vs_php_colour_wheel_style'));
localStorage.removeItem('wls_vs_php_colour_wheel_style');
return retvis;
}
}
}
return proposedes;
}

… making the HTML be able to accept vastly bigger amounts of data, process it, and even, in this case, where no other application would be interested in it, “self-destruct” it. You will have noticed the deliberate ordering of the arguments so that the lengthy one is last in the list, because we know the others will not overshoot the web server’s URL length limit on their own, and we signal that the lengthy “extrastyle” data might exist in window.localStorage by passing across one blank rather than nothing.

Again, we hope you try it out (with the remote) with some other place name candidates like Oodnadatta.


Previous relevant Looks Nice Speech to Text Game Tutorial is shown below.

Looks Nice Speech to Text Game Tutorial

Looks Nice Speech to Text Game Tutorial

It’s been too long getting back to some Speech to Text work, made possible for us via the very generous Google Speech to Text API functionality we last talked about at Contextualize Speech to Text to Speech LibreOffice Template Tutorial.

What prompted the revisit? Tahiti. Yes, many years ago here in Australia we had an “earworm” of a television commercial that stuck in a lot of minds …

… including yours truly. Now we’re not saying we agree with the sentiments of the advertisement, but it is fun to picture yourself sitting in the bath of a private plane in the age of Siri and Cortana and within “microphone shot” of an order to the cockpit (and no pits were harmed in the making of this blog post).

And so we looked into it, and did find the usual “speech to text” Google Chrome limitation, but then thought for others we could provide a textbox (rather than making them eat the leftover cake, that is), and found it needed interfacing on two fronts …

  • the supervisory changed PHP code of speech_supervisor.php with its live run needed to be tweaked in the addition of a new select (dropdown) element “Tahiti Looks Nice Game” option … the selection of which calls …
  • the supervised the changed wls_vs_php.htm

    var getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getoneorother=location.search.split('oneorother=')[1] ? decodeURIComponent(location.search.split('oneorother=')[1].split('&')[0]).replace(/\+/g,' ') : '';

    // ... and then later within document.body onload event Javascript logic ...

    if (getoneorother != '' && getcapitals == '' && getcountries == '') {
    var nomore=false, thectyis='', theccis='', vstwo, vsthree, thespi='';
    var vsone=document.getElementById('scapitals').innerHTML;
    vstwo=document.getElementById('selceq').innerHTML;
    vsthree=document.getElementById('sele').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    thespi='' + vsone.split('">' + thectyis)[0].split(' value="')[eval(-1 + vsone.split('">' + thectyis)[0].split(' value="').length)].split('"')[0];
    if (vstwo.indexOf('>' + getoneorother) != -1) {
    thectyis=getoneorother + vstwo.split('>' + getoneorother)[1].split('<')[0];
    theccis=vstwo.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vstwo.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    } else if (vstwo.toUpperCase().indexOf('>' + thespi.toUpperCase()) != -1) {
    thectyis=thectyis + vstwo.split('>' + thespi)[1].split('<')[0];
    theccis=vstwo.split('>' + thespi)[0].split(' value="')[eval(-1 + vstwo.split('>' + thespi)[0].split(' value="').length)].split('"')[0];
    vstwo=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vstwo.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else {
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    } else if (vstwo.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vstwo.split('/' + getoneorother)[0].split('>')[eval(-1 + vstwo.split('/' + getoneorother)[0].split('>').length)];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + getoneorother + vstwo.split('/' + getoneorother)[1]).replace(/\ /g,'_');
    } else if (vsone.toUpperCase().indexOf(' value="' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    theccis=getoneorother + vsone.split(' value="' + getoneorother)[1].split('"')[0];
    thectyis=vsone.split(' value="' + theccis + '">')[1].split('<')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    if (!nomore) {
    vsone=document.getElementById('selceq').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    //document.URL.split('?')[0].split('#')[0] + '?andgo=y&countries=' + encodeURIComponent(thectyis) + '&capitals=' +
    }
    if (!nomore) {
    if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    }
    }
    }
    }

We hope you try it out (with the remote).


Previous relevant Contextualize Speech to Text to Speech LibreOffice Template Tutorial is shown below.

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Maybe it’s just my weakness, but what I often find writing web applications is that I come back to them several months later and wonder, sometimes, how to work them. This is a weakness of “contextualization”.

Contextualization is putting your audience “into the picture” as much as is possible. Who says this is always easy? We’re not, but it is really good to try. A big thing in the programmer’s favour with respect to good contextualization practice is if you control the processes. Luckily with the current “Speech to Text to Speech” web application ideas, we control the data. Never forget the power of this, if you happen to lose sight of this ( … but then I guess it’s too late … boo hoo). Barring lack of backward compatibility, our vision of the “sin of all sins”, when you control the data you get to control …

  • the look of things
  • the placement of things (which we also have the parent do a bit of with today’s work)
  • your own data delimitation, or other data arrangement, rules
  • the relationships between parent and child HTML web page and child iframe or popup window arrangements

You may have heard us talking about “hard working duck” child iframe HTML components to projects? In these designs the child is doing the bulk of the work. Up to now, with our LibreOffice template “ducks” (in their HTML iframe elements) have been crucial but not dynamically hardworking as such. More just the scaffolding for the job. But today we’re giving them more to do, because after several days thinking of approaches to it, we’ve “landed” onto the approach for added “contextualization” that goes along the lines …

  1. the parent Speech to Text to Speech PHP supervisor will have the added role with a new …

    <input type=hidden id=thefocusis value=''></input>

    … to “pledge” to …

    1. keep it populated with a number representing the bit after “s” for the ID of the span element containing a form prompt label where the focus is near (focus is actually on the accompanying input type=text textbox element)
    2. window.scrollTo(0,0); // few seconds after a change of focus … not too much to ask?!
  2. the children (ie. any LibreOffice template piece of HTML from now on) in iframe elements get a new bit of Javascript near the end of their document.body (ie. before </body>) .. as per …

    <script type='text/javascript'>

    var thelastfocuswas=-1;
    var thisfocusis=-1;

    function keepacheck() {
    var ic=parent.document.getElementById('thefocusis').value;
    if (ic != '') {
    if (eval(ic) != thelastfocuswas) {
    if (thelastfocuswas != -1) {
    document.getElementById('span_' + thelastfocuswas).style.border='0px solid orange';
    }
    thisfocusis=eval(ic);
    document.getElementById('span_' + thisfocusis).style.border='2px solid orange';
    location.href='#' + 'span_' + thisfocusis;
    thelastfocuswas=thisfocusis;
    }
    }
    }

    function fixbody() {
    var ij, inhtml=document.body.innerHTML;
    var outhtml=inhtml;
    var sis=' style="border:2px solid orange;" ';
    if (document.URL.indexOf('goto=') != -1) {
    if (parent.document) {
    if (parent.document.getElementById('thefocusis')) {
    var candidates=outhtml.split('&l' + 't;');
    var cl=candidates.length;
    if (candidates.length > 1) {
    for (ij=1; ij<cl; ij++) {
    if (candidates[ij].indexOf('&g' + 't;') != -1) {
    if (candidates[eval(-1 + ij)].indexOf('spa' + 'n_') == -1) {
    outhtml=outhtml.replace('&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;', '<span' + sis + ' id=span_' + eval(-1 + ij) + '>&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;</span>');
    sis='';
    thelastfocuswas=0;
    parent.document.getElementById('thefocusis').value='0';
    candidates=outhtml.split('&l' + 't;');
    }
    }
    }
    }
    }
    }
    if (outhtml != inhtml) {
    document.body.innerHTML=outhtml;
    setInterval(keepacheck, 1000);
    }
    }
    // return outhtml;
    }

    setTimeout(fixbody, 2000);

    </script>

    … which …

    1. two seconds after loading, looks through its own document.body.innerHTML for &lt;[Parameter Label]&gt; findings to …
    2. encase all such findings within <span id=span_[countOfSuchFindingsStartingAtZereo]> and </span> … saved into a revised …
    3. new document.body.innerHTML representation as above is “slapped over” the existant document.body.innerHTML … and …
    4. parent.document.getElementById(‘thefocusis’).value=’0′; // to get the ball rolling and from then on …
    5. setInterval(keepacheck, 1000); // keeps an eye out for when the parent changes its focus .. so that when it does and for this initial ‘0’ one here now …
    6. the span element equivalent of the one onfocus in the parent is given an orange border here (and any one from the past has its border made to be invisible) … and we …
    7. hashtag navigate our way to this place in the “contextualization” half zoomed in middle cell iframe data via … location.href=’#span_’ + [idOfParentElementInFocus];
  3. … and so putting this into play leaves the user seeing where they are up to in the context of a finished product while they are answering prompt (questions). Are we there yet?!

    Adding to the recent Agenda Speech to Text to Speech LibreOffice Wizard Tutorial progress, then we have changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this (getting all this into content) Agenda live run.

    You can also see this play out at WordPress 4.1.1’s Contextualize Speech to Text to Speech LibreOffice Template Tutorial.


    Previous relevant Agenda Speech to Text to Speech LibreOffice Wizard Tutorial is shown below.

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    We’re happy here, finally, to move onto a new concept with the “Speech to Text to Speech” web application blog posting thread, building on yesterday’s Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial using the recent …

    • Curriculum Vitae (concept) logic … as the basis for a new …
    • Agenda (concept) … an HTML “template” of which is derived from a LibreOffice Wizard Template

    In case we can genericize for a user “owned” additional concept (at a later date), we take careful note of what we have to do to achieve this “by hand”. We’ll see.

    Along the way we changed a couple of things …

    • on a rudimentary call of the web application, on non-mobile platforms, our top (HTML select) dropdown is made to have the size of the number of option “subelements”, so that that non-mobile user can see all the functionality available as they enter the web application
    • for Surveys and Business Letter template and Curriculum Vitae and now Agenda templates we were annoyed by how when there are lots of questions for the user to answer, it went below the fold of the screen eventually, an annoyance self created by the coding of <br> linefeeds after input type=text elements that are removed now, but put back in front of the span elements when they are all reshown again at the end of the form “asking” … the [element].style.display=’none’ DOM statements were good though, rather than [element].style.visibility=’hidden’ DOM statements applied to form elements just answered, as the latter leaves whitespace while the former collapses that whitespace

    Let’s talk about this Agenda template created via a Wizard at LibreOffice, thanks again. As you can see from the …

    sequence of dialog boxes that lead the user through a series of well-defined steps

    … the LibreOffice Wizard alone will suit a lot of people’s purposes for this Agenda meeting concept via a desktop application. The difference with our web application, though, is that it is “web” transportable with how (and where) you could use this functionality.

    The agenda concept hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Agenda live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Do you remember with yesterday’s Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial how we presented a YouTube video means of catering for some automated audio prompting with our Curriculum Vitae web application following our “subdream” of …

    • not having the user to have to lift their head but just dictating all their answers … or …
    • not having the user to have to lift their head but just typing in all their answers

    … and that the other choice in these “uploaded” inhouse content ideas is today’s interfacing “subproject” … and we present this posting courtesy of our “yellow submarine” room … tee, hee

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    For audio (or video) content we can use an (s)ftp file transfer desktop application like FileZilla to perform the uploading of the media files, which we create on Mac OS X’s very useful QuickTime Player desktop application. We are forever using its great Screen Capture functionality, and with this work we combine that with separate Audio Capture sessions that become audio clips added onto the Screen Capture via QuickTime Player’s …


    Edit -> Add Clip

    … option. But those audio clips can also sit alone as an *.m4a file (we called cvtalk.m4a) sitting on the rjmprogramming.com.au web server, and though we could use that media in an audio HTML element, as below …

    Audio Prompting for Curriculum Vitae

    … we prefer to have “less baggage” around today to try to limit “focus clashes” and so make use of the Javascript “Audio” object to work these audio promptings for our Curriculum Vitae web application. As for yesterday, we use caption subtitles files to determine when (and where) to start and stop the audio, where, if these are called [start] and [end] (values in seconds), the broad brush approach to playing the audio prompt is …


    var mediao = new Audio('cvtalk.m4a'); // initialize Audio object in global variable

    function medias() {
    if (mediao) {
    mediao.pause();
    }
    }

    // When called on to play a particular audio prompting, and have plucked out from the global array the relevant [start] and [end] values
    mediao.currentTime = [start];
    mediao.play();
    setTimeout(medias, Math.floor(eval(eval([end] - [start]) * 1000)));

    We now have three types of automated audio prompting choices, in priority usage …

    • Mac OS X say Speech to Text (via MAMP local Apache/PHP/MySql web server)
    • Audio (or Video) on rjmprogramming.com.au website
    • YouTube Video on YouTube

    … and so, now, we need to have a mechanism to offer the user the offer to refuse this service, and if they do, it could be that they wanted to use a different “mode of service”, and so we now offer a new HTML select element (dropdown) to allow for that possibility.

    And, again, we have today’s uploaded prompting (audio and video) media content ideas, augmenting a default preferred (but rare) Mac OS X MAMP say idea, hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Yesterday’s Curriculum Vitae Speech to Text to Speech Prompting Tutorial was about a generic automated prompting solution, but was suited to a relatively small audience, alas. The other choice here is to make your own audio content that you upload, two options for which we can think of being …

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website (which we’ll talk more about soon) … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    But how do we tell the interface we have where to start and stop the video? We construct one of those caption subtitles files, the same one you can see in play below with this YouTube video that we constructed, uploaded, and use for users constructing a Curriculum Vitae and saying they would not mind some prompting …

    There are two approaches here with piecing together the media …

      • create an audio track (and we use Mac OS X QuickTime Player for all this) and take a note of its length … then (like we did for the YouTube video above) …
      • create a screen capture video of that same length
      • Add the Clip of the audio to the end of the video and upload to YouTube

      • create a screen capture video of the actions to create a Curriculum Vitae
      • create an audio track (and we use Mac OS X QuickTime Player for all this) while playing that screen capture video back to yourself … then …
      • Add the Clip of the audio to the end of the video and upload to YouTube … as per …

      Adding to yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s uploaded prompting media content ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


      Previous relevant Curriculum Vitae Speech to Text to Speech Prompting Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Regulars to this current blog posting thread on the theme of “Speech to Text to Speech” will know …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      … but may not know that we also have a “subdream” of (attempting to) getting it so that one or other of …

      • not having the user to have to lift their head but just dictating all their answers … or …
      • not having the user to have to lift their head but just typing in all their answers

      … except perhaps for button presses … can be achieved. We’re not sure here whether this can be achieved, but we do know of a thing we need to do for sure to even get an inkling of a notion on the way to attempting to achieve this “subdream”, that being …


      "we need to be able to use an automated Text to Speech mechanism to have the web application say the words of the prompts to Curriculum Vitae or Survey questions"

      … because only then can we not lift our heads either from looking straight ahead (for Speech to Text dictations) or looking down at a textbox on the screen (for no Speech to Text dictations) during the “prompting phase” of these web applications. Why bother? As much as for “it might make the web application very beneficial”, we would say also that you learn a lot trying.

      Can tell you even before starting on the missing piece to the “jigsaw” that the biggest problem, as often is the case with web applications made up of many components, you run out of timing places to have the “focus” of the webpage being at the correct spot, at any given time. It is the “Speech to Text” bit that is most sensitive here, as well as the fact that a curious thing we know of already, to our amusement, is that the “Speech to Text” can pick up with the microphone words other than the ones the user uttered, like from a radio or television, but not Nala’s woof?! And now we are introducing a new idea where the speakers of the device or computer are bound to be picked up by that same device or computer’s microphone, surely. Well, first off … please don’t call me Shirley … and we’ll see what we end up with here, rather than worrying about every detail now, though think earphones (or headphones) may be one thought.

      Our first idea of a few, today, regarding “not lifting heads” is for those …

      • Mac OS X
      • MAMP (local Apache/PHP/MySql)

      … afficianados out there. Yes, we are intrigued by that internet/intranet type of feeling of combining a “public domain/MAMP local web server” “parent/popup child” scenario that we got into a bit with the blog posting thread headed by Zipfiles in PHP Media Gallery Synchronize Tutorial, and which we are “channelling” today, to the extent that its web application is called as an HTML “iframe child” of our parent web application today, to detect the existence of the two conditions above as to whether to “attempt” the automated “Text to Speech Prompting” we are after. Why “attempted” in double quotes? Well, on the internet, it is rude not to give forewarning of the computer speakers being brought into play without the user’s consent … it’s just a good thing to allow the user to refuse this functionality, if that’s their wish.

      In that aforesaidmentioned blog posting thread you will hear mentioned the wonderful Mac OS X command line say command … say no more… chortle,chortle.

      So, continuing on from yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s Mac OS X/MAMP “say” Text to Speech ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run. You may recall the say.php which has a “popup child” relationship here.


      Previous relevant Curriculum Vitae Speech to Text to Speech Internationalization Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      The modifications of yesterday’s Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial all had a good generic feel to them, but something was definitely missing. Is it too late to ask you to close your eyes and not read the blog posting title? It’s “internationalization” issues, regarding language.

      Language “internationalization” is pretty important, especially for a Curriculum Vitae application. What’s the point of writing a Curriculum Vitae in a language not suited to the people who are meant to read it. Up to now, though, our inhouse addons to the Google

      … already cater for this language “internationalization” very well already, and we feel that we should try our hardest to continue on that sentiment with the “inhouse” work.

      Working from the end result objectives back and through we need to …

      • organize webpage structure via good advice of this link, thanks …

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        ...

        … except that the “en” is English and we want to allow for other two letter language codes the user can choose from the lower middle cell language dropdown (but please allow for translations by doing this before changing any upper middle cell language dropdown)
      • on body element define a dir=”auto” to try to cater for languages whose text is designed to run right to left
      • we use the same codebase for many “layers” of navigation, and throughout that in all ($_GET[]) web browser address bar URLs and ($_POST[]) method=POST forms, we need to be passing any language code information selected by the user along to any webpages which follow all the way through to the end report, such as a Curriculum Vitae report (or document)
      • hardest of all for today, we need to, for the …

        new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter

        intervene at the point with PHP code where we define a default textbox field value …

        function ourstr_replace($froms, $tos, $tstr) {
        global $qqhval;
        $lc="";
        $prevlc="";
        if ($tstr == "") return $tstr;
        $rs=str_replace($froms, $tos, $tstr);
        $xrs=substr($rs,0,1);
        $lc=$xrs;
        for ($ir=1; $ir<strlen($rs); $ir++) {
        if (substr(($rs . " "),$ir,2) == "of") {
        if (substr($rs,(-1 + $ir),1) >= '0' && substr($rs,(-1 + $ir),1) <= '9') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= '0' && substr($rs,$ir,1) <= '9') {
        if (substr($rs,(-1 + $ir),1) == 'f') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= 'A' && substr($rs,$ir,1) <= 'Z') {
        if (substr($rs,(-1 + $ir),1) != ' ') $xrs.=" ";
        }
        $prevlc=$lc;
        $lc=substr($rs,$ir,1);
        $xrs.=substr($rs,$ir,1);
        }
        if ($lc == " ") {
        if ($prevlc == " ") {
        $qqhval=$qqhval; // more to do
        }
        $qqhval=lookup(str_replace("Translation for English word ","",str_replace("Translation for English words ","",$xrs))); //substr($xrs,0,(strlen($xrs) - 1));
        }
        return $xrs;
        }

        … and then bring into play the incredible MyMemory API translations (returning JSON data, by default), thanks, via …



        function lookup($ptoobig) {
        global $langcode;
        $mymc="";
        if (str_replace("en","",$langcode) != '' && strlen(trim($ptoobig)) > 0) {
        $pokay=trim($ptoobig);
        $purl="HTTP://api.mymemory.translated.net/get?q=" . str_replace("+","%20",urlencode($pokay)) . "&langpair=en|" . $langcode;
        // HTTP://api.mymemory.translated.net/get?q=Hello%20World!&langpair=en|it#Ciao Mondo!
        // {"responseData":{"translatedText":"Ciao Mondo!","match":1},"quotaFinished":false,"responseDetails":"","responseStatus":200,"responderId":"242","exception_code":null,"matches":[{"id":"562784765","segment":"Hello World!","translation":"Ciao Mondo!","quality":"74","reference":null,"usage-count":97,"subject":"All","created-by":"MateCat","last-updated-by":"MateCat","create-date":"2018-05-24 22:32:33","last-update-date":"2018-05-24 22:32:33","match":1}]}
        if (file_exists("mym.txt")) $mymc=file_get_contents("mym.txt");
        $findings=explode($purl, $mymc);
        if (sizeof($findings) > 1) {
        if (strlen(explode("\n", $findings[1])[0]) <= 1) {
        return $ptoobig;
        } else {
        return html_entity_decode(str_replace('\u','&#x',substr(explode("\n", $findings[1])[0],1)), ENT_QUOTES, "UTF-8") . " ";
        }
        } else {
        $thisf=str_replace(" "," ",file_get_contents($purl));
        if (strpos($thisf, "responseData") !== false) {
        $fndis=false;
        if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"' . strtolower(trim($ptoobig)) . '"') !== false) {
        if (strpos($thisf, '"segment":"' . strtoupper(trim($ptoobig)) . '","translation":"' . strtoupper(trim($ptoobig)) . '"') !== false) {
        $fndis=false;
        } else {
        $fndis=true;
        file_put_contents("mym.txt", $mymc . $purl . "#" . trim($ptoobig) . "\n");
        return $ptoobig;
        }
        }
        if (!$fndis) {
        if (strpos($thisf, '{"translatedText":"') !== false) {
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', explode('{"translatedText":"', $thisf)[1])[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', explode('{"translatedText":"', $thisf)[1])[0]), ENT_QUOTES, "UTF-8") . " ";
        } else if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') !== false) {
        $fndat=strrpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') + strlen('"segment":"' . strtolower(trim($ptoobig)) . '","translation":"');
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', substr($thisf, $fndat))[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', substr($thisf, $fndat))[0]), ENT_QUOTES, "UTF-8") . " ";
        } else {
        file_put_contents("mym.txt", $mymc . $purl . "\n");
        return $ptoobig;
        }
        }
        } else {
        return $ptoobig;
        }
        }
        }
        return $ptoobig;
        }

      On a whole other level the Google Chrome web browser has an inbuilt translation ability, which users may prefer.

      Today’s language “internationalization” improved functionality hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option, perhaps after first picking a language code from the language code dropdown below it, allowing for those potential translations to be automated into the form default textbox field values.


      Previous relevant Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      We started on a Curriculum Vitae (via LibreOffice template) yesterday with Curriculum Vitae Speech to Text LibreOffice Tutorial and today’s work is “consolidation” before adding any new functionality as such, because we saw improvements galore that could improve what we had as of yesterday.

      Today, as you can see a lot of on today’s tutorial picture, we …

      • when in the Survey and Curriculum Vitae options we used to lose the chance to select other options from the main HTML select element dropdown, and that is fixed today
      • the prompts no longer show underscores
      • so user can get help with, or hear via Text to Speech, the user can now select a language of choice from the language dropdown, and do any of …
        1. onhover (ie. onmouseover)
        2. onclick
        3. have separate window open on arrival of new prompt (as designated by user) … of …

        Google Translate window that often has Text to Speech capabilities

      • better focus to prompt textboxes of forms both as an alternative in Google Chrome, and/or “as the main game” for other web browser types
      • add onblur logic on prompt textboxes of forms enforce at least space and/or some change to a default value, to allow this prompt textbox keyboard entry be accepted as a final value for this Curriculum Vitae or Survey form field value
      • new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter
      • flag to user the way they can enter <br> within prompt textboxes for multiline data entries, via the prompt textboxes onhover (ie. onmouseover) induced title property
      • allow for two types of email ideas …
        1. email the link to a Curriculum Vitae form to fill out to an emailee via the local email client program via an a mailto: email link
        2. email the resultant Curriculum Vitae report (or document) via PHP mail methodology using an HTML email attachment

      No doubt you can think of some improvements too?!

      Today’s “LibreOffice Template” Curriculum Vitae (and Survey) improved functionality hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option.


      Previous relevant Curriculum Vitae Speech to Text LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      With the recent Speech to Text LibreOffice Template Tutorial we opined …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Are we there yet? We’re getting there.

      Today’s work on a simple Curriculum Vitae takes a …

      • LibreOffice template Curriculum Vitae (thanks) …
      • Save As… HTML Document (Writer) (.html) … and new to today’s Curriculum Vitae template …
      • Amend that HTML to add in our own &lt;Parameter Label&gt; … and new today …
      • Add more &lt;Parameter Label&gt; entries allowing for CSS overrides, using for the first time, an HTML textarea (form) element (for a multi-line text entry), entered by the user, optionally changing the default LibreOffice Curriculum Vitae template styling … but as per a lot of the other additions of functionality …
      • We add an HTML select (dropdown) element option to go directly to the user defined &lt;Parameter Label&gt; value definitions … ready for the coalescing at the usual …
      • A report button click/touch shows a webpage Curriculum Vitae resultant report (a fair bit like a form, today)

      And so today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option. On the Google Chrome web browser you could be dictating your Curriculum Vitae in no time!


      Previous relevant Speech to Text LibreOffice Template Tutorial is shown below.

      Speech to Text LibreOffice Template Tutorial

      Speech to Text LibreOffice Template Tutorial

      If you like interpretive computer languages, or “substitutional” type thinking, you would gravitate towards templates. Templates in Word Processing circles, in LibreOffice circles to be precise, which are the circles apt to today’s work, are designed to contain a lot of the donkey work associated with a “thematic document”, like today’s “Business Letter” featured in today’s tutorial picture. Those templates then form the basis for final documents that “plug in” real data where the template has sought to parameterize its data, the LibreOffice (New->Template Save As… HTML Document (Writer) (.html)) via …


      &lt;Parameter Label&gt;

      Yesterday’s Speech to Text Hangman Game Tutorial was good preparation for today, but the real synergies lie with the previous Speech to Text Survey Tutorial as this “LibreOffice Template” side to the story is that “Survey” side to the story but …

      • with the “Label=Value” paradigm we can deduce the “Label” bits from the LibreOffice template rather than having to ask an administrator user to define … and then when executing the …
      • report uses the LibreOffice template (that has parameter substitutions run over it) as its basis rather than a generated HTML table that is populated

      … and so the user can add a URL to a LibreOffice Template “HTML Document (Writer) (.html)” to flag this difference in functionality after selecting the newly named …


      Survey or LibreOffice Template

      … HTML select element option. We hope you can see how time saving this template usage could be for you. We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this live run link.


      Previous relevant Speech to Text Hangman Game Tutorial is shown below.

      Speech to Text Hangman Game Tutorial

      Speech to Text Hangman Game Tutorial

      ESL students can also benefit from forms of learning that are games, and yesterday’s Speech to Text Vocabulary Phrases Tutorial‘s new option to our Google Speech to Text API series of web application functionalities lends itself to an extension of that with a “spelling” component in the form of the popular “Hangman” game many families and school students are likely to know quite well.

      With “Hangman” we want to involve two players, one taking on the web application’s choice of English phrase to solve, and deciding whether to pass on a hint, or not to the other player trying to solve the English phrase letter by letter. Scoring-wise that second player’s score improves if the player solves it before the “noose” comes into play, else the score is reduced by the length of the English phrase involved.

      So what was involved?

      • map tag creation, thanks to the great mobilefish
      • the area tag to div overlay position:absolute ideas as also presented with Very Versus Too Game Primer Tutorial help with initial masking of image parts, before later making that mask have a transparent colour, as a player picks a letter that does not appear in the English phrase attempting to be solved …

        function areatodiv() {
        var areas=document.getElementsByTagName('area'), coordsare=[];
        for (var i=0; i<areas.length; i++) {
        if (('' + areas[i].coords).indexOf(',') != -1) {
        coordsare=areas[i].coords.split(',');
        document.body.innerHTML += "<div onclick=\" document.getElementById(this.id.replace('div','i')).style.zIndex='11'; this.style.zIndex='-9'; this.style.display='transparent';\" id='div" + eval(i + 1) + "' style='border:0px solid red;overflow:hidden;display:block;z-index:3;position:absolute;left:" + eval(-2 + eval(coordsare[0])) + ";top:" + eval(-2 + eval(coordsare[1])) + ";width:" + eval(12 + eval(coordsare[2]) - eval(coordsare[0])) + ";height:" + eval(12 + eval(coordsare[3]) - eval(coordsare[1])) + ";background-color:white;'></div>";
        }
        }
        if (document.URL.indexOf('tosolve=') != -1) {
        ts = location.search.split('tosolve=')[1] ? decodeURIComponent(location.search.split('tosolve=')[1].split('&')[0]) : '';
        cp = location.search.split('curplayer=')[1] ? decodeURIComponent(location.search.split('curplayer=')[1].split('&')[0]) : '1';
        var cl = location.search.split('clue=')[1] ? decodeURIComponent(location.search.split('clue=')[1].split('&')[0]) : '';
        if (ts == '' || !parent.document.getElementById('score') || !parent.document.getElementById('shangman')) {
        doclick();
        } else {
        hscores[0]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[0]);
        hscores[1]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[1]);
        if (cl != '') {
        document.getElementById('clues').innerHTML='Hint: ' + cl;
        } else {
        document.getElementById('clues').innerHTML=cl;
        }
        document.getElementById('divs').setAttribute('data-title', ts);
        for (var ii=0; ii<ts.length; ii++) {
        thisc=ts.substring(ii,eval(1 + ii));
        if (thisc.toLowerCase() >= 'a' && thisc.toLowerCase() <= 'z') {
        thisc='_';
        }
        document.getElementById('divs').innerHTML+=thisc;
        }
        document.getElementById('divs').style.display='block';
        document.getElementById('clues').style.display='block';
        document.getElementById('sels').style.display='block';
        ihsels=document.getElementById('sels').innerHTML;
        }
        } else {
        doclick();
        }
        }

        … as called at the document.body onload event
      • the player letter selection is via an HTML select element size=27 (on non-mobile, so that the player sees all the choices at once)
      • duplicate choices, as we so often do, are quietly rejected via a comparison of the player choice against a global variable we often call “sofar” which is appended by new letter selections
      • additional “final slide” (far too gory to go into) presented when things go wrong

      Today’s “Hangman” game hosting changed PHP code of speech_supervisor.php can be tried out at this Hangman Game mode live run link (or you can use the default live run link), which we hope you or someone you know will try out. The new child HTML iframe code is hangman_bg.html for your perusal.


      Previous relevant Speech to Text Vocabulary Phrases Tutorial is shown below.

      Speech to Text Vocabulary Phrases Tutorial

      Speech to Text Vocabulary Phrases Tutorial

      ESL students can struggle with English Phrases and Idioms, and with that in mind we channel the ideas of the previous English Phrase Guessing Game Primer Tutorial on top of the previous build up from Speech to Text to Speech Tutorial to add a new option called “Vocabulary Phrases” to our Dropdown List of functionality making use of the great Google Speech to Text API.

      But it’s not just pronunciation of the “Vocabulary Phrases” that is of interest here, which the Google Chrome web browser microphone based Google Speech to Text API can be helpful for. Learners of English can be baffled by the completely different meaning of a phrase that can sometimes only have a tenuous connection with the meanings of the individual words making it up. In order to help here we add …

      • “pick another phrase” button … can mean “give up” and/or “life is too short”
      • “look for more information about the phrase” link to … you guessed it … the Google search engine result set … thanks
      • ways for the user to control …
        1. Minimum phrase length
        2. Maximum phrase length
        3. Maximum length of any one word of the phrase

      Today’s “Vocabulary Phrases” changed PHP code of speech_supervisor.php can be tried out at this Vocabulary Phrases mode live run link (or you can use the default live run link), which we hope you or someone you know will find useful.


      Previous relevant Speech to Text to Speech Tutorial is shown below.

      Speech to Text to Speech Tutorial

      Speech to Text to Speech Tutorial

      It’s ESL thoughts back at the top of our thinking today building on yesterday’s Speech to Text Hierarchy Tutorial. We’re going the full circle today, improving on what we have already as far as an ESL learner might be concerned (or perhaps other users too) allowing the user the ability to …


      hear it back

      … via the brilliant Google Translate and its “Text to Speech” capabilities. Hence, “Speech to Text to Speech” in today’s blog posting title.

      We see a twofold advantage here, in that …

      • if a user doesn’t have the foggiest what is going on, they can select a language, and have the middle table cell question (or answer) be translated from English, for themselves … and …
      • in the Google Chrome web browser incarnation, they may answer something and see the transcription happen, and then “hear that (transcription) back”

      … that latter functionality could highlight pronunciation weaknesses, perhaps. Not that we are saying this replaces talking to an active speaker of the language you want to learn, but sometimes there’s just no one about that speaks that language. I’ve tried talking to Nala, but she’s far too dogmatic … boom, boom … though think she might be practising Dalmation out the back of an evening.

      What’s the new mechanism to make this happen? A new HTML select element dropdown of languages is show in the middle table cell, augmenting the Google Speech to Text API language dropdowns, that if populated with a “language of interest” value then looks to either/both …

      • middle table cell question (or answer) … and/or …
      • contents of left (or perhaps right) table cells

      … as the wording to be submitted to Google Translate for translation, in a new window. As you may have seen before if you’ve used Google Translate, once there doing a translation, oftentimes you will be offered a loudspeaker icon on either side of the translation to hear a voice say the words in that language, with the accent of a native speaker (though computerlike).

      Today’s “hearing it back” changed PHP code of speech_supervisor.php can be tried out at this live run link, which we hope you find useful.


      Previous relevant Speech to Text Hierarchy Tutorial is shown below.

      Speech to Text Hierarchy Tutorial

      Speech to Text Hierarchy Tutorial

      Are you amazed like me at how computer software can eventually be boiled down to the difference between …

      • 1
      • 0

      … call it what you will … yes versus notrue versus false (boolean values) … on versus offthe “binary” design?

      If you have the patience, you can break really complex decision making (that you might model with a flow chart) via “yes” versus “no” binary decisions, based on the right questions to ask. And that is what we are doing today, recalling that earlier presented HTML/Javascript Animal Categorization Tutorial to Categorize Animals based on questions.

      As you answer these questions, all effectively “yes” versus “no” ones, you are breaking into the animal kingdom categorization hierarchy to identify an animal of interest you are interested in categorizing. As computers do, no imagination here, but they break the problems they are presented with into “binary” decisions, to get down to the fundamentals of it all.

      And the “yes” and “no” of various languages are just about the most important words for artificial intelligence systems to recognize, so with this in mind, we thought it a good fit to use the right hand cell to open that previous Animal Categorization web application in its own HTML “child” iframe to supply the “parent” with the questions that flow through it and on up to the “parent” where, if using Google Chrome web browser, a “yes” versus “no” spoken answer may return to the “child” for further “hierarchical tunnelling”.

      The changes needed for the “child” iframe web application HTML and Javascript logic revolved around its usage of the “perfect fit” …


      confirm(questionPrompt); // returns true for OK button press and false for Cancel button press

      … “true” and “false” function. But today, because Javascript does not have a sleep function, we needed to add a third return value that we decide to be blank (ie. string “”). Trouble with this is that “” equates to false by Javascript, so in our modified …


      function ourconfirm(prom) {
      var wo=null;
      if (parent.document) {
      if (parent.document.getElementById('divac')) {
      if (parent.document.getElementById('divac').innerHTML == '') {
      parent.document.getElementById('divac').innerHTML=prom.replace('(OK is yes, Cancel is no)','');
      if (parent.document.getElementById('sq')) {
      parent.document.getElementById('sq').innerHTML='<b>' + parent.document.getElementById('divac').innerHTML + '</b><br><br>';
      }
      return "";
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'yes') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'true';
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'no') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'false';
      } else {
      return "";
      }
      } else {
      var cr = confirm(prom);
      if (cr == true) return 'true';
      return 'false';
      }
      } else {
      var crr = confirm(prom);
      if (crr == true) return 'true';
      return 'false';
      }
      }

      … the true and false boolean values become string returns … called, as per our example code snippet, in this changed way


      if (flat_bodied == "") var flat_bodied = ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));
      if (flat_bodied == "") { setTimeout(animal_categorize,5000); return; } else if (flat_bodied == 'true') {
      type_animal = stuff_outside_caret(document.getElementById("flatworm").innerHTML);
      } else {
      type_animal = stuff_outside_caret(document.getElementById("worm_leech").innerHTML);
      }

      … converting many local variables into global variables, as per this declaration above now (declared) up near the top of the Javascript …


      var flat_bodied = ""; // ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));

      … in today’s changed HTML and Javascript code of animal_categorization.html.

      Adding a new “Animal Categorization” HTML select element (dropdown) option onto yesterday’s Speech to Text Survey Tutorial for today’s changed PHP code of speech_supervisor.php, you can be trying this out at this live run link.


      Previous relevant Speech to Text Survey Tutorial is shown below.

      Speech to Text Survey Tutorial

      Speech to Text Survey Tutorial

      On top of yesterday’s Speech to Text ESL Tutorial we add, for the first time, a “Survey” functionality not needing a two player setup. This leaves the right hand table cell to be able to contain an HTML form element, used to “survey” the user on the survey questions you set up when selecting a new “Survey” HTML select element (dropdown) option.

      And so this is where our language of design, PHP, comes to the fore, as a useful language to process the potential for huge amounts of data related to the survey you design.

      We design the web application “Survey” component, so as to be able to email off either/both …

      • survey form as an HTML email attachment via the PHP mail method
      • survey form results as an HTML email link via an a mailto: link to the default email client application of the user

      PHP has it over HTML …

      • creating email as per the first option above … and …
      • being able to post process method=POST data from an HTML form element, where much more data can be handled

      This new functionality can be accessed via an option of the dropdown of this live run link, or a “cut to the chase” survey link for today’s changed PHP code of speech_supervisor.php.


      Previous relevant Speech to Text ESL Tutorial is shown below.

      Speech to Text ESL Tutorial

      Speech to Text ESL Tutorial

      When you involve audio input into a web application it is likely that that web application can become useful with learning a language, such as with ESL (English as a second or foreign language) usage, especially as such learning has …

      • spoken
      • reading
      • writing

      … components to it. As you would appreciate, once the learner is speaking and then that (spoken content) is written out (as a transcript), and the learner is then reading that content, the web application can be a “double whammy” effective learning tool.

      We extend the web application’s functionality from yesterday’s Speech to Text Primer Tutorial using a technique we often use, that being changing the original (guinea pig usage) word “Quiz” into it plus other options presented in a …

      • HTML select (dropdown) element … as per HTML “onload” event …

        <body onload="document.getElementById('preq').innerHTML=dds('Quiz'); document.getElementById('kb').focus(); pickq();">

        … call of the Javascript …

        function dds(qwhat) {
        var selbit="<select id=selbit onchange=' location.href=document.URL.split(\"#\")[0].split(\"?\")[0] + \"?mode=\" + this.value; '><option value=0>" + modes[0] + "</option></select>";
        for (var iselbit=1; iselbit<modes.length; iselbit++) {
        if (mode == iselbit) {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + " selected>" + modes[iselbit] + "</option></select>");
        } else {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + ">" + modes[iselbit] + "</option></select>");
        }
        }
        return qwhat.replace('Quiz',selbit);
        }


        … that sets off onchange event logic to …

      • reload the webpage with a URL ?mode= argument flagging this that is …
      • detected via

        var mode=location.search.split('mode=')[1] ? eval(decodeURIComponent(location.search.split('mode=')[1].split('&')[0])) : 0;
        var modes=["Quiz","Tongue Twisters","Haiku"];
        var arraynames=["questions","tongue_twisters","haiku"];
        var delims=["?","~","`"];
        var bcols=["yellow","lightgreen","lightblue"];

        … enabling, as necessary the …
      • “mapping” of other usage arrays (we are responsible for garnering) onto the original (guinea pig) array “questions” (within “dds” function above) via

        if (mode != 0) {
        eval(arraynames[0] + "=" + arraynames[mode]);

        document.getElementById('tdm').style.backgroundColor=bcols[mode];
        }

      That leaves, apart from the extra content duties, a new scoring mechanism, one new one of which analyzes question words against answer words and scores positive word length score components for answer words found in question words and negative word length score components for question words not found in answer words.

      Again, feel free to have a look at today’s changed PHP code of speech_supervisor.php‘s “Speaking Quiz plus ESL Others”.


      Previous relevant Speech to Text Primer Tutorial is shown below.

      Speech to Text Primer Tutorial

      Speech to Text Primer Tutorial

      There was some great advice that had us dipping our toes into “Speech to Text” web application thoughts. You probably know yourself about the brilliant Google Translate and its “Text to Speech’ capabilities (or read some of our postings here such as Italian French Spanish Verb Conjugation Text to Speech Tutorial)? Well, it’s Google again supplying the brilliance for the obverse ideas used today in our “Speaking Quiz” web application idea.

      “Speaking”, that is, if you are using a recent enough version of the Google Chrome web browser, some HTML aspects of which are eloquently explained by this very useful link utilizing the wonderful Google Speech to Text API.

      If you are interested in “Speech to Text” you should also check out the very interesting Diagflow … Speech to Text.

      Thanks everyone, for these artificial intelligence “dipping our toes” encouragement. Feel free to have a look at today’s PHP code of speech_supervisor.php‘s “Speaking Quiz”.


      Previous relevant Italian French Spanish Verb Conjugation Text to Speech Tutorial is shown below.

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Event Tutorial as shown below we’ve increased functionality of English translations by adding Google Translate Text to Speech capabilities to …

      • Italian
      • French
      • Spanish

      … via a new “loudspeaker” icon.

      Some of the talking points with today’s changes involve …

      • a “reveal” idea whereby the showing of an HTML element is controlled by its Javascript DOM [element].style.width CSS property, whereby the element is effectively invisible at width:1px and in our case today becomes visible, at width:20px, and, thus, clickable, for Google Translate popup window translation and text to speech capabilities via the control of …
      • binary decision making GUI ease of using HTML input tag type=checkbox and the associated Javascript DOM document.getElementById([element]).checked … because …
      • UX-wise it is good to forewarn users with an option when it comes to functionality involving sound
      • use of Javascript DOM document.getElementsByTagName(‘img’) as a means by which to manipulate HTML elements that are not necessarily provided with an ID global property

      As per the other tutorials in this thread, even with new Google Translate Text to Speech and Translation capabilities, nothing changes today about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.


      Previous relevant Italian and French and Spanish Verb Conjugation Event Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Event Tutorial

      Italian and French and Spanish Verb Conjugation Event Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Tense Tutorial as shown below we’ve increased functionality of English transaltions to …

      • Italian
      • French
      • Spanish

      … and the conjugations from WordReference.com by offering onmouseover (ie. hover) or onclick (or mobile touch) event logic for conjugations offered by using the wonderful MyMemory resource to translate these verb conjugations back into English, and present them in an additional column with a different background colour.

      You may recall us using MyMemory once before when we presented HTML/Javascript Hearing and Listening Primer Tutorial earlier on.

      As per the other tutorials in this thread, but even more so with gleaning information from the MyMemory API via a get method, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try out this new functionality.


      Previous relevant Italian and French and Spanish Verb Conjugation Tense Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      We’ve followed up on Italian Verb Conjugation and Tense Tutorial as shown below with “tense” context to some of the conjugations of …

      • Italian
      • French
      • Spanish

      Say “some of the” because …

      Even amongst the conjugating language “triplets” above, noticed that when it comes to the “tense” involved, there can be variations, but don’t need to tell a lot of you this old news. Did set me to thinking a bit about the The Tower of Babel story from the Bible, though. What would the world be like if we all spoke the one language? Esperanto, everyone?

      There’s a link between “language” and “life”. That’s why a language without “verbs” is not a language. And the Earth back in those dark days before any life, had no conduits for “language”. And it’s hard to see how “life” sort of started up? But I guess chemistry experts might be able to tell us how this might have come about.

      “Language” is all about patterns, and mirrors human progress with its “pattern” and “organization” and “flexibility” as a huge part of why we as “humans” got to be such agents of change on Earth. Just wish there had really been a more successful Doctor Dolittle in human history that could have got the “inside goss” (so to speak) on what we could have done better to protect the world’s environments.

      As per the other tutorials in this thread, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try it out, and even contemplate sending us some feedback.


      Previous relevant Italian Verb Conjugation and Tense Tutorial is shown below.

      Italian Verb Conjugation and Tense Tutorial

      Italian Verb Conjugation and Tense Tutorial

      Again, we saw that we could extend the functionality of the recent Italian and French and Spanish Verb Conjugation Tutorial as shown below, by, for Italian, to start with, trying to help the native English speaker out for where to look on the “conjugation” table presented for the English verb of interest, regarding conjugation information that might match their (verb) tense of interest.

      As you probably well know, every language on Earth has its peculiarities regarding how we express ourselves with regard to time, and a lot of that is associated with the verbs, or action words we use, and in the case of …

      • Italian
      • French
      • Spanish

      … that expression of the context of time in the grammatical usage, especially for people speaking the language, is reflected by conjugations made to the verb. Conversely, as I, a native English speaker, got to think about as this web application proceeded, English has words like “am” and “have” and “having” and “been” and “will” and “shall” and “is” and “are” and “was” and “were” and “would” and “should” and “has” and “had” and “to” and ‘”be” and “being” preceeding verbs, which can have, basically, two suffixes “-ing” and “-ed” (expressing present participles and past participles respectively) to try to do what conjugation does for Italian (we program for today) and French and Spanish languages.

      But there’s more to “tense” than Past, Present and Future as you well can imagine should you learn a language other than your native tongue, which you tend to “go along with the flow” perhaps unaware that “tense” exists, for some learners. There are concepts as layers on top about the context of the time the person is speaking relative to the time they are or were talking about … it gets complex … so you get concepts like “Present Perfect Progressive” (which we did a tutorial about at HTML/Javascript Present Perfect Progressive Primer Tutorial) if you get right into the ins and outs of all this grammar … which you might need to do to master that second language.

      Yet again, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in Italian “tense” thoughts in this way, with this live run link.

      Again, we hope you try some Italian, with specified “tense” prefix words and suffix endings, to see how the new functionality helps you out with Italian verb conjugations.


      Previous relevant Italian and French and Spanish Verb Conjugation Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tutorial

      Italian and French and Spanish Verb Conjugation Tutorial

      We saw that we could extend the functionality of yesterday’s Italian Verb Conjugation Primer Tutorial as shown below, by accessing other resources from the great WordReference.com, adding French and Spanish verb conjugation to yesterday’s Italian verb conjugation.

      As a rule we tend to find that replacing text with HTML select “dropdown” menus can help out this adaption pretty effectively. The other feature of today’s Javascript coding is the use of eval to team with the language code to direct user traffic to the correct parts of the WordReference.com website.

      Along the way we added some background “flag” imagery we found at Science Kids … thanks, heaps.

      Down the little brick road we also added a couple of hashtag navigators, HTML a links that just navigate within the page, allowing the user to move from the conjugation yellow zone to the translation zone (if you translated from English), as much as anything because the conjugation may need to be prompted by picking the “verb” amongst the list of “translated” possibilities, which you can then feed into the rightmost HTML input type=text textbox to, more than likely, get the (verb) conjugation you may have missed with the first pass.

      Nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish in this way, with this live run link.

      Hope you try it out.


      Previous relevant Italian Verb Conjugation Primer Tutorial is shown below.

      Italian Verb Conjugation Primer Tutorial

      Italian Verb Conjugation Primer Tutorial

      Learning Italian as a native English speaker is best done when you are young, and beginning recently on this quest, I learnt a bit of this.

      To me, what stuck out, was how easy we get it in English with regard to (the lack of) conjugating verbs, or articles, or adjectives, in our grammar.

      Is it that, in English, we can say something in a hurry and, sort of, wait to fix it up later, because we don’t conjugate verbs in our mind, or is this not how it works in other languages? Actually, am pretty sure no, because conjugation is done so fast in the minds of Italian speakers that it is no issue … hard to imagine, though, from where I’m standing … well, actually, sitting. Am not here to say, but know it is this, that teachers of Italian to English native speakers, concentrate on in early lessons.

      With this in mind, we don’t for one second pretend we are not using the wonderful resources at WordReference.com with today’s web application, but we thank them for their brilliance, and just rearrange things that you could glean perfectly well from here but need to take a few more steps to reach the conjugation (today it’s just verbs) web page bits, whereas we throw the conjugation bits straight at you. And yes, we do try to cater for the irregular verbs, and where they are regular you should see the word “regular” mentioned in the yellow zone conjugation areas … because we all know … well, you know what we mean?!

      The techniques used today do away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html with this live run link.

      So we hope you enjoy this break from our usual (other way around) ESL game (if it’s a game) to some “Conjugate, Italian Style” play.

      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.


      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.

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

Looks Nice Speech to Text Game Tutorial

Looks Nice Speech to Text Game Tutorial

Looks Nice Speech to Text Game Tutorial

It’s been too long getting back to some Speech to Text work, made possible for us via the very generous Google Speech to Text API functionality we last talked about at Contextualize Speech to Text to Speech LibreOffice Template Tutorial.

What prompted the revisit? Tahiti. Yes, many years ago here in Australia we had an “earworm” of a television commercial that stuck in a lot of minds …

… including yours truly. Now we’re not saying we agree with the sentiments of the advertisement, but it is fun to picture yourself sitting in the bath of a private plane in the age of Siri and Cortana and within “microphone shot” of an order to the cockpit (and no pits were harmed in the making of this blog post).

And so we looked into it, and did find the usual “speech to text” Google Chrome limitation, but then thought for others we could provide a textbox (rather than making them eat the leftover cake, that is), and found it needed interfacing on two fronts …

  • the supervisory changed PHP code of speech_supervisor.php with its live run needed to be tweaked in the addition of a new select (dropdown) element “Tahiti Looks Nice Game” option … the selection of which calls …
  • the supervised the changed wls_vs_php.htm

    var getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(/\+/g,' ') : '';
    var getoneorother=location.search.split('oneorother=')[1] ? decodeURIComponent(location.search.split('oneorother=')[1].split('&')[0]).replace(/\+/g,' ') : '';

    // ... and then later within document.body onload event Javascript logic ...

    if (getoneorother != '' && getcapitals == '' && getcountries == '') {
    var nomore=false, thectyis='', theccis='', vstwo, vsthree, thespi='';
    var vsone=document.getElementById('scapitals').innerHTML;
    vstwo=document.getElementById('selceq').innerHTML;
    vsthree=document.getElementById('sele').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    thespi='' + vsone.split('">' + thectyis)[0].split(' value="')[eval(-1 + vsone.split('">' + thectyis)[0].split(' value="').length)].split('"')[0];
    if (vstwo.indexOf('>' + getoneorother) != -1) {
    thectyis=getoneorother + vstwo.split('>' + getoneorother)[1].split('<')[0];
    theccis=vstwo.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vstwo.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    } else if (vstwo.toUpperCase().indexOf('>' + thespi.toUpperCase()) != -1) {
    thectyis=thectyis + vstwo.split('>' + thespi)[1].split('<')[0];
    theccis=vstwo.split('>' + thespi)[0].split(' value="')[eval(-1 + vstwo.split('>' + thespi)[0].split(' value="').length)].split('"')[0];
    vstwo=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vstwo.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    } else {
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    } else if (vstwo.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vstwo.split('/' + getoneorother)[0].split('>')[eval(-1 + vstwo.split('/' + getoneorother)[0].split('>').length)];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + getoneorother + vstwo.split('/' + getoneorother)[1]).replace(/\ /g,'_');
    } else if (vsone.toUpperCase().indexOf(' value="' + getoneorother.toUpperCase()) != -1) {
    nomore=true;
    theccis=getoneorother + vsone.split(' value="' + getoneorother)[1].split('"')[0];
    thectyis=vsone.split(' value="' + theccis + '">')[1].split('<')[0];
    location.href=document.URL.split('?')[0].split('#')[0] + '?countries=' + encodeURIComponent(thectyis) + '&capitals=' + encodeURIComponent(theccis);
    }
    if (!nomore) {
    vsone=document.getElementById('selceq').innerHTML;
    if (vsone.toUpperCase().indexOf('>' + getoneorother.toUpperCase()) != -1) {
    thectyis=getoneorother + vsone.split('>' + getoneorother)[1].split('<')[0];
    theccis=vsone.split('>' + getoneorother)[0].split(' value="')[eval(-1 + vsone.split('>' + getoneorother)[0].split(' value="').length)].split('"')[0];
    vsone=document.getElementById('sele').innerHTML;
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + vsone.split(',' + theccis + ',')[1].split('>')[1].split('<')[0].replace(/\ /g,'_');
    //document.URL.split('?')[0].split('#')[0] + '?andgo=y&countries=' + encodeURIComponent(thectyis) + '&capitals=' +
    }
    if (!nomore) {
    if (vsthree.indexOf('/' + getoneorother.replace(/\ /g,'_')) != -1) {
    thectyis=vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>')[eval(-1 + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('>').length)];
    theccis= getoneorother.replace(/\ /g,'_') + vsthree.split('/' + getoneorother.replace(/\ /g,'_'))[1].split('<')[0].split('"')[0];
    nomore=true;
    location.href='//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=' + (thectyis + '/' + theccis).replace(/\ /g,'_');
    }
    }
    }
    }

We hope you try it out (with the remote).


Previous relevant Contextualize Speech to Text to Speech LibreOffice Template Tutorial is shown below.

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Contextualize Speech to Text to Speech LibreOffice Template Tutorial

Maybe it’s just my weakness, but what I often find writing web applications is that I come back to them several months later and wonder, sometimes, how to work them. This is a weakness of “contextualization”.

Contextualization is putting your audience “into the picture” as much as is possible. Who says this is always easy? We’re not, but it is really good to try. A big thing in the programmer’s favour with respect to good contextualization practice is if you control the processes. Luckily with the current “Speech to Text to Speech” web application ideas, we control the data. Never forget the power of this, if you happen to lose sight of this ( … but then I guess it’s too late … boo hoo). Barring lack of backward compatibility, our vision of the “sin of all sins”, when you control the data you get to control …

  • the look of things
  • the placement of things (which we also have the parent do a bit of with today’s work)
  • your own data delimitation, or other data arrangement, rules
  • the relationships between parent and child HTML web page and child iframe or popup window arrangements

You may have heard us talking about “hard working duck” child iframe HTML components to projects? In these designs the child is doing the bulk of the work. Up to now, with our LibreOffice template “ducks” (in their HTML iframe elements) have been crucial but not dynamically hardworking as such. More just the scaffolding for the job. But today we’re giving them more to do, because after several days thinking of approaches to it, we’ve “landed” onto the approach for added “contextualization” that goes along the lines …

  1. the parent Speech to Text to Speech PHP supervisor will have the added role with a new …

    <input type=hidden id=thefocusis value=''></input>

    … to “pledge” to …

    1. keep it populated with a number representing the bit after “s” for the ID of the span element containing a form prompt label where the focus is near (focus is actually on the accompanying input type=text textbox element)
    2. window.scrollTo(0,0); // few seconds after a change of focus … not too much to ask?!
  2. the children (ie. any LibreOffice template piece of HTML from now on) in iframe elements get a new bit of Javascript near the end of their document.body (ie. before </body>) .. as per …

    <script type='text/javascript'>

    var thelastfocuswas=-1;
    var thisfocusis=-1;

    function keepacheck() {
    var ic=parent.document.getElementById('thefocusis').value;
    if (ic != '') {
    if (eval(ic) != thelastfocuswas) {
    if (thelastfocuswas != -1) {
    document.getElementById('span_' + thelastfocuswas).style.border='0px solid orange';
    }
    thisfocusis=eval(ic);
    document.getElementById('span_' + thisfocusis).style.border='2px solid orange';
    location.href='#' + 'span_' + thisfocusis;
    thelastfocuswas=thisfocusis;
    }
    }
    }

    function fixbody() {
    var ij, inhtml=document.body.innerHTML;
    var outhtml=inhtml;
    var sis=' style="border:2px solid orange;" ';
    if (document.URL.indexOf('goto=') != -1) {
    if (parent.document) {
    if (parent.document.getElementById('thefocusis')) {
    var candidates=outhtml.split('&l' + 't;');
    var cl=candidates.length;
    if (candidates.length > 1) {
    for (ij=1; ij<cl; ij++) {
    if (candidates[ij].indexOf('&g' + 't;') != -1) {
    if (candidates[eval(-1 + ij)].indexOf('spa' + 'n_') == -1) {
    outhtml=outhtml.replace('&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;', '<span' + sis + ' id=span_' + eval(-1 + ij) + '>&l' + 't;' + candidates[ij].split('&g' + 't;')[0] + '&g' + 't;</span>');
    sis='';
    thelastfocuswas=0;
    parent.document.getElementById('thefocusis').value='0';
    candidates=outhtml.split('&l' + 't;');
    }
    }
    }
    }
    }
    }
    if (outhtml != inhtml) {
    document.body.innerHTML=outhtml;
    setInterval(keepacheck, 1000);
    }
    }
    // return outhtml;
    }

    setTimeout(fixbody, 2000);

    </script>

    … which …

    1. two seconds after loading, looks through its own document.body.innerHTML for &lt;[Parameter Label]&gt; findings to …
    2. encase all such findings within <span id=span_[countOfSuchFindingsStartingAtZereo]> and </span> … saved into a revised …
    3. new document.body.innerHTML representation as above is “slapped over” the existant document.body.innerHTML … and …
    4. parent.document.getElementById(‘thefocusis’).value=’0′; // to get the ball rolling and from then on …
    5. setInterval(keepacheck, 1000); // keeps an eye out for when the parent changes its focus .. so that when it does and for this initial ‘0’ one here now …
    6. the span element equivalent of the one onfocus in the parent is given an orange border here (and any one from the past has its border made to be invisible) … and we …
    7. hashtag navigate our way to this place in the “contextualization” half zoomed in middle cell iframe data via … location.href=’#span_’ + [idOfParentElementInFocus];
  3. … and so putting this into play leaves the user seeing where they are up to in the context of a finished product while they are answering prompt (questions). Are we there yet?!

    Adding to the recent Agenda Speech to Text to Speech LibreOffice Wizard Tutorial progress, then we have changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this (getting all this into content) Agenda live run.

    You can also see this play out at WordPress 4.1.1’s Contextualize Speech to Text to Speech LibreOffice Template Tutorial.


    Previous relevant Agenda Speech to Text to Speech LibreOffice Wizard Tutorial is shown below.

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    Agenda Speech to Text to Speech LibreOffice Wizard Tutorial

    We’re happy here, finally, to move onto a new concept with the “Speech to Text to Speech” web application blog posting thread, building on yesterday’s Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial using the recent …

    • Curriculum Vitae (concept) logic … as the basis for a new …
    • Agenda (concept) … an HTML “template” of which is derived from a LibreOffice Wizard Template

    In case we can genericize for a user “owned” additional concept (at a later date), we take careful note of what we have to do to achieve this “by hand”. We’ll see.

    Along the way we changed a couple of things …

    • on a rudimentary call of the web application, on non-mobile platforms, our top (HTML select) dropdown is made to have the size of the number of option “subelements”, so that that non-mobile user can see all the functionality available as they enter the web application
    • for Surveys and Business Letter template and Curriculum Vitae and now Agenda templates we were annoyed by how when there are lots of questions for the user to answer, it went below the fold of the screen eventually, an annoyance self created by the coding of <br> linefeeds after input type=text elements that are removed now, but put back in front of the span elements when they are all reshown again at the end of the form “asking” … the [element].style.display=’none’ DOM statements were good though, rather than [element].style.visibility=’hidden’ DOM statements applied to form elements just answered, as the latter leaves whitespace while the former collapses that whitespace

    Let’s talk about this Agenda template created via a Wizard at LibreOffice, thanks again. As you can see from the …

    sequence of dialog boxes that lead the user through a series of well-defined steps

    … the LibreOffice Wizard alone will suit a lot of people’s purposes for this Agenda meeting concept via a desktop application. The difference with our web application, though, is that it is “web” transportable with how (and where) you could use this functionality.

    The agenda concept hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Agenda live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Audio Prompting Tutorial

    Do you remember with yesterday’s Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial how we presented a YouTube video means of catering for some automated audio prompting with our Curriculum Vitae web application following our “subdream” of …

    • not having the user to have to lift their head but just dictating all their answers … or …
    • not having the user to have to lift their head but just typing in all their answers

    … and that the other choice in these “uploaded” inhouse content ideas is today’s interfacing “subproject” … and we present this posting courtesy of our “yellow submarine” room … tee, hee

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    For audio (or video) content we can use an (s)ftp file transfer desktop application like FileZilla to perform the uploading of the media files, which we create on Mac OS X’s very useful QuickTime Player desktop application. We are forever using its great Screen Capture functionality, and with this work we combine that with separate Audio Capture sessions that become audio clips added onto the Screen Capture via QuickTime Player’s …


    Edit -> Add Clip

    … option. But those audio clips can also sit alone as an *.m4a file (we called cvtalk.m4a) sitting on the rjmprogramming.com.au web server, and though we could use that media in an audio HTML element, as below …

    Audio Prompting for Curriculum Vitae

    … we prefer to have “less baggage” around today to try to limit “focus clashes” and so make use of the Javascript “Audio” object to work these audio promptings for our Curriculum Vitae web application. As for yesterday, we use caption subtitles files to determine when (and where) to start and stop the audio, where, if these are called [start] and [end] (values in seconds), the broad brush approach to playing the audio prompt is …


    var mediao = new Audio('cvtalk.m4a'); // initialize Audio object in global variable

    function medias() {
    if (mediao) {
    mediao.pause();
    }
    }

    // When called on to play a particular audio prompting, and have plucked out from the global array the relevant [start] and [end] values
    mediao.currentTime = [start];
    mediao.play();
    setTimeout(medias, Math.floor(eval(eval([end] - [start]) * 1000)));

    We now have three types of automated audio prompting choices, in priority usage …

    • Mac OS X say Speech to Text (via MAMP local Apache/PHP/MySql web server)
    • Audio (or Video) on rjmprogramming.com.au website
    • YouTube Video on YouTube

    … and so, now, we need to have a mechanism to offer the user the offer to refuse this service, and if they do, it could be that they wanted to use a different “mode of service”, and so we now offer a new HTML select element (dropdown) to allow for that possibility.

    And, again, we have today’s uploaded prompting (audio and video) media content ideas, augmenting a default preferred (but rare) Mac OS X MAMP say idea, hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


    Previous relevant Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial is shown below.

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Curriculum Vitae Speech to Text to Speech Uploaded Prompting Tutorial

    Yesterday’s Curriculum Vitae Speech to Text to Speech Prompting Tutorial was about a generic automated prompting solution, but was suited to a relatively small audience, alas. The other choice here is to make your own audio content that you upload, two options for which we can think of being …

    1. audio (or video) content, for us, uploaded to the rjmprogramming.com.au website (which we’ll talk more about soon) … and …
    2. YouTube video with an audio track uploaded to YouTube which we access via the excellent YouTube embedded iframe API

    But how do we tell the interface we have where to start and stop the video? We construct one of those caption subtitles files, the same one you can see in play below with this YouTube video that we constructed, uploaded, and use for users constructing a Curriculum Vitae and saying they would not mind some prompting …

    There are two approaches here with piecing together the media …

      • create an audio track (and we use Mac OS X QuickTime Player for all this) and take a note of its length … then (like we did for the YouTube video above) …
      • create a screen capture video of that same length
      • Add the Clip of the audio to the end of the video and upload to YouTube

      • create a screen capture video of the actions to create a Curriculum Vitae
      • create an audio track (and we use Mac OS X QuickTime Player for all this) while playing that screen capture video back to yourself … then …
      • Add the Clip of the audio to the end of the video and upload to YouTube … as per …

      Adding to yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s uploaded prompting media content ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run.


      Previous relevant Curriculum Vitae Speech to Text to Speech Prompting Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Curriculum Vitae Speech to Text to Speech Prompting Tutorial

      Regulars to this current blog posting thread on the theme of “Speech to Text to Speech” will know …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      … but may not know that we also have a “subdream” of (attempting to) getting it so that one or other of …

      • not having the user to have to lift their head but just dictating all their answers … or …
      • not having the user to have to lift their head but just typing in all their answers

      … except perhaps for button presses … can be achieved. We’re not sure here whether this can be achieved, but we do know of a thing we need to do for sure to even get an inkling of a notion on the way to attempting to achieve this “subdream”, that being …


      "we need to be able to use an automated Text to Speech mechanism to have the web application say the words of the prompts to Curriculum Vitae or Survey questions"

      … because only then can we not lift our heads either from looking straight ahead (for Speech to Text dictations) or looking down at a textbox on the screen (for no Speech to Text dictations) during the “prompting phase” of these web applications. Why bother? As much as for “it might make the web application very beneficial”, we would say also that you learn a lot trying.

      Can tell you even before starting on the missing piece to the “jigsaw” that the biggest problem, as often is the case with web applications made up of many components, you run out of timing places to have the “focus” of the webpage being at the correct spot, at any given time. It is the “Speech to Text” bit that is most sensitive here, as well as the fact that a curious thing we know of already, to our amusement, is that the “Speech to Text” can pick up with the microphone words other than the ones the user uttered, like from a radio or television, but not Nala’s woof?! And now we are introducing a new idea where the speakers of the device or computer are bound to be picked up by that same device or computer’s microphone, surely. Well, first off … please don’t call me Shirley … and we’ll see what we end up with here, rather than worrying about every detail now, though think earphones (or headphones) may be one thought.

      Our first idea of a few, today, regarding “not lifting heads” is for those …

      • Mac OS X
      • MAMP (local Apache/PHP/MySql)

      … afficianados out there. Yes, we are intrigued by that internet/intranet type of feeling of combining a “public domain/MAMP local web server” “parent/popup child” scenario that we got into a bit with the blog posting thread headed by Zipfiles in PHP Media Gallery Synchronize Tutorial, and which we are “channelling” today, to the extent that its web application is called as an HTML “iframe child” of our parent web application today, to detect the existence of the two conditions above as to whether to “attempt” the automated “Text to Speech Prompting” we are after. Why “attempted” in double quotes? Well, on the internet, it is rude not to give forewarning of the computer speakers being brought into play without the user’s consent … it’s just a good thing to allow the user to refuse this functionality, if that’s their wish.

      In that aforesaidmentioned blog posting thread you will hear mentioned the wonderful Mac OS X command line say command … say no more… chortle,chortle.

      So, continuing on from yesterday’s Curriculum Vitae Speech to Text to Speech Internationalization Tutorial we have today’s Mac OS X/MAMP “say” Text to Speech ideas hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run. You may recall the say.php which has a “popup child” relationship here.


      Previous relevant Curriculum Vitae Speech to Text to Speech Internationalization Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      Curriculum Vitae Speech to Text to Speech Internationalization Tutorial

      The modifications of yesterday’s Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial all had a good generic feel to them, but something was definitely missing. Is it too late to ask you to close your eyes and not read the blog posting title? It’s “internationalization” issues, regarding language.

      Language “internationalization” is pretty important, especially for a Curriculum Vitae application. What’s the point of writing a Curriculum Vitae in a language not suited to the people who are meant to read it. Up to now, though, our inhouse addons to the Google

      … already cater for this language “internationalization” very well already, and we feel that we should try our hardest to continue on that sentiment with the “inhouse” work.

      Working from the end result objectives back and through we need to …

      • organize webpage structure via good advice of this link, thanks …

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        ...

        … except that the “en” is English and we want to allow for other two letter language codes the user can choose from the lower middle cell language dropdown (but please allow for translations by doing this before changing any upper middle cell language dropdown)
      • on body element define a dir=”auto” to try to cater for languages whose text is designed to run right to left
      • we use the same codebase for many “layers” of navigation, and throughout that in all ($_GET[]) web browser address bar URLs and ($_POST[]) method=POST forms, we need to be passing any language code information selected by the user along to any webpages which follow all the way through to the end report, such as a Curriculum Vitae report (or document)
      • hardest of all for today, we need to, for the …

        new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter

        intervene at the point with PHP code where we define a default textbox field value …

        function ourstr_replace($froms, $tos, $tstr) {
        global $qqhval;
        $lc="";
        $prevlc="";
        if ($tstr == "") return $tstr;
        $rs=str_replace($froms, $tos, $tstr);
        $xrs=substr($rs,0,1);
        $lc=$xrs;
        for ($ir=1; $ir<strlen($rs); $ir++) {
        if (substr(($rs . " "),$ir,2) == "of") {
        if (substr($rs,(-1 + $ir),1) >= '0' && substr($rs,(-1 + $ir),1) <= '9') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= '0' && substr($rs,$ir,1) <= '9') {
        if (substr($rs,(-1 + $ir),1) == 'f') $xrs.=" ";
        } else if (substr($rs,$ir,1) >= 'A' && substr($rs,$ir,1) <= 'Z') {
        if (substr($rs,(-1 + $ir),1) != ' ') $xrs.=" ";
        }
        $prevlc=$lc;
        $lc=substr($rs,$ir,1);
        $xrs.=substr($rs,$ir,1);
        }
        if ($lc == " ") {
        if ($prevlc == " ") {
        $qqhval=$qqhval; // more to do
        }
        $qqhval=lookup(str_replace("Translation for English word ","",str_replace("Translation for English words ","",$xrs))); //substr($xrs,0,(strlen($xrs) - 1));
        }
        return $xrs;
        }

        … and then bring into play the incredible MyMemory API translations (returning JSON data, by default), thanks, via …



        function lookup($ptoobig) {
        global $langcode;
        $mymc="";
        if (str_replace("en","",$langcode) != '' && strlen(trim($ptoobig)) > 0) {
        $pokay=trim($ptoobig);
        $purl="HTTP://api.mymemory.translated.net/get?q=" . str_replace("+","%20",urlencode($pokay)) . "&langpair=en|" . $langcode;
        // HTTP://api.mymemory.translated.net/get?q=Hello%20World!&langpair=en|it#Ciao Mondo!
        // {"responseData":{"translatedText":"Ciao Mondo!","match":1},"quotaFinished":false,"responseDetails":"","responseStatus":200,"responderId":"242","exception_code":null,"matches":[{"id":"562784765","segment":"Hello World!","translation":"Ciao Mondo!","quality":"74","reference":null,"usage-count":97,"subject":"All","created-by":"MateCat","last-updated-by":"MateCat","create-date":"2018-05-24 22:32:33","last-update-date":"2018-05-24 22:32:33","match":1}]}
        if (file_exists("mym.txt")) $mymc=file_get_contents("mym.txt");
        $findings=explode($purl, $mymc);
        if (sizeof($findings) > 1) {
        if (strlen(explode("\n", $findings[1])[0]) <= 1) {
        return $ptoobig;
        } else {
        return html_entity_decode(str_replace('\u','&#x',substr(explode("\n", $findings[1])[0],1)), ENT_QUOTES, "UTF-8") . " ";
        }
        } else {
        $thisf=str_replace(" "," ",file_get_contents($purl));
        if (strpos($thisf, "responseData") !== false) {
        $fndis=false;
        if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"' . strtolower(trim($ptoobig)) . '"') !== false) {
        if (strpos($thisf, '"segment":"' . strtoupper(trim($ptoobig)) . '","translation":"' . strtoupper(trim($ptoobig)) . '"') !== false) {
        $fndis=false;
        } else {
        $fndis=true;
        file_put_contents("mym.txt", $mymc . $purl . "#" . trim($ptoobig) . "\n");
        return $ptoobig;
        }
        }
        if (!$fndis) {
        if (strpos($thisf, '{"translatedText":"') !== false) {
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', explode('{"translatedText":"', $thisf)[1])[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', explode('{"translatedText":"', $thisf)[1])[0]), ENT_QUOTES, "UTF-8") . " ";
        } else if (strpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') !== false) {
        $fndat=strrpos(strtolower($thisf), '"segment":"' . strtolower(trim($ptoobig)) . '","translation":"') + strlen('"segment":"' . strtolower(trim($ptoobig)) . '","translation":"');
        file_put_contents("mym.txt", $mymc . $purl . "#" . explode('"', substr($thisf, $fndat))[0] . "\n");
        return html_entity_decode(str_replace('\u','&#x',explode('"', substr($thisf, $fndat))[0]), ENT_QUOTES, "UTF-8") . " ";
        } else {
        file_put_contents("mym.txt", $mymc . $purl . "\n");
        return $ptoobig;
        }
        }
        } else {
        return $ptoobig;
        }
        }
        }
        return $ptoobig;
        }

      On a whole other level the Google Chrome web browser has an inbuilt translation ability, which users may prefer.

      Today’s language “internationalization” improved functionality hosting changed PHP code of speech_supervisor.php can, yet again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option, perhaps after first picking a language code from the language code dropdown below it, allowing for those potential translations to be automated into the form default textbox field values.


      Previous relevant Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      Curriculum Vitae Speech to Text to Speech LibreOffice Tutorial

      We started on a Curriculum Vitae (via LibreOffice template) yesterday with Curriculum Vitae Speech to Text LibreOffice Tutorial and today’s work is “consolidation” before adding any new functionality as such, because we saw improvements galore that could improve what we had as of yesterday.

      Today, as you can see a lot of on today’s tutorial picture, we …

      • when in the Survey and Curriculum Vitae options we used to lose the chance to select other options from the main HTML select element dropdown, and that is fixed today
      • the prompts no longer show underscores
      • so user can get help with, or hear via Text to Speech, the user can now select a language of choice from the language dropdown, and do any of …
        1. onhover (ie. onmouseover)
        2. onclick
        3. have separate window open on arrival of new prompt (as designated by user) … of …

        Google Translate window that often has Text to Speech capabilities

      • better focus to prompt textboxes of forms both as an alternative in Google Chrome, and/or “as the main game” for other web browser types
      • add onblur logic on prompt textboxes of forms enforce at least space and/or some change to a default value, to allow this prompt textbox keyboard entry be accepted as a final value for this Curriculum Vitae or Survey form field value
      • new mechanism to allow a template prompt be a form field default value (that we make happen for the Curriculum Vitae header sectional texts) when a space character preceeds the final &gt; end delimiter
      • flag to user the way they can enter <br> within prompt textboxes for multiline data entries, via the prompt textboxes onhover (ie. onmouseover) induced title property
      • allow for two types of email ideas …
        1. email the link to a Curriculum Vitae form to fill out to an emailee via the local email client program via an a mailto: email link
        2. email the resultant Curriculum Vitae report (or document) via PHP mail methodology using an HTML email attachment

      No doubt you can think of some improvements too?!

      Today’s “LibreOffice Template” Curriculum Vitae (and Survey) improved functionality hosting changed PHP code of speech_supervisor.php can, again, be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option.


      Previous relevant Curriculum Vitae Speech to Text LibreOffice Tutorial is shown below.

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      Curriculum Vitae Speech to Text LibreOffice Tutorial

      With the recent Speech to Text LibreOffice Template Tutorial we opined …

      We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Are we there yet? We’re getting there.

      Today’s work on a simple Curriculum Vitae takes a …

      • LibreOffice template Curriculum Vitae (thanks) …
      • Save As… HTML Document (Writer) (.html) … and new to today’s Curriculum Vitae template …
      • Amend that HTML to add in our own &lt;Parameter Label&gt; … and new today …
      • Add more &lt;Parameter Label&gt; entries allowing for CSS overrides, using for the first time, an HTML textarea (form) element (for a multi-line text entry), entered by the user, optionally changing the default LibreOffice Curriculum Vitae template styling … but as per a lot of the other additions of functionality …
      • We add an HTML select (dropdown) element option to go directly to the user defined &lt;Parameter Label&gt; value definitions … ready for the coalescing at the usual …
      • A report button click/touch shows a webpage Curriculum Vitae resultant report (a fair bit like a form, today)

      And so today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this generic live run link, or this Curriculum Vitae live run to pick the new Curriculum Vitae dropdown option. On the Google Chrome web browser you could be dictating your Curriculum Vitae in no time!


      Previous relevant Speech to Text LibreOffice Template Tutorial is shown below.

      Speech to Text LibreOffice Template Tutorial

      Speech to Text LibreOffice Template Tutorial

      If you like interpretive computer languages, or “substitutional” type thinking, you would gravitate towards templates. Templates in Word Processing circles, in LibreOffice circles to be precise, which are the circles apt to today’s work, are designed to contain a lot of the donkey work associated with a “thematic document”, like today’s “Business Letter” featured in today’s tutorial picture. Those templates then form the basis for final documents that “plug in” real data where the template has sought to parameterize its data, the LibreOffice (New->Template Save As… HTML Document (Writer) (.html)) via …


      &lt;Parameter Label&gt;

      Yesterday’s Speech to Text Hangman Game Tutorial was good preparation for today, but the real synergies lie with the previous Speech to Text Survey Tutorial as this “LibreOffice Template” side to the story is that “Survey” side to the story but …

      • with the “Label=Value” paradigm we can deduce the “Label” bits from the LibreOffice template rather than having to ask an administrator user to define … and then when executing the …
      • report uses the LibreOffice template (that has parameter substitutions run over it) as its basis rather than a generated HTML table that is populated

      … and so the user can add a URL to a LibreOffice Template “HTML Document (Writer) (.html)” to flag this difference in functionality after selecting the newly named …


      Survey or LibreOffice Template

      … HTML select element option. We hope you can see how time saving this template usage could be for you. We still have a “dream” in this line of thinking to develop a user friendly enough form filling (web application) aid.

      Today’s “LibreOffice Template” functionality hosting changed PHP code of speech_supervisor.php can be tried out at this live run link.


      Previous relevant Speech to Text Hangman Game Tutorial is shown below.

      Speech to Text Hangman Game Tutorial

      Speech to Text Hangman Game Tutorial

      ESL students can also benefit from forms of learning that are games, and yesterday’s Speech to Text Vocabulary Phrases Tutorial‘s new option to our Google Speech to Text API series of web application functionalities lends itself to an extension of that with a “spelling” component in the form of the popular “Hangman” game many families and school students are likely to know quite well.

      With “Hangman” we want to involve two players, one taking on the web application’s choice of English phrase to solve, and deciding whether to pass on a hint, or not to the other player trying to solve the English phrase letter by letter. Scoring-wise that second player’s score improves if the player solves it before the “noose” comes into play, else the score is reduced by the length of the English phrase involved.

      So what was involved?

      • map tag creation, thanks to the great mobilefish
      • the area tag to div overlay position:absolute ideas as also presented with Very Versus Too Game Primer Tutorial help with initial masking of image parts, before later making that mask have a transparent colour, as a player picks a letter that does not appear in the English phrase attempting to be solved …

        function areatodiv() {
        var areas=document.getElementsByTagName('area'), coordsare=[];
        for (var i=0; i<areas.length; i++) {
        if (('' + areas[i].coords).indexOf(',') != -1) {
        coordsare=areas[i].coords.split(',');
        document.body.innerHTML += "<div onclick=\" document.getElementById(this.id.replace('div','i')).style.zIndex='11'; this.style.zIndex='-9'; this.style.display='transparent';\" id='div" + eval(i + 1) + "' style='border:0px solid red;overflow:hidden;display:block;z-index:3;position:absolute;left:" + eval(-2 + eval(coordsare[0])) + ";top:" + eval(-2 + eval(coordsare[1])) + ";width:" + eval(12 + eval(coordsare[2]) - eval(coordsare[0])) + ";height:" + eval(12 + eval(coordsare[3]) - eval(coordsare[1])) + ";background-color:white;'></div>";
        }
        }
        if (document.URL.indexOf('tosolve=') != -1) {
        ts = location.search.split('tosolve=')[1] ? decodeURIComponent(location.search.split('tosolve=')[1].split('&')[0]) : '';
        cp = location.search.split('curplayer=')[1] ? decodeURIComponent(location.search.split('curplayer=')[1].split('&')[0]) : '1';
        var cl = location.search.split('clue=')[1] ? decodeURIComponent(location.search.split('clue=')[1].split('&')[0]) : '';
        if (ts == '' || !parent.document.getElementById('score') || !parent.document.getElementById('shangman')) {
        doclick();
        } else {
        hscores[0]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[0]);
        hscores[1]=eval(parent.document.getElementById('score').innerHTML.replace('Score:','').replace('/',',').replace(' ','').split(',')[1]);
        if (cl != '') {
        document.getElementById('clues').innerHTML='Hint: ' + cl;
        } else {
        document.getElementById('clues').innerHTML=cl;
        }
        document.getElementById('divs').setAttribute('data-title', ts);
        for (var ii=0; ii<ts.length; ii++) {
        thisc=ts.substring(ii,eval(1 + ii));
        if (thisc.toLowerCase() >= 'a' && thisc.toLowerCase() <= 'z') {
        thisc='_';
        }
        document.getElementById('divs').innerHTML+=thisc;
        }
        document.getElementById('divs').style.display='block';
        document.getElementById('clues').style.display='block';
        document.getElementById('sels').style.display='block';
        ihsels=document.getElementById('sels').innerHTML;
        }
        } else {
        doclick();
        }
        }

        … as called at the document.body onload event
      • the player letter selection is via an HTML select element size=27 (on non-mobile, so that the player sees all the choices at once)
      • duplicate choices, as we so often do, are quietly rejected via a comparison of the player choice against a global variable we often call “sofar” which is appended by new letter selections
      • additional “final slide” (far too gory to go into) presented when things go wrong

      Today’s “Hangman” game hosting changed PHP code of speech_supervisor.php can be tried out at this Hangman Game mode live run link (or you can use the default live run link), which we hope you or someone you know will try out. The new child HTML iframe code is hangman_bg.html for your perusal.


      Previous relevant Speech to Text Vocabulary Phrases Tutorial is shown below.

      Speech to Text Vocabulary Phrases Tutorial

      Speech to Text Vocabulary Phrases Tutorial

      ESL students can struggle with English Phrases and Idioms, and with that in mind we channel the ideas of the previous English Phrase Guessing Game Primer Tutorial on top of the previous build up from Speech to Text to Speech Tutorial to add a new option called “Vocabulary Phrases” to our Dropdown List of functionality making use of the great Google Speech to Text API.

      But it’s not just pronunciation of the “Vocabulary Phrases” that is of interest here, which the Google Chrome web browser microphone based Google Speech to Text API can be helpful for. Learners of English can be baffled by the completely different meaning of a phrase that can sometimes only have a tenuous connection with the meanings of the individual words making it up. In order to help here we add …

      • “pick another phrase” button … can mean “give up” and/or “life is too short”
      • “look for more information about the phrase” link to … you guessed it … the Google search engine result set … thanks
      • ways for the user to control …
        1. Minimum phrase length
        2. Maximum phrase length
        3. Maximum length of any one word of the phrase

      Today’s “Vocabulary Phrases” changed PHP code of speech_supervisor.php can be tried out at this Vocabulary Phrases mode live run link (or you can use the default live run link), which we hope you or someone you know will find useful.


      Previous relevant Speech to Text to Speech Tutorial is shown below.

      Speech to Text to Speech Tutorial

      Speech to Text to Speech Tutorial

      It’s ESL thoughts back at the top of our thinking today building on yesterday’s Speech to Text Hierarchy Tutorial. We’re going the full circle today, improving on what we have already as far as an ESL learner might be concerned (or perhaps other users too) allowing the user the ability to …


      hear it back

      … via the brilliant Google Translate and its “Text to Speech” capabilities. Hence, “Speech to Text to Speech” in today’s blog posting title.

      We see a twofold advantage here, in that …

      • if a user doesn’t have the foggiest what is going on, they can select a language, and have the middle table cell question (or answer) be translated from English, for themselves … and …
      • in the Google Chrome web browser incarnation, they may answer something and see the transcription happen, and then “hear that (transcription) back”

      … that latter functionality could highlight pronunciation weaknesses, perhaps. Not that we are saying this replaces talking to an active speaker of the language you want to learn, but sometimes there’s just no one about that speaks that language. I’ve tried talking to Nala, but she’s far too dogmatic … boom, boom … though think she might be practising Dalmation out the back of an evening.

      What’s the new mechanism to make this happen? A new HTML select element dropdown of languages is show in the middle table cell, augmenting the Google Speech to Text API language dropdowns, that if populated with a “language of interest” value then looks to either/both …

      • middle table cell question (or answer) … and/or …
      • contents of left (or perhaps right) table cells

      … as the wording to be submitted to Google Translate for translation, in a new window. As you may have seen before if you’ve used Google Translate, once there doing a translation, oftentimes you will be offered a loudspeaker icon on either side of the translation to hear a voice say the words in that language, with the accent of a native speaker (though computerlike).

      Today’s “hearing it back” changed PHP code of speech_supervisor.php can be tried out at this live run link, which we hope you find useful.


      Previous relevant Speech to Text Hierarchy Tutorial is shown below.

      Speech to Text Hierarchy Tutorial

      Speech to Text Hierarchy Tutorial

      Are you amazed like me at how computer software can eventually be boiled down to the difference between …

      • 1
      • 0

      … call it what you will … yes versus notrue versus false (boolean values) … on versus offthe “binary” design?

      If you have the patience, you can break really complex decision making (that you might model with a flow chart) via “yes” versus “no” binary decisions, based on the right questions to ask. And that is what we are doing today, recalling that earlier presented HTML/Javascript Animal Categorization Tutorial to Categorize Animals based on questions.

      As you answer these questions, all effectively “yes” versus “no” ones, you are breaking into the animal kingdom categorization hierarchy to identify an animal of interest you are interested in categorizing. As computers do, no imagination here, but they break the problems they are presented with into “binary” decisions, to get down to the fundamentals of it all.

      And the “yes” and “no” of various languages are just about the most important words for artificial intelligence systems to recognize, so with this in mind, we thought it a good fit to use the right hand cell to open that previous Animal Categorization web application in its own HTML “child” iframe to supply the “parent” with the questions that flow through it and on up to the “parent” where, if using Google Chrome web browser, a “yes” versus “no” spoken answer may return to the “child” for further “hierarchical tunnelling”.

      The changes needed for the “child” iframe web application HTML and Javascript logic revolved around its usage of the “perfect fit” …


      confirm(questionPrompt); // returns true for OK button press and false for Cancel button press

      … “true” and “false” function. But today, because Javascript does not have a sleep function, we needed to add a third return value that we decide to be blank (ie. string “”). Trouble with this is that “” equates to false by Javascript, so in our modified …


      function ourconfirm(prom) {
      var wo=null;
      if (parent.document) {
      if (parent.document.getElementById('divac')) {
      if (parent.document.getElementById('divac').innerHTML == '') {
      parent.document.getElementById('divac').innerHTML=prom.replace('(OK is yes, Cancel is no)','');
      if (parent.document.getElementById('sq')) {
      parent.document.getElementById('sq').innerHTML='<b>' + parent.document.getElementById('divac').innerHTML + '</b><br><br>';
      }
      return "";
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'yes') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'true';
      } else if (parent.document.getElementById('divac').innerHTML.toLowerCase() == 'no') {
      parent.document.getElementById('divac').innerHTML = '';
      return 'false';
      } else {
      return "";
      }
      } else {
      var cr = confirm(prom);
      if (cr == true) return 'true';
      return 'false';
      }
      } else {
      var crr = confirm(prom);
      if (crr == true) return 'true';
      return 'false';
      }
      }

      … the true and false boolean values become string returns … called, as per our example code snippet, in this changed way


      if (flat_bodied == "") var flat_bodied = ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));
      if (flat_bodied == "") { setTimeout(animal_categorize,5000); return; } else if (flat_bodied == 'true') {
      type_animal = stuff_outside_caret(document.getElementById("flatworm").innerHTML);
      } else {
      type_animal = stuff_outside_caret(document.getElementById("worm_leech").innerHTML);
      }

      … converting many local variables into global variables, as per this declaration above now (declared) up near the top of the Javascript …


      var flat_bodied = ""; // ourconfirm(stuff_outside_caret(document.getElementById('flat_bodied').innerHTML));

      … in today’s changed HTML and Javascript code of animal_categorization.html.

      Adding a new “Animal Categorization” HTML select element (dropdown) option onto yesterday’s Speech to Text Survey Tutorial for today’s changed PHP code of speech_supervisor.php, you can be trying this out at this live run link.


      Previous relevant Speech to Text Survey Tutorial is shown below.

      Speech to Text Survey Tutorial

      Speech to Text Survey Tutorial

      On top of yesterday’s Speech to Text ESL Tutorial we add, for the first time, a “Survey” functionality not needing a two player setup. This leaves the right hand table cell to be able to contain an HTML form element, used to “survey” the user on the survey questions you set up when selecting a new “Survey” HTML select element (dropdown) option.

      And so this is where our language of design, PHP, comes to the fore, as a useful language to process the potential for huge amounts of data related to the survey you design.

      We design the web application “Survey” component, so as to be able to email off either/both …

      • survey form as an HTML email attachment via the PHP mail method
      • survey form results as an HTML email link via an a mailto: link to the default email client application of the user

      PHP has it over HTML …

      • creating email as per the first option above … and …
      • being able to post process method=POST data from an HTML form element, where much more data can be handled

      This new functionality can be accessed via an option of the dropdown of this live run link, or a “cut to the chase” survey link for today’s changed PHP code of speech_supervisor.php.


      Previous relevant Speech to Text ESL Tutorial is shown below.

      Speech to Text ESL Tutorial

      Speech to Text ESL Tutorial

      When you involve audio input into a web application it is likely that that web application can become useful with learning a language, such as with ESL (English as a second or foreign language) usage, especially as such learning has …

      • spoken
      • reading
      • writing

      … components to it. As you would appreciate, once the learner is speaking and then that (spoken content) is written out (as a transcript), and the learner is then reading that content, the web application can be a “double whammy” effective learning tool.

      We extend the web application’s functionality from yesterday’s Speech to Text Primer Tutorial using a technique we often use, that being changing the original (guinea pig usage) word “Quiz” into it plus other options presented in a …

      • HTML select (dropdown) element … as per HTML “onload” event …

        <body onload="document.getElementById('preq').innerHTML=dds('Quiz'); document.getElementById('kb').focus(); pickq();">

        … call of the Javascript …

        function dds(qwhat) {
        var selbit="<select id=selbit onchange=' location.href=document.URL.split(\"#\")[0].split(\"?\")[0] + \"?mode=\" + this.value; '><option value=0>" + modes[0] + "</option></select>";
        for (var iselbit=1; iselbit<modes.length; iselbit++) {
        if (mode == iselbit) {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + " selected>" + modes[iselbit] + "</option></select>");
        } else {
        selbit=selbit.replace("</select>", "<option value=" + iselbit + ">" + modes[iselbit] + "</option></select>");
        }
        }
        return qwhat.replace('Quiz',selbit);
        }


        … that sets off onchange event logic to …

      • reload the webpage with a URL ?mode= argument flagging this that is …
      • detected via

        var mode=location.search.split('mode=')[1] ? eval(decodeURIComponent(location.search.split('mode=')[1].split('&')[0])) : 0;
        var modes=["Quiz","Tongue Twisters","Haiku"];
        var arraynames=["questions","tongue_twisters","haiku"];
        var delims=["?","~","`"];
        var bcols=["yellow","lightgreen","lightblue"];

        … enabling, as necessary the …
      • “mapping” of other usage arrays (we are responsible for garnering) onto the original (guinea pig) array “questions” (within “dds” function above) via

        if (mode != 0) {
        eval(arraynames[0] + "=" + arraynames[mode]);

        document.getElementById('tdm').style.backgroundColor=bcols[mode];
        }

      That leaves, apart from the extra content duties, a new scoring mechanism, one new one of which analyzes question words against answer words and scores positive word length score components for answer words found in question words and negative word length score components for question words not found in answer words.

      Again, feel free to have a look at today’s changed PHP code of speech_supervisor.php‘s “Speaking Quiz plus ESL Others”.


      Previous relevant Speech to Text Primer Tutorial is shown below.

      Speech to Text Primer Tutorial

      Speech to Text Primer Tutorial

      There was some great advice that had us dipping our toes into “Speech to Text” web application thoughts. You probably know yourself about the brilliant Google Translate and its “Text to Speech’ capabilities (or read some of our postings here such as Italian French Spanish Verb Conjugation Text to Speech Tutorial)? Well, it’s Google again supplying the brilliance for the obverse ideas used today in our “Speaking Quiz” web application idea.

      “Speaking”, that is, if you are using a recent enough version of the Google Chrome web browser, some HTML aspects of which are eloquently explained by this very useful link utilizing the wonderful Google Speech to Text API.

      If you are interested in “Speech to Text” you should also check out the very interesting Diagflow … Speech to Text.

      Thanks everyone, for these artificial intelligence “dipping our toes” encouragement. Feel free to have a look at today’s PHP code of speech_supervisor.php‘s “Speaking Quiz”.


      Previous relevant Italian French Spanish Verb Conjugation Text to Speech Tutorial is shown below.

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      Italian French Spanish Verb Conjugation Text to Speech Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Event Tutorial as shown below we’ve increased functionality of English translations by adding Google Translate Text to Speech capabilities to …

      • Italian
      • French
      • Spanish

      … via a new “loudspeaker” icon.

      Some of the talking points with today’s changes involve …

      • a “reveal” idea whereby the showing of an HTML element is controlled by its Javascript DOM [element].style.width CSS property, whereby the element is effectively invisible at width:1px and in our case today becomes visible, at width:20px, and, thus, clickable, for Google Translate popup window translation and text to speech capabilities via the control of …
      • binary decision making GUI ease of using HTML input tag type=checkbox and the associated Javascript DOM document.getElementById([element]).checked … because …
      • UX-wise it is good to forewarn users with an option when it comes to functionality involving sound
      • use of Javascript DOM document.getElementsByTagName(‘img’) as a means by which to manipulate HTML elements that are not necessarily provided with an ID global property

      As per the other tutorials in this thread, even with new Google Translate Text to Speech and Translation capabilities, nothing changes today about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.


      Previous relevant Italian and French and Spanish Verb Conjugation Event Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Event Tutorial

      Italian and French and Spanish Verb Conjugation Event Tutorial

      In following up on Italian and French and Spanish Verb Conjugation Tense Tutorial as shown below we’ve increased functionality of English transaltions to …

      • Italian
      • French
      • Spanish

      … and the conjugations from WordReference.com by offering onmouseover (ie. hover) or onclick (or mobile touch) event logic for conjugations offered by using the wonderful MyMemory resource to translate these verb conjugations back into English, and present them in an additional column with a different background colour.

      You may recall us using MyMemory once before when we presented HTML/Javascript Hearing and Listening Primer Tutorial earlier on.

      As per the other tutorials in this thread, but even more so with gleaning information from the MyMemory API via a get method, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try out this new functionality.


      Previous relevant Italian and French and Spanish Verb Conjugation Tense Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      Italian and French and Spanish Verb Conjugation Tense Tutorial

      We’ve followed up on Italian Verb Conjugation and Tense Tutorial as shown below with “tense” context to some of the conjugations of …

      • Italian
      • French
      • Spanish

      Say “some of the” because …

      Even amongst the conjugating language “triplets” above, noticed that when it comes to the “tense” involved, there can be variations, but don’t need to tell a lot of you this old news. Did set me to thinking a bit about the The Tower of Babel story from the Bible, though. What would the world be like if we all spoke the one language? Esperanto, everyone?

      There’s a link between “language” and “life”. That’s why a language without “verbs” is not a language. And the Earth back in those dark days before any life, had no conduits for “language”. And it’s hard to see how “life” sort of started up? But I guess chemistry experts might be able to tell us how this might have come about.

      “Language” is all about patterns, and mirrors human progress with its “pattern” and “organization” and “flexibility” as a huge part of why we as “humans” got to be such agents of change on Earth. Just wish there had really been a more successful Doctor Dolittle in human history that could have got the “inside goss” (so to speak) on what we could have done better to protect the world’s environments.

      As per the other tutorials in this thread, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish tense contextual verb conjugations in this way, with this live run link.

      Hope you try it out, and even contemplate sending us some feedback.


      Previous relevant Italian Verb Conjugation and Tense Tutorial is shown below.

      Italian Verb Conjugation and Tense Tutorial

      Italian Verb Conjugation and Tense Tutorial

      Again, we saw that we could extend the functionality of the recent Italian and French and Spanish Verb Conjugation Tutorial as shown below, by, for Italian, to start with, trying to help the native English speaker out for where to look on the “conjugation” table presented for the English verb of interest, regarding conjugation information that might match their (verb) tense of interest.

      As you probably well know, every language on Earth has its peculiarities regarding how we express ourselves with regard to time, and a lot of that is associated with the verbs, or action words we use, and in the case of …

      • Italian
      • French
      • Spanish

      … that expression of the context of time in the grammatical usage, especially for people speaking the language, is reflected by conjugations made to the verb. Conversely, as I, a native English speaker, got to think about as this web application proceeded, English has words like “am” and “have” and “having” and “been” and “will” and “shall” and “is” and “are” and “was” and “were” and “would” and “should” and “has” and “had” and “to” and ‘”be” and “being” preceeding verbs, which can have, basically, two suffixes “-ing” and “-ed” (expressing present participles and past participles respectively) to try to do what conjugation does for Italian (we program for today) and French and Spanish languages.

      But there’s more to “tense” than Past, Present and Future as you well can imagine should you learn a language other than your native tongue, which you tend to “go along with the flow” perhaps unaware that “tense” exists, for some learners. There are concepts as layers on top about the context of the time the person is speaking relative to the time they are or were talking about … it gets complex … so you get concepts like “Present Perfect Progressive” (which we did a tutorial about at HTML/Javascript Present Perfect Progressive Primer Tutorial) if you get right into the ins and outs of all this grammar … which you might need to do to master that second language.

      Yet again, nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in Italian “tense” thoughts in this way, with this live run link.

      Again, we hope you try some Italian, with specified “tense” prefix words and suffix endings, to see how the new functionality helps you out with Italian verb conjugations.


      Previous relevant Italian and French and Spanish Verb Conjugation Tutorial is shown below.

      Italian and French and Spanish Verb Conjugation Tutorial

      Italian and French and Spanish Verb Conjugation Tutorial

      We saw that we could extend the functionality of yesterday’s Italian Verb Conjugation Primer Tutorial as shown below, by accessing other resources from the great WordReference.com, adding French and Spanish verb conjugation to yesterday’s Italian verb conjugation.

      As a rule we tend to find that replacing text with HTML select “dropdown” menus can help out this adaption pretty effectively. The other feature of today’s Javascript coding is the use of eval to team with the language code to direct user traffic to the correct parts of the WordReference.com website.

      Along the way we added some background “flag” imagery we found at Science Kids … thanks, heaps.

      Down the little brick road we also added a couple of hashtag navigators, HTML a links that just navigate within the page, allowing the user to move from the conjugation yellow zone to the translation zone (if you translated from English), as much as anything because the conjugation may need to be prompted by picking the “verb” amongst the list of “translated” possibilities, which you can then feed into the rightmost HTML input type=text textbox to, more than likely, get the (verb) conjugation you may have missed with the first pass.

      Nothing changes about the techniques used today doing away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html, which changed to add in French and Spanish in this way, with this live run link.

      Hope you try it out.


      Previous relevant Italian Verb Conjugation Primer Tutorial is shown below.

      Italian Verb Conjugation Primer Tutorial

      Italian Verb Conjugation Primer Tutorial

      Learning Italian as a native English speaker is best done when you are young, and beginning recently on this quest, I learnt a bit of this.

      To me, what stuck out, was how easy we get it in English with regard to (the lack of) conjugating verbs, or articles, or adjectives, in our grammar.

      Is it that, in English, we can say something in a hurry and, sort of, wait to fix it up later, because we don’t conjugate verbs in our mind, or is this not how it works in other languages? Actually, am pretty sure no, because conjugation is done so fast in the minds of Italian speakers that it is no issue … hard to imagine, though, from where I’m standing … well, actually, sitting. Am not here to say, but know it is this, that teachers of Italian to English native speakers, concentrate on in early lessons.

      With this in mind, we don’t for one second pretend we are not using the wonderful resources at WordReference.com with today’s web application, but we thank them for their brilliance, and just rearrange things that you could glean perfectly well from here but need to take a few more steps to reach the conjugation (today it’s just verbs) web page bits, whereas we throw the conjugation bits straight at you. And yes, we do try to cater for the irregular verbs, and where they are regular you should see the word “regular” mentioned in the yellow zone conjugation areas … because we all know … well, you know what we mean?!

      The techniques used today do away with any need for a server side language by channelling the Ajax jQuery thoughts we presented with Ajax jQuery Primer Tutorial to make the most of the great resource that WordReference.com is. This happens in our HTML and Javascript programming source code you could call italian_conjugation.html with this live run link.

      So we hope you enjoy this break from our usual (other way around) ESL game (if it’s a game) to some “Conjugate, Italian Style” play.

      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.


      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