Merge pull request #140 from ditdot-dev/feature/timer

Feature/timer

Author: phre1

examples/quiz/Example.vue

@@ -19,9 +19,12 @@
       ref="flowform"
       v-on:complete="onComplete"
       v-on:submit="onQuizSubmit"
+      v-on:timer="onTimer"
       v-bind:questions="questions"
       v-bind:language="language"
       v-bind:standalone="true"
+      v-bind:timer="true"
+      timer-start-step="html_1"
     >
     <!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
       <!-- We've overriden the default "complete" slot content -->
@@ -53,6 +56,7 @@
             v-html="language.formatString(language.pressEnter)">
           </a>
         </div>
+        <p class="text-success" v-if="submitted && time">Your time: {{ formattedTime }}</p>
         <p class="text-success" v-if="submitted && score < 4">"You scored {{ score }} out of {{ total }}. There's a lot of room for improvement."</p>
         <p class="text-success" v-else-if="submitted && score < 7">"You scored {{ score }} out of {{ total }}. Not bad at all!"</p>
         <p class="text-success" v-else-if="submitted && score <= total">"You scored {{ score }} out of {{ total }}. Wow, that's impressive!"</p>
@@ -85,6 +89,8 @@
         completed: false,
         score: 0, 
         total: 8, 
+        time: 0,
+        formattedTime: '',
         answers: {
           html_1: ['2', '3'], 
           html_2: 'false', 
@@ -335,6 +341,11 @@
         
         this.submitted = true
         this.calculateScore()
+      },
+
+      onTimer(time, formattedTime) {
+        this.time = formattedTime
+        this.formattedTime = formattedTime
       }
     },
   }

src/assets/css/common.css

@@ -645,10 +645,15 @@ header.vff-header svg.f-logo {
 }
 
 .vff-footer .f-progress,
-.vff-footer .f-nav {
+.vff-footer .f-nav,
+.vff-footer .f-timer {
   display: inline-block;
 }
 
+.vff-footer .f-timer {
+  font-family: monospace;
+}
+
 .vff-footer .f-prev,
 .vff-footer .f-next,
 .vff-footer .f-progress {

src/components/FlowForm.vue

@@ -112,6 +112,9 @@
             <span class="f-nav-text" aria-hidden="true">{{ language.next }}</span>
           </a>
         </div>
+        <div v-if="timer" class="f-timer">
+            <span>{{ formatTime(time) }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -133,6 +136,7 @@
     components: {
       FlowFormQuestion
     },
+    
     props: {
       questions: Array,
       language: {
@@ -146,38 +150,50 @@
       standalone: {
         type: Boolean, 
         default: true
-      }
+      },
+      timer: {
+        type: Boolean,
+        default: false
+      },
+      timerStartStep: [String, Number],
+      timerStopStep: [String, Number]
     },
+
     mixins: [
       IsMobile,
     ],
+
     data() {
       return {
         completed: false,
         submitted: false,
         activeQuestionIndex: 0,
         questionList: [],
         questionListActivePath: [],
-        reverse: false
-      }
-    },
-    watch: {
-      completed() {
-        this.emitComplete()
+        reverse: false,
+        timerOn: false,
+        timerInterval: null,
+        time: 0
       }
     },
+
     mounted() {
       document.addEventListener('keydown', this.onKeyDownListener)
       document.addEventListener('keyup', this.onKeyUpListener, true)
       window.addEventListener('beforeunload', this.onBeforeUnload)
 
       this.setQuestions()
+      this.checkTimer()
     },
+
     beforeDestroy() {
       document.removeEventListener('keydown', this.onKeyDownListener)
       document.removeEventListener('keyup', this.onKeyUpListener, true)
       window.removeEventListener('beforeunload', this.onBeforeUnload)
+      
+      this.stopTimer()
     },
+
     computed: {
       numActiveQuestions() {
         return this.questionListActivePath.length
@@ -187,6 +203,20 @@
         return this.questionListActivePath[this.activeQuestionIndex]
       },
 
+      activeQuestionId() {
+        const question = this.questions[this.activeQuestionIndex]
+
+        if (this.isOnLastStep) {
+          return '_submit'
+        }
+
+        if (question && question.id) {
+          return question.id
+        }
+
+        return null
+      },
+
       numCompletedQuestions() {
         let num = 0
 
@@ -209,8 +239,33 @@
 
       isOnLastStep() {
         return this.activeQuestionIndex === this.questionListActivePath.length
+      }, 
+
+      isOnTimerStartStep() {
+        if (this.activeQuestionId === this.timerStartStep) {
+          return true
+        }
+
+        if (!this.timerOn && !this.timerStartStep && this.activeQuestionIndex === 0) {
+          return true
+        }
+
+        return false
+      },
+
+      isOnTimerStopStep() {
+        if (this.submitted) {
+          return true
+        }
+        
+        if (this.activeQuestionId === this.timerStopStep) {
+          return true 
+        }
+
+        return false
       }
     },
+
     methods: {
       /**
        * Returns currently active question component (if any).
@@ -251,7 +306,6 @@
             ++index
           } else if (question.answered) {
             nextId = question.getJumpId()
-
             if (nextId) {
               if (nextId === '_submit') {
                 index = this.questions.length
@@ -320,7 +374,6 @@
           return
         }
 
-
         if (e.shiftKey) {
           e.stopPropagation()
           e.preventDefault()
@@ -407,7 +460,6 @@
         }
 
         const q = this.activeQuestion
-  
         if (q && !q.required) {
           return true
         }
@@ -423,10 +475,10 @@
           if (this.activeQuestionIndex < this.questionListActivePath.length) {
             ++this.activeQuestionIndex
           }
-
+         
           this.$nextTick(() => {
             this.setQuestions()
-
+            this.checkTimer()
             // Nested $nextTick so we're 100% sure that setQuestions
             // actually updated the question array
             this.$nextTick(() => {
@@ -454,11 +506,17 @@
        */
       goToPreviousQuestion() {
         this.blurFocus()
-
+    
         if (this.activeQuestionIndex > 0 && !this.submitted) {
+          if (this.isOnTimerStopStep) {
+            this.startTimer()
+          }
+
           --this.activeQuestionIndex
 
           this.reverse = true
+
+          this.checkTimer()
         }
       },
 
@@ -467,7 +525,6 @@
        */
       goToNextQuestion() {
         this.blurFocus()
-
         if (this.isNextQuestionAvailable()) {
           this.emitEnter()
         }
@@ -481,6 +538,60 @@
       blurFocus() {
         document.activeElement && document.activeElement.blur && document.activeElement.blur()
       },
+
+      checkTimer() {
+        if (this.timer) {
+          if (this.isOnTimerStartStep) {
+            this.startTimer()
+          } else if (this.isOnTimerStopStep) {
+            this.stopTimer()
+          }
+        }
+      },
+
+      startTimer() {
+        if (this.timer && !this.timerOn) {
+          this.timerInterval = setInterval(this.incrementTime, 1000)
+          this.timerOn = true
+        }
+      },
+
+      stopTimer() {
+        if (this.timerOn) {
+          clearInterval(this.timerInterval)
+        }
+
+        this.timerOn = false
+      },
+
+      incrementTime() {
+        ++this.time
+        
+        this.$emit('timer', this.time, this.formatTime(this.time))
+      },
+
+      formatTime(seconds) {
+        let
+          startIndex = 14,
+          length = 5
+            
+        if (seconds >= 60 * 60) {
+          startIndex = 11
+          length = 8
+        }
+
+        return new Date(1000 * seconds).toISOString().substr(startIndex, length)
+      }
+    },
+
+    watch: {
+      completed() {
+        this.emitComplete()
+      },
+      
+      submitted() {
+        this.stopTimer()
+      }
     }
   }
 </script>

src/components/QuestionTypes/TextType.vue

@@ -18,7 +18,6 @@
       v-bind:min="question.min"
       v-bind:max="question.max"
       v-on:change="onChange"
-      v-bind:tokens="tokens" 
     />
     <input
       v-else