Playing around with Vic's solution and created an educational display.
More bells and whistles can be added for correct choices.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Binary Lights</title>
</head>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?289517-Image-change
/*<![CDATA[*/
function Swap(img,s1,s2){
var ud=img.src.match(s1);
img.src=img.src.replace(ud?s1:s2,ud?s2:s1);
}
/*]]>*/
</script>
<body>
<h1>Binary Logic</h1>
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');"/>
<img src="http://www.w3schools.com/js/pic_bulboff.gif" onclick="Swap(this,'bulboff','bulbon');" />
<br>
<button onclick="resetLights()">Reset</button>
<button onclick="createRndNumber()">Create Number</button>
<button onclick="checkAnswer()">Check Answer</button>
<div id="debug" style="font-size:2em"></div>
<script type="text/javascript">
function createRndNumber() {
var maxN = 256;
document.getElementById('debug').innerHTML = Math.floor(Math.random()*maxN);
}
function checkAnswer() {
var num = '';
var sel = document.getElementsByTagName('img');
for (var i=0; i<sel.length; i++) {
if (sel[i].src.indexOf('bulbon') != -1) { num += '1'; } else { num += '0'; }
}
document.getElementById('debug').innerHTML += '<br>Your pick = '+num + ' is ' + parseInt(num,2);
}
function resetLights() {
var sel = document.getElementsByTagName('img');
for (var i=0; i<sel.length; i++) {
sel[i].src = "http://www.w3schools.com/js/pic_bulboff.gif";
}
document.getElementById('debug').innerHTML = '';
}
</script>
</body>
</html>