Runtime Conditions or Variables For Dynamic Text Entry Fields in Articulate Storyline 360

We came across a customization request from our client, Runtime auto update input field values. In order to fulfill the requirement, we used JavaScript.

Following is a brief description of the step by step process of Runtime Conditions/Variables for dynamic text entry fields in Articulate Storyline 360.

Step 1

Create as many input fields as you may need. In this sample, we have added 3 input fields.

Step 2

Create variables for each input field, like here we have created three variables. They are “product_id”, “product_name” and “product_price.”

Step 3

Add placeholder text on each input field (for example: type text here). The placeholder text should be the same as the variable name.

Step 4

Now, add slide trigger i.e. as the timeline starts, JavaScript will be executed. . In order to do this, go to the trigger wizard and open script and paste the JavaScript code.

Note: In case, you want to create more input fields, you must add names of additional input variables inside the square braces (there is no need to add a comma “,” after the last variable)

Example:

var fields = ["product_id", "product_name", "product_price", "new variable",……………,"last-variable"]

var fields = ["product_id", "product_name", "product_price"],
    elmArr = [],
    typesArr = [],
    player = GetPlayer();
(function updateRuntime(fields) {
    fields.forEach(function (filed, filed_index) {
        elmArr.push($('[placeholder=' + filed + ']'));
        $('[placeholder=' + filed + ']').attr('placeholder', '');
    });
    elmArr.forEach(function (elm, elm_index) {
        typesArr.push(typeof player.GetVar(fields[elm_index]));
        $(elm).keyup(function () {
            if(typesArr[elm_index] == "number" &&  isNaN(parseInt(this.value))){
                player.SetVar(fields[elm_index], 0);
            }else{
                player.SetVar(fields[elm_index], this.value);
            }
        })
    });
})(fields);