Jumble Puzzle Layout

I’m attempting to build a Jumble Puzzle on a web page. I have seven words and then a double jumble answer. I am assuming everyone knows what a jumble puzzle is and what they look like in the newspaper. I am looking for advise as to the best way to do this. I am using WordPress.

My thinking has been to put the jumbled letters to the left of the empty boxes. I have attempted to use images for the empty boxes. They each measure 173X29 px In a pinch I could put up an image of the entire playing “board”, letters and all.

If I create a two column page, the text in the left column and images in the right, the alignment does not seem to work. The text column ends up shorter than the images column. I also worry that on smaller screens it would create havoc with the layout. If I try to use the built in table feature I do not see a way to add images. I could go back to the classic editor and use html to create a table from scratch. If I put up the single image of the board there would be nothing on the page per se.

Again, I am looking for suggestions as to how this could be done with clean code. Your advice is appreciated.

Here is the link to what I have. Right now the layout gets confused on a small screen. I’d really like to keep the words on the left or immediately above the images.

Is flexbox a better option for this? I have not used it before and don’t know it limitations.

OR, would something like this work? A ul with two items, the “word” and the “image”. Float left and center on the page. Stack the seven ul on top of each other.

I don’t have a newspaper and I’ve never seen a jumble puzzle, not even Wikipedia could show me an example. I saw some (not visually, mind you) for download but I didn’t. :stuck_out_tongue:

Please post an image or a link to a working (or not) page. :slight_smile:

Erik, there are some images found at this google search.

Don has the jumbled letters to the left of the boxes, from what I’ve seen most other jumble puzzles have the letters above the boxes. Doing it that way should work better for smaller screens too.

The circles in the boxes are letters that create the bonus phrase at the bottom.

Though not related I did find a crossword puzzle here at SP done with the checkbox hack.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.