JSON Sample 3: Add a puzzle grid to any blog or web page


It's easy to include an NYT crossword grid on any blog or web page. Colors, size, and other style details are completely under your control. Answers can be hidden or displayed.

The grid to the right hides shows the current puzzle in default style. The answers (if available) are held, meaning they are not revealed until the grid is clicked. The Clue Tracker option is turned on, meaning you can hover over the grid to see the corresponding clues.

There is a real-world example in a TypePad blog at www.jimhblog.com.

The easiest way to add a grid

There are only three steps. The first two are done once and only once. The final step is added for each grid. Each step is described in detail below.

  1. Provide style information for your grids.
  2. Include two JavasScript files somewhere on the page before the first grid.
  3. Add a single line of code at each location where you want to insert a grid.

What's new in Version 2.1?

Since the demise of BeMoreSmarter.com, there are no longer any users of previous versions of this software, and filenames have been standardized to grid.css and grid.min.js.

JQuery should now be downloaded from "https://code.jquery.com/jquery-3.2.1.min.js".

Step 1: the CSS styles

If you like the default style and have access to the <head> section, all you need to do is include this one line:

<link href="https://www.xwordinfo.com/JSON/grid.css" rel="stylesheet" />

But typically you'll want to have more control over how your grids look. In the TypePad example at www.xwordblog.com, style information is  added using the "Custom CSS" tool. Your blog will have something similar. Here is the information in grid.css which you can copy into you site. Modifying the default styles and including multiple styles in a page are described later.

.xiWrapper { font-family:Tahoma, Helvetica, Sans-Serif; float:right; line-height:normal; text-align:left; margin:6px 0px 6px 12px; padding:4px; }
.xiTitle { font-size:12px; margin-bottom:2px; color:#800000; font-weight:bold; line-height:normal; }
.xiAuthor { font-size:11px; margin-bottom:2px; color:#000000; }
.xiNotepad { background-color:#fffff0; font-size:10px; padding:2px; border: 1px solid #505050; margin-bottom:3px; display:none; }
.xiTable { background-color:White; border-collapse:collapse; }
.xiTable td { padding:0px; margin:0px; width:16px; height:16px; font-size:12px; border:1px solid black; text-align:center; vertical-align:middle; }
.xiTable .xiBlack { background-color:#000000; }
.xiTable .xiCircle { background-color:#ffff00; }
.xiTable .xiRebus { font-size:9px; }
.xiCopy { font-size:10px; color:#505050; margin-top:1px; margin-bottom:3px; }
.xiOuter { margin-top:1px; height:40px }
.xiInfo { line-height:normal; text-align:left; z-index:201 }

Step 2: the JavaScript include files

These two lines must be included once on your page:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.xwordinfo.com/JSON/grid.min.js"></script>

If you have access to the <head> section of your page, these can be inserted there. If not, these lines can be included anywhere on the page, as long as it is before the first grid is displayed. In my XWord Blog example, I create an HTML module that sits in the top left of each page. It includes only these two lines and is not visible. The lines can be added to any visible module as well, say the blog title module, as long as it comes early in the page.

Do not include them more than once on any page.

Step 3: the call to xiInsertPuzzle for each grid you want to display

After the above setup is done just once, each grid requires a call to xiInsertPuzzle at the location on the page where the grid is to appear. There are several parameters. All are optional but typically at least the first is included. Here is the general form and there are many examples below:

<script>xiInsertPuzzle(date, displayFlag, trackFlag, wrapperName);</script>

Simplest example


Leaving out all the function parameters means each will use its default:

  1. The current puzzle is displayed
  2. The solution will be displayed (if available)
  3. Clue Tracking is disabled
  4. The default wrapper is used

NOTE: The rest of the example on this page leave out the <script> and </script> tags but they must be included in each case.

Parameter 1: Specify the date


The grid to the right uses the first call above. Note that this parameter is always enclosed in quotes. The "current" puzzle is the most recent one available at the NYT website, and "previous" is the one before that.

Parameter 2: Display the answers? (true, false, or "hold" for click)

xiInsertPuzzle("2/16/1996", false);    // answers are hidden
xiInsertPuzzle("2/16/1996", "hold");    // answers are hidden until the grid is clicked -- note quotes!

The default value for parameter 2 is true.

The grid on the left here has the second parameter set to false (no quotes.) The answers are always hidden. Clicking on the grid goes to the XWord Info page for that puzzle.

The grid on the right uses "hold" (with quotes) to hide the answers until the grid is clicked. A second click goes to XWord Info.

Parameter 3: Enable Clue Tracker

xiInsertPuzzle("previous", "hold", true);

This example shows yesterday's puzzle ("previous") with the answers hidden until clicked ("hold") and Clue Tracker turned on (true, no quotes.)

Hover over the grid to see the across and down clue for each grid location. This works both before and after answers are revealed.

Note that padding is automatically added below the grid to provide room for the answers.

Clue Tracking adds considerably to the size of the AJAX call. Instead of just single letters coming down, all the clues are downloaded and stored locally before the grid can be displayed. This should not be a problem unless there are many (dozens?) of grids on a page, but limiting Clue Tracking will help with performance.

Parameter 4: Changing the Style by changing the wrapper

xiInsertPuzzle("previous", true, false, "xiWrap2");

You can change every part of the style through your own CSS. Some additional styles are included by default in grid.css and you can use those as models to create your own styles.

The grid at the right uses style xiWrap2. It's much more compact than the default style but the grid is still readable.

Just as with the default style, you can change the display style to false or hold, and you can turn on Clue Tracker if you want.

xiInsertPuzzle("previous", true, false, "xiWrap3");

The xiWrap3 style is even smaller.

xiInsertPuzzle("previous", true, false, "xiWrap4");

The styles specified with xiWrap4 are probably too small for many readers but it does show how crisp the text can be, even at this tiny size.

xiInsertPuzzle("previous", true, false, "xiWrapLeft");

Of course the wrapper can float left rather than right. You probably need to adjust left and right margins as well to make everything look right.

Puzzles with special features -- circles, rebus, and notepad

xiInsertPuzzle("9/11/2008", "hold", true);

Here is a puzzle with everything. It has a particularly long notepad. The solution is held until the grid is clicked. Some of the squares have circles, identified with the .xiCircle style (yellow here.) It has rebus entries. Note that they are fully expanded once you click on the grid. And Clue Tracking is turned on.

You can be as elaborate as you like with circles, even specifying a background image (a circle might be nice) if you want.

A couple of puzzles with special handling

xiInsertPuzzle("11/21/1993", "hold", true);

This is just for fun. Click the grid to see the solution to the first puzzle of the Will Shortz Era.

xiInsertPuzzle("6/13/2010", "hold", true);

Here's the Flag Day 2010 puzzle. Again, click the grid to reveal answers.

That's it. Experiment on your own blog until you get the size and styles that work best for you.

Note that if you use different wrappers, you only have to specify the styles that are different than the defaults. Similarly, you can leave out all the font-family information to pick up the default fonts for your own page. This might make the grids look better integrated into the rest of your site.

If you're curious, the additional styles defined in grid.css are copied below.

Please let me know if you decide to use this on your own site.

.xiWrap2 { font-family:Tahoma, Helvetica, Sans-Serif; float:right; line-height:normal; text-align:left; margin:6px 0px 6px 12px; padding:4px; }
.xiWrap2 .xiTitle { font-size:11px; color:black; background-color:#FFE4B5; padding:2px 0px; text-align:center; }
.xiWrap2 .xiAuthor { font-size:10px; }
.xiWrap2 .xiTable { background-color:#FFF5EE }
.xiWrap2 .xiTable td { width:12px; height:12px; font-size:10px; }
.xiWrap2 .xiTable .xiBlack { background-color:#A0522D;
.xiWrap2 .xiTable .xiRebus { font-size:8px; }
.xiWrap2 .xiCopy { font-size:10px; }

.xiWrap3 { font-family:Tahoma, Helvetica, Sans-Serif; float:right; line-height:normal; text-align:left; margin:6px 0px 6px 12px; padding:4px;}
.xiWrap3 .xiTitle { font-size:10px; margin-bottom:2px; color:#800000; font-weight:bold; }
.xiWrap3 .xiAuthor { font-size:10px; }
.xiWrap3 .xiTable { background-color:#F5FFFA; }
.xiWrap3 .xiTable td { width:11px; height:11px; font-size:9px; }
.xiWrap3 .xiTable .xiBlack { background-color:#006400; }
.xiWrap3 .xiTable .xiRebus { font-size:8px; }
.xiWrap3 .xiTable .xiCircle { background-color:Yellow; }
.xiWrap3 .xiCopy { font-size:10px; color:#505050; margin-top:1px; }

.xiWrap4 { font-family:Tahoma, Helvetica, Sans-Serif; float:right; line-height:normal; text-align:left; margin:6px 0px 6px 12px; padding:4px; }
.xiWrap4 .xiTitle { font-size:10px; margin-bottom:0px; color:#800000; font-weight:normal; }
.xiWrap4 .xiAuthor { font-size:10px; margin-bottom:1px; color:#000000; }
.xiWrap4 .xiTable { background-color:#E0FFFF;  }
.xiWrap4 .xiTable td { width:10px; height:10px; font-size:8px; }
.xiWrap4 .xiTable .xiBlack { background-color:#00008B; }
.xiWrap4 .xiTable .xiCircle { background-color:Yellow; }
.xiWrap4 .xiTable .xiRebus { font-size:7px; }
.xiWrap4 .xiCopy { font-size:8px; color:#505050; margin-top:1px; }

.xiWrapLeft { font-family:Tahoma, Helvetica, Sans-Serif; float:left; line-height:normal; text-align:left; margin:6px 12px 6px 0px; padding:4px; }
XWord Info Home | JSON Home