refactor: pull most logic into helper functions/files

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();

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];
+    });
+  });
+};

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 = `<h3 class="cmp-explanation-section__title cmp-explanation-section__title--${
+    isCorrect ? 'correct' : 'incorrect'
+  }">
+    ${isCorrect ? 'Correct' : 'Incorrect'}
+  </h3>${explanationContent}`;
+  explanationSection.focus();
+};
+
+export const initializeOptionClickListeners = () => {
+  const optionButtons = getOptionButtons();
+
+  optionButtons.forEach((button) => {
+    button.addEventListener('click', handleOptionButtonClick);
+  });
+};

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);
+  });
+};

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);
+  }
+};

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 = `<h3 class="cmp-explanation-section__title cmp-explanation-section__title--${
-    isCorrect ? 'correct' : 'incorrect'
-  }">
-    ${isCorrect ? 'Correct' : 'Incorrect'}
-  </h3>${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();

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();