Interactive web puzzles

Select Web export on the File menu, and then Export to files to export a puzzle to be solved interactively on your own web page. After selecting the options you require press the Export web page button to choose a file name and export the web page. If you want to upload the puzzle directly to the provided puzzle hosting site use Web Publish instead.

Crossword Compiler comes with a little program, called a applet, that you can use on your web pages so that people can solve puzzles interactively. They can type letters into the grid and click on squares to highlight the corresponding clue. The default applet (using JavaScript/HTML5) will run on most desktop computers, iPad and Android and other tablets and phones. On small screens a pop-up panel will automatically appear so that the solver can see the clue for the currently-selected word, even if they can't easily view the entire puzzle..

The program is supplied with a variety of templates: select one in the HTML template box. The HTML templates give an outline for the web page together with various settings for the export options.

This export option produces a web page file and a puzzle file. WordPress sites can use the WordPress Plugin to easily upload these files to your site, otherwise the files must be manually uploaded to the same folder on your website (see the uploading web pages topic for details).

There are various options in the export interactive crossword window:

HTML Template

Change this setting to use different templates for the web page that is produced. See the HTML Templates topic for how to create your own templates. Right-click on the drop-down box to delete a template, create a copy of the template with a new name, or to make a template using the default export options rather than its own set of options.

Interactive clues

Select this option to automatically show the corresponding clue when the solver clicks on a square in the grid, or to highlight the correct slot in the grid when the solver clicks on a clue in the clue list. Select Text Clues if you just want to have static clues.

Solution link

Include a link to a picture of the solution.

Numbered solution link

Include a link to a a picture of the numbered solution.

Solution information

Check this option to include solution information (for the solution, check and reveal buttons). If this options is unchecked the puzzle file will not contain solution information, and will therefore be secure for a prize crossword. You must check this option if you want the completion message to show only if the solution is correct (see the Applet Properties topic).

Get solution

Click this button to copy to the clipboard the solution for the current puzzle. This is the text that is returned by the applet’s submit button, so click this button to see what a correct submission should look like.

Buttons

The applet can display various buttons giving the solver some extra options. Select which buttons you want to be available. The Reveal button is a cheat button to show the answer to the current clue. Reveal Letter shows just the currently selected letter and Solution shows the entire solution.. The Revert button makes the puzzle revert to the state when it was last saved (usually completely blank). The Check button will delete any letters the solver has put in the grid that are incorrect. The Submit button will submit the solver’s solution, and the Save button will save the solver’s current progress.

The Submit button requires additional advanced work by the website manager: you must supply a web script to handle the submission data. Set the script URL under Applet Options You can also use your own script to process theSave action; by default (if the URL is left blank), the state is saved in a cookie on the user's computer.

If you use the Reveal, Reveal Letter, Solution or Check buttons you need to include Solution information.

The buttons can be to the left or below the grid, and you can change the button captions. See Applet Properties for details.

Square size

Change the size of each grid square in pixels. This also indirectly affects the width and height of the grid, so ensure that the square size isn’t so big that the whole grid won’t be visible on the web page.

Clue font size

Change the size of the font used to display the interactive clues.

Applet options

Click this button to customize various aspects of the applet. See the Applet Properties topic for more information. For advanced customization options see the applet parameters topic.

Save options in template

Click this button to save the export options to re-use every time you use the selected template. This allows you to associate different sets of options with templates to simplify exporting web pages with different layouts.

Save options as default

Click this button to save the export options for use with all HTML templates that don’t have their own settings saved.

HTML export options

Check the Clues in one paragraph box to put all the clues in one paragraph instead of each on a separate line. If Include font info is selected the web page will use the font you have specified as the clue font under clue properties. (note that this font may not be available when people view your web page). Select Small inter-clue space to have clues separated by just a line break rather than a paragraph. Select Monochrome GIFs to use black and white pictures for the grid, which reduces the display time if your grid doesn’t contain any colors.

Grid properties and Clue properties

These buttons are included so you can easily change the grid and clue properties. These settings are not saved in the HTML template but in the puzzle template.

Clue hint URLs

Select this option to show hyperlinks after each clue that has a hint URL set (see the Clue Editor to set a URL hint - the Explanation/citation/URL option). This allows solvers to click on the link to open a window containing the URL, for example with information to help solve the clue.

Export js and xml files

If you already have the applet files on your site and scripts for managing puzzles, you may only need the .js file to add a new puzzle. Select Only export .js file if this is the case. You can select Also export .xml file if you want to also have the puzzle in a more easily generally parsable form, rather than only encoded as a .js string for use by the applet. The .jpz option instead exports a zipped .xml file with the .jpz extension.

If you want to export multiple puzzles at once, or make changes to some setting and way to re-export multiple files, use File, Web Export, Convert files to applet files to export multiple files at once.

Using the applet with JavaScript and Customizing with CSS

See under the Applet Parameters topic.