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);
});