2 Interact on Input Events
Description
This example is slightly more complex, the goal is to apply a custom event to a related element. Create a relation between elements: Note: This type of relation is enable only when the event and the tag name are matching the etag.- Etag used in this example: data-fs-etag="oninput:example-event"
- To set the related element, we add a data attribute: data-fs-input="example-event"
<div class="form-group" data-fs-sequence='oninput-example-event'> <label for="example-fire-input" class="strong">Custom events are limited to your imagination. </label> <p class="form-text text-muted"> if b = 5; What is the value ( b x 3 );</p> <input id="example-fire-input" class="form-control" type="text" placeholder="Type in the correct answer" value="" data-fs-input="example-event" /> </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 data-fs-el="@module-2410d449e70cdb75a0fccd29e7880c17" data-fs-opt='{ "display": "fixed", "placement": "centered", "theme": "white-translucent", "size": "lg" }'></div>
/** * Preventing code collision with sequence blocking * Code withing a sequence block, can only run when its matching data attribute is present. **/ const onInputExampleEvent = FS.eventSequence('oninput-example-event'); /** * Create the event. * NOTE: The event name must always * start with a capital letter, * and preceded with "on" like so: * onCustom, onMove, onDrag... * Once we have a match, * you will have to fire an interaction if your set of conditions are met. **/ onInputExampleEvent.event( 'onInput:example-event', ( e, elem ) => { /** * Retrieve the element, check if the value is correct. **/ if( 15 == elem.value ) { /** * If successful, fire the interaction, on the elem object. **/ elem.interaction('fire'); } });