Storyline 360 HTML5 problem?

Hi, I have a course that is within a very strict LMS system environment (military) that can have no flash output, hence the new 360 HTML5 only format - great i thought!

However, I have an issue which i have never seen before. Namely the substitution of characters in the font family. As you can see from the screengrab the body copy has somehow been changed. I am using standard system font -Arial, Scorm 1.2, HTML5 "only" on the new storyline 360. What makes matters even harder to understand is that some text is fine, notice the two top text items. Both these are 'live' fonts and they seem to render correctly.

I have tested these courses on Scormcloud and they work correctly but...

Has anybody ever seen this before?

Is there a problem with the new HTML5 output on storyline?

Thanks.

22 Replies
Paul Knights

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

Brian Allen

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
Chris Dorna

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.

Brian Allen
Chris Dorna

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

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.

Peter F.

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

John Pieterse

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!

Ashley Terwilliger

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! 

John Pieterse

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.

John Pieterse

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 :-)

 

Ashley Terwilliger

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. 

Jessica Koehler

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