-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathQuiz.html
124 lines (110 loc) · 2.85 KB
/
Quiz.html
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
<!--Testing the project-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family:courier;
text-align: center;
background-image:url("https://img.freepik.com/premium-vector/monochrome-seamless-pattern-with-puzzles-riddles-quiz-tournament-competition-knowledge-test-smart-game-elements_198278-5620.jpg");
}
.quiz-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 5px solid black;
border-radius: 40px;
background-color:white;
}
.choices button {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
border: none;
background-color: #f0f0f0;
cursor: pointer;
}
#next-btn {
margin-top: 20px;
background-color:blue;
color: white;
border: none;
padding: 10px 30px;
border-radius: 25px;
cursor: pointer;
}
#next-btn:hover {
background-color: #0056b3;
}
</style>
<title>Tech Quiz Test</title>
</head>
<body>
<div class="quiz-container">
<h1>Tech Quiz Test</h1>
<div id="question"></div>
<div id="choices" class="choices"></div>
<button id="next-btn">Next</button>
<div id="score">Score: 0</div>
</div>
<script>
const questionElement = document.getElementById('question');
const choicesElement = document.getElementById('choices');
const nextButton = document.getElementById('next-btn');
const scoreElement = document.getElementById('score');
let currentQuestionIndex = 0;
let score = 0;
const questions = [
{
question: 'Which technology is right now in "Boom"?',
choices: ['AI', 'ROBOTICS', 'IOT'],
correctAnswer: 0
},
{
question: 'Who "created" the CHATGPT?',
choices: ['Sam ALtman', 'Elon Musk', 'Bill Gates'],
correctAnswer: 0
},
{
question: 'Most popular "IT hub" in all over world?',
choices: ['Silicon Valley', 'Banglore', 'New York'],
correctAnswer: 0
}
];
function showQuestion() {
const question = questions[currentQuestionIndex];
questionElement.textContent = question.question;
choicesElement.innerHTML = '';
question.choices.forEach((choice, index) => {
const button = document.createElement('button');
button.textContent = choice;
button.addEventListener('click', () => handleAnswer(index));
choicesElement.appendChild(button);
});
}
function handleAnswer(choiceIndex) {
const question = questions[currentQuestionIndex];
if (choiceIndex === question.correctAnswer) {
score++;
scoreElement.textContent = `Score: ${score}`;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
questionElement.textContent = 'Quiz completed!';
choicesElement.innerHTML = '';
nextButton.disabled = true;
}
}
nextButton.addEventListener('click', () => {
showQuestion();
nextButton.disabled = true;
});
showQuestion();
</script>
</body>
</html>