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 () {