Skip to content

Commit 5de2b33

Browse files
thinkswellthinkswell
authored
Merge pull request #650 from Tomkndn/QuizApp-tomkndn
Added QuizApp files
2 parents 6fed5b4 + ea6de51 commit 5de2b33

File tree

6 files changed

+214
-0
lines changed

6 files changed

+214
-0
lines changed

‎QuizApp/Tomkndn/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quiz App</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="quiz-container">
11+
<h1>Quiz App</h1>
12+
<div class="question-container">
13+
<p id="question-text">Question 1:</p>
14+
<ul id="options-list">
15+
<li><input type="radio" name="answer" value="A"> Option A</li>
16+
<li><input type="radio" name="answer" value="B"> Option B</li>
17+
<li><input type="radio" name="answer" value="C"> Option C</li>
18+
<li><input type="radio" name="answer" value="D"> Option D</li>
19+
</ul>
20+
</div>
21+
<button id="next-button">Next</button>
22+
<p id="result-text"></p>
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
</html>

‎QuizApp/Tomkndn/pic1.jpg‎

38.3 KB
Loading

‎QuizApp/Tomkndn/pic2.jpg‎

31 KB
Loading

‎QuizApp/Tomkndn/readme.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## This is how the project looks like
2+
![quiz-app](pic1.jpg)
3+
![quiz-app](pic2.jpg)

‎QuizApp/Tomkndn/script.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const questions = [
2+
{
3+
question: "What is (2 + 2)/2*2?",
4+
options: ["3", "4", "5", "6"],
5+
answer: "4",
6+
},
7+
{
8+
question: "Which planet is known as the Red Planet?",
9+
options: ["Earth", "Mars", "Jupiter", "Saturn"],
10+
answer: "Mars",
11+
},
12+
{
13+
question: "How many days do we have in a week?",
14+
options: ["1", "4", "7", "10"],
15+
answer: "7",
16+
},
17+
{
18+
question: "How many letters are there in the English alphabet?",
19+
options: ["20", "26", "100", "0"],
20+
answer: "26",
21+
},
22+
{
23+
question: "Which month of the year has the least number of days?",
24+
options: ["January", "March", "February", "December"],
25+
answer: "February",
26+
},
27+
{
28+
question: "Which animal is called King of Jungle?",
29+
options: ["Lion", "Mars", "Dog", "Elephant"],
30+
answer: "Lion",
31+
},
32+
{
33+
question: "Which is the tallest animal on the earth?",
34+
options: ["Giraffe", "Lion", "Monkey", "My Dad"],
35+
answer: "Giraffe",
36+
},
37+
{
38+
question: "Which festival is known as the festival of colors?",
39+
options: ["Diwali", "Christmas", "Holi", "New year"],
40+
answer: "Holi",
41+
},
42+
{
43+
question: "What is the top color in a rainbow?",
44+
options: ["Orange", "Pink", "Blue", "Red"],
45+
answer: "Red",
46+
},
47+
{
48+
question: "How many zeros are there in one hundred thousand?",
49+
options: ["ten", "one", "seven", "five"],
50+
answer: "five",
51+
},
52+
];
53+
54+
let currentQuestionIndex = 0;
55+
let score = 0;
56+
57+
const questionText = document.getElementById("question-text");
58+
const optionsList = document.getElementById("options-list");
59+
const nextButton = document.getElementById("next-button");
60+
const resultText = document.getElementById("result-text");
61+
62+
function showQuestion() {
63+
const currentQuestion = questions[currentQuestionIndex];
64+
questionText.textContent = `Question ${currentQuestionIndex + 1}: ${
65+
currentQuestion.question
66+
}`;
67+
68+
optionsList.innerHTML = "";
69+
currentQuestion.options.forEach((option, index) => {
70+
const listItem = document.createElement("li");
71+
listItem.innerHTML = `<input type="radio" name="answer" value="${option}"> Option ${String.fromCharCode(
72+
65 + index
73+
)}: ${option}`;
74+
optionsList.appendChild(listItem);
75+
});
76+
77+
nextButton.disabled = true;
78+
}
79+
80+
function checkAnswer() {
81+
const selectedAnswer = document.querySelector('input[name="answer"]:checked');
82+
83+
if (!selectedAnswer) {
84+
return;
85+
}
86+
87+
const currentQuestion = questions[currentQuestionIndex];
88+
if (selectedAnswer.value === currentQuestion.answer) {
89+
score++;
90+
}
91+
92+
currentQuestionIndex++;
93+
94+
if (currentQuestionIndex < questions.length) {
95+
showQuestion();
96+
} else {
97+
showResult();
98+
}
99+
}
100+
101+
function showResult() {
102+
questionText.textContent = "Quiz Completed!";
103+
optionsList.innerHTML = "";
104+
nextButton.style.display = "none";
105+
resultText.textContent = `Your Score: ${score} out of ${questions.length}`;
106+
}
107+
108+
nextButton.addEventListener("click", checkAnswer);
109+
optionsList.addEventListener("change", () => {
110+
nextButton.disabled = false;
111+
});
112+
113+
showQuestion();

‎QuizApp/Tomkndn/styles.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #f7f7f7;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 100vh;
10+
}
11+
12+
.quiz-container {
13+
width: 80%;
14+
max-width: 600px;
15+
margin: 0 auto;
16+
text-align: center;
17+
background-color: #fff;
18+
border-radius: 10px;
19+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
20+
padding: 40px;
21+
}
22+
23+
h1 {
24+
color: #007BFF;
25+
font-size: 28px;
26+
}
27+
28+
.question-container {
29+
border: 1px solid #ccc;
30+
padding: 20px;
31+
margin: 20px 0;
32+
background-color: #f9f9f9;
33+
border-radius: 10px;
34+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
35+
}
36+
37+
ul {
38+
list-style-type: none;
39+
padding: 0;
40+
}
41+
42+
li {
43+
margin: 10px 0;
44+
font-size: 16px;
45+
}
46+
47+
button {
48+
padding: 10px 20px;
49+
background-color: #007BFF;
50+
color: #fff;
51+
border: none;
52+
cursor: pointer;
53+
border-radius: 5px;
54+
transition: background-color 0.2s;
55+
font-size: 16px;
56+
}
57+
58+
button:hover {
59+
background-color: #0056b3;
60+
}
61+
62+
p#result-text {
63+
font-weight: bold;
64+
font-size: 20px;
65+
margin-top: 20px;
66+
}
67+
68+
input[type="radio"] {
69+
margin-right: 10px;
70+
transform: scale(1.2);
71+
}
72+

0 commit comments

Comments
 (0)