WordFind: Parts of the Template

Template files define the basic layout of the WordFind puzzle. They are XML files, and can be found in the layout directory. The default template is called "default.xml".

Visual Layout

The template contains visual items such as frames, images, text, buttons, etc.

Some items may be nested. For example a frame may contain images, text and buttons.

Items appear in the order they are defined, so that where items overlap the one that is defined later in the file will appear on top of items defined earlier.

Example Template Explained

The default template is shown in the right hand column below, with a discussion of each part on the left...

The root node for the template is always <layout>.

An image for the background.

In this example no source is specified allowing it to be overrriden in the puzzle file.

<image id="imgBackground" width="100%" height="100%"/>

A text item for the title.

In this example no caption is specified allowing it to be overrriden in the puzzle file.

<text id="txtTitle" left="8" top="4" height="30" right="8" fontSize="16" fontWeight="bold" fontColor="0x000000"/>
Start of the frame that contains the word-list. This provides a border and a background etc. <frame id="list" left="8" top="35" bottom="30" width="240" backgroundColor="0xFFFFFF" backgroundAlpha="0.8" borderColor="0x444444" borderAlpha="0.8" borderWidth="1">
The word list. The position is relative to the frame. In this example the list is divided into two columns (cols). <list left="0" right="0" top="0" bottom="0" cols="2" colsSpace="20" rowSpace="4" fontColor="0x000000" fontSize="12"/>
End of the frame that contains the word-list.
The grid for the puzzle. As well as defining size, position, color etc, this also defines the number of cols and rows in the grid. These values can be overridden in the puzzle file. <grid right="8" top="35" bottom="35" autosize="width" cols="15" rows="15" backgroundColor="0xFFFFCC" backgroundAlpha="0.8" borderColor="0x444444" borderAlpha="0.8" borderWidth="4" fontColor="0x222244" lineColor="0x888888" lineAlpha="1.0" lineWidth="0.5"/>
The loop that we stretch around the words. <loop backgroundColor="0x888888,0x88CCFF" backgroundAlpha="0.1,0.8,0.3" edgeColor="0x444444,0xFF00FF" edgeAlpha="0.5,1,1" edgeWidth="1,2,2"/>

A list of sounds for different events.
(see below)

<sound id="click" source="click.mp3"/>
<sound id="wrong" source="wrong.mp3"/>
<sound id="correct" source="correct.mp3"/>
<sound id="finish" source="finish.mp3"/>
A frame that shows when the puzzle is completed.
(Note: visibility="finished").
<frame id="finish" visibility="finished" width="400" height="250" verticalCenter="0" horizontalCenter="0" backgroundColor="0x00CCFF" backgroundAlpha="0.9" borderWidth="2" borderAlpha="1">
A title for the finished message. <text id="txtFinTitle" left="10" top="10" height="23" right="10" fontSize="20" fontColor="0x000000" caption="Well done!"/>
The finished message. <text id="txtFinText" left="10" top="43" bottom="43" right="10" margin="5" fontSize="16" fontColor="0x000000" caption="You have completed the puzzle. Please return to the main page to select a new one."/>
A button to let us play again
(Note: action="again")
<button id="btnReplay" caption="Play Again" action="again"
width="120" height="23" right="140" bottom="10"/>
A button to let us save the score. The url tells us which page to go to. The window may be needed to ensure the new url loads in the right frame.
<button id="btnFinish" caption="Save Score" url="score.php" window="_top" width="120" height="23" right="10" bottom="10"/>
End of the "puzzle completed" frame. </frame>
End of the layout. </layout>

The Main Elements

The layout contains generic elements such as frames, images, text, buttons etc.  You can define as many of these as you like, but the really important elements are the word list, the grid, the loop, and the list of sounds.

The Word List

The word list is defined using the <list> tag.  This is where the list of words in the puzzle is shown, and marked off as each one is found.  You can put the list inside a frame, or just position it within the main layout.

Use cols to define how many columns the list should show.  Use colspace and rowspace to define the distance between columns and rows.

The Grid

The grid is defined using the <grid> tag.  This is the grid of the puzzle where you look for words.

Set the cols and rows to define how many columns and rows of letters appear.  You can still override this in inidividal puzzles.

To make sure the spaces in your grid are square you can set autosize.  Set autosize to "width" and the program will automatically calculate the width based on the height.  Set autosize to "height" and the program will automatically calculate the height based on the width.

The Loop

The loop is defined using the <loop> tag.  It defines the appearance of the loop which is drawn when looking for a word.

The loop has 3 different states, and you can define a different appearance for each.  In order the states are...

  1. Invalid: The loop is NOT horizontal / vertical or diagonal.  There couldn't be a word here.
  2. Valid: The loop is not horizontal / vertical or diagonal.  There could be a word.
  3. Found: The word has been found.  Note: This appearance is used if the word is valid AFTER the user releases the loop.

You can define the following attributes for the loop.  You define the value for each state in order, separated by columns.

backgroundColor The background color of the loop.  Define the "invalid" and "valid" colors, but not the "found" color, as this is different for each word.
backgroundAlpha The background alpha of the loop.  Define for all 3 states.
edgeColor The color of the loop's edge.  Define the "invalid" and "valid" colors, but not the "found" color, as this is different for each word.
edgeAlpha The alpha of the loop's edge. Define for all 3 states.
edgeWidth The width of the loop's edge. Define for all 3 states.

The Sounds

The sound effects use MP3 files that are loaded at run-time to allow you to use different sounds for different puzzles.  For example for a transport theme you might use car horns, fire-engines etc.  To change the sound just change the source attribute on the appropriate <sound> node.

There are 4 defined sounds...

  • id="click" - Used when dragging the loop around.
  • id="wrong" - A mistake was made.
  • id="correct" - A word is found.
  • id="finish" - Found the last word,