{"id":20578,"date":"2016-03-10T03:01:06","date_gmt":"2016-03-09T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20578"},"modified":"2016-03-10T11:15:55","modified_gmt":"2016-03-10T01:15:55","slug":"google-translate-english-phrasal-verbs-and-idioms-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-translate-english-phrasal-verbs-and-idioms-tutorial\/","title":{"rendered":"Google Translate English Phrasal Verbs and Idioms Tutorial"},"content":{"rendered":"
\"Google<\/a>

Google Translate English Phrasal Verbs and Idioms Tutorial<\/p><\/div>\n

A couple of our recent ESL<\/a> tutorials regarding Phrasal Verbs (English Phrasal Verb Game Primer Tutorial<\/a>) and English Expressions and Idioms (as with English Expressions and Idioms Game Primer Tutorial<\/a> below) have a lot in common, especially their capacity to baffle a non-native English speaker.<\/p>\n

With this in mind we introduce some new optional functionality that may help out an ESL student completely flummoxed with a Phrasal Verb or an English Expression or Idiom by using Google Translate to translate the phrase or idiom back to their mother tongue. Obviously, this translation could well be imperfect, but it is designed with a view to the user having no idea where to start understanding the English presented to them.<\/p>\n

And so we “house” this new functionality in some external Javascript which was almost<\/i> okay to just plug into our two other HTML parents<\/i> but not quite.<\/p>\n

Maybe you wonder how it can get even close? Glad you asked … well, we like to add external Javascript and design it as independently as possible, so that it can be called by either method below, the latter being an address bar URL and the former being in the HTML’s head<\/i> section, to become active<\/b> …<\/p>\n

    \n
  1. <script src='translate_hear.js?translate_hear=yes<\/b>' type='text\/javascript'><\/script><\/code><\/li>\n
  2. http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/englishexpressions_chalkboard.html?translate_hear=yes<\/b><\/code><\/li>\n<\/ol>\n

    … and only once this is established, the independently minded external Javascript looks for >.<\/a><\/i> within document.body.innerHTML<\/i> … I mean, who’d be crazy enough to have a link to a dot (.) … oops! … anyway …<\/p>\n

    … then we store away (in global variable<\/font> alist<\/i>‘s global variable<\/font> alistone) the object of this HTML a<\/i> tag in the external Javascript’s list of HTML a<\/i> tag elements it derived via …<\/p>\n


    \nalist=document.getElementsByTagName('a');
    \n<\/code><\/p>\n

    We like what happens next. We are mostly familiar with an HTML a<\/i> tag having the href<\/i> property be a navigation destination, or then perhaps extra functionality that gets executed with the onclick<\/i> event. Well, we don’t want to meddle with whatever happens with this … remember our independently minded<\/i> external Javascript? Well, we only ask that the parent doesn’t also define any functionality for the onmousedown<\/i> event, which we want to “purloin” (is that the word?) into action for us. Here’s our definition of what to do with that dot (yes, .<\/u>) HTML a<\/i> element’s onmousedown<\/i> event …<\/p>\n


    \n alist[alistone].addEventListener('mousedown', function(event) {
    \n var xt=document.getElementById('xtranslate');
    \n var xh=document.getElementById('xhear');
    \n if (xt && xh && alistone >= 0) {
    \n var thishref=alist[alistone].href;
    \n var thishparts=thishref.split('\/');
    \n if (thishparts.length >= 2) {
    \n var thewordsare=thishparts[eval(-1 + thishparts.length)].replace(\/\\+\/g, '%20');
    \n if (xt.checked && lto.replace('en','') != '') {
    \n urlone='https:\/\/transl' + 'ate.google.com\/#' + lfrom + '\/' + lto + '\/' + thewordsare; \/\/, '_blank', 'top=30,left=30,width=300,height=300');
    \n setTimeout(inawhileone, 2100);
    \n }
    \n if (xh.checked && lto != '') {
    \n urltwo='https:\/\/tra' + 'nslate.google.com\/translate_tts?tl=' + lto + '&q=' + thewordsare; \/\/, '_blank', 'top=30,left=330,width=300,height=300');
    \n setTimeout(inawhiletwo, 2300);
    \n }
    \n }
    \n }
    \n }, false);
    \n<\/code><\/p>\n

    … where the xtranslate<\/i> and xhear<\/i> ID’ed elements are (HTML type=)checkboxes for user defined Translate<\/i> and Hear<\/i> optional extra active functionality decisions, with reference to global variable<\/font> lto<\/i> which contains the Google Translate language code for the destination language of the user’s choice (from a dropdown list, the contents of which we frequently use through the www.rjmprogramming.com.au domain).<\/p>\n

    So we must thank Google for their great Google Translate<\/a> product, but, again, caution the user into thinking such translations are always sensibly “translatable” between languages. Again, we stress, this new functionality should just be an aid to the desperate ESL student with little idea about some English presented to them.<\/p>\n

    Again, we make use of Javascript setTimeout<\/i><\/a> “scheduled” Javascript function controller mechanism. We find it endlessly useful, especially with events in ever changing platform environments.<\/p>\n

    And so the two pieces of HTML and Javascript affected are …<\/p>\n

      \n
    1. Game<\/a> you could call englishexpressions_chalkboard.html<\/a> (changed in this way<\/a>) uses HTML and Javascript programming languages with this live run<\/a> link<\/li>\n
    2. Game<\/a> you could call phrasalverbs_chalkboard.html<\/a> (changed in this way<\/a>) uses HTML and Javascript programming languages with this live run<\/a> link<\/li>\n<\/ol>\n

      … both calling our new external Javascript you could call translate_hear.js<\/a> with new optional functionality<\/a> Translate<\/i> and\/or Hear<\/i> some baffling English in an ESL student’s native tongue, perhaps.<\/p>\n

      \n

      Previous relevant English Expressions and Idioms Game Primer Tutorial<\/a> is shown below.<\/p>\n

      \"English<\/a>

      English Expressions and Idioms Game Primer Tutorial<\/p><\/div>\n

      Advanced ESL<\/a> students are on the lookout for ways to “turbo charge” their improvement of English by being able to understand some of the English Expressions and Idioms<\/a> an English native speaker is quite likely to take for granted … and so, alas, for the ESL beginner, is quite likely to slip into their conversational English.<\/p>\n

      Today we present a missing part of one of these English Expressions or Idioms and get the user to try to fill in the missing part.<\/p>\n

      Today we’d like to thank this link<\/a> for a great list of English expressions and idioms (thanks for the list and you can find an explanation of the meanings at this link too) and, as per usual with ESL games (here at this blog), The Free Dictionary<\/a> for the English expression or idiom lookups that may help linked off the underlined dot. Also of great help was the advice regarding Linear Gradient backgrounds for our HTML5 canvas element used today, that came from this very very useful link<\/a>.<\/p>\n

      This game<\/a> you could call englishexpressions_chalkboard.html<\/a> uses HTML and Javascript programming languages. Hopefully you can figure the rules when you click the picture above for a live run<\/a>.<\/p>\n

      If this was interesting you may be interested in this<\/a> too.<\/p>\n