MontyHall demo, stupid code from my past. Open it with: https://gistpreview.github.io/?1bf86c579ae4b3b5320e976d8f6ec959

MontyHall.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>MontyHall Paradox</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            article {
                border: 1px solid black;
                padding: 5px 5px;     
                width: 260px;
            }

            #quiz {
                display: block;
                font-size: large;
                text-align: center;                
            }

            .doors {
                margin: 5px auto;                
                overflow: auto;      
                width: 250px;
            }

            .doors div {
                border: 1px solid black;
                background-color: yellow;
                width: 70px;
                height: 100px;
                float: left;

                margin: 0 5px;
            }

            .doors div:hover {
                background-color: gray;
            }

            .doors div.open {
                background-color: gray;
            }

            .doors div.lost {
                background-color: #F55;
            }

            .doors div.win {
                background-color: #5F5;
            }

            .doors div.selected {
                background-color: lightgray;
            }
        </style>
        <script type="text/javascript">
            var statuses = [
                "choose", "change", "win"
            ];

            var currentStatus = statuses[0];
            var selectedDoor = null;
            var doors = [false, false, false];
            var winNoChange = 0;
            var winWithChange = 0;
            var lostNoChange = 0;
            var lostWithChange = 0;

            function updateQuiz() {
                var q = document.getElementById("quiz");
                switch (currentStatus) {
                    case statuses[0]:
                        q.innerHTML = "Choose a door";
                        break;
                    case statuses[1]:
                        q.innerHTML = "Do you want to make the choise?";
                        break;
                    case statuses[2]:
                        q.innerHTML = "Click to start again.";
                        break;
                }
            }



            function init() {
                var d;
                for (var i = 1; i < 4; i++) {
                    d = document.getElementById("door" + i.toString());
                    d.addEventListener("click", door_click, false);
                }

                initDoors();
                updateQuiz();
            }

            function initDoors() {
                for (var i = 0; i < 3; i++)
                    doors[i] = false;
                var i = Math.floor(Math.random() * 3);
                doors[i] = true;
            }

            function openWrongDoor() {
                for (var i = 0; i < 3; i++) {
                    if (doors[i])
                        continue;
                    if (parseInt(selectedDoor.id.substring(4)) === i + 1)
                        continue;

                    document.getElementById("door" + (i + 1).toString()).className = "lost";
                    break;
                }
            }

            function door_click(e) {
                var elem = e.target;
                var id = parseInt(elem.id.substring(4));

                if (currentStatus == statuses[0]) {
                    currentStatus = statuses[1];

                    elem.className = "selected";
                    selectedDoor = elem;

                    openWrongDoor();
                } else if (currentStatus == statuses[1]) {
                    if (elem.className == "lost")
                        return;

                    currentStatus = statuses[2];

                    var win = doors[id - 1];

                    if (elem == selectedDoor) {
                        if (win)
                            winNoChange++;
                        else
                            lostNoChange++;
                    } else {
                        if (win)
                            winWithChange++;
                        else
                            lostWithChange++;
                    }

                    document.getElementById("res").textContent = "Change: (" +
                            winWithChange + " / " + lostWithChange + "), " +
                            "No Change: (" + winNoChange + " / " + lostNoChange + ")";

                    for (var i = 0; i < 3; i++)
                        document.getElementById("door" + (i + 1).toString()).className = (doors[i] ? "win" : "lost")
                } else if (currentStatus == statuses[2]) {
                    document.getElementById("door1").className = "";
                    document.getElementById("door2").className = "";
                    document.getElementById("door3").className = "";

                    currentStatus = statuses[0];
                    initDoors();
                }

                updateQuiz();
            }
        </script>
    </head>
    <body>
        <article>            
            <div id="quiz">
            </div>
            <div class="doors">
                <div id="door1"></div>
                <div id="door2"></div>
                <div id="door3"></div>                
            </div>
            <span>Reason (wins / lost):</span><br/>
            <span id="res"></span>
        </article>
        <script type="text/javascript">
            (function() {
                init();
            })();
        </script>
    </body>    
</html>