JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="gameDisplay">
<div class="gameTitle">The Three Doors Puzzle</div>
<div class="gameText">
<p>A gameshow host offers you a choice of three doors.  One door has a car behind it.  The other two have goats behind them.  
You pick a door.  The gameshow host (knowing where the car is located) then opens one of the other doors and shows you a goat 
behind it and offers you a choice.  You can keep the door you originally picked or you can switch to the other door that hasn't
been shown yet.  Should you switch?  Should you stay?  Does it matter?</p>
<p>Against most people's intuition, you should switch.  If you stay with your original pick, you have a 1/3 chance of winning the car.  
If you switch, you have a 2/3 chance of winning the car.</p>
<p>To see an experimental result using random assignment of the car and a random selection of which door is the initial choice, 
enter a number of iterations (1000 is a good number) and press the Start button.</p>
</div>
<div class="dataTable">
<div class="label">Total Runs:</div><div id="totalRuns" class="result">0</div><div id="totalRunsP" class="percent">0%</div><div class="spacer"></div>
<div class="label">Win Car When You Don't Switch:</div><div id="correctGuesses" class="result">0</div><div id="correctGuessesP" class="percent">0%</div><div class="spacer"></div>
<div class="label">Win Car When You Do Switch:</div><div id="correctSwitches" class="result">0</div><div id="correctSwitchesP" class="percent">0%</div><div class="spacer"></div>
<div class="label" style="margin-top: 20px;">Car Found in Door 1:</div><div id="door1" class="result" style="margin-top: 20px;">0</div><div class="spacer"></div>
<div class="label">Car Found in Door 2:</div><div id="door2" class="result">0</div><div class="spacer"></div>
<div class="label">Car Found in Door 3:</div><div id="door3" class="result">0</div><div class="spacer"></div>

<div style="margin-top: 50px;">
<div class="label">Number of Iterations:</div><input id="numRuns"...

CSS

.label {text-align: right; font-weight: bold; float: left; margin-right: 10px; width: 300px;}
.result{float:left; margin-right: 10px; width: 75px;}
.gameTitle {font-size: 200%; margin-bottom: 20px; text-align: center;}
.gameText {font-size: 120%;}
.dataTable {margin-top: 40px; font-size: 120%;}
#gameDisplay {width: 600px; margin: 0 auto;}
.spacer {clear: both;}

body {
    background: #000 url(http://cdn.smugmug.com/photos/560664081_PKExy-O.jpg) repeat-x;
    color: #FFF;
}

JavaScript

var YD = {};
YD.get = function (id) {
    return document.getElementById(id)
};

function RunGame() {
    // create doors array, fill it with goats initially
    var doors = ["goat", "goat", "goat"];
    var carIndex, guessIndex, guessSuccess, showGoatIndex, offerIndex, switchSuccess;
    carIndex = Math.floor(Math.random() * 3); // generate random number from 0 to 2 for car location
    doors[carIndex] = "car"; // put the car into that slot in the doors
    guessIndex = Math.floor(Math.random() * 3); // generate random number from 0 to 2 for your guess
    guessSuccess = (doors[guessIndex] === "car"); // record if our first guess was right
    // of the doors we didn't choose, "show" a goat and then switch to the other one
    // loop through doors looking for a goat that isn't our guess
    for (var i in doors) {
        if (i != guessIndex && doors[i] === "goat") {
            showGoatIndex = i;
            break;
        }
    }
    // now we need to find the "other" door (not the goat we're going to show and not our current guess)
    // this is a dumb algorithm, but simple
    for (var i in doors) {
        if (i != guessIndex && i != showGoatIndex) {
            offerIndex = i;
            break;
        }
    }
    switchSuccess = (doors[offerIndex] === "car");
    return ({
        guessSuccess: guessSuccess,
        switchSuccess: switchSuccess,
        doorWithCar: carIndex
    });
}

function RunGameMulti(numTimes) {
    var totalRuns = 0;
    var guessSuccesses = 0;
    var switchSuccesses = 0;
    var doors = [0, 0, 0];

    function RunLocal() {
        var result = RunGame();
        ++totalRuns;
        if (result.guessSuccess) {
            ++guessSuccesses;
        }
        if (result.switchSuccess) {
            ++switchSuccesses;
        }++doors[result.doorWithCar];
        YD.get("totalRuns").innerHTML = totalRuns;
        YD.get("correctGuesses").innerHTML = guessSuccesses;
        YD.get("correctSwitches").innerHTML = switchSuccesses;
  ...