lundi 19 octobre 2020

I need a help for how my given code are actually working

Currently I'm working on a simple Quiz project using JS. This code is actually copied from internet for learning purpose. The logic of one section of this code is not understanding. Could you help me please ?

Fig.1

for loop statement for getting each of the choices for the question When the variable acceptingAnswers = true I can select multiple choice from the list of choices as shown below.

Fig.2

Ability to select multiple choice from the list of choices. Whereas, when the same variable value set to false I could select only one choice as normal.

Fig.3

Single selection of choice when the variable acceptingAnswers set to false

My question is that, what's the login behind of this code? In other words, how does the If statement given in Fig.1 actually works ? I understand the use of that block of code but not able to trace the program. Please explain the logic and working of that part.

Full JS code is here const question = document.getElementById('question'); const choices = Array.from(document.getElementsByClassName('choice-text'));

let questionCounter = 0;
let score           = 0;
let availableQuestions = [];
let currentQuestion = {};
let acceptingAnswers = false;

let questions = [

    {
    question: 'Inside which HTML element do we put the JavaScript??',
    choice1: '<script>',
    choice2: '<javascript>',
    choice3: '<js>',
    choice4: '<scripting>',
    answer: 1,
},
{
    question:
        "What is the correct syntax for referring to an external script called 'xxx.js'?",
    choice1: "<script href='xxx.js'>",
    choice2: "<script name='xxx.js'>",
    choice3: "<script src='xxx.js'>",
    choice4: "<script file='xxx.js'>",
    answer: 3,
},
{
    question: " How do you write 'Hello World' in an alert box?",
    choice1: "msgBox('Hello World');",
    choice2: "alertBox('Hello World');",
    choice3: "msg('Hello World');",
    choice4: "alert('Hello World');",
    answer: 4,
},

];

//constants

const CORRECT_BONUS = 10;
const MAX_QUESTION  = 3;

startgame = () =>{

questionCounter = 0;
score           = 0;
availableQuestions = [...questions];
getNewQuestion();    

};

getNewQuestion = () =>{

    if(availableQuestions.length === 0 || questionCounter >= MAX_QUESTION){
    return window.location.assign('/end.html');
}

questionCounter++;
const questionIndex = Math.floor(Math.random() * availableQuestions.length);
currentQuestion = availableQuestions[questionIndex];
question.innerText = currentQuestion.question;

choices.forEach((choice) => {

   const number = choice.dataset['number'];
   choice.innerText = currentQuestion["choice" + number]; 
});

availableQuestions.splice(questionIndex, 1);
acceptingAnswers = true;

};

choices.forEach((choice) => {

choice.addEventListener('click',(e) =>{

    if(!acceptingAnswers) return;
    
    acceptingAnswers = false;
    const selectedChoice = e.target;
    console.log(selectedChoice);
    //const selectedAnswer = selectedChoice.dataset['number'];
    //getNewQuestion();
});

});

startgame();

Thank You :)

Aucun commentaire:

Enregistrer un commentaire