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

This is Version 3.0. Previous versions still work but are no longer documented or supported.

Adding grids to your website using xwiGrid.show()

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 shows the current puzzle with default CSS. The answers are revealed. Clicking the grid navigates to the full puzzle page. The Clue Tracker option here 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 two steps. The first is done once and only once. The second is a line of code added for each grid you want to display.

  1. Reference the CSS and JavaScript files in your header.
  2. Call xwiGrid.show() at each location where you want to insert a grid.

Step 1: Include CSS Styles and JavaScript reference in your header

If you like the default style and have access to the <head> section, just add these three lines:

<link href="https://www.xwordinfo.com/JSON/grid.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.xwordinfo.com/JSON/grid3.min.js"></script>


The default styles shown here may well be completely suitable, but you may want to tweak the styles for your own purposes. In the TypePad example at www.jimhblog.com, style information is added using the "Custom CSS" tool. Your blog will have something similar.

For reference, the default CSS is detailed at the bottom of this page.

Note: If your blog already includes jQuery, leave out the second line here. The specific version of jQuery is not important.

Do not include the stylesheet or script lines more than once on any page.


Step 2: Call xwiGrid.show() for each grid you want to display

After the above setup is done just once, each grid requires a call to wiGrid.show() at the location on the page where the grid is to appear. Parameters are specified as properties of the params object. All are optional.

<script>xwiGrid.show(params);</script>

Simplest example

<script>xwiGrid.show();</script>

Leaving out the function parameter means each property will use its default:

  1. The current puzzle is displayed
  2. The solution will be held until the grid is clicked
  3. Clue Tracking is disabled
  4. The default CSS 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.


Specify the date

xwiGrid.show({ date: "12/10/2004" });
xwiGrid.show({ date: "current" });
xwiGrid.show({ date: "previous" });
xwiGrid.show({ date: "syndicated" });
xwiGrid.show({ date: "random" });

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

Specify "syndicated" to show the current NYT puzzle in other newspapers.

Specify "random" to get a random Shortz Era puzzle.


Reveal the answers? (true, false, or "hold" for click)

xwiGrid.show({ date: "2/16/1996", reveal: false }); // answers are hidden
xwiGrid.show({ date: "2/16/1996", reveal: true }); // answers are revealed

The default value for the reveal property is "hold" which means that the answers are hidden until the grid is clicked.

The other options are false and true (no quotes) which you can see here.


Enable clue tracker

xwiGrid.show({ date: "previous", track: true });

This example shows yesterday's puzzle ("previous") with clue tracking enabled.

Hover over the grid to see the across and down clue for each grid location. This works both before and after clicking the grid reveals the answers. (Remember, the reveal default is "hold".)

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.


Change the default click-through target

xwiGrid.show({ date: "random", navigate: "http://www.ambitgroup.com" });

By default, clicking the grid will fiill in the answers, and then clicking it again will navigate to the appropriate xwordinfo.com crossword page.

You can disable that by setting navigation to false.

Or, you can navigate to a page location you specify, say the blog discussion of the puzzle being displayed.


Variety grids

xwiGrid.show({ date: "4/8/2018", variety: true });

You can also show most variety puzzles by specifying the date and setting variety to true.

Only variety puzzles that can be represented in Across Lite are available. That means Cryptic, Diagramless, Puns and Anagrams, and a few others.


Changing the style by changing the wrapper

xwiGrid.show({ date: "previous", reveal: true, wrapper: "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.

Most default classes float right. Override that if it's not appropriate for you.

NOTE: If you set the wrapper to "auto", the default styles will be used for typical daily puzzles, and the smaller xiWrap2 styles will be used for larger puzzles, those with more than 17 columns.

xwiGrid.show({ date: "previous", reveal: true, wrapper: "xiWrap3" });

The xiWrap3 style is even smaller.

xwiGrid.show({ date: "previous", reveal: true, wrapper: "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.

xwiGrid.show({ date: "previous", reveal: true, wrapper: "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

xwiGrid.show({ date: "9/11/2008", track: 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

xwiGrid.show({ date: "11/21/1993", track: true });

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

xwiGrid.show({ date: "6/13/2010", track: 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, all the styles defined in grid.css are shown below.

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



Reference Section

xwiGrid.show() parameter properties

PropertyDefaultOther options
date"current""previous", "syndicated", "mm/dd/yyyy", "random"
reveal"hold"true, false
trackfalsetrue
navigateXWI crosswordfalse, "your curstom url"
varietyfalsetrue
wrapper"xiWrapper""xiWrap2", "xiWrap3", "xiWrap4", "xiWrapLeft", "auto", "your custom"

Sample complete page

Here is a trivial but complete HTML page. You can try it here.

<!DOCTYPE html> <html> <head> <link href="https://www.xwordinfo.com/JSON/grid.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://www.xwordinfo.com/JSON/grid3.min.js"></script> </head> <body> <h1>XWord Info Grid Sample</h1> <h2>Show random puzzle with clue tracking</h2> <script>xwiGrid.show({ date: "random", track: true, wrapper: "xiWrapLeft" });</script> </body> </html>

Pre-defined styles

.xiWrapper { font-family:Tahoma, Helvetica, Sans-Serif; float:right; line-height:normal; text-align:left; margin:6px 0 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; border-spacing: 0; } .xiTable td { padding:0; margin:0; 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 } .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 0; 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 0 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 .xiCircle { background-color:Yellow; } .xiWrap3 .xiTable .xiRebus { font-size:8px; } .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:#ffff00; } .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 0; padding:4px; }
XWord Info Home | JSON Home