{"id":67246,"date":"2025-03-03T03:01:00","date_gmt":"2025-03-02T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=67246"},"modified":"2025-03-03T07:20:06","modified_gmt":"2025-03-02T21:20:06","slug":"knockout-dice-game-checkbox-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/knockout-dice-game-checkbox-tutorial\/","title":{"rendered":"Knockout Dice Game Checkbox Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Knockout Dice Game Checkbox Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game_revisit.gif\" title=\"New Dice Guessing Game Checkbox Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Knockout Dice Game Checkbox Tutorial<\/p><\/div>\n<p>Around here, we&#8217;re often moving on in a project via &#8230;<\/p>\n<ul>\n<li>the changing of hardcodings into &#8220;dropdown&#8221; select elements (especially within h1 header elements) &#8230; but today, to move on, we arrange for &#8230;<\/li>\n<li>the <font color=purple>nested<\/font> <font color=blue>insertion of a checkbox (initially checked)<\/font> within an h1 header element<\/li>\n<\/ul>\n<p> &#8230; which for the first time we can remember, we adjust &#8220;opacity aesthetics&#8221; to add a useful dynamic setting adjustment to the <i>Knockout Dice Game<\/i> created when we presented <a title='Knockout Dice Game Primer Tutorial' href='#kdgpt'>Knockout Dice Game Primer Tutorial<\/a> some time ago now &#8230;<\/p>\n<p><code><br \/>\n&lt;h1&gt;&lt;div id=divword style=display:inline-block;&gt;Knockout&lt;\/div&gt; Dice Game for &lt;div id='dnum' style='display:inline-block;'&gt;&lt;select style='display:inline-block;' onchange='fixinstone(this.value);' id='snum'&gt;&lt;option value=2&gt;2&lt;\/option&gt;&lt;option value=3&gt;3&lt;\/option&gt;&lt;option value=4&gt;4&lt;\/option&gt;&lt;option value=5&gt;5&lt;\/option&gt;&lt;option value=6&gt;6&lt;\/option&gt;&lt;option value=7&gt;7&lt;\/option&gt;&lt;option value=8&gt;8&lt;\/option&gt;&lt;option value=9&gt;9&lt;\/option&gt;&lt;\/select&gt;&lt;\/div&gt; <font color=purple>&lt;span id=sgwta style=opacity:1.0;&gt;<\/font><font color=blue>&lt;input onchange=\"document.getElementById('sgwta').style.opacity='' + eval(1.1 - eval('' + document.getElementById('sgwta').style.opacity));\" style=display:inline-block;opacity:1.0; type=checkbox id=gwta checked&gt;&lt;\/input&gt;<\/font><font color=purple>Winner Take All&lt;\/span&gt;<\/font> Players&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p>This &#8220;Winner Takes All&#8221; checkbox controlled mode of use defaults to being set <font size=1>(which is unusual for us, when we add a new form of methodology like this)<\/font> because we discovered, revisiting this game, that &#8220;passivity&#8221; was, sort of, being rewarded and so we felt like we needed to add in the idea (and the concept of &#8220;No Winner&#8221; needed to be added), into the game, where it is really user participation encouraged here, to make the game interesting.  Adding to that interest is that in a &#8220;Winner Takes All&#8221; mode of use, if a player can be the lone player to survive &#8220;Knockouts&#8221; they score a point for every roll of the two dice to get to this &#8220;lone winner&#8221; scenario.<\/p>\n<p>The other issue we noticed were the right hand overflows of our tabulated dropdowns when a lot of players are asked for.  We started rearranging <font color=purple>content justifications <font size=1>(to now be left justified)<\/font><\/font> so it did not matter if we reduced the <font color=blue>(now a better Responsive Design friendly table cell percentage)<\/font> widths of those dropdowns, so as to fit more fields into the webpage &#8230;<\/p>\n<p><code><br \/>\n      tg+=\"&lt;td&gt;&lt;select <font color=blue>style=width:100%;<\/font>background-color:cyan; id='gplayer\" + jhow + \"'&gt;&lt;option value='06'&gt;<font color=purple>[6]<\/font> Knockout value ...&lt;\/option&gt;&lt;option value='6'&gt;6&lt;\/option&gt;&lt;option value='7'&gt;7&lt;\/option&gt;&lt;option value='8'&gt;8&lt;\/option&gt;&lt;option value='9'&gt;9&lt;\/option&gt;&lt;\/select&gt;&lt;\/td&gt;&lt;td&gt;&lt;div id='score\" + jhow + \"'&gt;Score: 0\/0&lt;\/div&gt;&lt;\/td&gt;\";<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html-GETME\" rel=\"noopener\">knockout_dice_game.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\" rel=\"noopener\">Knockout Dice Game<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\" style=width:100%;height:900px;><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/knockout-dice-game-checkbox-tutorial\/' rel=\"noopener\">Knockout Dice Game Checkbox Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kdgpt'>Previous relevant <a target=\"_blank\" title='Knockout Dice Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/knockout-dice-game-primer-tutorial\/' rel=\"noopener\">Knockout Dice Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Knockout Dice Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.jpg\" title=\"New Dice Guessing Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Knockout Dice Game Primer Tutorial<\/p><\/div>\n<p>Further to the previous <a title='Dice Guessing Game Primer Tutorial' href='#dggpt'>Dice Guessing Game Primer Tutorial<\/a>, today, we have for you another Dice Game, this time &#8230;<\/p>\n<ul>\n<li>a dice game for 2 to 9 players &#8230; which you should establish, as necessary, straight up &#8230;<\/li>\n<li>then rename any player names you don&#8217;t want to be the default <i>Player1<\/i> up to <i>Player9<\/i> values, again, making use of the <a target=\"_blank\" title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=&#8221;true&#8221; global HTML attribute and the HTML div element&#8217;s <i>onchange<\/i> event to achieve this<\/li>\n<li>then in each round of competition the players choose a two dice roll value between 6 to 9 as the value they don&#8217;t want to see turn up, because if it does, they score nothing for that round of competition, else the players last not rejected when there is one or no players left, score a point in that round of competition &#8230; and &#8230;<\/li>\n<li>the web application randomly throws the dice the necessary number of times to find winner(s) once the &#8220;Roll the Dice for Each Player&#8221; button is pressed<\/li>\n<\/ul>\n<p>We&#8217;d like to thank the <a target=\"_blank\" title='Useful webpage, thanks' href='https:\/\/icebreakerideas.com\/dice-games\/#Knock_Out_Dice_Game_for_Kids' rel=\"noopener\">very useful webpage<\/a> for ideas for how (for the most part) this Knockout Dice Game design, execution and rules should go.<\/p>\n<p>And again, we&#8217;d welcome your <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\" title=\"Click picture\" rel=\"noopener\">try out<\/a> of this new Knockout Dice Guessing Game, and please feel free to tell us what you think.  Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html_GETME\" title=\"knockout_dice_game.html\" rel=\"noopener\">knockout_dice_game.html<\/a> link.<\/p>\n<hr>\n<p id='dggpt'>Previous relevant <a target=\"_blank\" title='Dice Guessing Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dice-guessing-game-primer-tutorial\/' rel=\"noopener\">Dice Guessing Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dice Guessing Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.jpg\" title=\"Dice Guessing Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dice Guessing Game Primer Tutorial<\/p><\/div>\n<p>There are many <a target=\"_blank\" title='HTML Entities based on punctuation' href='https:\/\/www.w3schools.com\/charsets\/ref_utf_punctuation.asp' rel=\"noopener\">HTML Entities based around punctuation<\/a> that can add to the means by which you communicate ideas with your web applications.<\/p>\n<p>In today&#8217;s new (up to two player) Dice Game, we use some of these to represent the numbers from 1 to 6 on the faces of the dice, similar to how you may have seen this happen with dice in various games you play, or hanging from your car&#8217;s front visor perhaps?<\/p>\n<p>We&#8217;d welcome your <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.html\" title=\"Click picture\" rel=\"noopener\">try out<\/a> of this Dice Guessing Game, and feel free to tell us what you think (or if its two of you &#8220;tell us what you think&#8221; &#8230; huh?!).  Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.html_GETME\" title=\"dice_game.html\" rel=\"noopener\">dice_game.html<\/a> link.  If you do, you&#8217;ll see the mildly interesting scoring system, that can be explained via the equation &#8230;<\/p>\n<p><code><br \/>\n[CorrectAnswerScoreIncrement] = 7 - (NumberOfPossibilitiesInFull36PossibilitiesSet)<br \/>\n<\/code><\/p>\n<p> &#8230; allowing for the incorporation of this Javascript array initialization &#8230;<\/p>\n<p><code><br \/>\nvar probabilities=[0,0,1,2,3,4,5,6,5,4,3,2,1];  \/\/ score will be 7-guessValue<br \/>\n<\/code><\/p>\n<p> &#8230; that we were capable of working out ourselves but were reassured by the mathematics of this <a target=\"_blank\" title='Useful link' href='http:\/\/www.math.hawaii.edu\/~ramsey\/Probability\/TwoDice.html' rel=\"noopener\">very useful link<\/a>, thanks.<\/p>\n<p>Another game thought unique to how we do things that has been introduced today, is that a user can change the default player names, those being <i>Player1<\/i> and <i>Player2<\/i> via an HTML div element utilizing the <a target=\"_blank\" title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=&#8221;true&#8221; global HTML attribute to make it look readable, but be also &#8220;quietly&#8221; editable.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=\"_blank\" title='Dice Guessing Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dice-guessing-game-primer-tutorial\/' rel=\"noopener\">Dice Guessing Game Primer Tutorial<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d36761' onclick='var dv=document.getElementById(\"d36761\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tutorial\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36761' 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='#d36778' onclick='var dv=document.getElementById(\"d36778\"); 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='d36778' 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='#d67246' onclick='var dv=document.getElementById(\"d67246\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/checkbox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67246' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Around here, we&#8217;re often moving on in a project via &#8230; the changing of hardcodings into &#8220;dropdown&#8221; select elements (especially within h1 header elements) &#8230; but today, to move on, we arrange for &#8230; the nested insertion of a checkbox &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/knockout-dice-game-checkbox-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[202,2501,367,476,1996,5125,2255,989,997,1991,2319,3624,1238,3312,1319,1899],"class_list":["post-67246","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-checkbox","tag-dice","tag-dropdown","tag-game","tag-header","tag-passivity","tag-percentage","tag-probability","tag-programming","tag-responsive-design","tag-score","tag-scoring","tag-table","tag-tabular","tag-tutorial","tag-units"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67246"}],"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=67246"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67246\/revisions"}],"predecessor-version":[{"id":67253,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67246\/revisions\/67253"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=67246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=67246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=67246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}