{"id":18203,"date":"2015-11-10T05:01:39","date_gmt":"2015-11-09T19:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18203"},"modified":"2016-06-03T10:06:29","modified_gmt":"2016-06-03T00:06:29","slug":"esl-vocabulary-getting-warmer-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/esl-vocabulary-getting-warmer-game-tutorial\/","title":{"rendered":"ESL Vocabulary Getting Warmer Game Tutorial"},"content":{"rendered":"
<\/a>

ESL Vocabulary Getting Warmer Game Tutorial<\/p><\/div>\n

As we saw yesterday, the HTML map<\/a> element can be used in a variety of ways, two of which we hone in on with today’s ESL Vocabulary Getting Warmer Game Tutorial, a variation on yesterday’s ESL Under The Stairs Game Overlay Primer Tutorial<\/a> as shown below, where we add Javascript functionality to effectively find the shortest distance of a point to a polygon co-ordinate “set”, and a revisit of our previous English Learning – Vocabulary – Under The Stairs<\/a> as shown way below. The HTML map element can be …<\/p>\n

    \n
  1. a jigsaw “overlay” to the underlying image (in that we try to cover the whole area of the image with clickable HTML area<\/a> “polygon” segments (the so called “Click and be Prompted” mode of use)) … but if the user selects a “Find Prompted Object” mode of use that same HTML map element is reworked to become like …<\/li>\n
  2. a “Where’s Wally” scenario where the computer prompts the user for what they should click on, where the HTML map element has one defined HTML area tag plus one other default “nonhref” HTML area tag<\/li>\n<\/ol>\n

    In that second mode of use today, we add a bit of fun by adding that “getting warmer” type of “bizzo” (sorry to get technical) to our game.<\/p>\n

    To do this, as we’ve mentioned, we find the shortest distance of a point to a polygon co-ordinate “set” by …<\/p>\n

      \n
    1. leave the HTML map to determine when a point is inside its first “polygon” section, and for all the rest, via that other “nohref” HTML area element’s onclick event, we arrange some Javascript that …<\/li>\n
    2. breaks the problem into sets of 3 co-ordinate (x,y) arrangements for each polygon line segment (brought up to 3 by the point chosen by the user) …<\/li>\n
    3. for each of these consider the three points as a triangle and use Heron’s Formula<\/a> to calculate the triangle area
      \n
      \nfunction herons_formula_triangle_area(x1, y1, x2, y2, x3, y3) {
      \n var a=Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
      \n var b=Math.sqrt((x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2));
      \n var c=Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
      \n var s=eval((a + b + c) \/ 2.0);
      \n return Math.sqrt(s * (s - a) * (s - b) * (s - c));
      \n}
      \n<\/code> …<\/li>\n
    4. the base value in “area=base x height \/ 2” (area of a triangle) can be calculated as the line segment length (square root of the x co-ordinate difference squared plus the y co-ordinate difference squared)
      \n
      \nfunction find_dist(x1, y1, x2, y2) {
      \n return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
      \n}
      \n<\/code> …<\/li>\n
    5. so height=area x 2 \/ base …
      \n
      \nfunction calcdist() {
      \n var theseobjs, area=0.0, base=0.0, height=0.0, smallestijh=-1;
      \n var thesexy;
      \n eval(\"aconto.getElementById('\" + midis + \"').title='other';\");
      \n smallesth=-1.0;
      \n theseobjs=objects[snum].split(';');
      \n thesexy=theseobjs[1].split(',');
      \n for (var ijh=2; ijh<eval(-2 + (thesexy.length \/ 1)); ijh+=2) {
      \n area=herons_formula_triangle_area(x, y, thesexy[eval(-2 + ijh)], thesexy[eval(-1 + ijh)], thesexy[ijh], thesexy[eval(1 + ijh)]);
      \n base=find_dist(thesexy[eval(-2 + ijh)], thesexy[eval(-1 + ijh)], thesexy[ijh], thesexy[eval(1 + ijh)]);
      \n height=eval((2.0 * area) \/ base);
      \n if (eval(height) < eval(smallesth) || eval(smallesth) < 0.0) {
      \n smallesth=height;
      \n }
      \n }
      \n var cnf;
      \n if (eval(smallesth) < 3) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is boiling. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 10) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is very hot. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 20) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is very warm. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 40) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is warm. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 80) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is lukewarm. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 120) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is cool. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 160) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is cold. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n } else if (eval(smallesth) < 160) {
      \n cnf=prompt(\"Sorry, this is not \" + thisobj + \", and it is freezing. Cancel gives up, other answer will give dictionary view.\",\"\");
      \n }
      \n if (cnf == null) {
      \n eval(\"aconto.getElementById('\" + midis + \"').title='';\");
      \n } else {
      \n if (cnf.length == 0) {
      \n cnf=cnf;
      \n return true;
      \n } else {
      \n eval(\"aconto.getElementById('\" + midis + \"').title='lookup';\");
      \n }
      \n }
      \n return false;
      \n}
      \n<\/code>\n<\/li>\n
    6. and our shortest distance can be thought of as the smallest of these “height” values (and you can see how we did this above)<\/li>\n<\/ol>\n

      … and then the concept of “boiling” vs “very warm” etcetera etcetera should be worked out by trying it out (with alert box help).<\/p>\n

      Again, with today’s work, we are in the area of study of “overlay”, the HTML map tag being a well established overlay method linking image data with co-ordinate intelligence, still a useful idea we think.<\/p>\n

      HTML and Javascript codewise the original under_the_stairs.html<\/a> is unchanged from the way it was way below, but today, with our changed scenario, it is used within an HTML iframe<\/a> element using our Client Pre-emptive Iframe techniques to glean HTML map information, and then reworked as necessary directly into that iframe, and the HTML and Javascript for this is pre_under_the_stairs.html<\/a> changed from yesterday as per this link<\/a>.<\/p>\n

      This could all become very much clearer when you try a live run<\/a> and we hope it leaves you with some ideas to try out yourself in a project you are working on.<\/p>\n

      \n

      Previous relevant ESL Under The Stairs Game Overlay Primer Tutorial<\/a> is shown below.<\/p>\n

      <\/a>

      ESL Under The Stairs Game Overlay Primer Tutorial<\/p><\/div>\n

      The HTML map<\/a> element can be used in a variety of ways, two of which we hone in on with today’s ESL Vocabulary game “Under the Stairs”, a revisit of our previous English Learning – Vocabulary – Under The Stairs<\/a> is shown below, where that same HTML map element used then, today, starts as …<\/p>\n

        \n
      1. a jigsaw “overlay” to the underlying image (in that we try to cover the whole area of the image with clickable HTML area<\/a> “polygon” segments (the so called “Click and be Prompted” mode of use)) … but if the user selects a “Find Prompted Object” mode of use that same HTML map element is reworked to become like …<\/li>\n
      2. a “Where’s Wally” scenario where the computer prompts the user for what they should click on, where the HTML map element has one defined HTML area tag plus one other default “nonhref” HTML area tag<\/li>\n<\/ol>\n

        Again, we are in the area of study of “overlay”, the HTML map tag being a well established overlay method linking image data with co-ordinate intelligence, still a useful idea we think.<\/p>\n

        HTML and Javascript codewise the original under_the_stairs.html<\/a> is unchanged from the way it was below, but today, with our changed scenario, it is used within an HTML iframe<\/a> element using our Client Pre-emptive Iframe techniques to glean HTML map information, and then reworked as necessary directly into that iframe, and the HTML and Javascript for this is pre_under_the_stairs.html<\/a> channeling those oft-mentioned CSS techniques …<\/p>\n

          \n
        1. position:absolute<\/a> property<\/li>\n
        2. z-index<\/a><\/li>\n
        3. opacity<\/a><\/li>\n<\/ol>\n

          The “overlay” concept comes into play, too, for the user to control the mode of use of the web application (ie. its HTML map element’s mode of use) via an HTML select tag “overlayed” on top of an HTML iframe element which exists that way for 20 seconds allowing the user to choose that other mode of use should they be interested.<\/p>\n

          This could all become much clearer when you try a live run<\/a> and we hope it leaves you with some ideas to try out yourself in a project you are working on.<\/p>\n

          \n

          Previous relevant English Learning – Vocabulary – Under The Stairs<\/a> is shown below.<\/p>\n

          \"click<\/a>

          English Learning - Vocabulary - Under The Stairs<\/p><\/div>
          \n          Click to start class. How many things can you name?<\/a><\/p>\n

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