Guessing Game

by AntĂłnio Almeida

HTML

<div class="bars"></div>

CSS

.bars {
    background-color: #CCE;
    height: 300px;
}
.bars > div {
    display: inline-block;
    background-color: #33C;
    width: 28px;
    padding: 2px;
    min-height: 1px;
    margin: 0 5px;
    vertical-align: bottom;
    color: #FFF;
    font-size: 13px;
    font-family: 'Trebuchet MS', Arial;
    text-align: center;
}

JavaScript

// --------------------
// This simulation tests the guessing game, by forcing values for K
// Based on the number of bars it will step from zero to 1, and graph the value on the chart
// If you opt to set progressionSimulation to false, it will only run the common guessing game without forcing a value
// Basically if a bar has the values; 74.8 / 0.5, it means that if you use 0.5 as K, your chances of guessing the number are ~75%

// --------------------
// VARS, 
// You are allowed to mess up this values:

var bars = 10;
var progressionSimulation = true;


// --------------------
// INIT
$( document ).ready(function() {
    $('.bars').css("width", (bars+1) * 42 + "px");
    
    for(var i=0; i<=bars ; i++) {
        var result = guessingGame( 100000, progressionSimulation ? i / bars : null );
        var barVal = Math.floor((i / bars) * 100) / 100;
		$(".bars").append("<div>"+Math.floor(result*1000)/10+"<br/><br/>"+barVal+"</div>")
            .children().eq(i)
            .css("height", (result * 300) + "px")
            .css("margin-top", 295-(result * 300) + "px");
    }
});

// --------------------
// GUESSING GAME FUNCTION
function guessingGame(testcases, point) {
	var correct = i = 0,
		r = Math.random;
	for (i=testcases;i;i--) {
		var a = r(), b = r(), k = point != null ? point : r();
		correct += (k < a && a > b) || (k > a && a < b);
	}
	return correct / testcases;
}