Merge pull request #28 from davidxuan/master

improve question display

post.hbs

@@ -428,6 +428,7 @@ into the {body} of the default.hbs template --}}
     var taglist_height = $('#taglist').height();
     var tag_height = $('#tag_element').height();
     var q_message = document.createElement('h6');
+    var a_message = document.createElement('h6');
 
 
     if (taglist_height >= 35) {
@@ -447,9 +448,47 @@ into the {body} of the default.hbs template --}}
       $("#more").show();
     });
 
+    var questions = document.getElementsByClassName("container");
+
+    for (i = 0; i < questions.length; i++) {
+      var locked_msg_div = document.createElement('div');
+      locked_msg_div.id = 'locked_msg';
+      locked_msg_div.setAttribute("style", "text-align: center; font-weight: bold");
+      var hidden_div = document.createElement('div');
+      hidden_div.id = 'hidden';
+      hidden_div.setAttribute("style", "display: none");
+
+      while (questions[i].childNodes.length > 0) {
+        hidden_div.appendChild(questions[i].childNodes[0]);
+      }
+
+      progress_div = document.createElement('div');
+      progress_div.id = 'progress';
+      progress_div.setAttribute('style', 'text-align: right');
+
+      hidden_div.appendChild(progress_div);
+
+      questions[i].appendChild(locked_msg_div);
+      questions[i].appendChild(hidden_div);
+    }
+
+    // last question to show
+    var show = 0;
+    var attemps = 0;
+
+    for (i = 0; i < questions.length; i++) {
+      if (i >= 1) {
+        $(questions[i]).children("#locked_msg").text(`Question ${i + 1} is locked; Attempt previous questions first`);
+      } else {
+        $(questions[i]).children("#hidden").show();
+      }
+      $(questions[i]).children("#hidden").children("#progress").text(`Question ${i + 1}/${questions.length}`);
+    }
+
     //Add icon and colors to question answers
     //click function will be shown if the question is answered correctly
     $('.correct_option').click(function () {
+      attemps = 0;
 
       var icon_check = '<i class="fa fa-check fadeMe" style="margin:5px;color:#33cc33;"></i>';
       var icon_cross = '<i class="fa fa-times fadeMe" style="margin:5px;"></i>';
@@ -459,7 +498,6 @@ into the {body} of the default.hbs template --}}
         $(this).siblings().prepend(icon_cross);
         $(this).siblings().css({ "color": "coral", "border-color": "coral" });
 
-
         $(this).addClass("correct_answer");
         $(this).prepend(icon_check);
         q_message.innerHTML = ("Well done, you are the best.");
@@ -468,14 +506,15 @@ into the {body} of the default.hbs template --}}
         $(this).parents(':eq(0)').prepend(q_message);
 
         // Show the answer explanation
-
         if ($(this).parent().siblings(".Answer_explanation").length >= 1) {
           $(this).parent().siblings(".Answer_explanation").css({ "display": "block" });
-
         }
 
       }
       $(this).attr('disabled', 'disabled');
+      show += 1;
+      $(questions[show]).children("#hidden").show();
+      $(questions[show]).children("#locked_msg").hide();
     });
 
 
@@ -488,12 +527,12 @@ into the {body} of the default.hbs template --}}
         $(this).addClass("wrong_answer");
 
         $(this).prepend(icon);
-        q_message.innerHTML = ("No worries, this answer is wrong, you must try again");
+        attemps += 1;
+        q_message.innerHTML = (`No worries, this answer is wrong, you must try again. (${attemps} attempts)`);
         q_message.classList.add("question_message");
         q_message.style.color = "coral";
         $(this).parents(':eq(0)').prepend(q_message);
       }
-
     });
 
   })
@@ -548,4 +587,4 @@ into the {body} of the default.hbs template --}}
   }
 
 </script>
-{{/contentFor}}
+{{/contentFor}}