{"id":40823,"date":"2018-09-20T03:01:40","date_gmt":"2018-09-19T17:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40823"},"modified":"2018-09-20T09:53:33","modified_gmt":"2018-09-19T23:53:33","slug":"htmljavascript-checkbox-and-multiple-dropdown-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-checkbox-and-multiple-dropdown-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Checkbox and Multiple Dropdown Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/checkbox_vs_select_multiple.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Checkbox and Multiple Dropdown Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/checkbox_vs_select_multiple.jpg\" title=\"HTML\/Javascript Checkbox and Multiple Dropdown Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Checkbox and Multiple Dropdown Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re revisiting some of the themes of user interactive input in <a title='HTML\/Javascript Choice of Several Tutorial' href='#html\/jcst'>HTML\/Javascript Choice of Several Tutorial<\/a> for scenarios where the user can make multiple selections, and are comparing &#8230;<\/p>\n<ul>\n<li>input type=checkbox &#8230; versus &#8230;<\/li>\n<li>select multiple<\/li>\n<\/ul>\n<p> &#8230; the latter of which we got inspired to put into the action from yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-memory-tutorial' title='Gimp Guillotine Follow Up Memory Tutorial'>Gimp Guillotine Follow Up Memory Tutorial<\/a> where we got to, after the event, set selections of a select element (ie. dropdown) with multiple selection mode set on.  That means in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/checkbox_vs_select_multiple.html\" title=\"Click picture\">Favourites Poll web application<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/checkbox_vs_select_multiple.html_GETME\" title=\"checkbox_vs_select_multiple.html\">checkbox_vs_select_multiple.html<\/a> code we can allow for either checkboxes or dropdowns be accepted for user input and both sides of the user entry table will show the results &#8230;<\/p>\n<p><code><br \/>\n function process(whato) {<br \/>\n   var row=1, cv='';<br \/>\n   if (whato.id.indexOf('ins') == 0) {  \/\/ select multiple<br \/>\n     while (document.getElementById('opt_' + cnt + '_' + row)) {<br \/>\n       if (document.getElementById('opt_' + cnt + '_' + row).selected) {<br \/>\n         cmdlist.push(\"document.getElementById('cbx_\" + cnt + '_' + row + \"').checked=true\");<br \/>\n         cmdlist.push(\"document.getElementById('opt_\" + cnt + '_' + row + \"').setAttribute('selected', '')\");<br \/>\n         cmdlist.push(\"document.getElementById('opt_\" + cnt + '_' + row + \"').selected = true\");<br \/>\n         if (document.getElementById('opt_' + cnt + '_' + row).value == 'Other(s)') {<br \/>\n           cv=prompt('Optionally change, as required', 'Other(s)');<br \/>\n           if (cv == null) { cv='Other(s)'; }<br \/>\n           if (cv != 'Other(s)') {<br \/>\n             document.getElementById('opt_' + cnt + '_' + row).value=cv;<br \/>\n             document.getElementById('opt_' + cnt + '_' + row).innerHTML=cv;<br \/>\n             document.getElementById('cbx_' + cnt + '_' + row).value=cv;<br \/>\n             document.getElementById('lab_' + cnt + '_' + row).innerHTML=document.getElementById('lab_' + cnt + '_' + row).innerHTML.replace('Other(s)',cv).replace('Other(s)',cv);<br \/>\n           }<br \/>\n         }<br \/>\n         document.getElementById('cbx_' + cnt + '_' + row).checked=true;<br \/>\n       }<br \/>\n       row++;<br \/>\n     }<br \/>\n   } else if (whato.id.indexOf('inc') == 0) {  \/\/ input checkbox<br \/>\n     while (document.getElementById('cbx_' + cnt + '_' + row)) {<br \/>\n       if (document.getElementById('cbx_' + cnt + '_' + row).checked) {<br \/>\n         cmdlist.push(\"document.getElementById('opt_\" + cnt + '_' + row + \"').setAttribute('selected', '')\");<br \/>\n         cmdlist.push(\"document.getElementById('opt_\" + cnt + '_' + row + \"').selected = true\");<br \/>\n         cmdlist.push(\"document.getElementById('cbx_\" + cnt + '_' + row + \"').checked=true\");<br \/>\n         if (document.getElementById('cbx_' + cnt + '_' + row).value == 'Other(s)') {<br \/>\n           cv=prompt('Optionally change, as required', 'Other(s)');<br \/>\n           if (cv == null) { cv='Other(s)'; }<br \/>\n           if (cv != 'Other(s)') {<br \/>\n             document.getElementById('opt_' + cnt + '_' + row).value=cv;<br \/>\n             document.getElementById('opt_' + cnt + '_' + row).innerHTML=cv;<br \/>\n             document.getElementById('cbx_' + cnt + '_' + row).value=cv;<br \/>\n             document.getElementById('lab_' + cnt + '_' + row).innerHTML=document.getElementById('lab_' + cnt + '_' + row).innerHTML.replace('Other(s)',cv).replace('Other(s)',cv);<br \/>\n           }<br \/>\n         }<br \/>\n         document.getElementById('opt_' + cnt + '_' + row).setAttribute('selected', '');<br \/>\n         document.getElementById('opt_' + cnt + '_' + row).selected = true;<br \/>\n       }<br \/>\n       row++;<br \/>\n     }<br \/>\n   }<br \/>\n   pickone();<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; after a cycle of questions of which the user can then create a Favourites Poll Report that can be emailed off to somebody using an &#8220;a&#8221; &#8220;<a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'>mailto:<\/a>&#8221; technique of emailing via the user&#8217;s email client program.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Completely off topic, but do you want a smile?   Watch and listen to Justine Clarke sing &#8220;A Banana Is A Banana&#8221;.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/8F4-Gp4Tomw\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<hr>\n<p id='html\/jcst'>Previous relevant <a target=_blank title='HTML\/Javascript Choice of Several Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-choice-of-several-tutorial\/'>HTML\/Javascript Choice of Several 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\/button_choice_of_two.html?mode=radio\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Choice of Several Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.jpeg\" title=\"HTML\/Javascript Choice of Several Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Choice of Several Tutorial<\/p><\/div>\n<p>After introducing some <a target=_blank title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/'>SVG<\/a> into our &#8220;Choice of Two&#8221; series of blog posts we last left off yesterday with <a target=_blank title='HTML\/Javascript Choice of Two SVG Tutorial' href='#hjcotst'>HTML\/Javascript Choice of Two SVG Tutorial<\/a> as shown below, today&#8217;s progress is to allow for more than two selections with all but the Strike Reject mode of use.  So, the situation, now, with the web application is as below &#8230;<\/p>\n<ol>\n<li>pie mode<\/li>\n<li>pie flip mode<\/li>\n<li>strike reject mode (only when the data has sentences with two choices)<\/li>\n<li>horizontal flip rotation mode (only when the data has sentences with two choices)<\/li>\n<li>checkbox<\/li>\n<li>radio button<\/li>\n<li>button<\/li>\n<li>dropdown (select tag)<\/li>\n<\/ol>\n<p>Of course the breaking out of choice number restriction leaves this web application to be able to handle &#8230;<\/p>\n<ul>\n<li>multiple choice<\/li>\n<li>list or pool of answers<\/li>\n<\/ul>\n<p>So this HTML\/Javascript\/CSS web application for the &#8220;choice of many&#8221; has programming source code you could call <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=radio\" title='click picture'>live run<\/a>) developed from yesterday&#8217;s &#8220;choice of two&#8221; 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; yet again), in the form of a pool of answers, via &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pie\">Modal Auxiliary Verbs Tutorial<\/a> in Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip\">Modal Auxiliary Verbs Tutorial<\/a> in Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip\">Modal Auxiliary Verbs Tutorial<\/a> in Horizontal Flip Click mode of use (and see it revert to the Dropdown mode of use)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=strike\">Modal Auxiliary Verbs Tutorial<\/a> in Strike Reject mode of use (and see it revert to the Checkbox mode of use)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox\">Modal Auxiliary Verbs Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio\">Modal Auxiliary Verbs Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button\">Modal Auxiliary Verbs Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown\">Modal Auxiliary Verbs Tutorial<\/a> in Dropdown (select tag) mode of use<\/li>\n<\/ul>\n<p> &#8230; or try some multiple choice Mathematical Estimating questions (thanks to &#8220;New Century Maths (stages 5.2\/5.3) second edition&#8221; <font size=1>by Klaas Bootsma, David Badger, Colin Skene, Robert Yen, David Adams<\/font>) &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pie&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Horizontal Flip Click mode of use (and see it revert to the Dropdown mode of use)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=strike&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Strike Reject mode of use (and see it revert to the Checkbox mode of use)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;sentences=%22Estimate%20of%2018%20x%2039%20is%20[70.2%2F702%2F7020%2F70200%2F1].%22%2C%22Estimate%20of%20141.2%20%2F%200.21%20is%20[672.38%2F67.238%2F67238%2F0.67238%2F0].%22%2C%22Which%20is%20the%20best%20estimate%20of%20145.7%20%2B%2093.7%20out%20of%20[240%2F24%2F2.4%2F2400%2F0]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%209.475%20%2F%200.31%20out%20of%20[300%2F3%2F3000%2F30%2F3]%3F%22%2C%22Which%20is%20the%20best%20estimate%20of%20%2827.9%20-%208.4%29%20x%2019.8%20out%20of%20[800%2F400%2F80%2F1200%2F1]%3F%22&#038;mode=dropdown&#038;title=Mathematical%20Estimating\">Mathematical Estimating Tutorial<\/a> in Dropdown (select tag) mode of use<\/li>\n<\/ul>\n<p>We hope this is food for thought for a web application you are developing now.<\/p>\n<hr>\n<p id='hjcotst'>Previous relevant <a target=_blank title='HTML\/Javascript Choice of Two SVG Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-svg-tutorial\/'>HTML\/Javascript Choice of Two SVG 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\/button_choice_of_two.html?mode=pie\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Choice of Two SVG Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.png\" title=\"HTML\/Javascript Choice of Two SVG Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Choice of Two SVG Tutorial<\/p><\/div>\n<p>We&#8217;re introducing some <a target=_blank title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/'>SVG<\/a> into our &#8220;Choice of Two&#8221; series of blog posts we last left off with <a target=_blank title='HTML\/Javascript Choice of Two More Tutorial' href='#hjcotmt'>HTML\/Javascript Choice of Two More Tutorial<\/a> as shown below, because SVG opens up a whole other graphical &#8220;dimension&#8221; to presenting options, in an interesting way.<\/p>\n<p>The SVG we use today brought into play an SVG functionality we&#8217;ve not touched on here with what we&#8217;ve talked about in the <a target=_blank title='SVG postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg'>past<\/a>, namely the extremely useful SVG <a target=_blank title='SVG path information from w3schools' href='http:\/\/www.w3schools.com\/svg\/svg_path.asp'>path<\/a> usage, the discovery of which is akin to being around Linux Korn shell for 3 years, and just discovering &#8220;awk&#8221;.<\/p>\n<p>So today we round up the &#8220;two option&#8221; approach list with &#8230;<\/p>\n<ol>\n<li>pie mode<\/li>\n<li>pie flip mode &#8230; and from yesterday, and before &#8230;<\/li>\n<li>strike reject mode<\/li>\n<li>horizontal flip rotation mode &#8230; to which we added, yesterday, the more conventional &#8230;<\/li>\n<li>checkbox<\/li>\n<li>radio button<\/li>\n<li>button<\/li>\n<li>dropdown (select tag)<\/li>\n<\/ol>\n<p> &#8230; but who knows what tomorrow brings?!<\/p>\n<p>There is a touch of <a target=_blank title='Overlay postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iverlay'>&#8220;overlay&#8221;<\/a> to this tutorial today in that we use our favourite CSS suspects &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p> &#8230; along with &#8220;Client Pre-emptive Iframe&#8221; thoughts to channel <a target=_blank title='Google Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index'>Google Chart<\/a> Pie Chart smarts (we last talked about with <a target=_blank title='Google Chart Onclick Pie Chart Differences Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-onclick-pie-chart-differences-tutorial\/'>Google Chart Onclick Pie Chart Differences Tutorial<\/a> at this blog) to construct our table cell pies today.<\/p>\n<p>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\" title='click picture'>live run<\/a>) developed from yesterday&#8217;s <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?mode=pie&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs 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?mode=strike&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Adjectives%20and%20Adverbs&#038;sentences=%22Anna%20is%20[amazing%2Famazingly%2F1]%20good%20with%20animals.%22%2C%22As%20soon%20as%20I%20saw%20him%20I%20was%20[sure%2Fsurely%2F0]%20he%20had%20been%20drinking.%22%2C%22Do%20you%20think%20that%27s%20a%20[real%2Freally%2F0]%20diamond%20in%20her%20ring%3F%22%2C%22He%20was%20wearing%20a%20[true%2Ftruly%2F1]%20astonishing%20tie.%22%2C%22I%20felt%20her%20arm%20[gentle%2Fgently%2F1]%20to%20see%20if%20any%20bones%20were%20broken.%22\">Adjectives and Adverbs Tutorial<\/a> in Dropdown (select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pie&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is 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?mode=strike&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Dropdown (or select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pie&#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 Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip&#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 Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#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 Horizontal Flip Click mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=strike&#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<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#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 Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#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 Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#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 Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#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 Dropdown (select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pie&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  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?mode=strike&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Dropdown (or select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pie&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Pie mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=pieflip&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Pie Flip mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs 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?mode=strike&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Dropdown (or select tag) mode of use<\/li>\n<\/ul>\n<hr>\n<p id='hjcotmt'>Previous relevant <a target=_blank title='HTML\/Javascript Choice of Two More Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-more-tutorial\/'>HTML\/Javascript Choice of Two More 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\/button_choice_of_two.html?mode=radio\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Choice of Two More Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.gif\" title=\"HTML\/Javascript Choice of Two More Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Choice of Two More Tutorial<\/p><\/div>\n<p>To get a bigger picture view of our &#8220;Choice of Two&#8221; series of blog posts we last left off with <a target=_blank title='HTML\/Javascript Choice of Two Flipping Tutorial' href='#hjcotft'>HTML\/Javascript Choice of Two Flipping Tutorial<\/a> as shown below, a couple of days back, we add in another four more standard approaches to allow for a choice of two scenario with a webpage, so that, as of today, we have the choices &#8230;<\/p>\n<ol>\n<li>strike reject mode<\/li>\n<li>horizontal flip rotation mode &#8230; to which we add, today, the more conventional &#8230;<\/li>\n<li>checkbox<\/li>\n<li>radio button<\/li>\n<li>button<\/li>\n<li>dropdown (select tag)<\/li>\n<\/ol>\n<p>Today&#8217;s code includes the use of the Javascript call &#8230;<\/p>\n<p><code><br \/>\naft = <a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle<\/a>(document.querySelector('#' + ct + eval(1 + ij)), ':after').getPropertyValue('content');<br \/>\n<\/code><\/p>\n<p> &#8230; which illustrates an interesting method facilitating the meeting of the CSS :after (or :before) syntax (we&#8217;ve talked about before at this blog with <a target=_blank title='CSS Before and After Content Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-before-and-after-content-primer-tutorial'>CSS Before and After Content Primer Tutorial<\/a>) with Javascript DOM &#8220;worlds&#8221;, and, therefore, well worth some investigation, as this very <a target=_blank title='Useful link ... thanks' href='https:\/\/davidwalsh.name\/pseudo-element'>useful link<\/a> helps with.<\/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\/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\" title='click picture'>live run<\/a>) developed from the scenario two days back 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?mode=flip&#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 Horizontal Flip Click mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=strike&#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<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#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 Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#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 Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#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 Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#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 Dropdown (select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is 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?mode=strike&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Have%20and%20Has%20and%20Are%20and%20Is&#038;sentences=%22A%20group%20of%20teenagers%20in%20the%20town%20[has%2Fhave%2F1]organised%20a%20scheme%20to%20help%20old%20people%20with%20their%20shopping.%22%2C%22A%20number%20of%20people%20[has%2Fhave%2F1]%20complained%20about%20the%20noise.%22%2C%22Do%20you%20think%20five%20dollars%20[is%2Fare%2F0]%20a%20big%20enough%20tip%3F%22%2C%22Hamburger%20and%20chips%20[is%2Fare%2F0]%20not%20a%20very%20healthy%20lunch.%22%2C%22More%20than%20one%20house%20in%20our%20street%20[has%2Fhave%2F0]%20been%20broken%20into%20recently.%22%2C%22A%20couple%20of%20dangerous%20looking%20men%20[is%2Fare%2F1]%20waiting%20for%20you%20outside.%22\">Have and Has and Are and Is Tutorial<\/a> in Dropdown (or select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  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?mode=strike&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Must%20or%20Should&#038;sentences=%22You%20know%2C%20I%20think%20you%20[should%2Fmust%2F0]%20take%20a%20holiday.%22%2C%22Tell%20Ziggy%20he%20[should%2Fmust%2F1]%20tidy%20his%20room%20at%20once.%22%2C%22Visitors%20are%20reminded%20that%20they%20[should%2Fmust%2F0]%20keep%20their%20bags%20with%20them.%22%2C%22I%27m%20sorry%2C%20but%20you%20[should%2Fmust%2F1]%20go.%20We%20don%27t%20want%20you%20here.%22%2C%22I%20really%20[should%2Fmust%2F1]%20go%20on%20a%20diet.%20I%27ll%20start%20today!%22\">Should or Must  Tutorial<\/a> in Dropdown (or select tag) mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=flip&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs 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?mode=strike&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Strike Reject mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=checkbox&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Checkbox mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=radio&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Radio Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=button&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Button mode of use<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_choice_of_two.html?mode=dropdown&#038;title=Modal%20Verbs&#038;sentences=%22We%20[may%2Fmight%2F1]%20win%2C%20but%20I%20don%27t%20think%20there%27s%20much%20chance.%22%2C%22That%20[can%27t%2Fmustn%27t%2F0]%20be%20her%20daughter%20-%20they%27re%20nearly%20the%20same%20age.%22%2C%22We%20[can%2Fmay%2F1]%20decide%20to%20go%20camping%20again%20at%20Easter.%22%2C%22There%20[may%20not%2Fcan%27t%2F0]%20be%20enough%20room%20for%20everybody%20on%20the%20bus%20-%20we%27ll%20have%20to%20wait%20and%20see.%22%2C%22You%20[may%20not%2Fcan%27t%2F1]%20get%20in%20without%20a%20ticket%20-%20not%20a%20chance.%22%2C%22You%20absolutely%20[should%2Fmust%2F0]%20go%20and%20see%20the%20film.%22%2C%22I%20think%20you%20[should%2Fmust%2F1]%20try%20to%20relax%20more.%22\">Modal Verbs Tutorial<\/a> in Dropdown (or select tag) mode of use<\/li>\n<\/ul>\n<hr>\n<p id='hjcotft'>Previous relevant <a target=_blank title='HTML\/Javascript Choice of Two Flipping Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-flipping-tutorial\/'>HTML\/Javascript Choice of Two Flipping 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\/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<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='#d18300' onclick='var dv=document.getElementById(\"d18300\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18300' 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='#d18329' onclick='var dv=document.getElementById(\"d18329\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18329' 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='#d18329' onclick='var dv=document.getElementById(\"d18329\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18329' 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='#d40823' onclick='var dv=document.getElementById(\"d40823\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/multiple\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40823' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;re revisiting some of the themes of user interactive input in HTML\/Javascript Choice of Several Tutorial for scenarios where the user can make multiple selections, and are comparing &#8230; input type=checkbox &#8230; versus &#8230; select multiple &#8230; the latter &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-checkbox-and-multiple-dropdown-primer-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,37],"tags":[202,367,576,609,617,652,739,2092,997,1866,1200,1319],"class_list":["post-40823","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-checkbox","tag-dropdown","tag-html","tag-input","tag-interactive","tag-javascript","tag-mailto","tag-multiple","tag-programming","tag-select","tag-stop-press","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40823"}],"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=40823"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40823\/revisions"}],"predecessor-version":[{"id":40841,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40823\/revisions\/40841"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=40823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=40823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=40823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}