QuizApp/script.js at main · VijayaAdamane/QuizApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
const startbtn = document.getElementById("startBtn");
const queContainer = document.getElementById("queContainer");
const questionElem = document.getElementById("question");
const ansButtons = document.getElementById("ansButtons");
const nextButton = document.getElementById('NextBtn')
let shuffledQuestions, currentQuestionIndex;

startbtn.addEventListener("click", startGame);
function startGame() {
  startbtn.classList.add("hide");
  shuffledQuestions = questions.sort(() => Math.random() - 0.5);
  currentQuestionIndex = 0;
  queContainer.classList.remove("hide");
  setNextQuestion();
}

nextButton.addEventListener('click', () => {
    currentQuestionIndex++
    setNextQuestion()
  })


function setNextQuestion() {
  resetState();
  showQuestion(shuffledQuestions[currentQuestionIndex]);
}

function showQuestion(question) {
    questionElem.innerText = question.question;
    question.answers.forEach(answer => {
        const button = document.createElement('button')
        button.innerText = answer.text;
        button.classList.add('btn')
        if(answer.correct){
            button.dataset.correct = answer.correct;
        }
        button.addEventListener('click', selectAnswer);
        ansButtons.appendChild(button)
    });
}

function resetState(){
    clearStatusClass(document.body)
    nextButton.classList.add('hide');
    while(ansButtons.firstChild){
        ansButtons.removeChild(ansButtons.firstChild)
    }
}
function selectAnswer(e) {
    const selectedButton = e.target
    const correct = selectedButton.dataset.correct
    setStatusClass(document.body, correct)
    Array.from(ansButtons.children).forEach(button => {
        setStatusClass(button, button.dataset.correct)
    })
    if(shuffledQuestions.length > currentQuestionIndex+1)
    nextButton.classList.remove('hide');
else{
    startbtn.innerText = 'Restart'
    startbtn.classList.remove('hide')
}
}

function setStatusClass(element, correct){
    clearStatusClass(element)
    if(correct){
        element.classList.add('correct')
    }else{
        element.classList.add('wrong')
    }
}

function clearStatusClass(element){
    element.classList.remove('correct')
    element.classList.remove('wrong')
}
const questions = [
  {
    question: "What is 4+4 ? ",
    answers: [
      { text: "4", correct: false },
      { text: "8", correct: true },
      { text: "16", correct: false },
      { text: "44", correct: false },
    ],
  },
  {
    question: "Which one is not a Keyword in Java  ? ",
    answers: [
      { text: "if", correct: false },
      { text: "break", correct: false },
      { text: "let", correct: true },
      { text: "while", correct: false },
    ],
  },
  {
  question: "If the simple interest for 6 years be equal to 30% of the principal, it will be equal to the principal after ? ",
    answers: [
      { text: "20", correct: true },
      { text: "30", correct: false },
      { text: "10", correct: false},
      { text: "22", correct: false },
    ],
  }
];