Trigger "Restart Course" in HTML5

Hello,

I am trying to create a button "Restart Course" which restart all variables/shapes and jump back to the first slice.

I use trigger "Restart course" and then "Jump to slide" in the same button.

It works in Chrome, but it doesn't work at all in HTML5.

Any advice on how to restart all variables and shapes to initial value/states when using HTML5 ?

Thanks in advance

Anh

14 Replies
Christine Hendrickson

Hi there Anh,

Without seeing how the course is set up completely, or how it's behaving, it's difficult to say.

However, one thing that comes to mind is the revisiting options for your slides. You could set them to "Reset to initial state" and simply provide a "Jump to" trigger to the first slide. This will reset all of your shapes, progress, states, etc. on the slide. This may not reset your variables, however. You could, however, add additional variables or conditions that could reset the value when the user revisits the very first slide. 

If you have trouble with this, you're welcome to share the .STORY file here. Maybe we can take a look and give some additional suggestions.

Thanks!

Christine

Christine Hendrickson

Hi there Anh,

Thanks for sharing your file!

The first thing I noticed is that your Revisiting settings for the first slide are set to Resume saved state. This will cause the slide to load where it left off:

You'll want to change this to Reset to initial state, so that the slide starts from the very beginning when viewed again by the learner.

Your second slide is set to Automatically decide. You'll want to make the same change here.

This is the same for the third slide.

I've made these changes for you, in the file you shared. I published and uploaded, just in case you'd like to test it:

http://chendrickson.articulate-online.com/4556501548

I've also attached the modified file, just in case you'd like to publish and test this on your own server.

Let me know if you have any trouble with this, or any questions.

Thanks!

Christine

anh do

Hi Christine,

Many thanks for your demo and explanation.

I still have a few wishes :

- After the user input and then go to next slide, if they want to go back to see their answers, will I need to set it as "resume to saved state"? if yes, then will it conflict to the "reset to initial value" ?

- I tried viewing the demo site in FireFox (without Shockwave Flash), when I click restart, it goes back to first slide, but the text entry in 2nd slide is still keeping the old value.

Please advise

Thanks

Anh

Christine Hendrickson

Hi Anh,

"After the user input and then go to next slide, if they want to go back to see their answers, will I need to set it as "resume to saved state"? if yes, then will it conflict to the "reset to initial value" ?"

Not in HTML5 for text entries (I'll cover that below), but in Flash yes. If you reset, it'll clear the content and previous answers. If you resume, they'll be able to see what they selected originally. One option would be to provide a text variable to display what the learners answered. You can pull that into a slide, so that learners can review the response they gave. If they want to change it at that point, they can go back to the reset slide and re-enter their response.

"I tried viewing the demo site in FireFox (without Shockwave Flash), when I click restart, it goes back to first slide, but the text entry in 2nd slide is still keeping the old value."

It'll function a little differently in HTML5. Though the position of objects, etc. are reset the text will still remain in the field.

However, even though that text is still present in the text field in HTML5, learners can still change it. This works well if they need to simply correct a mistake in their response, rather than rewriting the entire answer. This isn't specific to Firefox, but since browsers handle HTML5 a little differently, it may not always be the case.

Let me know if you have any other questions.

Thanks!

David Sensenig

I may have found a work-around to restart the entire course in HTML5 at the click of a button. I created a button with a javascript trigger, and added the javascript:

location.reload(true);

When the user clicks the button, it reloads the page from the server (not from cache). The learner is prompted to resume the course where they left off, and if they select "No" they will be able to restart the course with all settings (states, variables, results, etc.) reset.

I used this because I wanted to maintain the saved state of each slide so that users could review their answers and the feedback that had been provided. I wanted an easy way to reset the course without having to close out and come back in. However, the "Restart Course" trigger did not work in HTML5 (although it did work in Flash).

If this works for anyone else I'd be interested in knowing as I've just tried this and haven't completed the project yet that I'm working on. However, it seems promising. (Btw, I'm on Storyline 1. Any word if this has been fixed in 2?)

Tyler P

Hey David,

I know this is a super late response, but I found your comment very helpful. 

I was trying to accomplish the same thing you were. I wanted to maintain the saved state of each slide in each drag and drop activity so that the user could review their answers. For that reason, I didn't want to set each slide to "Reset to Initial Sate".

I'm using Storyline 2 and the "Restart Course" option still functions the same as it did in Storyline 1. When the "Restart Course" option is used, it starts over from the first slide and all the drag and drop objects are reset, but it doesn't let you drag and drop the objects, instead it is just a static page with the "Submit" button removed from the frame.

From what I could see, there is still no default way to restart the entire course in SL2

Thanks for the help!

Tyler P

Hey Leslie! I had the Drag and Drops setup in a way that didn't require a results slide.

However, I was reading through the Result Slide hyperlink that you included in your comment and found out that in order to restart the course, I need to reset the results page (even if it was never create or intended to be used). So I created a blank results slide that the user never sees and then I was able to create a trigger on my last course slide to reset results and jump back to the beginning of the course!

While the JavaScript solution that David had provided was working for me previously, I think that this is a much better way to restart the course WITHOUT having to set each slide to "reset to initial state" on revisiting.

Thanks for the help Leslie!