Get the current element of list elements

JavaScript
1

hello everyone,
I’m would like to target the current element on a list elements to add a active class. But I not really know how to do this in a Literal object.

This is a Quiz with a Bullets navigation to show the length of question and on this bullets navigation is where i want to add an active class to show the current question.

here is my HTML:

<div class="grid">
    <div id="quiz" class="centered grid__col--8">
        <h1>Awesome Quiz</h1>

        <h2 id="question" class="headline-secondary--grouped"></h2>

        
        <button id="guess0" class="btn--default"><p id="choice0"></p></button>

        
        <button id="guess1" class="btn--default"><p id="choice1"></p></button>

       
        <button id="guess2" class="btn--default"> <p id="choice2"></p></button>

        
        <button id="guess3" class="btn--default"><p id="choice3"></p></button>

        <footer>
            <ol id="progress">Question x of y</ol>
        </footer>
    </div>
</div>

and my JS:

function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.currentQuestionIndex = 0;
}

Quiz.prototype.guess = function(answer) {
    this.currentQuestionIndex++;
};

Quiz.prototype.getCurrentQuestion = function() {
    return this.questions[this.currentQuestionIndex];
};

Quiz.prototype.hasEnded = function() {
    return this.currentQuestionIndex >= this.questions.length;
};

//questions
function Question(text, choices, answer) {
    this.text = text;
    this.choices = choices;
    this.answer = answer;
}

Question.prototype.isCorrectAnswer = function (choice) {
    return this.answer === choice;
};

//display the quiz
var QuizUI = {
    displayNext: function () {
        if (quiz.hasEnded()) {
            this.displayScore();
        } else {
            this.displayQuestion();
            this.displayChoices();
            this.displayProgress();
        }
    },
    displayQuestion: function() {
        this.populateIdWithHTML("question", quiz.getCurrentQuestion().text);
    },
    displayChoices: function() {
        var choices = quiz.getCurrentQuestion().choices;

        for(var i = 0; i < choices.length; i++) {
            this.populateIdWithHTML("choice" + i, choices[i]);
            this.guessHandler("guess" + i, choices[i]);
        }
    },
    displayScore: function() {
        var gameOverHTML = "<h1>Game Over</h1>";
        gameOverHTML += "<h2> Your score is: " + quiz.score + "</h2>";
        this.populateIdWithHTML("quiz", gameOverHTML);
    },
    
    populateIdWithHTML: function(id, text) {
        var element = document.getElementById(id);
        element.innerHTML = text;
    },
    guessHandler: function(id, guess) {
        var button = document.getElementById(id);
        button.onclick = function() {
            quiz.guess(guess);
            QuizUI.displayNext();
        }
    },
    
    displayProgress: function() {
        var currentQuestionNumber = quiz.currentQuestionIndex + 1;
        //this.populateIdWithHTML("progress", currentQuestionNumber + " of " + quiz.questions.length);   
         var progressHTML = '';
       
        for (i = 0; i < quiz.questions.length; i++) {
            progressHTML += '<li class="pagination" id="' + [i] + '"></li>';
           
        }
        
        this.populateIdWithHTML("progress", progressHTML);
    }
};
//Create Questions
var questions = [
    new Question('question 1?', ['answer a', 'answer b', 'answer c', 'answer d']),
    new Question('question 2?', ['answer a', 'answer b', 'answer c', 'answer d'])
];

//Create Quiz
var quiz = new Quiz(questions);

//Display Quiz
QuizUI.displayNext();
2

You can target the element by id, using the currentQuestionIndex.

3

Hi Ariel ! Thank you. I did this:

displayProgress: function() {
        var currentQuestionNumber = quiz.currentQuestionIndex + 1;
    
        for (i = 0; i < quiz.questions.length; i++) {
            progressHTML += '<li class="pagination" id="' + [i] + '"></li>';
           
        }
        if(quiz.currentQuestionIndex === true){
            document.getElementById('0').classList.toggle('active');
        }
        
        this.populateIdWithHTML("progress", progressHTML);
    }

But, it does not work … If I see in console console.log(quiz.currentQuestionIndex); I see the current Question but I don’t know how to use it to target the current dot and add the class active.
here is my code : https://codepen.io/Alanes/pen/vjjpwR?editors=1111

4

Well, your id for buttons is guess0 for example first question. For first dot is 0. You need to make where you say:
var dotId = $(".btn–default").attr(‘id’);
var dotIdLen = dotId.length;
var btnId = dotId .substring((dotIdLen-1),(dotIdLen));
$("#"+btnId).addClass(“active”);

First you gotta get your button id. Second, you determine said id’s length(example: guess0 have 6 letters length),
third take last letter by using substring method. You need to take last letter since its represent your id in dot.
Forth, used acquired id to set active class on a element with said id.
PS: Don’t forget to remove class from previous element …

5

Thank you for the answers!
I could go forwards with this project. But because this is OPP JS . I don’t really know how to do a reset button on this Quiz . I know I have to reset every HTML components that was created by var QuizUI = { } . You can see my code better here: https://codepen.io/Alanes/pen/vjjpwR?editors=0111