Merge pull request #363 from jspayd/toggle-timer

Toggle timer visibility on timed exams

edx_proctoring/static/proctoring/js/views/proctored_exam_view.js

@@ -49,6 +49,9 @@ var edx = edx || {};
             /* will call into the rendering */
             this.model.fetch();
         },
+        events: {
+            'click #toggle_timer': 'toggleTimerVisibility'
+        },
         detectScroll: function(event) {
             if ($(event.currentTarget).scrollTop() > this.timerBarTopPosition) {
                 $(".proctored_exam_status").addClass('is-fixed');
@@ -171,6 +174,22 @@ var edx = edx || {};
                 // refresh the page when the timer expired
                 self.reloadPage();
             }
+        },
+        toggleTimerVisibility: function (event) {
+            var button = $(event.currentTarget);
+            var icon = button.find('i');
+            var timer = this.$el.find('span#time_remaining_id b');
+            if (timer.hasClass('timer-hidden')) {
+                timer.removeClass('timer-hidden');
+                button.attr('aria-pressed', 'false');
+                icon.removeClass('fa-eye').addClass('fa-eye-slash');
+            } else {
+                timer.addClass('timer-hidden');
+                button.attr('aria-pressed', 'true');
+                icon.removeClass('fa-eye-slash').addClass('fa-eye');
+            }
+            event.stopPropagation();
+            event.preventDefault();
         }
     });
     this.edx.coursware.proctored_exam.ProctoredExamView = edx.coursware.proctored_exam.ProctoredExamView;

edx_proctoring/static/proctoring/spec/proctored_exam_spec.js

@@ -9,7 +9,11 @@ describe('ProctoredExamView', function () {
             'You are taking "' +
             '<a href="<%= exam_url_path %>"> <%= exam_display_name %> </a>' +
             '" as a proctored exam. The timer on the right shows the time remaining in the exam' +
-            '<span id="time_remaining_id" class="pull-right"> <b> </b> </span> </div>' +
+            '<span class="exam-timer-clock"> <span id="time_remaining_id">' +
+            '<b> </b> <button role="button" id="toggle_timer" aria-label="Hide Timer" aria-pressed="false">' +
+            '<i class="fa fa-eye-slash" aria-hidden="true"></i></button>' +
+            '</span> </span>' +
+            '</div>' +
             '</script>'+
             '</div>'
         );
@@ -55,6 +59,15 @@ describe('ProctoredExamView', function () {
         this.proctored_exam_view.render();
         expect(this.proctored_exam_view.$el.find('div.exam-timer')).toHaveClass('low-time critical');
     });
+    it('toggles timer visibility correctly', function() {
+        var button = this.proctored_exam_view.$el.find('#toggle_timer');
+        var timer = this.proctored_exam_view.$el.find('span#time_remaining_id b');
+        expect(timer).not.toHaveClass('timer-hidden');
+        button.click();
+        expect(timer).toHaveClass('timer-hidden');
+        button.click();
+        expect(timer).not.toHaveClass('timer-hidden');
+    });
     it("reload the page when the exam time finishes", function(){
         this.proctored_exam_view.secondsLeft = -10;
         var reloadPage = spyOn(this.proctored_exam_view, 'reloadPage');