From 08dc1d9511ff69045a5405228eda9b8a9b0eca91 Mon Sep 17 00:00:00 2001 From: dustin-jw Date: Wed, 18 Oct 2023 12:38:18 -0600 Subject: [PATCH] refactor: pull most logic into helper functions/files --- src/js/game-selection.js | 32 +------------- .../{questions.js => get-questions.js} | 0 .../helpers/intercept-category-navigation.js | 31 +++++++++++++ src/js/helpers/multiple-choice-options.js | 38 ++++++++++++++++ src/js/helpers/randomize-answers.js | 14 ++++++ src/js/helpers/short-answer-form.js | 24 ++++++++++ src/js/multiple-choice.js | 44 ++----------------- src/js/short-answer.js | 16 +------ 8 files changed, 113 insertions(+), 86 deletions(-) rename src/js/helpers/{questions.js => get-questions.js} (100%) create mode 100644 src/js/helpers/intercept-category-navigation.js create mode 100644 src/js/helpers/multiple-choice-options.js create mode 100644 src/js/helpers/randomize-answers.js create mode 100644 src/js/helpers/short-answer-form.js diff --git a/src/js/game-selection.js b/src/js/game-selection.js index 4378c95..976731f 100644 --- a/src/js/game-selection.js +++ b/src/js/game-selection.js @@ -1,33 +1,3 @@ -import { getQuestions, getRelevantQuestions } from './helpers/questions'; - -const interceptCategoryNavigation = async () => { - sessionStorage.removeItem('questions'); - sessionStorage.removeItem('questionStatus'); - const questions = await getQuestions(); - const links = document.querySelectorAll('.cmp-categories__link'); - - links.forEach((link) => { - link.addEventListener('click', (event) => { - event.preventDefault(); - - const relevantQuestions = getRelevantQuestions( - questions, - link.dataset.category, - link.dataset.type === 'Multiple Choice' - ); - - const questionOrder = Array.from( - { length: relevantQuestions.length }, - (_item, index) => `${link.dataset.baseLink}${index + 1}/` - ).sort(() => (Math.random() > 0.5 ? 1 : -1)); - - sessionStorage.setItem('questions', JSON.stringify(questionOrder)); - - sessionStorage.setItem('currentQuestionIndex', '0'); - - window.location.href = questionOrder[0]; - }); - }); -}; +import { interceptCategoryNavigation } from './helpers/intercept-category-navigation'; interceptCategoryNavigation(); diff --git a/src/js/helpers/questions.js b/src/js/helpers/get-questions.js similarity index 100% rename from src/js/helpers/questions.js rename to src/js/helpers/get-questions.js diff --git a/src/js/helpers/intercept-category-navigation.js b/src/js/helpers/intercept-category-navigation.js new file mode 100644 index 0000000..288c624 --- /dev/null +++ b/src/js/helpers/intercept-category-navigation.js @@ -0,0 +1,31 @@ +import { getQuestions, getRelevantQuestions } from './get-questions'; + +export const interceptCategoryNavigation = async () => { + sessionStorage.removeItem('questions'); + sessionStorage.removeItem('questionStatus'); + const questions = await getQuestions(); + const links = document.querySelectorAll('.cmp-categories__link'); + + links.forEach((link) => { + link.addEventListener('click', (event) => { + event.preventDefault(); + + const relevantQuestions = getRelevantQuestions( + questions, + link.dataset.category, + link.dataset.type === 'Multiple Choice' + ); + + const questionOrder = Array.from( + { length: relevantQuestions.length }, + (_item, index) => `${link.dataset.baseLink}${index + 1}/` + ).sort(() => (Math.random() > 0.5 ? 1 : -1)); + + sessionStorage.setItem('questions', JSON.stringify(questionOrder)); + + sessionStorage.setItem('currentQuestionIndex', '0'); + + window.location.href = questionOrder[0]; + }); + }); +}; diff --git a/src/js/helpers/multiple-choice-options.js b/src/js/helpers/multiple-choice-options.js new file mode 100644 index 0000000..6a14377 --- /dev/null +++ b/src/js/helpers/multiple-choice-options.js @@ -0,0 +1,38 @@ +const getOptionButtons = () => { + return document.querySelectorAll('.js-multiple-choice'); +}; + +const handleOptionButtonClick = (event) => { + const isPressed = event.target.getAttribute('aria-pressed') === 'true'; + const isCorrect = event.target.dataset.correct === 'true'; + + const optionButtons = getOptionButtons(); + const explanation = document.querySelector('.js-explanation'); + const explanationSection = document.querySelector('.js-explanation-section'); + + if (!explanation || !explanationSection) { + return; + } + + const explanationContent = explanation.innerHTML; + + optionButtons.forEach((button) => { + button.setAttribute('aria-pressed', 'false'); + }); + + event.target.setAttribute('aria-pressed', isPressed ? 'false' : 'true'); + explanationSection.innerHTML = `

+ ${isCorrect ? 'Correct' : 'Incorrect'} +

${explanationContent}`; + explanationSection.focus(); +}; + +export const initializeOptionClickListeners = () => { + const optionButtons = getOptionButtons(); + + optionButtons.forEach((button) => { + button.addEventListener('click', handleOptionButtonClick); + }); +}; diff --git a/src/js/helpers/randomize-answers.js b/src/js/helpers/randomize-answers.js new file mode 100644 index 0000000..5737ba0 --- /dev/null +++ b/src/js/helpers/randomize-answers.js @@ -0,0 +1,14 @@ +export const randomizeAnswers = () => { + const multipleChoiceItems = document.querySelectorAll( + '.cmp-multiple-choice__item[data-needs-js]' + ); + const randomizedOrder = Array.from(multipleChoiceItems).sort(() => + Math.random() > 0.5 ? 1 : -1 + ); + const multipleChoiceItemsContainer = document.querySelector( + '.cmp-multiple-choice' + ); + randomizedOrder.forEach((element) => { + multipleChoiceItemsContainer.append(element); + }); +}; diff --git a/src/js/helpers/short-answer-form.js b/src/js/helpers/short-answer-form.js new file mode 100644 index 0000000..2c9d2a7 --- /dev/null +++ b/src/js/helpers/short-answer-form.js @@ -0,0 +1,24 @@ +const revealAcceptedAnswer = (event) => { + event.preventDefault(); + + const acceptedAnswer = document.querySelector('#acceptedAnswer'); + const acceptedAnswerSection = document.querySelector( + '#acceptedAnswerSection' + ); + + if (!acceptedAnswer || !acceptedAnswerSection) { + return; + } + + const acceptedAnswerContent = acceptedAnswer.innerHTML; + acceptedAnswerSection.innerHTML = acceptedAnswerContent; + acceptedAnswerSection.focus(); +}; + +export const initializeAnswerFormListener = () => { + const answerForm = document.querySelector('#answerForm'); + + if (answerForm) { + answerForm.addEventListener('submit', revealAcceptedAnswer); + } +}; diff --git a/src/js/multiple-choice.js b/src/js/multiple-choice.js index 0547010..63b6856 100644 --- a/src/js/multiple-choice.js +++ b/src/js/multiple-choice.js @@ -1,45 +1,7 @@ +import { randomizeAnswers } from './helpers/randomize-answers'; import { updatePaginationLinks } from './helpers/update-pagination-links'; +import { initializeOptionClickListeners } from './helpers/multiple-choice-options'; -const optionButtons = document.querySelectorAll('.js-multiple-choice'); -const explanation = document.querySelector('.js-explanation'); -const explanationSection = document.querySelector('.js-explanation-section'); - -const handleOptionButtonClick = (event) => { - const isPressed = event.target.getAttribute('aria-pressed') === 'true'; - const isCorrect = event.target.dataset.correct === 'true'; - const explanationContent = explanation.innerHTML; - - optionButtons.forEach((button) => { - button.setAttribute('aria-pressed', 'false'); - }); - - event.target.setAttribute('aria-pressed', isPressed ? 'false' : 'true'); - explanationSection.innerHTML = `

- ${isCorrect ? 'Correct' : 'Incorrect'} -

${explanationContent}`; - explanationSection.focus(); -}; - -optionButtons.forEach((button) => { - button.addEventListener('click', handleOptionButtonClick); -}); - -const randomizeAnswers = () => { - const multipleChoiceItems = document.querySelectorAll( - '.cmp-multiple-choice__item[data-needs-js]' - ); - const randomizedOrder = Array.from(multipleChoiceItems).sort(() => - Math.random() > 0.5 ? 1 : -1 - ); - const multipleChoiceItemsContainer = document.querySelector( - '.cmp-multiple-choice' - ); - randomizedOrder.forEach((element) => { - multipleChoiceItemsContainer.append(element); - }); -}; - +initializeOptionClickListeners(); randomizeAnswers(); updatePaginationLinks(); diff --git a/src/js/short-answer.js b/src/js/short-answer.js index b52c664..325caee 100644 --- a/src/js/short-answer.js +++ b/src/js/short-answer.js @@ -1,17 +1,5 @@ +import { initializeAnswerFormListener } from './helpers/short-answer-form'; import { updatePaginationLinks } from './helpers/update-pagination-links'; -const answerForm = document.querySelector('#answerForm'); -const acceptedAnswer = document.querySelector('#acceptedAnswer'); -const acceptedAnswerSection = document.querySelector('#acceptedAnswerSection'); - -const handleShortAnswerFormSubmit = (event) => { - event.preventDefault(); - - const acceptedAnswerContent = acceptedAnswer.innerHTML; - acceptedAnswerSection.innerHTML = acceptedAnswerContent; - acceptedAnswerSection.focus(); -}; - -answerForm.addEventListener('submit', handleShortAnswerFormSubmit); - +initializeAnswerFormListener(); updatePaginationLinks();