Quiz-App/script.js at main · Rishikavishnoi/Quiz-App · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
const quizData = [
  {
    question: " Q1. The default link color for hyperlinks? ",
    a: "green",
    b: "yellow",
    c: "blue",
    d: "red",
    ans: "ans-3",
  },
  {
    question: " Q2. What is the full form of HTML ",
    a: "Hypertext Markup Language",
    b: "Hypermedia Markup Language",
    c: "Hyper makrup language",
    d: "none of above",
    ans: "ans-1",
  },

  {
    question: "Q3. What is the full form of JS",
    a: "JavaScript",
    b: "Java speech",
    c: "Java language",
    d: "none of above",
    ans: "ans-1",
  },

  {
    question: "Q4. What is the full form of CSS",
    a: "Cascading Speed Sheet",
    b: "Cascading Style Sheet",
    c: "Colourful style sheet",
    d: "none of above",
    ans: "ans-2",
  },

  {
    question: "Q5. Which tag is used to underline text",
    a: "<a>",
    b: "<hr>",
    c: "<br>",
    d: "<u>",
    ans: "ans-4",
  },

  {
    question: "Q6. To make a comment in HTML you use ",
    a: "<!-- -->",
    b: "//",
    c: "/* ",
    d: "#",
    ans: "ans-1",
  },

  {
    question: "Q7. CSS to make text of all <p> tags red",
    a: "p{colour:red}",
    b: "p-style{color:red}",
    c: "p{color:red}",
    d: "p{color style :red}",
    ans: "ans-3",
  },

  {
    question: "Q8. JavaScript files have the file extention ",
    a: ".java",
    b: ".css",
    c: ".html",
    d: ".js",
    ans: "ans-4",
  },

  {
    question: "Q9. Choose the correct HTML element for largest heading",
    a: "<h1>",
    b: "<head>",
    c: "<h6>",
    d: "<heading>",
    ans: "ans-1",
  },

  {
    question:
      "Q10. What is the correct HTML element for inserting a line break ",
    a: "<break>",
    b: "<hr>",
    c: "<lb>",
    d: "<br>",
    ans: "ans-4",
  },
];

const question = document.querySelector(".question");
const option1 = document.querySelector("#option-1");
const option2 = document.querySelector("#option-2");
const option3 = document.querySelector("#option-3");
const option4 = document.querySelector("#option-4");
const submit = document.querySelector("#submit");
const answers = document.querySelectorAll(".answer");
const showScore=document.querySelector("#showScore");

let questionCount = 0;

let score = 0;

const loadQuestion = () => {
  const questionList = quizData[questionCount];

  question.innerText = questionList.question;
  option1.innerText = questionList.a;
  option2.innerText = questionList.b;
  option3.innerText = questionList.c;
  option4.innerText = questionList.d;


};
loadQuestion();

function getanswer() {
  let answer;
  answers.forEach((currAns) => {
    if (currAns.checked) {
      answer = currAns.id;
    }
  });
  return answer;
}
 const deselectAll=()=>{
    answers.forEach((curAnsElem)=> curAnsElem.checked=false);
 }

submit.addEventListener("click", () => {
  const checkedAnswer = getanswer();
  console.log(checkedAnswer);

  if (checkedAnswer === quizData[questionCount].ans) {
    score++;
  }

  deselectAll();
  questionCount++;
  if (questionCount < quizData.length) {
    loadQuestion();

  }
  else{

    showScore.innerHTML=`<h1> You scored ${score}/${quizData.length}👍 </h1>
    <button class="btn" onClick="location.reload()">Try Again</button>`;
    showScore.classList.remove('scoreArea');
    submit.style.display='none';
}


});