Menu
Filename: cross.htm
Supporting files: across.gif, down.gif, functions.js, makepuzzle.js,
pcglogo.jpg, styles.css
–>
<title>Crossword Puzzle</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”makepuzzle.js”></script>
<script type=”text/javascript” src=”functions.js”></script>
<script type=”text/javascript”>
var handImage=new Array(“across.gif”,”down.gif”)
var IE = document.attachEvent ? true:false;
var DOM = document.addEventListener ? true: false;
var currentX=0,currentY=0;
var currentCell,currentColor=”white”,across=true,keyNum;
function init() {
writeClues(); //run writeClues function
currentCell = document.getElementById(“grid00”); //set the currentCell equal the element with the id “grid00”
currentCell.style.backgroundColor = “yellow”; //change the value of the background color of the currentCell object to yellow
document.onkeypress=getKey; //creat an event handler to the document object that runs the getKey function when a user presses a key
}
//capture the key code of the pressed key and then call the appropriate function for that key
function getKey(e)
{
if (IE) keyNum = event.keyCode;
else if (DOM) keyNum = e.keyCode;
if(keyNum==32) { toggleDirection(); }
else if (keyNum ==37||keyNum==38||keyNum==39||keyNum==40) { moveCursor(); }
else { writeGuess(); }
}
var across = true;
function toggleDirection(){
if(across){
across = false;
document.images[1].src = “down.gif”;
}
else{
across = true;
document.images[1].src = “across.gif”;
}
}
//next four function will be used to update the values of the currentX and currentY variables as the cursor moves around the puzzle grid
//decrease the value of currentX by one, if currentX is less than zero change the value to four
function moveLeft() {
curentX–;
if (currentX < 0) {
currentX = 4
}
}
//increase the value of currentX by one, if currentX is greater than four change the value to zero
function moveRight() {
currentX++;
if (currentX > 4) {
currentX = 0;
}
}
//decrease the value of currentY by one, if currentY is less than zero change value to four
function moveUp() {
currentY–;
if (currentY< 0) {
currentY = 4;
}
}
//increase the value of currentY by one, if currentY is greater than four change the value to zero
function moveDown() {
currentY++;
if (currentY > 4) {
currentY = 0;
}
}
//move the active cell in response to a user presing the arrow keys on the keyboard
function moveCursor() {
currentCell.style.background = ‘#ffff00’; //set the background color of the currentCell to the value of the currentColor variable
if (keyNum = 37)
moveLeft(); //if the value of the keyNum indicates a left arrow run the moveLeft function
if (keyNum = 38)
moveUp(); //if the value of the keyNum indicates an up arrow run the moveUp function
if (keyNum = 39)
moveRight(); //if the value of the keyNum indicates a right arrow run the moveRight function
if (keyNum =40)
moveDown(); //if the value of the keyNum indicates a down arrow run the moveDown function
currentCell = document.getElementById(“grid” + currentX + currentY);
currentCell.style.background = ‘#ffff00’; //change the background color of the currentCell to yellow
}
//write the lettr typed by the user into the current cell and change the background color to indicate whether the user typed a correct letter
//after the letter has been written teh current cell should move either to the right or down
function writeGuess() {
var outChar = String.fromCharCode(keyNum); //use the fromCharCode method to extract the letter corresponding to the value of the keyNum variable
outChar = string.toUpperCase(); //use the toUpperCase function to change the outChar variable to an uppercase letter
document.write(writeText(outChar)); //use the writeText function to write outChart to the current cell
if (words[(currentY * 5) + currentX] == outChar) {
currentCell.style.backgroundColor=”lightgreen”;
} else {
currentCell.style.backgroundColor=”pink”;
}
//if across equals true run the moveRight function else run the moveDown function
if (across == true) {
moveRight();
} else {
moveDown();
}
//point the currentCell object to the element with the id gridxy, where x is the value of currentX and y is the value of currenY
currentCell = document.getElementById(“grid” + currentX + currentY);
currentCell.style.background = ‘#ffff00’; //change the background color of the current cell to yellow
}
</script>
</head>
<body onload = “init()”>
<div id=”head”><img src=”pcglogo.jpg” alt=”The Park City Gazette” /></div>
<div id=”intro”>
<h2>Today’s Puzzle</h2>
<p>Type the correct answer for each clue. A green square indicates
a correct answer; a red square means that the letter is not
correct.</p>
<p>The pointing hand indicates the current typing direction of the
puzzle. To switch between typing across and down, press the space bar.
Move to different cells by pressing the arrow keys on your
keyboard.</p>
<p>Click the <b>Reveal Answer</b> button to see the correct answers.</p>
</div>
<div id=”direction”><img src=”across.gif” alt=”” /></div>
<div class=”grid” id=”grid00″> </div>
<div class=”grid” id=”grid10″> </div>
<div class=”grid” id=”grid20″> </div>
<div class=”grid” id=”grid30″> </div>
<div class=”grid” id=”grid40″> </div>
<div class=”grid” id=”grid01″> </div>
<div class=”grid” id=”grid11″> </div>
<div class=”grid” id=”grid21″> </div>
<div class=”grid” id=”grid31″> </div>
<div class=”grid” id=”grid41″> </div>
<div class=”grid” id=”grid02″> </div>
<div class=”grid” id=”grid12″> </div>
<div class=”grid” id=”grid22″> </div>
<div class=”grid” id=”grid32″> </div>
<div class=”grid” id=”grid42″> </div>
<div class=”grid” id=”grid03″> </div>
<div class=”grid” id=”grid13″> </div>
<div class=”grid” id=”grid23″> </div>
<div class=”grid” id=”grid33″> </div>
<div class=”grid” id=”grid43″> </div>
<div class=”grid” id=”grid04″> </div>
<div class=”grid” id=”grid14″> </div>
<div class=”grid” id=”grid24″> </div>
<div class=”grid” id=”grid34″> </div>
<div class=”grid” id=”grid44″> </div>
<div id=”reveal” onclick =”showAns()” style = “cursor:pointer”>Reveal Answer</div>
<div id=”rowhead”>Rows</div>
<div id=”across1″ class=”clue”> </div>
<div id=”across2″ class=”clue”> </div>
<div id=”across3″ class=”clue”> </div>
<div id=”across4″ class=”clue”> </div>
<div id=”across5″ class=”clue”> </div>
<div id=”colhead”>Columns</div>
<div id=”down1″ class=”clue”> </div>
<div id=”down2″ class=”clue”> </div>
<div id=”down3″ class=”clue”> </div>
<div id=”down4″ class=”clue”> </div>
<div id=”down5″ class=”clue”> </div>
</body>
</html>