3 Replies - 570 Views - Last Post: 07 May 2013 - 07:53 AM

#1 slackgir  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-May 13

Loops - conditional, functions & variables

Posted 06 May 2013 - 05:59 PM

I know it says not to post homework here, but all i need is a start. i have been staring at this for over 5 hours today, i've read the chapter in the book twice, and all the notes 3 times, but i can't even figure out how to start this. the closest in class that we came to this is a rolling dice simulator, and i can not see how to translate that into this puzzle. it needs to start with a while loop in the first function, but none of what i am reading is helping, or pertains to images.

i don't need an answer, i just need pointed in the right direction to figure this out. i think once i get a start, i'll be able to figure it out.

what i am supposed to be doing is using a loop to determine if the pieces are correctly placed. Return true if they are, false if they are not.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--  -->
<!--  -->
<html>
<head>
<title>PicPuzzle</title>
<script>
function puzzleIsCorrect()
// use a loop to determine whether the puzzle is correct
// return true when it is right, false when it is wrong
{
  return false; //stub always returns false
}

function changeImage(cell)
// change one piece of the puzzle to a 'new' random piece
// cell is the ID of the html img element to be changed
{
  var image = RandomInt(1, 9);                // select a piece number
	document.getElementById(cell).alt = image;  // use the alt attribute to remember the number
	image = "pics/" + image + "-" + puzzle + ".jpg"; // create file name
	document.getElementById(cell).src = image;  // display it
}

function finishTimeOut()
// called when timer expires
// changes global variable clicksAllowed to stop play
// also displays answer
{
  clicksAllowed = false;												// no more clicks allowed
	alert("You have run out of time. See answer below.");
	document.getElementById('outputDiv').innerHTML =
	  '<img src="pics/' + puzzle + '.jpg" alt="solution"><p>How did you do?</p>';
}

function RandomInt(low, high)
// selects a random integer in the inclusive range [low, min]
{
  return Math.floor(Math.random()*(high-low+1)+low);
}

function startUp()
// called by onload
// selects a puzzle, and sets a timer and a flag
// uses global variables so other functions can access these
{
  puzzle = "puzzle" + RandomInt(0, 4);          // the puzzle in use
	//alert("using puzzle: " + puzzle);
	clicksAllowed = true;                         // used to ignore clicks after a timeout
	timer = setTimeout('finishTimeOut()',60000);  // remember the timer, so we can turn it off
}

function done()
// button click handler for when user says puzzle is done
// correctness is determined by the function puzzleIsCorrect
{
  if (puzzleIsCorrect()) {
		 clearTimeout(timer);        // stop the timer, user won
		 clicksAllowed = false;			 // game over, no more clicks allowed
		 alert("Right! Good job.");
		 }
	else  // incorrect attempt, keep timer running
	   alert("Sorry, that is not correct");
}


</script>
</head>
<body onload="startUp();">

<div style="text-align:center">
<h2>Picture Puzzle</h2>
<p>You have 60 seconds to solve the puzzle by clicking on the placeholders.<br>
click when done.
<input type="button" value="finished" onclick="done();">

<table summary="layout" style="margin-left:auto;margin-right:auto"
  cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="pics/blank.jpg" alt="blank" id="cell1"
				 onclick="changeImage('cell1');"></td>
<td><img src="pics/blank.jpg" alt="blank" id="cell2"
				 onclick="changeImage('cell2');"></td>
<td><img src="pics/blank.jpg" alt="blank" id="cell3"
				 onclick="changeImage('cell3');"></td>
</tr>
<tr>
<td><img src="pics/blank.jpg" alt="blank" id="cell4"
				 onclick="changeImage('cell4');"></td>
<td><img src="pics/blank.jpg" alt="blank" id="cell5"
				 onclick="changeImage('cell5');"></td>
<td><img src="pics/blank.jpg" alt="blank" id="cell6"
				 onclick="changeImage('cell6');"></td>
</tr>
<tr>
<td><img src="pics/blank.jpg" alt="blank" id="cell7"
				 onclick="changeImage('cell7');"></td>
<td><img src="pics/blank.jpg" alt="blank" id="cell8"
				 onclick="changeImage('cell8');"></td>
<td><img src="pics/blank.jpg" alt="blank" id="cell9"
				 onclick="changeImage('cell9');"></td>
</tr>
</table>

<div id="outputDiv"><i>Solution will appear here</i></div>
</div>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Loops - conditional, functions & variables

#2 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10447
  • View blog
  • Posts: 38,689
  • Joined: 27-December 08

Re: Loops - conditional, functions & variables

Posted 06 May 2013 - 06:35 PM

Moved to Javascript. Please note that Java != Javascript.

Also, I want to clarify on the homework policy. We are happy to help with homework, provided there is a good faith effort. :)
Was This Post Helpful? 0
  • +
  • -

#3 slackgir  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-May 13

Re: Loops - conditional, functions & variables

Posted 06 May 2013 - 06:47 PM

ok, thanks. cause this is driving me crazy. i'm not sure why i can't figure this one out, but i am just stumped.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,143
  • Joined: 08-June 10

Re: Loops - conditional, functions & variables

Posted 07 May 2013 - 07:53 AM

Quote

what i am supposed to be doing is using a loop to determine if the pieces are correctly placed.

that itself is relatively easy. In Java​Script there are a couple of array-like structures like document.getElementsBy* that return a list of objects you can loop over. once you loop over the list you only have to figure out what makes out the correct order of elements.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1