Documentation

Advanced Connector

Description

Advanced Connector is a special kind of module. It combines multiple modules into fully interactive, responsive content.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Scripts List of scripts to be executed when specified conditions occur
Is Disabled This property allows disabling the Advanced Connector module so that it doesn't react (evaluate any scripts) when new events hit the Event Bus.

Scripts syntax

Each script starts with the 'EVENTSTART' keyword and ends with 'EVENTEND'. All conditions and scripts to be executed must be placed between them!
Each script is executed when specified conditions occur. These conditions match event data sent by other modules. Users can filter events through:

  • Name - name of the event type. There are a few event types: Definition, ItemSelected, ItemConsumed, ItemReturned, and ValueChanged. By default, events are filtered by 'Name:ValueChanged' condition. In order to be able to react to other types of events, it is necessary to specify them in a condition!
    Other available names are:
    PageLoaded - event sent by the player when the current page is loaded.
    Check - on pressing the Check Answers button.
    Uncheck - on disabling the Check Answers mode.
    Reset - when the Reset module is pressed.
  • Source - ID of the addon/page/module that sends the event (ValueChanged and PageLoaded events only).
  • Item - 'item' field value of event data.
  • Value - 'value' field value of event data.
  • Score - 'score' field value of event data (ValueChanged events only).
  • Type - 'type' field value of event data (draggable events only).
  • Word - 'word' field value of event data (Definition events only).

For a full reference of event types and fields, please go to documentation.

The Advanced Connector addon also emulates three events: Reset, Check (when entering the error checking mode), and Uncheck (when returning from the error checking mode). Those three events can be used in the event type of scripts (see demo presentation for examples).

The above conditions are specified using the JavaScript Regular Expression format. For more information see Introductory Guide to regular expressions from JavaScript Kit.
Omitting a particular condition equals setting its value to '.*'.

The script to be executed is simply JavaScript script. It has to start with 'SCRIPTSTART' and end with 'SCRIPTEND' keywords. To access the module or addon it is necessary to use the getModule(moduleID) method from the playerController. For example, to switch frame to the next one in the Image Viewer module, the user can add a syntax like the one below:

presenter.playerController.getModule('ImageViewer1').next();

Example script from the demo presentation looks like this:

EVENTSTART
Source:TrueFalse1
Item:1-1
Value:1
SCRIPTSTART

    var audioCorrect = presenter.playerController.getModule('Audio_Correct');
    var feedback = presenter.playerController.getModule('feedback1');
    var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');

    audioCorrect.play();
    feedback.change('TF-1-1');
    imageViewer.moveToFrame(2);

SCRIPTEND
EVENTEND

The above script is executed when the addon with the ID TrueFalse1 sends an event with item '1-1' and value '1' (other fields do not matter in this example). When this happens, the Audio module is played, the Feedback module changes its text, and the Image Viewer module changes its frame.

Additionally, to the playerController, each executed script has access to the 'event' variable which holds all information about the event that triggered the current script. For example, let us display them using the Text module:

EVENTSTART
Source:TrueFalse1
SCRIPTSTART

    var textSource = presenter.playerController.getModule('TextSource'),
        textItem = presenter.playerController.getModule('TextItem'),
        textValue = presenter.playerController.getModule('TextValue'),
        textScore = presenter.playerController.getModule('TextScore');

    textSource.setText('Source: ' + event.source);
    textItem.setText('Item: ' + event.item);
    textValue.setText('Value: ' + event.value);
    textScore.setText('Score: ' + event.score);

SCRIPTEND
EVENTEND

The event object has the following properties:

  • name,
  • source,
  • item,
  • value,
  • score,
  • word,
  • type.

If some property is not present in the current event, its value is set to an empty string ("").

To react to draggable events, the user can write scripts like this:

EVENTSTART
Name:ItemSelected
Value:.+
SCRIPTSTART

    var feedback = presenter.playerController.getModule('feedback1');
    feedback.change('ITEM-SELECTED');

SCRIPTEND
EVENTEND


EVENTSTART
Name:ItemSelected
Value:^$
SCRIPTSTART

    var feedback = presenter.playerController.getModule('feedback1');
    feedback.change('ITEM-DESELECTED');

SCRIPTEND
EVENTEND

For selecting a draggable element (i.e. Image Source), the first script will be executed (because the 'value' field has at least one character - '.+' expression) and feedback changes its message to 'ITEM-SELECTED'. When this item is deselected, the event with an empty 'value' field ('^$' condition) and feedback will change the message to 'ITEM-DESELECTED'.

Header and Footer Modules

All header and footer modules can be accessed using getHeaderModule() or getFooterModule() methods accordingly. Below you can view a sample script showing how to change the header title on a button click:

var text1 = presenter.playerController.getHeaderModule('Text1');    
text1.setText("changed title");

Supported commands

Command name Params Description
--- --- ---

CSS classes

Class name Description
--- ---

The Advanced Connector module does not expose any CSS classes because its internal structure should not be changed (neither via Advanced Connector nor CSS styles).

External links in script

Try NOT to keep links to resources in the Advanced Connector script. If you want to use external resources, try describing them in CSS (Presenter -> Edit CSS...). Example of a WRONG script:

$("#MyElem").css("background", (/file/serve/6757006) 0 0 no-repeat);

It is better to define a new class in CSS:

.background_image {
    background: (/file/serve/6757006) 0 0 no-repeat;
}

and add to the suitable element:

$("#MyElem").addClass("background_image");

Demo presentation

Demo presentation showing how to use the Advanced Connector module.