14 Interactions in Sequence
Description
In this example we are creating a method to manage the result of events triggered by multiple elements. When a method has succeeded, it will fire an interaction.<div data-fs-sequence="example-sequence"> <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="The real numner is? (15)" value="" data-fs-input="example-event-10" data-fs-addto='{ "method": "completed-steps" }' /> </div> <div class="form-group"> <label for="example-fire-input-11" 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="The real numner is? (14)" value="" data-fs-input="example-event-11" data-fs-addto='{ "method": "completed-steps" }' disabled="disabled" /> </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="The real numner is? (9)" value="" data-fs-input="example-event-12" data-fs-addto='{ "method": "completed-steps" }' disabled="disabled" /> </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="The secret is: (a secret)" value="" data-fs-input="example-event-13" data-fs-addto='{ "method": "completed-steps" }' disabled="disabled" /> </div> <div data-fs-etag="oninput:example-event-10" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Multi Steps Event", "description": "Next input is blocked! The provided value does not match requirements. Try (15) instead." } } }'></div> <div data-fs-etag="oninput:example-event-11" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Multi Steps Event", "description": "Next input is blocked! The provided value does not match requirements. Try (14) instead." } } }'></div> <div data-fs-etag="oninput:example-event-12" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Multi Steps Event", "description": "Next input is blocked! The provided value does not match requirements. Try (9) instead." } } }'></div> <div data-fs-etag="oninput:example-event-13" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Multi Steps Event", "description": "Next input is blocked! The provided value does not match requirements. Try (a secret) instead." } } }'></div> <div data-fs-etag="method:compled-steps" data-fs-params='{ "trigger": { "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17" }, "rel": { "interaction": { "subject":"Multi Steps Event", "description": "Multi steps event completed. Total matches (38), the secret word (a secret) is also correct." } } }'></div> </div>
let exs = FS.eventSequence('example-sequence'); exs.counter('next-input', 'create'); exs.counter('next-input', 'update', 10); exs.event('onInput:example-event-10', (ev, elem) => { 15 == elem.value ? exs.counter('next-input', 'update', 11) && elem.fireMethod('compledSteps') : elem.fire(true); }); exs.event('onInput:example-event-11', (ev, elem) => { 14 == elem.value ? exs.counter('next-input', 'update', 12) && elem.fireMethod('compledSteps') : elem.fire(true); }); exs.event('onInput:example-event-12', (ev, elem) => { 9 == elem.value ? exs.counter('next-input', 'update', 13) && elem.fireMethod('compledSteps') : elem.fire(true); }); exs.event('onInput:example-event-13', (ev, elem) => { 'a secret' == elem.value ? exs.counter('next-input', 'update', 14) && elem.fireMethod('compledSteps') : elem.fire(true); }); exs.createMethod('compledSteps', () => { var el = document.querySelector('[data-fs-input="example-event-' + exs.counter('next-input', 'get') + '"]'); if( el ) { el.disabled = false; } 14 == exs.counter('next-input', 'get') && exs.fire('[data-fs-etag="method:compled-steps"]') && exs.counter('next-input', 'update', 15); });