Flashcard interactions are a simple click-and-reveal activity that lets learners explore virtually any type of content in a freeform way by clicking interactive cards on the slide.
Hi David! Love this one. However, I'm having a rather difficult time figuring out what to do. I want the users to only be able to click on the next button after they've flipped over all the 6 flashcards. Can you help me?
You'd be better off setting the text onto their own layers, rather than having them as part of the states. The buttons themselves would only have the icon, and then a state that says visited. You can animate in the layers to create the effect of the fade, if you wanted to replicate the fade out, you could delay the hide other layers function and each layer would have button duplicates that fade in, then hide other layers, and then those objects would hide before the timeline end.
Then you could set a visited state for the buttons that is identical to the normal state, and then a separate trigger that is looking for all the states of the buttons to be visited, then enable the next button.
if they can revisit the page, make sure it's set to resume saved state.
I would recommend no... Expand
You'd be better off setting the text onto their own layers, rather than having them as part of the states. The buttons themselves would only have the icon, and then a state that says visited. You can animate in the layers to create the effect of the fade, if you wanted to replicate the fade out, you could delay the hide other layers function and each layer would have button duplicates that fade in, then hide other layers, and then those objects would hide before the timeline end.
Then you could set a visited state for the buttons that is identical to the normal state, and then a separate trigger that is looking for all the states of the buttons to be visited, then enable the next button.
if they can revisit the page, make sure it's set to resume saved state.
I would recommend not putting content text in button states that aren't visible from the stage, especially if you share files. It's easier to change and bugfix when they aren't integrated.
Hi David,
Thank you for sharing the project.
I have a question.
When I click on the second card or any card the state of previously selected card sets to normal automatically, but when I tried the same thing on my system, it is not working for me. Could you please suggest what am I missing here?
I performed all the operations: Created another state (Selected) for the objects.
Great question, Vishal.
To create the toggle effect, I used Storyline's button sets:
Select all your cards > right click on the outside selection > select Button Set > Button Set 1
Here's more info on button sets and how they work: https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-work-with-button-sets
Hi Dini - You can edit the card's text by selecting the card > go to the States panel > click Edit States > and now you can modify the text for each card.
Here's a quick video overview: https://360.articulate.com/review/content/512a316b-04ea-4b36-88c9-958adc80ae99/review
Hi David,
Thanks for sharing !
I had a question, when you click on one card, the state doesn't change directly, how do you make it slowly fading please ? I tried with animations, but it only affects the shape when it appears, not when the state is changing.
Thanks again for all your great templates !
Hi Mathilde - Here's a video overview that shows you the general idea for creating animated button states: https://youtu.be/8n3pjGPc6cg While it's not an official feature of Storyline, it's something that's been around since SL1.
It's a little extra work but I always felt the final effect was worth the time. Enjoy and let me know if you run into any issues or have questions. Happy to help.
I am having a lot of trouble making the flashcards with icons. It's easy with a simple number when I type that into the shape; the select state works great. however, when I try to use an image, the image will not group with the rectangle, and will not disappear when the selected state shows. I've tried many ideas, but cannot get this to work. Can you please help?
Hi- Does anyone know how to group images so that they all "flip" when I click the card to change the state? Is there a special trick to getting the graphic to turn around at the same time as the rectangle to show the back of the card?
Hi- Does anyone know how to group images so that they all "flip" when I click the card to change the state? Is there a special trick to getting the graphic to turn around at the same time as the rectangle to show the back of the card?
How did you set up the bar at the top of the card that turns from light blue to dark blue when the graphic itself is selected? I have inserted a shape and put title text into it (which is also a blue bar) then inserted another shape and added the graphic into it, so I have two objects - the title bar and the graphic card. If you group them you don't get the button set option in the right click menu. As separate objects, when you add the button set, the title bar doesn't change to the selected state unless I click on the actual bar. This is the only thing that doesn't work. Any ideas. Thank you.
Hi Julie,
I believe the background shapes are pictures and not separate shapes. An easy might be to create you box shape in PPT.. group it and then Save as picture. The do the same for the flipped version. Import the photos you created in Storyline and use them as the backgrounds for you 2 states.. does that help?..
Hi David. Thank you for taking the time to reply. I followed the steps but couldn't get it to work with the button sets. Also my flip side was text and some with hyperlinks so having that as a graphic didn't quite suit. Thank you anyway, I learnt something new!
For some reason I can't see the triggers. When I click on the cards they are not displayed. How do I get to see the object triggers? I only get the Player triggers displayed.
28 Comments
You'd be better off setting the text onto their own layers, rather than having them as part of the states. The buttons themselves would only have the icon, and then a state that says visited. You can animate in the layers to create the effect of the fade, if you wanted to replicate the fade out, you could delay the hide other layers function and each layer would have button duplicates that fade in, then hide other layers, and then those objects would hide before the timeline end. Then you could set a visited state for the buttons that is identical to the normal state, and then a separate trigger that is looking for all the states of the buttons to be visited, then enable the next button. if they can revisit the page, make sure it's set to resume saved state. I would recommend no... Expand