Forum Discussion
Word Count in Text Entry
Hi, I am creating a writing task for my students. I need to add wordcount sign on the page. How can I do it? My students should see the number of words they have written simulateneously.
Many thanks in advance.
- NedimCommunity Member
Hi Dino,
This could be done only with JavaScript. Please find the attached version of your file with the "Execute Javascript" trigger that runs JS code when the timeline starts. It updates the "wordcount" variable as you type. As you know, this code will not run in preview, only when it's published.
- ndincerdinoCommunity Member
I am really grateful to your help. Will it work in every writing activity if I copy and paste the javascript code you added?
- NedimCommunity Member
Hi Riona,
You may wanna use this code:
const TE = document.querySelector('.acc-textinput');
const player = GetPlayer();
TE.addEventListener('keyup', () => {
TE.blur();
TE.focus();
let charCount = TE.value.length;
player.SetVar("charCount", charCount);
});Make sure you first create a number variable "charCount" in Storyline. It can be named anything you want but a variable in the code above (bolded) must match a variable created in SL. This code has to be placed in Execute Javascript trigger when the timeline starts.
- NedimCommunity Member
Yes, it will. I would only use different "wordcount" variable for different slide. For instance, if you have the same activity on your next slide, create "wordcount1" variable in SL and update the code line player.SetVar("wordcount", wordCount); to player.SetVar("wordcount1", wordCount); etc. Also, in this case, make sure to change the variable reference from "%wordcount%" to "wordcount1".
- RionaMenezesCommunity Member
Hello!
On a similar note, I am trying to have a character count that changes as the learners type, do you have any suggestions?
Many thanks. - RionaMenezesCommunity Member
Hi Nedim,
Thank you very much for your help!