Disable spellcheck in text entry fields
Jan 19, 2022
I have a course that I use as a recruitment test. It is a proofing exercise where candidates have to find and correct errors in text.
I do this by presenting the text on three separate slides, each with a text entry field. The text including errors is the default value of the variable that corresponds to the text entry field.
There is a trigger to set the variable to the typed value when control loses focus. I then use three essay question slides to "gather" the value from the text entry variables so that I can report all three values to my LMS.
So my question is, how can I use javascript to disable the spellcheck on the text entry fields? I have previously posted on the subject and received excellent help, but the code provided is no longer working consistently. I have the following:
if (!window.disabledSpellcheck) {
document.querySelector("input").setAttribute("spellcheck", "false");
document.querySelector("textarea").setAttribute("spellcheck", "false");
window.disabledSpellcheck = true;
}
This is in a trigger on the specific layout in the master that the three slides with text entry fields use.
I am seeing really inconsistent behaviour. When I load the first slide, there are no red squiggles indicating spelling mistakes. I hit next and on the second slide are red squiggles. I hit back and there are still no red squiggles on the first slide. I hit next and there are now no squiggles on the second slide.
I tried making a test file with just one slide and no essay question to "gather" the contents of the text entry field. I pasted the JS trigger onto the main slide of the master layout. Loading the slide meant no red squiggles.
I added a second slide so that I could go forward and back. On first loading, no squiggles. Hit next and go back, red squiggles appear.
See that in action here: https://360.articulate.com/review/content/7e85a68f-25ff-49e6-b55e-c6eb26ff71a6/review and storyline file attached.
Can anyone help???
2 Replies
That's quite a puzzle. Quick answer: your javascript function only selects the first instance of that element within the course (document).
The javascript code you've used will only queryselector the first input or textarea and not all. You'd have to modify that to be a querySelectoAll function and then iterate/loop over each item found and update the attribute of each. The link above supports the ability to match two selectors and then iterate and update the attribute of inputs and text areas at the same time.
However, if a user is using a tablet or ipad etc for your elearning then the keyboard tool itself has a separate spell check and word recommendations that browser-based solutions likely can't disable. Also, if the user is using a grammar plugin like grammarly then grammarly disables the spellcheck attribute and adds it's own attributes to check spelling and grammar. You can test and see some of this here: https://developer.grammarly.com/docs/demo . I tried to disabled it on that page and was unsuccessful, here are some comments about it: https://stackoverflow.com/questions/37444906/how-to-stop-extensions-add-ons-like-grammarly-on-contenteditable-editors#:~:text=To%20disable%20Grammarly%2C%20you%20can,of%20them%20to%20be%20safe.
But Grammarly may not be the only one out there to contend with. Perhaps the nature of your assessment could assume a spellchecker is always available but a rationale must be provided by your candidates? Best of luck.
Hopefully I don't have any typos here!
Thanks for the detailed reply, Josh! As you say, there are several factors to consider. I don't have the course enabled for mobile devices, so that's one less headache. Grammarly et al are a completely new can of worms! :-)
For the moment, removing the conditions from the existing code worked:
document.querySelector("input").setAttribute("spellcheck", "false");
document.querySelector("textarea").setAttribute("spellcheck", "false");
It's doing the job - until the next time!