Behaviour of navigation different when running in ipad.

Nov 25, 2013

Hi everyone,

Before i go on, I am pretty new in using Storyline. I have created some simple courses so far but now I am trying my hand at using variables and customized menu.

This course requires the output to be in HTML5 as it should be able to run on both pc and mobile environment namely the ipad specifically in Safari.

So far when I run in on pc it works fine. When I say fine, I mean the navigation runs the way it should be. But when I run it on the ipad, it does'nt work properly. Its very difficult to explain lest I show you see the runtime in both desktop and mobile environment.

I have uploaded the link of the demo for you to see - http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp18a9gavdhfvr1qalvfj1p5u1pp74/story.html

I really hope someone could help me out, and I am willing to provide the source code if need be.

Thank You.

PS: Details

The course is basically a Series of "select one" quizzes. The user will be able to move on regardless whether he gets it correct or wrong. But he may come back and retry till he gets it correct. the scores are tracked and shown at the end. There the user can start all over again or review the feedbacks.

The navigation is mainly through the set of numbered buttons representing each quiz and will indicate whether user gets a particular quiz wrong or right. The correct navigation would run exactly when you view it on the desktop in whatever browser. But in mobile, numbered buttons do not work properly.

3 Replies
Ashley Terwilliger-Pollard

Hi Rafe and welcome to Heroes! 

I'm not sure which numbered buttons you're referring to, the ones at the top of the module? If so, I was able to click on them within the iPad and while viewing on my PC in Google chrome. It would reset my attempts, including if I had already completed the second question. It seemed to be behaving the same in both courses. The changes to the state of the buttons within the iPad version also were updating (I assume that's being changed based on the variables you mentioned). Here is an image showing my progress through the course:

Rafe Sharif

Hi Ashley,

thank you so much for your reply! Apologies as I couldn't get back to you earlier.

Coming back to my question, I may not have been clearer in my explanation or may have described it vaguely, since I was and still not sure what the issue is. For one, it is not about the numbered buttons, which by the way represents each quiz , that was giving me the problem.

The variables here are working as you have noted ie the buttons are behaving as they should in that they would turn green when the user gets the answer right and turns red when its wrong. As I am using the "select 1 only" quiz type, the option button should show the selected state as indication to the viewer that it has been selected; especially important when you do "review quiz". Otherwise the user will not know which button has been selected. The issue now is when in the mobile environment, especially ipad, when I revisit the slide which has been answered, there are no option buttons showing the selected state ie all the 3 option buttons are normal state. Sometimes its random - a particular slide may show the selected option button as it should first time revisit but when I return to it again, it  will go to normal state.

What I have decided to do now is to "force" the correct option button on a slide to be in the selected state by copying that particular button from the main slide and paste in exactly in the same position in the review layer. Set it as in selected state by default, when I review the quiz, the slide should show the selected option button. Its seems to be stable when running on android but still in ipad, after doing a few revisits either by clicking on the numbered buttons or the next and previous button at the bottom of the player, the selected option button reverts to normal or perhaps the review layer gets hidden.

Anyway I have decided to tweak and trouble shoot t such a way that if it works on the android (my samsung note 2, Chrome browser to be exact) I would take it that its working and will take it that if the ipad do not run it properly, its the fault of the ipad os/safari.

PS: I tested on my desktop Chrome browser its working.

Ashley Terwilliger-Pollard

Hi Rafe,

Thanks for sharing some additional information here. Without seeing your original file, my first thought is what do you have the slide properties set as for revisiting? I'd suggest "resume saved state" to keep the button states even during review, as if you revisit the slide and it's set to "reset to initial state" or sometimes even with "automatically decide" the button states will revert to their original "normal" state. 

It seems odd that it's working in Android (which is not supported by Articulate) but not on your iPad. What version of iOS are you running? I tested it on my iPad mini with iOS7, and if you'd like to share the .story file here with us I can take a look at all your settings, publish and do some additional testing. 

This discussion is closed. You can start a new discussion or contact Articulate Support.