diff --git a/css/multichoice.css b/css/multichoice.css
index 945d7c8f..30f4b93c 100644
--- a/css/multichoice.css
+++ b/css/multichoice.css
@@ -154,7 +154,8 @@
right: 2.125em;
}
-.h5p-multichoice .h5p-solution-icon {
+.h5p-multichoice .h5p-solution-icon-radio,
+.h5p-multichoice .h5p-solution-icon-checkbox {
font-family: icomoon-multichoice;
position: absolute;
right: 0.75em;
@@ -164,16 +165,16 @@
height: 1em;
overflow: hidden;
}
-.h5p-multichoice .h5p-should[role="radio"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should .h5p-solution-icon-radio:before {
content: "\e603";
}
-.h5p-multichoice .h5p-should-not[role="radio"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should-not .h5p-solution-icon-radio:before {
content: "\e600";
}
-.h5p-multichoice .h5p-should[role="checkbox"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should .h5p-solution-icon-checkbox:before {
content: "\e601";
}
-.h5p-multichoice .h5p-should-not[role="checkbox"] .h5p-solution-icon:before {
+.h5p-multichoice .h5p-should-not .h5p-solution-icon-checkbox:before {
content: "\e602";
}
diff --git a/js/multichoice.js b/js/multichoice.js
index 2d62cec1..2ac8f149 100644
--- a/js/multichoice.js
+++ b/js/multichoice.js
@@ -189,7 +189,7 @@ H5P.MultiChoice = function (options, contentId, contentData) {
$feedbackDialog = $('' +
'
' +
'
' +
- '
' + feedback + '
' +
+ '
' + feedback + '
' +
'
' +
'
');
@@ -483,15 +483,17 @@ H5P.MultiChoice = function (options, contentId, contentData) {
$myDom.find('.h5p-answer').each(function (i, e) {
var $e = $(e);
var a = params.answers[i];
+ const className = 'h5p-solution-icon-' + (params.behaviour.singleAnswer ? 'radio' : 'checkbox');
+
if (a.correct) {
$e.addClass('h5p-should').append($('', {
- 'class': 'h5p-solution-icon',
+ 'class': className,
html: params.UI.shouldCheck + '.'
}));
}
else {
$e.addClass('h5p-should-not').append($('', {
- 'class': 'h5p-solution-icon',
+ 'class': className,
html: params.UI.shouldNotCheck + '.'
}));
}
@@ -538,7 +540,13 @@ H5P.MultiChoice = function (options, contentId, contentData) {
.removeClass('h5p-should')
.removeClass('h5p-should-not')
.removeClass('h5p-has-feedback')
- .find('.h5p-question-plus-one, .h5p-question-minus-one, .h5p-answer-icon, .h5p-solution-icon, .h5p-feedback-dialog').remove();
+ .find('.h5p-question-plus-one, ' +
+ '.h5p-question-minus-one, ' +
+ '.h5p-answer-icon, ' +
+ '.h5p-solution-icon-radio, ' +
+ '.h5p-solution-icon-checkbox, ' +
+ '.h5p-feedback-dialog')
+ .remove();
};
/**
@@ -616,15 +624,6 @@ H5P.MultiChoice = function (options, contentId, contentData) {
self.trigger(xAPIEvent);
};
- /**
- * Determine if any of the radios or checkboxes have been checked.
- *
- * @return {boolean}
- */
- var isAnswerSelected = function () {
- return !!$('.h5p-answer[aria-checked="true"]', $myDom).length;
- };
-
/**
* Adds the ui buttons.
* @private
@@ -648,8 +647,7 @@ H5P.MultiChoice = function (options, contentId, contentData) {
// Show solution button
self.addButton('show-solution', params.UI.showSolutionButton, function () {
-
- if (params.behaviour.showSolutionsRequiresInput && !isAnswerSelected()) {
+ if (params.behaviour.showSolutionsRequiresInput && !self.getAnswerGiven(true)) {
// Require answer before solution can be viewed
self.updateFeedbackContent(params.UI.noInput);
self.read(params.UI.noInput);
@@ -720,14 +718,6 @@ H5P.MultiChoice = function (options, contentId, contentData) {
});
};
- /**
- * @private
- */
- var insertFeedback = function ($e, feedback) {
- // Add visuals
- addFeedback($e, feedback);
- };
-
/**
* Determine which feedback text to display
*
@@ -788,10 +778,10 @@ H5P.MultiChoice = function (options, contentId, contentData) {
if (!skipFeedback) {
if (chosen && a.tipsAndFeedback.chosenFeedback !== undefined && a.tipsAndFeedback.chosenFeedback !== '') {
- insertFeedback($e, a.tipsAndFeedback.chosenFeedback);
+ addFeedback($e, a.tipsAndFeedback.chosenFeedback);
}
else if (!chosen && a.tipsAndFeedback.notChosenFeedback !== undefined && a.tipsAndFeedback.notChosenFeedback !== '') {
- insertFeedback($e, a.tipsAndFeedback.notChosenFeedback);
+ addFeedback($e, a.tipsAndFeedback.notChosenFeedback);
}
}
});
@@ -823,14 +813,23 @@ H5P.MultiChoice = function (options, contentId, contentData) {
$('.h5p-answer', $myDom).attr({
'aria-disabled': 'true',
'tabindex': '-1'
- });
+ }).removeAttr('role')
+ .removeAttr('aria-checked');
+
+ $('.h5p-answers').removeAttr('role');
};
/**
* Enables new input.
*/
var enableInput = function () {
- $('.h5p-answer', $myDom).attr('aria-disabled', 'false');
+ $('.h5p-answer', $myDom)
+ .attr({
+ 'aria-disabled': 'false',
+ 'role': params.behaviour.singleAnswer ? 'radio' : 'checkbox',
+ });
+
+ $('.h5p-answers').attr('role', params.role);
};
var calcScore = function () {