h5p/h5p-multi-choice

H5P Multi Choice

Test your users with multiple choice tasks. Can be used in Question Sets, Course Presentations and Interactive Videos.

See it in action on the H5P.org project page

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-multi-choice's Issues

Language of page (text) is not set programmatically - Accessibility

The containing html element does not have a lang attribute with appropriate value to indicate the default language of the text in the H5P widget.

Please see https://developer.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/ for an excellent explanation of the concern.

The related WCAG 2.0/2.1 Success Criteria is SC 3.1.1 (Level A): https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html

I suggest using the selected translation language to set a lang attribute on the html element to the appropriate value. See https://www.w3.org/WAI/WCAG21/Techniques/html/H57 for more info.

This is especially important in the context of using H5P in higher education eTexts as many have large populations of international students.

Thanks!

Full Answer in xAPI Statments

Hi all!

Over at UW-Madison we were having trouble understanding the statements coming out of the multichoice activities in the response field.

Getting strings like: "0[,]2[,]3" doesn't really help professors understand which answers their students selected in their activities, even with the key included in the object.definition.choices field. It also makes it hard to make visualizations in our LRS which are human readable. So, I looked into making changes to the library to include full text in the response field, so we'd get strings like "Answer A\n[,]Answer B\n."

I made some changes to the multichoice.js file (uploaded here as .txt) so that it pushes the .text pushed to the xapi statements. (around lines 932 and 962).

Would this be useful to anyone besides us?

multichoice.txt

Minus / plus points are not shown when used in question set

By using the H5P Multi Choice inside a H5P Question Set, the minus or plus points are not shown on the "show solution" pages - although "show score points" is set to true.

I figured out, that they will display after changing the code as follows: inside the function "showAllSolutions" change

}).find('.h5p-question-plus-one, .h5p-question-minus-one').remove();

to

if (params.behaviour.showScorePoints === false) { this.find(".h5p-question-plus-one, .h5p-question-minus-one").remove(); } });

Enable images in question content

We would like to be able to add images to any component (semantic) of the question (question, answers, feedback, ...):

In order to do that, so far we've been altering the multichoice package: In semantics.json we add the img tag to the list of tags. For example:

{
    "name": "question",
    "type": "text",
    "widget": "html",
    "label": "Question",
    "enterMode": "p",
    "tags": [
      "strong",
      "img",
      "em",
      "sub",
      "sup",
      "h2",
      "h3"
    ]
  }

Please see if you can add this feature to the core.
(This request is part a bigger discussion already started on issue )

Wrong use of const breaks IE11

In for ... of, one would expect let not const. Today's browsers don't seem to care, but IE11 breaks if that's still important.

h5p-multi-choice/js/multichoice.js

Line 859 in ff1b239

for (const answer of params.userAnswers) {

Translation of libraries to Polish

Hi,
I would like to translate some libraries to Polish.
So far I have multi-choice pl.json file ready.
Let me know, if I can start a Pull Request.

Piotr

how to build

how is this component build? There is no package.json file.....

Check Answer does not Record Answer if the User Continues with out Checking

The Selected Answer should be Recorded, but allowed to Change until check answer is clicked.

Add Turkish translation.

PR on the way.

Inconsistent resetTask behavior across content types

h5p-multi-choice/js/multichoice.js

Line 574 in 5f38a90

this.resetTask = function () {

The resetTask function is what is resetting a task to its initial state (https://h5p.org/documentation/developers/contracts#guides-header-5). This implementation does this just fine.

In contrast, when the user hits the 'Retry' button, the task will be reset plus the answer options will be shuffled (

h5p-multi-choice/js/multichoice.js

Lines 697 to 712 in 5f38a90

	if (params.behaviour.randomAnswers) {
	// reshuffle answers
	var oldIdMap = idMap;
	idMap = getShuffleMap();
	var answersDisplayed = $myDom.find('.h5p-answer');
	// remember tips
	var tip = [];
	for (i = 0; i < answersDisplayed.length; i++) {
	tip[i] = $(answersDisplayed[i]).find('.h5p-multichoice-tipwrap');
	}
	// Those two loops cannot be merged or you'll screw up your tips
	for (i = 0; i < answersDisplayed.length; i++) {
	// move tips and answers on display
	$(answersDisplayed[i]).find('.h5p-alternative-inner').html(params.answers[i].text);
	$(tip[i]).detach().appendTo($(answersDisplayed[idMap.indexOf(oldIdMap[i])]).find('.h5p-alternative-container'));
	}

).

I wonder what the intended behavior of resetTask here is exactly. It is handled differently across content types. For instance, Multiple Choice and Single Choice Set keep the item order, but Drag the Words shuffles the draggables on every call to resetTask. Check with the Course Presentation demo, for instance

From the perspective of a compound content types, it could make sense to randomize a subcontent on reset (if that makes sense for the content type and if the content type is configured accordingly) in order to present the user with a fresh start instead of having the same order of items again and again. There could, however, also be cases where the exact same order is expected.

I'd just like to know what the expected behavior, so I can

• create pull requests to content types that do not behave as expected and to
• potentially change my own compound content types to throw away subcontent instances and create and attach new ones when resetting (even though that does not feel elegant).

@fnoks Do you happen to have any insight to share here?

Error in a french translation of multi-choice

The label for each option in a multichoice is "Question" in french and "Text" in english.

"Question" is really confusing there. "Texte" would be the exact translation, but in this context I think that "Réponse" would be more appropriate.

Allow a combination of media and text elements in questions and feedback

We had the requirement to be able to display a combination of images, videos, and text elements in a question or a feedback message.

I made a fork (https://github.com/HfH-DLC/h5p-multi-choice-media) and implemented the changes there by replacing those text fields with library fields with options for image, video and text, similarly to the already existing media field. Since the feedback messages can get rather big when containing media, I also added a toggle button for those.

Now we would like this functionality to be available on the Content Hub but are unsure about the best course of action. Is this functionality something that could be merged into the main repository or are we better off creating a new "Multiple Choice with Media" content type? And In the second case, how would go about publishing that. I appreciate your feedback.

Check button doesn't work as expected when no answer is selected

Steps to reproduce:

1. Create a Multiple Choice question.
2. Turn ON the display of Check button.
3. Turn ON the display of Show Solution button (optional but aggravates the issue).
4. Turn OFF the display of Retry button (optional but aggravates the issue).
5. Save and open the question in test mode.
6. Click Check button (do not mark any answers before).
7. Click Show Solution button.

Expected result:

1. When the Check button is clicked, the correct answer is marked.
2. If not, the correct answer is marked after the Show Solution button is clicked.

Observed result:

1. When the Check button is clicked, it just makes all answers inactive - the correct answer is NOT marked. The Show Solution button is shown instead.
2. When the Show Solution button is clicked, the correct answer is NOT marked either. Instead a note saying "Select an answer before showing solution" is displayed.
3. There's no way to see the correct answer.

Use html widget for overall feedback field

User story:

For the overall feedback we often need more characters than the currently allowed 255. We would like to replace the text field with the HTML editor to make it easier for the authors to create appropriate feedback.

UX:

The other feedback fields use the HTML editor, only for the overall feedback a simple text field is used, see gif below. It would be more consistent to use the HTML editor there as well. In addition, the authors have more opportunities to provide meaningful feedback.

Accessibility:
Not relevant

Technical solution:

For the implementation I plan to add the HTML widget to the semantic.json and update the minor version.

first alternative highlighted after retry

I noticed that after a retry the first alternative is highlighted via a CSS hover effect. At first, I thought I might have caused this behavior somehow in my latest pull request, but it can actually be found in multi-choice right now.

Minus points aren't displayed graphically in certain situations

Hello,

If you have a multichoice question with 4 choices which all are correct and then a person doesn't select them all the UI doesn't display the minus point you get from those which you didn't choose. If you have one answer choice that is wrong then you can see the -1 point you get from it.

---

**All correct answers selected**

---

**Two of the four correct answers selected but minus point for two that haven't been selected isn't shown**

---

Should be like this

Allow Image in Answer

Offer Image display in Answer as if HTML in other types.

xAPI choices should have html stripped

I tried this question in Wordpress. The question choices in the xAPI statement are all wrapped in div tags that will be rendered in reports as this field is supposed to contain plain text. There doesn't seem to be any way of removing the div tags in wordpress. I suggest stripping html tags on (or before) this line.

Here's some code suggestions on stripping html tags on Stack Overflow.

I'm happy to make a PR for this using the approach in the accepted SO answer if you like.

tab jumps are weird

It seems there might a problem with the tabindex. I have not really looked into this topic (related to ARIA), but it seems that the jump order for n alternatives is:

• 1st alternative
• 1s_ hint
• 2nd hint
• 3rd hint
• ...
• n-1th hint
• nth alternative
• nth hint

Looks strange to me.

xAPI problems after updating to 1.3.2 (using Drupal)

After updating to 1.3.2 (using Drupal), I noticed that some custom javascript I use to handle H5P's xAPI statements stopped working. The xAPI event statement appears to work fine for initial selection of an option, but upon checking the answer, the statement does not appear to be generated or working correctly. Looking at the console, I see this error message:

TypeError: undefined is not an object (evaluating 'idMap[params.userAnswers[i]]')

Changes in text language cannot be indicated programmatically - Accessibility

It appears that the question editor does not support marking up changes in text language.

Please see https://developer.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/ for an excellent explanation of the concern. This mainly affects non-visual users that depend on screen-reading software for access with text-to-speech.

The related WCAG 2.0/2.1 Success Criteria is SC 3.1.2 (Level AA): https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html

See https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H58 (Using language attributes to identify changes in the human language) for more info.

This is especially important in the context of using H5P in language instruction eTexts where switching between two (or more) languages in the text is quite common. For example, the need to write:

Select the correct phrase that represents the plural form of “el libro” (the Spanish for "the books")

which would need to be coded as:

<div>Select the correct phrase that represents the plural form of <span lang="es">&quot;el libro&quot;</span> (the Spanish for "the books")</div>

This assumes a parent container is indicating the default language of the text (i.e.: <html lang="en">).

Thanks!

H5P Multi-choice does not work with IE11 browser

Multiple-choice does not open Option field with Expand/Collapse selection. This was experienced with H5P version 1.0-rc.8 and IE11 browser (11.0.9600.18537). Same behaviour exists on H5P.org site when creating content there.

Note! This used to work with H5P version 1.0-rc.7.

xAPI data response element empty when answer order not randomised.

When answer order is not randomised the xAPI data response element is always empty. It looks like this line in multichoice.js (around 855):

response += idMap === undefined ? $(params.userAnswers[i]).text() : idMap[params.userAnswers[i]];

should be:

response += idMap === undefined ? params.userAnswers[i] : idMap[params.userAnswers[i]];

At least that works in my brief tests.

Invisible character added to tip text with IE11

Hello,

There is a bug with multiplechoice question if you edit it with Internet Explorer 11.

The information-balloon will show up as empty tip if you just type "Message displayed if answer is selected" and "Message displayed if answer is not selected" messages and leave "Tip text" empty and not even touch "tip text" -field.

Steps to repeat;

1. Open IE11
2. Create course presentation and add multiple choice question to it
3. Add a question
4. Add two options (question alternatives)
5. Under one option in "Tips and feedback" add something to;

• Message displayed if answer is selected
• Message displayed if answer is not selected

5. Save and Save
6. View the H5P and see how the other option now has tip-balloon ja it's empty.

If you now go and edit "tip text" field in that current option by pressing backspace the info-balloon dissappear. It's like "tip text" field has invisible character that is added automatically by IE11 when you enter text to

• Message displayed if answer is selected
• Message displayed if answer is not selected

iOS Safari and Android Opera display problems on old iOS version

Question and answers are not shown

[Feature Request] Do not mark the correct answer

It would be desirable if the display of solutions could be disabled.

So if the answer(s) is (are) wrong or incomplete, the correct answer(s) is (are) not marked.

Display of minus / plus one points is not correct when H5P Multiple Choice is used in H5P Question Sets

h5p-multi-choice/js/multichoice.js

Line 500 in 88f3105

}).find('.h5p-question-plus-one, .h5p-question-minus-one').remove();

I am not sure for what that line to "remove of plus or minus one indicators" is good for. The "show score points" behavioural setting seems to work just fine when solution is shown, independently of this line of code.

This line of code seems to destroy the display of plus or minus one indicators when H5P multi choice is used in H5P Question Sets. At least in my test settings (with H5P plugin in WordPress) I can reproduce this. In H5P Question Sets the indicators are not shown, despite of selecting "show score points" in the behavioural settings.

This issue was opened a year ago without resolving.

By removing this line as follows the display of minus and plus indicators works as it should - no matter if used in Question Sets or not:
change
}).find('.h5p-question-plus-one, .h5p-question-minus-one').remove();
to
});

Maybe it is necessary for another scenario. Could anybody confirm this? Thanks!