Can't figure out this interaction!

Hi everyone!

I am completely new to Storyline 2 and I had this idea that now I can't seem to figure out how to put it together. It is a drag and drop quiz question, where as they drag an ingredient to the beer, the beer should be filling up in the mug. However, there is no sequence in the ingredients so if they drag a random ingredient how can I make the beer fill up regardless of the order? I've attached a picture to show this scenario. Thank you so much in advance!

 

-Patty Franco

15 Replies
Heather Beaudoin (Steckley)

I would create a variable called beer and set it to 0. Then, for each correct ingredient they drop onto the mug, add 1 to the beer variable.

For the yellow image in the beer mug, give it five states, named 0, 1, 2, 3, 4.  Set the initial state to 0. Make the 0 state look like it's empty, make the 1 state look like it has a shot in it, etc up to 4 is a full mug of beer.  Then, add these four triggers... if beer=1, then change state of yellow image to 1, (repeat for each number).

I would think that should do what you're wanting.  It's hard to know without trying it, though.  If you want, you can share the story file.

Heather Beaudoin (Steckley)

OK, I'm attaching a file that gets you most of the way there.  It's giving immediate feedback (filling up the mug) when you drop the ingredient, so it's more of an activity than a quiz question.  You can always change the Submit to a Next button if you're just using it that way.

You might choose to modify the Drag and Drop options to do something different with the ingredients other than just pile them up on top of the beer mug, but that's the way it is for now.

How I did it (cheat sheet) if you need helping understanding why I did things:

1. I named all the objects to make them easy to identify in all the triggers (see to the left of the timeline for each object).

2. I created a BEER object. Select it in the timeline, and view the States tab to see how I built it. You can edit the states to change it however you want. I built it up with a few trapezoids with a 35% transparency of a yellow I picked off the Flour bag.

3. I created a Beer variable = 0. I created a trigger on each of the four correct ingredients to add 1 to the variable when you drop that shape on the mug.

4. I added four slide triggers that changed the state of the BEER object to 1, when the variable equals 1, 2 -- 2, 3 -- 3, 4 -- 4.

This actually worked for the most part. But then I realized you could drag the same ingredient (like yeast) over the mug four times, and it keeps filling it up. So...

5. I created a variable for each correct ingredient and set them to False.

6. I added a second trigger on each of the four correct ingredients that changed its corresponding variable to True when it drops on the mug.

7. Finally, I added a condition to the ingredient trigger that added 1 to the Beer variable (step 4 above) that said to only add 1 if the corresponding variable is false (ie, for the yeast trigger, only add 1 to Beer if yeast is False.

 

Heather Beaudoin (Steckley)

By the way, I'm really going to laugh if one of the experts on here posts a really simple solution that gives you exactly what you want with fewer steps.  :)

At least this process teaches you a lot about variables, triggers, and states!  I hope it's more helpful than confusing.

Terry Coe

this seems like it would be a cool challenge to create the drag and drop items so that once they are entered into the cup, they would disappear, making it look like they are being replaced with the beer.

Maybe once the ingredient variable is set to true, it moves that ingredient to the behind the rest of the picture, that way it seems to hide it... not sure if that is possible

Heather Beaudoin (Steckley)

I had been thinking of changing the state of the ingredient to Hidden after it was dropped, which would achieve that.  However, I didn't know if the original poster still wanted them to be able to select the object and move it again.  But I agree... that would be cooler.  Just depends what the design requires.  We could come up with other options if she identifies more requirements.

Heather Beaudoin (Steckley)

I just modified the fourth state of the beer image to include foam.

I also modified this version to hide the correct ingredients after filling the mug and add a red x to the wrong ingredients.

So, hope those techniques are helpful to someone.  :)

 

Patty Franco

Oh my gosh!!! This is waaaaay better than what I hoped to achieve! It is great!!!! Thank you so much for your help and for the tutorial! I am printing out your reply so I can reference it in the future and learn how to do this. Words cannot express my gratitude! Thank you Heather! Thank you everyone for all the suggestions!

-Patty :)

Heather Beaudoin (Steckley)

You're welcome... I didn't know if I went too far.  :)  I figured if you're new to Storyline, this would be a really good tutorial to learn a lot of main features.  That's why I took the time to write out the steps... otherwise, just looking at the file might have been too overwhelming.  Have fun with your beer project!  :)

Patty Franco

This was perfect! How I envisioned it but was certain I wouldn't be able to get there haha! I just printed your reply and I am going to attempt to rebuild it on my own because I feel that is the best way to learn. I truly appreciate your help and time with this project, and I am excited to keep learning and discovering more features!

Cheers!

Patty :)