h5p / h5p-flashcards

H5P Flashcards

Create cards where the user has to guess the answer.

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-flashcards's Issues

Single quote issues

Hi, I use flashcards module from latest WordPress plugin. I have updated all h5p libraries. The answer is marked as wrong when the string typed from users contains a single quote. I.e. if the right answer is l'automobile (in en-us language means the car), and is typed l'automobile in the field, this answer is marked ad wrong. Can you help me?

Flash-cards accessibility issues

Flashcards

We are the KOMPETENZZENTRUM DIGITALE BARRIEREFREIHEIT.NRW, a digital accessibility evaluation and testing facility at the Technical University of Dortmund, Germany. We have scientifically evaluated the accessibility of various H5P elements, including the Flashcards.

1. Issue: After submitting a solution, the card automatically switches, providing insufficient time to read the correct answer.

• Suggestion 1: Allow users more time to read the correct answer by delaying the automatic card switch after submitting a solution.
• Suggestion 2: Add a button which allows the user to decide to submit an answer.

2. Issue: When teh card is open the focus goes directly to the answer box, and the screen-reader user must navigate to the picture with the Alt text.

• Suggestion: Force teh focus on the picture's Alt text.

3. Issue: The button to display results is small and lacks visual feedback on hover.
   Suggestion: Increase the size of the button to enhance its visibility and provide appropriate visual feedback on hover.

4. Issue: The results window is too small, requiring both scrolling within the window and the entire browser window.
   Suggestion: Resize the results window to a more appropriate size, eliminating the need for excessive scrolling.

5. Issue: The color contrast within the element is inadequate (specifically, red text on a black background during the solution display).
   Suggestion: Improve color contrast within the element to meet accessibility standards, ensuring legibility and readability for all users.

6. Issue: The "Hint" button appears in the tab order after the "Check Input" button, causing confusion especially for Screenreader users.
   Suggestion: Adjust the tab order to ensure a logical and intuitive flow, placing the "Hint" button before the "Check Input" button.

7. Issue: When zoomed in to 400%, the texts "Correct" and "Incorrect" overlap longer answers.
   Suggestion: Implement responsive design techniques to prevent the overlapping of "Correct" and "Incorrect" texts when zoomed in at 400%.

8. Issue: The "Check Input" button is not visible when zoomed in to 400%.
   Suggestion: Ensure that the "Check Input" button remains visible and accessible even at 400% zoom level.

9. Issue: The tooltip of the "Check Input" button does not scale properly when zoomed in to 400%.
   Suggestion: Modify the tooltip of the "Check Input" button to scale appropriately when the zoom level is set to 400%.

10. Issue: The icons indicating whether an answer is correct or incorrect lack an aria-label.
    Suggestion: Provide an appropriate aria-label for the icons representing correct and incorrect answers, allowing screen readers to convey the information to users who rely on auditory feedback.

Conclusion:

Addressing the identified issues and implementing the suggested improvements will enhance the overall accessibility of the website. By making these enhancements, you will ensure that all users, including those with disabilities, can fully engage with and benefit from your website's content and functionality. It is recommended to prioritize these accessibility improvements to ensure compliance with web accessibility guidelines.
Please feel free to reach out if you have any questions or require further assistance in implementing these accessibility enhancements.

Fix typo

PR on the way.

Different delimiters for alternative solutions between instructions and javascript

Hello,

I was trying to set alternative solutions for a H5P flashcard, and it didn't work with the pipe symbol "|".

I checked in the js file and saw the delimiter was the slash symbol "/".

h5p-flashcards/js/flashcards.js/lines 801-804

  C.splitAlternatives = function (text, delimiter, escaper) {
    text = text || '';
    delimiter = delimiter || '/';
    escaper = escaper || '\\';

In the json files, (en.json and fr.json) :

language/.en.json/line 23 (same for the french version)

"description": "Answer (solution) for the card. Use a pipe symbol | to split alternative solutions. Use \\| if a solution should contain a |."

Hide imageholder when there is no image.

Instead of displaying a placeholder, I think it would be better to not display any image at all, only display the text.

New language not shown? Papiamento

Hi, thanks for adding Papiamento to the available languages, but I just installed a fresh H5P Flashcards through the wordpress plugin, but I don't see the language, am I doing something wrong?

Flash cards created with Moodle are broken.

Flash cards created in Moodle are broken.

Hello @fnoks ,

If you create a flash card H5P-activity in Moodle it doesn't load the cards at all and you cannot even change the page (the arrow is still highlighted with glowing outline). It works in version 1.4.0 but not in 1.5.3.

If I do flash cards activity in h5p.org and upload it to moodle it works perfectly but not when I direcly create it with moodle H5P-activity.

Tested with mod_hvp 1.5 and Flashcards (1.5.3) & Moodle 3.1

Still works in mod_hvp 1.3 and Flashcards (1.4.0) & Moodle 3.1

Handling html escaped characters in results view

It seems that escaped characters are not correctly rendered in the results page.

User can see the right answer before replying - can we avoid it?

Hello, thanks for this amazing solution.

However I have one concern using it. If user inspect the network tab, it can see the content.json file, and this way see the expected answer for each question.

Is there any way to avoid this?

Need to use the H5P image library

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

Flashcards Progress Numbers aren't accessible

The progress indicator underneath the flashcards is too light a grey to pass accessibility tests.

It needs to meet the proper color ratio (3:1).

The class is: h5p-dialogcards-progress
The ID is: h5p-dialogcards-progress-1

I looked for them myself a quick search produced no results.

Cannot update library at all in mod_hvp 1.20.2.

Hello,

There seems to be an bug in flash cards, update doesn't complete. I'm using Moodle 3.5 and mod_hvp 1.20.2.

When I update flashcards library from the editor it says "update successful" but after that library still says "update available" and lets you update indefinitely.

https://moodle.address/mod/hvp/library_list.php states that the Flashcards version is 1.5.16.

Steps to repeat:

1. Start to create a new H5P activity on a course
2. in editor notice how flash cards stays "update available"
3. Click details
4. Click update
5. Notice how update is successful
6. Return to editor and notice "update is available" is still available.
7. Notice how you can indefinitely update it all over again and it never finishes

Add Turkish translation

PR on the way.