Prev/Next button incorrectly appearing in HTML5

One of my colleagues has an issue with a SL2 module and I thought I'd share here:

She's using a freeform drag and drop interaction that resets to initial state upon each unsuccessful attempt.

We use custom navigation throughout our modules with all default navigation such as the previous and next buttons disabled.

The issue she is getting (in HTML5 only... both iOS7.3.1 and Android 4.4.2) is that an unsuccessful attempt will reset as intended but also display the default Prev/Next buttons in the location of the seekbar which is also disabled. (see attachment)

I've checked and these buttons are not ticked within properties of the slide and the associated results slide and this problem doesn't occur in its flash equivalent.

Any takers?

Edit: Removed "Freeform" from thread title as this issue applies to all quiz elements when viewed as HTML5. 

45 Replies
Ashley Terwilliger-Pollard

Hi Mark,

Thanks for sharing the image here to demonstrate that the next/prev buttons appear. Are they appearing throughout the course or just on a quiz review for example? If it's during a review, that's expected based on the behavior here, although I haven't seen it only occur in the HTML5 output.  Have you also looked at testing the HTML5 output in Chrome (pointing to the story_html5.html file will direct you there) to see if the behavior is different not on a mobile device? Since you're only seeing this in the HTML5 output as well, we'd be happy to take a look at the course. You can share a copy of the .story file here (or even just a few sample slides that demonstrate the behavior) and we can do some additional testing. 

Greg Taylor

Hi Mark,

i am having the same problem and i can confirm its isolated to the html5 output file. 

I made a pick one activity and set it so that it only allowed 1 attempt. The reason for this was because i didnt want the learner to be able to change their answer whilst looking at a feedback layer. 

So i created a 'try again' button and placed it on the incorrect feedback layer. The only triggers active on this button are: "hide the layer" and the troublesome "jump to slide" trigger.

the jump to slide trigger actually jumps straight back to the pick one activity slide. I made this so the learner could then re-attempt the question And start the process over again. 

The problem is in the html5 output. When it jumps back to the activity slide the default storyline 'next and prev' buttons appear on top of my custom designed nav buttons.

I can confirm these are turned off in the settings for every slide in my course and that this does not happen in the flash verion of the course.

Any help would be appreciated.

cheers - Greg

 

Ashley Terwilliger-Pollard

Hi Greg, 

How is the user set up to submit the interaction? Do you also have a custom submit button? You mentioned they appear on top of your custom buttons - do you mean within the player itself or something else? I don't see that Mark shared his files here but we're also happy to take a look at your course.

In regards to try again layer, the feedback layers do have an option to disable the user from clicking on the base layer - so that would stop them from changing their answer while on the feedback layer and then you could use Storyline's built in attempt count to control what layer(s) they see and how the slide advances. 

Angeline Kelly

Hi Ashley, I'm having the same issue with my course - only on HTML5 output. Attached is a screenshot of where the buttons appear. I set the submit interaction on a custom button, which also has an action to jump to the next slide which is the results page.

Do you have any insight on how to solve this issue?

Thank you!

 

Ashley Terwilliger-Pollard

Hi Angeline,

Thanks for sharing those screenshots here. I didn't hear any additional information from Greg, but it is definitely odd that the player buttons are randomly appearing in HTML5, and over the slide content. So we'll want to take a look at your .story file to see how it's set up and test replicating the issue ourselves. Can you share a copy here with us? 

Angeline Kelly

Hi Ashley, sorry for my late reply. Here's a sample of file with a free-form interaction.

Check it out:

1) Complete the drag and drop

2) Click next to the summary page

3) From the summary page, go back to the drag and drop, you will see Storyline's native "Prev" and "Next" on the HTML5 output.

 

Thank you for investigating this.

 

Inspire Group

As a temporary work-around, we're running a bit of JavaScript.

On the 'free-form' slides

open triggers

create a JavaScript new trigger

place this in the JavaScript editor:

(function(){

           var head = document.querySelector("head"),

                injectCSS = "<style>#control-next{visibility: hidden;}#control-previous{visibility: hidden;}</style>"

           if(!head.innerHTML.match(injectCSS)){

                head.innerHTML += injectCSS;

           }

     }());

 

Not a great workaround, because we all know that HTML5 outputs are slow enough without these extra things.  Hope to see a solution soon, Storyline!

 

Ashley Terwilliger-Pollard

Hi Angeline,

Thanks for sharing that sample file here. I published it and placed within SCORM Cloud here, and tested on my iPad in mobile safari and didn't see the player buttons reappear after completing the drag and drop, going to the last slide and then hitting your custom previous button. Can you test that one and let me know how it works for you? 

Mark Lester

Hi Ashley,

It seems this issue is quite common to those of use who use custom navigation, quiz slides and view that content on HTML5. For us this issue seems to happen on types of quiz slides from multiple choice to drag and drop.

I can provide you with a scorm package but company policy prevents me from sharing it publicly so I'd need a private location to share with your team.

Ideally though, with myself and other users experiencing the same issue couldn't the tech team conduct their own test using the above criteria?

Regards,
Mark

Ashley Terwilliger-Pollard

Hi Mark, 

As I mentioned to Angeline, myself and a few other members of our team tested it and didn't see the same thing on our ipads - but we're happy to continue to look into it. If you'd prefer to share privately you can send it along here. 

Angeline, just to confirm - that image was the course link I posted above? Did you open it in a new browser with your cache cleared to ensure you're seeing my version and not a previously cached version you had in SCORM Cloud? Within the steps I mentioned going through - did I miss anything more specific in terms of do i need to answer correct, incorrectly? What iOS are you using as well? 

Mark Lester

Hi Ashley,

Thanks for the link, I've submitted a Support Case containing the relevant source file, four iOS 8.4 (cache cleared) screenshots and a detailed description (see below) on how to replicate this issue in HTML5.


1. Answer Question 1 and select "OK"



2. Select the Next (>) button


3. Once on the Question 2 slide select the Back (<) button


4. Observe the unwanted default "Prev" & "Next" buttons

I hope this helps and please let me know if you need anything else.

Regards,
Mark

Ashley Terwilliger-Pollard

Thanks Mark, Angeline and Nancy - so by default, we do expect them to appear again as detailed here but as you're seeing, you've removed all player elements and then they're appearing over slide content in HTML5 only. That portion has been reported to our QA Team so I've included this thread with that existing report. 

Mark - I reached out to Ryan to share that information with him, so that he could document it as a part of your case as well. 

Mark Lester

Hi Michael,

Thanks for adding to this thread, fingers crossed there's a patch fix soon.

If you're really in a jam the above script from the Inspire Group does fix this problem but as the author says it does slow the slide down so it's not a viable long term option. 

Cheers,
Mark

Greg Taylor

Hey all, 

I was able to find a work around by changing the attempts from 1 to unlimited - in the activities form view.

One problem I had after this change was that the learner could interact with the question again. I fixed this by placing a transparent box on the try again layer which covered, and consequently blocked, access to the selectables. 

Once the user presses the 'try again' button the slide is reloaded to its initial state with no default Next Prev navs.

I've included a copy of the story so you can publish out and check the .html5 output for yourself.