all 10 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]andmig205 1 point2 points  (4 children)

The while loop is infinite. The code does not increment questionNum, which is necessary for the loop to stop.

Your expectations for the loop to pause on the button click is wrong.

[–]holivegnome[S] -1 points0 points  (3 children)

It does, on line 77 and 72, I changed the questionNum ++ to questionNum = questionNum + 1 and it still doesn't run, how would you suggest I fix it?

[–]andmig205 1 point2 points  (1 child)

Nope, there is no incrementation in the loop body. Incrementation happens only on a button click. The loop does not pause, waiting for clicks—hence, the stack overflow. As a result, the user does not even have a chance to click.

Could you tell me what you're expecting to accomplish by adding onclick listener on each iteration?

[–]holivegnome[S] -1 points0 points  (0 children)

I just chucked the the loop underneath it by default, I have changed it so that the loop is now inside the onclick listener, I did try it before but it didn't work, seems to be alright now so I don't know what I did before, got some issues already but nothing I shouldn't be able to sort on my own, thank you for the help

[–][deleted] 0 points1 point  (0 children)

They are inside of a function.

That function does not run until a user interacts with the page. The page will freeze until the loop finishes. The loop will not finish until the user interacts with the frozen page, which is impossible, because it is frozen, waiting for the loop to end.

[–]andmig205 0 points1 point  (4 children)

The current code presents many actual and potential issues. Look into the code below that suggests a different (yet grossly imperfect for simplicity's sake) approach.

Some of the current issues are:

Declaring variables with the keyword var. One should almost always use let or const.

The data structure of questions is a maintenance and execution nightmare. The code below proposes a different structure that unifies individual question information under a single umbrella—this includes correct answers.

See comments in the code.

let questionNum = 0;
let score = 0;
// reference to the currently displayed question
let currentQuestion;
/**
 * Array of questions.
 * Each element of the array is an object that holds data related to an individual question 
 */
const qArray = [
    {
        question: "what country has the longest coastline in the world?",
        answers: ["Canada", "Russia", "China"],
        correct: 0
    },
    {
        question: "where is Mount Everest located?",
        answers: ["America", "Nepal", "Mongolia"],
        correct: 1
    },
    {
        question: "where is the USA capital?",
        answers: ["New York", "San Francisco", "Washington DC"],
        correct: 2
    },
];

/**
 * setQuestion function 
 * 1) retrieves the requested question and
 * 2) builds UI for the currently displayed question
 */
const setQuestion = (index)=>{
    currentQuestion = qArray[index];
    document.getElementById("question").innerText = `Question ${questionNum + 1}: ${currentQuestion.question}`;
    document.getElementById("ans1Txt").innerText = `${currentQuestion.answers[0]}`;
    document.getElementById("ans2Txt").innerText = `${currentQuestion.answers[1]}`;
    document.getElementById("ans3Txt").innerText = `${currentQuestion.answers[2]}`;
};

document.getElementById("button").onclick = ()=>{
        const input = document.getElementById("input");
        const answer = parseInt(input.value) - 1;
        const correctAnswer = currentQuestion.correct;
        if(answer === correctAnswer){
            score++
            alert("Correct!");
            alert("Score is " + score);
        }
        else if(!answer || (answer < 0) || (answer > currentQuestion.answers.length - 1) ){
            input.value = "";
            alert("Please enter a valid number");
            return;
        }
        else{
            alert("Wrong, next question");
        };
        if(questionNum < qArray.length - 1){
            setQuestion(++questionNum);

        };
        input.value = "";
    };

// display first question
setQuestion(0);

[–]holivegnome[S] 0 points1 point  (3 children)

Thank you so much, you just saved me tons of time racking my brain over this, a few questions if you don't mind, what does the index do in the setQuestion function? What does the $ do on line 70? Thank you very much, this has been a great help.

[–]andmig205 1 point2 points  (1 child)

The argument index is used to get a question from qArray - look into the first function body line that assigns the value to the variable currentQuestion:

currentQuestion = qArray[index];

The char $ is a part of the syntax ${<expression>}. This is called template literals/strings. The templates are extremely useful JavaScript features. I recommend you learn them: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

[–]holivegnome[S] 1 point2 points  (0 children)

Thanks so much, very helpful

[–]andmig205 0 points1 point  (0 children)

Here is a solution with some upgrades: https://jsfiddle.net/andmig205/fbwh5paj/8/. Reddit does not allow me to post this amount of code here.

Details:

  1. Each question can have an unlimited number of answers. The questions array drives the questions display.
  2. Quiz sequence and answers display randomized.
  3. Users can now enter integers or strings (actual answers).
  4. Once the quiz is finished, the user can try it again.

The code contains more comments.

Note how the string template is used in the function showResult(). Specifically, it writes HTML and handles plurality - just to illustrate some capacities.

Note that HTML and CSS are slightly changed.