scintill/colorguess.html

## colorguess.html

<html>
<head>
<title>Color Guesser</title>

<script type="application/javascript">
var colors = ['maroon','red','orange','yellow','olive','purple','fuchsia','lime','green','navy','blue','aqua','teal','black','silver','gray'];
var bit = 1;
var total = 0;

function setPatchColor(i, color) {
    document.getElementById('patch'+i).style.backgroundColor = color;
}

function onLoad() {
    for (var i = 0; i < 16; i++) {
        setPatchColor(i, colors[i]);
    }
    document.getElementById('prompt').innerHTML = 'Pick one of these colors and remember it. Make sure you know if it\'s "light" or "dark."';
}

function resetPatches(color) {
    for (var i = 0; i < 16; i++) {
        setPatchColor(i, color ? color : 'white');
    }
}

function onBegin() {
    document.getElementById('theform').innerHTML = '<input type="button" value="Yes" onclick="onYes()" /><input type="button" value="No" onclick="onNo()" />';
    document.getElementById('prompt').innerHTML = 'Is your color one of these?';
    updateBits();
}

function updateBits() {
    resetPatches();
    var patches = [];
    for (var i = 0; i < 16; i++) {
        if (i & bit) {
            patches.push(colors[i]);
        }
    }
    shuffle(patches);
    for (var i = patches.length - 1; i >= 0; i--) {
        setPatchColor(i, patches[i]);
    }
}

function onYes() {
    total |= bit;
    checkFinished();
}

function onNo() {
    checkFinished();
}

function checkFinished() {
    bit <<= 1;
    if (bit == 1<<4) {
        document.getElementById('prompt').innerHTML = 'Your color is:';
        document.getElementById('theform').innerHTML = '';
        resetPatches(colors[total]);
    } else {
        updateBits();
    }
}

/**************************************
» Jonas Raoni Soares Silva
» http://www.joninhas.ath.cx
**************************************/
function shuffle(o){ //v1.0
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
}
</script>

<style type="text/css">
body {
margin: 0;
}
tr.patches td {
height: 20%;
width: 25%;
}
</style>

</head>

<body onload="onLoad()">

<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%">
<tr class="header">
<td style="text-align: center" colspan="4"><h1 id="prompt"></h1></td>
</tr>
<tr class="header">
<td style="text-align: center" colspan="4"><form id="theform"><input type="button" value="Begin" onclick="onBegin()"></form></td>
</tr>

<tr class="patches">
<td id="patch0"> </td>
<td id="patch1"> </td>
<td id="patch2"> </td>
<td id="patch3"> </td>
</tr>
<tr class="patches">
<td id="patch4"> </td>
<td id="patch5"> </td>
<td id="patch6"> </td>
<td id="patch7"> </td>
</tr>
<tr class="patches">
<td id="patch8"> </td>
<td id="patch9"> </td>
<td id="patch10"> </td>
<td id="patch11"> </td>
</tr>
<tr class="patches">
<td id="patch12"> </td>
<td id="patch13"> </td>
<td id="patch14"> </td>
<td id="patch15"> </td>
</tr>
</table>

</body>
</html>

	<html>
	<head>
	<title>Color Guesser</title>

	<script type="application/javascript">
	var colors = ['maroon','red','orange','yellow','olive','purple','fuchsia','lime','green','navy','blue','aqua','teal','black','silver','gray'];
	var bit = 1;
	var total = 0;

	function setPatchColor(i, color) {
	document.getElementById('patch'+i).style.backgroundColor = color;
	}

	function onLoad() {
	for (var i = 0; i < 16; i++) {
	setPatchColor(i, colors[i]);
	}
	document.getElementById('prompt').innerHTML = 'Pick one of these colors and remember it. Make sure you know if it\'s "light" or "dark."';
	}

	function resetPatches(color) {
	for (var i = 0; i < 16; i++) {
	setPatchColor(i, color ? color : 'white');
	}
	}

	function onBegin() {
	document.getElementById('theform').innerHTML = '<input type="button" value="Yes" onclick="onYes()" /><input type="button" value="No" onclick="onNo()" />';
	document.getElementById('prompt').innerHTML = 'Is your color one of these?';
	updateBits();
	}

	function updateBits() {
	resetPatches();
	var patches = [];
	for (var i = 0; i < 16; i++) {
	if (i & bit) {
	patches.push(colors[i]);
	}
	}
	shuffle(patches);
	for (var i = patches.length - 1; i >= 0; i--) {
	setPatchColor(i, patches[i]);
	}
	}

	function onYes() {
	total \|= bit;
	checkFinished();
	}

	function onNo() {
	checkFinished();
	}

	function checkFinished() {
	bit <<= 1;
	if (bit == 1<<4) {
	document.getElementById('prompt').innerHTML = 'Your color is:';
	document.getElementById('theform').innerHTML = '';
	resetPatches(colors[total]);
	} else {
	updateBits();
	}
	}

	/**************************************
	» Jonas Raoni Soares Silva
	» http://www.joninhas.ath.cx
	**************************************/
	function shuffle(o){ //v1.0
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
	}
	</script>

	<style type="text/css">
	body {
	margin: 0;
	}
	tr.patches td {
	height: 20%;
	width: 25%;
	}
	</style>

	</head>

	<body onload="onLoad()">

	<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%">
	<tr class="header">
	<td style="text-align: center" colspan="4"><h1 id="prompt"></h1></td>
	</tr>
	<tr class="header">
	<td style="text-align: center" colspan="4"><form id="theform"><input type="button" value="Begin" onclick="onBegin()"></form></td>
	</tr>

	<tr class="patches">
	<td id="patch0"> </td>
	<td id="patch1"> </td>
	<td id="patch2"> </td>
	<td id="patch3"> </td>
	</tr>
	<tr class="patches">
	<td id="patch4"> </td>
	<td id="patch5"> </td>
	<td id="patch6"> </td>
	<td id="patch7"> </td>
	</tr>
	<tr class="patches">
	<td id="patch8"> </td>
	<td id="patch9"> </td>
	<td id="patch10"> </td>
	<td id="patch11"> </td>
	</tr>
	<tr class="patches">
	<td id="patch12"> </td>
	<td id="patch13"> </td>
	<td id="patch14"> </td>
	<td id="patch15"> </td>
	</tr>
	</table>

	</body>
	</html>