Circle Bag B

This is a bag with circles of 4 evenly distributed colors.

by Ryan Allison

HTML

<body class="centered">
  <h1>
    Hypothesis Testing with Binomial Distributions
    
  </h1>
  <h2>
    This bag (Bag B) contains <span style="color:#2E86C1">blue</span>, <span style="color:#229954">green</span>, <span style="color:#D68910">orange</span>, <span style="color:#FFC0CB">pink</span>, and <span style="color:#884EA0">purple</span> circles. <br>
    <!--In this bag there are 5 <span style="color:#CB4335">red</span> balls and 5 <span style="color:#2E86C1">blue</span> balls-->
    
    <p>According to Dr. Sherman, the 60 circles are evenly distributed among the colors.
    </p>
    
    Select Draw to see which color you get.
  </h2>
  <div>
    <div style="position:relative" id="btnDraw">
      <div class="vc">
        DRAW
      </div>
    </div>
    <div id="divResult" style="display:none">

    </div>
    <div id="divStats">
      
    </div>
    <div id="divQuestion">
      
    </div>
  </div>
</body>

CSS

body {
  background-color: gray;
  font-family: arial;
}

.centered {
  text-align: center;
}

#btnDraw {
  display: inline-block;
  height: 60px;
  width: 100px;
  cursor: pointer;
  background-color: darkgrey;
  font-size: large;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid black;
}

#btnDraw:hover {
  background-color: #787878;
}

#btnDraw:active {
  background-color: #444444;
}

.resultTxt {
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
  width: 100%;
}

.tableTxt {
  font-family: Georgia;
  font-size: 20px;
  font-weight: normal;
  text-shadow: none;
  
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

.vc {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

span {
  text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
}

JavaScript

var pi = {
  name: "Pink",
  color: "#FFC0CB"
};

var b = {
  name: "Blue",
  color: "#2E86C1"
};

var g = {
  name: "Green",
  color: "#229954"
};

var pu = {
  name: "Purple",
  color: "#884EA0"
};

var o = {
  name: "Orange",
  color: "#D68910"
};

//Create our draw bag
//This is currently coded to accept Red Blue Green Purple Orange and Pink
var bag = [ //Bag A has Blue 7, Green 10, Orange 11, Pink 24, Purple 8
  b, b, b, b, b, b, b, g, g, g, g, g, g, g, g, g, g, o, o, o,
  o, o, o, o, o, o, o, o, pi, pi, pi, pi, pi, pi, pi, pi, pi,
  pi, pi, pi, pi, pi, pi, pi, pi, pi, pi, pi, pi, pi, pi, pi,
  pu, pu, pu, pu, pu, pu, pu, pu
];

//Run this function when the button is clicked
$("#btnDraw").click(function() {

  var blueCnt = 0;
  var greenCnt = 0;
  var orangeCnt = 0;
  var pinkCnt = 0;
  var purpleCnt = 0;

  for (var x = 0; x < 60; x++) {

    var selection = drawBall();

    //		var divResult = document.getElementById("divResult");

    if (selection.name == "Blue") {
      blueCnt++;
    } else if (selection.name == "Green") {
      greenCnt++;
    } else if (selection.name == "Orange") {
      orangeCnt++;
    } else if (selection.name == "Pink") {
      pinkCnt++;
    } else if (selection.name == "Purple") {
      purpleCnt++;
    } else {
    	//Default or HOW DID YOU GET HERE?!
    }


    //adding a name and circle for each choice
    //    var newHTML = "<span style='color:"+selection.color+"'> "+selection.name+" </span>  <div class= 'circle' style='background-color:"+selection.color+"'></div>";

    //Adding a circle for each with no name
    var newHTML = "<div class= 'circle' style='background-color:" + selection.color + "'></div>";

    //Appending circle to html
    $("#divResult").append(newHTML);

  }
  //Hide button
  $("#btnDraw").hide();

  //Fade in graphic over 1000 milliseconds
  $("#divResult").fadeIn(1000);

  //Print Table and Question
  $("#divStats").append("<span class='tableTxt'> Blue: " + blueCnt + "</span><br>");
 ...