Procedures
Procedure (aka function) is a named group of puzzles that performs a specific task. By organizing your puzzles in procedures you can make your scenarios more compact and maintainable.
- Creating Procedures
- Calling Procedures
- Procedures with Return Value
- Using "if return" Puzzle
- Calling Procedures from JavaScript
Creating Procedures
A new procedure can be created by dragging out the procedure definition puzzle from the toolbox:

A newly created procedure puzzle can be renamed and filled up with other puzzles to perform some task:

Calling Procedures
To be able to trigger (to call) a procedure, drag out the corresponding puzzle from the toolbox:

A procedure can be triggered several times and from several places of a Puzzles scenario. This may allow for re-using puzzles rather than straight-copying similar set of puzzles several times. For example, an animation can be launched whenever the user clicks the object itself or an HTML button (thus securing duplicate controls).

A procedure may have additional input parameters (aka arguments). To add an input to your procedure, click the gear icon and drag out a parameter puzzle from the toolbox on the left, sticking it in the inputs puzzle:

To be able to use an input parameter inside a procedure, drag out the corresponding "get" variable puzzle created automatically in "Variables":

This variable can be used as a substitute for actual data (such as object names) to perform some task with.

When triggering a procedure with inputs, provide the data for each trigger puzzle.

You can jump from a trigger puzzle to the corresponding procedure definition puzzle using the right-click menu:

Procedures can also be called by using the get procedure and call procedure puzzles. This way a procedure can be obtained, stored in a variable, passed into another procedure as a parameter and called later whenever needed.
Procedures with Return Value
A procedure may output a computed value to its caller (aka return value). To create such a procedure, from the toolbox drag out the variant of the procedure puzzle with the return slot.

Using "if return" Puzzle
A procedure may return a value upon some condition before all inside puzzles are interpreted. In this case the procedure stops running prematurely.

Calling Procedures from JavaScript
To execute Puzzles procedures from JavaScript code use either the puzzles
argument of the runCode()
function of your_app_name.js module or the built-in puzzles
variable inside the exec script puzzle:
puzzles.procedures['myProcedure']();
Having Troubles with Puzzles?
Seek help on the forums!