Puzzle.js Reference: Options

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.

Options Model

Puzzle.js puzzles are configured by a wide variety of options. These options can be set in three ways:

Modes

Remember that a mode is nothing more than an amalgamation of property values. As such, every characteristic of a mode can be overridden.

default

OptionValue
data-text
data-text-replacements
data-text-charactersABCDEFGHIJKLMNOPQRSTUVWXYZ
data-text-shift-keyrebus
data-text-shift-lockfalse
data-text-solution
data-text-advance-on-typefalse
data-text-advance-stylecrossword
data-text-avoid-position
data-fill-classes
data-fills
data-fill-cycletrue
data-paths
data-path-max-directions2
data-path-stylestraight
data-edges
data-edge-stylebox
data-spokes
data-spoke-max-directions
data-spoke-allowed-directions*
data-spoke-levels1
data-spoke-stylesolid
data-clue-locations
data-clue-indicators
data-clue-positiontop-left
data-top-clues
data-bottom-clues
data-left-clues
data-right-clues
data-links
data-link-positiontop-left
data-extracts
data-extract-positionbottom-right
data-drag-paint-filltrue
data-drag-draw-pathfalse
data-drag-draw-edgefalse
data-drag-draw-spokefalse
data-unselectable-givensfalse
data-extra-style-classes
data-extra-styles
data-no-inputfalse
data-no-screenreaderfalse
data-show-commandsfalse
data-reset-promptClear all puzzle content?
data-puzzle-id
data-team-id
data-player-id

The default mode is always included, and names all options that can be defined.

linear

OptionValue
data-text-advance-on-typetrue
data-unselectable-givenstrue

The linear mode is used for single lines of text. Boxes are drawn only around editable characters.

<div class="puzzle-entry" data-mode="linear" data-text="m.ss.ng v.w.ls"></div>

crossword

OptionValue
data-text-advance-on-typetrue
data-clue-locationscrossword

The crossword mode builds crosswords with automatic clue numbering.

<div class="puzzle-entry" data-mode="crossword" data-text="@...|....|....|...@"></div>

crostic-grid

OptionValue
data-text-advance-on-typetrue
data-text-advance-stylewrap
data-text-avoid-positiontop
data-link-positiontop-left|top-right

The crostic-grid mode is used with the crostic-clue mode for a crostic grid and associated clues. In the main grid, cells are numbered and show a letter for the corresponding clue (specified via data-links with the format #|X). Clue answers are numbered, and content is automatically shared between grid and clue. In a crostic grid, typing and arrowing will wrap from one row to the next.

<div class="puzzle-entry">
<div style="min-width: 400px; background-color: white; padding: 10px;">
<div class="puzzle-grid" data-mode="crostic-grid" data-text=".....@.|......." data-links="1|C 2|A 3|C 4|C 5|C 6|B 7|C 8|B 9|B 10|B 11|A 12|C 13|A"></div>
<br>
<div style="display: grid; grid-template-columns: 160px auto; row-gap: 20px; align-items: center;">
<div>A. Not new</div>
<div class="puzzle-grid" data-mode="crostic-clue" data-text="..." data-links="11 2 13"></div>
<div>B. Left, on a map</div>
<div class="puzzle-grid" data-mode="crostic-clue" data-text="...." data-links="10 6 8 9"></div>
<div>C. Lights, Camera, ____!</div>
<div class="puzzle-grid" data-mode="crostic-clue" data-text="......" data-links="7 1 5 3 12 4"></div>
</div>
</div>
</div>

A. Not new
B. Left, on a map
C. Lights, Camera, ____!

crostic-clue

OptionValue
data-text-advance-on-typetrue
data-text-advance-stylewrap
data-text-avoid-positiontop
data-link-positiontop-left

See the crostic-grid section for information.

notext

OptionValue
data-text-characters

The notext mode prevents text input in the cells.

<div class="puzzle-entry" data-mode="notext" data-text="n.pe"></div>

sudoku

OptionValue
data-text-characters123456789
data-edges3x3
data-text9x9
data-text-shift-keycandidates

The sudoku mode makes a 9x9 grid with 3x3 regions. Characters are constrained to digits, which can be toggled on and off.

<div class="puzzle-entry" data-mode="sudoku"></div>

pathpaint

OptionValue
data-path-stylecurved
data-drag-draw-pathtrue
data-fill-cyclefalse

The pathpaint mode allows dragging (or shift-arrowing) between cells to draw paths and propagate fills.

<div class="puzzle-entry" data-mode="notext pathpaint" data-text="4x4" data-fill-classes="white yellow red" data-fills="1...|..1.|.2..|...2"></div>

trains

OptionValue
data-path-styletrack
data-drag-paint-fillfalse
data-fill-cyclefalse
data-drag-draw-pathtrue

The trains mode allows dragging (or shift-arrowing) between cells to create train tracks.

<div class="puzzle-entry" data-mode="notext trains" data-text="4x4"></div>
OptionValue
data-drag-draw-edgetrue
data-edge-styledots

The slitherlink mode allows dragging (or shift-arrowing) between dots to draw edges.

<div class="puzzle-entry" data-mode="notext slitherlink" data-text="4x4"></div>

spokes

OptionValue
data-drag-draw-spoketrue

The spokes mode allows dragging (or shift-arrowing) between cells to draw intersecting lines. The primary difference between spokes and paths are that spokes can emanate from any (or all) 8 directions from within any cell, allowing them to appear to intersect or cross existing spokes.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true">
{ "data-spokes": [
"......'",
".*-*-*.",
"..`.X|.",
".*.*.*.",
"..'.`|.",
".*.*.*.",
"'......"
] }
</div>

slant

OptionValue
data-drag-draw-spoketrue
data-spoke-allowed-directionsx
data-edge-styleoffset

The slant mode is a specialized version of spokes that only allows drawing in diagonal directions.

<div class="puzzle-entry" data-mode="notext slant" data-text="  1 |   2| 0  |    "></div>

bridges

OptionValue
data-drag-draw-spoketrue
data-drag-paint-fillfalse
data-fill-cyclefalse
data-spoke-allowed-directions+
data-spoke-levels2

The bridges mode is another specialized version of spokes that cycles through single and then double spokes.

<div class="puzzle-entry" data-mode="notext bridges" data-text="  1 | 4 2| 8  |    "></div>

solution

OptionValue
data-no-inputtrue

The solution mode turns off all input, so that a solution can be displayed.

<div class="puzzle-entry" data-mode="slitherlink solution" data-text="4x4" data-edges="....|.73.|.3b.|...."></div>

Options

data-text

ModeValue
default
sudoku9x9

The starting text for the puzzle cells. data-text can be any of the following:

Characters are written into the puzzle cells, with the following characters getting special treatment:

A cell can also be given contents that are larger than a single character, using data-text-replacements.

<div class="puzzle-entry" data-text="3x2"></div>
<div class="puzzle-entry" data-text="@.A|.#.|B.@"></div>

data-text-replacements

ModeValue
default

A way to replace a single character in the data-text option with a string of any length.

Currently, the only way to specify this option is with a JSON object using its key-value features. This can be expressed either as a property-value pair in a JSON object, or as an attribute with JSON contents.

<div class="puzzle-entry" data-text="235|7ET|SNW">
{ "data-text-replacements":
{ "E": "11", "T": "13", "S": "17", "N": "19", "W": "23" }
}
</div>
<div class="puzzle-entry" data-text="235|7ET|SNW" data-text-replacements="{ 'E': '11', 'T': '13', 'S': '17', 'N': '19', 'W': '23' }"></div>

data-text-characters

ModeValue
defaultABCDEFGHIJKLMNOPQRSTUVWXYZ
notext
sudoku123456789

The set of valid characters that can be provided in text input. Set it to "" to reject all text input.

<div class="puzzle-entry" data-mode="sudoku" data-text=".O..|...R|W...|..D." data-edges="2x2" data-text-characters="WORD"></div>

data-text-shift-key

ModeValue
defaultrebus
sudokucandidates

Sets shift key behavior when typing letters. There are two types of behavior:

<div class="puzzle-entry" data-mode="linear" data-text="a fruit:." data-text-shift-key="rebus"></div>
<div class="puzzle-entry" data-mode="linear" data-text="vowel(s):." data-text-shift-key="candidates"></div>
<div class="puzzle-entry" data-mode="linear" data-text="curse:...." data-text-shift-key="none" data-text-characters="!@#$%^&*()"></div>

data-text-shift-lock

ModeValue
defaultfalse

Acts as if the Shift key is always pressed, yielding data-text-shift-key behavior on every keystroke even if Shift is not actually pressed.

<div class="puzzle-entry" data-mode="linear" data-text="a fruit:." data-text-shift-lock="true"></div>

data-text-solution

ModeValue
default

Provides a string of characters forming the solution for the puzzle. Useful when the data-text option includes special characters that otherwise make it impossible to put the entire solution there.

data-text-solution can be any of the following:

<div class="puzzle-entry" data-mode="linear" data-text="p...#." data-text-solution="puzzle"></div>

data-text-advance-on-type

ModeValue
defaultfalse
lineartrue
crosswordtrue
crostic-gridtrue
crostic-cluetrue

Specifies whether the cell advances/retreats when typing and/or pressing backspace. When set, clicking a cell or pressing Space changes the character navigation direction from horizontal to vertical (unless there is only one row or column of text).

<div class="puzzle-entry" data-text="4x4" data-text-advance-on-type="true"></div>
<div class="puzzle-entry" data-text="4x4" data-text-advance-on-type="false"></div>

data-text-advance-style

ModeValue
defaultcrossword
crostic-gridwrap
crostic-cluewrap

Specifies how the cell position is advanced when typing or arrowing. With crossword style (the default), the character navigation direction changes from horizontal to vertical as described in data-text-advance-on-type. With wrap style, typing will always continue in the horizontal direction, and will also will wrap from one side of the grid to the other when typing, backspacing, or arrowing left or right.

<div class="puzzle-entry" data-text="....|...@|....|@..." data-text-advance-on-type="true" data-text-advance-style="crossword"></div>
<div class="puzzle-entry" data-text="....|...@|....|@..." data-text-advance-on-type="true" data-text-advance-style="wrap"></div>

data-text-avoid-position

ModeValue
default
crostic-gridtop
crostic-cluetop

Specifies an area to avoid when drawing text in a cell. Options:

<div class="puzzle-entry" data-mode="linear" data-text="AB..." data-clue-locations="all" data-text-avoid-position="top"></div>
<div class="puzzle-entry" data-mode="linear" data-text="AB..." data-clue-locations="all"></div>

data-fill-classes

ModeValue
default

Specifies a set of classes that can be used to provide background fills for cells. By default, clicking a cell will cycle through these classes.

Note that the names of these classes will be directly spoken by a screenreader.

<div class="puzzle-entry" data-text="3x3" data-fill-classes="white yellow red"></div>

data-fills

ModeValue
default

Specifies a background fill for each cell based on the classes provided by data-fill-classes. There are two types of values that can be specified per character:

data-fills can be any of the following:

<div class="puzzle-entry" data-text="3x3" data-fill-classes="white yellow red" data-fills="1.1|.2.|1.1"></div>

data-fill-cycle

ModeValue
defaulttrue
pathpaintfalse
trainsfalse
bridgesfalse

Specifies whether click/spacebar on a cell will cycle through the available fills specified in data-fill-classes. The default behavior is to cycle, but the pathpaint mode does not use the cycling behavior.

data-paths

ModeValue
default

Specifies a set of interior paths between cells.

data-paths can be any of the following:

data-paths also has two types of specification:

<div class="puzzle-entry" data-text=" 1 |4 8| 2 " data-paths="...|.6.|..."></div>
<div class="puzzle-entry" data-text=" 1 |4 8| 2 " data-paths="...|.f.|..."></div>
<div class="puzzle-entry" data-text="3x3">
{ "data-paths": [
".|...|.",
".*.*.*.",
".|...|.",
"-*-*-*-",
".|...|.",
".*.*.*.",
".|...|."
] }
</div>

data-path-max-directions

ModeValue
default2

Specifies the maximum number of path directions that can emanate from a cell. If left blank, then all directions are allowed. If the value is 1, then cells can be paired but longer chains will not be possible. If the value is 2, then chains of any length can be drawn. All other numeric values are also allowed, if you have a use for them.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-path="true" data-path-max-directions=""></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-path="true" data-path-max-directions="1"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-path="true"></div>

data-path-style

ModeValue
defaultstraight
pathpaintcurved
trainstrack

Specifies the way the path is drawn. Three drawing styles are provided: straight, curved, and track.

If the value ends in .svg, it is assumed to be a custom svg file for rendering paths and the svg is located with a file path relative to the puzzle page. See more information in the Styling Reference.

<div class="puzzle-entry" data-mode="notext pathpaint" data-text="4x4" data-fill-classes="white yellow red" data-fills="1...|..1.|.2..|...2" data-path-style="track"></div>

data-edges

ModeValue
default
sudoku3x3

Specifies a set of exterior edges between cells.

data-edges can be any of the following:

data-edges also has two types of specification:

<div class="puzzle-entry" data-text="6x6" data-edges="3x2"></div>
<div class="puzzle-entry" data-text=" 1 |4 8| 2 " data-edges="...|.6.|..."></div>
<div class="puzzle-entry" data-text=" 1 |4 8| 2 " data-edges="...|.f.|..."></div>
<div class="puzzle-entry" data-text="3x3">
{ "data-edges": [
"|------",
"|*.*.*.",
"|-----|",
".*.*.*|",
"|-----|",
"|*.*.*.",
"|------"
] }
</div>

data-edge-style

ModeValue
defaultbox
slitherlinkdots
slantoffset

Specifies the way the edges and bounding box are drawn. Five drawing styles are provided: box, dots, dash, offset, and none.

If the value ends in .svg, it is assumed to be a custom svg file for rendering edges and the svg is located with a file path relative to the puzzle page. See more information in the Styling Reference.

<div class="puzzle-entry" data-text="3x3" data-edge-style="dash">
{ "data-edges": [
"|------",
"|*.*.*.",
"|-----|",
".*.*.*|",
"|-----|",
"|*.*.*.",
"|------"
] }
</div>

data-spokes

ModeValue
default

Specifies an initial set of spokes between cells.

data-spokes can be any of the following:

Either way, the lines must represent a (2m+1) by (2n+1) grid where the centers are represented by any character (though * is a good idea) and spoke segments are represented by:

<div class="puzzle-entry" data-text="3x3">
{ "data-spokes": [
"......'",
".*-*-*.",
"..`.X|.",
".*.*.*.",
"..'.`|.",
".*.*.*.",
"'......"
] }
</div>

data-spoke-max-directions

ModeValue
default

Specifies the maximum number of spokes that can emanate from a cell. If left blank, then all directions are allowed. If the value is 1, then cells can be paired but longer chains will not be possible. If the value is 2, then chains of any length can be drawn. All other numeric values are also allowed, if you have a use for them.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-max-directions="1"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-max-directions="2"></div>

data-spoke-allowed-directions

ModeValue
default*
slantx
bridges+

Limits the directions spokes can be drawn from. The default value of * allows all directions. If a value of + is used, only cardinal directions are allowed. If a value of x is used, only diagonal directions are allowed.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-allowed-directions="*"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-allowed-directions="+"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-allowed-directions="x"></div>

data-spoke-levels

ModeValue
default1
bridges2

The amount of different types of spokes to cycle through each time a spoke is drawn, similar to the way data-fill-cycle operates. The default value of 1 draws a single spoke and then erases it when drawn again. The value of 2 will draw over a single spoke with a double spoke, which is provided in the default spoke svg files, then erases it when drawn over again. Up to 15 levels are supported, but anything beyond the cardinal directional double spokes require custom svg files.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-allowed-directions="+" data-spoke-levels="1"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true" data-spoke-allowed-directions="+" data-spoke-levels="2"></div>

data-spoke-style

ModeValue
defaultsolid

Specifies the way the spokes are drawn. Two drawing styles are provided: solid and dash.

If the value ends in .svg, it is assumed to be a custom svg file for rendering spokes and the svg is located with a file path relative to the puzzle page. See more information in the Styling Reference.

<div class="puzzle-entry" data-text="3x3" data-spoke-style="dash">
{ "data-spokes": [
"......'",
".*-*-*.",
"..`.X|.",
".*.*.*.",
"..'.`|.",
".*.*.*.",
"'......"
] }
</div>

data-clue-locations

ModeValue
default
crosswordcrossword

Clue numbers are the numbers that go in the upper left corner of crossword cells, KenKen cells, etc.

This property has three formats:

If the puzzle contains an element with a class of crossword-clues across or crossword-clues down, li clues within an ol element will be synchronized with the clue numbers.

<div class="puzzle-entry" data-text="@..|...|..@" data-clue-locations="crossword"></div>
<div class="puzzle-entry" data-text="@..|...|..@" data-clue-locations="all"></div>
<div class="puzzle-entry" data-text="@..|...|..@" data-clue-locations="crossword" data-text-advance-on-type="true">
<div class="crossword-clues across">
<b>Across</b>
<ol>
<li>Dad</li>
<li>Home for lions</li>
<li>Not off</li>
</ol>
</div>
<div class="crossword-clues down">
<b>Down</b>
<ol>
<li>Ink-based writing device</li>
<li>English article</li>
<li>Haircut</li>
</ol>
</div>
</div>
Across
  1. Dad
  2. Home for lions
  3. Not off
Down
  1. Ink-based writing device
  2. English article
  3. Haircut

data-clue-indicators

ModeValue
default

Clue indicators are the text (usually numbers) that go in the upper left corner of crossword cells, KenKen cells, etc.

This property has two formats:

<div class="puzzle-entry" data-text="@..|...|..@" data-clue-locations="crossword" data-clue-indicators="H I L O"></div>

data-clue-position

ModeValue
defaulttop-left

Specifies the position of the clue labels for inner cells, whether they are automatically generated by data-clue-locations or specfically provided by data-clue-indicators.

Valid values:

To specify the positions for multiple clue labels in a cell, use | characters between the positions.

<div class="puzzle-entry" data-text="@..|...|..@" data-clue-locations="crossword" data-clue-position="bottom-left"></div>

data-top-clues

ModeValue
default

Specifies clues along the top of the puzzle. Clues for each column are separated by | characters, and multiple clues per column are separated by spaces.

<div class="puzzle-entry" data-text="3x3" data-top-clues="1 2||3"></div>
1
23

data-bottom-clues

ModeValue
default

Specifies clues along the bottom of the puzzle. Clues for each column are separated by | characters, and multiple clues per column are separated by spaces.

<div class="puzzle-entry" data-text="3x3" data-bottom-clues="1 2||3"></div>
13
2

data-left-clues

ModeValue
default

Specifies clues along the left of the puzzle. Clues for each row are separated by | characters, and multiple clues per column are separated by spaces.

<div class="puzzle-entry" data-text="3x3" data-left-clues="1 2||3"></div>
12
3

data-right-clues

ModeValue
default

Specifies clues along the right of the puzzle. Clues for each row are separated by | characters, and multiple clues per column are separated by spaces.

<div class="puzzle-entry" data-text="3x3" data-right-clues="1 2||3"></div>
12
3
ModeValue
default

Specifies a set of link IDs for all cells not marked with @ in the data-text field. Two cells with the same link ID anywhere on the page will share their values. The format for data-links is a set of IDs with spaces between them. IDs are applied in order to the cells, skipping cells marked with @.

Link IDs are shown in cells according to the data-link-position field. Multiple values can be shown in each cell; separate the individual values for each cell with the | character, and specify multiple positions in the data-link-position field (see that section for an example).

Note that data-extracts is a similar property that uses a separate ID space and provides highlighting. It is perfectly valid for a single cell to use both.

<div class="puzzle-entry" data-mode="linear" data-text="......" data-links="1 2 3 4 5 6"></div>
<br>
<div class="puzzle-entry" data-mode="linear" data-text="......" data-links="6 5 4 3 2 1"></div>

ModeValue
defaulttop-left
crostic-gridtop-left|top-right
crostic-cluetop-left

Specifies the position of the link ID labels in the data-links field.

Valid values:

To specify the positions for multiple link ID labels in a cell, use | characters between the positions.

<div style="display: grid; grid-template-columns: auto auto; row-gap: 20px; column-gap: 20px; align-items: center; min-width: 250px; background-color: white; padding: 10px">
<div>simple ID</div>
<div class="puzzle-entry" data-mode="linear" data-text="..." data-links="1 2 3"></div>
<div>multiple labels</div>
<div class="puzzle-entry" data-mode="linear" data-text="..." data-links="2|X 3|Y 1|Z" data-link-position="top-left|top-right" data-text-avoid-position="top"></div>
<div>stealth</div>
<div class="puzzle-entry" data-mode="linear" data-text="..." data-links="3 2 1" data-link-position=""></div>
</div>
simple ID
multiple labels
stealth

data-extracts

ModeValue
default

Specifies a set of extract codes for all cells marked with a # in the data-text field. Two cells with the same code anywhere on the page will share their values, permitting the extraction of letters from a puzzle into an answer phrase.

The format for data-extracts is a set of codes, with spaces between them. Each code is applied to the next occurrence of #.

Link IDs are shown in cells according to the data-extract-position field. Multiple values can be shown in each cell; separate the individual values for each cell with the | character, and specify multiple positions in the data-extract-position field (see that section for an example).

Note that data-links is a similar property that uses a separate ID space and does not provide highlighting. It is perfectly valid for a single cell to use both.

<div class="puzzle-entry" data-mode="linear" data-text=" #uzzle " data-extracts="2"></div>
<br>
<div class="puzzle-entry" data-mode="linear" data-text="e#tracts" data-extracts="1"></div>
<br>
<div class="puzzle-entry" data-mode="linear" data-text="-> ## <-" data-extracts="1 2"></div>


data-extract-position

ModeValue
defaultbottom-right

Specifies the position of the extract labels in the data-extracts field.

Valid values:

To specify the positions for multiple extract labels in a cell, use | characters between the positions.

<div style="display: grid; grid-template-columns: auto auto; row-gap: 20px; column-gap: 20px; align-items: center; min-width: 250px; background-color: white; padding: 10px">
<div>simple ID</div>
<div class="puzzle-entry" data-mode="linear" data-text="###" data-extracts="1 2 3"></div>
<div>multiple labels</div>
<div class="puzzle-entry" data-mode="linear" data-text="###" data-extracts="2|X 3|Y 1|Z" data-extract-position="bottom-left|bottom-right" data-text-avoid-position="bottom"></div>
<div>stealth</div>
<div class="puzzle-entry" data-mode="linear" data-text="###" data-extracts="3 2 1" data-extract-position=""></div>
</div>
simple ID
multiple labels
stealth

data-drag-paint-fill

ModeValue
defaulttrue
trainsfalse
bridgesfalse

Specifies whether a dragging operation will continue to paint cells with the fill from the cell that was originally clicked.

<div class="puzzle-entry" data-text="3x3" data-fill-classes="white yellow red" data-drag-paint-fill="true"></div>
<div class="puzzle-entry" data-text="3x3" data-fill-classes="white yellow red" data-drag-paint-fill="false"></div>

data-drag-draw-path

ModeValue
defaultfalse
pathpainttrue
trainstrue

Specifies whether a dragging operation will draw an interior path between cells.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-path="true"></div>

data-drag-draw-edge

ModeValue
defaultfalse
slitherlinktrue

Specifies whether a dragging operation will draw an exterior edge between vertices.

When edge drawing is available, a new focus model is added to support the vertices. If cell focus and vertex focus are both available, you can switch between the two models by pressing the . key.

<div class="puzzle-entry" data-mode="notext" data-text="3x3" data-drag-draw-edge="true"></div>
<div class="puzzle-entry" data-text="3x3" data-drag-draw-edge="true"></div>

data-drag-draw-spoke

ModeValue
defaultfalse
spokestrue
wordsearchtrue
slanttrue
bridgestrue

Specifies whether a dragging operation will draw spokes between cells.

<div class="puzzle-entry" data-text="3x3" data-drag-draw-spoke="true"></div>

data-unselectable-givens

ModeValue
defaultfalse
lineartrue

Specifies whether cells with original contents are selectable with bounding boxes or not.

<div class="puzzle-entry" data-text="g.v.ns" data-unselectable-givens="false"></div>
<div class="puzzle-entry" data-text="g.v.ns" data-unselectable-givens="true"></div>

data-extra-style-classes

ModeValue
default

Specifies a set of classes that can be used to provide extra formatting for cells. This formatting will not be editable by the solver.

Note that the names of these classes will be directly spoken by a screenreader.

<div class="puzzle-entry" data-text="3x3" data-extra-style-classes="white yellow red"></div>

data-extra-styles

ModeValue
default

Specifies a class provided by data-extra-style-classes. for each cell. There are two types of values that can be specified per character:

data-extra-styles can be any of the following:

<div class="puzzle-entry" data-text="3x3" data-extra-style-classes="yellow red" data-extra-styles="0.0|.1.|0.0"></div>

data-no-input

ModeValue
defaultfalse
solutiontrue

Turns off all mouse and keyboard input for the puzzle. Useful for solutions, samples, and scenarios with multiple puzzle layers on top of each other.

<div class="puzzle-entry" data-mode="slitherlink" data-text="4x4" data-edges="....|.73.|.3b.|...." data-no-input="true"></div>

data-no-screenreader

ModeValue
defaultfalse

Turns off all screenreader support and leaves a screenreader message saying that this specific puzzle is not suppoerted in a screenreader. Use this option when you are doing something so special that the screenreader will not properly communicate the puzzle. Note that any puzzle options that do not yet have full screenreader support will also cause the puzzle to generate this message.

<div class="puzzle-entry" data-text="4x4" data-no-screenreader="true"></div>

data-show-commands

ModeValue
defaultfalse

Displays buttons below the puzzle, allowing for discovery of all the features provided by the interactive solver. The About button in particular shows mouse and keyboard controls for all behaviors permitted by the options chosen.

<div class="puzzle-entry" data-mode="slitherlink" data-text="6x4" data-show-commands="true"></div>

data-reset-prompt

ModeValue
defaultClear all puzzle content?

Specifies a prompt to show to confirm clearing the puzzle when the Reset button is pressed. The text of this option is shown in the dialog. Set to "" to suppress showing a prompt.

<div class="puzzle-entry" data-mode="slitherlink" data-text="6x4" data-show-commands="true" data-reset-prompt="Clear this slitherlink puzzle?"></div>
<div class="puzzle-entry" data-mode="slitherlink" data-text="6x4" data-show-commands="true" data-reset-prompt=""></div>

data-puzzle-id

ModeValue
default

Allows for a specifically-named identifier to be used for the puzzle, both for saved state in localStorage and for co-op scenarios. When not present, the identifier will be constructed from the page and the index of the puzzle among all .puzzle-entry objects on the page. When needed, the page portion of the identifier will be either the data-puzzle-page-id property of the body element, or if that is not present the window.location.pathname of the page.

<div class="puzzle-entry" data-text="3x3" data-puzzle-id="MyCustomId"></div>

data-team-id

ModeValue
default

Allows for a specifically-named identifier to be used for the team, to facilitate co-op scenarios. This can be set programmatically, and can be left blank if the whole world is on the same team.

<div class="puzzle-entry" data-text="3x3" data-team-id="MyTeamId"></div>

data-player-id

ModeValue
default

Allows for a specifically-named identifier to be used for the team member, to facilitate co-op scenarios. This can be set programmatically, and can be left blank if no player-specific information is needed.

<div class="puzzle-entry" data-text="3x3" data-player-id="MyPlayerId"></div>

Breaking Changes

data-state-key has been renamed to data-puzzle-id since it is now used for multiple scenarios.