Crosswordex

About

Crosswordex's aim is to be the easiest way to compile your own crossword on the web. You simply add arbitrary words with associated clues and computer does its best to fit them into grid to make a crossword. The crossword is an English style crossword (as opposed to american) and also is not symmetric like a true crossword because that would be too hard.

Contact

I always like feedback so if you have something to day please get in touch, you can tweet me @crosswordex, send me a message on my personal website guestbook or email me webmaster@crosswordex.com And if you like the site please like/share it with your friends using the buttons on the left. You might also like my other web project dotsandboxes.org where you can play the pencil and paper classic.

Technology

I love the open web and wrote this app for a bit of fun in my spare time. It is pure svg/html5/javascript and designed "mobile-first".

Graphics

I'm using SVG for displaying the crossword. I simply create text and rectangles to represent the crossword state. The svg is created using the d3 library which also takes care of animating the letters to adjust themselves as you type. I'm using a few shared libraries so kudos for people who created this

d3 - Data driven visualization
JQuery - Ubiquitous kitchen sink library
SpinJS - Familiar customizable "waiting" spinner
FastClick - Code to make mobile sites appear more responsive by eliminating the usual 300ms delay between click and action
Masked-Input - Plugin to force the texbox to have certain format that I use in solving mode. Eg. the user has already guessed some of the letters in the word eg. "e__p_a__". I modified the library somewhat so that it accepts overtyping a letter.

Solving

All the calculations to work out how to fit the words into a crossword are farmed out asynchronously using webworkers. The webworker searches the tree as described in the algorithm section below. After 300ms it returns the best result it has so far I update the shown graphics when the results come back

Algorithm

This bit is quite trickly and I haven't mastered it yet... The problem is given a set of words, try to organize them into a a grid which is as aesthetically pleasing as possible. There is a thread about this on stack overflow. My approach follows this basic structure

Use a heuristic to work out the minumum boardsize that I think all the words will fit onto
Set up a function that evaluates how good a given crossword looks. You get more points for more interlocking words. you lose a lot of points for any "islands" of single words not attached to anything else
Order the words from largest to smallest
Search the tree to depth 3 and evaluate all results. Put the first word in the position which has the highest score. Then move on to the next word.

Design

I recently got interested in graphic design and have tried my best to make the website look good. As you can see, I'm not an expert but I've tried stick to a few simple rules when designing the site

Crosswordy Black and White, just like the newspaper version. Slightly off white to reduce the contrast and reflect that newspapers are not brilliantly bright themselves. And the font, as well as being attractive in its own right, reflects The Times. Not monospace though. Kept same font throughtout even though not good for computers.
Consistent & Familiar Anything clickable gives you a the same experience (hand cursor and goes green). Hamburger icon and spinner while you wait. On the share screen I thought the social media icons are familiar enough that I put my own theme on them
Animations Hopefully not too distracting but pleasing to see the crossword optimize itself. No animations for buttons for most responsive user experience. Classic web spinner for while you wait for some cases
Accessibility Unfortunately this is not an accessible site. As I've done this more for fun than anything else I've not put the effort in to make it work for everyone. One day I hope to.

If you have any ideas for improving the theme of this site or there's anything that is ugly then please let me know. I hope this will make cruciverbalists of us all (that is the name of someone who compiles a crossword.