Properties

1. General Properties

1.1. Property id

A unique numerical identifier beginning at 1 (one). The number 0 (zero) is reserved for comments, author(s), additional description, pre-requisites, history, license, etc.

1.2. Property description

A comment describing the object. It is useful and more convenient — human readable — than the ID.

1.3. Property display

The property display is used to describe how to render the object in the scene. There are three different kind of rendering:

• media (image, animated gif, video,etc.)
• text (html code)
• shape - a ghost are defining a clickable area.

Mandatory sub-properties:

• width: Indicates the media (image, video, etc.) width expressed in pixels.
• height: Indicates the media (image, video, etc.) height expressed in pixels.
• position: An array containing the X,Y-coordinates of the assets top-left corner expressed in pixels.

1.3.1. Property media

This property defines the asset. The asset may be an image (jpg, png, svg, gif,etc.), a video or an audio file. This file must be compatible with the web standards.

1.3.3.1. Property image/audio/video

The image, audio or video path.

1.3.3.2. Property focus

Here is an example of a 100x100 image "../../assets/question.png" whose clickable area is restricted to a circle of radius 50.

"display": {
  "width": 100,
  "height": 100,
  "position": [150,250],
  "media": {
    "image": "../../assets/question.png",
    "focus": ["C", 50, 50, 50]
  }

1.3.2. Property text

1.3.3. Property target

Objects like item, target, and machine are usually not displayed in the scene but rather are displayed via a popup window when the user clicks at a specific location in the scene. This clickable area is defined in the property click as an array.

• First element of the array is a character:
  • "C" for circle
  • "R" for rectangle
  • "P" for polygon
• Next elements of the array depend of the geometry type, the other elements of the area is:
  • A circle ["C",x,y,radius]
  • A rectangle ["R",x,y,width,height]
  • A polygon ["P", "x0,y0 x1,y1 ... xn,yn"]

1.4. Property action

Specific properties describing the behavior of the objects. See section 2.2 for details.

1.4.1. The events

The events are respectively:

• Event onclick - When a user clicks on the object
• Event ondisplay - When an object is displayed
• Event onuse - When an object is clicked in conjunction with an item.
• Event onsuccess - When the submit button of a form is clicked and the answer(s) is(are) correct.
• Event onexit - If a exit condition (not necessary an end of the game) is completed.

1.4.2. The actions

Depending of the events fired, various actions are triggered...

1.4.2.1. Action new_nodes

Add/Display new objects to the parent object (the scene the current object belongs to).

1.4.2.2. Action del_nodes

Delete/Hide objects from the parent object (the scene).

1.4.2.3. Action popup

Display a popup window.

1.4.2.3. Action change_node

Change the action new_nodes on a another node.

1.5. Property features

1.5.1. Property draggable

1.5.2. Property form

1.5.2.1. Property header

1.5.2.1. Property body

1.5.2.1. Property footer

1.5.2.1. Property style

1.5.3. Property exit

1.5.4. Property download

2. Specific properties

2.1. Object scene

The scene contains one or more areas defined as an array of children. Some of these areas just contains displayed object and cannot be triggered by a user interaction. Other areas are clickable and can trigger the display of a popup window, of new object(s) or an item.

2.1.1 Property children

The property children is an array of areas. Each area is defined as an object containing two properties id and the type of action (click or display).

...
  "children": [23,24],
...

2.2. Object machine

In the property params, you may configure the machine with the following properties.

2.2.1. Property params.exit

This property is mandatory for the machine.lock and contains a number or a string allowing the — successful — game exit.

2.2.2. Property params.background-color

This property defines the background color of the machine. The syntax is # followed by the color in hexadecimal (Ex: #fff for white color).

2.2.3. Property params.theme

This property defines the theme of the machine.

2.3. Object item

An ̀ item` is an object that you can store in the inventory.

2.4. Object target

A target is an object interacting with an item to trigger a new action.

2.5. Object sprite

A sprite is an object existing as its own. It can be a simple decorative element or a movable element (piece of a puzzle game) but don't trigger any kind of action.