Adding narrations in the Flip card

UPDATE: By design, you can add an Audio Narration file as an additional element to each or either side of a single Flip Card element and it will play automatically when the side is revealed. However there is currently an issue in which an audio narration file added to the back side of a single Flip Card element gets played when the page loads as well as when the back side of the card is revealed.  

The following information is a work around option until the issue is resolved.

Chris

You can do this by using variables if you are using the single Flip Card element (found on the Engage tab >> Interactive Elements), not the Flip Card Set that sets up two or more flip cards on the same element (Engage Tab >> Widgets).

What you can do is set up a variable to track if the learner is clicking on the front side or the back side of the flip card element, so you can tell the audio file to play only when the back is being revealed (by the learner clicking on the front side of the flip card, to flip over to the back side).

Here’s how I did this in a quick test that I made.

First, I added the Flip Card element to the page, then I added the Audio file to the page. To hide the Audio element from the learner, select the Audio element on the page then select the Options tab above the stage. On the Options tab select Hide Controls.

Next, we need to set up a variable to have a value of 0 when the page is loaded:

1. On the Interact tab select Triggers
2. Select Current Page >> is Loaded
3. On the Panel that opens, select Functions and Variables from the left-side menu
4. Select Set Variable
5. The right-side panel will open. From the Variables drop down, select New Variable
6. Type the name of your variable in the Name field, in my test is used FlipCard1
7. Leave the Operator as =; In the Value field, type 0
8. Select Apply

Then I set the Flip Card element to have two actions to alter the value of the variable FlipCard1 so that if the learner is selecting the front of the card the value gets set to 1, if the learner is selecting the back of the card the value is set back to 0. Here’s how I set up the first action:

1. Select the Flip Card element on the page
2. Select the Actions icon (purple lightning bolt)
3. Select More... (NOTE: The default trigger initially will be When the element is complete, but we’ll change that to When Clicked on in an upcoming step)
4. On the Panel that opens, select Functions and Variables from the left-side menu
5. Select Set Variable
6. Select Next
7. The right-side panel will open. In the Triggers list, select When clicked.
8. From the Variables drop down, select the variable FlipCard1
9. Leave the Operator as =; in the Value field, type 1
10. Now, we need to tell this action to only fire when we want it to, which should only be when the variable = 0. To do this, in the Conditions field right-click then on the list menu that will be shown, select Custom Variables then select your variable (in my test, FlipCard1). This will automatically add “{{FlipCard1}}” to the conditions field. Add two spaces after the variable name the type != then two more spaces then 1. The complete phrase will look like this : “{{FlipCard1}}  != 1” (without the quote marks.)
11. Select Apply

I then followed the exact same steps to add a second action to the Flip Card element to fire an action to set the FlipCard1 variable back to 0 if it has been set to 1. In step 9 above, the value to set is 0 instead of 1. In step 10 above, the value in the conditions field is also 0 instead of 1.

So now we have a variable that is tracking whether the learner has clicked the front or back side of the Flip Card element. We can now use that variable’s value to play the audio file when the learner has flipped the card over to the back side, when the variable’s value is 1:

1. On the Interact tab, select Triggers
2. Select Variable >> Is Changed
3. On the panel that opens, select your variable from the list.
4. Under the Number section, select Equal to then type 1 in the text field
5. Select Next
6. On the Panel that opens, select Media & Timers from the left-side menu
7. In the Media & Timers section at the top, select Play
8. Select Next
9. On the right-side panel, select the Audio file under the Targets list
10. Select the variable in the Variables list
11. Leave the Operator as ==
12. In the Value field, type 1
13. Select Apply

These last steps will play the audio file whenever the FlipCard1 variable gets set to a value of 1, which will only happen when the learner is clicking the Flip Card element on its front side, to reveal the back side.

Here's a link to the sample page I made for this: https://dki.io/a1b3b44e

In the sample, I didn't hide the audio file on the page. I also added a text element in the same group as the audio file to display the value of the Flip Card variable as a way to checking my work to ensure that the variable was successfully changing as expected, it shows 0 or 1 as you flip the card. This wouldn't be something to display to the learner.