Sometimes you need a text counter, so that participants can see how many characters they have already used, and how many are remaining (if a maximum is defined).
When the JS-file is included in your index html file, you can use the following code within the question text’s source code of an open question with a large input field:
<div class="textCounter" data-maxlength="300" data-position="top-left" data-qcode="q1" data-text="Characters left:"> </div>
Not all elements (or attributes) must be set. This overview includes an explanation of each attribute:
|class=“textCounter“||yes||With this class, the add-on starts working. Without this class, the add-on won’t work.|
|data-maxlength=““||no||With this attribute, you can add a maximum number of characters for the input field. The browser checks the number of used characters. If the participant reaches the maximum number of characters all additional characters will be deleted. The text counter will count in reverse (from the maximum number of characters to 0).|
If this attribute is not set, the counter will count up.
|data-position=““||yes||This attribute defines the position of the counter. These are four possibilities:|
top-left = top left
top-right = top right
bottom-left = bottom left
bottom-right = bottom right
|data-qcode=““||yes||Here the question code is defined, so that this function only affects the text field of this one question.|
|data-text=““||no||With this attribute, the text in front of the counter can be set.|
The text counter is only shown if the text field is focused on. The code shown above must be included in the source of the question text in all survey languages being used.