Slide loading issue
Apr 22, 2024
By
Dave Ruckley
Hi all,
I'm trying to create a simulated prescribing program and am having an issue with one of the slides loading. If you search for "aspirin" on slide 1.3 and then click the first result, it should jump to the next slide which is does, and as far as I can see it populates all the variables that should be populated. However, i'm getting a loading overlay I can't get rid off. In the console I get this error:
TypeError: element.classList is undefined
Uncaught TypeError: t is undefined
getEncodedString https://articulateusercontent.com/review/items/Syiqu2YX_78EM9Bu/html5/lib/scripts/slides.min.js:2
getEncodedValue https://articulateusercontent.com/review/items/Syiqu2YX_78EM9Bu/html5/lib/scripts/slides.min.js:2
encodeVariable https://articulateusercontent.com/review/items/Syiqu2YX_78EM9Bu/html5/lib/scripts/slides.min.js:2
But I can't figure out what's causing it.
Here's the review version: https://360.articulate.com/review/content/0ef9c0c2-50c4-4058-addf-fa92fa50a825/review
and the file is attached. Any help would be appreciated!
21 Replies
I see the symptom happening too.
From your Storyline file you have 2 web objects on Slide 1.4.
It is these causing the issues. You have them set to a local drive and resource, unavailable in Review.
Hi Andrew, I thought about that so I initially removed them but the issue continued. If you go directly to 1.4 you'll see they load no problem.
Also.... I had a quick look over the rest of the JS, and there is a lot of duplication happening.
Maybe consider using seperate JS calls for setting of the variables, and parsing of the XML data. It will mean you eliminate any duplication, which is going to make future code changes/additions much much easier.
Yeah, but its the order of their loading maybe?
Storyline JS is notorious for loading things slowly or incorrect order than what is logical.
Can you load these web objects on a blank slide called from 1.3, then listen for the data being received, and then go to 1.4?
I added a new slide (with the web objects and without) and it's the same. Something happens between when you click on one of the search results and the loading of whatever the next slide is regardless of its content
OK. I'll have another look...
Assuming those web objects arent the issue, then the Developer Console messages are telling me that the JS is failing to find necessary data. So, the next place I would look is the XML data itself. Check that every one of your JS var sets on each slide are definitely correct.
I believe you may have got one of the JS variables incorrectly set - maybe accessing the wrong level/node/child from the XML?
Without being able to see the XML its impossible for me to know for sure, but I would manually trace out to the console each JS variable after setting it from the XML, that will tell you for sure if its set correctly.
Good luck! :)
Thanks Andrew. I've updated the review version to include the XML files and it all seems to pull in the data correctly but the problem is still there. I'm sure it's something tiny but for the life of me I can't see an issue!
Always hate problems like this when I'm coding. Horrible to find, and 99% of the time something small and innocent looking.
Like you, I cant see anything inherently wrong with the Storyline file you sent.
If the web objects arent the issue, and all the JS and XML variables are lining up correctly, then Ive no idea. (sorry!)
Could it be one of those annoying SL bugs on a slide? Sometimes you have to create a brand new project to get rid of those.
WHile it's annoying, if it was my project, this is what I would do - start a new project, and only focus on the bit you know is the problem - pulling in the XML data for "aspirin", and setting start and stop dates accordingly.
If that works, then start building around it, if not, at least you've confirmed the problem is that exact thing.
Sorry I cant be of more help on this one!
Thanks Andrew I'll try that. It's strange, i can still interact with the slide below but storyline seems to insist on putting that overlay on it!
try change the input field from multiline to single line
have a look
https://community.articulate.com/discussions/articulate-storyline/loading-dots-always-appear-after-visiting-2-slides
Jürgen THANK YOU!
It's not worknig in my existing file but when I create a new one to just test this, those loading dots don't appear.
@Jürgen - thats hugely helpful to know, thank you. Is this a general JS issue, or specific to Storyline?
Looks like I spoke too soon. I started a re-build of the whole thing using the new storyline file and as soon as I added the drug search javascript to it, it kicked up the same issue. So there's something specific about that code that's causing the issue.
UPDATE: It was something to do with undefined data being sent back by the googlesheet, so my friend ChatGPT helped me modify it to catch those and sort them out. It now works perfectly.
in the current version (58) I get two JavaScript error messages
Import: this are real ERROR-messages (storyline is wrapping the javacript in user js, so it will show only a warning)
Try this version: https://360.articulate.com/review/content/40d27177-f851-407c-b51a-3d1e7c8ad99e/review It should go to a blank slide with no loading dots.
Well, its got no loading dots.... :) It just doesnt have anything at all in way of content now! :P
Console reports a skipped function.
Im wondering if you meant to remove the Enter Name and Select Patient dropdown. Is the thing bugging out because it doesnt have any values in those variables now for the XML lookup?
I haven't re-built the next slide yet :) that's why it's blank.
As for the other bits, I left those blank for now as I know they work. It was the drug lookup that was causing me issues.
Ah I see, well no loading dots is whats happening, so it seems ok for now.
So it was malformed data coming from the XML? Thats what the console JS warning was hinting at hence I thought it might be the reason.
I wonder if Jurgen's good idea was because of this - forcing the text fields to be implicit data types of single line only?
It was specifically the code that looked up the search value on a google sheet using the API. It wasn't dealing with empty rows correctly. Here's what ChatGPT said about it:
To avoid the potential issue related to the toString method, you can modify the code to perform additional checks before accessing properties or methods that may result in errors when dealing with undefined values. Here's the modified code:
In this modified version:
Additional checks are added to ensure that data and its properties are not undefined before accessing them.
Before accessing row[0], row[1], row[2], and row[3], checks are added to ensure that they exist and are not undefined. If they are undefined, default values (empty strings) are used to avoid errors.
So now the code has been modified to avoid this and the dots.
Excellent info. Thanks for sharing Dave.
Good luck with the project too! o7