Multiple Interactions

Description

In this example we are binding multiple events on multiple elements.  
<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"
 		/>
</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>
let mu = FS.eventSequence('multipleEvents');
mu.counter('completed');
mu.option('example-event', 'create', false);
mu.option('example-event-2', 'create', false);
mu.option('example-event-3', 'create', false);
mu.option('example-event-4', 'create', false);

mu.event('onInput:example-event', (ev, elem) => {
      if( 15 <= elem.value ) {
      		mu.option('example-event', 'update', true);
       		elem.fire(true);
      }
});
mu.event('onInput:example-event-2', (ev, elem) => {
      if( 14 <= elem.value ) {
      		mu.option('example-event-2', 'update', true);
       		elem.fire(true);
      }
});
mu.event('onInput:example-event-3', (ev, elem) => {
      if( 9 <= elem.value ) {
      		mu.option('example-event-3', 'update', true);
       		elem.fire(true);
      }
});
mu.event('onInput:example-event-4', (ev, elem) => {
      if( 'a secret' == elem.value ) {
      		mu.option('example-event-4', 'update', true);
       		elem.fire(true);
      }
});
mu.createMethod('success', () => {
  	console.log(mu.option('example-event-3', 'get' ));
  	if( mu.option('example-event', 'get' )
     	&& mu.option('example-event-2', 'get' )
  	 	&& mu.option('example-event-3', 'get' )
    	&& mu.option('example-event-4', 'get' ) ) {
       		return true;
       }
  		return false;
});