H5P Guides

Flashcards tutorial

The Flashcards content type is a set of cards containing a picture on one side of the card and a corresponding text on the other side. The learner is asked to type a word or expression corresponding to the picutre, before turning the card and revealing the correct answer.

In this tutorial you will learn:

  • When to use Flashcards
  • How to create Flashcards


Here's the Flashcards we'll create in this tutorial:


When to use Flashcards

Flashcards can be used as a drill to help learners memorize words, expressions or sentences. Typical Flashcards provide a prompt on one side of the card, and an answer on the other side. In H5P Flashcards, pictures are used as the prompt. If you are looking for Flashcards with text prompts, take a look at the Dialog cards content type. 

Flashcards are often used in language learning for drilling words and expressions. Flashcards can also be used to present math problems or help learners remembering facts such as historical dates, formulas or names. 


Make sure H5P is up and running

If this is the first time you are using H5P, you should start off by reading this guide to ensure you are up and running with H5P on your platform. 

Alternatively, you can test drive H5P right here on h5p.org and skip to step 1.

Make sure your platform can create Flashcards

Navigate to the menu that enables you to create new content. In Drupal, you select Interactive content. In WordPress you press Add new under H5P Content in the admin menu. If you find Flashcards in the list of Content types, skip to Step 1.

If you can’t find the Flashcards content type in the list:

  1. Download the .h5p file you can find here
  2. Select the Upload option when creating a new H5P
  3. Upload the file from step 1
  4. Press Save

You will now find Flashcards in the Content type list when creating a new H5P.

Step 1: Topic

Flashcards are often used in language learning. In this tutorial, the topic will be Spanish berry names.  We'll create a set of Flashcards with pictures of various berries. The learner is asked to type the correct berry name in Spanish. We will use pictures of strawberries, blackberries and raspberries. 

Here are the Spanish translations we'll use as correct answers:

  • Strawberry - Fresa
  • Blackberry - Mora
  • Raspberry - Frambuesa

Step 2: Creating Flashcards

Head over to where you usually create new content on your platform. In Drupal you go to Create content and select Interactive content. In WordPress you select H5P Content and Add new from the admin menu. Then select the Create option for H5P and choose Flashcards from the list of Content types

Step 3: Flashcards editor

The Flashcards question editor should now appear. The main part of the editor looks like this:

In this tutorial, we'll focus on creating the Flashcards content. We'll, therefore, focus on the parts of the editor above the Common fields header.

The Flashcards content type consists of a Task description and a set of Cards

Step 4: Task description

Here we'll introduce the topic to the learner. The Task description is a static text displayed above the Flashcards throughout the entire set of cards. Insert the following text:

Drill Spanish berry names

Step 5: Cards

On this first card, we'll present the learner with a picture of a Strawberry and ask the learner to type the Spanish name for Strawberry.

The Question text can be customized individually for each card. We'll use the Question field to give the learner instructions on how to solve the problem. You can alternatively use this field as a textual prompt or to give the learner an extra hint. The Question text is optional. 

Insert the following text:

What is the Spanish name for the berry in the picture?

In the Answer field, we provide the correct answer. Add the correct Spanish translation of the word Strawberry in the Answer field:


Under Image, we add an image of a Strawberry. Since we want the user to type in the singular form of the noun Strawberry, we make sure to find a picture which only shows one Strawberry. 

Use pictures that are similar in size to ensure a smooth user experience for the learner. 

We'll use this image for the first card:

This picture by Tarun.real was found on Wikimedia Commons and is licensed with the Creative Commons Attribution-Share Alike 4.0 Generic license. Download the picture from Wikimedia Commons in an appropriate size.

Press the "+Add' button  to browse for the image you just downloaded. After you have selected the picture, it will be uploaded and a thumbnail of the picture will be displayed.

We use the Edit copyright button to add appropriate license information for the picture:

Now we've finished creating the first card of the Flashcards set. You should get this:

Step 6: Adding more cards

We'll add three more cards in a similar way and use the same Task description text for all the cards.

You can add as many cards as you want. Press the Add card  button to add the new Flashcard.

You remove cards by pressing the "X" button in the top right corner of the Card. You change the order of the cards by clickin on the up and down arrows in the tabbed list of cards to the left of the Card editor.

Below is a list of links for the remaining three pictures we'll use in this tutorial.

Pictures must be downloaded from an appropriate source, and then uploaded to the editor.

Step 7: Finishing up

By now you should have ended up with something like this:


Save the node/article when you're satisfied to view your final set of Flashcards. 
You should now have the same result as the example on top of this page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.