Solved

Help with Javascript code

Posted on 2011-02-15
13
1,507 Views
Last Modified: 2012-05-11
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>

Open in new window

0
Comment
Question by:Killahb101
  • 6
  • 5
  • 2
13 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34903618
when you say <<can't get it to work>>, what do you mean?
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34903625
For starters, on line 18, "array" needs to be "Array" - case sensitive

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34903632
actually, line 18 is
var puzzleTable = document.getElementByID("puzzleCells");

which also need to be case-sensitive,
var puzzleTable = document.getElementById("puzzleCells");
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34903635
And two lines later, getElementByID needs to be getElementById
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34903647
getElementByTagName should be getElementsByTagName

Do you want me to keep going?
0
 

Author Comment

by:Killahb101
ID: 34913918
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 = " ";
	}
}

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Killahb101
ID: 34913928
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

0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34914462
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.

<!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>

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34914605
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>

Open in new window

0
 

Author Comment

by:Killahb101
ID: 34915400
Any more suggestions?  
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 34918340
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.


<!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>

Open in new window

0
 

Author Closing Comment

by:Killahb101
ID: 35096257
got help from someone else
0
 

Author Comment

by:Killahb101
ID: 35096290
sjKlien42 was great and helped me with all my problems, his subjection's were great and really helped me  
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

We have come a long way with backup and data protection — from backing up to floppies, external drives, CDs, Blu-ray, flash drives, SSD drives, and now to the cloud.
For cloud, the “train has left the station” and in the Microsoft ERP & CRM world, that means the next generation of enterprise software from Microsoft is here: Dynamics 365 is Microsoft’s new integrated business solution that unifies CRM and ERP fun…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now