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
Click "Get started" button to explore all possible ways for using H5P
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:
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.
Mon, 06/10/2019 - 19:50
Although I have entered text on the flash card in lower-case letters, it appears with the first letter capitalized when shown in the browser. This is misleading to students, since the answer should begin with a lower-case letter. Why doesn't the browser show the same capitalization as I have entered?
Tue, 06/11/2019 - 06:35
Hi,Thank you for reporting
Thank you for reporting this. I created a bug report and you can follow the progress here.
Wed, 07/03/2019 - 19:28
Source: space not allowed?
Hi, I wanted to enter in the source "eigenes Werk" (meaning: "own picture") but it showed me the mistake that signs are not allowed. Is it possible that there is no space allowed?
Thu, 07/04/2019 - 07:16
Hi gerhardbeck,The source is
The source is for a website if in case you downloaded the image.
Thu, 07/04/2019 - 08:20
Yeah, but wouldn't it be good and necessary to enter as a source anything: A book title, own work, etc...
Fri, 07/05/2019 - 06:51
Hi Gerhard,It is actually and
It is actually and Oliver has placed a suggestion on your other post.
Fri, 08/09/2019 - 16:15
What's the actual status on the variation in answering possibilities regarding flash cards?
I'm referring to Aimees question as well as your positive answer in november 2017: "Is there currently a way to allow the cards to account for answer variation? For example, if I want them to identify a line graph, it would be great if both "line" and "line graph" (and possibly "a line graph") were all correct."
Mon, 08/26/2019 - 22:40
Hide the correct answer
How can I hide the correct answer?
Thanks in advance for any tip.
Tue, 08/27/2019 - 19:06
Hi carlosro,The easiest way
The easiest way is to use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details.
Sun, 09/15/2019 - 17:28
Is it possible to have multiple answers? For example, I have an answer that can be singular or plural - both are correct.
Mon, 09/16/2019 - 18:39
Hi Vanboosh,This is a good
This is a good idea would you mind posting this in the Feature Request forum.