Stuck on some part of process of making quiz

image

Question box says undefine despite giving shuffle the value of theQuestions which is connected to

image

image

Idk how to put into words, so I just put up ss. Sorry if it seems low effort.

so what does setQuestion() do?

I don’t see how anyone can help when you just post snippets of your code. We need to see all your code, not as an image but posted in your post.

1 Like

I mean, I can take a wild stab and guess that it’s because he’s added an extra s to the questionss property of his object, but… :wink:

1 Like

Bruh, I thought I added the codepen.

theQuestions is an array.

question2.innerText = shuffle.questionss;
=>
question2.innerText = shuffle[0].questionss;

(though, to be more faithful to the idea of “showQuestion”, you might want to instead pass in just the selected question, rather than the whole array.)

1 Like

Hi Growly,

Just wanted to say, your code is looking better now that you are using CSS and have worked on the variable names :slight_smile:

With regards the showQuestion function, you could have the answer buttons in place in your html instead.

<div class="quiz">
   <div class="question hidden">set question</div>
   <div class="answers hidden">
       <!-- buttons here instead -->
       <button class='answer-01'>answer-01</button>
       <button class='answer-02'>answer-02</button>
       <button class='answer-03'>answer-03</button>
       <button class='answer-03'>answer-04</button>
   </div>
   <button class="start">Start quiz</button>
   <button class="next hidden">Next Question</button>
</div>

This would save you having to create button elements each time. So instead of this

function showQuestion(shuffle) {
    question2.innerText = shuffle[0].questionss;
    question.Answers.forEach((element) => {
        const buttons = document.createElement("button");
        buttons.innerText = element.text;
        buttons.addEventListener("click", select);

        answer.append(buttons);
    });
}

You just change the text on the existing buttons

const answerButtons = document.querySelectorAll(".answers button");

function startQuiz() {
    ...
    // add the click eventListeners here perhaps?
    answerButtons.forEach(function(button) {
        button.addEventListener('click', selectAnswer);
    })
    ...
}
...

// just change the text, that's it.
function showQuestion(currentQuestion) {
    question.innerText = currentQuestion.question;
  
    answerButtons.forEach((button, i) => {
        button.innerText = currentQuestion.answers[i];
    });
}

I have had a bit of a play around in codepen with your code. By no means a finished article, but that’s for you to work out :slight_smile:

1 Like

I don’t know what I did wrong here, it only loops the first answer to all 4 answer buttons.

image

this
image

With the forEach loop with the buttons, you can give it a second parameter of index, and use that index on the Answers array to obtain the appropriate text from that.

Growly it is worth looking at documentation for these things

Sometimes you will find parameters, options and return values for Javascripts built-in functions that you never knew about.

I did post an example above which does as Paul is suggesting.

// just change the text, that's it.
function showQuestion(currentQuestion) {
    question.innerText = currentQuestion.question;
    // notice the 'i' after 'button
    answerButtons.forEach((button, i) => {
        // used as an index on currentQuestion.answers[i];
        button.innerText = currentQuestion.answers[i];
    });
}
2 Likes

haha! I was doing guess work because I didn’t know the full concept of arrays.

1 Like

Unfortunately, you will not do it because this movie is in the background, but with foreach you can give it a second parameter, there are many other applications that can do this