I have an essay box with a limit of 1000 characters. I'd like to show (below it) a live character count of - either - characters used or characters remaining (either one, doesn't matter to me). I initially tried to create a variable to "add value" which would, in theory, add 1 for each character entered and then show that number. But it's not working. I've included the file for reference.
Is there a way to do this? Preferably without javascript. :-) Thanks!
I added a small JS snippet on the first slide's timeline start. It finds the email body input box, attaches an event handler which watches the contents of this box, and updates the displayed AAcount variable whenever the contents change.
I disabled the add 1 to AAcount trigger
I added two text variables in SL:
fnListener (a reference to the event listener)
refInputBox (a reference to the text input box for the email body)
I added one last snippet of JS on the timeline start of the next slide (after the user successfully submits the form) that removes the event handler that was attached to the input box since we don't need it anymore. It uses both of the new variables to know what needs to be removed.
I have another question that I hope isn't too big. I love the JavaScript you created to show a character count! Since I know nothing about JS, is there a quick thing I can add to reset to 0 if a user wishes to try again? THANK YOU!
I'm not sure what you mean. If you want to clear the email body text and reset the counter to 0 when you do, just:
Add one trigger to set TextEntry7 to (blank) which will clear the text input, and
Add another trigger that resets the AAcount variable to 0 when TextEntry7 is cleared.
The original JavaScript will not be triggered unless the user types in the input field. Just clearing it will not cause an event to fire, so you have to change it manually.
5 Replies
Hi Judy. I don't think you will find a way to do this without some JavaScript.
If you are still interested, I attached an updated version of your story with a working character counter.
https://360.articulate.com/review/content/55f8f9ac-4384-45f0-8330-3022588abaa7/review
I added a small JS snippet on the first slide's timeline start. It finds the email body input box, attaches an event handler which watches the contents of this box, and updates the displayed AAcount variable whenever the contents change.
I disabled the add 1 to AAcount trigger
I added two text variables in SL:
fnListener (a reference to the event listener)
refInputBox (a reference to the text input box for the email body)
I added one last snippet of JS on the timeline start of the next slide (after the user successfully submits the form) that removes the event handler that was attached to the input box since we don't need it anymore. It uses both of the new variables to know what needs to be removed.
WOW, Nathanial! This is exactly what I was looking for! Thank you so much! It's perfect!! :-)
Hi Nathanial;
I have another question that I hope isn't too big. I love the JavaScript you created to show a character count! Since I know nothing about JS, is there a quick thing I can add to reset to 0 if a user wishes to try again? THANK YOU!
I'm not sure what you mean. If you want to clear the email body text and reset the counter to 0 when you do, just:
Add one trigger to set TextEntry7 to (blank) which will clear the text input, and
Add another trigger that resets the AAcount variable to 0 when TextEntry7 is cleared.
The original JavaScript will not be triggered unless the user types in the input field. Just clearing it will not cause an event to fire, so you have to change it manually.
Once again; you're the best! Thank you!! :-)