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