...

View Full Version : This hanjie puzzle is giving me fits!



jdpaul
02-26-2012, 01:35 PM
Does anyone know how to make these things work? I have to make this hanjie puzzle and I have at least gotten the black squares to display. I have worked through all the directions three times and run it through the Firebug. I don't understand what it is asking for and don't know how to change the code to make this work, someone please help me!


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.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 = " ";
}
}

jdpaul
02-26-2012, 01:45 PM
Firebug says:
Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. I have no idea what to change or how. When I tried looking it up at W3schools.com I just got more confused, someone please help me!

jdpaul
02-26-2012, 01:52 PM
I have uploaded the HTML file in txt form, I am hoping you coding gurus will help me become another one. :)

Sincerely,
Janice Paul

Philip M
02-26-2012, 06:58 PM
I don't see what is wrong with your code except that you have repeated

document.getElementById("solution").onclick = showSolution;

which may confuse the browser.

Old Pedant
02-26-2012, 10:18 PM
Firebug says:
Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. I have no idea what to change or how. When I tried looking it up at W3schools.com I just got more confused, someone please help me!

Don't worry about this. It's a peculiarity of FireBug. I get it all the time and I never use getAttributeNodeNS().

Old Pedant
02-26-2012, 10:25 PM
Change your <table> for the puzzle, thus:


<table border="1" id="puzzleCells">

Now you can see your problem. Your cells are all just 1 by 1 pixels, apparently.

You made a fatal mistake, embedding one <table> in another. You need to do it *ALL* with a *SINGLE* <table>, so that the numbers on the top and side line up with the cells in the middle.

You've made it way way too hard on yourself, designing the <table>s the way you have.

jdpaul
02-27-2012, 01:26 AM
I thought I was starting to get this when you guys said there was nothing wrong with it, I took it back through IE and Firebug after changing the parts you advised to ... same result :P I know I am no master of JavaScript, but it shouldn't be brain-surgery either should it? I guess I will put it online where you can see what it doesn't do right, etc. I hope w/ a couple of experienced eyes to assist me, maybe I can find the goof in my code. I thought it should show the Solution and I have a picture example with part of the puzzle blocks in red. By the way, it was totally NOT my idea to put a table within a table!!!! I promise! I was taught to write Web pages MUch better than that. I didn't make up the HTML or JavaScript, I am just supposed to make it work. Yeah, right ... :confused:

Please help me,
Janice

Old Pedant
02-27-2012, 01:38 AM
Oh, silly me...I don't have your CSS files so I can't see the page as you are seeing it.

Without CSS, the cells in the inner table are 1x1 pixel in size.

How about putting it up live, so we can see it?

jdpaul
02-27-2012, 02:10 AM
I am putting what I have online now ...
Janice's JavaScript (http://web-students.pstcc.edu/web2300ww1/jdpaul/wk6and7/panda_puzzle/hanjie.html)
Janice :(

I am gonna cry! It just keeps getting worse no matter what I do.

jdpaul
02-27-2012, 02:59 AM
I don't know what else to do ... I think there are supporting jpg files missing because if you read the very top of the CSS file it says there are supposed to be three jpg files that I can't find. If or when I find them, maybe we can make this work .. or am I totally lost out there in the tall weeds?

Befuddled,
Janice

Old Pedant
02-27-2012, 06:07 AM
Okay, so what doesn't work, other than "Show Solution" and "Check Solution"??

It seems that clicking on the cells works fine. They turn black (or white if already black).

Irrelevant (and irreverant) comment:

I think it is funny (in a sad sort of way) that the Japanese get credit for this puzzle type. Same as they get credit for Sudoku and Kakuru. Anybody who is a long time puzzle fan knows that all three of these types of puzzles appeared in the various Dell and Penny Press puzzle magazines in the USA long before they every appeared in Japan. Heck, the guy who created Sudoku (of course it wasn't known by that name...I think it was "Number place" but can't swear to that) *DIED* only a couple of years after Sudoku finally appeared in Japan. I remember doing his puzzles at least 20 years ago and probably more than that.

jdpaul
02-27-2012, 06:25 AM
You are sooo right about the puzzles! I have found that there has been a major over-sight with this program. There are at the moment 4 files I know of missing
:( there's a style sheet missing and 3 jpgs. I have made this over-sight known to the people who should have never let it happen to begin with and now have to wait for them to get off their duffs and get the dang files.

What doesn't work work is exactly what you said, w/o the jpgs & style sheet, I see no way to make this one work. :P
I am disgusted w/ the lack ...

Janice

Old Pedant
02-27-2012, 06:53 AM
LOL! Well, the GOOD news is that it's not your fault.

The BAD news is that your head is sore now from all that banging against the wall.

jdpaul
02-27-2012, 11:07 AM
Yeah, well, I like to do my work as correctly as possible, as early as possible and this dumb thing happening is not helping me. So, without having those three image files and the missing style sheet ... am I to understand correctly that the JavaScript code does not make any of the tiles change to red?

Still trying ...
Janice

jdpaul
02-28-2012, 12:57 AM
I tried to get the missing files today and to my utter horror I was told that they weren't needed and it was good enough the way it was. ;\ I don't like this at all. I feel like I had to do a half-*** job because there are files missing. Pooey!!! Is there a way to make the JavaScript code make some of the tiles red? I really wanted this one to turn out right. *pout*

Janice:rolleyes:

Old Pedant
02-28-2012, 07:44 AM
Ummm...you pulled your page offline? I can't access it any more.

jdpaul
02-28-2012, 07:42 PM
I did not take it offline ... I am not sure what could have happened, but here is the correct link:
Janice's JavaScript (http://web-students.pstcc.edu/web2300ww1/jdpaul/wk6and7/hanjie/hanjie.html)
This particular exercise is really irritating me because it would be cool to see it work, supposedly someone said I could use the JavaScript to make the tiles turn red. I have studied and read and looked and I am flat lost. :( Anyone know how to make this work???

Sincerely disgusted with this program,
Janice

Old Pedant
02-28-2012, 08:52 PM
Oh, a MAJOR MAJOR goof by you!

Here's a hint to the source of your problem: Click on one of the cell around the outside of the grid that has the numbers in it. What happens? Further hint: THEY SHOULD NOT TURN BLACK when clicked on!

In other words, your array allCells has TOO MANY cells in it.

Another bug: You do var checkCount = 0; but then later you do return checkCount.value; Ummm...why would you think that a simple numeric variable has a .value property?

Another hint: How do you *ASSIGN* a color to a cell? You sure as heck don't use the === operator, which means "test for equality of type and value".


p.s.: I got it working.

Old Pedant
02-28-2012, 08:53 PM
Oh, yeah...and you didn't provide for the case of a user clicking on a red cell. You turn it black. So then when the user clears the checked solution, the black cell just sits there.

jdpaul
02-29-2012, 05:32 PM
I have been told that the puzzle can be accomplished with JavaScript w/o the missing files after all. I hope to be taught how here in a few hrs. I really appreciate your fooling with this code and trying to help me with my mess-ups. I am very grateful for your patience. I will get back to you as soon as I know some more about this. :)

Sincerely,
Janice

jdpaul
02-29-2012, 05:37 PM
Dumb Janice had problems w/ file management and had to change some folder names so they all matched. I apologize for the screw-up. :(

Old Pedant
02-29-2012, 09:43 PM
I have been told that the puzzle can be accomplished with JavaScript w/o the missing files after all

I know this is true because I got it working just fine using only what you already had there.

I say again, you have a handful of JavaScript errors. I pm'ed you with several hints and even a chunk of code.

jdpaul
02-29-2012, 11:09 PM
Janice's JavaScript (http://web-students.pstcc.edu/web2300ww1/jdpaul/wk6and7/hanjie/hanjie.html)

:D Ok, so it displays color :D, THANKS TO YOUR HELP I still wanted to figure out how to make the buttons work correctly. I looked up some code but I am not sure how to implement it ... would you help me figure it out please? I even made a jpg of the solution (I know, I am silly) This first has a dummy HTML with the JavaScript in it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Panda</title>

<style type="text/css" id="vbulletin_css">
#cell {
width: 320px; /* I made the image the right size :) */
height: 402px;
background: url('panda.jpg');
}
</style>


<script type="text/javascript">

// start by setting current background image flag
var currentImage = 1;

function init() {
// start calling function 'changeImage' every second
setInterval(changeImage,1000);
}

function changeImage() {
if (currentImage == 1) {
// set background image to image2
document.getElementById('cell').style.background = "url('panda.jpg')";
currentImage = 2;
}
else {
document.getElementById('cell').style.background = "url('panda.jpg')";
currentImage = 1;
}
}

window.onload = init;

</script>

</head>
<body>
<table>
<tr>
<td id="cell"></td>
</tr>
</table>
</body>
</html>

and the next one is just a piece of code I thought I could use, but I haven't been able to figure out how to plug it in or if any of my silly ideas are even possible. Are they possible? Or is this just stupid stuff I shouldn't waste my time on?


document.getElementById("theid").className = ""; // remove the hidden class.


.classHidden {
display = none;
}

Wondering...
Janice

jdpaul
02-29-2012, 11:13 PM
.................

jdpaul
02-29-2012, 11:26 PM
Oh, yeah...and you didn't provide for the case of a user clicking on a red cell. You turn it black. So then when the user clears the checked solution, the black cell just sits there.

I can't figure out how to fix this. :(


Here's a hint to the source of your problem: Click on one of the cell around the outside of the grid that has the numbers in it. What happens? Further hint: THEY SHOULD NOT TURN BLACK when clicked on!

In other words, your array allCells has TOO MANY cells in it.

Another bug: You do var checkCount = 0; but then later you do return checkCount.value; Ummm...why would you think that a simple numeric variable has a .value property?

OK, I have blue so you can see the change in code, and I changed the === I see what you are saying about the cells with numbers changing colors .. I just don't know enough to fix it :P and I am not sure how to take out some cells without counting them physically in the jpg I made and trying to figure it out by counting <td>'s .. is that the way I have to go with this? Eww.

Old Pedant
03-01-2012, 01:08 AM
*sigh*

Some of the changes below are to make the code more efficient.
Some of the changes are because your code was just plain wrong.

There was NEVER any reason for ANY of your functions to return anything.
You are never *doing* anything with the return values, so what's the point?



window.onload = setPuzzle;

var allCells;
var showCount;

function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");

// get *ONLY* cells that are in the puzzle table
allCells = puzzleTable.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;
showCount = document.getElementById("checkCount");
}


function changeColor(){
// if a cell is *EITHER* black or red, make it white...else make it black
this.style.backgroundColor = (this.style.backgroundColor == "white") ? "black" : "white";
}

function showSolution()
{
for(var i=0;i<allCells.length; i++) {
cell = allCells[i];
cell.style.backgroundColor =
(cell.className == "dark") ? "black" : "white";
}
}

function hideSolution() {
for(var i=0;i<allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
showCount.value = "";
}

function checkSolution() {
var count = 0;
for (var i = 0; i< allCells.length; i++)
{
cell = allCells[i]; // this is for efficiency!
if (cell.style.backgroundColor == "black" && cell.className != "dark") {
cell.style.backgroundColor = "red"; // *ASSIGNMENT*
} else if (cell.className == "dark" && cell.style.backgroundColor == "white"){
++count;
}
}
showCount.value = count;
}

function uncheckSolution()
{
for (var i = 0; i< allCells.length; i++)
{
cell = allCells[i];
if ( cell.style.backgroundColor == "red" ) cell.style.backgroundColor = "black";
}
}

Old Pedant
03-01-2012, 01:10 AM
From your post #23:

This code makes no sense:

function changeImage() {
if (currentImage == 1) {
// set background image to image2
document.getElementById('cell').style.background = "url('panda.jpg')";
currentImage = 2;
}
else {
document.getElementById('cell').style.background = "url('panda.jpg')";
currentImage = 1;
}
}
You aren't changing anything. The URL of the background image is the same in both cases. So what value is there in this code?

jdpaul
03-01-2012, 01:37 AM
From your post #23:

This code makes no sense:

function changeImage() {
if (currentImage == 1) {
// set background image to image2
document.getElementById('cell').style.background = "url('panda.jpg')";
currentImage = 2;
}
else {
document.getElementById('cell').style.background = "url('panda.jpg')";
currentImage = 1;
}
}
You aren't changing anything. The URL of the background image is the same in both cases. So what value is there in this code?

that one was a shot in the dark .. hoping for a code to show the jpg w/ the Show Solution button.

jdpaul
03-01-2012, 01:48 AM
*sigh*

Some of the changes below are to make the code more efficient.
Some of the changes are because your code was just plain wrong.

There was NEVER any reason for ANY of your functions to return anything.
You are never *doing* anything with the return values, so what's the point?



window.onload = setPuzzle;

var allCells;
var showCount;

function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");

// get *ONLY* cells that are in the puzzle table
allCells = puzzleTable.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;
showCount = document.getElementById("checkCount");
}


function changeColor(){
// if a cell is *EITHER* black or red, make it white...else make it black
this.style.backgroundColor = (this.style.backgroundColor == "white") ? "black" : "white";
}

function showSolution()
{
for(var i=0;i<allCells.length; i++) {
cell = allCells[i];
cell.style.backgroundColor =
(cell.className == "dark") ? "black" : "white";
}
}

function hideSolution() {
for(var i=0;i<allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
showCount.value = "";
}

function checkSolution() {
var count = 0;
for (var i = 0; i< allCells.length; i++)
{
cell = allCells[i]; // this is for efficiency!
if (cell.style.backgroundColor == "black" && cell.className != "dark") {
cell.style.backgroundColor = "red"; // *ASSIGNMENT*
} else if (cell.className == "dark" && cell.style.backgroundColor == "white"){
++count;
}
}
showCount.value = count;
}

function uncheckSolution()
{
for (var i = 0; i< allCells.length; i++)
{
cell = allCells[i];
if ( cell.style.backgroundColor == "red" ) cell.style.backgroundColor = "black";
}
}


I apologize that I have not learned anything about writing JavaScript "efficiently" yet. I am going to use this code if you don't care! I love it that you got the panda to show with the button! I don't understand the way they are teaching this .. so much weird language that was totally not my idea, I am good at HTML & CSS *sigh* more learning to go .. Thanks again soo much for your help.

Old Pedant
03-01-2012, 02:08 AM
I didn't change tons of your code, you know. As I said, some of the changes were only for efficiency; your code would have worked as is.

I think you were just making this too hard.

The logic is simple: If the class of a cell is "dark" then it's part of the solution.

So to show the solution, you just make all "dark" cells...well...dark. With all other cells not dark (white).

To check the user's solution, you just find all the cells she/he made black that should not be black and turn them red.

The rest just follows from that.

jdpaul
03-01-2012, 02:24 AM
Not until this last revision of yours did the panda display and the cells w/ numbers in them do NOT change color now! :thumbsup: I am not sure how to write what you are saying ... :/

jdpaul
03-01-2012, 02:26 AM
The logic is simple: If the class of a cell is "dark" then it's part of the solution.

So to show the solution, you just make all "dark" cells...well...dark. With all other cells not dark (white).

To check the user's solution, you just find all the cells she/he made black that should not be black and turn them red.
I apologize for my ignorance ... I am not sure how to change your words into JavaScript :P

Old Pedant
03-01-2012, 07:22 AM
I apologize for my ignorance ... I am not sure how to change your words into JavaScript :P

Ummm...I already did.

So just try to study what I did.

Really, that's all I did was convert those words into code.

Old Pedant
03-01-2012, 07:43 AM
Not until this last revision of yours did ... the cells w/ numbers in them do NOT change color now! I am not sure how to write what you are saying ... :/

One simple little change. Which is in red in that code.



var puzzleTable = document.getElementById("puzzleCells");

// get *ONLY* cells that are in the puzzle table
allCells = puzzleTable.getElementsByTagName("td");

You had document.getElementsByTagName("td")

That means "get all the <td> tags IN THE ENTIRE DOCUMENT" (document == web page, for all practical purposes).

My code says "get all the <td> tags in the puzzleTable". That is, in the table that YOU CORRECTLY CODED as <table id="puzzleCells">

Please note: This has *NOTHING* to do with JavaScript *PER SE*. This is completely how the browser's DOM (Document Object Model) presents *its* view of your HTML.

When you ask to get "all" of something, you typically say "all" of something AS CONTAINED BY the parent object. Which could be the entire web page (a.k.a. "document" in the DOM) or it could be a <table> or a <div> or a <form> or whatever.

When you see a structure in HTML such as

<html>
<body>
<div>
<ul>
<li> something </li>
</ul>
</div>
</body>
</html>

THat is converted by the browser into a DOM that essentially looks like this:


document
div-node
ul-node
li-node
textnode

A "tree" of objects, if you will. So, in the above and just for example, the firstChild of my <div> (which is now a div-node) is the <ul> tage (which is now a ul-node). And the parentNode of the text ("something" in my HTML) is the <li> (which is now a li-node.

You have to learn to think of the HTML as a tree of objects. And that's just one reason that it's really really helpful to write your HTML indented, as above, so that you can see which elements/nodes are children of what other elements/nodes, etc.

And then, finally, you have to realize that JavaScript can't "see" the raw HTML. By the time the browser has rendered it on the screen, it doesn't even exists any more. But JavaScript *CAN* see the DOM. And that's what you are working with. But, one more time, don't confuse JavaScript-the-language with the JavaScript *interface* to the DOM. (In MSIE browsers, for example, you can use another language to "talk to the DOM" and there's no theoretical reason that ANY language couldn't be given an interface to do the same.)

So... keep the language and the DOM separate in your mind. It looks to me like you do fine with the language. Now you just (ha! "just" he says) learn the DOM.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum