Show time taken per question on review page (resolves #8)

web/quiz.js

@@ -44,17 +44,19 @@ function resetSubmitButton() {
 
 }
 
+function formatTime(seconds) {
+	return (seconds > 60)
+		? Math.floor(seconds / 60) + ':' + (('0' + (seconds % 60)).slice(-2))
+		: seconds + 's'
+}
+
 function updateSubmitTimer() {
 
 	var button = document.getElementById('quizSubmitButton')
 
 	if (state.submitTimer > 0) {
 
-		timetext = state.submitTimer > 60 ?
-			Math.floor(state.submitTimer/60)+':'+(('0' + (state.submitTimer%60)).slice(-2)) :
-			state.submitTimer + 's'
-
-		button.value = 'Wait ' + timetext
+		button.value = 'Wait ' + formatTime(state.submitTimer)
 		button.disabled = true
 		state.submitTimer -= 1
 
@@ -103,6 +105,11 @@ function showSequentialQuestion() {
 
 function nextQuestion() {
 
+	// Save time taken
+	state.questions[state.currentQuestion].timeTaken = state.totalTimer - state.questionStartTotalTimer
+
+	state.questionStartTotalTimer = state.totalTimer
+
 	state.currentQuestion++
 
 	if (state.currentQuestion == state.questions.length)
@@ -177,7 +184,7 @@ function startQuiz() {
 	changeView('quiz')
 
 	if (getRule('sequential'))
-		showSequentialQuestion(state.currentQuestion)
+		showSequentialQuestion()
 
 	if (state.submitTimer > 0)
 		startSubmitTimer(state.submitTimer)
@@ -203,6 +210,7 @@ function reStartQuiz() {
 	state.submitTry					= defaultState.submitTry
 	state.submitTimer				= defaultState.submitTimer
 	state.submitInterval			= defaultState.submitInterval
+	state.questionStartTotalTimer	= defaultState.questionStartTotalTimer
 	state.totalTimer				= defaultState.totalTimer
 	state.totalInterval				= defaultState.totalInterval
 
@@ -310,6 +318,10 @@ function showQuizResults() {
 			<p>${q.explanation || '[No explanation provided]'}</p>`
 		el.appendChild(meta)
 
+		var qinfo = (value.correct) ? '✅ Correct' : '❌ Incorrect'
+		if (q.timeTaken) qinfo += ('. Time taken: ' + formatTime(q.timeTaken))
+		el.querySelector('h3').innerHTML += ` &nbsp; <span class="meta">${qinfo}</span>`
+
 	}
 
 	document.querySelector('#quizSubmitButton').value = 'Back'

web/style.css

@@ -169,7 +169,7 @@ input[type="radio"]:hover + p, input[type="checkbox"]:hover + p {
 
 .question .meta {
 	background: #ddd;
-	padding: 16px;
+	padding: 12px;
 	border-radius: 4px;
 	font-size: 16px;
 }

web/util.js

@@ -12,6 +12,7 @@ const defaultState = {
 	submitTime: null,
 	submitTimer: 0,
 	submitInterval: null,
+	questionStartTotalTimer: 0,
 	totalTimer: 0,
 	totalInterval: null,
 }