11 Events Using Options

<div data-fs-sequence="eventsUsingOptions">
    <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>
</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);

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

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