JavaScript Crossword

**RobG** · Jul 23 '05, 06:24 PM

Re: JavaScript Crossword

Richard wrote:[color=blue]
> I have tried to create a javascript puzzle where by the grid is filled
> with numbers from 1 to 26 and another grid listed 1 to 26 where each
> number relates to a letter. Once you figure out the number to letter
> sequence in the 2nd grid, you fill all the squares labeled with that
> number....poor explanation but the HTML will explain it!
>
> What I can't seem to manage to work is getting the javascript to take
> the selected letters and place them in the correct squares on the main
> grid.[/color]
[...]

No. There really is no need to post 1,500 lines of code when
you could have done it in far fewer lines.

Here is something like what you want. It builds the table and
adds options to the select dynamically. Put your initial values
into arrays, the script will build your crossword. Put the
solution into the "solveCrossword " function if you want.

There is a function to restore the entire crossword to the
initial values, and another for an individual cell, but there
isn't one to restore all the cells of a set value.

You should also create a small table where the current
selections are put so users can see what they've already
selected. Another way is to remove selections from the options
and then put them back when the cell value is restored.

Uses document.getEle mentById without testing so old IE and
Netscape not supported. Tested in Firefox, Netscape 7.2 & IE 6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Crosswor d</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..box
{position:relat ive; top:20px; border-right:1px solid #888888;
left: 20px; border-bottom:1px solid #888888;}
..a, .b
{border-top:1px solid #888888; border-left:1px solid #888888;
height: 2em; width: 2em; text-align: center;
line-height: 2; position: absolute;}
..b {background-color: #888888;}
</style>
<script type="text/javascript">
function buildCrossword( elem){
var base = document.getEle mentById(elem);
var r = [];
r[0] = ['' ,'1','2','3'];
r[1] = ['4','5','4',''];
r[2] = ['' ,'4','',''];
r[3] = ['6','7','2','8'];

var oDiv;
var i = r.length; // number of rows
var w = 2; // cell width value
var h = 2; // cell height value
var u = 'em'; // height & width unit
base.style.widt h = r[0].length*w + u;
base.style.heig ht = i*h + u;

while (i--){
var j = r[0].length; // number of cells in each row
while (j--){
var v = r[i][j];
oDiv = document.create Element('div');
oDiv.style.top = i*h + u;
oDiv.style.left = j*h + u;
if (/\w/.test(v)) {
oDiv.className = v + ' a';
oDiv.onclick = function () {restoreCell(th is)};
oDiv.appendChil d(document.crea teTextNode(v));
} else {
oDiv.className = 'b';
}
base.appendChil d(oDiv);
} } }
function addNumSelects(s ){
var sel = document.getEle mentById(s);
var i=0;
do {
sel.options[i] = new Option(i+1, i);
} while (++i < 26);
}
function addLetSelects(s ){
var sel = document.getEle mentById(s);
var i=0;
do {
sel.options[i] = new Option(String.f romCharCode(65+ i), i);
} while (++i < 26);
}
function updateCW(x,n,l) {
n = n[n.selectedIndex].text;
l = l[l.selectedIndex].text;
var d = document.getEle mentById(x).get ElementsByTagNa me('div');
var i = d.length;
var z;
while (i--) {
z = d[i].firstChild;
if (z && z.data == n) {
z.data = l;
} } }
function restoreCell(c){
var cValue = c.firstChild.da ta;
var oValue = c.className.spl it(' ')[0];
if ( cValue == oValue) {
alert('This is the original value');
} else {
if (confirm('Resto re cell to original value ('
+ oValue + ') ?')) {
c.firstChild.da ta = oValue;
} } }
function restoreCrosswor d(elem){
document.getEle mentById(elem). innerHTML = '';
buildCrossword( elem);
}
function solveCrossword( x){
var r = [];
r[0] = ['' ,'R','O','B'];
r[1] = ['H','U','N', ''];
r[2] = ['' ,'N','' , ''];
r[3] = ['S','T','O','P'];
var d = document.getEle mentById(x).get ElementsByTagNa me('div');
var rLong = r.length;
var rWide = r[0].length;
var n = rLong*rWide;
var v;
for (var i=0; i<rLong; i++){
for (var j=0; j<rWide; j++) {
v = r[i][j];
n--;
if (/\w/.test(v)) {
d[n].innerHTML = v;
} } } }
</script>
</head>
<body>

<form action="">
<select id="numSelect" >
</select>
<select id="letSelect" >
</select><br>
<input type="button" value="Update crossword"
onclick="update CW('box',this.f orm.numSelect,
this.form.letSe lect)">
<input type="button" value="Restore crossword"
onclick="restor eCrossword('box ');">
<input type="button" value="Solve crossword"
onclick="solveC rossword('box') ;">
<script type="text/javascript">
addNumSelects(' numSelect');
addLetSelects(' letSelect');
</script>
</form>

<div class="box" id="box">
<script type="text/javascript">
buildCrossword( 'box');
</script>
</div>

</body>
</html>

--
Rob

**Richard** · Jul 23 '05, 06:27 PM

Re: JavaScript Crossword

Thanks for your help!

I have taken snippets of your code and put into mine, but it doenst
seem to work in Firefox, instead of a printed table I just get a list
of numbers that should have been tabulated.

Do you know why?

**RobG** · Jul 23 '05, 06:35 PM

Re: JavaScript Crossword

Richard wrote:[color=blue]
> Thanks for your help!
>
> I have taken snippets of your code and put into mine, but it doenst
> seem to work in Firefox, instead of a printed table I just get a list
> of numbers that should have been tabulated.
>
> Do you know why?[/color]

How can I tell without your code? What I posted was developed
in Firefox and tested in IE. It stands independently from your
code, which I thought was verbose and confusing.

I was just trying to demonstrate a different (better?) way of
implementing your functionality, though I was only guessing at
what you were trying to do.

--
Rob

JavaScript Crossword

JavaScript Crossword

Comment

Comment

Comment