“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

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.

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:

Jhonatan Salguero

Go To Table of Contents