How To Set Character Limit For A Dynamic Text Entry Field In Articulate Storyline?

When we think of developing simulation based training, Adobe Captivate is the perfect tool to choose. But for some reason, we have to develop simple simulation based training using Articulate Storyline. The project we were working was on software training for sales team explaining how the product works. And in-between the training, few basic steps were added in which user has to interact.

While working on this project, we came across a requirement to set the character limit for an input field. By default Storyline doesn’t has this feature. Hence, we did customization using JavaScript.

The steps are as follows:

var fields = ["twenty_chars", "twelve_chars","fifteen_chars"]

$("#twenty_chars").attr("maxlength","20");
        $("#twelve_chars").attr("maxlength","12");
        $("#fifteen_chars").attr("maxlength","15");

var fields = ["twenty_chars", "twelve_chars", "fifteen_chars"];
(function setMaxChars(fields) {
    fields.forEach(function (field, field_index) {
        $('[placeholder=' + field + ']').attr('id',field);
        $("#twenty_chars").attr("maxlength","20");
        $("#twelve_chars").attr("maxlength","12");
        $("#fifteen_chars").attr("maxlength","15");
        $('[placeholder=' + field + ']').attr('placeholder', '');
    });
})(fields);

Finally, publish the file to view the output.
Note: This code doesn’t work in preview mode.

Conclusion:

In Articulate Storyline tool there is no default feature to set Maximum character limit for a text entry field. Using this custom JavaScript Code, you can set the Maximum character limit.

Our Services: PPT to eLearning, eLearning Provider, Flash to HTML5 Migration Service Provider