We're a team of developers that are passioned about web accessibility.
+
We truly belive that everyone should have an engaging and fair access to all content on the world wide
+ web.
+
+
+
+ This is the starting point.
- - + + + + + +We designed this quiz to be easy for everyone to use. It's keyboard friendly, screen reader ready and built + with clear text and strong contrast for better visibility.
+
+ ${message}
+ ` + messageContainer.style.display = 'flex' + messageContainer.hidden = false + // continue button + // if last question - show results + if (currentQuestionIndex === (questions.length - 1)) { + messageContainer.innerHTML += ` + + ` + } else { + // else - next question + messageContainer.innerHTML += ` + + ` + } + // set focus to continue button + const continueButton = messageContainer.querySelector('.continue-btn') + continueButton.focus() + // set event listener on the continue button based on the the message type + continueButton.addEventListener('click', () => { + // clear feedback message + messageContainer.innerHTML = '' + messageContainer.style.display = 'none' + messageContainer.hidden = true + // if last question - end quiz + if (currentQuestionIndex === (questions.length - 1)) { + endQuiz() + //announce to the screen reader + announcer.textContent = 'Moved to results section' + } else { + // else - go to next question + const nextQuestionIndex = (currentQuestionIndex + 1) + setActiveQuestion(nextQuestionIndex) + currentQuestionIndex = nextQuestionIndex + // update progress + updateProgress() + //announce to the screen reader + announcer.textContent = 'Moved to next question' + } + }) +} + +// update progress function +const updateProgress = () => { + const totalQuestions = (questions.length) + const answeredQuestions = currentQuestionIndex + 1 + const percentage = (answeredQuestions / totalQuestions) * 100 + // update progress bar + progressFill.style.width = `${percentage}%` + // update progress text + progressText.textContent = `Question ${answeredQuestions} of ${totalQuestions}` + // announce to screen reader + announcer.textContent = `Question ${answeredQuestions} of ${totalQuestions}` +} + +// end quiz +const endQuiz = () => { + // hide quiz + quiz.hidden = true + // show results + resultsContainer.innerHTML = ` +
+ Thank you for taking the quiz! We hope you learned something about web accessibility.
+Your score: ${score} of ${questions.length}
+ + ` + resultsContainer.style.display = 'flex' + resultsContainer.hidden = false + resultsContainer.scrollIntoView({ behaviour: 'smooth' }) + // set focus to button + const continueButton = resultsContainer.querySelector('.continue-btn') + continueButton.focus() + continueButton.scrollIntoView({ behaviour: 'smooth' }) + // set event listener to take the quiz again + continueButton.addEventListener('click', () => { + // reset current question index + currentQuestionIndex = 0 + // reset results + score = 0 + // clear container + resultsContainer.innerHTML = '' + resultsContainer.style.display = 'none' + // uncheck all radio options + questions.forEach((question) => { + const radios = question.querySelectorAll('input[type="radio"]') + radios.forEach((option) => { + option.checked = false + }) + }) + // start quiz + startQuiz() + }) + + +} + +// start quiz when start button is selected +startQuizButton.addEventListener('click', startQuiz) + +// check answer when submit button is selected +submitButtons.forEach(button => { + button.addEventListener('click', (e) => { + e.preventDefault() // prevent page reload + checkAnswer() + }) +}) + +// event listener to handle keyboard input for questions +questions.forEach((question) => { + const radioGroup = question.querySelector('.answer-options') + // add event listener on the radio group + radioGroup.addEventListener('keydown', (event) => { + const optionInFocus = radioGroup.querySelector(":focus") + // let the user select option by pressing a,b, or c + // enter or space to select the option in focus + switch (event.key) { + case 'a': + case 'A': + event.preventDefault() + question.querySelector('input[value="a"]').checked = true + question.querySelector('input[value="a"]').focus() + break + case 'b': + case 'B': + event.preventDefault() + question.querySelector('input[value="b"]').checked = true + question.querySelector('input[value="b"]').focus() + break + case 'c': + case 'C': + event.preventDefault() + question.querySelector('input[value="c"]').checked = true + question.querySelector('input[value="c"]').focus() + break + case 'Enter': + event.preventDefault() + optionInFocus.checked = true + break + } + + }) + +}) + diff --git a/todo.md b/todo.md new file mode 100644 index 0000000..4998662 --- /dev/null +++ b/todo.md @@ -0,0 +1,6 @@ +# To do + +## Branches CSS: + +header & footes: +introduction \ No newline at end of file