Nonograms Lab

This slide deck provides a walkthrough on how to implement a Nonograms puzzle webpage with JS. This supplements DOM manipulation and event practice (Module 2 of CSE 154), and introduces some drag/drop examples with the mousedown, mouseover, and mouseup events!

Provided Code

We have provided the HTML (nonograms.html) and CSS (nonograms.css) you will need for this lab. You will only need to modify each of these files slightly for a few parts of the lab. Otherwise, you will be just writing JavaScript code in a new file called nonograms.js.

Note: We also have other nonogram puzzles of larger sizes (10x10, 15x15, 20x20) if you'd like to use these instead of the small one. These HTML files use the same CSS file.

One thing to keep in mind is that the puzzles in these HTML files were actually created using JS! But generating a DOM puzzle grid using nonogram constraints is a bit tedious for a lab. That said, we encourage you to think about how the puzzle grid could be created using DOM manipulation methods we've learned!

The working solution can be found here.

Part I: Make an alert pop up when a user clicks a tile

First, we're going to practice attaching event-handlers to a collection of existing DOM elements. Write a JavaScript file nonograms.js that sets up event handlers when the page loads.

Specifically, it should attach a function to each tile in the grid (which has the class .box) so that when a user clicks on that tile, an alert pops up with the message, "You clicked a tile!".

Part II: Make a single tile turn black when its clicked

The second task is to add functionality to the page so that a single tile is filled in when a user clicks on it. There is an existing class .filled that handles the styling for you in the CSS. You should add this class to the tile that is clicked to fill it in.

The next slide provides an example of expected output.

Part II: Expected Output

Below is an example of the second square in the second column having been filled in after a user has clicked it.

Part IV: Add Hover Effects

Now that you have made it so that a user can fill and clear each tile, add code that highlights the borders of each tile that is hovered.

Note that this actually doesn't require any JavaScript! CSS3 lets us add pseudo-selectors to elements on the page. :hover is a particularly useful one here. Modify the CSS slightly so that any tile (with the class box is hovered over, it has a box-shadow of 0px 0px 2px 2px #111111 (no horizontal/vertical distance but a 2px blur and 2px spread).

The next slide provides an example of expected output.

Part IV: Expected Output

Below is an example of the second square in the second column being highlighted with a box shadow as a user hovers their mouse over it.

Part V: Add a "Clear" Button to the Page

Sometimes, you just make a lot of mistakes and want to start completely over. It can be a pain to manually click each filled tile (or refresh the page) to clear the puzzle. Add a button to the nonograms.html with the label "Clear" that clears all filled tiles by removing all .filled classes. If you'd like, you can add a confirm in this event handler so that a user has a chance to think twice before clearing all their hard work!

Part VI: Drag and Fill

Now that you can fill multiple tiles, don't you want to optimize your solving speed? Add functionality to the page so that when a user clicks on a tile, holds, and drags across the tile-grid, the tile they click toggles the .filled class and any square in their path is changed to have the same state as the clicked tile (after it has been filled/cleared).

In other words, if the tile that was clicked was filled in, it should be cleared and then any tile that is passed while the user is dragging their mouse (until they lift their finger off of the mouse button) should also be cleared if it isn't already.

If the user clicks outside of the tile grid and then drags their mouse into the tile grid before letting go of the mouse button, no tiles should be changed.

Part VII: Implement X-Filling

Many solvers of nonograms like to mark tiles that they know won't be filled with an "x". This makes it easier to quickly see what tiles are left that can be filled.

Add a class called crossed-out to nonograms.css that gives an "X" as a background image to a filled tile whenever it is clicked, using this background image: x.png.

Note that the dimensions of this .png file are 256 x 256 pixels, so you should use the background-size value of 100% when setting the background image.

The next slide provides an example of expected output.

Part VII: Expected Output

Below is an example output after a user has clicked on a filled cell, turning it into an x to indicate it isn't be filled in the solution. Again, the x should appear in the background only if a tile that has the .filled class is clicked (where the .filled class should then be replaced with the .crossed-out class). Note that the square above it has been filled in previously to indicate that the user has determined that square should be filled in the final nonogram solution.

Challenge Problems