Events Using Options

Description

Creating and manage options accessible from anywhere. In this example we will create two options to track the status of a certain process.
<div class="form-group">
    <button class="btn btn-primary" data-fs-mouseover="example-event-10">Mouse over me (5 times) </button>
</div>
<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-11"
 		/>
</div>
<div
    data-fs-etag="onmouseover:example-event-10" 
    data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
         },
         "rel": {
             "interaction": {
                    "subject":"Custom event completed",
                    "description": "All captured events sum out to: (mouseover: 3), the combination of all counts matches the requirements therefore triggering an interaction."
             }       
          }
 	}'></div>
<div
    data-fs-etag="oninput:example-event-11" 
    data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
         },
         "rel": {
             "interaction": {
                    "subject":"Custom event completed",
                    "description": "All captured events sum out to: (focus: 2), the combination of all counts matches the requirements therefore triggering an interaction."
             }       
          }
 	}'></div>
 let op = FS.eventSequence('eventsUsingOptions');

 op.option('mouseover', 'create');
 op.option('input', 'create');
 op.counter('mouseover', 'create');

 op.event('onMouseover:example-event-10', (ev, elem) => {
   var counting = elem.querySelector('span.counting'), 
       current_count;

   if(!counting) current_count = 0;
   else current_count = parseInt(counting.innerText);

   elem.innerHTML = 'Mouse over me (5 times) <span class="counting">'+( current_count + 1 )+'</span>';
   5 == op.counter('mouseover', 'get')
      ? op.option('mouseover', 'update', true)
      : op.counter('mouseover', 'add');
 });

 op.event('onInput:example-event-11', (ev, elem) => {
   if( op.option('mouseover', 'get') && 5 <= elem.value ) {
        elem.fire(true);
   }
 });