Monty Hall Simulation

MATLAB Production Server Demo

by Toshi Takeuchi

HTML

<script src="http://matlabtricks.com/highlighter/matlab-highlighter-1.55.min.js"></script>
<link rel="stylesheet" href="http://matlabtricks.com/highlighter/matlab-highlighter-1.55.css">
<script src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h2>Monty Hall Game Simulation - MATLAB Production Server Demo</h2>

<p><a href="http://blogs.mathworks.com/loren/2015/03/25/bayesian-brain-teaser/">The Month Hall Game</a> is loosely based on a game show, "Let's Make a Deal," where the host Monty Hall gives you a choice of three doors, and he tells you that there is a
  car behind one of them, and you get to keep it if you pick the right door. If you pick a wrong door, you will see a goat, and you get nothing. After you made your choice, Monty opens one of the two doors you didn't pick that reveals a goat. Then he
  asks, if you would like to stick with your original choice or switch your choice to the other unopened door. At that point the options have been reduced to two doors, and only one of them has the car. Let's try this here.

</p>
<p id="alert">Pick a door you think hides a car.</p>
<div>
  <a href="#" id="door1" class="door">Door 1</a>
  <a href="#" id="door2" class="door">Door 2</a>
  <a href="#" id="door3" class="door">Door 3</a>
</div>
<p>
  <button class="reveal">Reveal</button>
  <button class="reset">Reset</button>
</p>
<div>
  <table class="tbl">
    <tr>
      <th>Trial</th>
      <th>First Choince</th>
      <th>Final Choice</th>
      <th>Switched?</th>
      <th>Outcome</th>
      <th>Stay Win Rate</th>
      <th>Switch Win Rate</th>
      <th class="score">Your Win Rate</th>
    </tr>
    <tr>
      <td id="trial">1</td>
      <td id="first"></td>
      <td id="final"></td>
      <td id="switched"></td>
      <td id="outcome"></td>
      <td id="stay">0%</td>
      <td id="switch">0%</td>
      <td id="winrate">0%</td>
    </tr>
  </table>
  <p><button...

CSS

.door {
  background-color: #b35900;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  border: 1px solid #663300;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 100px 31px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #404040;
}

.door:hover {
  background-color: #cc6600;
}

.chosen {
  background-color: #e67300;
  border: solid 3px #333333;
}

.chosen:hover {
  background-color: #e67300;
}

.goat {
  color: #333333;
  background-color: #fff2e6;
}

.goat:hover {
  background-color: #fff2e6;
}

.car {
  background-color: #00b359;
}

.car:hover {
  background-color: #00b359;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #ccc;
}

td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #ccc;
  color: #333;
  background-color: #fff;
}

th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #ccc;
  color: #333;
  background-color: #f0f0f0;
}

.score, #winrate {
  font-weight: bold;
  font-size: larger;
}

#alert {
  padding: 20px;
  background-color: #ffffe6;
  border: solid 1px #e6e600;
  color: white;
  font-weight: bold;
  margin-bottom: 15px;
  color: #404040;
}

#caption {
  font-weight: bold;
}

.logo_container {
  margin-top: 5px;
  margin-bottom: 6px;
  float: left;
  width: 200px;
}

JavaScript

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

// This function runs when the page is loaded
$(document).ready(function() {
  sessionStorage.count = 0;                     // initialize counter
  sessionStorage.win = 0;                       // initialize accumulator
  sessionStorage.stayed = 0;   									// initialize array
  sessionStorage.switched = 0;                  // initialize array
  var arr = [['Trial','Stay','Switch','You']];  // initialize 2D array
  sessionStorage.arr = JSON.stringify(arr);			// store the array
  
  /* enable MATLAB Highligher that applies syntax highlighting 
     to MATLAB code on the page */
  highlightMATLABCode();
});

// Highlight the chosen door
$('.door').click(function() {
  $('#alert').text('You can switch the door or stay with your current choice, and click "Reveal" to see the outcome');
  
  // if no goat door revealed
  if (!$('.goat').exists()) {
    $(this).addClass("chosen");                // make the door chosen
    $('#first').text($(this).text());          // update the table
    $(this).text("Chosen");                    // update text to "Chosen"
    goatdoor();                                // reveal a goat door
    
    // if it is neither a chosen door nor a goat door
  } else if (!$(this).hasClass("chosen") && !$(this).hasClass("goat")) {
    var chosen_id = $('.chosen').attr("id");   // get the id of current choice
    chosen_id = chosen_id.substr(chosen_id.length - 1); // get the door number
    $('.chosen').text("Door " + chosen_id);    // restore the door name
    $('.chosen').removeClass("chosen");        // remove the class
    $(this).addClass("chosen");                // make the door chosen
    $('#final').text($(this).text());          // update the table
    $(this).text("Chosen");                    // update text to "Chosen"
    if ($('#first').text() == $('#final').text()) {  // stay
      $('#switched').text("No");             ...