Coding an Online Logic Puzzle

[Melody Burton]

Hi, I'm part of a team of volunteers creating a 'fun' web page for a not-for-profit organisation. I've written a logic puzzle relating to our organisation. It appeared in our journal but I'd like to make an online, interactive version, like the logic puzzles on this site, which are great. I was a programmer many moons ago so can do a bit of coding but I don't know where to start, what language they are coded in, if you can buy or subscribe to software to help you create them. We aren't commercial and I can't see us ever doing more than 1 or 2 so we wouldn't want to pay a lot. All advice and suggestions welcome ... thanks.
Melody

[fiddleback]

There are two big parts, the layout and the interaction.

The layout is the position of the grids, the labels, the clues, and any other buttons you might want (undo, etc.). The grid & label part is probably the trickiest. If you're comfortable with html or css, you could do it that way. If you're happy with some other drawing program, you could use that to generate an image of the grid, including labels.

The interaction is how the user moves or clicks, and how your system responds. This you'll probably handle with javascript. At the minimum, you'll need to be able to toggle individual squares between three states (empty, X, and checked) and evaluate the grid for correctness. You could toggle squares by swapping images, replacing text characters, or altering the color of the individual squares. You can evaluate the grid by comparing the state of each square to an answer key stored in a javascript array.

This site provides quite a bit more than that to make the experience comfier: corresponding labels highlight when you mouseover a square, undo, marking (and moving) "finished" clues, filling in rows and columns with X symbols when you check a square, etc. They're not strictly necessary, but they're all possible with some combination of html, css, and javascript.

It'd be a decent project for learning the ropes. Though I do find laying things like this out in a browser can be a bit tricky. When coding layouts, it often feels like the browser is understanding your instructions as vague guidelines rather than absolutes. You may find it takes several attempts to get things positioned where you intend.

You might google for "javascript minesweeper" and look at some of the tutorials. Minesweeper has fairly similar layout and interaction. The tutorials will give you and idea of how much work you're looking at.

Enjoy.

[boxeeboxeebox]

There's a nifty online logic puzzle solver made by Johannes Singler, where you can enter your own puzzles:
https://www.jsingler.de/apps/logiklo...ni:5,p:!(),v:0)

I'd reach out to him and see if he can point you in the right direction. I believe it's all Javascript, so there's no other component that would need to be added to your site other than the code on the page.

[Melody Burton]

Thank you both so much and apologies for not replying sooner. I got involved in finishing some other parts of the project and have only just come back to look at the Logic puzzle. Your advice is very helpful.