Performing State Changes

ActivePresenter
1

I was looking to create a small interaction where the learner clicks either a left-facing arrow or a right-facing arrow. These are to act as “previous” and “next” buttons respectively.

The arrows - however - are meant to return to the previous state of an object or advance to the next state of an object. This would allow the learner to cycle through all the states of a given object in a way that is similar to a photo gallery or image slider.

I did search to find the following thread that appeared to have the same question but it was resolved differently than I would like. See thread

I had hoped to find an event to simply advance to the next state of a given object. I also thought perhaps there might be a JavaScript way to do this using something like goToNextState(“objectName”); but I did not see that as an option. Perhaps I am missing it…?

Does anyone know if there is an easy way to accomplish this with GUI functions? If not - I shall try to create a JavaScript function to increment a variable and concatenate it with a string to create state names.

1 Like
2

For those who may be interested - I did go ahead and build the JavaScript to do this. Though I am still interested in a solution described above if there is one.

In this example - I created a simple square shape and named it myBox
I also created a variable and named it myVar
I created four additional states for the shape and named them all as shape1, shape2, shape3, shape4, and shape5.

This allows me to combine the string with the changing variable value to match the state names.
The code below is found on the button to go to the next state.
Code for the previous state button has a few minor changes.

Since we would decrease the variable - we just subtract 1 instead of add 1
Then we change the <=5 to >=1
If we reach zero then cycle around to 5

// Increment the variable by 1
prez.variable("myVar",prez.variable("myVar")+1);

// Perform a conditional check
// I have 5 objects - so - if our variable is 5 or less
// go ahead and change the state
// Here we are concatenating the word shape with the variable value
if (prez.variable("myVar")<=5) {
prez.object("myBox").state("shape"+prez.variable("myVar"));
}

// Otherwise - if we go over a value of 5
// cycle to the beginning by changing the variable to 1
// and displaying the corresponding shape
else {
prez.variable("myVar",1);
prez.object("myBox").state("shape"+prez.variable("myVar"));
}

Hopefully this helps someone else over time.

1 Like
3

Hi Greg,

Using JavaScript like yours is the quickest way to achieve what you want.
Using GUI functions can combine actions, conditions, and variables. However, when it comes to setting up many states, it will be more confusing.

Thank you for your dedicating responses.

Regards,
Quynh Anh

4

@QuynhAnh_Vu - Thank you for clarifying.
That might be a nice feature to consider adding for a new version release.

Event Actions
Go to Next State
Go to Previous State

1 Like