Events Using Counters

Description

The counter method provides counting  functionality accessible from anywhere. In this example we will create two counters to count the recurrence of events on a specific input.
	<div data-fs-sequence="demoCounters">

	<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-mouseover="example-event-10"
	        data-fs-focus="example-event-10"
           />
</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: ( 3: mouseover ), the combination of all counts matches the requirements therefore triggering an interaction."
             }       
          }
 	}'></div>
<div
    data-fs-etag="onfocus:example-event-10" 
    data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
         },
         "rel": {
             "interaction": {
                    "subject":"Custom event completed",
                    "description": "All captured events sum out to: ( 2: focus ), the combination of all counts matches the requirements therefore triggering an interaction."
             }       
          }
 	}'></div>
</div>
/**
 * While creating a counter we can force
 * the counter to using persistent storage
 * by passing a true statment using the third
 * argument.
 * This is only when creating the counter.
 *
 * Don't forget to delete it when it is
 * no longer needed.
 **/
  const fsd = FS.eventSequence('demoCounters');
  fsd.counter('mouseover', 'create');
  fsd.counter('focus', 'create');

  fsd.event('onMouseover:example-event-10', (ev, elem) => {
     var current_count;
     if(!elem.dataset.count) current_count = 0;
     else current_count = parseInt(elem.dataset.count);
    
     elem.dataset.count = ( current_count + 1 );
     elem.value = 'Total mouseover: '+( current_count + 1 );
         19 <= fsd.counter('mouseover', 'get') 
             ? elem.fire(true)
             : fsd.counter('mouseover', 'add');
  });

  fsd.event('onFocus:example-event-10', (ev, elem) => {
      0 == fsd.counter('focus', 'get') 
         ? elem.fire(true)
         : fsd.counter('focus', 'add');
  });