game.js

const question = document.getElementById('question');
const choices = Array.from(document.getElementsByClassName('choice-text'));
const progressText = document.getElementById('progressText');
const scoreText= document.getElementById('score');
const progressBarFull = document.getElementById('progressBarFull');
const game = document.getElementById('game');
const loader= document.getElementById('loader');

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

let questions = [];
// fetch('questions.json').then((res)=>{  
//    return res.json();
// })
// .then((loadedQuestions)=>{
//     questions = loadedQuestions;
//     startGame();
// })
// .catch(err=>{
//     console.error(err);
// })

fetch('https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple')
.then(res=>{
    return res.json();
})
.then(loadedQuestions =>{
      questions = loadedQuestions.results.map(loadedQuestion => {
      const formattedQuestion = {
        question: loadedQuestion.question,
      } 

      formattedQuestion.answer = Math.floor(Math.random()*3)+1;
      questionChoices = [...loadedQuestion.incorrect_answers];
      questionChoices.splice(formattedQuestion.answer - 1,0,loadedQuestion.correct_answer);
      questionChoices.forEach((choice,index)=>{
          formattedQuestion['choice'+(index+1)]=  choice;
      }) 
      
      return formattedQuestion;
    })
    startGame();
})
.catch(err=>{
    console.error(err);
})

const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 3;



startGame = ()=>{
 score=0;
 questionCounter=0;
 availableQuestions=[...questions];
 getNewQuestion();
 game.classList.remove('hidden');
 loader.classList.add('hidden');

};

getNewQuestion = ()=>{
    if (questionCounter>=MAX_QUESTIONS || availableQuestions.length==0)
    { window.localStorage.setItem('mostRecentScore',score);
     return window.location.assign('/end.html');
    }
     questionCounter++;
     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
     progressBarFull.style.width = `${questionCounter/MAX_QUESTIONS*100}%`;

     currentIndex = Math.floor(Math.random()*availableQuestions.length);
     currentQuestion= availableQuestions[currentIndex];
     question.innerText = currentQuestion.question;

     choices.forEach((choice)=>{
         let number = choice.dataset['number'];
         choice.innerText = currentQuestion['choice'+number];
     })
     availableQuestions.splice(currentIndex,1);
     acceptingAnswers =true;
};

choices.forEach((choice)=>{
    choice.addEventListener('click', (e)=>{
       if (!acceptingAnswers) return;
        
        acceptingAnswers = false;
        const selectedChoice = e.target;
        const selectedAnswer = selectedChoice.dataset['number'];

        const classToApply = (selectedAnswer== currentQuestion.answer)?'correct':'incorrect';
        if(classToApply==='correct'){
            incrementScore(CORRECT_BONUS);
        }
        choice.parentElement.classList.add(classToApply);
        setTimeout(()=>{
            choice.parentElement.classList.remove(classToApply);
            getNewQuestion();   
        },1000)
       
    });
});

incrementScore = num =>{
    score+=num;
    scoreText.innerText = score;
}