Custom 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"

If b = 5; What is the value ( b x 3 );

<div class="form-group">

    <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>

/**
 * 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.
 **/    
FS.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');
     }
});