Applet parameters

The program exports complete web pages you can use. This topic describes options for more advanced usage if you want to customize the behaviour of the applet on your website. The first topic shows how to modify the parameters passed to the applet in the HTML page, the second topic describes how to customize display using CSS and use JavaScript functions programmatically.

Solving applet parameters

The XML data is exported from Crossword Compiler as a .js file containing a JavaScript string called "CrosswordPuzzleData". The applet is called from JavaScript in your web page, with an #id containing the id of a DIV element that will actually contain the applet content (see Crossword Compiler's default output for an example). The main call is of the form

$(“#id”) .CrosswordCompiler(1,2,3);

1. This parameter must contain a string which is the xml data, it is REQUIRED. Default is “CrosswordPuzzleData”.
2. This parameter contains an JSON array to override the default images for graphical buttons (the default images come with the applet files). If there is no need to override the images, this must be set to null. Note that if you speciifc myImage.png, you must also provide in the same location myImage_2x.png for high-resolution screens (e.g. iPad). Example :
{“reveal-word”: ”path to image”, “reveal-letter”: ”path to image”,

“revert”: ”path to image”, “solution”: “path to image”,

“check” : “path to image”, “pencil”: “path to image”,

“submit” : “path to image”, “save” : “path to image” }

PARAMETER	VALUE	DESCRIPTION
BACKCOLOR	Any Html valid Color	Background Color for the puzzle
SELCOLOR	Any Html valid Color	Color for the selected cells.
URLCOLOR	Any Html valid Color	Color for url clues color
CLUEURLTARGET	STRING
HINTURLTEXT	String	The text to be in the url, default is “?”
CLUECOLOR	Any Html valid Color	Color for Clues
FINISDHEURL	String
FINISHEDURLFRAME	String
COMPLETIONPICTURE	String
COMPLETIONPICTUREURL	String
COMPLETIONPICTUREURLFRAME
MAXCHEATS	Any number > 0	The max number for cheating
SCROLLWIDTH	Any number > 0
SCROLLHEIGHT	Any number > 0
SUBMIT	String	Url for submit
SUBMITMETHOD	String
SUBMITFRAME	string
SAVE	String	Url for Save
GRIDBACKCOLOR	Any Html valid Color	Grid’s Background Color
WRONGCOLOR	Any Html valid Color	Color for wrong letters.
GRIDCOLOR	Any Html valid Color	Grid’s Color
BLOCKCOLOR	Any Html valid Color	Color for block in grid
FONTCOLOR	Any Html valid Color	Color for font in cells
NUMCOLOR	Any Html valid Color	Color for numbers in cell
CURCOLOR	Any Html valid Color	Color for the cell with focus
REVEALEDCOLOR	Any Html valid Color	Color for Revealed letters
COMPLETECORRECT	true or false	Only if correct
FRIENDLYSUBMIT	true or false	Friendly Submit
SHOWSOL	True or false	To show solution on Load
TITLE	String
COPYRIGHT	String
PROGRESS	String	To load Progress.
TIMEFROMLOAD	true or false	To start timer on load.
STARTIME	Any number > 0	Initial Timer value.
TIMER	true or false	To enabled timer
NOPAUSE	true or false	To let user pause the timer
TITLEHEIGHT	Any number>0	Title Height
TITLELEFT	true or false	To align title to the left

URL Format

Each URL given for a puzzle can contain placeholders to be replaced with data from the puzzle. The following list describes them:

%SUBMIT%	Is replaced by progress considering “Friendly Submit” value
%MARKED%	Is replaced by progress plus mark for the answers
%PROGRESS%	Is replaced by progress of the puzzle
%TIME%	Is replaced by time in seconds
%CHARSET%	Is replaced by the Charset
%KEYWORD%	Is replaced by the keyword progress.

Customizing using JavaScript and CSS

In addition to changing options using the applet settings and parameters above, you can also access some functions of the puzzle applet at runtime using JavaScript, and customize certain aspects of the default display using CSS. Javascript functions are available from the CrossWord object of the DIV element containing the puzzle, e.g.

getElementById('CrosswordCompilerPuz').CrossWord

Programmtically calling button actions
You can call the button actions by using the ButtonActions element of the Grid element. For example this JavaScript will do the same as the user clicking on the reveal-letter button.
```
getElementById('CrosswordCompilerPuz').CrossWord.Grid.ButtonActions['reveal-letter']();
```
Using PuzzleState
The global PuzzleState element can be used to access and change the current puzzle state.
- getElementById('CrosswordCompilerPuz').CrossWord.PuzzleState.GetProgressString(friendly, encoded) returns the current grid progress (filled in letters). E.g. PuzzleState.GetProgressString(true, true); Shows the Friendly submit format (see above) and URL encodes the entries.
- getElementById('CrosswordCompilerPuz').CrossWord.PuzzleState.GetTime() returns the current solution time
- getElementById('CrosswordCompilerPuz').CrossWord.PuzzleState.PuzzleCompleted is a function (no parameters) that you can override to replace the default function when a puzzle is completed.
Customizing colors with style sheets (CSS)
Various elements of the puzzle can be targeted via CSS by specifiying various element classes.
- .Clues is the block of clues, .ClueHeading is the Across/Down label, .ClueText is the text of a clue and .ClueNumber is the number. For example to set the clue text blue
```
.Clues .ClueText{
 color:blue;
}
```
  The state also changes a containing class, so you can use .Completed and .Selected. E.g. To set the completed clue text color to be yellow with strikethrough:
```
.Clues .Completed .ClueText{
 text-decoration: line-through;
 color:yellow;
}
```
Currently similar customization is not easily possible for the grid. To identify the class of different elements to use in css, you can view the applet in your browser and use Developer Tools to inspect each element.
Using custom graphical button images with CSS
In addition to overriding the image names as specified above, you can also do it via CSS by targeting the buttons using .CCPuzButtons .action-name. For example this would replace the reveal-word icon
```
.CCPuzButtons .reveal-word{
 background:url(myImage.png) no-repeat;
}
```
Note that for high-res screens you also need to provide a myImage_2x.png file, and specify in CSS the high-res icon versions. e.g.
```
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution:2dppx),(min-resolution: 192dpi) {
.CCPuzButtons .reveal-word{
 background:url(myImage_2x.png) no-repeat;
}}
```