Skip to content

Commit 6f77d7b

Browse files
Tanushree713Tanushree713
committed
Added QuizApp
1 parent b1d2e15 commit 6f77d7b

File tree

3 files changed

+209
-0
lines changed

3 files changed

+209
-0
lines changed

‎QuizApp/Tanushree713/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Quiz-App</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="incontainer">
13+
<h2 class="head">Question Ask Here? </h2>
14+
<ul class="options">
15+
<li >
16+
<input type="radio" name="answer" id="ans1" class="answer">
17+
<label id="option1">Answer 1</label>
18+
</li>
19+
<li >
20+
<input type="radio" name="answer" id="ans2" class="answer">
21+
<label id="option2">Answer 2</label>
22+
</li>
23+
<li >
24+
<input type="radio" name="answer" id="ans3" class="answer">
25+
<label id="option3">Answer 3</label>
26+
</li>
27+
<li >
28+
<input type="radio" name="answer" id="ans4" class="answer">
29+
<label id="option4">Answer 4</label>
30+
</li>
31+
</ul>
32+
33+
<button id="submit">Submit</button>
34+
<div class="outcontainer" id="showScore">
35+
36+
</div>
37+
</div>
38+
</div>
39+
<script src="./server.js"></script>
40+
</body>
41+
</html>

‎QuizApp/Tanushree713/server.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
const quizBox = [
3+
{ question :"Q1 : What is the Full Form Of HTML ? ",
4+
a :"Hello To My Land ",
5+
b :"Hey Markup Text Language",
6+
c :"Hyper Markup Language",
7+
d :"HyperText Markup Language",
8+
ans : "ans4" ,
9+
10+
},
11+
{ question :"Q2 : What is the Full Form Of JS ? ",
12+
a :"JavaScript ",
13+
b :"Java Scope",
14+
c : "Jango scoping",
15+
d : " JavaStyle",
16+
ans : "ans1" ,
17+
},
18+
{ question :"Q3 : What is the Full Form Of CSS ? ",
19+
a :"Cascading Style Sheep",
20+
b :"Cascading Style Sheet",
21+
c : "Cartoons Style Sheets",
22+
d : "Cascading Super Sheet",
23+
ans : "ans2" ,
24+
},
25+
{ question :"Q4 : What is the Full Form Of HTML ? ",
26+
a :"Hello To My Land ",
27+
b :"Hey Markup Text Language",
28+
c : "HyperText Markup Language",
29+
d : "Hyper Markup Language",
30+
ans : "ans3" ,
31+
},
32+
]
33+
const questions = document.querySelector(".head");
34+
const option1 = document.querySelector("#option1");
35+
const option2 = document.querySelector("#option2");
36+
const option3 = document.querySelector("#option3");
37+
const option4 = document.querySelector("#option4");
38+
const btn = document.querySelector("#submit");
39+
const answers = document.querySelectorAll(".answer");
40+
const showScore = document.querySelector("#showScore");
41+
42+
let questionCount = 0 ;
43+
let score = 0 ;
44+
45+
function loadQuestion(){
46+
const questionList = quizBox[questionCount] ;
47+
questions.innerText = questionList.question ;
48+
option1.innerHTML = questionList.a ;
49+
option2.innerHTML = questionList.b ;
50+
option3.innerHTML = questionList.c ;
51+
option4.innerHTML = questionList.d ;
52+
53+
}
54+
loadQuestion();
55+
56+
function getAnswer(){
57+
let answer ;
58+
answers.forEach((curAnsEl ) => {
59+
if(curAnsEl.checked){
60+
answer = curAnsEl.id;
61+
}
62+
});
63+
return answer;
64+
}
65+
66+
btn.addEventListener('click' , ()=>{
67+
const checkedAnswer = getAnswer();
68+
69+
if( checkedAnswer === quizBox[questionCount].ans){
70+
score++ ;
71+
}
72+
73+
questionCount ++ ;
74+
75+
if(questionCount < quizBox.length){
76+
loadQuestion();
77+
}
78+
else{
79+
showScore.innerHTML =
80+
` <h3> Your Score ${score} / ${ quizBox.length} </h3>
81+
<button id="btn1" onclick="location.reload()" >Play Again </button>`;
82+
showScore.style.display = "block" ;
83+
84+
}
85+
})

‎QuizApp/Tanushree713/style.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
3+
4+
*{
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: 'Poppins', sans-serif; ;
9+
}
10+
body{
11+
background-color: rgb(185, 226, 226);
12+
}
13+
14+
15+
.incontainer{
16+
border: 2px solid grey;
17+
border-radius: 16px;
18+
box-shadow: 1rem 0.9rem 0.5rem 0.4rem rgb(0,0,0,0.4);
19+
display: grid;
20+
place-content: center;
21+
margin-top: 6rem;
22+
height: 64vh;
23+
width: 50vw;
24+
margin-left: 24%;
25+
background-color: rgb(244, 247, 251);
26+
27+
}
28+
h2{
29+
color: rgb(44, 41, 41);
30+
}
31+
.options{
32+
color: rgb(47, 46, 46);
33+
34+
}
35+
input{
36+
cursor: pointer;
37+
}
38+
li{
39+
list-style: none;
40+
41+
padding: 10px;
42+
}
43+
#submit{
44+
cursor: pointer;
45+
padding: 10px 20px ;
46+
border-radius: 10px;
47+
border: 2px solid grey;
48+
margin-top: 2.3rem;
49+
width: 43vw;
50+
background-color: rgba(32, 152, 232, 0.73);
51+
color: white;
52+
font-size: 19px;
53+
font-weight: bold;
54+
}
55+
#showScore{
56+
background-color:rgba(158, 152, 152, 0.773);
57+
margin-top: 1rem;
58+
border-radius: 12px;
59+
height: 17vh;
60+
display: none;
61+
transition: 8s ;
62+
}
63+
#showScore h3{
64+
font-size: 22px ;
65+
font-weight: 600;
66+
text-align: center;
67+
padding-top: 0.8rem;
68+
color: rgb(37, 36, 36);
69+
70+
71+
}
72+
#showScore #btn1{
73+
font-size: 17px;
74+
font-weight: bold;
75+
padding: 12px 10px ;
76+
border-radius: 13px;
77+
border: 2px solid grey;
78+
width: 20vw;
79+
background-color:#00cecbd4;
80+
color: white;
81+
margin-top: 1rem;
82+
margin-left: 11rem;
83+
}

0 commit comments

Comments
 (0)