(Last Updated: November 5, 2019)

Our previous blog mentioned the undeniable benefits of e-flashcards for eLearning and raised a question: How to create interactive flashcards? To answer that question, I am going to show you the way to design two types of interactive flashcards ranging from basic to advanced level. In today’s blog, let’s learn how to create basic interactive flashcards with ActivePresenter. About the way to design advanced interactive flashcards, we are going to discuss in our next post.

The common type of flashcard that we normally know consists of 2 sides: a clue or notion on the frontside and an explanation on the backside. Learners can interact with the card by clicking any side of it, then the other side will show up. Below is an example of a simple interactive flashcard. 

Creating One Basic Interactive Flashcard

To be more specific, I am going to design a physics formula flashcard. It’s a simple flashcard with the term “Average Speed” on the front side and the definition and formula on the backside. To have this flashcard made, it requires several features of ActivePresenter such as Shapes, Object States, Equations, Variables, and Events-Actions. Let’s get started.

Creating Two Sides of the Flashcard 

  • For the frontside, I add a shape and rename it “Card 1”. You can customize the font, size and color of the text and shape as you want. For more information, see How to insert and style a shape.
  • For the backside, the Object States feature will come in handy for you to create it. Here you can add text and equations to illustrate “Average Speed”. For more information, see the tutorials about working with Object States and Equations.

Below are the two sides of an interactive flashcard that I have created. Normal (Default) and Back Side represents the frontside and backside of the card, respectively.

Back side of a basic interactive flashcard

Adding Interactivity to the Flashcard

The main step of creating the flashcard function is to set up events-actions to the card. We will do that with 2 tasks.

Creating Variables

We set up a true/false variable to keep track of things that execute one out of two values: right/wrong, clicked/not clicked, visited/not visited and so on. In this example, there are only 2 cases for the card to happen, which are to turn over the backside and the front side.

To add a variable, in the Home tab > Variables > Click the Add (green cross) button. For example, I set up a variable with true value and name it state. For more information, see Understanding and Using Variables and Adding and Using Variables.

Add variable for a basic interactive flashcard

Setting Events-Actions to Flip over the Card

First, we use event On Click to allows learners to click the card. To add this event, select Card 1 > Properties pane > Interactions tab > Events-Actions > Add Event > On Click.

Add On Click event to Card 1

For each side of the card, we use the same action Change Object State. 

Add Action (1) > Change Object State > Click to edit > Card 1 > Back Side.

Add Action (1) > Change Object State > Click to edit > Card 1 > Normal (Default).

Add action and condition

To each action, we add a condition to define when the action will happen, using the created variable. 

Add Condition (2) > If state is equal to value True

Add condition

Add Condition (2)> If state is equal to value False

Add condition 2

We need to add action Adjust Variable to change object state depending on learner’s manipulations. 

Add Action > Adjust Variable > Click to edit > Choose Variable: state and Operator: Toggle

The Toggle Operator here will change the value of the variable from true to false and vice versa. In ActivePresenter, actions happen in the order that you add. As a result, the  card will turn over if any side of it is clicked.

Adjust variable for a basic interactive flashcardEvents-actions to flip the card over.

For more information, see Working with Events-Actions.

That’s how to design a basic interactive flashcard. Now you can preview your work. (In the Home tab > HTML5 Preview).

Creating a Set of Basic Interactive Flashcards

When you want to design a set of basic interactive flashcards that use the same events-actions, it’s time to talk about Advanced Actions in ActivePresenter. This feature will save you a lot of time. The reason is that you will be able to use a newly created action (advanced action) for many cards instead of adding the same events-actions to each card one by one. After adding and formatting the styles for the cards, we continue creating an advanced action to flip these cards over. Below are detailed steps for doing that.

Creating and Applying an Advanced Action to an Event

To create a new advanced action, in the Interactions tab > Advanced Actions. I’m going to add values for 3 sections in the Advanced Action dialog in turn: 

  • Name the advanced action “1”
  • Add 4 parameters with their corresponding types. These parameters will be used as references in the next part. 

Add parameteres for advanced action

  • Add 3 actions and conditions using parameters created above. The first action is Change Object State using parameter state 1. 

Add action to flip over the front side

Continue adding condition to this action using parameter created above.

Condition for action change object state 1

Similarly, I add the second action to change object state to state 2, but set false value for the variable of the condition. Finally, adding adjust variable action to toggle 2 states. 

Adjust variables for advanced action

Here is an advanced action that I have created. Click Save and Close to save the advanced action and close the dialog.

Advanced action for multiple basic interactive flashcards

After successfully creating an advanced action, we will apply it to the cards. First, select the card and navigate to the Properties pane > Interactivity > Events-Actions. Here we add the On Click event and apply advanced action “1” and its conditions as image below: 

Apply advanced action to basic interactive flashcards

Perform the above steps to apply the advanced action to other cards. 

For more information, see Working with Advanced Actions.

Adding Navigation Buttons and Card Number

In order to make these cards to be more complete, we can create Next and Back buttons to navigate between the cards. Learner clicks the Next button if he wants to see the next card, or clicks the Back button to see the previous one. Besides, you can also add card number over total number of cards to show learners which card they are interacting with.

Adding Navigation Buttons

The Next and Back buttons need to be seen all over the slides. For this to happen, we use the Show over Multiple Slides feature. The button with added events-actions will move the card back and forward if you click it. Perform the following to insert these two buttons. 

Step 1: Insert 2 shapes. (Annotations > Shapes > Select one shape from the list). 

Step 2: Add events-actions for the Next and Back buttons:

  • For the Next button: Add Go Forward action to the On Click event so that when learners click the button, it will move to the next card. 
  • For the Back button: Add Go Backward action to the On Click event so that when learners click the button, it will move to the previous card. 

Add action to the Back button

Step 3: Show navigation buttons across all the slides. To do that, you select 2 buttons > Right-click them and choose Show over Multiple Slides.

Show over Multiple Slides

Adding Card Number

To show the card number over the total number of cards on slides, do as follows:

Step 1: Insert a text caption (Annotations > Text Caption)

Step 2: Add reference into the text box. To do that, click inside the Text Caption box to add 2 system references: apCurrentSlideIndex and apTotalSlides in turn. (Home > Reference > System > apCurrentSlideIndex > / apTotalSlides). 

Card number of basic interactive flashcards

Then, move this text box to the suitable position. 

Step 3: Show card number across all the slides. For that to happen, right-click the text box and choose Show over Multiple Slides.

Show card number over many slides

Note: So as not to have a slide automatically moved to another one, deselect the Auto Advance option of each slide. (Select a slide > Properties pane > General section >Deselect Auto Advance option).

Deselect Auto Advance option

Now you can preview your course by clicking HTML5 Preview in the Home tab.

That’s how to create one or multiple basic interactive flashcards with ActivePresenter. Follow our next blog if you want to know about the way to design an advanced interactive flashcard with a different purpose use.

Start creating interactive elearning contents with ActivePresenter now!

ActivePresenter Pro EDU


ActivePresenter Pro