script.js

const startBtn = document.querySelector('.start-btn');
const popupInfo = document.querySelector('.popup-info');
const exitBtn = document.querySelector('.exit-btn');
const main = document.querySelector('.main');
const continueBtn = document.querySelector('.continue-btn');
const quizSection = document.querySelector('.quiz-section');
const quizBox = document.querySelector('.quiz-box');
const resultBox = document.querySelector('.result-box');
const tryAgainBtn = document.querySelector('.tryAgain-btn');
const goHommeBtn = document.querySelector('.goHomme-btn');
const btnGroup = document.querySelector('.popup-info');

const btnGroupRect = btnGroup.getBoundingClientRect();
const exitBtnRect = exitBtn.getBoundingClientRect();

startBtn.onclick = () => {
    popupInfo.classList.add('active');
    main.classList.add('active');
}

/*exitBtn.onclick = () => {
    popupInfo.classList.remove('active');
    main.classList.remove('active');
}*/

exitBtn.addEventListener ('mouseover', () => {
    const i = Math.floor(Math.random() * (btnGroupRect.width - exitBtnRect.width)) + 1;
    const j = Math.floor(Math.random() * (btnGroupRect.height - exitBtnRect.height)) + 1;

    exitBtn.style.left = i + 'px';
    exitBtn.style.top = j + 'px';
});

continueBtn.onclick = () => {
   quizSection.classList.add('active');
   popupInfo.classList.remove('active');
   main.classList.remove('active');
   quizBox.classList.add('active');

   showQuestions(0);
   questionCounter(1);
   headerScore();
}

tryAgainBtn.onclick = () => {
    quizBox.classList.add('active');
    nextBtn.classList.remove('active');
    resultBox.classList.remove('active');


    questionCount = 0;
    questionNumb = 1;
    userScore = 0;
    showQuestions(questionCount);
    questionCounter(questionNumb);

    headerScore();
}

goHommeBtn.onclick = () => {
    quizSection.classList.remove('active');
    nextBtn.classList.remove('active');
    resultBox.classList.remove('active');


    questionCount = 0;
    questionNumb = 1;
    userScore = 0;
    showQuestions(questionCount);
    questionCounter(questionNumb);
}



let questionCount = 0;
let questionNumb = 1;
let userScore = 0;

const nextBtn = document.querySelector(".next-btn");

nextBtn.onclick = () => {
    if (questionCount < questions.length - 1){
        questionCount++;
        showQuestions(questionCount);

        questionNumb++,
        questionCounter(questionNumb);

        nextBtn.classList.remove('active');
    }
    else {
        showResultBox();
    }
}

const optionList = document.querySelector('.option-list');

//prendre des questions et options de la liste
function showQuestions(index) {
    const questionText = document.querySelector('.question-text');
    questionText.textContent = `${questions[index].numb}. ${questions[index].question}`;

    let optionTag = `<div class="option"> <span>${questions[index].options[0]}</span></div>
        <div class="option"> <span>${questions[index].options[1]}</span></div>
        <div class="option"> <span>${questions[index].options[2]}</span></div>
        <div class="option"> <span>${questions[index].options[3]}</span></div>`;

    optionList.innerHTML = optionTag;

    const option = document.querySelectorAll('.option');
    for (let i=0; i < option.length; i++) {
        option[i].setAttribute('onclick', 'optionSelected(this)');
    }
}

function optionSelected(answer) {
    let userAnswer = answer.textContent;
    let correctAnswer = questions[questionCount].answer;
    console.log(userAnswer);
    console.log(correctAnswer);
    let allOptions = optionList.children.length;
   //verification si l'utilisateur a choisi correctement ou pas

    if (userAnswer == correctAnswer) {         
        console.log('answer is correct');
        answer.classList.add('correct');
        userScore += 1;
        headerScore();
    } 

    else {
        console.log('answer is wrong');
        answer.classList.add('incorrect');

        //si la réponse est incorrect, auto seclect la bonne réponse
        for (let i=0; i < allOptions; i++) {
           if (optionList.children[i].textContent == correctAnswer){
            optionList.children[i].setAttribute('class', 'option correct');
           }
        }

    }

    //si l'utilisateur a choisi, désactiver toutes les options
    for (let i=0; i < allOptions; i++) {
        optionList.children[i].classList.add('disabled');
    }

    nextBtn.classList.add('active');

}

function questionCounter(index) {
    const questionTotal = document.querySelector('.question-total');
    questionTotal.textContent = `${index} of ${questions.length} Questions`;
}

function headerScore() {
    const headerScoreText = document.querySelector('.header-score');
    headerScoreText.textContent = `Score: ${userScore} / ${questions.length}`;
}

function showResultBox(){
    quizBox.classList.remove('active');
    resultBox.classList.add('active');

    const scoreText = document.querySelector(`.score-text`);
    scoreText.textContent = `Your Score: ${userScore} out of ${questions.length}`;

    const circularProgress = document.querySelector(`.circular-progress`);
    const progressValue = document.querySelector(`.progress-value`);
    let progressStartValue = -1;
    let progressEndValue = (userScore / questions.length) * 100;
    let speed = 20;

    let progress = setInterval (() => {
        progressStartValue++;
        //console.log(progressStartValue);
        progressValue.textContent = `${progressStartValue}%`;
        circularProgress.style.background = `conic-gradient(#c40094 ${progressStartValue * 3.6}deg, rgba(255, 255, 255, .1) 0deg)`

        if (progressStartValue == progressEndValue) {
            clearInterval(progress);
        }
    }, speed);
}