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 picture, before turning the card over and revealing the correct answer.

In this tutorial you will learn:

  • When to use Flashcards
  • How to create Flashcards
Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!
Get started with H5P

Video tutorial

The below video shows how Flashcards may be used and how to use it:

Textual tutorial - Example

Here are 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 remember facts such as historical dates, formulas, or names. 

Step 1: Topic

Flashcards are often used in language learning. In this tutorial, the topic will be Spanish berry names.  We will 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

Select the New content option 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:

Fresa

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 that 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.