13 Multiple Interactions
Description
In this example we are binding events on multiple elements to display interactions separately.<div data-fs-sequence="multipleEvents"> <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" data-fs-onsuccess="is-valid" /> </div> <div data-fs-etag="oninput:example-event" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "This interaction was triggered by providing the correct answer (15), Congrats." } } }'></div> <div class="form-group"> <label for="example-fire-input-2" class="strong">If b = 7; What is the value ( b x 2 );</label> <input id="example-fire-input-2" class="form-control" type="text" placeholder="Type in the correct answer" value="" data-fs-input="example-event-2" /> </div> <div data-fs-etag="oninput:example-event-2" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "This interaction was triggered by providing the correct answer (14), Congrats." } } }'></div> <div class="form-group"> <label for="example-fire-input-3" class="strong">If b = 7; What is the value ( b + 2 ); </label> <input id="example-fire-input-3" class="form-control" type="text" placeholder="Type in the correct answer" value="" data-fs-input="example-event-3" /> </div> <div data-fs-etag="oninput:example-event-3" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "This interaction was triggered by providing the correct answer (9), Congrats." } } }'></div> <div class="form-group"> <label for="example-fire-input-4" class="strong">What do you call something that is kept from the public. </label> <input id="example-fire-input-4" class="form-control" type="text" placeholder="Type in the correct answer" value="a " data-fs-input="example-event-4" /> </div> <div data-fs-etag="oninput:example-event-4" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Custom event completed", "description": "YES, the correct answer is (a secret)." } } }'></div> <div data-fs-el="@module-2410d449e70cdb75a0fccd29e7880c17" data-fs-opt='{ "display": "fixed", "placement": "upper", "size": "lb" }'></div> </div>
const mu = FS.eventSequence('multipleEvents'); mu.event('onInput:example-event', (ev, elem) => { 15 <= elem.value && elem.fire(true); }); mu.event('onInput:example-event-2', (ev, elem) => { 14 <= elem.value && elem.fire(true); }); mu.event('onInput:example-event-3', (ev, elem) => { 9 <= elem.value && elem.fire(true); }); mu.event('onInput:example-event-4', (ev, elem) => { 'a secret' == elem.value && elem.fire(true); });