EDUCATIC
/
h5p-question-set
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed hiding of slides by using visibility instead of display. 

As future use cases might include the use of MathJax, one wants to avoid
the use of `display: none` to hide elements. By using `visibility:
hidden` in combination with a offscreen position almost the same effect
is achieved.
pull/34/head
S. D. Cloudt 2018-08-16 13:04:59 +02:00
parent 7eae560f55
commit 07d3aa99b8
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/questionset.css
View File

@ -1,3 +1,9 @@
.questionset .question-container:not(.h5p-questionset-visible){
position: absolute;
left: -100%;
visibility: hidden;
}
.questionset-results h2 { .questionset-results h2 {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;

22
js/questionset.js
View File

@ -365,7 +365,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
handleAutoPlay(currentQuestion); handleAutoPlay(currentQuestion);
// Hide all questions // Hide all questions
$('.question-container', $myDom).hide().eq(questionNumber).show(); $('.question-container', $myDom).removeClass('h5p-questionset-visible').eq(questionNumber).addClass('h5p-questionset-visible');
if (questionInstances[questionNumber]) { if (questionInstances[questionNumber]) {
// Trigger resize on question in case the size of the QS has changed. // Trigger resize on question in case the size of the QS has changed.
@ -704,12 +704,12 @@ H5P.QuestionSet = function (options, contentId, contentData) {
var _displayEndGame = function () { var _displayEndGame = function () {
$('.progress-dot.current', $myDom).removeClass('current'); $('.progress-dot.current', $myDom).removeClass('current');
if (rendered) { if (rendered) {
$myDom.children().hide().filter('.questionset-results').show(); $myDom.children().removeClass('h5p-questionset-visible').filter('.questionset-results').addClass('h5p-questionset-visible');
self.trigger('resize'); self.trigger('resize');
return; return;
} }
//Remove old score screen. //Remove old score screen.
$myDom.children().hide().filter('.questionset-results').remove(); $myDom.children().removeClass('h5p-questionset-visible').filter('.questionset-results').remove();
rendered = true; rendered = true;
// Get total score. // Get total score.
@ -748,28 +748,28 @@ H5P.QuestionSet = function (options, contentId, contentData) {
}; };
// Show result page. // Show result page.
$myDom.children().hide(); $myDom.children().removeClass('h5p-questionset-visible');
$myDom.append(endTemplate.render(eparams)); $myDom.append(endTemplate.render(eparams));
if (params.endGame.showResultPage) { if (params.endGame.showResultPage) {
hookUpButton('.qs-solutionbutton', function () { hookUpButton('.qs-solutionbutton', function () {
showSolutions(); showSolutions();
$myDom.children().hide().filter('.questionset').show(); $myDom.children().removeClass('h5p-questionset-visible').filter('.questionset').addClass('h5p-questionset-visible');
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);
}); });
hookUpButton('.qs-retrybutton', function () { hookUpButton('.qs-retrybutton', function () {
resetTask(); resetTask();
$myDom.children().hide(); $myDom.children().removeClass('h5p-questionset-visible');
var $intro = $('.intro-page', $myDom); var $intro = $('.intro-page', $myDom);
if ($intro.length) { if ($intro.length) {
// Show intro // Show intro
$('.intro-page', $myDom).show(); $('.intro-page', $myDom).addClass('h5p-questionset-visible');
$('.qs-startbutton', $myDom).focus(); $('.qs-startbutton', $myDom).focus();
} }
else { else {
// Show first question // Show first question
$('.questionset', $myDom).show(); $('.questionset', $myDom).addClass('h5p-questionset-visible');
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);
} }
}); });
@ -803,7 +803,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
if (params.endGame.showAnimations) { if (params.endGame.showAnimations) {
var videoData = success ? params.endGame.successVideo : params.endGame.failVideo; var videoData = success ? params.endGame.successVideo : params.endGame.failVideo;
if (videoData) { if (videoData) {
$myDom.children().hide(); $myDom.children().removeClass('h5p-questionset-visible');
var $videoContainer = $('<div class="video-container"></div>').appendTo($myDom); var $videoContainer = $('<div class="video-container"></div>').appendTo($myDom);
var video = new H5P.Video({ var video = new H5P.Video({
@ -954,7 +954,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
$('.qs-startbutton', $myDom) $('.qs-startbutton', $myDom)
.click(function () { .click(function () {
$(this).parents('.intro-page').hide(); $(this).parents('.intro-page').hide();
$('.questionset', $myDom).show(); $('.questionset', $myDom).addClass('h5p-questionset-visible');
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);
event.preventDefault(); event.preventDefault();
}) })
@ -963,7 +963,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
case 13: // Enter case 13: // Enter
case 32: // Space case 32: // Space
$(this).parents('.intro-page').hide(); $(this).parents('.intro-page').hide();
$('.questionset', $myDom).show(); $('.questionset', $myDom).addClass('h5p-questionset-visible');
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);
event.preventDefault(); event.preventDefault();
} }