JSFiddle - React, Tailwind, and code Playground

by tobint

HTML

<!doctype html>
<html>
    <head><title>Variable Change</title><meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
    <body>
        <div id="image21">&nbsp;</div>
        <div id="explain">
        The quest was to determine if variable change (as mentioend in the movie "<a href="http://www.imdb.com/title/tt0478087/">21</a>") actually made you more likley to win, or if it was just a play on statistics. This jsFiddle demo allows you to run through 100 scenarios where:
        <ol>
            <li>A random winner is selected from three options</li>
            <li>The first option is always selected by the contestant (this could be random selection and turns out the same)</li>
            <li>You optionally always select the "swap" (check the checkbox)</li>
        </ol>
        The results are clear. Taking the swap is more than just a matter of semantics -- it is a statistical way to increase your odds of winning.
    </div>
        
        <div id="options">
        <span id="options-label">Options</span>
        <form >
            <input type="checkbox" id="acceptVariableChange"/> Swap prizes when offered.<br/>
            <input type="checkbox" id="showDetails"/> Show detailed output.<br/>
            <input type="button" value="run" id="runner"/>
        </form>
        </div>
        
        <div id="result"></div>
        <table id="details">
            <tr>
                <th>Winner</th>
                <th>First Pick</th>
                <th>Final Pick Wins</th>
            </tr>
        </table>
        
    </body>
</html>

CSS

body {
    padding: 10px;
    font-family: verdana, arial, tahoma;
}
#image21{
    width: 120px;
    height: 400px;
    float: left;
    background-image: url(http://ia.media-imdb.com/images/M/MV5BMjAyNTU5OTcxOV5BMl5BanBnXkFtZTcwMDEyNjM2MQ@@._V1._SX357_SY500_.jpg);
    background-size: 100%;
background-repeat: no-repeat;
}
#explain {
    padding: 0px 10px 50px 30px;
    width: 300px;
    float: left;
}

#options {
    clear: both;
    padding: 10px;
    margin: 20px 10px 10px 10px;
    border: 1px solid #c0c0c0;
}
input[type=button], input[type=submit] {
    padding: 5px 20px 5px 20px;
}
#result {
    padding: 10px;
}
#details th {
    background-color: #dddddd;
    padding: 5px 20px 5px 20px; 
}
.tigerBlood {
    background-color: #00dd00;
}

#options-label {
    position: relative;
    top: -20px;
    background-color: #ffffff;
    padding: 0px 5px 0px 5px;
}

JavaScript

var win = 0,
    lose = 0,
    res = document.getElementById("result"),
    runner = document.getElementById("runner"),
    acceptVariableChange = document.getElementById("acceptVariableChange"),
    showDetails = document.getElementById("showDetails"),
    details = document.getElementById("details");

function createChoices() {
    return [0, 0, 0];
}

function setRandomWinner(arga) {
    var r = Math.floor(Math.random() * 3);
    arga[r] += 1;
    return r;
}

function setFirstPick(arga) { /* contestant always picks the first prize on first pick */
    arga[0] += 1;
    return arga[0] == 2;
}

function removeFirstLoser(arga) {
     /* always start at index 1 because index 0 is always picked 
       as the winner by the contestant. */
    for (var i = 1; i < arga.length; i++) {
        if (arga[i] == 0) {
            arga[i] -= 1;
        }
    }
}

function swapPicks(arga) {
    /* always start at index 1 because index 0 is always picked 
       as the winner by the contestant. */
    for (var i = 1; i < arga.length; i++) {
        if (arga[i] != -1) {
            arga[i] += 1;
        }
    }
    arga[0] -= 1;
}

function writeResult(arga, w, fi) {
    var pickedWinner = false;
    for (var i = 0; i < arga.length; i++) {
        if (arga[i] == 2) {
            win++;
            pickedWinner = true;
        }
    }
    if (!pickedWinner) {
        lose++;
    }
    
    if( showDetails.checked ) {
        var row = details.insertRow(-1);
        var c1 = row.insertCell(0);
        var c2 = row.insertCell(1);
        var c3 = row.insertCell(2);
        c1.innerHTML = w;
        c2.innerHTML = fi;
        c3.innerHTML = pickedWinner;
        if(pickedWinner) {
            row.className = "tigerBlood";
        }
    }
}

function resetWinLose() {
    win = 0;
    lose = 0;
    res.innerHTML = "";
    for(var i = details.rows.length - 1; i > 0; i--)
    {
        details.deleteRow(i);
    }
}


function writeFinalResults() {
    res.innerHTML = "<p>Win: " + win +...