Counter Events

Counters allow the maintenance and keeping of scores, or can be used for any other interaction that needs a dynamically and controlled changing number sequence. Counters are always integers. Updated: 2014-07-18

Counter Overview
Counter Event Reserved Terms
Usage
Usage Example
Counter Example LIVE

Counter Overview

Counters are predefined elements with target IDs that contain an integer which can be incremented, decremented or forced to a value.

This can be used to count, display and manipulate integers anywhere in the interface.

Counter Event Reserved Terms

INCREMENT Command. Increases an integer value by the specified amount.

DECREMENT Command. Decreases an integer value by the specified amount.

SETCONTENT Command. Sets an integer to a defined value.

Usage

Counter events are commands issued from standard Event Containers.

0 counterone COMMAND INCREMENT 5 0 counterone COMMAND DECREMENT 1 0 counterone COMMAND SETCONTENT 0

0 The time in milliseconds at which the counter event starts within the event.

counterone The ID of the target element

COMMAND Fixed literal. Must be present.

INCREMENT The action to be taken

5 The numeric value to be incremented (added), decremented(subtracted) or set (forced).

Usage Example

<pre class="aie-events">
EVENT correct 
EVENTSTART correct 
0 score COMMAND INCREMENT 10 
EVENTEND correct 
EVENT wrong 
EVENTSTART wrong 
0 score COMMAND DECREMENT 5 
EVENTEND wrong 
EVENT reset
EVENTSTART reset
0 score COMMAND SETCONTENT 0 
EVENTEND reset 
</pre>

In this script the span element with id="score" is the presentation target.

If any event triggers EVENT correct, the value will be incremented by 10.

If any event triggers EVENT wrong, the value will be decremented by 5.

If any event triggers EVENT reset, the text value in id="score" will be set to 0.

EVENT increment id=increment-btn click
EVENTSTART increment
0 score-target COMMAND INCREMENT 10  
EVENTEND increment
EVENT decrement id=decrement-btn click
EVENTSTART decrement
0 score-target COMMAND DECREMENT 5
EVENTEND decrement
EVENT setcontent id=reset-btn click
EVENTSTART setcontent
0 score-target COMMAND SETCONTENT 0
EVENTEND setcontent

Counter Example LIVE

AIE Events Counter live example. 1) Increment: On each clicks the number will be incremented by 10 with no limits. 2) Decrement: On each clicks the number will be decremented by 5 with no limits (-). 3) Reset: Resets counter number and sets default value to 0.

<div class="panel-rw interactive-rw" id="pan1" title="Panel Interactive">
<div class="aie-nav-script-rw" title="AIE Panel Nav Script">
<pre class="aie-events">
EVENT increment id=increment-btn click
EVENTSTART increment
0 score-target COMMAND INCREMENT 10
EVENTEND increment
EVENT decrement id=decrement-btn click
EVENTSTART decrement
0 score-target COMMAND DECREMENT 5
EVENTEND decrement
EVENT setcontent id=reset-btn click
EVENTSTART setcontent
0 score-target COMMAND SETCONTENT 0
EVENTEND setcontent
</pre>
</div>
    <div class="title-bar-rw" title="Panel TitleBar">
        <h2><a href="#">Counter Example LIVE</a></h2>
        <p>AIE Events Counter live example. 1) Increment: On each clicks the number will be incremented by 10 with no limits. 2) Decrement: On each clicks the number will be decremented by 5 with no limits (-). 3) Reset: Resets counter number and sets default value to 0.</p>
    </div>
    <div class="frame-rw" title="Panel Frame">
        <div class="frame-body-rw" title="Panel FrameBody">
            <button id="increment-btn">Increment</button>
            <button id="decrement-btn">Decrement</button>
            <button id="reset-btn">Reset</button>
            <div class="element-target-rw" id="score-target">0</div>
        </div>
    </div>
</div>