From 601ae585e184d1bb9b3ea0ee8d7ae830c72dbe3d Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Mon, 3 Oct 2016 13:06:01 +0200
Subject: [PATCH 1/6] Disable backwards navigation.

Show dots, but they have no action when backward navigation is disabled.
Always show/enable full navigation in solution mode.
Only show forward button when a question has been answered.
Remove navigation button if question has been answered, then retried within the question's logic.
HFP-8
---
 js/questionset.js | 74 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 17 deletions(-)

diff --git a/js/questionset.js b/js/questionset.js
index 63a18fb..634a296 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -39,7 +39,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
           '  <% } %>' +
           '  <div class="qs-footer">' +
           '    <div class="qs-progress">' +
-          '      <% if (progressType == "dots" && !disableBackwardsNavigation) { %>' +
+          '      <% if (progressType == "dots") { %>' +
           '        <ul class="dots-container" role="navigation">' +
           '          <% for (var i=0; i<questions.length; i++) { %>' +
           '            <li class="progress-item"><a href="#" class="progress-dot unanswered" ' +
@@ -128,6 +128,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
   var scoreBar;
   var up;
   var renderSolutions = false;
+  var showingSolutions = false;
   contentData = contentData || {};
   if (contentData.previousState) {
     currentQuestion = contentData.previousState.progress;
@@ -191,6 +192,16 @@ H5P.QuestionSet = function (options, contentId, contentData) {
 
   // Update button state.
   var _updateButtons = function () {
+    // Verify that current question is answered when backward nav is disabled
+    if (params.disableBackwardsNavigation) {
+      if (questionInstances[currentQuestion].getAnswerGiven()) {
+        questionInstances[currentQuestion].showButton('next');
+      }
+      else {
+        questionInstances[currentQuestion].hideButton('next');
+      }
+    }
+
     var answered = true;
     for (var i = questionInstances.length - 1; i >= 0; i--) {
       answered = answered && (questionInstances[i]).getAnswerGiven();
@@ -280,7 +291,17 @@ H5P.QuestionSet = function (options, contentId, contentData) {
    * @public
    */
   var showSolutions = function () {
+    showingSolutions = true;
     for (var i = 0; i < questionInstances.length; i++) {
+
+      // Enable back and forth navigation in solution mode
+      if (i < questionInstances.length - 1) {
+        questionInstances[i].showButton('next');
+      }
+      if (i > 0) {
+        questionInstances[i].showButton('prev');
+      }
+
       try {
         // Do not read answers
         questionInstances[i].toggleReadSpeaker(true);
@@ -300,9 +321,23 @@ H5P.QuestionSet = function (options, contentId, contentData) {
    * @public
    */
   var resetTask = function () {
+    showingSolutions = false;
     for (var i = 0; i < questionInstances.length; i++) {
       try {
         questionInstances[i].resetTask();
+
+        // Hide back and forth navigation in normal mode
+        if (params.disableBackwardsNavigation) {
+          // Check if first question is answered by default
+          if (i === 0 && questionInstances[i].getAnswerGiven()) {
+            questionInstances[i].showButton('next');
+          }
+          else {
+            questionInstances[i].hideButton('next');
+          }
+
+          questionInstances[i].hideButton('prev');
+        }
       }
       catch(error) {
         H5P.error("subcontent does not contain a valid resetTask function");
@@ -329,17 +364,19 @@ H5P.QuestionSet = function (options, contentId, contentData) {
   };
 
   var moveQuestion = function (direction) {
+    if (params.disableBackwardsNavigation && !questionInstances[currentQuestion].getAnswerGiven()) {
+      questionInstances[currentQuestion].hideButton('next');
+      questionInstances[currentQuestion].hideButton('finish');
+      return;
+    }
+
     _stopQuestion(currentQuestion);
     if (currentQuestion + direction >= questionInstances.length) {
       _displayEndGame();
-
-    }
-    else if (!params.disableBackwardsNavigation || questionInstances[currentQuestion].getAnswerGiven()) {
-      // Allow movement if backward navigation enabled or answer given
-      _showQuestion(currentQuestion + direction);
     }
     else {
-      //TODO: Give an error message ? or disable/grey out previous button when not allowed
+      // Allow movement if backward navigation enabled or answer given
+      _showQuestion(currentQuestion + direction);
     }
   };
 
@@ -598,21 +635,20 @@ H5P.QuestionSet = function (options, contentId, contentData) {
           moveQuestion.bind(this, 1), false);
 
       } else {
-
-        // Add next question button
-        question.addButton('next', '', moveQuestion.bind(this, 1), true, {
-          href: '#', // Use href since this is a navigation button
-          'aria-label': params.texts.nextButton
-        });
+        // Only show button next button when answered or is allowed to go back
+        question.addButton('next', '', moveQuestion.bind(this, 1),
+          !params.disableBackwardsNavigation || !!question.getAnswerGiven(), {
+            href: '#', // Use href since this is a navigation button
+            'aria-label': params.texts.nextButton
+          });
       }
 
       // Add previous question button
-      if (questionInstances[0] !== question && !params.disableBackwardsNavigation) {
-        question.addButton('prev', '', moveQuestion.bind(this, -1), true, {
+      question.addButton('prev', '', moveQuestion.bind(this, -1),
+        !(questionInstances[0] === question || params.disableBackwardsNavigation), {
           href: '#', // Use href since this is a navigation button
           'aria-label': params.texts.prevButton
         });
-      }
 
       question.on('xAPI', function (event) {
         var shortVerb = event.getVerb();
@@ -653,9 +689,13 @@ H5P.QuestionSet = function (options, contentId, contentData) {
      * @param {Object} [event]
      */
     var handleProgressDotClick = function (event) {
+      // Disable dots when backward nav disabled
+      event.preventDefault();
+      if (params.disableBackwardsNavigation && !showingSolutions) {
+        return;
+      }
       _stopQuestion(currentQuestion);
       _showQuestion($(this).parent().index());
-      event.preventDefault();
     };
 
     // Set event listeners.

From 84c8751238f8ef0fae51a1796a2a9b7f3e9633a9 Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Mon, 3 Oct 2016 13:19:25 +0200
Subject: [PATCH 2/6] Fixed undefined answers in previous state.

HFP-9
---
 js/questionset.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/questionset.js b/js/questionset.js
index 634a296..3602de9 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -165,9 +165,10 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     question.params.overrideSettings = question.params.overrideSettings || {};
     question.params.overrideSettings.$confirmationDialogParent = $template.last();
     question.params.overrideSettings.instance = this;
+    var hasAnswers = contentData.previousState && contentData.previousState.answers;
     var questionInstance = H5P.newRunnable(question, contentId, undefined, undefined,
       {
-        previousState: contentData.previousState ? contentData.previousState.answers[i] : undefined,
+        previousState: hasAnswers ? contentData.previousState.answers[i] : undefined,
         parent: self
       });
     questionInstance.on('resize', function () {

From 1cafbf09f44280af6d4b0c7c509ce9fd4e827380 Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Tue, 4 Oct 2016 11:43:12 +0200
Subject: [PATCH 3/6] Added aria-disabled attribute to dots when they are
 disabled

HFP-8
---
 js/questionset.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/js/questionset.js b/js/questionset.js
index 3602de9..10cc730 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -45,8 +45,9 @@ H5P.QuestionSet = function (options, contentId, contentData) {
           '            <li class="progress-item"><a href="#" class="progress-dot unanswered" ' +
           '                   aria-label="<%=' +
           '                   texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
-          '                   + ", " + texts.unansweredText' +
-          '            %>" tabindex="-1"></a></li>' +
+          '                   + ", " + texts.unansweredText %>" tabindex="-1" ' +
+          '                   <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
+          '            ></a></li>' +
           '          <% } %>' +
           '        </div>' +
           '      <% } else if (progressType == "textual") { %>' +
@@ -296,6 +297,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     for (var i = 0; i < questionInstances.length; i++) {
 
       // Enable back and forth navigation in solution mode
+      toggleDotsNavigation(true);
       if (i < questionInstances.length - 1) {
         questionInstances[i].showButton('next');
       }
@@ -316,6 +318,16 @@ H5P.QuestionSet = function (options, contentId, contentData) {
     }
   };
 
+  /**
+   * Toggles whether dots are enabled for navigation
+   */
+  var toggleDotsNavigation = function (enable) {
+    console.log("toggle dots", enable);
+    $('.progress-dot', $myDom).each(function () {
+      $(this).attr('aria-disabled', enable ? 'false' : 'true');
+    });
+  };
+
   /**
    * Resets the task and every subcontent task.
    * Used for contracts with integrated content.
@@ -329,6 +341,8 @@ H5P.QuestionSet = function (options, contentId, contentData) {
 
         // Hide back and forth navigation in normal mode
         if (params.disableBackwardsNavigation) {
+          toggleDotsNavigation(false);
+
           // Check if first question is answered by default
           if (i === 0 && questionInstances[i].getAnswerGiven()) {
             questionInstances[i].showButton('next');

From 751ee5f597d6007e7c385fdf3853bea7324158ea Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Tue, 4 Oct 2016 11:53:04 +0200
Subject: [PATCH 4/6] Removed debug line

HFP-8
---
 js/questionset.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/questionset.js b/js/questionset.js
index 10cc730..788b8bb 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -322,7 +322,6 @@ H5P.QuestionSet = function (options, contentId, contentData) {
    * Toggles whether dots are enabled for navigation
    */
   var toggleDotsNavigation = function (enable) {
-    console.log("toggle dots", enable);
     $('.progress-dot', $myDom).each(function () {
       $(this).attr('aria-disabled', enable ? 'false' : 'true');
     });

From 55d66eb4695444e95235176f5bac0c456f7959e5 Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Tue, 4 Oct 2016 11:59:26 +0200
Subject: [PATCH 5/6] Fixed not setting progress when it is undefined.

HFP-9
---
 js/questionset.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/questionset.js b/js/questionset.js
index 788b8bb..1dbe17c 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -131,7 +131,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
   var renderSolutions = false;
   var showingSolutions = false;
   contentData = contentData || {};
-  if (contentData.previousState) {
+  if (contentData.previousState && contentData.previousState.progress) {
     currentQuestion = contentData.previousState.progress;
   }
 

From 46ca8846812c8dfb098476d73229732fa8338f20 Mon Sep 17 00:00:00 2001
From: thomasmars <thomasmars87@gmail.com>
Date: Tue, 4 Oct 2016 14:18:50 +0200
Subject: [PATCH 6/6] Disable navigation bar visuals and functions when
 backward navigation is disabled.

HFP-8
---
 css/questionset.css | 12 +++++++++++-
 js/questionset.js   | 24 +++++++++++++++++-------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/css/questionset.css b/css/questionset.css
index 90cf581..5f07c33 100644
--- a/css/questionset.css
+++ b/css/questionset.css
@@ -52,7 +52,12 @@
   background: #fff;
   background: #cecece;
 }
-.progress-dot:hover {
+
+.progress-dot.disabled {
+  cursor: default;
+}
+
+.progress-dot:not(.disabled):hover {
   box-shadow: 0 0 0.5em #c7c7c7;
 }
 .progress-dot.answered {
@@ -61,6 +66,11 @@
 .progress-dot.current {
   background: #285585;
 }
+
+.progress-dot.disabled:focus {
+  outline: none
+}
+
 .progress-dot:focus {
   outline-color: rgb(40, 130, 211);
   outline-width: thin;
diff --git a/js/questionset.js b/js/questionset.js
index 1dbe17c..1e18f63 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -42,12 +42,16 @@ H5P.QuestionSet = function (options, contentId, contentData) {
           '      <% if (progressType == "dots") { %>' +
           '        <ul class="dots-container" role="navigation">' +
           '          <% for (var i=0; i<questions.length; i++) { %>' +
-          '            <li class="progress-item"><a href="#" class="progress-dot unanswered" ' +
-          '                   aria-label="<%=' +
-          '                   texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
-          '                   + ", " + texts.unansweredText %>" tabindex="-1" ' +
-          '                   <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
-          '            ></a></li>' +
+          '           <li class="progress-item">' +
+          '             <a href="#" ' +
+          '               class="progress-dot unanswered<%' +
+          '               if (disableBackwardsNavigation) { %> disabled <% } %>"' +
+          '               aria-label="<%=' +
+          '               texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
+          '               + ", " + texts.unansweredText %>" tabindex="-1" ' +
+          '               <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
+          '             ></a>' +
+          '           </li>' +
           '          <% } %>' +
           '        </div>' +
           '      <% } else if (progressType == "textual") { %>' +
@@ -323,7 +327,12 @@ H5P.QuestionSet = function (options, contentId, contentData) {
    */
   var toggleDotsNavigation = function (enable) {
     $('.progress-dot', $myDom).each(function () {
+      $(this).toggleClass('disabled', !enable);
       $(this).attr('aria-disabled', enable ? 'false' : 'true');
+      // Remove tabindex
+      if (!enable) {
+        $(this).attr('tabindex', '-1');
+      }
     });
   };
 
@@ -441,9 +450,10 @@ H5P.QuestionSet = function (options, contentId, contentData) {
       label += ', ' + texts.currentQuestionText;
     }
 
+    var disabledTabindex = params.disableBackwardsNavigation && !showingSolutions;
     $el.toggleClass('current', isCurrent)
       .attr('aria-label', label)
-      .attr('tabindex', isCurrent ? 0 : -1);
+      .attr('tabindex', isCurrent && !disabledTabindex ? 0 : -1);
   };
 
   var _displayEndGame = function () {