Puzzle.js Reference: Dots

Note: while Puzzle.js puzzles store their state locally (via localStorage), that behavior is inhibited on this page to make it easiest to see exactly what markup produces exactly what result.

Overview

Some puzzles have dots that must be connected to draw shapes, mark items, etc. These puzzles may or may not have accompanying grids. With puzzle.js, you can designate non-grid areas as “dot zones” and ask your solvers to draw the lines. These lines are fully integrated with undo, saved state, and co-op functionality.

There are two highly related flavors of dot-to-dot support: freeform and list-based.

Freeform dot-to-dot

• Mark any div in your puzzle-entry with the class puzzle-dot-zone, and it can support dots.
• Add a data-dots attribute to the div to specify dot positions. Each dot is specified with either x|y or x|y|label, and spaces go between the dot specifications.
• You can add content to the puzzle-dot-zone, or simply give it a CSS background that is any image or SVG file.

Dot coordinates are scaled to the data-dots-view-box attribute if it exists, or the size of the puzzle-dot-zone div if it does not.

You can specify that each dot can have at most one line by setting the data-dots-exclusive attribute.

List-based dot-to-dot

• Mark any div in your puzzle-entry with the class puzzle-dot-zone, mark a child with the class puzzle-dot-list-center, and then place elements on either side of that with the class puzzle-dot-list.
• The puzzle-dot-list-center child will be the area where dots are placed.
• The puzzle-dot-list elements will have their children spaced out to span the height of the center element, and each will be centered.
• You can add content to the puzzle-dot-list-center, or simply give it a CSS background that is any image or SVG file.
• Overall positioning will look like this example:

You can specify that each dot can have at most one line by setting the data-dot-exclusive attribute.

Styling

• Dot size can be changed with the --puzzle-dot-size CSS variable.
• Other dot properties can be changed with a .puzzle-dot CSS rule.
• Dot labels can be changed with a .puzzle-dot::after CSS rule.