<head>
<title>Wordsearch</title>
<style type="text/css">
<!--
td, input{	font-family:sans-serif;
	font-size:xx-small
background-color: transparent;
border:0;
}
.verticaltextLeft{
	writing-mode: tb-rl;
	filter: flipv fliph;
	font-size:1px
}
.verticaltextRight{
	writing-mode: tb-rl;
}
-->
</style>
<body bgcolor="#ffffff">
<center>
Click on the letters to highlight the words, then click 'Check Word' to mark it off the list.
Words can go right, down or right and down diagonally.
<form id="search">
<table border=1>
<tr>
	<td align=center><input type=button value=F id=0 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=O id=1 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=2 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=3 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=I id=4 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=S id=5 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=I id=6 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=N id=7 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=F id=8 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=P id=9 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=10 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=V id=11 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=I id=12 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=H id=13 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=E id=14 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=P id=15 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=U id=16 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=17 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=E id=18 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=19 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=O id=20 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=W id=21 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=22 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=L id=23 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=A id=24 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=B id=25 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=B id=26 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=27 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=N id=28 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=29 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=N id=30 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=31 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=P id=32 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=D id=33 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=X id=34 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=C id=35 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=36 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=G id=37 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=38 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=F id=39 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=P id=40 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=Q id=41 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=P id=42 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=43 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=U id=44 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=N id=45 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=E id=46 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=D id=47 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=L id=48 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=C id=49 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=H id=50 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=E id=51 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=52 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=53 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=Y id=54 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=X id=55 onClick=check(this) style="background-color:transparent;"></td>
</tr>
<tr>
	<td align=center><input type=button value=E id=56 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=P id=57 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=Y id=58 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=G id=59 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=R id=60 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=A id=61 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=P id=62 onClick=check(this) style="background-color:transparent;"></td>
	<td align=center><input type=button value=E id=63 onClick=check(this) style="background-color:transparent;"></td>
</tr>
</table>
</form>
<table>
<tr>
<td colspan=5><span id="currentWord">&nbsp;</span><br><a onClick="JavaScript:clearword();">Clear current word</a> - <a value="-" id="99999" onClick="JavaScript:check(this,1);">Check word</a></td>
</tr>
<tr>
<td colspan=5><hr></td>
</tr>
<tr>
<td width=1px></td>
<td rowspan=4><div class="verticaltextLeft" style="height:80px"><hr></div></td>
<td width=1px></td>
<td rowspan=4><div class="verticaltextLeft" style="height:80px"><hr></div></td>
<td width=1px></td>
</tr>
<tr>
<td align=right id=word0>apple</td>
<td align=center id=word1>grape</td>
<td align=left id=word2>pear</td>
</tr>
<tr>
<td align=right id=word3>banana</td>
<td align=center id=word4>orange</td>
<td align=left id=word5>cherry</td>
</tr>
<tr>
<td align=right id=word6>raisin</td>
<td align=center id=word7>prune</td><td></td>
</tr>
<td></td>
</tr>
</table>
</center>
</body>
<script>
words = [];
curr_highlights = [];
var i=0;
var word = '';
var maxletters = 8;
var oldID = '';
var match = 0;
words[i++] = 'apple'; // 0
words[i++] = 'grape'; // 1
words[i++] = 'pear'; // 2
words[i++] = 'banana'; // 3
words[i++] = 'orange'; // 4
words[i++] = 'cherry'; // 5
words[i++] = 'raisin'; // 6
words[i++] = 'prune'; // 7
for(i=0;i<(maxletters*maxletters);i++){
	curr_highlights[i]=0;
}

function check(who,what){
	var concurrent = 0;
	var matchedWord = 'word';
	if(what=='1'){
		for(j=0;j<words.length;j++){
			for(i=0;i<words[j].length;i++){
				if(words[j].toUpperCase() == word){
					match++;
					matchedWord += j;
					document.getElementById(matchedWord).style.textDecoration = 'line-through';
					matchedWord = 'word';
					if(match == words.length) alert("Well done!");
					for(p=0;p<(maxletters*maxletters);p++){
						if(document.getElementById(p).style.backgroundColor=='#ffcccc')
							curr_highlights[p] = 1;
					}
					clearword();
					break;
				}
			}
		}
	} else{
		if(checkID(parseInt(who.id),oldID) || word==''){
			word += who.value;
			document.getElementById('currentWord').innerHTML = word;
		} else{
			document.getElementById('currentWord').innerHTML = '&nbsp;';
			clearword();
			word = '';
			matchedWord = 'word';
		}
	}
}
function clearword(){
	word = '';
	for(i=0;i<(maxletters*maxletters);i++){
		if(curr_highlights[i]==1) document.getElementById(i).style.backgroundColor='#ffcccc';
		else document.getElementById(i).style.backgroundColor='transparent';
	}
	document.getElementById('currentWord').innerHTML = '&nbsp;';
}
function checkID(id, old){
	valids = [];
	var choices = '';
	var pass = 0;
	if(old == id && word != '')pass = 0;
	if(old == '') pass = 1;
	oldID = id;
	if(id == 0){
		valids[0] = id + 1;
		valids[1] = id + maxletters + 1;
		valids[2] = id + maxletters;
	}
	if(id > 0 && id < (maxletters-1)){
		valids[0] = id + 1;
		valids[1] = id + maxletters + 1;
		valids[2] = id + maxletters;
		valids[3] = id + (maxletters-1);
		valids[4] = id - 1;
	}
	if(id == (maxletters-1)){
		valids[0] = id + maxletters;
		valids[1] = id + (maxletters-1);
		valids[2] = id - 1;
		}
	for(j=1; j<(maxletters); j++){
		if(id == (maxletters*j)){
			valids[0] = id - maxletters;
			valids[1] = id - maxletters + 1;
			valids[2] = id + 1;
			valids[3] = id + maxletters + 1;
			valids[4] = id + maxletters;
		}
		if(id>(maxletters*j) && id< (maxletters+((maxletters*j)-1))){
			valids[0] = id - maxletters;
			valids[1] = id - maxletters + 1;
			valids[2] = id + 1;
			valids[3] = id + maxletters + 1;
			valids[4] = id + maxletters;
			valids[5] = id + (maxletters-1);
			valids[6] = id - 1;
			valids[7] = id - maxletters - 1;
		}
		if(id > maxletters && id == ((maxletters*j)-1)){
			valids[0] = id - maxletters;
			valids[1] = id + maxletters;
			valids[2] = id + (maxletters-1);
			valids[3] = id - 1;
			valids[4] = id - maxletters - 1;
		}
	}
	if(id >= (maxletters * (maxletters-1))){
		if(id == (maxletters * (maxletters-1))){
			valids[0] = id - maxletters;
			valids[1] = id - maxletters + 1;
			valids[2] = id + 1;
		}
		if(id > (maxletters * (maxletters-1)) && id < ((maxletters * maxletters)-1)){
			valids[0] = id - maxletters;
			valids[1] = id - maxletters + 1;
			valids[2] = id + 1;
			valids[3] = id - 1;
			valids[4] = id - maxletters - 1;
		}
		if(id == (maxletters * maxletters)-1){
			valids[0] = id - maxletters;
			valids[1] = id - 1;
			valids[2] = id - maxletters - 1;
		}
	}
	//for(i=0;i<(maxletters*maxletters);i++){
	//}
	for(i=0;i<valids.length;i++){
		choices += '\n'+valids[i];
		if(old == valids[i] || pass == 1 || word=='') pass = 1;
		else pass = 0;
	}
	if(pass==1){
		
		document.getElementById(id).style.backgroundColor='#ffcccc';
	}
	return pass;
}

</script>