Dialog Cards Tutorial
The Dialog cards content type enables you to create a set of cards with corresponding words or expressions on either side of the cards.
In this tutorial you will learn:
- When to use Dialog cards
- How to create a Dialog cards
Click the "Get started" button to explore all of the possible ways to use H5P!
Video tutorial - example
The below video shows how Dialog Cards may be used, and how to use it:
Textual tutorial - Example
Here's the Dialog cards we'll create in this tutorial:
When to use Dialog cards
Dialog cards can be used as a drill to help learners memorize words, expressions or sentences. Dialog cards provide a prompt on one side of the card, and a corresponding answer on the other side.
Dialog cards are often used in language learning for drilling words and expressions. Dialog cards can also be used to present math problems or help learners remembering facts such as historical events, formulas or names.
Step 1: Topic
We're going to make a set of Dialog cards where the learners can drill themselves in berry genus names. Below is the text we'll use:
- Arandanos - Blueberries
- Frambuesas - Raspberries
- Fresas - Strawberries
- Guindas - Cherries
- Grosellas rojas - Redcurrants
We'll present the Spanish berry names first, and ask the user to translate the berry names in English.
Step 2: Creating Dialog cards
Select the New content option and choose Dialog Cards from the list of Content types:
Step 3: Dialog cards editor
The Dialog cards editor should now appear. The top part of the editor looks like this:
In this tutorial we'll focus on creating the Dialog card content. We'll therefore focus on the parts of the editor above the Common fields header.
The Dialog cards editor consists of a Title, a Heading, a Mode, a Task description and a set of Dialogs.
Step 4: Title
The Title will be displayed to the learner throughout the set of cards. Type the following text in the Title field:
Learn Spanish berry names
Step 5: Task description
In this field we can give elaborate instructions to the learner. The Task description is displayed throughout the entire set of cards, below the Title. Insert the following text:
Translate the berry names from Spanish to English. Turn the card when you are ready to see the answer.
Step 6: Dialogs
Press the Add dialog button to add the card.
You should now have something like this:
On this first card, we'll display the spanish word 'Arandanos' on the front side of the card with relevant image and audio and ask the learner to translate it to English
Insert the following text in the Text field:
Arandanos
In the Answer field, we provide the correct answer. Add the english translation in the Answer field:
Blueberries
Insert the following image under Image field and the audio file under Audio files. Image and Audio files are optional.
Now we've finished creating the first card of the Dialog Cards.
Your editor will look like this:
Step 7: Adding more cards
We can add four more cards by following the same procedure as in Step 6.
You can add as many cards as you want. You remove cards by pressing the button in the top right corner of the Card. You change the order of the cards by pulling the button in the tabbed list of cards to the left of the Card editor.
Step 8: 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 Dialog cards.
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.
Comments
minkirax
Sun, 01/03/2016 - 23:15
Permalink
How to increase the font size of the dialogue?
Is there any option to increase the font size or make it bold or italics? Thanks
falcon
Mon, 01/04/2016 - 15:20
Permalink
That is only possible by
That is only possible by adding your own styling.
muyanik09
Wed, 03/02/2016 - 15:22
Permalink
multi audio files
Hi. We can add multi audio files but i see that it doesn't make any changes in the output. Only the first auido is active and there is nothing from the others. Will be glad to overcome this problem. Thanks for any help.
falcon
Thu, 03/03/2016 - 16:20
Permalink
Yes, the interface isn't very
tarakesh1
Mon, 07/03/2023 - 08:42
Permalink
no
you telling wrong
BV52
Mon, 07/03/2023 - 18:20
Permalink
Hi tarakesh1,You are replying
Hi tarakesh1,
You are replying to a comment that is more than 5 years old. The information stated may or may not be applicable anymore. If you have any concerns or questions I suggest that you post it in the forums.
-BV
zhinio
Sun, 06/05/2016 - 08:51
Permalink
Unwanted scroll
Hi,
I am using Dialogue cards with a entity reference in Drupal 7. Everytime I click the next button it shows the next picture however it also scrolls to the top of the page!
Any ideas how to fix this?
Thanks
falcon
Mon, 06/06/2016 - 10:10
Permalink
Have you updated to the
Have you updated to the latest version of dialog cards? It doesn't happen on H5P.org so I don't know what is going on on your site :/ Do you get a JavaScript error in your console? (CTRL + SHIFT + J to bring up the console)
zhinio
Tue, 06/14/2016 - 06:49
Permalink
debug info
Hi,
Thank you for suggesting to debug through console. here is what i got. https://site.com/sites/default/files/h5p/libraries/FontAwesome-4.5/fonta... Failed to load resource: the server responded with a status of 404 (Not Found)
I should mention that it happens much less than it was previously and i am running last version of h5p.
falcon
Tue, 06/14/2016 - 13:13
Permalink
Ok, so it doesn't alway
Ok, so it doesn't alway happen? That error message probably is unrelated. It is a different bug that we've fixed lately.
Nuria
Thu, 09/08/2016 - 12:21
Permalink
the activiy doesnt work when inserted in a post
Hello,
I made a couple of dialogue cards activities. They seem to work good in the H5P plugin but after I have inserted them in the post, I check the site and the next bottom doesnt work. Its seems as if there is only one card. You cannot scroll to the next card.
I have created other activities, such as flashcards, and they are working fine. So it seems to only be affecting the dialogue cards activity. The other day however this activity was working so Im not sure what is going on.
fnoks
Fri, 09/09/2016 - 09:01
Permalink
Hi,I have answered you here:
Hi,
I have answered you here: https://h5p.org/node/23667#comment-6946
wfisher
Thu, 01/19/2017 - 15:40
Permalink
Randomization?
Hi,
Is there any option or variable to have these cards appear in random order when displayed to the learner?
tim
Thu, 01/19/2017 - 16:56
Permalink
Hi,no not yet... it would be
Hi,
no not yet... it would be a great feature request though! I've added it as a topic under the feature requests forum:
https://h5p.org/node/44850
Hopefully a developer from the community will pick it up!
wfisher
Thu, 01/19/2017 - 17:00
Permalink
Thanks!
Thanks Tim! I'd love to see this. I may even try to take a go at it myself :)
tim
Fri, 01/20/2017 - 08:48
Permalink
Good luck! You can find what
Good luck! You can find what you need regarding H5P development here:
https://h5p.org/library-development
And of course, the source code for dialog cards here:
https://github.com/h5p/h5p-dialogcards
ilarionovanm
Fri, 02/10/2017 - 20:44
Permalink
adding audio file to the Answer, to to the Text
Hi,
Is there any possibility to add an audio file to the second part of the dialog, not to the first one?
Thanks in advance
icc
Mon, 02/13/2017 - 09:38
Permalink
Currently, this isn't
Currently, this isn't possible but sounds like a good improvement. I would create a post in the Feature Requests section of the forum and hope that some developer picks it up.
emild
Tue, 02/06/2018 - 10:57
Permalink
Agree!
Yes, this would be highly useful!
scottbr
Mon, 05/13/2019 - 22:02
Permalink
Yes!
The ability to add an audio file to the answer would be really great because this is how we have been doing flashcards for many years with other technologies. Another possibility might be to allow for html in the answer and if there are links to audio or video files, a player would be shown.
AimeeT
Tue, 02/21/2017 - 22:22
Permalink
Picture and Colour
I was wondering if it is possible for the image to appear on only the answer side of the cards, rather than both. Also, is there a way to change the text colour in the cards?
AimeeT
Tue, 02/21/2017 - 22:22
Permalink
Picture and Colour
I was wondering if it is possible for the image to appear on only the answer side of the cards, rather than both. Also, is there a way to change the text colour in the cards?
tomaj
Wed, 02/22/2017 - 08:32
Permalink
Yes, in the css
Hi AimeeT,
You cannot configure the Content Type to work that way. But if you know html/css, you can just style it, to hide the image and change the text color.
Good luck!
- Tom
AimeeT
Sun, 03/26/2017 - 04:33
Permalink
Thanks for that. Where?
Thanks for that. Where?
tim
Mon, 03/27/2017 - 09:35
Permalink
You'll have to edit the code
You'll have to edit the code yourself, or find a friend who knows how to!
Here's where it needs to be done:
https://github.com/h5p/h5p-dialogcards/blob/master/css/dialogcards.css
Duradel
Fri, 05/26/2017 - 14:41
Permalink
Write answers + check?
Hi there
Is there any way to enable an answer text box? I would like to use this to make a spelling excercise (add audio recording of the word, make pupils write what they hear). I've tried using flash cards, but I cannot upload audio there :/.
thomasmars
Mon, 05/29/2017 - 09:54
Permalink
Hi, there is not. Ideally
Hi, there is not. Ideally Flash Cards should be used for this. Since there is no audio in it you could create a feature request for this, but I see you've already done that.
goty2001
Wed, 08/02/2017 - 11:21
Permalink
left-justifying the text
My dialog card text - both hint and answer, always gets centred - even after selecting it and choosing left-justify button. Is this a known bug or am I doing something wrong? Using it on Moodle 3.3.
Thanks
BV52
Thu, 08/03/2017 - 13:38
Permalink
Bug Report
Hi goty2001,
Thank you for reporting this. I filed a ticket for this and you follow it here.
For future submissions of possible bug please post it in the Bug in Content types forum for better visibility.
-BV52
Deepti
Thu, 11/16/2017 - 18:43
Permalink
Text getting center-aligned automatically
I have the same issue. We love the dialog card feature but would ideally like to have the choice of aligning text. Often we need to align left. Is it possible to keep those alignment options and not auto-align "center"?
BV52
Fri, 11/17/2017 - 08:43
Permalink
Hi Deepti,Your issue will be
Hi Deepti,
Your issue will be handled here.
-BV52
Linda.Woessner@...
Wed, 08/30/2017 - 18:34
Permalink
Change Font on Flash Cards?
Hi! I love the flash card feature! I need to make cards that contain code snippets which are hard to read unless you use a monospaced font. Is there an easy way to change the font, or do I need to add my own styling?
Thanks!
BV52
Thu, 08/31/2017 - 05:44
Permalink
Visual Changes
Hi Linda.Woessner,
You need to add your own styling. 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.
-BV52
Pammellam
Wed, 10/11/2017 - 07:35
Permalink
Easier Import Method of Dialog Card text??
I have lots and lots of vocabulary words to import for a language project.
Is there any way to import all the words in one go??
I use a flashcard app where I can paste all the text into a spreadsheet, like Google Spreadsheets, and as long as I have all the side 1 text in the first column, side 2 text in column 2, even the photos can all be imported as long as their names are in the appropriate column in the spreadsheet. It’s called FLASHCARD DELUXE. There is a free version, if you want to check it out.... All I have to do is go to the import function of the app. It goes to my Google Spreadsheet and imports all the text in one go. I can edit the imported text after import as well.
It seems counterproductive to have to copy and paste dozens upon dozens of words one by one in this day and age.... Even if the photos couldn’t be done, it would be great to be able to import all the text in one go. I think this would be a wonderful feature to add as most people making Dialog cards or Flashcards have the text all prepared in advance..... the work would go so much faster.
Pammellam
Wed, 10/11/2017 - 08:03
Permalink
Easy import of text
I have lots and lots of vocabulary words to import for a language project.
Is there any way to import all the words in one go??
I use a flashcard app where I can paste all the text into a spreadsheet, like Google Spreadsheets, and as long as I have all the side 1 text in the first column, side 2 text in column 2, even the photos can all be imported as long as their names are in the appropriate column in the spreadsheet. It’s called FLASHCARD DELUXE. There is a free version, if you want to check it out.... All I have to do is go to the import function of the app. It goes to my Google Spreadsheet and imports all the text in one go. I can edit the imported text after import as well.
It seems counterproductive to have to copy and paste dozens upon dozens of words one by one in this day and age.... Even if the photos couldn’t be done, it would be great to be able to import all the text in one go. I think this would be a wonderful feature to add as most people making Dialog cards or Flashcards have the text all prepared in advance..... the work would go so much faster.
BV52
Thu, 10/12/2017 - 05:12
Permalink
Hi Pammellam,I totally agree.
Hi Pammellam,
I totally agree. This would be a very helpful addition to the content. I suggest that you head over to the Feature request forum for a better chance of it getting implemented.
-BV52
Pammellam
Mon, 10/16/2017 - 09:59
Permalink
Thanks
I will go to Feature Request and try to explain....
studyaid
Wed, 12/18/2019 - 17:28
Permalink
Easier way to import CSV text using Dialog Card creator
https://github.com/sr258/h5p-cli-creator
sr258 committed Nov 14, 2019 https://github.com/sr258/h5p-cli-creator/commits/master
Wasilios Hariskos
Fri, 01/28/2022 - 13:36
Permalink
Cannot find this option
Where is this function implement?
Where can I upload my csv file?
What type of format do I need?
There is no documentation on this.
Thx for helping out.
Wasilios Hariskos
Fri, 01/28/2022 - 13:36
Permalink
Cannot find this option
Where is this function implement?
Where can I upload my csv file?
What type of format do I need?
There is no documentation on this.
Thx for helping out.
Deepti
Thu, 11/16/2017 - 15:06
Permalink
Alignment of text
Hi,
In the Answer field, text is automatically center-aligned. I wanted to add a couple of bullet points, and keep them left-aligned. Help please!
Thanks
BV52
Fri, 11/17/2017 - 08:44
Permalink
Hi Deepti,Your issue will be
Hi Deepti,
Your issue will be handled here.
-BV52
paulster
Tue, 01/09/2018 - 19:26
Permalink
Anyway to adjust spacing in Dialog cards?
When I use Dialog Cards I get very large vertical white spaces between the image, the text, and the Turn button. Is there a way I'm not seeing to move those elements closer together? It sounds like I can't delete the text and add it to the image, right?
BV52
Wed, 01/10/2018 - 08:35
Permalink
Hi paulster,I am unable to
Hi paulster,
I am unable to reproduce the issue that you described above. In order give your bug report the best chance of getting answered, please include the following information:
The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!
-BV52
paulster
Wed, 01/10/2018 - 15:54
Permalink
Thanks. I'm working within
Thanks. I'm working within h5p (https://h5p.org/user), intending to download the file when I am done. It has the same issue when downloaded onto my Drupal 7 site, although I have not tried editing it within Drupal. I'm using OS X 10.11.6 and Chrome.
icc
Thu, 01/18/2018 - 13:12
Permalink
This is clearly a bug to me
This is clearly a bug to me as the cards are very cumbersome to use. I've created an issue for getting this fixed: HFP-1825
tjrook
Fri, 03/02/2018 - 07:56
Permalink
Display cards - image size
The display cards Berries example has the images nicely filling the image space. Is there an optimum size for the images? Not file size, but width x height size (or ratio of width to height).
Trevor
otacke
Fri, 03/02/2018 - 08:58
Permalink
Hi Trevor!They have a ratio
Hi Trevor!
They have a ratio of 2:1, which is also kind of a default for other content types.
Best,
Oliver
priyapatel
Mon, 04/09/2018 - 02:57
Permalink
Scroll bar
Hi there,
I have created dialog cards within a course presentation and I seem always get the scroll bar. How can I get the dialog cards to fit nicely on the page without this scroll bar?
Thanks,
Priya
BV52
Mon, 04/09/2018 - 07:36
Permalink
Hi Priya,I think the issue
Hi Priya,
I think the issue you are describing is the same as paulster above. There is an existing bug report that aims to resolve this.
-BV52
Pages