{"id":18271,"date":"2015-11-15T05:01:27","date_gmt":"2015-11-14T19:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18271"},"modified":"2016-01-22T21:04:31","modified_gmt":"2016-01-22T11:04:31","slug":"htmljavascript-choice-of-two-flipping-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-flipping-tutorial\/","title":{"rendered":"HTML\/Javascript Choice of Two Flipping Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Choice of Two Flipping Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.jpg\" title=\"HTML\/Javascript Choice of Two Flipping Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Choice of Two Flipping Tutorial<\/p><\/div>\n<p>We are so glad to be back into &#8220;positive&#8221; territory today, after yesterday&#8217;s (<a target=_blank title='HTML\/Javascript Choice of Two Strikes Tutorial' href='#hjcotst'>HTML\/Javascript Choice of Two Strikes Tutorial<\/a>) blowing of our tiny little mind, with its &#8220;double negative&#8221; possibilities &#8230; do you remember?<\/p>\n<blockquote>\n<p>We are often asked for the choice between two.  All of this digital world is based on it, after all.  It is probably easier for most people to handle the &#8220;positive&#8221; choice between two, sort of like you&#8217;d expect with an HTML input type=checkbox scenario, and we&#8217;ve got to say, we&#8217;d prefer that approach.  However, there are many approaches with presenting the choices, especially if it is a choice between two awful prospects, when we tend to want to reject the worst one.  This &#8220;double negative&#8221; type of scenario is very common, and polls can get vastly different results if the question allows this ambiguity, as it probably asks most users to sit back and think about the question, and then perhaps question their &#8220;gut&#8221; instincts.<\/p>\n<p>Today we present an <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> Tutorial reworded from that one that is presented in the book &#8220;How English Works&#8221; by Michael Swan and Catherine Walter, talking about how future events can sometimes be described using Present tense verb structures, in preference to Future tense verbs.<\/p>\n<\/blockquote>\n<p>So, as we said, today, in a more positive frame of mind, our &#8220;choice of two&#8221; methodology is to pick the correct answer, this time, for most of the length of its incarnation (save for a short different glimpse at the start of what to expect), being an HTML td (table cell) element masquerading as a button, but rotating horizontally via the use of <a target=_blank title='CSS3 keyframes information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>CSS3 keyframes<\/a> with great help from this <a target=_blank title='Useful link ... thanks' href='http:\/\/stackoverflow.com\/questions\/20217869\/how-to-spin-an-image-horizontally-with-css'>useful link<\/a>, and which we have discussed a bit here at this <a target=_blank title='CSS3 keyframes information at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyframes'>blog<\/a>.  How do you catch it with a click?  Think of merry go rounds and getting on, but please no pushing!<\/p>\n<p>We&#8217;ve made this the default behaviour today, but we&#8217;ve also done a lot of work on genericity also &#8230;<\/p>\n<ul>\n<li>user entered modes of use can be [Horizontal Flip Click] or Strike Reject &#8230; the latter being like yesterday<\/li>\n<li>user entered Title &#8230; because you can have &#8230;<\/li>\n<li>user entered Sentences &#8230; following the lead of the prompt<\/li>\n<\/ul>\n<p>The first link in this HTML\/Javascript\/CSS web application (the programming source code) we have called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html-GETME\">button_choice_of_two.html<\/a> (with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip\" title='click picture'>live run<\/a>) developed from yesterday&#8217;s scenario in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html-GETME\">this way<\/a>.<\/p>\n<p>For ESL students here to learn a new idea, or others curious to try out some real world genericity, we&#8217;ll show a different tutorial using the same software (and thanks to &#8220;How English Works&#8221; by Michael Swan and Catherine Walter &#8230; again), via &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?title=Since%20and%20For&#038;sentences=%22I%27ve%20had%20this%20job%20[since%2Ffor%2F1]%20a%20month.%22%2C%22He%27s%20known%20her%20[since%2Ffor%2F0]%20April.%22%2C%22She%27s%20been%20ill%20[since%2Ffor%2F1]%20years.%22%2C%22I%20haven%27t%20seen%20him%20[since%2Ffor%2F1]%20ages.%22%2C%22I%27ve%20lived%20here%20[since%2Ffor%2F0]%201992.%22\">Since and For Tutorial<\/a> in Horizontal Flip Click mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?strike=y&#038;title=Since%20and%20For&#038;sentences=%22I%27ve%20had%20this%20job%20[since%2Ffor%2F1]%20a%20month.%22%2C%22He%27s%20known%20her%20[since%2Ffor%2F0]%20April.%22%2C%22She%27s%20been%20ill%20[since%2Ffor%2F1]%20years.%22%2C%22I%20haven%27t%20seen%20him%20[since%2Ffor%2F1]%20ages.%22%2C%22I%27ve%20lived%20here%20[since%2Ffor%2F0]%201992.%22\">Since and For Tutorial<\/a> in Strike Reject mode of use (like yesterday)<\/li>\n<\/ul>\n<hr>\n<p id='hjcotst'>Previous relevant <a target=_blank title='HTML\/Javascript Choice of Two Strikes Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-strikes-tutorial\/'>HTML\/Javascript Choice of Two Strikes 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\/strike_choice_of_two.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Choice of Two Strikes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/strike_choice_of_two.jpg\" title=\"HTML\/Javascript Choice of Two Strikes Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Choice of Two Strikes Tutorial<\/p><\/div>\n<p>We are often asked for the choice between two.  All of this digital world is based on it, after all.  It is probably easier for most people to handle the &#8220;positive&#8221; choice between two, sort of like you&#8217;d expect with an HTML input type=checkbox scenario, and we&#8217;ve got to say, we&#8217;d prefer that approach.  However, there are many approaches with presenting the choices, especially if it is a choice between two awful prospects, when we tend to want to reject the worst one.  This &#8220;double negative&#8221; type of scenario is very common, and polls can get vastly different results if the question allows this ambiguity, as it probably asks most users to sit back and think about the question, and then perhaps question their &#8220;gut&#8221; instincts.<\/p>\n<p>Today we present an <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> Tutorial reworded from that one that is presented in the book &#8220;How English Works&#8221; by Michael Swan and Catherine Walter, talking about how future events can sometimes be described using Present tense verb structures, in preference to Future tense verbs.<\/p>\n<p>The first link in this HTML\/Javascript\/CSS web application (the programming source code) we have called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/strike_choice_of_two.html_GETME\">strike_choice_of_two.html<\/a> (with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/strike_choice_of_two.html\" title='click picture'>live run<\/a>) takes you to some great quotes from the book, to explain the issue.<\/p>\n<p>Today&#8217;s work turns HTML <a target=_blank title='HTML strike tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'>a<\/a> tags into button looking features, and the crossing of the words, to indicate that you &#8220;click to reject&#8221;, is achieved by the HTML <a target=_blank title='HTML strike tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_strike.asp'>strike<\/a> element.  To counteract the &#8220;double negative&#8221; feel, we clarify a more straightforward explanation as you hover over these HTML a tag &#8220;buttons&#8221;, but, of course, this doesn&#8217;t work for most mobile platforms, unfortunately.<\/p>\n<p>So see what you think of this idea <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/strike_choice_of_two.html\" title='click picture'>here<\/a> with today&#8217;s ESL sentence game about the future <font size=5> &#8230; and <a target=_blank title='Buzz' href='https:\/\/www.youtube.com\/watch?v=ejwrxGs_Y_I'>beyond<\/a><\/font>!<\/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='#d18256' onclick='var dv=document.getElementById(\"d18256\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/esl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18256' 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='#d18271' onclick='var dv=document.getElementById(\"d18271\"); 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='d18271' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We are so glad to be back into &#8220;positive&#8221; territory today, after yesterday&#8217;s (HTML\/Javascript Choice of Two Strikes Tutorial) blowing of our tiny little mind, with its &#8220;double negative&#8221; possibilities &#8230; do you remember? We are often asked for the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-flipping-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":[282,396,1733,476,576,1734,675,997,1119,1319],"class_list":["post-18271","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-games","category-tutorials","tag-css3","tag-esl","tag-future","tag-game","tag-html","tag-javascript-css","tag-keyframes","tag-programming","tag-sentence","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18271"}],"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=18271"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18271\/revisions"}],"predecessor-version":[{"id":19672,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/18271\/revisions\/19672"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=18271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=18271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=18271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}