diff --git a/web/quiz.js b/web/quiz.js index 57f0329..c056b37 100644 --- a/web/quiz.js +++ b/web/quiz.js @@ -27,6 +27,15 @@ function startTotalTimer() { } +function updateSubmitButton() { + + var button = document.getElementById('quizSubmitButton') + + var lastQuestion = (state.currentQuestion == (state.questions.length - 1)) + + button.value = lastQuestion ? 'Submit Answers' : 'Next Question' + +} function updateSubmitTimer() { @@ -40,7 +49,7 @@ function updateSubmitTimer() { } else { - button.value = 'Submit Answers' + updateSubmitButton() button.disabled = false clearInterval(state.submitInterval) @@ -64,15 +73,48 @@ function startSubmitTimer(time) { } +function showSequentialQuestion() { + + var questions = document.querySelectorAll('.question') + for (q of questions) + q.style.display = null + + updateSubmitButton() + + if (state.currentQuestion !== null) { + var q = document.querySelector('#quiz form #question' + state.currentQuestion) + q.style.display = 'block' + } + +} + +function nextQuestion() { + + state.currentQuestion++ + + if (state.currentQuestion == state.questions.length) + state.currentQuestion = null + + showSequentialQuestion() + + return state.currentQuestion + +} + + function renderQuiz() { var quizForm = document.querySelector('#quiz form') + quizForm.className = '' + if (getRule('sequential')) + quizForm.classList.add('sequential') + quizForm.innerHTML = '' for (const [i, q] of state.questions.entries()) { - var html = '' + var html = `
` html += `

Question #${i+1}

` html += `

${q.question}

` @@ -98,6 +140,7 @@ function renderQuiz() { } + html += '
' quizForm.innerHTML += html @@ -117,6 +160,9 @@ function startQuiz() { changeView('quiz') + if (getRule('sequential')) + showSequentialQuestion(state.currentQuestion) + if (state.submitTimer > 0) startSubmitTimer(state.submitTimer) else @@ -132,6 +178,7 @@ function reStartQuiz() { console.log('Restarting quiz'); + state.currentQuestion = 0 state.totalTimer = 0 state.submitTimer = 0 state.success = false @@ -208,6 +255,15 @@ function mergeKeyReducer(acc, entry) { function submitQuiz() { + if (getRule('sequential')) { + + var n = nextQuestion() + + if (n !== null) + return + + } + console.log('Submitting quiz. State:') console.log(state) diff --git a/web/style.css b/web/style.css index 7868f38..b478e1e 100644 --- a/web/style.css +++ b/web/style.css @@ -126,3 +126,7 @@ input[type="radio"]:hover + p { #sharing a { font-size: 16px; } + +#quiz form.sequential .question { + display: none; +} diff --git a/web/util.js b/web/util.js index 8941410..dcbc4eb 100644 --- a/web/util.js +++ b/web/util.js @@ -3,6 +3,7 @@ const defaultState = { id: null, title: null, questions: [], + currentQuestion: 0, success: false, submitTries: 1, submits: 0, @@ -37,10 +38,10 @@ function updateTitles() { var rules = { __default__: { sequential: false, - submitTries: 1, - submitTimeout: null, - timedQs: false, - allowQOvertime: false + submitTries: 1, // NYI + submitTimeout: null, // NYI + timedQs: false, // NYI + allowQOvertime: false // NYI }, 'FSG' : { sequential: true, timedQs: true }, 'FSA' : { sequential: true, timedQs: true, allowQOvertime: true },