SL2 HTML5 optimization

SL2 HTML5 optimization

 

I am trying to create a working story file that operates in 4 environments SL1 desktop, SL1 mobile, SL2 desktop, and SL2 mobile. In these two links I haven't changed anything other than where I published them from SL1 and SL2 respectively.

SL1 - http://course-demo.elearningbrothers.com/Templates/Games/Gameshow/story.html

SL2 - http://course-demo.elearningbrothers.com/Templates/SL2_Games/Gameshow/story.html

 

Keep in mind these two published files have the exact same triggers and everything, however, in the SL2 version, the states of the game board pieces don't display properly in mobile. We have found that changing the layer that has the triggers "when timeline starts change state to...[appropriate state according to variables]" to have a "resume to saved state" function it magically works in SL2 mobile as displayed here:

SL2 mobile fix - http://course-demo.elearningbrothers.com/Templates/SL2_Games/Gameshow_mobilefix/story.html

 

However, applying that fix for SL2 mobile creates the original problem in all of the other environments. It seems that "resume saved state" and "reset to initial state" are flip flopped in SL2 mobile.

 

Is anyone having a similar problem and can help me out in what I should do to create a logical and not complex way in making a fix for all environments?

14 Replies
Emily Ruby

Hello Bryce,

I was able to test this on an iPad mini, in comparison to the desktop version. I am seeing the game pieces light up blue when hovered, turn green/red based on right wrong on both files.

Can you let me know which ones you see the difference in?

Also are you testing this on iPad with Mobile safari or an Android device? Here is a comparison chart of what is supported in HTML5

Bryce Marshall

So I do understand that you guys optimize for iPad so I have been testing on a regular size iPad not the mini.

Someone asked for the HTML5 version so here are the links for that:

SL1 - http://course-demo.elearningbrothers.com/Templates/Games/Gameshow/story_html5.html

SL2 "reset to initial state" - http://course-demo.elearningbrothers.com/Templates/SL2_Games/Gameshow/story_html5.html

SL2 "resume saved state" (mobile fix) - http://course-demo.elearningbrothers.com/Templates/SL2_Games/Gameshow_mobilefix/story_html5.html

 

SL1 works great in both mobile and desktop.

 

SL2 "reset to initial state" on the game broad layer 

With the extension /story_html5.html it gives me the same result viewing it on a desktop as the extension /story.html does on when viewing it on an iPad.

As displayed in the attached image, there are only two screen lite up. One 300 point one that is red, which wouldn't give me points, and one 100 point screen that is green, giving me 100 points. However, I have been through about 7 questions before taking this screen shot in which I have earned 800 points from, but the other screens aren't lighting up letting me which ones have been selected. It is all about the problem with the triggers "when timeline starts change state to...[appropriate state according to variables]".

 

SL2 "resume saved state" on the game broad layer

when I view it with the extension /story.html on a desktop it will never show me any of the red or green states. But with the extension /story_html5.html on a desk top and extension /story.html when viewing it on an iPad it works fine.

 

I hope this is descriptive enough. let me know what you find.

Emily Ruby

Hello Bryce,

I looked at both of the html5 under resume to initial state on Chrome on a Windows 7 pc, and Safari on an iPad iOS 8.0. Neither were showing the green/red background. The fix should be changing the trigger to resume to saved. This will ensure the items stay at their Selected, or visited state after you click on it.

As you stated above, the resume to saved state file works, and I tested the resume saved state as well and it did work on both iPad and Google Chrome.

If the item is set to resume to initial state, it should go back to how it was when the timeline starts, before anything is clicked.

If you continue to have issues, please let us know.

Bryce Marshall

Here is a little break down of what i am seeing I hope it helps.

Regardless "resume saved sate" should never work for this type of interaction in fact it wasn't until many rounds of trial and error when we found it worked in HTML5 mode. The reason why it shouldn't work is because the states are hinged on the triggers "when timeline starts change state to...[appropriate state according to variables]". WHEN TIMELINE STARTS doesn't exist in "resume saved state" mode because when you revisit a layer that has "resume saved state" applied to it, it will start that layer where you left off, whether it was at the end, middle, or even close to the beginning of the timeline it will never again have the timeline start all over again. Does that make sense?

Plus "resume saved sate" doesn't work in extension /story.html as displayed in the attached image. 

Bryce Marshall

One more thing so that we are clear. In the Reset-vs-Resume.jpg image the two screen shots on the right are the expected outcomes where the two on the left do not behave properly.

Like I said originally, it seems like the functions "resume saved state" and "reset to initial state" are flip flopped in SL2 mobile / HTML5.

Bryce Marshall

Hi Emily,

Thank you for getting back with me. Could you explain to me why you think that "resume saved state" works? Because when I view the game with the "resume saved state" function turned on, using the extension /story.html, and viewing it on my desktop for me and my colleagues it doesn't work. I would be very open to see/ know how you get it to work in that environment. As explained in my post on Friday, September 26, 2014 at 1:07 PM, "resume saved state" shouldn't work and it doesn't as shown in my screen shot I sent. I am just seriously confused why we are not seeing the same thing and not coming eye to eye on this.

That being said, for sure here is my working document. It is a little complex, however, the layer in question is on slide 1.2"Quiz" layer "Game Board".

If your answer ends up being the same please let me know.

Thank you for your help,

Emily Ruby

Hello Bryce, 

When i opened your above links for the SL2 resume saved state file, it did work correctly with .story.html, and the .story_HTML5.htlm

Unfortunately I was not able to see the difference.

I opened the file you shared in Storyline 2 and published, and here are my published outputs for both story.html, and story_html5.html

Both open a play as designed in Chrome Version 37.0.2062.124.

http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19369r9ng14qrbo0frn6hi1n544/story.html

http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19369r9ng14qrbo0frn6hi1n544/story_html5.html

I also took a screen recording of the story.html file here, this is how it is acting in Google Chrome on a Windows 7. The icons are staying lit green and red after being selected.

If you do still encounter issues on your end, you may want to submit a support case.

Bryce Marshall

OK this is helpful, here is a quick video of what I am seeing. 

http://course-demo.elearningbrothers.com/Templates/Games/Gameshow10-1-2014%2012-45-40%20PM.mp4

So like I was saying I think we are getting to what my problem could be. Your published version works, but when I publish it out it doesn't, as displayed in my video. maybe some of my publish settings are incorrect.

First of all I thought this was a "support case" but if you think I still need to submit a support case let me know, but I think we could have this figured out.