Is this an ideal solution?

JavaScript
1 
/* Checks your answer */
const checkAnswer = (choice) => {
    console.log("CHECKING...");
    const answer = +choice.id.split("-")[1];
    const isCorrect = answer === currentQuestion.answer;
    const classToApply = (isCorrect) ? "correct" : "incorrect";
    
    choice.parentElement.classList.add(classToApply);
    result.classList.add(classToApply);
    result.innerText = (isCorrect) ? "CORRECT" : "INCORRECT";
    result.classList.remove("hidden");
    const extraComment = currentQuestion.hasOwnProperty("extra-commentary");
    extraComments.innerText = (extraComment) ? currentQuestion["extra-commentary"] : "";
    if (extraComment){
        extraComments.classList.remove('hidden');
    }
    numberCorrect += isCorrect ? 1 : 0;
    
    continueBtn.classList.remove("hidden");
    submitBtn.classList.add('hidden');

    continueBtn.addEventListener("click", () => {
        submitBtn.classList.remove('hidden');
        continueBtn.classList.add("hidden");

        choice.parentElement.classList.remove(classToApply);
        result.innerText = "";
        result.classList.remove(classToApply);
        extraComments.innerText = "";
        result.classList.add('hidden');
        nextQuestion();
    })
}

Due to the wonkiness of my code for my quiz project, I’m forced to put my event listener in this function. Is this ideal, or would this (I assume) lead to breaking errors down the line?

For context, here’s my website on Github pages: Quiz Project

2

when does checkAnswer execute? I do not see it called

3

Right, so here’s the whole code for the file when that piece of code was used.

let currentQuestion = {};
let questionCounter = 0;
let availableQuestions = [];
let totalQuestions = 0;
let numberCorrect = 0;


let questions = [];
// TEXT POINTERS
const questionText = document.getElementById("question");
const questionNumber = document.getElementById("question-number");
const result = document.getElementById('result');
const extraComments = document.getElementById('extra-commentary');

// CHOICE POINTERS
const choices = [...document.getElementsByClassName('choice')];
const submitBtn = document.getElementById('submit');
const continueBtn = document.getElementById('continue')

let MAX_QUESTIONS = 8;

//Booleans
let acceptingAnswers = true;

// Set Questions
const fetchQuestions = async (link) => {
    try{
        const res = await fetch(link);
        const data = await res.json();
        console.log("L:", data.length);
        return data;
    } catch (err){
        console.error("ERROR OCCURED!", err);
    }
}


/* Starts the game. */
function startQuiz() {
    questionCounter = 0;

    availableQuestions = [...questions];
    MAX_QUESTIONS = availableQuestions.length;
    nextQuestion();
}

const setQuestionSet = async () => {
    const quizType = JSON.parse(localStorage.getItem("quizType"));
    
    switch (quizType){
        case "algebra":
            questions = await fetchQuestions("../json/algebraQuestions.json");
            
            break;
        case "vocabulary":
            questions = await fetchQuestions("../json/vocabQuestions.json");
            
            break;
        case "history":
            questions = await fetchQuestions("../json/historyQuestions.json");
            
            console.log("Questions");
            break;
        default:
            questions = [];
    }
    
    startQuiz();
}

setQuestionSet();


/* Leads to the next question. */
const nextQuestion = () => {
    questionCounter++;
    
    if (questionCounter > MAX_QUESTIONS || availableQuestions.length === 0){
        localStorage.setItem("percentage", JSON.stringify(100 * (numberCorrect / totalQuestions).toFixed(4)));
        window.location.assign("./results.html");
    } else {
    
        totalQuestions++;

        //Render Question
        const questionIndex = Math.floor(Math.random() * availableQuestions.length);
        currentQuestion = availableQuestions[questionIndex];

        questionNumber.innerText = `Q${questionCounter}`;
        questionText.innerText = currentQuestion.question;
        choices.forEach((choice, index) => {
            choice.innerText = currentQuestion[`choice${index + 1}`];
        });

        availableQuestions.splice(questionIndex, 1);

        acceptingAnswers = true;
    }
    
}

/* Checks your answer */
const checkAnswer = (choice) => {
    console.log("CHECKING...");
    const answer = +choice.id.split("-")[1];
    const isCorrect = answer === currentQuestion.answer;
    const classToApply = (isCorrect) ? "correct" : "incorrect";
    
    choice.parentElement.classList.add(classToApply);
    result.classList.add(classToApply);
    result.innerText = (isCorrect) ? "CORRECT" : "INCORRECT";
    result.classList.remove("hidden");
    const extraComment = currentQuestion.hasOwnProperty("extra-commentary");
    extraComments.innerText = (extraComment) ? currentQuestion["extra-commentary"] : "";
    if (extraComment){
        extraComments.classList.remove('hidden');
    }
    numberCorrect += isCorrect ? 1 : 0;
    
    continueBtn.classList.remove("hidden");
    submitBtn.classList.add('hidden');

    continueBtn.addEventListener("click", () => {
        submitBtn.classList.remove('hidden');
        continueBtn.classList.add("hidden");

        choice.parentElement.classList.remove(classToApply);
        result.innerText = "";
        result.classList.remove(classToApply);
        extraComments.innerText = "";
        result.classList.add('hidden');
        nextQuestion();
    })
}


submitBtn.addEventListener("click", () => {
    if (!acceptingAnswers) return;

    acceptingAnswers = false;
    checkAnswer(document.querySelector(".choice-container > input[type='radio']:checked"));
})
4

It’s…a bit outdated at this point. I already changed the code such that the continue button event listener is now in the global scope, and I adjusted some code (i.e. making the classToApply variable global) such that the event listener works.

But I still would like to know if that old code would still work fine or if there would be a big problem leaving it like that down the line.

5

is this a curriculum project? if yes please share the link

anyway, please share all the code needed to reproduce the issue, I can’t run that code without html

6

No, actually. It’s actually a project I’m making on VSC, exported to Github.

Here’s the link to that. GitHub - Noviphyte-Wanderer/Quiz-Project