diff --git a/js/questionset.js b/js/questionset.js index c20d261..29c64a7 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -292,7 +292,7 @@ H5P.QuestionSet = function (options, contentId, contentData) { // Create html for progress announcer self.$progressAnnouncer = $('
', { class: 'qs-progress-announcer', - tabindex: '-1' + 'aria-live': 'polite', }); // Create html for questionset @@ -402,7 +402,7 @@ H5P.QuestionSet = function (options, contentId, contentData) { } }; - var _showQuestion = function (questionNumber, preventAnnouncement, moveFocus = true) { + var _showQuestion = function (questionNumber, preventAnnouncement) { // Sanitize input. if (questionNumber < 0) { questionNumber = 0; @@ -447,12 +447,7 @@ H5P.QuestionSet = function (options, contentId, contentData) { .replace('@current', (currentQuestion + 1).toString()) .replace('@total', questionInstances.length.toString()); - $('.qs-progress-announcer', $myDom) - .html(humanizedProgress) - if (moveFocus || self.isRoot()) { - $('.qs-progress-announcer', $myDom) - .show().focus(); - } + self.$progressAnnouncer.html(humanizedProgress); if (instance && instance.readFeedback) { instance.readFeedback(); @@ -592,8 +587,28 @@ H5P.QuestionSet = function (options, contentId, contentData) { // Reset currentQuestion currentQuestion = 0; - // Show the first question again - _showQuestion(params.initialQuestion, false, moveFocus); + $myDom.children().hide(); + var $intro = $('.intro-page', $myDom); + + if ($intro.length) { + // Show intro + $('.intro-page', $myDom).show(); + if (moveFocus) { + $('.qs-startbutton', $myDom).focus(); + } + } + else { + // Show first question + $('.questionset', $myDom).show(); + _showQuestion(params.initialQuestion); + + if (moveFocus) { + // Focus first tabbable element + $myDom[0].querySelectorAll( + 'audio, button, input, select, textarea, video, [contenteditable], [href], [tabindex="0"]' + )[0].focus(); + } + } }; var rendered = false; @@ -805,19 +820,6 @@ H5P.QuestionSet = function (options, contentId, contentData) { }); hookUpButton('.qs-retrybutton', function () { self.resetTask(true); - $myDom.children().hide(); - - var $intro = $('.intro-page', $myDom); - if ($intro.length) { - // Show intro - $('.intro-page', $myDom).show(); - $('.qs-startbutton', $myDom).focus(); - } - else { - // Show first question - $('.questionset', $myDom).show(); - _showQuestion(params.initialQuestion); - } }); if (scoreBar === undefined) { @@ -828,13 +830,13 @@ H5P.QuestionSet = function (options, contentId, contentData) { // Announce that the question set is complete setTimeout(function () { - $('.qs-progress-announcer', $myDom) + self.$progressAnnouncer .html(eparams.message + scoreString + '.' + (params.endGame.scoreBarLabel).replace('@finals', finals).replace('@totals', totals) + '.' + eparams.comment + '.' + - eparams.resulttext) - .show().focus(); + eparams.resulttext); + scoreBar.setMaxScore(totals); scoreBar.setScore(finals); }, 0); @@ -972,7 +974,9 @@ H5P.QuestionSet = function (options, contentId, contentData) { // Render own DOM into target. $myDom.children().remove(); - $myDom.append(self.$introPage, self.$progressAnnouncer, self.$questionsContainer); + $myDom.append(self.$introPage, self.$questionsContainer); + $myDom.parent().append(self.$progressAnnouncer); + if (params.backgroundImage !== undefined) { $myDom.css({ overflow: 'hidden',