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-etag="oninput:example-event-10"
		data-fs-input="example-event-10"
		data-fs-method="compled-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-etag="oninput:example-event-11" 
		data-fs-input="example-event-11" 
		data-fs-method="compled-steps"
 		/>
</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-etag="oninput:example-event-12"
		data-fs-input="example-event-12" 
		data-fs-method="compled-steps"
 		/>
</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-etag="oninput:example-event-13" 
		data-fs-input="example-event-13" 
		data-fs-method="compled-steps"
 		/>
</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('completedSteps', 'create');
  exs.option('secretWord', 'create');
  exs.option('step4', 'create');

  exs.event('onInput:example-event-10', (ev, elem) => {
      if( 15 == elem.value && ! exs.option('step1','get') ) {
          exs.counter('completedSteps', 'add', 15);
      }
      elem.fireMethod('compledSteps');
  });
  exs.event('onInput:example-event-11', (ev, elem) => {
      if( 14 == elem.value && ! exs.option('step2','get') ) {
          exs.counter('completedSteps', 'add', 14);
      }
       elem.fireMethod('compledSteps');
  });
  exs.event('onInput:example-event-12', (ev, elem) => {
      if( 9 == elem.value && ! exs.option('step3','get') ) {
          exs.counter('completedSteps', 'add', 9);
      }
      elem.fireMethod('compledSteps');
  });
  exs.event('onInput:example-event-13', (ev, elem) => {
      if( 'a secret' == elem.value ) {
          exs.option('step4','update', true);
      }
      elem.fireMethod('compledSteps');
  });

  // Will fire a related interaction if true.
  exs.createMethod('compledSteps', () => {
      var completedSteps = exs.counter('completedSteps', 'get'),
          step4 = exs.option('step4', 'get');
      return completedSteps == 38 && step4
          ? true
          : false;
  });