“Alphabet Soup” Documentation by “sney2002” v1.0

---

“Alphabet Soup”

Thank you for purchasing my game. If you have any questions, please feel free to contact me here.

---

Table of Contents

1. Getting Started
2. Available options
3. Saving score
4. CSS Files and Structure
5. Javascript
6. Events
7. Sources and Credits

---

Features - top

• (new) Manage game options with a friendly admin interface
• (new) unicode support
• Compatible with all browsers (even IE6 o_O)
• Works on IPAD!!!!!
• Easy to install
• very addictive (is this a feature? XD)
• Very light-weight
• Great support

---

A) Getting started - top

Before start using this script you need to change the username and password:

Now you can start creating puzzles, just go to the admin page http://<domain>/<install-dir>/admin/, after login, click on "create puzzle" and start adding words.

Because the max size of the grid is 20 and the max number of words is size * 2 (see below), you must add at least 40 words to make the game work properly. The script choose random words of the supplied.

Note: You can put different words in the list and in the board, just separate these with a colon (e.g. blue:azul, japan:tokyo)

Congratulations: You have HTML5 WordSearch installed.

---

B) Available options - top

Below is an example with all available options and their defaults values:

you can change game options individualy per each puzzle through the admin interface

Note: you can change the default game options that are displayed in the admin panel, just edit the file admin/include/config.php (useful if for example you rarely use the english alphabet).

---

C) Saving score - top

So you want to save the score of your users in a database?, set the option showForm to true to display a form to the user when the game is finished, this way the user can send the score to the server:

Note: The script does not save the score, it just sends the info to the server so you can save it.

• time: Time required to complete the puzzle in ISO 8601 format (hh:mm:ss).
• score: score achieved.

Use these to rank the players.

---

D) CSS Files and Structure - top

There are two CSS files.style.css contains all of the specific stylings for the app. The file is separated into sections using:

/*== Word Search puzzle ==*/

/*== Options bar ==*/

/*== Clock ==*/

/*== Select ==*/

/*== Share buttons ==*/

/*== Modal window ==*/

Note: You may want to change the div.modal rule at the Modal Window section.

The buttons.css file specifies the appearance of the buttons.

.

---

E) JavaScript - top

This game imports two Javascript files.

1. requirejs
2. app.js: load and initialize the game.

To initialize the app just create an instance of game.Soup() after the DOM is ready. You can also specify an object with options (see above).

---

F) Events - top

There are three events you can subscribe:

1. word.hint: Emitted when use the solve button.
2. word.found: Emitted when a word is found
3. game.finish: Emitted when the game is finished (Duh), you receive the time and score.

---

G) Sources and Credits - top

I've used the following code:

• Google-styled buttons by pixify.
• flashcanvas for compatibility with IE (MIT license).

---

Jhonatan Salguero

Go To Table of Contents

---