h5p/h5p-dialogcards

H5P Dialogue Cards

Makes it possible to create learning tasks for your site visitors.

License

(The MIT License)

Copyright (c) 2012-2014 Joubel AS

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

h5p-dialogcards's Issues

Sound not working on Mode repetition, on second round

Sound not working on Mode repetition, on second round

Text alignment not working

I know, this is an old bug. I just want to add that this is a problem in our use too.

There's a topic on H5P issue tracker about this: https://h5ptechnology.atlassian.net/browse/HFP-292

In the editor view text alignment can be adjusted, but when published text is always center aligned. There are solutions for this, but they don't fix the actual problem and they are very patchy.

Dialogs Text and Answer fields: text editor flickering

When entering text in the Text and Answer fields, the editor provides a paragraph formatting drop-down list. This list actually contains a single item, "Normal", which is not terribly useful. More options could be provided.
Anyway the current bug is that when clicking on that "Normal" drop-down list in the editor menu, all we get is flickering, as show in the attached gif file.
This is a strange bug, as in the very similar Flashcards H5P activity, in the Tip Text editor we get the same buttons but the (useless) "Normal" drop-down list is OK (i.e. it does not flicker).
Note.- On the attached video capture the flickering is much slower than in reality.

Need to use the H5P image library

The Dialog cards do not use the H5P image library and are missing features such as ALT tags which are needed for accessibility.

Error "self not defined" in version 1.8

I think it should be this.

h5p-dialogcards.css not minified in dist

When executing npm run build, h5p-dialogcards.js is minified and present in the dist directory.
The h5p-dialogcards.css file is present in dist but NOT minified by mini-css-extract-plugin.

Add buttons to Answer editor

Was wondering if someone could add 2 buttons to help organize answer better. Bullets and Numbered lists.

iFrame not sizing correctly for longest card

When the longest card is not in the first or second positions, the iframe gets created too small, such that when you reach that card, the navigation controls at the bottom of the card are cut off. If you resize the window then the h5p-resizer.js script does its job and resizes the iframe, however, this does not happen naturally.

Duplicated error messages and blanked out fields when new card not complete

When creating several dialog cards, it is possible to click "Add dialog" before completing all required fields of the previous dialog card. When you do this, it then becomes impossible to edit any other previous dialog cards. Each time you click any other dialog card, the error message line gets duplicated on any card you view, and all fields are blank. The only way out of the error is to complete all fields in the new card(s) created, save, and then come back to make any other edits to other cards. See attached images.

Web Accessibility

According to http://facdev.e-education.psu.edu/instdesigner/h5p

This module isn't accessible. Is this still accurate? What efforts have been made to see that this meets WCAG 2.0 AA?

Full audio player instead of a simple button

Hey there! 👋🏻

Thank you so much for the awesome library! ❤️

I wonder, is there a way to get a full audio player instead of a simple button in dialog cards, so students could pause, resume, fast-forward and backward audio?

I'm not against a workaround which might involve some programming.

If we can't do it yet, it would be nice to have such a feature in the future. What do you think?

We'd like a way to hide the text used on the Button to Turn the Dialog Card

The Dialog Card displays a button on the bottom to Turn the card.
There is CSS that assigns an font awesome glyph using :before.
We want to keep the glyph but remove the text that says 'Turn'.

Is there a control setup to do this?
Is this a feature work having in your library?

Swedish translations not working

Dialog cards (1.9.7) does not show the Swedish translations in the Text overrides and translations. It displays the English translations on all text options. Changing the language to another language and back to Swedish does not work either. According to this https://github.com/h5p/h5p-dialogcards/blob/master/language/sv.json there should be Swedish translations for Dialog cards. Tested this in Moodle 4.1.8 and 4.3. The Swedish translations were working on other H5P contents like Course presentation.

Punctuation shows as raw HTML in Answer

Text and tips show punctuation, but answers show some punctuation (apostrophe and quotation mark for sure) as raw HTML. See attached.

Decrease the minimum number of repeats

Dear all,

dialog card has an in-built minimum of 3 repeats for one card before the card counts as "learned".
Is there a reason for that?

Why do not give the user full control over that?

I'm using dialog cards in a math content where it is sometimes useless to confront the learner 3 times with the exact same calculation.

Therfor I would like to set this number to 1 or even sometimes to 0.

Thanks for listening!

Tibault

Dialog Cards being auto-scrolled to when used as an embed

Outlined here also: https://h5p.org/node/1194058

I have an issue where adding this to a course index page as an embedded element (iframe) causes it to automatically scroll to the content on page load, regardless of where it is on the page. This issue could not be replicated locally consistently, but is caused in this block.

h5p-dialogcards/src/scripts/h5p-dialogcards-card.js

Lines 482 to 484 in 7a7580a

	$card.one('transitionend', () => {
	$card.focus()
	});

What I'm not sure about is why this focus is required at all? The only time I believe this should be done is when the user clicks on a card, and the dialog card should scroll to the start of the top of the displayed card again (e.g. if it was too vertically high). What it currently does is trigger this code when loaded from an iframe (from what I've noticed), and the main window automatically scrolls to this content.

This is very similar to this linked issue https://h5p.org/node/1150636.

Platform: Moodle
Tested On Desktop
Happens in Firefox, Chrome, Chromium

H5P plugin version
1.21.0
H5P content type & version "version": "1.7.3"

"name": "h5p-dialogcards"
No console errors
No PHP errors
No env changes
No browser extensions/changes

I'll create and link a PR that fixes the issue I'm experiencing by removing the requirement to focus the card altogether. I might not be too aware of why it was added originally, but I believe unless it is functionally required (e.g. for screen-readers), I do not believe it should trigger a focus() event. If it should trigger a focus event, it should definitely only do so after some user interaction (e.g. changing cards), not on initial load.

Cards are broken when increasing Android's font size (Cordova app)

I couldn't reproduce this in Chrome for Android because the Android's font size setting has no effect in Chrome, but this is affecting our Cordova app.

Here's an image of how it looks like:

https://ibb.co/10nTt22

The position of some elements is wrong, and the buttons stop working when this happens so the H5P becomes unusable.

How to reproduce:

1. Create a new Cordova app.
2. In the index.html file of the app, add an iframe pointing to a website containing a Dialog cards H5P.
3. In an Android device or emulator, go to "Settings > Display > Display size and text" and set "Font size" to the maximum value.
4. Install the Cordova app in the device. The UI of the Dialog cards is wrong.

Ability to add a different image on back of card

I had a requirement of being able to add a different image on the back of the dialog card so that when a user clicks on 'Turn', different image is shown.
I have added this functionality here.

Kindly look into and do the needful.

Regards,
Supriya Rajgopal

Dialog Cards Editor | missing add and edit fields in Moodle 3.5.3+

Dialog Cards (1.8.2)

Updated Dialog cards to version 1.8.2 via the update prompt when adding New H5P content to a course. I selected to use the content type and noticed the fields for adding words, sounds, images and cards were now missing (as in the attached screenshot). Used it a lot until now with no issues as the H5P Libraries show 143 instances of the content type being used.

Previous instances:

Previous instances still work, until you try to edit them. They also show the blank editor with no content. When you save and display the content area is also blank except for the heading and return button. When you go back into edit, select a different content type, confirm when getting the warning message, and go back to Dialog cards, previously saved content will display as normal in the editor. Once saved you still get a blank screen.

Detail Summary:

Moodle 3.5.3+
H5P Latest Update
Dialog Cards (1.8.2)
Chrome browser PC
Theme: Essential
Recent install: Course Format - Tiles
No other content types seem to be affected

Increase 'Dialog' column width

Hi H5P team

One of our lecturers is asking whether it would be possible to increase the width of the "Dialogs" column.

Thanks for a feedback.

Dialogue Card Progress Numbers Aren't Accessible

When testing inside of Moodle, my team and I found the progress numbers (shown in the picture below) are a grey color and aren't accessible. We tried changing the color in the css, and with javascript, but no luck so I wanted to raise the issue here and submit a pull request if possible to darken the text so it passes accessibility color contrast ratios.