Nine-Dots-Puzzle

The famous Nine-Dots-Puzzle as an interactive 2D app.
Try it out and feel free to add it to your homepage.

Setup as a WordPress plugin

Simply follow these instructions.

Setup as a JavaScript app

1. Upload the script nine_dots_puzzle.js to your web browser.
2. Include the script into your HTML file. For example, add <script src="nine-dots-puzzle.js" defer></script> to your HTML header.
3. Add <canvas id="canvas-nine-dots-puzzle" width="250px" height="250px"></canvas> wherever you want the puzzle to appear.

To customize the puzzle, add HTML5 data attributes to the canvas element. For instance, <canvas id="canvas-nine-dots-puzzle" width="300px" height="300px" data-size="300px" data-colour_background="purple”></canvas> will insert the puzzle as a purple canvas of 300 x 300 pixels.

The following data attributes are available:

• data-size: The width and height of the puzzle (Default: “250px”)
• data-show_hint_button_after_round: The number of rounds after which a ‘hint button’ is shown (Default: “2”)
• data-text_button_hint: The text on the hint button (Default: “Hint”)
• data-text_hint: The hint that is displayed after clicking the hint button (Default: “Think outside the box.”)
• data-colour_background: The background colour (Default: “rgb(0, 0, 128)”)
• data-colour_neutral: The ‘neutral’ colour (Default: “rgb(153, 221, 255)”)
• data-colour_success: The ‘success’ colour (Default: “rgb(0, 128, 0)”)
• data-colour_fail: The ‘fail’ colour (Default: “rgb(179, 0, 0)”)
• data-colour_face: The ‘face’ colour (Default: “rgb(255,217, 26)”)
• data-colour_text: The text colour (Default: “white”)
• data-colour_text_background_dark: The ‘text_background_dark’ colour (Default: “rgb(51. 51, 51)”)
• data-colour_text_background_light: The ‘text_background_light’ colour (Default: “rgb(115, 115, 115)”)