JavaScript Quiz with multiple questions

JavaScript
1

Hello,
Below I’ve made a small quiz with 4 questions but questions 2,3 and 4 are hidden with CSS you can try to remove the style from CSS (".pytja2,.pytja3,.pytja4{ display: none;}") and see to understand easier what I’m talking and also they’re with same positions all questions so change Top position of absolute or put a style of display: hidden to each question one by one and you will see them
I did that because I would show the next questions when I click on the button Next and then question 2 will show and after that click next button and show next question.
But there’s a problem that I have with question 2 it’s not showing and it doesn’t show any error in Console Log and I added on JavaScript a function that when I click button Next then the first question would be hidden and it would show next question, but I do not know what’s wrong.
https://codepen.io/beh4r/pen/eoVazb

2

There are a few things going on.

  • you are assigning an onclick to nextQuestion, but nextQuestion is an HTMLCollection (looks like an array, sort of) – you would need to assign the onclick to each member of that collection instead.
  • you compare nextQuestion to question – but again, they are BOTH HTMLCollections, rather than a unique entity. I might suggest, if .question1 is going to be used only once in the quiz, either use an id (for example, id="question1"), or change the way you select it (like, maybe let question1 = document.getElementsByClassName('question1')[0]; to get the FIRST element of that collection )
  • get rid of the absolute positioning on all the other question els – when you finally get them displaying, they’re WAY the heck far off the screen.
  • I might suggest you remove the display: none attribute from all the questions, and create a new class called .is-hidden' whose sole attribute is thedisplay: none;. Then, rather than toggling the style directly, you can simply doquestion1.classList.add(‘is-hidden’); question2.classList.remove(‘is-hidden’);`

Those should get you started anyway.

And by the way? Football has eight letters. Isn’t even an option in its multiple choices. :wink:

3

Yeah adding [0] i forget sometimes to do that, but i just added now and it does not work still ?
And about adding classlist .is-hidden looks more comfortable but just wanna try it with current style that i did to see if it works and would add classlist .is-hidden later, but still does not hide 1st question and show 2nd question ?

let question1 = document.getElementsByClassName('pytja1')[0];
let question2 = document.getElementsByClassName('pytja2')[0];
let question3 = document.getElementsByClassName('pytja3')[0];
let question4 = document.getElementsByClassName('pytja4')[0];
let nextQuestion = document.getElementsByClassName('bot');
let result = document.getElementsByClassName('bot-submit');


nextQuestion.onclick = function () {
    if (nextQuestion > question1) {
        question1.style.display = 'none'
        question2.style.display = 'block'
    }
}
4

Won’t work, because nextQuestion isn’t an element. It’s an HTML version of an array of elements. You’d have to do something like this:

// the following line turns the HTMLCollection into a true JS array
let nextQuestionBtns = new Array(...document.getElementsByClassName('bot') );

/***
 * We have to attach the listener to EACH button, not to the collection,
 *   So, we can use forEach to iterate over our array, and add the listener to the
 *   button itself.
 ***/
nextQuestionBtns.forEach( function(button) {
  // here you can attach the listeners:
  button.onclick = function(){
    // and here, you would check if this button is contained by the appropriate question
  }
})

Out of curiousity, why are you checking if nextQuestion is greater than question1? What do you think that is actually saying?

5

Oh i forgot about HTML element of nextQuestion maybe I will use an ID insteas of Class.
About “nextQuestion > question1”, i was thinking to use this because nextQuestion is button for next so it would be greater than current question and it will override somehow.
I am new to JS sine 4 months tried to use === but didn’t worked, you think with greater > is a mistake ?

6

well no – the next button is never the same as its containing element. Isn’t really GREATER than it either, though.

Try this:

// the following line turns the HTMLCollection into a true JS array
let nextQuestionBtns = new Array(...document.getElementsByClassName('bot') );

/***
 * We have to attach the listener to EACH button, not to the collection,
 *   So, we can use forEach to iterate over our array, and add the listener to the
 *   button itself.
 ***/
nextQuestionBtns.forEach( function(button) {
  // here you can attach the listeners:
  button.onclick = function(){
    // Take a look at the following - i want to find the div that contains this button.
    //    .closest('div') will get that, and I save the HTML el.
    let questionContainer = button.closest('div');

    // Now, we can compare the element we just found with our question elements!
    if (questionContainer === question1){
      // Here, the clicked 'next' button was in question1
    } else if(questionContainer === question2){
      // Here, the clicked 'next' button was in question2
    }
  }
})