Dialog Cards

Primary tabs

Submitted by H5P Group on Wed, 04/24/2013 - 11:34

A free HTML5 based content type allowing authors to create great language learning resources with H5P in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress.

619

Learning language example

H5P Group

63129

Learning animal sounds game

H5P Group

Would you like to create content like this on your own?

Get started

Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.

And more

Description

Dialog cards can be used as a drill to help learners memorize words, expressions or sentences. On the front of the card, there's a hint for a word or expression. By turning the card the learner reveals a corresponding word or expression.

Dialog cards can be used in language learning, to present math problems or help learners remember facts such as historical events, formulas or names.

Features

Fully responsive
Add image to a card
Add audio to a card
Add tips

Learn how to create Dialog cards in this tutorial.

The H5P content on this page is licensed under Creative Commons Attribution 4.0 International unless another Creative Commons license is specified under rights of use. The author of the content is H5P Group

New to H5P? Read the installation guide to get H5P on your own site.

Comments

hosais

Thu, 02/04/2016 - 00:51

I was very happy that I could

I was very happy that I could add this in the course presentation. However, I noticed that it only worked well in full-screen mode. If not, the card may only showed part of it. Did I do something wrong?

Thu, 02/04/2016 - 13:14

Hi, I realized that it is not

Hi,

I realized that it is not about full screen or not. It is because the ratio related to course presentation. See the video below:

https://www.youtube.com/watch?v=QiiZaW0AZpg

Thu, 02/04/2016 - 16:45

I think it is because the

I think it is because the orginal design of dialog card, which is not for inside a container ( In the video, the dialog card is not always completely inside the page window). https://www.youtube.com/watch?v=E8yTjRoC2Vs.

falcon

Thu, 02/04/2016 - 19:04

Hi! Which browser are you

Hi! Which browser are you using. I created a CP with a DC in it and resized my browser(Chrome), but I couldn't see the same problem.

Thu, 02/04/2016 - 19:10

google chrome 48.0.2564.97 m.

google chrome 48.0.2564.97 m. Under windows 10. (not sure it is related).

Thu, 02/04/2016 - 19:14

Strange, did you experience

Strange, did you experience the same problem on the Course Presentation I linked to above?

Thu, 02/04/2016 - 19:32

Thank you for your quick

Thank you for your quick response. Your link to me, yes it is similar.

I would like to clarify the following: in your link, it is one column. Mine is two column, the h5p content would be a little smaller, say 70% of the screen. At this case, mine has a problem because the card is only showed part of it and the user cannot scroll it down.

May I ask, for your case, is it possible for you to make the broswer window smaller until seeing just part of the card? When it becomes part of it, the user cannot scrooll it down, am I right?

Note: I tested with different size of images before (I remembered they are 300x300 and 800x800) and there were no difference.

Thu, 02/04/2016 - 19:41

Ok, hmmmm... I make my Chrome

Ok, hmmmm... I make my Chrome browser as narrow as possible and I still see the entire course presentation and the entire card. I'm not able to reproduce your problem even when looking at the same page on H5P.org with the same browser.

Thu, 02/04/2016 - 19:50

Very strange. In my computer

Very strange. In my computer is this. https://www.youtube.com/watch?v=QkXt05IQSAs

I will try another computer another time. Thank you very much.

Thu, 02/04/2016 - 19:54

Hmmm... I do the exact same

Hmmm... I do the exact same thing here and it works perfectly. Could you try to manually clear your cache? CTRL + SHIFT + DELETE, cached images and files from the beginning of time...

Fri, 02/05/2016 - 18:21

Clean the cache will not help

Clean the cache will not help, but I tried it with another computer and it is just like you said: dialog card perform perfectly great. I will keep update this if I found something new.

Tue, 02/09/2016 - 12:48

Yes, please do. It is mystery

Yes, please do. It is mystery to me, and very hard for us to do something about. I hope that your computer in the world is the only one with this issue, but that isn't very likely...

Thu, 02/18/2016 - 01:50

Dear falcon,I really

Dear falcon,

I really appreciate your sincere way to consider the issue. I would like to know the issue too since I consider h5p important role in my own project. I really would like to help with more tests. However, the installation with the issue does not exist anymore and I even could not access that computer anymore. Once I have the same issue, I will report right away. Thank you very much again.

Tue, 02/23/2016 - 12:51

:)

Thu, 02/25/2016 - 23:56

Hi,May I know how to change

May I know how to change the font of the text? I try to check css in H5P.Dialogcards. But I think Javascript will change it in runtime. Also, when the lib update, it will be changed. Many thanks.

Thu, 02/25/2016 - 23:59

Sorry, I meant the front size

Sorry, I meant the front size of the text. If I put it in presenation course, the text is too small.

Fri, 02/26/2016 - 11:37

I noticed that I should check

I noticed that I should check the new (for me) document https://h5p.org/documentation/for-developers/visual-changes. I will check it first. Thanks.

Fri, 02/26/2016 - 13:33

Is it OK to put developing mode in a drupal production site?

OK, I can change the style according to the document. Just would like to ask what is the best practice. Is it OK to put developing mode in a drupal production site? Thank you for the great job and helpful document.

Fri, 02/26/2016 - 15:03

That is not a best practice.

That is not a best practice. That mode is for development only. It will make your site slower and you risk loosing data +++ Development folder on a production site is even worse by the way.

Fri, 02/26/2016 - 16:30

OK.Thanks for your

OK.Thanks for your clarification. I read the developing documents. In my understanding, it is not clear how to customize css for my specific version. Should I use git/h5p_cli to check out and create branch (and manage versions in the h5p lib section) ...? If there are documents about this, I would really appreciate if you could let me know.

FYI, the text is really small when I use dialog card in course presentation. All I need is to change

.h5p-dialogcards .h5p-dialogcards-card-text {

display: inline-block;

margin: 0.5em 0;

height: 4.5em;

}

margin: 0 0;

height: 1em;

font-size: 2.5em;

Fri, 02/26/2016 - 18:03

Hi again, in the document

Hi again, in the document (https://h5p.org/documentation/for-developers/visual-changes) and the step 4 seems not necessary, am I right? I disabled H5p development mode. It seems work perfectly.

4. In a development environment put your site into H5P development mode. You may enable development mode in H5P settings (you won't need to enable the development folder in Drupal)

Tue, 03/01/2016 - 20:53

Step 4 isn't necessary. Thank

Step 4 isn't necessary. Thank you for pointing it out. I have removed it.

Wed, 03/02/2016 - 11:19

Thank you for your

Thank you for your clarification.

redphi

Thu, 03/24/2016 - 03:17

adding an audio file to the back side of the card

Is it possible to add a different audio track to each side of the Dialogue card. Thanx so much for this , it's fantastic

Mon, 03/28/2016 - 08:08

open thread?

Hi, sorry to bother. Is this thread still open?

thomasmars

Wed, 03/30/2016 - 10:57

Hi Redphi

Sorry for the late reply.

It is currently only possible to add audio to the front of the card. However there is clearly value to being able to add a different audio to the back of the card. I'm sure we would accept a pull request for this if you have a developer that would like to contribute.

Have a nice day,

- Thomas

alkanadi

Thu, 08/04/2016 - 16:58

Can you play the audio

Can you play the audio automatically

fnoks

Fri, 08/05/2016 - 08:35

Hi,There is currently no auto

There is currently no auto-play for audio on dialog cards, but I think it would be a good addition to this content type :)

Doing this on the first card could be problematic since there might be several Dialog Cards on a page. But I guess if it is a configurable behavior, it is up to the author to handle it.

Stevelarson

Sat, 04/01/2017 - 12:54

Language learning is not an

Language learning is not an easy task. It is very important to memorize the common words we use in conversations to speak those languages fluently. If one want to learn spanish , the most common and effective method all depends on is search online pages which introduce basic words and phrases in the Spanish language. Apps like Dialog cards make it easy for the user to memorize the words. great work.

icc

Mon, 04/03/2017 - 09:33

Thank you for the positive

Thank you for the positive feedback!

papi Jo

Fri, 12/08/2017 - 12:05

Please fix typo

Please fix typo in first sentence of Description: "Dialog cards can be used as a drill to help learners memorize words, expressions or senctences."

-> sentences

Fri, 12/08/2017 - 14:06

Fixed! Thank you for letting

Fixed! Thank you for letting us know!

aline.cordonnier

Mon, 12/18/2017 - 06:21

Left-align for text is not working

I'd like my text (a few dot points) to be left-aligned but the feature is not working. The right-aligned one is working though. Can this be fixed as my project is complete except for this point. Thank you.

BV52

Mon, 12/18/2017 - 06:33

Hi Aline,I'm sorry if this is

Hi Aline,

I'm sorry if this is a hurdle in finishing your work. There is an existing bug report to resolve this issue. You can follow the progress here.

-BV52

htdmaness

Thu, 03/25/2021 - 18:36

left-align broken

Still broken, any chance this could be fixed soon or should I abandon using Dialog cards for now?

joopm

Wed, 01/10/2018 - 10:39

Hello,i would like to ask a

Hello,

i would like to ask a little help.I want that to show all cards like an thumbnails, without next or previus methods.What i think its possible if all cards have the ...-current class(and modifiing the css) but i having issue to add focus all of them

This pass the focus only for one card,i dont know how to pass for all of them,thank you for your help:

C.prototype.setCardFocus = function ($card) {
    // Wait for transition, then set focus
    $card.one('transitionend', function () {
      $card.find('.h5p-dialogcards-card-text-area').focus();
    });
  };

tim

Mon, 01/15/2018 - 15:16

By design, it is impossible

By design, it is impossible to focus on more element than one. What exactly do you wish to do?

ac1643

Sat, 02/24/2018 - 20:12

Order of information on the cards

Hi, I may be looking at this the wrong way, but to my mind if you are, say, learning Spanish then wouldn't you want the English word on the front with the picture above, think about what you think the Spanish translation is and then turn the card to reveal the answer and pronunciation? Currently, as with your examples, I get the Spanish spelling and can see clearly what it means from the photo, without having to turn the card! It could work this way if the photo was not displayed on the Spanish side and only on the turned/English side, but this isn't possible. Can the dialog cards be changed to reflect how flashcards should work? Please tell me if I'm misunderstanding something.

Thanks

Sun, 02/25/2018 - 15:00

Hi ac1643,Thank you for

Hi ac1643,

Thank you for pointing that out.

You are correct there isn't a setting to place the image on only one side of the card. Although I think this is a good idea and you can head over to the Feature Request forum to post it there. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:

It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”
If the feature can be illustrated with images or videos it always helps
Make it clear what content types this is relevant for, and or if this is a new content type

Sun, 02/25/2018 - 19:19

Thanks for your reply, i'll

Thanks for your reply, i'll add it to the feature request as you say.

Also is there a limit to how many cards you can have in a flashcard slideshow (not the dialog cards we've just been talking about (which I thought actually were flashcards!)??

Mon, 02/26/2018 - 07:01

Hi ac1643,Looking at the code

Looking at the code there isn't a "limit" to how cards you can create both for Flashcards and Dialog Cards. So you can in theory create an indefinite number of cards :-)

Wed, 02/28/2018 - 23:24

Thanks for checking that for

Thanks for checking that for me. I've now added the feature request to the forums

dcbroad

Thu, 03/01/2018 - 22:44

Has an assignable grade but no access to view data

The dialog cards content type setup in Moodle appears to have a grade link but it doesn't seem to have any way to automatically assign a grade based on user views of the cards. In the grade area, all the detail grade information displays as dashes (score, maximum score, and view answers). The only thing tabulated is the date finished. It would be nice to see if someone viewed a certain percentage of the cards or how many views were done. Otherwise, there should be no grade link and it should act like a resource only.

Fri, 03/02/2018 - 08:57

Hi dcbroad,Thank you for the

Hi dcbroad,

Thank you for the suggestion and you are right currently this particular content doesn't have much in terms of "grading". We'll definitely look into having additional information or convert the content to a resource only activity.

dearfrench

Sat, 03/03/2018 - 17:56

A few questions

Hi guys,

Thanks a lot for this awesome H5P project and all the tools you make available for us content creators (but non developers).

Here are my questions regarding dialog cards (and flashcards too):

> Do dialog cards support SVG files?

> I read a request from a member here and there asking to be able to automatically create hundreds of cards based on a spreadsheet file. Will your magic make it possible soon in Wordpress? :-D

> If the answer is YES, will it be possible to automatically import pictures and audio as well?

> When we install H5P on a Wordpress.org website, is all the content (text, pictures and audio files) hosted on our own website/server?

Thanks for your answers.

Laurent

Sun, 03/04/2018 - 13:54

Hi Laurent,1. I'm afraid SVG

Hi Laurent,

1. I'm afraid SVG files are not supported.

2. We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful. This option is one of the most requested feature not only for these content types.

3. Yes everything will be hosted your site. The H5P plugin acts almost independently from the H5Ps server except for the occasional updates.

Sun, 03/04/2018 - 14:30

Thanks for your prompt answer

Thanks for your prompt answer BV. May I ask you if there is a technical reason why you don't support SVG for now? :-)

Sun, 03/04/2018 - 14:31

Sun, 03/04/2018 - 14:45

Hi Laurent,I'm not really

I'm not really sure technically speaking the reason why .svg is not include. Although there has been some talks regarding H5P contents supporting it. This post is an example of it. Also we’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful.

Sun, 03/04/2018 - 15:12

You are here