Edit in JSFiddle

JavaScript
HTML
CSS
Result
Resources

var Randomizer = (function () {
    function Randomizer(intervalMs, targetDom) {
        this._isRunning = false;
        this._intervalMs = intervalMs;
        this._targetDom = targetDom;
        this._countYes = 0;
        this._countNo = 0;
        this._count = 0;
        this._answer = '';
    }

    Randomizer.prototype.getIsRunning = function () {
        return this._isRunning;
    }

    Randomizer.prototype.start = function () {
        this._isRunning = true;
        this._interval = setInterval(function () {
            var answer = this._isYes ? 'yes' : 'no';
            this._targetDom.html("<p id='" + answer + "'>" + answer + " </p>");
            this._answer = answer;
            this._isYes = !this._isYes;
        }.bind(this), this._intervalMs)

    }

    Randomizer.prototype.counting = function () {
        if (this._answer === 'yes') {
            this._countYes++;
            this._count++;
        } else {
            this._countNo++;
            this._count++;
        }
    }

    Randomizer.prototype.exportCounting = function () {
        $("#countYes").html(this._countYes + "&nbsp;YES");
        $("#countNo").html(this._countNo + "&nbsp;NO");
        $("#times").html("in&nbsp;" + this._count + "&nbsp;Time(s)");

    }

    Randomizer.prototype.changeColorBox = function () {
        if (this._countYes == this._countNo) {
            $("#alert").attr("class", "alert alert-info");
        } else if (this._countYes > this._countNo) {
            $("#alert").attr("class", "alert alert-success");
        } else if (this._countYes < this._countNo) {
            $("#alert").attr("class", "alert alert-danger");
        }

    }

    Randomizer.prototype.addResult = function () {
        $("#result tr:last").after("<tr><td><p id='number'>" + this._count + "</p></td><td><p id='" + this._answer + "'>" + this._answer + "</p></td></tr>");

    }

    Randomizer.prototype.stop = function () {
        this._isRunning = false;
        clearInterval(this._interval);
    }


    Randomizer.prototype.clearCounting = function () {
        $("#alert").attr("class", "alert alert-info");
        this._countYes = 0;
        this._countNo = 0;
        this._count = 0;
        $("#countYes").empty();
        $("#countNo").empty();
        $("#times").empty();

    }

    Randomizer.prototype.clearTable = function () {
        $("tbody").empty();
        $("tbody").append("<tr></tr>");

    }


    Randomizer.prototype.constructor = Randomizer;

    return Randomizer;



})();

$(document).ready(function () {
    var randomizer = new Randomizer(100, $('#random'));
    randomizer.start();
    window.randomizer = randomizer;

});

$("#submit").click(function (e) {
    e.preventDefault();

    var randomizer = window.randomizer;
    if (randomizer.getIsRunning()) {
        randomizer.stop();
        randomizer.counting();
        randomizer.exportCounting();
        randomizer.changeColorBox();
        randomizer.addResult();
    } else {
        randomizer.start();
    }

});

$('#reset').click(function (e) {
    e.preventDefault();
    var randomizer = window.randomizer;
    randomizer.clearCounting();
    randomizer.clearTable();

});

<body>
    <center>
        <div class="form-group">
            <button class="btn btn-primary" type="submit" id="submit">Random</button>
            <button class="btn btn-danger" type="button" id="reset">Reset</button>
        </div>
        <div class="value">
             <h1 id="random"></h1>

        </div>
    </center>
    <div class="row">
        <div id="alert" class="alert alert-info">
            <label>summarize:</label>
            <p id="times"></p>
            <p id="countNo"></p>
            <p id="countYes"></p>
        </div>
    </div>
    <table class="table table-striped table-hover" id="result">
        <thead>
            <tr>
                <th>Time(s)</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
</body>

</html>

#yes {
    color: green;
    font-weight: bold;
}
#no {
    color: red;
    font-weight: bold;
}
h1 #yes {
    color: green;
    font-weight: bold;
    border-radius: 50%;
    border: 3px solid green;
    padding: 20px;
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
}
.value {
    display: table;
}
h1 #no {
    color: red;
    font-weight: bold;
    border-radius: 50%;
    border: 3px solid red;
    padding: 20px;
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
}
#random {
    text-align: center;
}
.row {
    margin: 50px;
}
#countYes, #countNo, #times {
    float: right;
    margin: 0 0 10px 10px;
}
}

External resources loaded into this fiddle:

bootstrap.min.css