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

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:

Step 1

  • Add the input fields on the screen. In this example, we used 3 input fields – two text entry fields and one numeric entry field.

How to set Character limit for a dynamic text entry field in Articulate Storyline

Step 2

  • Click “X” icon to open variable dialogue box.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step02

Step 3

  • In the variable dialogue box, double-click on existing variable to change the variable name. Then, click “OK”. In this example, we created 3 Variables – “twenty_chars”, “twelve_chars” and “fifteen_chars”.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step03

Step 4

  • Create placeholder text in each input field (example: type text here). Ensure that the placeholder text and the variable name are same.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step04

Step 5

  • In the Trigger panel, click the trigger icon and select the action dropdown list.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step05

Step 6

  • Select the action “Execute JavaScript”.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step06

Step 7

  • Click the Script button to open JavaScript panel.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step07

Step 8

  • In the JavaScript panel, paste the below given JavaScript code and set When Timeline Starts. Then click OK.

Note: If you want to add or delete the input fields on the screen, you must add input variable names inside the square braces.

Example:

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

In the code, you can set maximum characters for respective input text entry field.

Examples:

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

How to set Character limit for a dynamic text entry field in Articulate Storyline-step08

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);

Step 9

In the trigger layer, the “Execute JavaScript” trigger is added.

How to set Character limit for a dynamic text entry field in Articulate Storyline-step09

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

1 reply
  1. Volim Sebe
    Volim Sebe says:

    Hi guys,

    I have followed your instructions, but this doesn’t seem to work :/
    Would you mind sharing the source file? I need help to figure out what I’m doing wrong.

    Thank you in advance

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *