From 07d3aa99b88ccc2cefe650b0b580d2fbf3b49e58 Mon Sep 17 00:00:00 2001
From: "S. D. Cloudt" <s.d.cloudt@student.tue.nl>
Date: Thu, 16 Aug 2018 13:04:59 +0200
Subject: [PATCH] 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.
---
 css/questionset.css |  6 ++++++
 js/questionset.js   | 22 +++++++++++-----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/css/questionset.css b/css/questionset.css
index 6f5221b..ac3787b 100644
--- a/css/questionset.css
+++ b/css/questionset.css
@@ -1,3 +1,9 @@
+.questionset .question-container:not(.h5p-questionset-visible){
+  position: absolute;
+  left: -100%;
+  visibility: hidden;
+}
+
 .questionset-results h2 {
   font-size: 1.2em;
   font-weight: bold;
diff --git a/js/questionset.js b/js/questionset.js
index 3d65355..7a30c4f 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -365,7 +365,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     handleAutoPlay(currentQuestion);
 
     // 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]) {
       // 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 () {
     $('.progress-dot.current', $myDom).removeClass('current');
     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');
       return;
     }
     //Remove old score screen.
-    $myDom.children().hide().filter('.questionset-results').remove();
+    $myDom.children().removeClass('h5p-questionset-visible').filter('.questionset-results').remove();
     rendered = true;
 
     // Get total score.
@@ -748,28 +748,28 @@ H5P.QuestionSet = function (options, contentId, contentData) {
       };
 
       // Show result page.
-      $myDom.children().hide();
+      $myDom.children().removeClass('h5p-questionset-visible');
       $myDom.append(endTemplate.render(eparams));
 
       if (params.endGame.showResultPage) {
         hookUpButton('.qs-solutionbutton', function () {
           showSolutions();
-          $myDom.children().hide().filter('.questionset').show();
+          $myDom.children().removeClass('h5p-questionset-visible').filter('.questionset').addClass('h5p-questionset-visible');
           _showQuestion(params.initialQuestion);
         });
         hookUpButton('.qs-retrybutton', function () {
           resetTask();
-          $myDom.children().hide();
+          $myDom.children().removeClass('h5p-questionset-visible');
 
           var $intro = $('.intro-page', $myDom);
           if ($intro.length) {
             // Show intro
-            $('.intro-page', $myDom).show();
+            $('.intro-page', $myDom).addClass('h5p-questionset-visible');
             $('.qs-startbutton', $myDom).focus();
           }
           else {
             // Show first question
-            $('.questionset', $myDom).show();
+            $('.questionset', $myDom).addClass('h5p-questionset-visible');
             _showQuestion(params.initialQuestion);
           }
         });
@@ -803,7 +803,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     if (params.endGame.showAnimations) {
       var videoData = success ? params.endGame.successVideo : params.endGame.failVideo;
       if (videoData) {
-        $myDom.children().hide();
+        $myDom.children().removeClass('h5p-questionset-visible');
         var $videoContainer = $('<div class="video-container"></div>').appendTo($myDom);
 
         var video = new H5P.Video({
@@ -954,7 +954,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     $('.qs-startbutton', $myDom)
       .click(function () {
         $(this).parents('.intro-page').hide();
-        $('.questionset', $myDom).show();
+        $('.questionset', $myDom).addClass('h5p-questionset-visible');
         _showQuestion(params.initialQuestion);
         event.preventDefault();
       })
@@ -963,7 +963,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
           case 13: // Enter
           case 32: // Space
             $(this).parents('.intro-page').hide();
-            $('.questionset', $myDom).show();
+            $('.questionset', $myDom).addClass('h5p-questionset-visible');
             _showQuestion(params.initialQuestion);
             event.preventDefault();
           }