11 Events Using Options
Description
Creating and manage options accessible from anywhere. In this example we will create two options to track the status of a certain process.<div data-fs-sequence="eventsUsingOptions"> <div class="form-group"> <button class="btn btn-primary" data-fs-mouseover="example-event-10">Mouse over me (5 times) </button> </div> <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-input="example-event-11" /> </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: (mouseover: 3), the combination of all counts matches the requirements therefore triggering an interaction." } } }'></div> <div data-fs-etag="oninput:example-event-11" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "All captured events sum out to: (focus: 2), the combination of all counts matches the requirements therefore triggering an interaction." } } }'></div> </div>
let op = FS.eventSequence('eventsUsingOptions'); op.option('mouseover', 'create'); op.option('input', 'create'); op.counter('mouseover', 'create'); op.event('onMouseover:example-event-10', (ev, elem) => { var counting = elem.querySelector('span.counting'), current_count; if(!counting) current_count = 0; else current_count = parseInt(counting.innerText); 5 == op.counter('mouseover', 'get') ? op.option('mouseover', 'update', true) : op.counter('mouseover', 'add'); current_count < 5 ? elem.innerHTML = 'Mouse over me (5 times) <span class="counting">' + (current_count + 1) + '</span>' : elem.classList.add('btn-success'); }); op.event('onInput:example-event-11', (ev, elem) => { if( op.option('mouseover', 'get') && 5 <= elem.value ) { elem.fire(true); } });