Storyline 360 HTML5 problem?

I haven't seen this issue, but is it possible that you copied this text from a source like Word? I'm just wondering if there's some stray formatting that is causing it to behave this way in SL360.

If there's a way you can share a .story file with just this one slide it would be helpful.

Hi Brian, Would that make any difference?

Whats your email address and I'll share the source with you. Unfortunately I cannot post on here due to restrictive nature.

Many thanks.

pk

I'm honestly not sure if it would or not, but it is a common problem I've run into in the past.

You can contact me by going to my profile page and clicking the contact me button - https://community.articulate.com/users/BrianAllen

Hi Paul,

That's certainly something we'd want to take a look at and if you can't post here, you can send along to our Support Engineers here. 

Hi Ashley,

I have done this. It seems its not a problem with the course itself but with the server that is hosting the courseware and serving it out to the end browser.

Due to the restrictive nature of the military environment the server is locked down and does not like the way that the final output coding from storyline is handled, especially when text is being converted to 'indivdual' svg files for each character. Not a problem on any modern system like scormcloud!

Many thanks to the guys for such a quick response and helpfullness though.

pk

Ran into this issue internally with some other HTML5 content, had to enable some mime types on the server for .svg, .woff, .woff2, .eot and .json

Not sure if all these are needed for Storyline's HTML5 content, but here's what we did specifically:

• .json  application/json
• .eot    application/vnd.ms-fontobject
• .svg    image/svg+xml
• .woff   application/font-woff
• .woff2  application/font-woff2

Thanks Paul for that update and I'm glad our team was able to at least confirm elements with you, even if it wasn't a viable solution. 

I had the same problem. At first my provider suggested to add these two lines to the .htaccess file on the server:

AddType application/font-woff .woff
AddType application/font-woff2 .woff2

Unfortunately that didn't work.

After a long search they added this line to the .htaccess file:

AddDefaultCharset utf-8

This worked!

I still wonder if this was a serverproblem or a problem with the SL-output.

Hi Chris,

Thanks for sharing that update here, and we've seen some odd behaviors with the WOFF files and not being recognized on particular servers so we updated our documentation here. Hope your solution and that article help out other users who run across the same thing! 

We've had to add these mime types to many of our servers, which in my opinion is a better option than going the .htaccess file approach.

With some of these newer file types I think we're going to continue to see server issues until we all get caught up. Same thing happened when the .mp4 video format was introduced a few years ago.

Hi, I am experiencing the same problem.
I built a couse with Storyline 360 (the content is in German) and published it as a SCORM Module in OpenOLAT. Here the problem looks exactly like the one shown in Pauls' screenshot. Except that the prev & next button are also in the wrong encoding... I contacted our LMS administrator and he found out, that in the header of the first js file you can find the following enty:

Content-Type: "application/javascript;charset=iso-8859-1"

Now the questiion is, why is there latin-1 given as an encoding?
I also tried in moodle, but here the problem doesn't occur.
Do you have any suggestions, how the problem can be fixed?
And how can I publish a SCORM Module in German without a broken previous button and the text for Menu without the wrong encoding?

Kind regards,
Jessica

Hi Ashley, just dropping in on the html5 subject after evaluating the html5 publish option of Storyline 360.

Opened a SL2 project into SL360 and published as html5 only. All is working fine except that the pictures are a bit blurred. Is this because the project was made in SL2 initially? Pictures are clear when published in SL as Flash. Or can this be avoided by importing it from SL2?

Thanks in advance for reaching out again!

Hi John,

We don't vector images within the HTML5 output so that could account for some of the blurriness and it was something we saw in earlier versions of Studio and Storyline. We've also seen the blurriness be associated with particular browsers and the way they handle HTML5 content - so to more fully answer your question we'd want to take a look at one your slides/images in question and do a bit more testing. If you've got the course within SL2 we can then do the upgrade to SL360 (no need to import it in, trying to open it within SL360 will do the upgrade process) and then test it out in the browsers listed here for Articulate 360. 

Also, you'll want to ensure that the images follow along with the best practices here. 

If you want to share a copy of what you've got, we’d be happy to take a look at your file. You’ll want to upload the .story file here (which is the file prior to publishing) using the “ADD ATTACHMENT” button at the bottom of the forums reply window. If you’d prefer to not share in the public you’re always welcome to share with our Support Engineers here. They’re available 24/7 to assist! 

Hi Ashley, thanks for your reply! I am not at liberty to upload the files (clients confidentiality) but I have attached two screen shots. As you can see the html5 output from SL360 did not only blur the picture but also the header/letters. The only thing I did was open the SL2 file with SL360 and published it to html5 only. Perhaps this gives you an idea and I will try to reproduce a similar action but then with a general testfile.

What browser are you viewing it in? Did you compare the HTML5 of Storyline 2 with that you're seeing in Storyline 360? Id want to compare those two and determine if something has changed as a part of the upgrade to Storyline 360 or if it's the difference in Flash and HTML5. 

Hi Ashley, just to let you know the outcome and possible solution.
My initial action was > open SL2 project in SL360 and publish for html5 only > resulted in blurred pictures. Importing SL30 only allows a SL template to be imported I noticed. However, opening SL360 for a new project allows to import a SL2 project the old fashioned way. After importing the project I published it for html5 only again and all pictures and text is bright and sharp again! Problem solved and info could be useful to others as well.

However, something quit different. After importing the SL2 project in SL360 I adjusted the player and disabled the menu function. After publishing SL360 to html5 only I noticed that the menu in still there, even after several more attempt and cleaning the PC's tempfile. When running on a pc/laptop a substantial part of the screen is taken by the menu and allowing learners to free navigation. Any idea how to solve this?

Sorry for asking again your help :-)

Hi John,

We're happy to help - can you share that new file so that I can take a look at it? If you'd prefer to share it privately you can always do that here.  The behavior you're describing with how the project upgrades as well is interesting so it's always good for our team to do a test comparing your files behavior with one on our own as well - that way we can confirm all settings are exact. 

Hi Ashley, thanks and I just uploaded the original SL2 story file to your support department. Hope they can find out what is causing the menu to return!

Thanks John - and I see Eloisa is assigned to it - so I'll give her a heads up about our chat here too.

Hi Peter/Jessica,

we've got the same problem here. Have you found a solution for this issue?

Viele Grüße

Robert 

Thelast time I encountered the problem we had to clean the browser's cache.

Hi Robert,

in OLAT you can "force" the encoding to UTF-8. Here is what you have to do:

1. Insert a SCORM course element

2. Open the tab "Layout" for this course element

3. Change "Content character set"  and "Javascript character set" to UTF-8 (you need to change both even if there is an option to say that the Javascript character set may copy the character set from the content set, but that didn't work in my case)

4. Insert your SCORM Module und define the rest of the tabs as you need.

That worked for us. Hope I was able to help.

Kind regards / Viele Grüße,

Jessica