Source: questionnaire.js

// questionnaire.html onload module script

// Make sure to document our code
// See examples:
// - https://jsdoc.app/howto-es2015-modules.html
// - https://jsdoc.app/howto-es2015-classes.html

// upon loading, call updatenoodle, passing in the noodleIndex from local storage
document.addEventListener('DOMContentLoaded', init);
const QUESTIONS = 10; // Questionnaire Length

/** On load function */
function init() {
	resetQuestionnare();
	questionsHandler();
	gradeQuiz();

	// Set an event listener for #reset button to make the first question reappear
	// and uncheck the all radio buttons from all questions.
	const resetButton = document.querySelector('#reset');
	resetButton.addEventListener('click', function () {
		resetQuestionnare();
	});
}

/**
 * Reset the questionnaire view
 */
function resetQuestionnare() {
	// Hide all questions except the first one.
	const questions = document.querySelectorAll('.question');

	questions[0].style.display = 'block';
	questions[0].classList.add('fade-in');
	questions[0].classList.remove('fade-out');

	// Set the first question number to 1
	questions[0].style.setProperty('--question-percent', "'0%'");

	for (let i = 1; i < questions.length; i++) {
		questions[i].style.display = 'none';

		// Remove fade-in and fade-out classes
		questions[i].classList.remove('fade-in');
		questions[i].classList.remove('fade-out');
	}

	// Uncheck all radio buttons
	const answers = document.getElementsByName('qRadio');

	for (let i = 0; i < answers.length; i++) {
		answers[i].checked = false;
	}

	// Reset progress bar
	const progressBar = document.querySelector('#progressBar');
	progressBar.style.display = 'block';

	const progress = document.querySelector('#barStatus');
	progress.style.width = '0%';

	// Hide submit button
	const submitButton = document.querySelector('#submit');
	submitButton.style.display = 'none';
}

/**
 * Fade-in Fade-out animation for the questions and update the progress bar
 */
function questionsHandler() {
	// Set an event listener for each .question to fade out and remove from display, and fade in the next adjacent question.
	const questions = document.querySelectorAll('.question');

	for (let i = 0; i < questions.length; i++) {
		const question = questions[i];
		const inputs = question.querySelectorAll('input');

		for (let j = 0; j < inputs.length; j++) {
			const input = inputs[j];

			input.addEventListener('click', function () {
				question.classList.add('fade-out');
				question.style.display = 'none';

				// Incrementally update progress bar for the questionnaire after each question is answered with animation.
				const progress = document.querySelector('#barStatus');
				const progressWidth = progress.style.width;
				let progressWidthNum = parseInt(
					progressWidth.substring(0, progressWidth.length - 1)
				);
				const newWidth = progressWidthNum + 10;

				const id = setInterval(function () {
					if (progressWidthNum >= newWidth) {
						clearInterval(id);
					} else {
						// Increase the speed of the progress bar like a car accelerating
						progressWidthNum += 0.5;
						progress.style.width = progressWidthNum + '%';
					}
				}, 10);

				if (question.nextElementSibling) {
					question.nextElementSibling.classList.add('fade-in');
					question.nextElementSibling.style.display = 'block';

					question.nextElementSibling.style.setProperty(
						'--question-percent',
						"'" + newWidth + "%'"
					);

					setTimeout(function () {
						question.nextElementSibling.classList.remove('fade-in');
					}, 1000);
				}
			});
		}
	}

	// Show submit button and hide progress bar when the last question is answered.
	const submitButton = document.querySelector('#submit');
	const progress = document.querySelector('#progressBar');
	const lastQuestion = questions[questions.length - 1];
	const lastInputs = lastQuestion.querySelectorAll('input');

	for (let i = 0; i < lastInputs.length; i++) {
		const lastInput = lastInputs[i];

		lastInput.addEventListener('click', function () {
			submitButton.style.display = 'initial';
			progress.style.display = 'none';
		});
	}
}

/**
 * Grades the quiz and returns the closest personality.
 */
function gradeQuiz() {
	const submitButton = document.querySelector('#submit');

	submitButton.addEventListener('click', function () {
		const link = document.querySelector('#next');
		const answers = document.getElementsByName('qRadio');
		let answerCnt = 0;
		let pnts = 0;

		// Go through each question and tally up the points.
		for (let i = 0; i < answers.length; i++) {
			if (answers[i].checked) {
				const response = answers[i].className;

				if (response == 'negative') {
					pnts += 1;
					answerCnt++;
				} else if (response == 'slightlyNegative') {
					pnts += 2;
					answerCnt++;
				} else if (response == 'neutral') {
					pnts += 3;
					answerCnt++;
				} else if (response == 'slightlyPositive') {
					pnts += 4;
					answerCnt++;
				} else if (response == 'positive') {
					pnts += 5;
					answerCnt++;
				}
			}
		}

		// Makes sure the user has answered all the questions.
		if (answerCnt != QUESTIONS) {
			alert('You have not answered all the questions.');
		} else {
			const hash = pnts % 12;
			localStorage.setItem('myNoodleIndex', hash);
			link.setAttribute('href', './noodlesResults.html');
		}
	});
}