CODEWITHSUNDEEP
javascripthtml
Liam
Liam

Reputation: 568

How can create next and previous button's to select questions in a quiz using an array to store the questions which are objects?

//Constructor for all of the questions
//A function to check if the question is correct
class Question {
    constructor(question, ansA, ansB, ansC, ansD, answer) {
        this.question = question;
        this.ansA = ansA;
        this.ansB = ansB;
        this.ansC = ansC;
        this.ansD = ansD;
        this.answer = answer;
    }

    checkAns(ansSelected, answer){
        if(ansSelected === answer){
            console.log('Well Done')
        }
    }
};

//The questions themselves 
var questionOne = new Question('Where is Creete?', 'Barcalona', 'Greece', 'Dubi', 'Ireland', 'Greece');

var questionTwo = new Question('How many times have Liverppool won the Champions Legue?', '1', '4', '6', '5', '6',);

//Array to store the questions
const arrayQuestion = [questionOne, questionTwo];

const i = 0;
//Displaying the questions in HTML
document.getElementById('question').innerHTML += arrayQuestion[i].question;
document.getElementById('A').innerHTML += arrayQuestion[i].ansA;
document.getElementById('B').innerHTML += arrayQuestion[i].ansB;
document.getElementById('C').innerHTML += arrayQuestion[i].ansC;
document.getElementById('D').innerHTML += arrayQuestion[i].ansD;
html {
  box-sizing: border-box;
  font-weight: 200;
}

*, *:before, *:after {
  box-sizing: inherit;
}

button{
    background: blue;
    padding: 1.2em;
    margin: 1.2em;
}
<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title></title>
    </head>

    <body>

        <form>
            <h2 id="question"></h2>
            <button id="A" class="userSelection"></button>
            <button id="B" class="userSelection"></button>
            <button id="C" class="userSelection"></button>
            <button id="D" class="userSelection"></button>
            <button id="p" class="userSelection">P</button>
            <button id="n" class="userSelection">N</button>

        </form>
    </body>
    <script src = js/app.js></script>
</html>

So I am making a quiz and every questions is a separate object made from a constructor.

The questions are stored in a array.

I would like to create a next and previous button, so the user can cycle through the questions dynamically.

So I have tried using the onClick() I though if I just incremented the i variable it would display the next question. 

n.addEventListener("click", next);

function next (){
    i++;
}

There was no error above the questions did not change/would not appear (This was because I had not declared the variable i yet.

The HTML should just switch to display the next question in the Array.

Upvotes: 1

Views: 789

Answers (1)

noname
noname

Reputation: 565

so what I think you can do is, in your next and prev method you have to also update html with new values after you increment i so it should looks something like

function next (){
    i++;
renderHTMLwithNewValues(i);
}

function prev (){
    i--;
renderHTMLwithNewValues(i);
}


function renderHTMLwithNewValues(i){

document.getElementById('question').innerHTML = arrayQuestion[i].question;
document.getElementById('A').innerHTML = arrayQuestion[i].ansA;
document.getElementById('B').innerHTML = arrayQuestion[i].ansB;
document.getElementById('C').innerHTML = arrayQuestion[i].ansC;
document.getElementById('D').innerHTML = arrayQuestion[i].ansD;
}

to make sure new values are rendered each time you click button

Upvotes: 1

Related Questions