/ Html Tutorials / By

Interactive Puzzle Gallery: Publish Multiple Puzzles Online

Overview

Interactive puzzles don’t just attract attention — they keep visitors engaged on your website. With Puzzle Maker Pro, you can publish a gallery of puzzles on a single page, allowing readers to switch between different puzzles in a dropdown menu.

This setup is ideal if you want to showcase multiple samples of your work, give fans variety, or create a dedicated “Try Puzzles” section on your site.

Required Modules

  • Any Puzzle Maker Pro module that supports HTML output
    (currently available for Binary and Queens puzzles, more coming soon)

Preparation

Before you start, make sure you have:

  • Several puzzles created in Puzzle Maker Pro
  • Hosting access to your website
  • A folder where you’ll upload the puzzle files

Exporting with HTML Output

  1. Go to the module that contains your puzzle.
  2. Open the Output Settings tab.
  3. Check HTML output (you can combine this with other formats).
    • [Screenshot: Output Settings with HTML selected]
  4. Click Create.
    • Puzzle Maker Pro will generate a new puzzle (or multiple puzzles if batch options are used) with the selected outputs.

HTML Puzzle Setup

On the Branding tab, you’ll find HTML options where you can:

  • Set a custom title for the page
  • Choose a custom filename for the puzzle files

Each exported puzzle will generate three required files with the same base name:

  • puzzle-name.html – the puzzle player page
  • puzzle-name.json – puzzle configuration
  • puzzle-name.svg – puzzle graphics

Optional: icons or image files should also be in the same folder.

Step-by-Step

1. Collect the Files

Export several puzzles and gather them in one folder, for example:

/puzzles/
  puzzle-01.html
  puzzle-01.json
  puzzle-01.svg
  puzzle-02.html
  puzzle-02.json
  puzzle-02.svg
  puzzle-03.html
  puzzle-03.json
  puzzle-03.svg
  • [Screenshot: Folder with multiple puzzle files]

2. Create the Gallery Page

  1. Choose one of the .html puzzle files and copy it to index.html.
    • This will be the main page that visitors load.
    • All puzzle HTML files are identical — the name is what matters.
  2. In the same folder, create a file named puzzles.json.
    • This file lists the available puzzles and links them to their configuration.
    • Example: [ { "id": "01-binary", "name": "Binary 8x8 (0 and 1)", "config": "puzzle-01.json" }, { "id": "02-random", "name": "Binary 8x8 Random Letters", "config": "puzzle-02.json" }, { "id": "03-color", "name": "Binary 8x8 Color Circle", "config": "puzzle-03.json" } ]
    • [Screenshot: puzzles.json opened in text editor]
  3. Save puzzles.json in the same folder as index.html.

Note: The newest Puzzle Maker Pro update will also automatically generate a puzzles.json file and an index.html file when you create multiple puzzles at once.

3. Upload to Your Website

  1. Upload the entire puzzle folder to your web server.
  2. Visitors can now open the gallery page at: https://yourwebsite.com/puzzles/index.html

4. Test the Dropdown Menu

  • Load the page in a browser.
  • You should see a dropdown menu with all puzzle names listed from puzzles.json.
  • Selecting a puzzle will load it instantly in the same page.

Outcome

You now have a working interactive puzzle gallery page.

  • Visitors can choose between multiple puzzles from a dropdown menu.
  • Each puzzle works the same way: click cells to solve, validate solutions, track time.
  • Errors are highlighted visually, keeping the solving experience engaging.

This approach is perfect for:

  • Puzzle book publishers who want to offer several samples
  • Educators creating a classroom puzzle hub
  • Etsy or KDP sellers who want to show puzzle variety before purchase

Further Reading

Shopping Cart