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

This commit is contained in:
Oskar Winkels 2021-01-22 22:14:52 +01:00
parent 6c1040013f
commit abd13de356
3 changed files with 28 additions and 15 deletions

View File

@ -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() { function updateSubmitTimer() {
var button = document.getElementById('quizSubmitButton') var button = document.getElementById('quizSubmitButton')
if (state.submitTimer > 0) { if (state.submitTimer > 0) {
timetext = state.submitTimer > 60 ? button.value = 'Wait ' + formatTime(state.submitTimer)
Math.floor(state.submitTimer/60)+':'+(('0' + (state.submitTimer%60)).slice(-2)) :
state.submitTimer + 's'
button.value = 'Wait ' + timetext
button.disabled = true button.disabled = true
state.submitTimer -= 1 state.submitTimer -= 1
@ -103,6 +105,11 @@ function showSequentialQuestion() {
function nextQuestion() { function nextQuestion() {
// Save time taken
state.questions[state.currentQuestion].timeTaken = state.totalTimer - state.questionStartTotalTimer
state.questionStartTotalTimer = state.totalTimer
state.currentQuestion++ state.currentQuestion++
if (state.currentQuestion == state.questions.length) if (state.currentQuestion == state.questions.length)
@ -177,7 +184,7 @@ function startQuiz() {
changeView('quiz') changeView('quiz')
if (getRule('sequential')) if (getRule('sequential'))
showSequentialQuestion(state.currentQuestion) showSequentialQuestion()
if (state.submitTimer > 0) if (state.submitTimer > 0)
startSubmitTimer(state.submitTimer) startSubmitTimer(state.submitTimer)
@ -197,14 +204,15 @@ function reStartQuiz() {
console.log('Restarting quiz'); console.log('Restarting quiz');
state.responses = defaultState.responses state.responses = defaultState.responses
state.currentQuestion = defaultState.currentQuestion state.currentQuestion = defaultState.currentQuestion
state.success = defaultState.success state.success = defaultState.success
state.submitTry = defaultState.submitTry state.submitTry = defaultState.submitTry
state.submitTimer = defaultState.submitTimer state.submitTimer = defaultState.submitTimer
state.submitInterval = defaultState.submitInterval state.submitInterval = defaultState.submitInterval
state.totalTimer = defaultState.totalTimer state.questionStartTotalTimer = defaultState.questionStartTotalTimer
state.totalInterval = defaultState.totalInterval state.totalTimer = defaultState.totalTimer
state.totalInterval = defaultState.totalInterval
changeView('prescreen') changeView('prescreen')
@ -310,6 +318,10 @@ function showQuizResults() {
<p>${q.explanation || '[No explanation provided]'}</p>` <p>${q.explanation || '[No explanation provided]'}</p>`
el.appendChild(meta) 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' document.querySelector('#quizSubmitButton').value = 'Back'

View File

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

View File

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