HTML5 output fuzzy and, software simulation not working

Hi all, 

Below are a couple of links to the same e-learning, in swf and html5. I have discovered a couple of weird things that I hoped you might be able to help with.

HTML5 version:

1) Picture quality is much lower than swf version.

2) (Only with Safari9 on a Mac. No issue with Chrome on Windows) The "She'll be right" button leads to a software simulation/test. You should be abled to select any point on the screen, click, and the little spinning wheel stays where you clicked. You then click "SUBMIT" to submit your choice. On the HTML5 output, the wheel doesn't appear when you click anywhere on the very right of the screen (where all the buttons are). However, if you do click the right location (where the 'correct' hotspot is) and then 'SUBMIT', the interaction is in fact submitted successfully, indication that the hotspot is working, its just the wheel that's not displaying. In the swf output, this all works fine.

3) (Windows Explorer9) Won't open at all (freezes at the round 'loading' icon).

 

SWF version:

1) (Tested with Safari9 on Mac, Chrome and Explorer on Windows) When the "She'll be right" test is passed, clicking the 'Next' button in the player should end the course (using a trigger), but it does nothing. Again, this works fine in the HTML5 output. HOWEVER, this works fine when the file is uploaded to our LMS. Nothing to worry about?

Again, when uploaded to our LMS, which will only output the SWF version, everything works fine. But I'd like to get to the bottom of this.

Links are below (am I linking to the correct storyline files?). Thanks in advance.

http://mazdapublic.s3.amazonaws.com/MMDS/story.html

HTML5 version - http://mazdapublic.s3.amazonaws.com/MMDS/story_html5.html

6 Replies
Justin Wilcox

Hi Steven. 

Thanks for providing such a detailed description of the issue. Would you be able to share your .story file and published output so that we could take a closer look? You can submit a case here and you can include the files on the second page of the contact form. If you include this forum URL it will help whomever will be assigned to the case. 

Mike Jones

Hi Steven,

Although I may not 100% accurate on all of the issues you mentioned, here are a few things I learned from researching HTML5 output capabilities.

1) Picture quality is much lower than swf version.

HTML 5 output does not vector the content, which may be what you're experiencing with the loss of quality. I'd suggest looking at the size/resolution of your asset files -- if they're inserted at a small size, when the output is enlarged, you'll likely see a loss in quality.

2) (Only with Safari9 on a Mac. No issue with Chrome on Windows) The "She'll be right" button leads to a software simulation/test. You should be abled to select any point on the screen, click, and the little spinning wheel stays where you clicked. You then click "SUBMIT" to submit your choice. On the HTML5 output, the wheel doesn't appear when you click anywhere on the very right of the screen (where all the buttons are). However, if you do click the right location (where the 'correct' hotspot is) and then 'SUBMIT', the interaction is in fact submitted successfully, indication that the hotspot is working, its just the wheel that's not displaying. In the swf output, this all works fine.

It appears that the spinning wheel you are referencing is some sort of flash-based animation. Is that correct? If so, keep in mind that a major proponent of the HTML5 standard is to provide a flash-free alternative for web-based multimedia. For eLearning developers, that means flash-based assets will not be supported in the HTML5 output.

3) (Windows Explorer9) Won't open at all (freezes at the round 'loading' icon).

There is quite a bit of debate online as to whether ie9 actually supports HTML5 as well as Microsoft touted at it's release. One suggested workaround is to disable the compatibility view as shared in the linked article. Personally, I haven't tested HTML5 in IE9, or this potential fix.

1) (Tested with Safari9 on Mac, Chrome and Explorer on Windows) When the "She'll be right" test is passed, clicking the 'Next' button in the player should end the course (using a trigger), but it does nothing. Again, this works fine in the HTML5 output. HOWEVER, this works fine when the file is uploaded to our LMS. Nothing to worry about?

Yes, this is nothing to worry about. However, you should keep in mind that the only way to ensure proper functionality for all features is to test the output in the intended environment. Testing locally will prevent triggers and other components from working properly in the swf output due to browser security settings for flash based content. 

Lastly, keep in mind that the LMS doesn't necessarily control what version of the output is launched. My understanding is whenever the story.html file is accessed, it will assess the browser/configuration and identify which of the available versions are most appropriate. If Flash is supported, it will always default to that output. Again, that isn't something that's controlled by the LMS usually.

I hope that helps!

Steven McAneney

Wow! Thanks for the input Michael! Great advice, and I'll definitely try some of your tips.

There was a misunderstanding with regards to the spinning wheel on the software simulation. It does work on 90% of the screen in HTML5 (working from a server, not LMS), it's just a vertical strip along the RH 10%  of the screen that its not working on.

I'm not too worried, as I still haven't tested the HTML5 version from the LMS. That's next on my task list!

Thanks again!