{"id":18166,"date":"2015-11-08T05:01:02","date_gmt":"2015-11-07T19:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18166"},"modified":"2015-11-08T07:16:14","modified_gmt":"2015-11-07T21:16:14","slug":"htmljavascript-esl-reveal-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-esl-reveal-game-tutorial\/","title":{"rendered":"HTML\/Javascript ESL Reveal Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/let_us.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript ESL Reveal Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/letus.jpg\" title=\"HTML\/Javascript ESL Reveal Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript ESL Reveal Game Tutorial<\/p><\/div>\n<p>Maybe you&#8217;ve been reading this blog some time and remember the <a target=_blank title='Reveal blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> themed blog posting called <a target=_blank title='HTML\/Javascript Reveal Image Behind Image Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9447'>HTML\/Javascript Reveal Image Behind Image Primer Tutorial<\/a>?  Well, today&#8217;s <a target=_blank title='English as a Second Language information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> sentence game has many similarities, except that instead of an image in front of another image, today we use an HTML div element in front of an HTML img element, using Javascript and CSS properties &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> &#8230; the whole HTML img element becomes the HTML div&#8217;s innerHTML<\/li>\n<li><a target=_blank title='CSS width information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_dim_width.asp'>width<\/a> and <a target=_blank title='CSS height information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_dim_height.asp'>height<\/a> &#8230; set width and height of HTML div but no width nor height specified for HTML image &#8230; because &#8230;<\/li>\n<li><a target=_blank title='CSS z-overflow information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_overflow.asp'>overflow<\/a> &#8230; set to &#8216;hidden&#8217; to mask out any overflow of HTML image for overflow to left or right or top or bottom<\/li>\n<li><a target=_blank title='CSS margin-left information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_margin-left.asp'>margin-left<\/a> &#8230; a negative margin left &#8220;pans&#8221; the underneath &#8220;too big&#8221; image position&#8217;s X to correct place<\/li>\n<li><a target=_blank title='CSS margin-top information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_margin-top.asp'>margin-top<\/a> &#8230; a negative margin top &#8220;pans&#8221; the &#8220;too big&#8221; image position&#8217;s Y to correct place<\/li>\n<\/ul>\n<p>So today&#8217;s ESL sentence game has the user piece together a &#8220;Let&#8217;s&#8221; sentence &#8230; one that starts with &#8220;Let&#8217;s&#8221;, or, if one wants to be formal, &#8220;Let us&#8221;, that suits the picture &#8220;segment&#8221; present.  At this stage it behoves us to thank &#8220;How English Works&#8221; <font size=1>by Michael Swan and Catherine Walter<\/font> for their great ideas to teach English.<\/p>\n<p>The feel of this work also brings to mind the wonderfully effective panning capabilities of good old, often overlooked, Paintbrush image editor, about which you can read <a target=_blank title='Paintbrush Panning Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/paintbrush-panning-primer-tutorial\/'>Paintbrush Panning Primer Tutorial<\/a> for further information.<\/p>\n<p>How about you give our ESL sentence <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/let_us.html\" title='click picture'>game<\/a> (or HTML source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/let_us.html_GETME\" title='let_us.html'>let_us.html<\/a>) a go?<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d18166' onclick='var dv=document.getElementById(\"d18166\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18166' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Maybe you&#8217;ve been reading this blog some time and remember the &#8220;reveal&#8221; themed blog posting called HTML\/Javascript Reveal Image Behind Image Primer Tutorial? Well, today&#8217;s ESL sentence game has many similarities, except that instead of an image in front of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-esl-reveal-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,13,15,37],"tags":[396,476,477,576,652,997,1063,1119,1319],"class_list":["post-18166","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-games","category-tutorials","tag-esl","tag-game","tag-games-2","tag-html","tag-javascript","tag-programming","tag-reveal","tag-sentence","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18166"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=18166"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18166\/revisions"}],"predecessor-version":[{"id":18179,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18166\/revisions\/18179"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=18166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=18166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=18166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}