14 Interactions in Sequence

<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-input="example-event-10"
		data-fs-addto='{ 
            "method": "completed-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-input="example-event-11" 
		data-fs-addto='{ 
            "method": "completed-steps"
        }'
        disabled="disabled"
 		/>
</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-input="example-event-12" 
		data-fs-addto='{ 
            "method": "completed-steps"
        }'
        disabled="disabled"
 		/>
</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-input="example-event-13" 
		data-fs-addto='{ 
            "method": "completed-steps"
        }'
        disabled="disabled"
 		/>
</div>
 
 <div data-fs-etag="oninput:example-event-10" data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
        },
        "rel": {
            "interaction": {
                "subject":"Multi Steps Event",
                "description": "Next input is blocked! The provided value does not match requirements. Try (15) instead."
            }       
        }
     }'></div>
<div data-fs-etag="oninput:example-event-11" data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
        },
        "rel": {
            "interaction": {
                "subject":"Multi Steps Event",
                "description": "Next input is blocked! The provided value does not match requirements. Try (14) instead."
            }       
        }
    }'></div>

<div data-fs-etag="oninput:example-event-12" data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
        },
        "rel": {
            "interaction": {
                "subject":"Multi Steps Event",
                "description": "Next input is blocked! The provided value does not match requirements. Try (9) instead."
            }       
        }
    }'></div>


<div data-fs-etag="oninput:example-event-13" data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
        },
        "rel": {
            "interaction": {
                "subject":"Multi Steps Event",
                "description": "Next input is blocked! The provided value does not match requirements. Try (a secret) instead."
            }       
        }
    }'></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('next-input', 'create');
exs.counter('next-input', 'update', 10);

exs.event('onInput:example-event-10', (ev, elem) => {
    15 == elem.value 
    ? exs.counter('next-input', 'update', 11) && elem.fireMethod('compledSteps')
    : elem.fire(true);
});

exs.event('onInput:example-event-11', (ev, elem) => {
    14 == elem.value 
    ? exs.counter('next-input', 'update', 12) && elem.fireMethod('compledSteps')
    : elem.fire(true);
});

exs.event('onInput:example-event-12', (ev, elem) => {
    9 == elem.value 
    ? exs.counter('next-input', 'update', 13) && elem.fireMethod('compledSteps')
    : elem.fire(true);
});

exs.event('onInput:example-event-13', (ev, elem) => {
    'a secret' == elem.value 
    ? exs.counter('next-input', 'update', 14) && elem.fireMethod('compledSteps')
    : elem.fire(true);
});
 

exs.createMethod('compledSteps', () => {
    var el = document.querySelector('[data-fs-input="example-event-' + exs.counter('next-input', 'get') + '"]');
    if( el ) {
        el.disabled = false;
    }

    14 == exs.counter('next-input', 'get') 
    && exs.fire('[data-fs-etag="method:compled-steps"]') 
    && exs.counter('next-input', 'update', 15);
 
});