{"id":47286,"date":"2019-11-29T03:01:15","date_gmt":"2019-11-28T17:01:15","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47286"},"modified":"2019-11-29T11:51:49","modified_gmt":"2019-11-29T01:51:49","slug":"mobile-two-finger-gesture-inline-html-email-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-inline-html-email-quiz-tutorial\/","title":{"rendered":"Mobile Two Finger Gesture Inline HTML Email Quiz Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Two Finger Gesture Inline HTML Email Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share_email_quiz.jpg\" title=\"Mobile Two Finger Gesture Inline HTML Email Quiz Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Two Finger Gesture Inline HTML Email Quiz Tutorial<\/p><\/div>\n<p>Do you remember the recent &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>\n<ul>\n<li>two players within calling distance and able to get to the same device ( &#128053; \/ &#128584; ) &#8230; and today we cover &#8230;<\/li>\n<li>two players not within calling distance and not able to get to the same device ( &#128053; &#128231; &#128053; )<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; from <a target=_blank title='Mobile Swipe Gesture Name Game Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>Mobile Swipe Gesture Name Game Share Tutorial<\/a> &#8230; in relation to the Name Game aspects of our Mobile Gestures web application project?  Well, today, with our Mathematical Quiz functionality in this same Mobile Gestures web application project, we deal with a similar scenario.   Getting this &#8230;<\/p>\n<ul>\n<li>Mathematical Quiz &#8230; to work with &#8230;<\/li>\n<li>Inline HTML Email &#8230; in a &#8220;first time for us&#8221; form of &#8230;<\/li>\n<li>Consisting of an (Inline Email) HTML form element &#8230; that navigates back away from the email client program back to the &#8220;web&#8221; via &#8230;<\/li>\n<li>(Inline Email) HTML form input type=submit button &#8230; the user can use after they &#8230;<\/li>\n<li>Fill out input type=number elements with their Mathematical Quiz answers to the presented Mathematical Quiz questions &#8230; and then &#8230;<\/li>\n<li>Click that input type=submit &#8230; to arrive (back) at a &#8220;web&#8221; &#8230;<\/li>\n<li>Mathematical Quiz Results webpage<\/li>\n<\/ul>\n<p> &#8230; of interest, in particular (to us), the Javascript feeling (input type=number element) validation the Inline Email HTML allows through (though many email clients are not happy with Javascript).  But of even more significance is this HTML form navigational way to transit away from email back to the &#8220;web&#8221; with user (form) data.<\/p>\n<p>And so these changes are represented (very simply) by a new &#8220;option&#8221; to the top &#8220;dropdown&#8221; (&#8220;gestures&#8221; hardcopy replacement) element, on top of the work of yesterday&#8217;s <a title='Mobile Two Finger Gesture Your Quiz Tutorial' href='#mtfgyqt'>Mobile Two Finger Gesture Your Quiz Tutorial<\/a>.<\/p>\n<p>To make your own Mathematical Email Quiz Inline HTML Email try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-------GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-------GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">live run<\/a> for yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-mobile-two-finger-gesture-inline-html-email-quiz-tutorial\/'>Mobile Two FingerGesture Inline HTML Email Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mtfgyqt'>Previous relevant <a target=_blank title='Mobile Two Finger Gesture Your Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-your-quiz-tutorial\/'>Mobile Two Finger Gesture Your Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Two Finger Gesture Your Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share_your_quiz.jpg\" title=\"Mobile Two Finger Gesture Your Quiz Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Two Finger Gesture Your Quiz Tutorial<\/p><\/div>\n<p>We always think, as far as quizzes go, like with yesterday&#8217;s <a title='Mobile Two Finger Gesture Quiz Tutorial' href='#mtfgqt'>Mobile Two Finger Gesture Quiz Tutorial<\/a>&#8216;s (mathematical) quiz, it is good to allow the user to add their own tailored questions into the mix.<\/p>\n<p>Along with that, we had to do a lot of &#8230;<\/p>\n<p><code><br \/>\nevent.<a target=blank title='Javascript stopPropagation information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp'>stopPropagation<\/a>();<br \/>\n<\/code><\/p>\n<p> &#8230; for today&#8217;s work?   Guess it will be a mixed audience needing to know why?  Well, it goes back to the organization of our event logic co-ordination at the document.body onload event, as per &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th>A &#8220;casting the net wide&#8221; initial event management approach of touch\/mouse everywhere on webpage &#8230; once at document.body onload event &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/2264072\/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android<br \/>\ndocument.addEventListener('touchstart', handleTouchStart, false);<br \/>\ndocument.addEventListener('mousedown', handleMouseStart, false);<br \/>\nif (!quiz) {<br \/>\ndocument.addEventListener('touchmove', handleTouchMove, false);<br \/>\ndocument.addEventListener('mousemove', handleMouseMove, false);<br \/>\ndocument.addEventListener('gestureend', function(e) {<br \/>\n    if (e.scale &lt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers closer together<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        \/\/ Thanks Wikipedia<br \/>\n        gtrue=true;<br \/>\n        document.title='Ouch!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php'; \/\/ Thanks to '\/\/en.wikipedia.org\/wiki\/Hypocorism#English';<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n    } else if (e.scale &gt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers further apart<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        \/\/ Thanks Wikipedia<br \/>\n        gtrue=false;<br \/>\n        document.title='Aaaah!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php'; \/\/ Thanks to '\/\/en.wikipedia.org\/wiki\/Hypocorism#English';<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n    }<br \/>\n}, false);<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; then for exceptional user interactive elements that should not be included above &#8230; as required &#8230;<\/th>\n<\/tr>\n<tr>\n<td>event.stopPropagation; \/\/ &#8230; for ontouchstart and onclick and onmousedown<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; we used &#8230; versus &#8230; another approach (that you might well adopt when you have a big initial element of interest covering a large central part of the webpage) could be &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th>A &#8220;zeroing in&#8221; initial event management approach of touch\/mouse to single element on webpage &#8230; once at document.body onload event &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/2264072\/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android<br \/>\ndocument.getElementById('elementofinterest').addEventListener('touchstart', handleTouchStart, false);<br \/>\ndocument.getElementById('elementofinterest').addEventListener('mousedown', handleMouseStart, false);<br \/>\nif (!quiz) {<br \/>\ndocument.getElementById('elementofinterest').addEventListener('touchmove', handleTouchMove, false);<br \/>\ndocument.getElementById('elementofinterest').addEventListener('mousemove', handleMouseMove, false);<br \/>\ndocument.getElementById('elementofinterest').addEventListener('gestureend', function(e) {<br \/>\n    if (e.scale &lt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers closer together<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        \/\/ Thanks Wikipedia<br \/>\n        gtrue=true;<br \/>\n        document.title='Ouch!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php'; \/\/ Thanks to '\/\/en.wikipedia.org\/wiki\/Hypocorism#English';<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n    } else if (e.scale &gt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers further apart<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        \/\/ Thanks Wikipedia<br \/>\n        gtrue=false;<br \/>\n        document.title='Aaaah!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php'; \/\/ Thanks to '\/\/en.wikipedia.org\/wiki\/Hypocorism#English';<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n    }<br \/>\n}, false);<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; then for exceptional user interactive elements &#8230; as required &#8230;<\/th>\n<\/tr>\n<tr>\n<td>ontouchstart and onclick and onmousedown individualized logics<\/td>\n<\/tr>\n<\/table>\n<p>Today we&#8217;ve &#8220;concentrated the mind&#8221; for quiz webpages by applying [element].style.textAlign=&#8217;center&#8217; centering logic.<\/p>\n<p>There are a couple of instances, we apply now, of &#8220;emoji buttons&#8221;, in other words &#8230;<\/p>\n<ul>\n<li>in an &#8220;a&#8221; or &#8220;span&#8221; element tag &#8230;<\/li>\n<li>the innerHTML is applicable emoji (text) &#8230; eg. &#51;&#8419; &#8230; &amp;#51;&amp;#8419; &#8230;<\/li>\n<li>style=&#8221;cursor:pointer;&#8221; &#8230; and for &#8220;a&#8221; tags style=&#8221;text-decoration:none;&#8221; (because we figure the &#8220;a&#8221; tag is &#8220;button&#8221; looking enough, via emoji usage, that the &#8220;a&#8221; default text-decoration:underline is not needed <font size=1>&#8230; and, we think,  looks awkward<\/font>)<\/li>\n<\/ul>\n<p> &#8230; an &#8220;a&#8221; link supplanting the previous &#8220;?&#8221; question mark hardcoding with the HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;a style=\"text-decoration:none;cursor:pointer;\" title=\"Enter your own question\" onclick=\"ask(); event.stopPropagation();\" ontouchstart=\"event.stopPropagation();\" onmousedown=\"event.stopPropagation();\"&gt;&amp;#10067;&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; with its associated onclick logic Javascript function &#8230;<\/p>\n<p><code><br \/>\nfunction ask() {<br \/>\n  var proposed=0.0;<br \/>\n  var qis=<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>(\"What is your question?  Please note that any answer not an integer from 0 to 10 will only be answerable via the dropdown (rather than cumulative touch or mouse counts).\", \"(564 \/ 4) - 138\");<br \/>\n  if (qis == null) { qis=''; }<br \/>\n  if (qis.trim() != '') {<br \/>\n  <a target=_blank href='https:\/\/www.w3schools.com\/js\/js_errors.asp' title='Javascript try catch error reporting'>try<\/a> {<br \/>\n  proposed=<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a>(qscout(qis).replace('What is ','').replace(' ?','').replace('?',''));<br \/>\n  if (proposed != 0 && proposed != 1 && proposed != 2 && proposed != 3 && proposed != 4 && proposed != 5 && proposed != 6 && proposed != 7 && proposed != 8 && proposed != 9) {<br \/>\n  document.getElementById('anssel').innerHTML+='&lt;option value=' + proposed + '&gt;' + proposed + '&lt;\/option&gt;';<br \/>\n  }<br \/>\n  qs.push(\"What is \" + qis.replace('What is ','').replace(' ?','').replace('?','').trim() + \" ?\");<br \/>\n  } <a target=_blank href='https:\/\/www.w3schools.com\/js\/js_errors.asp' title='Javascript try catch error reporting'>catch<\/a> (ertd) {<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230;using a Javascript (popup) <a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> window to collect user interaction, in this case a user defined Mathematical Quiz question.<\/p>\n<p>To make your own Mathematical Quiz questions try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html------GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html------GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">live run<\/a> for yourself.<\/p>\n<p><!-p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-your-quiz-tutorial\/'>Mobile Two Finger Gesture Your Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mtfgqt'>Previous relevant <a target=_blank title='Mobile Two Finger Gesture Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-quiz-tutorial\/'>Mobile Two Finger Gesture Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Two Finger Gesture Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share_quiz.jpg\" title=\"Mobile Two Finger Gesture Quiz Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Two Finger Gesture Quiz Tutorial<\/p><\/div>\n<p>Making use of &#8220;more than one&#8221; finger mobile gestures started with yesterday&#8217;s <a title='Mobile Two Finger Gesture Name Game Tutorial' href='#mtfgngt'>Mobile Two Finger Gesture Name Game Tutorial<\/a> is us adding a Mathematics Quiz bit of functionality today.<\/p>\n<p>In doing this we thought we could construct a quiz that limits answers to integers between one and ten, and in so doing, mobile users could answer by placing that number of fingers onto the device screen synchronously.  But trying this out in practice is how we discovered how tricky this is to do for the user.  And so, as a result, we &#8230;<\/p>\n<ul>\n<li>added into the game the chance for the user to answer within 15 seconds, an accumulated number of fingers involved in touch gestures over that 15 second period &#8230; and &#8230;<\/li>\n<li>should the mobile user answer with finger gestures the accumulated number of these will be reflected in an &#8220;answer&#8221; dropdown element &#8230;<\/li>\n<li>that dropdown element being changeable by the user and its value end up as the user&#8217;s answer<\/li>\n<\/ul>\n<p> &#8230; and that way, if you try this new Quiz functionality, selectable in another (select element style=&#8221;display:inline-block;&#8221; replacement of &#8220;gestures&#8221; hardcoded word) dropdown in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-----GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-----GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">live run<\/a>, please feel free to see what we mean here on mobile devices.   The Quiz uses the idea that Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> can be used to interpret the answer out of members of an array of questions like &#8230;<\/p>\n<p><code><br \/>\nvar qs=[\"What is 1 + 2 ?\", \"What is 9 - 4 ?\"];<br \/>\n<\/code><\/p>\n<p> &#8230; though, our questions are a tad more challenging than this, using the Javascript &#8220;checking the answer&#8221; function &#8230;<\/p>\n<p><code><br \/>\nfunction checka() {<br \/>\n      timeron=false;<br \/>\n      goes++;<br \/>\n      if (('' + cumnumf) == ('' + answer)) {<br \/>\n        score++;<br \/>\n      }<br \/>\n      document.getElementById('myh3').innerHTML='Score: ' + score + '\/' + goes + tableanswer;<br \/>\n      document.getElementById('secsleft').style.border='3px solid transparent';<br \/>\n      document.getElementById('secsleft').style.backgroundColor='transparent';<br \/>\n      setTimeout(pickq, 3000);  \/\/ pick another question<br \/>\n}<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-quiz-tutorial\/'>Mobile Two Finger Gesture Quiz Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mtfgngt'>Previous relevant <a target=_blank title='Mobile Two Finger Gesture Name Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-name-game-tutorial\/'>Mobile Two Finger Gesture Name Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Two Finger Gesture Name Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share_twofinger.jpg\" title=\"Mobile Two Finger Gesture Name Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Two Finger Gesture Name Game Tutorial<\/p><\/div>\n<p>Up until yesterday&#8217;s <a title='Mobile Swipe Gesture Name Game Share Tutorial' href='#msgngst'>Mobile Swipe Gesture Name Game Share Tutorial<\/a> the mobile gesture logic has all been based on &#8230;<\/p>\n<ul>\n<li>one finger touch gestures &#8230; but as users of touch devices will tell you &#8230;<\/li>\n<li>two (or more) finger touch gestures &#8230;<\/li>\n<\/ul>\n<p> &#8230; such as &#8220;pinch&#8221; and &#8220;stretch&#8221; two finger touch scaling gestures are very common and very intuitively used the mobile device world over.<\/p>\n<p>Mobile touch event logic, as a layer of complexity above mouse logic, can determine the <b>number of fingers synchronously touching<\/b> the mobile device as per &#8230;<\/p>\n<p><code><br \/>\nfunction getTouches(evt) {<br \/>\n  return evt.touches ||             \/\/ browser API<br \/>\n         evt.originalEvent.touches; \/\/ jQuery<br \/>\n}<br \/>\n<br \/>\nfunction handleTouchStart(evt) {<br \/>\n    <b>numf = getTouches(evt).length;<\/b><br \/>\n    \/\/ rest of ontouchstart logic follows<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and as a programmer, quite naturally, we may be interested in coding logic to take advantage of this mobile device event complexity, &#8220;on occasions&#8221;.   We say &#8220;on occasions&#8221; because it can be quite difficult to get three or more fingers to be &#8220;synchronous enough&#8221; to make that &#8220;numf&#8221; variable above reflect that &#8220;three or more fingers count&#8221;.  More on that tomorrow, but for today, let&#8217;s write code for the &#8220;pinch&#8221; and &#8220;stretch&#8221; gesture scaling events as per &#8230;<\/p>\n<p><code><br \/>\ndocument.addEventListener('gestureend', function(e) {<br \/>\n    if (e.scale &lt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers closer together<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        gtrue=true;<br \/>\n        document.title='Ouch!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php';<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dopinch('Ouch!');<br \/>\n        }<br \/>\n    } else if (e.scale &gt; 1.0 && numf == 2) {<br \/>\n        \/\/ User moved fingers further apart<br \/>\n        if (oname != '') {<br \/>\n        if (lookupw == '') {<br \/>\n        gtrue=false;<br \/>\n        document.title='Aaaah!';<br \/>\n        document.getElementById('ifnicknames').src='.\/mg.php';<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n        } else {<br \/>\n        dostretch('Aaaah!');<br \/>\n        }<br \/>\n    }<br \/>\n}, false);<br \/>\n<\/code><\/p>\n<p> &#8230; thanks to the advice from <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/11183174\/simplest-way-to-detect-a-pinch'>this excellent link<\/a>.<\/p>\n<p>If you have that &#8220;pinch&#8221; or &#8220;stretch&#8221; gesture capable mobile device, and you want to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html----GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html----GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">live run<\/a>, please feel free!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-name-game-tutorial\/'>Mobile Two Finger Gesture Name Game Tutorial<\/a>.<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='msgngst'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Name Game Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>Mobile Swipe Gesture Name Game Share Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Mobile Swipe Gesture Name Game Share Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share.gif\" title=\"Mobile Swipe Gesture Name Game Share Tutorial\"  style=\"float:left;\"   \/><\/a>[\/caption]\n\n\n\n\n\n<p>Yesterday's <a title='Mobile Swipe Gesture Name Game Tutorial' href='#msgngt'>Mobile Swipe Gesture Name Game Tutorial<\/a> was collaborative in its Name Game functionality for ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>two players within calling distance and able to get to the same device ( &#128053; \/ &#128584; ) ... and today we cover ...<\/li>\n\n\n\n\n<li>two players not within calling distance and not able to get to the same device ( &#128053; &#128231; &#128053; )<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... and we think, considering this, that <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=KM2K7sV-K74'><strike>Shirley<\/strike>surely<\/a> this would just involve an email link, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=1RIHFL105XA'><strike>Shirley<\/strike>surely<\/a>?!   Yes, that would do it, but it would also give away (to a savvy user) the innards of the game, and yet, we were envisaging the game as a surprise for the second player.   But this conundrum is exactly where an <a target=_blank title='HTML Email information fromWikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTML_email'>Inline HTML Email<\/a> (via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a>) email can come in really handy because it is another level of savvy again for your user to see any of the \"business logic\" involved in the game when you present them with an Inline HTML Email button (actually an \"a\" link with <i>style=\"text-decoration:none;\"<\/i> ...<\/p>\n\n\n\n<code>\n&lt;a target=_blank style='text-decoration: none; border:3px solid red; padding: 15px 15px 15px 15px; background-color: yellow; height: 60px; border-radius: 40px;' id=aclick href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm?name=&array='&gt;<i>Name Game for ~ Courtesy of `<\/i>&lt;\/a&gt;\n<\/code>\n\n\n\n<p>) to click with some short <i>\"does not give the game away\"<\/i> text.  Why an \"a\" element here?  Well, as you would glean when reading our \"early days\" (for us) discussion on this, with <a target=_blank title='PDF Slideshow and Form Creation Helper Inline Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-helper-inline-email-tutorial\/'>PDF Slideshow and Form Creation Helper Inline Email Tutorial<\/a>, that the Javascript \"onclick\" logic of another approach would be rejected by Email Clients like <a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a>, as one example.  You will notice, though, from snippet of \"Inline HTML Email\" HTML above, that inline CSS of the &lt;body&gt; &lt;\/body&gt; section is fine.  Hence our ability to make an \"a\" tag resemble a \"button\".<\/p>\n\n \n\n\n\n<p>And back at the supervisor we just add another HTML \"button\" element to allow for this.  This allows for an HTML form method=POST navigation to a PHP email helper (via an HTML iframe) be called into play.<\/p>\n\n\n\n\n\n<p>Why a <a target=_blank title='HTML button tag information from W3schools' \n href='https:\/\/www.w3schools.com\/tags\/tag_button.asp'>\"button\"<\/a> element, rather than an \"input type='button'\" element?<\/p>\n\n\n\n<code>\n&lt;!--input onclick=\"genask('');\" type=button value=\"Two Player Game ... You Set It Up for Other Player who Turns Away Now\"&gt;&lt;\/input--&gt;\n&lt;button style=\"height:90px;\" onclick=\"genask('');\"&gt;Two Player Name Game &amp;#128053; \/ &amp;#128584; ... &lt;br&gt;You &amp;#128053; Set It Up for Other &lt;br&gt;Player &amp;#128584; who Turns Away Now&lt;\/button&gt;&lt;br&gt;&lt;br&gt;\n&lt;button style=\"height:90px;\" onclick=\"drest(); genask('');\"&gt;Two Player Name Email Game &amp;#128053; &amp;#128231; &amp;#128053; ... &lt;br&gt;You &amp;#128053; Set It Up for Other &lt;br&gt;Player &amp;#128053; via Email &amp;#128231;&lt;\/button&gt;\n<\/code>\n\n\n\n<p>Well, at least for non-mobile platforms, a button with complex wording, we'd like to spread over a few lines of height (as a \"button\" element can, defining this wording via its innerHTML property which can contain &lt;br&gt; line feeds).  And what helps with mobile platforms that still only show the top line of the innerHTML property of a \"button\" element?   Well, we start to involve emojis, and a means of brevity for your more complex concepts you want explained in a web application.<\/p>\n\n\n\n\n\n<p>If you want to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html--GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html--GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>'s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a>, feel free!  Or try it below ...<\/p>\n\n\n\n<iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" style=\"width:100%;height:800px;\"><\/iframe>\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>New Mobile Swipe Gesture Name Game Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgngt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Name Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game.jpg\" title=\"Mobile Swipe Gesture Name Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Name Game Tutorial<\/p><\/div>\n<p>Today&#8217;s extension of mobile device &#8220;swipe gesture&#8221; event functionality onto yesterday&#8217;s <a title='Mobile Swipe Gesture Detection Primer Tutorial' href='#msgdpt'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is to turn the &#8220;proof of concept&#8221; feel into an optional Name Game for Two Players web application.<\/p>\n<p>In this Name Game a &#8230;<\/p>\n<ul>\n<li>first player asks the second player to turn away &#8230;<\/li>\n<li>first player starts up <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a> &#8230;<\/li>\n<li>first player clicks the one button of the web application, and, in so doing &#8230;<\/li>\n<li>first player is prompted for a user entry such as &#8230;<br \/>\n<code><br \/>\n[1,2,3,4] Cate<br \/>\n<\/code><br \/>\n &#8230; as an example to have second player Cate be sent to [URL1, URL2, URL3, URL4] as Cate respectively swipes [Up, Down, Left, Right] &#8230; noting here that first player can define their own URL suggestions where any &#8220;~&#8221; character is replaced by the second player&#8217;s name &#8230; and then &#8230;<\/li>\n<li>first player calls in second player so that &#8230;<\/li>\n<li>second player swipes wherever they wish &#8230; and depending on swipe type &#8230;<\/li>\n<li>second player can see the first player&#8217;s (tailored) surprises as they play (and swipe)<\/li>\n<\/ul>\n<p>Pretty simple game, huh?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgdpt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial\/'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Detection Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.jpg\" title=\"Mobile Swipe Gesture Detection Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Detection Primer Tutorial<\/p><\/div>\n<p>Have you ever been curious about &#8220;the behind the scenes&#8221; detection of &#8220;swipe&#8221; gestures on mobile platforms, whether that be&#8230;<\/p>\n<ul>\n<li>swipe right<\/li>\n<li>swipe left<\/li>\n<li>swipe down<\/li>\n<li>swipe up<\/li>\n<\/ul>\n<p>?  The answer for us is &#8220;yes&#8221;.  So we decided to start down a road of discovery largely with the help of <a target=_blank title='Swipe advice, thanks' href='https:\/\/stackoverflow.com\/questions\/2264072\/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android'>this useful link<\/a>, thanks.<\/p>\n<p>This research led us to write an &#8220;in all innocence&#8221; &#8220;proof of concept&#8221; &#8220;gesture playground&#8221; HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html_GETME\" title=\"mobile_gestures.html\">mobile_gestures.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\" title=\"Click picture\">live run<\/a> for you to swipe away, and be detected!  It may be all you need to dive into some mobile web application development!<\/p>\n<p><!--p>You can also see this play out at WordPressa 4.1.1's <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial'>Mobile Swipe Gesture Detection Primer Tutorial<\/a>.<\/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='#d47228' onclick='var dv=document.getElementById(\"d47228\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/swipe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47228' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47232' onclick='var dv=document.getElementById(\"d47232\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47232' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47235' onclick='var dv=document.getElementById(\"d47235\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47235' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47256' onclick='var dv=document.getElementById(\"d47256\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pinch\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47256' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47264' onclick='var dv=document.getElementById(\"d47264\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47264' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47274' onclick='var dv=document.getElementById(\"d47274\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/interactive-entry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47274' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d47286' onclick='var dv=document.getElementById(\"d47286\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47286' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Do you remember the recent &#8230; two players within calling distance and able to get to the same device ( &#128053; \/ &#128584; ) &#8230; and today we cover &#8230; two players not within calling distance and not able to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-two-finger-gesture-inline-html-email-quiz-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,14,15,37],"tags":[2591,222,1604,281,380,385,400,452,476,485,503,576,2487,617,2780,652,795,2505,2723,873,945,952,997,1761,1022,1133,1137,2940,3151,1209,2334,1229,3152,1294,2590,1319,1874,1358],"class_list":["post-47286","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-catch","tag-collaborate","tag-collaboration","tag-css","tag-email","tag-emoji","tag-event","tag-form","tag-game","tag-gesture","tag-gmail","tag-html","tag-inline","tag-interactive","tag-interactive-entry","tag-javascript","tag-mobile","tag-name","tag-ontouchmove","tag-ontouchstart","tag-pinch","tag-player","tag-programming","tag-prompt","tag-quiz","tag-share","tag-sharing","tag-stoppropagation","tag-stretch","tag-style","tag-submit","tag-swipe","tag-textalign","tag-touch","tag-try","tag-tutorial","tag-two-finger-gesture","tag-validation"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47286"}],"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=47286"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47286\/revisions"}],"predecessor-version":[{"id":47298,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47286\/revisions\/47298"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}