Killahb101
asked on
Help with Javascript code
I'm trying to write a code for a hinjie puzzle for school but can't get it to work. Don't know what's wrong. Help Please!
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Daily Hanjie Puzzle</title>
<link href="jpf.css" rel="stylesheet" type="text/css" />
<link href="stable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload = setPuzzle;
var allCells = new array();
function setPuzzle() {
var puzzleTable = document.getElementByID("puzzleCells");
allCells = document.getElementByTagName("td");
for (var i =0; i < allCells.length; i++) {
document.allCells[i].style.backgroundcolor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor() {
this.style.backgroundColor = (this.style.backgroundColor=="black") ?"white":"black";
}
function showSolution() {
for (var i = 0; i< allCells.length; i ++) {
if (allCells[i].className == "dark") {
allCells[i].style.backgroundColor = "black";
}else{
allCells[i].style.backgroundColor = "white";
}
checkCount = "0";
}
}
function hideSolution() {
for (var i = 0; i< allCells.length; i ++) {
allCells[i].style.backgroundColor= "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i ++) {
if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "black") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount ++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i ++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount = " ";
}
}
</script>
</head>
<body>
<form id="hanjieForm" name="hanjieForm" action="">
<div id="page">
<div id="header">
<img src="jpf.jpg" alt="The Japanese Puzzle Factory" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Puzzles</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Tips and Hints</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<ul id="column1">
<li><a href="#">Akari</a></li>
<li><a href="#">Divide by Box</a></li>
<li><a href="#">Fillomino</a></li>
<li><a href="#">Hanjie</a></li>
<li><a href="#">Hashiwokakero</a></li>
<li><a href="#">Heyawake</a></li>
<li><a href="#">Hitori</a></li>
<li><a href="#">Kakuro</a></li>
<li><a href="#">Katagaku</a></li>
<li><a href="#">Masugo</a></li>
<li><a href="#">Masyu</a></li>
<li><a href="#">Oekaki Logic</a></li>
<li><a href="#">Shikaku</a></li>
<li><a href="#">Sudoku</a></li>
<li><a href="#">Suhai</a></li>
<li><a href="#">Super Sudoku</a></li>
<li><a href="#">Tenketsu</a></li>
<li><a href="#">Tentai Show</a></li>
<li><a href="#">Wordoku</a></li>
<li><a href="#">Yajilin</a></li>
</ul>
<div id="column2">
<table class="hanjie">
<caption><strong>Hint: </strong> Panda</caption>
<colgroup>
<col class="firstCol" span="1" />
<col class="mainTable" span="20" />
</colgroup>
<thead>
<tr>
<td class="firstCol"></td>
<td>8<br />5</td><td>9<br />2<br />5</td><td>10<br />1</td><td>9<br />1</td>
<td>8<br />5<br />2</td><td>6<br />6<br />1</td><td>5<br />7<br />1</td><td>1<br />8<br />1</td>
<td>1<br />3<br />3<br />1</td><td>1<br />2<br />3<br />1<br />1</td>
<td>1<br />3<br />3<br />2<br />1<br />1</td>
<td>1<br />2<br />2<br />6<br />2</td>
<td>1<br />4<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />1</td>
<td>1<br />1<br />1<br />1</td><td>1<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />3<br />1<br />1</td>
<td>3<br />3<br />1<br />7<br />1</td>
<td>5<br />2<br />1<br />4<br />1<br />1</td>
<td>7<br />7<br />1<br />1</td>
</tr>
</thead>
<tr>
<td class="firstCol">6</td>
<td colspan="20" rowspan="25">
<table id="puzzleCells">
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red">
</td><td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td class="dark"></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td></td><td></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td>
<td class="dark"></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="firstCol">7 1</td>
</tr>
<tr>
<td class="firstCol">7 5 2</td>
</tr>
<tr>
<td class="firstCol">8 2 3</td>
</tr>
<tr>
<td class="firstCol">7 1 3</td>
</tr>
<tr>
<td class="firstCol">7 4</td>
</tr>
<tr>
<td class="firstCol">5 2</td>
</tr>
<tr>
<td class="firstCol">5 1</td>
</tr>
<tr>
<td class="firstCol">3 5 3</td>
</tr>
<tr>
<td class="firstCol">1 6 4</td>
</tr>
<tr>
<td class="firstCol">1 4 1 1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 3</td>
</tr>
<tr>
<td class="firstCol">1 7 2 1</td>
</tr>
<tr>
<td class="firstCol">1 7 2 5</td>
</tr>
<tr>
<td class="firstCol">1 6 2 5</td>
</tr>
<tr>
<td class="firstCol">1 2 1 3</td>
</tr>
<tr>
<td class="firstCol">1 2 2</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 9</td>
</tr>
<tr>
<td class="firstCol">1</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">2 1 2</td>
</tr>
<tr>
<td class="firstCol">13</td>
</tr>
</table>
<p>
<input type="button" id="check" value="Check Solution" />
<input type="button" id="uncheck" value="Hide Checked Solution" /><br />
<label for="checkCount">Cells remaining</label>
<input type="text" id="checkCount" />
</p>
</div>
<div id="column3">
<h3>To Play</h3>
<p>
<strong>Hanjie</strong> is a Japanese logic puzzle played on a blank grid
of varying sizes. At the top of each column and to the right of each row are
sets of numbers that indicate how many cells in that column or row must be colored
in, working from the top of the column or from the left of the row.
</p>
<p>For example a column or row entry of "3 8 1" indicates that there is a block
of three consecutive darkened cells followed at some point by eight filled-in
cells and ending finally with one filled-in cell. The gap between consecutive
groups of filled-in cells has to be determined by clues provided in other
rows and columns in the grid.</p>
<p>A completed grid shows a pixelated image. A hint describing the image
is usually provided with the puzzle. For strategy hints, view the
<a href="#">Hanjie Strategy</a> page.</p>
<p>To play Hanjie online, click the cells in the provided grid to toggle the
cell color between black and white. To check your solution, click the
<strong>Check Solution</strong> button. The page will highlight
incorrectly-marked cells in red and display the number of cells that
still need to be marked.</p>
<p>
<input type="button" id="solution" value="Show Solution" />
<input type="button" id="hide" value="Reset Grid" />
</p>
</div>
</div>
</form>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
sjklein42
For starters, on line 18, "array" needs to be "Array" - case sensitive
actually, line 18 is
var puzzleTable = document.getElementByID("p
which also need to be case-sensitive,
var puzzleTable = document.getElementById("p
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
var puzzleTable = document.getElementByID("p
which also need to be case-sensitive,
var puzzleTable = document.getElementById("p
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
And two lines later, getElementByID needs to be getElementById
getElementByTagName should be getElementsByTagName
Do you want me to keep going?
Do you want me to keep going?
ASKER
Thanks for the help I corrected all of my typos and it's working but still have some problems. My checkSolution function and uncheckSolution function aren't working. can you take a look at those two function and see if something is wrong with them. I,ll redo the corrected code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Hanjie Puzzle
Author:
Date: February 15, 2011
Filename: hanjie.htm
Supporting files: blackbar.gif, jpf.css, jpf.jpg, puzzle.js
-->
<title>Daily Hanjie Puzzle</title>
<link href="jpf.css" rel="stylesheet" type="text/css" />
<link href="stable.css" rel="stylesheet" type="text/css" />
<script src="puzzle.js" type="text/javascript"></script>
</head>
<body>
<form id="hanjieForm" name="hanjieForm" action="">
<div id="page">
<div id="header">
<img src="jpf.jpg" alt="The Japanese Puzzle Factory" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Puzzles</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Tips and Hints</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<ul id="column1">
<li><a href="#">Akari</a></li>
<li><a href="#">Divide by Box</a></li>
<li><a href="#">Fillomino</a></li>
<li><a href="#">Hanjie</a></li>
<li><a href="#">Hashiwokakero</a></li>
<li><a href="#">Heyawake</a></li>
<li><a href="#">Hitori</a></li>
<li><a href="#">Kakuro</a></li>
<li><a href="#">Katagaku</a></li>
<li><a href="#">Masugo</a></li>
<li><a href="#">Masyu</a></li>
<li><a href="#">Oekaki Logic</a></li>
<li><a href="#">Shikaku</a></li>
<li><a href="#">Sudoku</a></li>
<li><a href="#">Suhai</a></li>
<li><a href="#">Super Sudoku</a></li>
<li><a href="#">Tenketsu</a></li>
<li><a href="#">Tentai Show</a></li>
<li><a href="#">Wordoku</a></li>
<li><a href="#">Yajilin</a></li>
</ul>
<div id="column2">
<table class="hanjie">
<caption><strong>Hint: </strong> Panda</caption>
<colgroup>
<col class="firstCol" span="1" />
<col class="mainTable" span="20" />
</colgroup>
<thead>
<tr>
<td class="firstCol"></td>
<td>8<br />5</td><td>9<br />2<br />5</td><td>10<br />1</td><td>9<br />1</td>
<td>8<br />5<br />2</td><td>6<br />6<br />1</td><td>5<br />7<br />1</td><td>1<br />8<br />1</td>
<td>1<br />3<br />3<br />1</td><td>1<br />2<br />3<br />1<br />1</td>
<td>1<br />3<br />3<br />2<br />1<br />1</td>
<td>1<br />2<br />2<br />6<br />2</td>
<td>1<br />4<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />1</td>
<td>1<br />1<br />1<br />1</td><td>1<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />3<br />1<br />1</td>
<td>3<br />3<br />1<br />7<br />1</td>
<td>5<br />2<br />1<br />4<br />1<br />1</td>
<td>7<br />7<br />1<br />1</td>
</tr>
</thead>
<tr>
<td class="firstCol">6</td>
<td colspan="20" rowspan="25">
<table id="puzzleCells">
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red">
</td><td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td class="dark"></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td></td><td></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td>
<td class="dark"></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="firstCol">7 1</td>
</tr>
<tr>
<td class="firstCol">7 5 2</td>
</tr>
<tr>
<td class="firstCol">8 2 3</td>
</tr>
<tr>
<td class="firstCol">7 1 3</td>
</tr>
<tr>
<td class="firstCol">7 4</td>
</tr>
<tr>
<td class="firstCol">5 2</td>
</tr>
<tr>
<td class="firstCol">5 1</td>
</tr>
<tr>
<td class="firstCol">3 5 3</td>
</tr>
<tr>
<td class="firstCol">1 6 4</td>
</tr>
<tr>
<td class="firstCol">1 4 1 1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 3</td>
</tr>
<tr>
<td class="firstCol">1 7 2 1</td>
</tr>
<tr>
<td class="firstCol">1 7 2 5</td>
</tr>
<tr>
<td class="firstCol">1 6 2 5</td>
</tr>
<tr>
<td class="firstCol">1 2 1 3</td>
</tr>
<tr>
<td class="firstCol">1 2 2</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 9</td>
</tr>
<tr>
<td class="firstCol">1</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">2 1 2</td>
</tr>
<tr>
<td class="firstCol">13</td>
</tr>
</table>
<p>
<input type="button" id="check" value="Check Solution" />
<input type="button" id="uncheck" value="Hide Checked Solution" /><br />
<label for="checkCount">Cells remaining</label>
<input type="text" id="checkCount" />
</p>
</div>
<div id="column3">
<h3>To Play</h3>
<p>
<strong>Hanjie</strong> is a Japanese logic puzzle played on a blank grid
of varying sizes. At the top of each column and to the right of each row are
sets of numbers that indicate how many cells in that column or row must be colored
in, working from the top of the column or from the left of the row.
</p>
<p>For example a column or row entry of "3 8 1" indicates that there is a block
of three consecutive darkened cells followed at some point by eight filled-in
cells and ending finally with one filled-in cell. The gap between consecutive
groups of filled-in cells has to be determined by clues provided in other
rows and columns in the grid.</p>
<p>A completed grid shows a pixelated image. A hint describing the image
is usually provided with the puzzle. For strategy hints, view the
<a href="#">Hanjie Strategy</a> page.</p>
<p>To play Hanjie online, click the cells in the provided grid to toggle the
cell color between black and white. To check your solution, click the
<strong>Check Solution</strong> button. The page will highlight
incorrectly-marked cells in red and display the number of cells that
still need to be marked.</p>
<p>
<input type="button" id="solution" value="Show Solution" />
<input type="button" id="hide" value="Reset Grid" />
</p>
</div>
</div>
</form>
</body>
</html>
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Author:
Date: February 15, 2011
Filename: puzzle.js
-------------------------------------------------------------
Function List:
setPuzzle()
Initializes event handlers for the cells within the Hanjie
table.
changeColor()
Toggles the background color of the active cell between
black and white
showSolution()
Shows the solution of the Hanjie puzzle
hideSolution()
Hides the solution of the Hanjie puzzle
checkSolution()
Checks the user's solution of the Hanjie puzzle
uncheckSolution()
Restores the user's solution of the Hanjie puzzle
to its original state
-------------------------------------------------------------
Global Variable List:
allCells
An object variable referencing all of the clickable cells
within the Hanjie puzzle
-------------------------------------------------------------
*/
window.onload = setPuzzle;
var allCells = new Array();
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = document.getElementsByTagName("td");
for (var i =0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor() {
this.style.backgroundColor = (this.style.backgroundColor=="black") ?"white":"black";
}
function showSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].className == "dark") {
allCells[i].style.backgroundColor = "black";
}else{
allCells[i].style.backgroundColor = "white";
}
checkCount = "0";
}
}
function hideSolution() {
for (var i = 0; i< allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount.value = " ";
}
}ASKER
This is what the two functions suppose to do but aren't doing anything when I clicked the buttons.
To play Hanjie online, click the cells in the provided grid to toggle the cell color between black and white. To check your solution, click the Check Solution button. The page will highlight incorrectly-marked cells in red and display the number of cells that still need to be marked. The uncheckSolution function suppose to undo the chekSolution function
To play Hanjie online, click the cells in the provided grid to toggle the cell color between black and white. To check your solution, click the Check Solution button. The page will highlight incorrectly-marked cells in red and display the number of cells that still need to be marked. The uncheckSolution function suppose to undo the chekSolution function
Everything after your </html> tag is being ignored.
You need a <script> block.
This should get you a little further. At least the functions are being called.
You need a <script> block.
This should get you a little further. At least the functions are being called.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Hanjie Puzzle
Author:
Date: February 15, 2011
Filename: hanjie.htm
Supporting files: blackbar.gif, jpf.css, jpf.jpg, puzzle.js
-->
<title>Daily Hanjie Puzzle</title>
<link href="jpf.css" rel="stylesheet" type="text/css" />
<link href="stable.css" rel="stylesheet" type="text/css" />
<script src="puzzle.js" type="text/javascript"></script>
</head>
<body>
<form id="hanjieForm" name="hanjieForm" action="">
<div id="page">
<div id="header">
<img src="jpf.jpg" alt="The Japanese Puzzle Factory" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Puzzles</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Tips and Hints</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<ul id="column1">
<li><a href="#">Akari</a></li>
<li><a href="#">Divide by Box</a></li>
<li><a href="#">Fillomino</a></li>
<li><a href="#">Hanjie</a></li>
<li><a href="#">Hashiwokakero</a></li>
<li><a href="#">Heyawake</a></li>
<li><a href="#">Hitori</a></li>
<li><a href="#">Kakuro</a></li>
<li><a href="#">Katagaku</a></li>
<li><a href="#">Masugo</a></li>
<li><a href="#">Masyu</a></li>
<li><a href="#">Oekaki Logic</a></li>
<li><a href="#">Shikaku</a></li>
<li><a href="#">Sudoku</a></li>
<li><a href="#">Suhai</a></li>
<li><a href="#">Super Sudoku</a></li>
<li><a href="#">Tenketsu</a></li>
<li><a href="#">Tentai Show</a></li>
<li><a href="#">Wordoku</a></li>
<li><a href="#">Yajilin</a></li>
</ul>
<div id="column2">
<table class="hanjie">
<caption><strong>Hint: </strong> Panda</caption>
<colgroup>
<col class="firstCol" span="1" />
<col class="mainTable" span="20" />
</colgroup>
<thead>
<tr>
<td class="firstCol"></td>
<td>8<br />5</td><td>9<br />2<br />5</td><td>10<br />1</td><td>9<br />1</td>
<td>8<br />5<br />2</td><td>6<br />6<br />1</td><td>5<br />7<br />1</td><td>1<br />8<br />1</td>
<td>1<br />3<br />3<br />1</td><td>1<br />2<br />3<br />1<br />1</td>
<td>1<br />3<br />3<br />2<br />1<br />1</td>
<td>1<br />2<br />2<br />6<br />2</td>
<td>1<br />4<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />1</td>
<td>1<br />1<br />1<br />1</td><td>1<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />3<br />1<br />1</td>
<td>3<br />3<br />1<br />7<br />1</td>
<td>5<br />2<br />1<br />4<br />1<br />1</td>
<td>7<br />7<br />1<br />1</td>
</tr>
</thead>
<tr>
<td class="firstCol">6</td>
<td colspan="20" rowspan="25">
<table id="puzzleCells">
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red">
</td><td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td class="dark"></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td></td><td></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td>
<td class="dark"></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="firstCol">7 1</td>
</tr>
<tr>
<td class="firstCol">7 5 2</td>
</tr>
<tr>
<td class="firstCol">8 2 3</td>
</tr>
<tr>
<td class="firstCol">7 1 3</td>
</tr>
<tr>
<td class="firstCol">7 4</td>
</tr>
<tr>
<td class="firstCol">5 2</td>
</tr>
<tr>
<td class="firstCol">5 1</td>
</tr>
<tr>
<td class="firstCol">3 5 3</td>
</tr>
<tr>
<td class="firstCol">1 6 4</td>
</tr>
<tr>
<td class="firstCol">1 4 1 1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 3</td>
</tr>
<tr>
<td class="firstCol">1 7 2 1</td>
</tr>
<tr>
<td class="firstCol">1 7 2 5</td>
</tr>
<tr>
<td class="firstCol">1 6 2 5</td>
</tr>
<tr>
<td class="firstCol">1 2 1 3</td>
</tr>
<tr>
<td class="firstCol">1 2 2</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 9</td>
</tr>
<tr>
<td class="firstCol">1</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">2 1 2</td>
</tr>
<tr>
<td class="firstCol">13</td>
</tr>
</table>
<p>
<input type="button" id="check" value="Check Solution" />
<input type="button" id="uncheck" value="Hide Checked Solution" /><br />
<label for="checkCount">Cells remaining</label>
<input type="text" id="checkCount" />
</p>
</div>
<div id="column3">
<h3>To Play</h3>
<p>
<strong>Hanjie</strong> is a Japanese logic puzzle played on a blank grid
of varying sizes. At the top of each column and to the right of each row are
sets of numbers that indicate how many cells in that column or row must be colored
in, working from the top of the column or from the left of the row.
</p>
<p>For example a column or row entry of "3 8 1" indicates that there is a block
of three consecutive darkened cells followed at some point by eight filled-in
cells and ending finally with one filled-in cell. The gap between consecutive
groups of filled-in cells has to be determined by clues provided in other
rows and columns in the grid.</p>
<p>A completed grid shows a pixelated image. A hint describing the image
is usually provided with the puzzle. For strategy hints, view the
<a href="#">Hanjie Strategy</a> page.</p>
<p>To play Hanjie online, click the cells in the provided grid to toggle the
cell color between black and white. To check your solution, click the
<strong>Check Solution</strong> button. The page will highlight
incorrectly-marked cells in red and display the number of cells that
still need to be marked.</p>
<p>
<input type="button" id="solution" value="Show Solution" />
<input type="button" id="hide" value="Reset Grid" />
</p>
</div>
</div>
</form>
<script>
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Author:
Date: February 15, 2011
Filename: puzzle.js
-------------------------------------------------------------
Function List:
setPuzzle()
Initializes event handlers for the cells within the Hanjie
table.
changeColor()
Toggles the background color of the active cell between
black and white
showSolution()
Shows the solution of the Hanjie puzzle
hideSolution()
Hides the solution of the Hanjie puzzle
checkSolution()
Checks the user's solution of the Hanjie puzzle
uncheckSolution()
Restores the user's solution of the Hanjie puzzle
to its original state
-------------------------------------------------------------
Global Variable List:
allCells
An object variable referencing all of the clickable cells
within the Hanjie puzzle
-------------------------------------------------------------
*/
window.onload = setPuzzle;
var allCells = new Array();
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = document.getElementsByTagName("td");
for (var i =0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onClick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor() {
this.style.backgroundColor = (this.style.backgroundColor=="black") ?"white":"black";
}
function showSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].className == "dark") {
allCells[i].style.backgroundColor = "black";
}else{
allCells[i].style.backgroundColor = "white";
}
checkCount = "0";
}
}
function hideSolution() {
for (var i = 0; i< allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount.value = " ";
}
}
</script>
</body>
</html>
Fixed a typo (my fault):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Hanjie Puzzle
Author:
Date: February 15, 2011
Filename: hanjie.htm
Supporting files: blackbar.gif, jpf.css, jpf.jpg, puzzle.js
-->
<title>Daily Hanjie Puzzle</title>
<link href="jpf.css" rel="stylesheet" type="text/css" />
<link href="stable.css" rel="stylesheet" type="text/css" />
<script src="puzzle.js" type="text/javascript"></script>
</head>
<body>
<form id="hanjieForm" name="hanjieForm" action="">
<div id="page">
<div id="header">
<img src="jpf.jpg" alt="The Japanese Puzzle Factory" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Puzzles</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Tips and Hints</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<ul id="column1">
<li><a href="#">Akari</a></li>
<li><a href="#">Divide by Box</a></li>
<li><a href="#">Fillomino</a></li>
<li><a href="#">Hanjie</a></li>
<li><a href="#">Hashiwokakero</a></li>
<li><a href="#">Heyawake</a></li>
<li><a href="#">Hitori</a></li>
<li><a href="#">Kakuro</a></li>
<li><a href="#">Katagaku</a></li>
<li><a href="#">Masugo</a></li>
<li><a href="#">Masyu</a></li>
<li><a href="#">Oekaki Logic</a></li>
<li><a href="#">Shikaku</a></li>
<li><a href="#">Sudoku</a></li>
<li><a href="#">Suhai</a></li>
<li><a href="#">Super Sudoku</a></li>
<li><a href="#">Tenketsu</a></li>
<li><a href="#">Tentai Show</a></li>
<li><a href="#">Wordoku</a></li>
<li><a href="#">Yajilin</a></li>
</ul>
<div id="column2">
<table class="hanjie">
<caption><strong>Hint: </strong> Panda</caption>
<colgroup>
<col class="firstCol" span="1" />
<col class="mainTable" span="20" />
</colgroup>
<thead>
<tr>
<td class="firstCol"></td>
<td>8<br />5</td><td>9<br />2<br />5</td><td>10<br />1</td><td>9<br />1</td>
<td>8<br />5<br />2</td><td>6<br />6<br />1</td><td>5<br />7<br />1</td><td>1<br />8<br />1</td>
<td>1<br />3<br />3<br />1</td><td>1<br />2<br />3<br />1<br />1</td>
<td>1<br />3<br />3<br />2<br />1<br />1</td>
<td>1<br />2<br />2<br />6<br />2</td>
<td>1<br />4<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />1</td>
<td>1<br />1<br />1<br />1</td><td>1<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />3<br />1<br />1</td>
<td>3<br />3<br />1<br />7<br />1</td>
<td>5<br />2<br />1<br />4<br />1<br />1</td>
<td>7<br />7<br />1<br />1</td>
</tr>
</thead>
<tr>
<td class="firstCol">6</td>
<td colspan="20" rowspan="25">
<table id="puzzleCells">
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red">
</td><td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td class="dark"></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td></td><td></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td>
<td class="dark"></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="firstCol">7 1</td>
</tr>
<tr>
<td class="firstCol">7 5 2</td>
</tr>
<tr>
<td class="firstCol">8 2 3</td>
</tr>
<tr>
<td class="firstCol">7 1 3</td>
</tr>
<tr>
<td class="firstCol">7 4</td>
</tr>
<tr>
<td class="firstCol">5 2</td>
</tr>
<tr>
<td class="firstCol">5 1</td>
</tr>
<tr>
<td class="firstCol">3 5 3</td>
</tr>
<tr>
<td class="firstCol">1 6 4</td>
</tr>
<tr>
<td class="firstCol">1 4 1 1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 3</td>
</tr>
<tr>
<td class="firstCol">1 7 2 1</td>
</tr>
<tr>
<td class="firstCol">1 7 2 5</td>
</tr>
<tr>
<td class="firstCol">1 6 2 5</td>
</tr>
<tr>
<td class="firstCol">1 2 1 3</td>
</tr>
<tr>
<td class="firstCol">1 2 2</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 9</td>
</tr>
<tr>
<td class="firstCol">1</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">2 1 2</td>
</tr>
<tr>
<td class="firstCol">13</td>
</tr>
</table>
<p>
<input type="button" id="check" value="Check Solution" />
<input type="button" id="uncheck" value="Hide Checked Solution" /><br />
<label for="checkCount">Cells remaining</label>
<input type="text" id="checkCount" />
</p>
</div>
<div id="column3">
<h3>To Play</h3>
<p>
<strong>Hanjie</strong> is a Japanese logic puzzle played on a blank grid
of varying sizes. At the top of each column and to the right of each row are
sets of numbers that indicate how many cells in that column or row must be colored
in, working from the top of the column or from the left of the row.
</p>
<p>For example a column or row entry of "3 8 1" indicates that there is a block
of three consecutive darkened cells followed at some point by eight filled-in
cells and ending finally with one filled-in cell. The gap between consecutive
groups of filled-in cells has to be determined by clues provided in other
rows and columns in the grid.</p>
<p>A completed grid shows a pixelated image. A hint describing the image
is usually provided with the puzzle. For strategy hints, view the
<a href="#">Hanjie Strategy</a> page.</p>
<p>To play Hanjie online, click the cells in the provided grid to toggle the
cell color between black and white. To check your solution, click the
<strong>Check Solution</strong> button. The page will highlight
incorrectly-marked cells in red and display the number of cells that
still need to be marked.</p>
<p>
<input type="button" id="solution" value="Show Solution" />
<input type="button" id="hide" value="Reset Grid" />
</p>
</div>
</div>
</form>
<script>
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Author:
Date: February 15, 2011
Filename: puzzle.js
-------------------------------------------------------------
Function List:
setPuzzle()
Initializes event handlers for the cells within the Hanjie
table.
changeColor()
Toggles the background color of the active cell between
black and white
showSolution()
Shows the solution of the Hanjie puzzle
hideSolution()
Hides the solution of the Hanjie puzzle
checkSolution()
Checks the user's solution of the Hanjie puzzle
uncheckSolution()
Restores the user's solution of the Hanjie puzzle
to its original state
-------------------------------------------------------------
Global Variable List:
allCells
An object variable referencing all of the clickable cells
within the Hanjie puzzle
-------------------------------------------------------------
*/
window.onload = setPuzzle;
var allCells = new Array();
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = document.getElementsByTagName("td");
for (var i =0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor() {
this.style.backgroundColor = (this.style.backgroundColor=="black") ?"white":"black";
}
function showSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].className == "dark") {
allCells[i].style.backgroundColor = "black";
}else{
allCells[i].style.backgroundColor = "white";
}
checkCount = "0";
}
}
function hideSolution() {
for (var i = 0; i< allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount.value = " ";
}
}
</script>
</body>
</html>ASKER
Any more suggestions?
Line 550 and 561 - checkCount is a scalar - you don't need to add .value.
All four buttons will then work but I don't know if they are doing what they are supposed to.
Getting there!
Also you need to predeclare checkCount (var checkCount; ) anywhere near the top of the <script> block.
All four buttons will then work but I don't know if they are doing what they are supposed to.
Getting there!
Also you need to predeclare checkCount (var checkCount; ) anywhere near the top of the <script> block.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Hanjie Puzzle
Author:
Date: February 15, 2011
Filename: hanjie.htm
Supporting files: blackbar.gif, jpf.css, jpf.jpg, puzzle.js
-->
<title>Daily Hanjie Puzzle</title>
<link href="jpf.css" rel="stylesheet" type="text/css" />
<link href="stable.css" rel="stylesheet" type="text/css" />
<script src="puzzle.js" type="text/javascript"></script>
</head>
<body>
<form id="hanjieForm" name="hanjieForm" action="">
<div id="page">
<div id="header">
<img src="jpf.jpg" alt="The Japanese Puzzle Factory" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Puzzles</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Tips and Hints</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<ul id="column1">
<li><a href="#">Akari</a></li>
<li><a href="#">Divide by Box</a></li>
<li><a href="#">Fillomino</a></li>
<li><a href="#">Hanjie</a></li>
<li><a href="#">Hashiwokakero</a></li>
<li><a href="#">Heyawake</a></li>
<li><a href="#">Hitori</a></li>
<li><a href="#">Kakuro</a></li>
<li><a href="#">Katagaku</a></li>
<li><a href="#">Masugo</a></li>
<li><a href="#">Masyu</a></li>
<li><a href="#">Oekaki Logic</a></li>
<li><a href="#">Shikaku</a></li>
<li><a href="#">Sudoku</a></li>
<li><a href="#">Suhai</a></li>
<li><a href="#">Super Sudoku</a></li>
<li><a href="#">Tenketsu</a></li>
<li><a href="#">Tentai Show</a></li>
<li><a href="#">Wordoku</a></li>
<li><a href="#">Yajilin</a></li>
</ul>
<div id="column2">
<table class="hanjie">
<caption><strong>Hint: </strong> Panda</caption>
<colgroup>
<col class="firstCol" span="1" />
<col class="mainTable" span="20" />
</colgroup>
<thead>
<tr>
<td class="firstCol"></td>
<td>8<br />5</td><td>9<br />2<br />5</td><td>10<br />1</td><td>9<br />1</td>
<td>8<br />5<br />2</td><td>6<br />6<br />1</td><td>5<br />7<br />1</td><td>1<br />8<br />1</td>
<td>1<br />3<br />3<br />1</td><td>1<br />2<br />3<br />1<br />1</td>
<td>1<br />3<br />3<br />2<br />1<br />1</td>
<td>1<br />2<br />2<br />6<br />2</td>
<td>1<br />4<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />1</td>
<td>1<br />1<br />1<br />1</td><td>1<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />3<br />1<br />1</td>
<td>3<br />3<br />1<br />7<br />1</td>
<td>5<br />2<br />1<br />4<br />1<br />1</td>
<td>7<br />7<br />1<br />1</td>
</tr>
</thead>
<tr>
<td class="firstCol">6</td>
<td colspan="20" rowspan="25">
<table id="puzzleCells">
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red">
</td><td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td class="dark"></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td></td><td></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td>
<td class="dark"></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="firstCol">7 1</td>
</tr>
<tr>
<td class="firstCol">7 5 2</td>
</tr>
<tr>
<td class="firstCol">8 2 3</td>
</tr>
<tr>
<td class="firstCol">7 1 3</td>
</tr>
<tr>
<td class="firstCol">7 4</td>
</tr>
<tr>
<td class="firstCol">5 2</td>
</tr>
<tr>
<td class="firstCol">5 1</td>
</tr>
<tr>
<td class="firstCol">3 5 3</td>
</tr>
<tr>
<td class="firstCol">1 6 4</td>
</tr>
<tr>
<td class="firstCol">1 4 1 1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 3</td>
</tr>
<tr>
<td class="firstCol">1 7 2 1</td>
</tr>
<tr>
<td class="firstCol">1 7 2 5</td>
</tr>
<tr>
<td class="firstCol">1 6 2 5</td>
</tr>
<tr>
<td class="firstCol">1 2 1 3</td>
</tr>
<tr>
<td class="firstCol">1 2 2</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 9</td>
</tr>
<tr>
<td class="firstCol">1</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">2 1 2</td>
</tr>
<tr>
<td class="firstCol">13</td>
</tr>
</table>
<p>
<input type="button" id="check" value="Check Solution" />
<input type="button" id="uncheck" value="Hide Checked Solution" /><br />
<label for="checkCount">Cells remaining</label>
<input type="text" id="checkCount" />
</p>
</div>
<div id="column3">
<h3>To Play</h3>
<p>
<strong>Hanjie</strong> is a Japanese logic puzzle played on a blank grid
of varying sizes. At the top of each column and to the right of each row are
sets of numbers that indicate how many cells in that column or row must be colored
in, working from the top of the column or from the left of the row.
</p>
<p>For example a column or row entry of "3 8 1" indicates that there is a block
of three consecutive darkened cells followed at some point by eight filled-in
cells and ending finally with one filled-in cell. The gap between consecutive
groups of filled-in cells has to be determined by clues provided in other
rows and columns in the grid.</p>
<p>A completed grid shows a pixelated image. A hint describing the image
is usually provided with the puzzle. For strategy hints, view the
<a href="#">Hanjie Strategy</a> page.</p>
<p>To play Hanjie online, click the cells in the provided grid to toggle the
cell color between black and white. To check your solution, click the
<strong>Check Solution</strong> button. The page will highlight
incorrectly-marked cells in red and display the number of cells that
still need to be marked.</p>
<p>
<input type="button" id="solution" value="Show Solution" />
<input type="button" id="hide" value="Reset Grid" />
</p>
</div>
</div>
</form>
<script>
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Author:
Date: February 15, 2011
Filename: puzzle.js
-------------------------------------------------------------
Function List:
setPuzzle()
Initializes event handlers for the cells within the Hanjie
table.
changeColor()
Toggles the background color of the active cell between
black and white
showSolution()
Shows the solution of the Hanjie puzzle
hideSolution()
Hides the solution of the Hanjie puzzle
checkSolution()
Checks the user's solution of the Hanjie puzzle
uncheckSolution()
Restores the user's solution of the Hanjie puzzle
to its original state
-------------------------------------------------------------
Global Variable List:
allCells
An object variable referencing all of the clickable cells
within the Hanjie puzzle
-------------------------------------------------------------
*/
window.onload = setPuzzle;
var allCells = new Array();
var checkCount;
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = document.getElementsByTagName("td");
for (var i =0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor() {
this.style.backgroundColor = (this.style.backgroundColor=="black") ?"white":"black";
}
function showSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].className == "dark") {
allCells[i].style.backgroundColor = "black";
}else{
allCells[i].style.backgroundColor = "white";
}
checkCount = "0";
}
}
function hideSolution() {
for (var i = 0; i< allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount++;
}
return checkCount;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount = " ";
}
}
</script>
</body>
</html>ASKER
got help from someone else
ASKER
sjKlien42 was great and helped me with all my problems, his subjection's were great and really helped me