Retain state of scene when moving to next, then returning


(Colette Levesque) #1

QUESTION: Is there a way to get the scenes to retain their state when moving from one scene to another and returning to them?

Let’s say i have 2 scenes.

On scene 1 i click the word RED from a series of buttons with text and the word RED appears over the underline.

Blue and ______ create purple.

buttons: -red- -purple- -green-

Now i move to scene 2 and answer another similar question. When i go back to scene 1, it’s reset to it’s starting state so the word RED is no longer over the underline.

Is there a way to get the scenes to retain their state when moving from one scene to another and returning to them?

Thanks.


How to retain the state of a scene in Hype
#2

@monkygrl

Hi Colette!

The following is intended to show You a simple method for accomplishing your request (it is not a bomb proof solution) which You will need to adapt to your situation. This method uses Hype’s timelines & a wee bit of JavaScript. (There is a one line script in the “Head HTML”, plus two JavaScript functions - “loadSceneGoToTime” & “unloadSceneCurrentTime” - each consisting of one line.)

Hype Project Demo: ButtonChoiceTimeline_JHSv1.hype.zip (24.3 KB)


In the “Head HTML” we initialize the variable: sceneOneTime = “0”;
This will be used to set the initial value of the variable “sceneOneTime” for the timeline “Scene 1” (i.e. the first time the viewer views “Scene 1”) at zero (seconds).

If You want to work with more scenes initialize them too in a similar manner - with each scene having its own timeline and variable name… e.g. a timeline named “Scene 2” with a corresponding variable named “sceneTwoTime”. These names are made up - use what works for your style.


Click a button (“Red”, Purple", “Green”) in “Scene 1” to fill in the name for that choice. What we are doing here is going to a particular time in the “Scene 1” timeline. 1 second on the timeline shows “Red”, 2 seconds “Purple”, 3 seconds “Green”.

Click the “Go to Scene 2” button.


The “On Scene Unload” handler for Scene 1 (running the function “unloadSceneCurrentTime”) stores the current time in the “Scene 1” timeline (e.g. “3” seconds) in the variable “sceneOneTime”:

sceneOneTime = hypeDocument.currentTimeInTimelineNamed('Scene 1');

And then we go to “Scene 2”.


When the viewer returns to Scene 1 (“On Scene Load”) the value in the variable “sceneOneTime” is used by the function “loadSceneGoToTime” to set the “Scene 1” timeline to that value. For example a value of “3” sets this timeline to 3 seconds which equals the “green” choice being displayed in the sentence:
Blue and _________ create purple .”


Remembering a decision from an earlier slide
#3

The answer from @JimScott should suffice. In his example he saves the “State” in a variable named sceneOneTime. If you need to maintain the “State” between visits there is also localStorage. This allows you to retain the state between visits.

That would involve renaming sceneOnTime to localStorage.sceneOnTime everywhere. If you need this you can read more about it here: https://www.w3schools.com/html/html5_webstorage.asp


(Colette Levesque) #4

Thank you, that worked :slight_smile:
I appreciate the quick help.


#5

I used this solution as well, solved a problem very effectively, thanks a lot!