12 Events Using Counters
Description
The counter method provides counting functionality accessible from anywhere. In this example we will create two counters to count the recurrence of events on a specific input.<div data-fs-sequence="demoCounters"> <div class="form-group"> <label for="example-fire-input" class="strong">If b = 5; What is the value ( b x 3 );</label> <input id="example-fire-input" class="form-control" type="text" placeholder="Type in the correct answer" value="" data-fs-mouseover="example-event-10" data-fs-focus="example-event-10" /> </div> <div data-fs-etag="onmouseover:example-event-10" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "All captured events sum out to: ( 3: mouseover ), the combination of all counts matches the requirements therefore triggering an interaction." } } }'></div> <div data-fs-etag="onfocus:example-event-10" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "All captured events sum out to: ( 2: focus ), the combination of all counts matches the requirements therefore triggering an interaction." } } }'></div> </div>
/** * While creating a counter we can force * the counter to using persistent storage * by passing a true statment using the third * argument. * This is only when creating the counter. * * Don't forget to delete it when it is * no longer needed. **/ const fsd = FS.eventSequence('demoCounters'); fsd.counter('mouseover', 'create'); fsd.counter('focus', 'create'); fsd.event('onMouseover:example-event-10', (ev, elem) => { var current_count; if(!elem.dataset.count) current_count = 0; else current_count = parseInt(elem.dataset.count); elem.dataset.count = ( current_count + 1 ); elem.value = 'Total mouseover: '+( current_count + 1 ); 19 <= fsd.counter('mouseover', 'get') ? elem.fire(true) : fsd.counter('mouseover', 'add'); }); fsd.event('onFocus:example-event-10', (ev, elem) => { 0 == fsd.counter('focus', 'get') ? elem.fire(true) : fsd.counter('focus', 'add'); });