ASP/DHTML Crossword Project

This is a little project of mine, which started in March 2002 as an exercise in Javascript and CSS, and has evolved into something rather more advanced. With an ASP back-end, this is now a very customisable crossword puzzle generator, and I'm always adding new features. Ultimately, this is still very much a prototype, and feedback, comments or suggestions are always appreciated.

Across:

1. Friend's boat partially goes down deep (10)
6. Crap case of slowish vehicles (4-4)
7. Made after hearing problems (4)
8. Writer of note in shit (5)
10. Mad about toilet (5)
12. Problem with cattle (4)
14. Something for able scot to overcome (8)
16. Flat rock music? (5-5)

Down:

1. Name of redcar man? (4)
2. Little horse's head? (4)
3. Damage crew of 1000 (5)
4. Say 'hello' to posh yacht (3)
5. Overtook a lasagne (5)
6. Seperate bit (4)
9. Liberate Reef (4)
10. Puts a lot into plans (5)
11. Very eastern riser (5)
12. Sad Colour (4)
13. Wife elicits touch (4)
15. View ocean, we hear (3)

Technical Stuff

Everything relating specifically to a crossword is contained within a top-level server-side include file, in this case: crossword_01.inc. This is entirely self-contained code, could be dropped into any page, and consists of:

• A static ASP include file - crossword_engine.inc which contains all the ASP logic.
• The HTML to open and close the <form> and all the text and formatting for the clues
• A customisable Javascript file containing the data specific to this puzzle: crossword_01.js.
• The Javascript Engine file which renders the DHTML and CSS, according to the settings in the above data file: crossword_engine.js.

Client-Side: The DHTML rendered by the engine script is based on applying CSS properties to <div> elements, and <input type="text"> form elements. Everything with the grid is absolutely positioned via an array of rows, each of which contain an array of x-by-y squares. Every square div is assigned a type - type 0 is a 'dead' square, regular squares are type 1, and type 2 represent squares at the beginning of a clue. If you look at the arrays in the data file, you'll see that the [0]s, [1]s and [2]s correlate exactly to the layout of the grid as it appears on screen.

One little feature is the option to specify a crossword image, which will appear instead of the DHTML on older browsers, and which will also be rendered when printed, via a media descriptor in the CSS.

Server-Side: It's very simple ASP/VBScript and can all be found in the ASP include file as detailed above. Basically the form submission returns a string of characters from the grid, and if they match the characters of the correct answer (i.e. the correct letter in every input box) then you have got it right. There is also a 'generate' mode, which can be accessed by adding '?mode=generate' to the url, whereby the crossword creator fills in the correct answers, and then submits, and it will generate the string, which to be matched when people try to solve the puzzle.

Known Issues as at 20/3/2002:

• ASP: Submitted form values in an array. For some reason, the string is assembled in a different order by the VBScripting host on my local machine, and the one on the depro server. This is not necessarily a problem, but does mean that solution strings are not necessarily compatible from one platform to another.
• USABILITY: I want the automatic movement of the cursor to be as intuitive as possible, but right now, possible across moves are simple given priority over down moves, and if neither is available, then the input box blurs, which leads to problems like a box getting skipped if you type too quickly, or a step across even when you've been filling in a down answer.

Possible Future Additions:

• Make the generator mode far more advanced and administrator-friendly, by giving the option to load and save .txt files containing the string data on the server. There may also be an admin/creation tool to generate crossword grids, which should be easy enough, as it is array-based. But I'm not really a server-side developer.
• Save a cookie with the stuff that has been inputted so far, for when people come back to the page.
• Add more options to the javascript data file, to make the crossword more customisable.
• Dynamically anchor the clues to the relevant starting points on the grid, for increased usability and quicker input.