Giter Club home page Giter Club logo

h5p-dictation's Introduction

h5p-dictation

Let your students train their listening comprehension and spelling skills.

You can add audio samples containing a sentence for dictation and enter the correct transcription. Your students can listen to the samples and enter what they have heard in to a text field. Their answers will be evaluated automatically.

Several options will allow you to control the exercise's difficulty. You can optionally add a second audio sample for a sentence that could hold a version spoken slowly. You can also set a limit for how often a sample can be played, define if punctuation should be relevant for scoring, and decide whether small mistakes like typing errors should be counted as no mistake, a full mistake, or just a half mistake.

Example

"Sample Content with H5P Dictation"

Building the distribution files

Pull or download this archive files and go into the main folder. There run

npm install

to get the required modules. Then build the project using

npm run build

or

npm run watch

if you want to modify the code and want to get a fresh build built in the background.

For more information on how to use those distribution files in H5P, please have a look at https://youtu.be/xEgBJaRUBGg and the H5P developer guide at https://h5p.org/library-development.

Ideas to think about ...

  • Do we need an option for different diff styles?
  • Automatic speed change? How to balance speed/pitch?
  • Add option for "drag the words" instead of text input fields? But then the name Dictation might be a little misleading
  • Use the full featured audio player and marks to jump to? Could be useful for sound samples containing more than one sample.

h5p-dictation's People

Contributors

antonioaneiros avatar bv52 avatar dependabot[bot] avatar e-me avatar fnoks avatar germanvaleroelizondo avatar icc avatar leonardofurtado avatar leoste avatar makmentins avatar miropuhek avatar otacke avatar rezeau avatar skiper7 avatar sr258 avatar thomasmars avatar tiagojacobs avatar totoromaum avatar weblate avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

h5p-dictation's Issues

Improve reporting

Add custom reporting to h5p-php-reporting or enhance reporting by adding feedback to xAPI object description.

Fix bug with check button

I get an error when clicking the Check button
button.js?ver=0.2.1:222 Uncaught TypeError: Cannot read property 'audio' of undefined
at Dictation.Button.resetAudio (button.js?ver=0.2.1:222)

Apostrophe in french is not correctly handled

Hello !

I am using Dictation as a wordpress plugin. The apostrophes are not correctly handled : they are considered as errors because the displayed character doesn't match the "curly" apostrophe (see attached screenshot). When "Ignore Punctuation marks" is checked in "Behavioural settings", apostrophes are still handled as errors.

Capture d’écran 2020-09-12 à 14 51 14

Thanks,

Isabelle

Add more comments

Missing some more comments on what's happening, especially when using anonymous functions for filter(), map() and reduce(). Of course, they do what they do, but more specifically: What do we use it for?

Change aria roles

The navigation for keyboard users/aria needs an update. Should be clear what key does what -- probably use a tree

Allow alternate spellings

Suggested at H5Pcon2018: Allow alternate spellings for words, e.g. to account for British and American spelling (e.g. gray vs. grey, behaviour vs. behavior, etc.)

Naive approach:

  • Use | as a delimiter in between words as in regular expressions
  • Check for additional words in word alignment
  • For solution: Use matched word for exact match, first word otherwise
  • Add Hint to the editor/translation files, cmp. H5P.Blanks
  • Update translation files

Improve announcement of solution

  • Should name: correct solution for wrong/typo.
  • Should name: score attached.
  • Should name: position of list item (probably has wrong aria structure?)

Add translations

I can add a German translation myself as soon as the UX review is done, but maybe someone reads this and can chip in more translations?

It's not difficult. All you need to do is use the file language/.en.json as a template, replace the text with appropriate translations and save it with a name reflecting the usual code for the language that you used, e.g. ru.json for Russian.

Yeah, that may still feel too complicated, right? You can also use https://translate-h5p.tk/ and use some of its nice features to translate this and many other H5P content types.

Rename built files

The naming of the files used in preloadedJs/Css should be made less generic to avoid collisions in Drupal. (the likely hood of another button.js is high!)

Allow to show solution on check

Hello, we're working in a new feature that's allowing the user to see the solution right after clicking the Check button ( without the need to click in "Show solution" ).

If we add it as an option ( with default false ), would it be acceptable to merge it?

The option name would be "Show solution on check" ( or other that you suggest ).

Thanks!

How to force a specific language

Hello, I would like to force H5P-DICTATION to use a specific language for tests, is there any global variable I can define, so H5P tells this plugin that it should render the content in other language?

Implement a case sensitive checkbox option

Hello,

I really like H5P and have been using pretty much every module. This one unfortunately doesn't include a case sensitive option if order to accept solutions like : "Hello", "HELLO", "hello" as good answers. I use for now the vertical line (|) to input those options, but it's impossible for long sentences to do that. Would that be something you could implement? I know it's present in the "Fill in the blanks" module which works great.

-----------
EDIT : I just noticed in the closed issues that people mentioned it so you can igore that part
Also, I noticed something weird but interesting at the same time. I typed the sentence "I don't eat chocolate" and the plugin corrected me with "I don’t eat chocolate". As you can see there are two different apostrophes (I didn't know that). I checked and saw that some apps like Word use the ’ (Typesetter's apostrophe) while most keyboards and phones use ' (Typewriter apostrophe) and while I was making the sentences in Word, I copied them over, tested them and then understood that the same would happen with the dashes - – — but unfortunately H5P doesn't consider them as punctuations so an error pops up when using the incorrect signs. That was my discovery, just wanted to let you know.
-----------

Lastly, if you know what I could use as a "popup" window for people to use specific character not present on the keyboard like "È, É, Ê, Ë, ..." let me know. I read on the H5P site that it'd be something a bit too hard to implement but if you know any good option I can use and that I can implement for inputing special characters, let me know.

Thank you for creating H5P!

Clean l10n, a11y

It would have been preferable if the l10n and a11y labels were grouped instead of prefixed aria*. This would also make the Editor UI a bit cleaner.

Add optional hints

There might optionally be hints that could be shown before viewing the solution, ranging from vague to specific.

  • "I smell 2 mistakes in total"
  • "There's a mistake in your third word."
  • "There's a mistake in your third word: $diff"
  • ...

Feature for update after first release.

Suggestion by Susan Medina

Make the text input field a text area

From a UX point of view, it would be better to have a text input field that can grow in height if the horizontal space doesn't suffice. This way, the learner could always see the whole text he/she wrote. This will not work with an HTML5 text input field. It will have to be replaced by a textarea that can have multiple rows, "enter" should be prevented.

Alternative correct answers

Hello, I've understood that I can have multiple tokens for a same word:

In this example: "Dom|Don Juan", it would accept both "Dom Juan" and "Don Juan"

How could we encode these two correct answers?

  • Le relais Sintrom-Fraxiparine aura lieu à l'hôpital.
  • Le relais Sintrom - Fraxiparine aura lieu à l'hôpital.

Fix slow play symbol on pause

When pausing the slow play button, it shows the play symbol of the regular button. Should be the symbol for the slow play button.

Refactor

The aren't many very large functions but I see many pieces here and there that could benefit from being moved into smaller functions, making it easier to see the bigger picture.

Remove autoplay option

The upcoming browser versions will block autoplay unless the user has interacted with the page -- and that's the click on a play button. Not a11y friendly, and would require to implement play/pause contract.

Fix solution mode

A11Y: Works nicely until the solution mode; I get a list with zero items but if I tab I can find the first word and then use the arrows. If I tab out of the list I loose which word I was at. Maybe add support for Up/Down key as well as Left/Right? It's not clear which direction you should use for this list.

Refactor Sentence class

The sentence class has become quite messy. It should be possible to split it up into one class (sentence, the current one) that handles subcomponents of the sentence as it already does with the two buttons, one class (solution) that handles the solution view, and one class (utils or similar) that handles all the computation of the score with the word alignment.

Later on, the text input field could go into a separate class, too, so it could be replaced with some other input method (cmp "drag the words").

Restrict to woff+woff2

Font files: I think we can get away with just using woff+woff2(if available) and save a few bytes.

Add support for languages that don't use white-spaces (normally)

Some languages such as Chinese normally don't use white spaces, but given the unicode character range, han characters could be split automatically. Real word splitting would require a special dictionary/grammar library to identify groups of han characters as words.

Fix a11y

Text should not have a tab index. It will be read by the screen reader when ordered to.
Change of focus should be announced.

Add skip button

It would be useful to have a "Skip" button on side of the "Retry".

It means the user is saying: ok, this score is enough, go ahead.

  1. Is there any way to do it right now?
  2. If not, would you be interested in receiving a PR with this feature?

Example:
image

Add support for right-to-left languages

  1. Set the dir property on input fields (should be dir="auto" set in core?).
  2. Reverse the solution order display if dir === 'rtl' (detection in core would be nice to have).

Remove code related to adding a gap based on a space

Currently, when displaying the solution, Dictation will put words and punctuation directly next to each other as it would in the original sentence. This will not work properly for sentences with mixed LTR/RTL writing. Removing this behavior and instead always putting a gap between solution elements will make the code simpler, make Dictation feasible for RTL support, and also make the solution display a little clearer.

Improve naming

Also, functions like buildWordWrapper() and computeResults() are a bit mute.

Allow optional titles for sentences

H5P Dictation might be used to present dialogues with different speakers.

As an author, I want to be able to optionally define a title for each sentence in order to provide students with more context.

Add sanitization

Should be intercepted by H5P, but doesn't: Check for empty mandatory fields.

Add indicators for characters

To make the dictation a little easier, e.g. for elementary school, there could be indicators for the characters, e.g. small dashes below the spots or something similar.

Feature for update after first release.

Suggestion by Susan Medina

Instructions on how to get it running from source

Hello, it would be good if you can share instructions how we can get this running from the source.

What I did so far is:

  • Downloading a .h5p file
  • Rename to .zip
  • Replace contents of folder "H5P.Dictation-1.0"

However, it's not a direct replacement, as I get different file names when I run the build script.

Any tips or references are appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.