Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Quiz game #4962

Merged
merged 5 commits into from
Aug 5, 2024
Merged

Added Quiz game #4962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
56f8b8f
Added Quiz_With_Timer
heli0707 Jul 24, 2024
06400d0
Update README.md
heli0707 Jul 24, 2024
cc73a3b
Merge branch 'main' into Quiz-game
ishita-43 Jul 26, 2024
cb333f3
Merge branch 'main' into Quiz-game
heli0707 Jul 28, 2024
4e73220
Merge branch 'main' into Quiz-game
heli0707 Aug 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions Games/Quiz_With_Timer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# **Quiz_With_Timer**

## **Description 📃**
<!-- add your game description here -->
- A quiz game with a timer challenges players to answer questions within a limited time frame, adding an element of urgency and excitement. Players must quickly recall and select the correct answers before the timer runs out.

## **Functionalities 🎮**
<!-- add functionalities over here -->
- Timed Questions: Each question has a countdown timer, adding urgency.
- Score Tracking: Keeps track of the player's score based on correct answers and time taken.
- Responsive Design: Compatible with various devices, ensuring a smooth experience on both desktop and mobile.
- Review Answers: Allows players to review their answers after completing the quiz.
- Customizable Timer: Players can set the timer duration according to their preference.
<br>

## **How to play? 🕹️**
<!-- add the steps how to play games -->
- Start Button: Press to begin the quiz.
- Timer Display: Shows the countdown timer for each question.
- Question Area: Displays the questions one at a time.
- Answer Choices: Multiple-choice options for each question.
- Submit Button: Use to finalize your answer for each question.

<br>

## **Screenshots 📸**
![image](https://github.com/user-attachments/assets/3ed75a4e-88f9-46f4-a1e2-b56d9b2ec441)
![image](https://github.com/user-attachments/assets/9793d94b-1b78-4076-acc1-8d351fe6b406)
![image](https://github.com/user-attachments/assets/2394eaff-95f8-47e6-a060-1e11a950ac5d)
![image](https://github.com/user-attachments/assets/5724a952-e482-4d5f-8d5b-a52998c7b131)
![image](https://github.com/user-attachments/assets/ebef9227-95be-47be-9e55-942e3caf36ea)
![image](https://github.com/user-attachments/assets/c04981ed-0fbe-4b87-887d-4b07cd185f4c)


<h4 align='center'>Happy Coding 🧑‍💻</h4>
82 changes: 82 additions & 0 deletions Games/Quiz_With_Timer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Quiz App | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<!-- FontAweome CDN Link for Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<!-- start Quiz button -->
<div class="start_btn"><button>Start Quiz</button></div>

<!-- Info Box -->
<div class="info_box">
<div class="info-title"><span>Some Rules of this Quiz</span></div>
<div class="info-list">
<div class="info">1. You will have only <span>15 seconds</span> per each question.</div>
<div class="info">2. Once you select your answer, it can't be undone.</div>
<div class="info">3. You can't select any option once time goes off.</div>
<div class="info">4. You can't exit from the Quiz while you're playing.</div>
<div class="info">5. You'll get points on the basis of your correct answers.</div>
</div>
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
</div>
</div>

<!-- Quiz Box -->
<div class="quiz_box">
<header>
<div class="title">Awesome Quiz Application</div>
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- Here I've inserted question from JavaScript -->
</div>
<div class="option_list">
<!-- Here I've inserted options from JavaScript -->
</div>
</section>

<!-- footer of Quiz Box -->
<footer>
<div class="total_que">
<!-- Here I've inserted Question Count Number from JavaScript -->
</div>
<button class="next_btn">Next Que</button>
</footer>
</div>

<!-- Result Box -->
<div class="result_box">
<div class="icon">
<i class="fas fa-crown"></i>
</div>
<div class="complete_text">You've completed the Quiz!</div>
<div class="score_text">
<!-- Here I've inserted Score Result from JavaScript -->
</div>
<div class="buttons">
<button class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>

<!-- Inside this JavaScript file I've inserted Questions and Options only -->
<script src="js/questions.js"></script>

<!-- Inside this JavaScript file I've coded all Quiz Codes -->
<script src="js/script.js"></script>

</body>
</html>
72 changes: 72 additions & 0 deletions Games/Quiz_With_Timer/js/questions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
// creating an array and passing the number, questions, options, and answers
let questions = [
{
numb: 1,
question: "What does HTML stand for?",
answer: "Hyper Text Markup Language",
options: [
"Hyper Text Preprocessor",
"Hyper Text Markup Language",
"Hyper Text Multiple Language",
"Hyper Tool Multi Language"
]
},
{
numb: 2,
question: "What does CSS stand for?",
answer: "Cascading Style Sheet",
options: [
"Common Style Sheet",
"Colorful Style Sheet",
"Computer Style Sheet",
"Cascading Style Sheet"
]
},
{
numb: 3,
question: "What does PHP stand for?",
answer: "Hypertext Preprocessor",
options: [
"Hypertext Preprocessor",
"Hypertext Programming",
"Hypertext Preprogramming",
"Hometext Preprocessor"
]
},
{
numb: 4,
question: "What does SQL stand for?",
answer: "Structured Query Language",
options: [
"Stylish Question Language",
"Stylesheet Query Language",
"Statement Question Language",
"Structured Query Language"
]
},
{
numb: 5,
question: "What does XML stand for?",
answer: "eXtensible Markup Language",
options: [
"eXtensible Markup Language",
"eXecutable Multiple Language",
"eXTra Multi-Program Language",
"eXamine Multiple Language"
]
},
// you can uncomment the below codes and make duplicate as more as you want to add question
// but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9.....

// {
// numb: 6,
// question: "Your Question is Here",
// answer: "Correct answer of the question is here",
// options: [
// "Option 1",
// "option 2",
// "option 3",
// "option 4"
// ]
// },
];
Loading
Loading