Foundation level :-
Day 75
Roll:-005
Coding Task
link:-
https://chimerical-paprenjak-8e7dc4.netlify.app/
## 10 Different Quiz Application – Code Description
This project is a **Basic Quiz Application** made using **HTML, CSS, and JavaScript in one file**.
### 1. HTML
HTML creates the structure of the quiz application.
The page has a **Quiz Menu** where the user can choose from 10 different quizzes:
1. General Knowledge
2. HTML
3. CSS
4. JavaScript
5. Science
6. Math
7. Geography
8. History
9. Sports
10. Computer
There is also a quiz screen that displays the **question, four answer buttons, Next Question button, Restart Quiz button, and Back to Quiz Menu button**.
### 2. CSS
CSS is used to make the quiz look better.
It gives the page a **light blue background**, a white quiz box, rounded corners, spacing, and different button colors.
The `button:hover` code also changes the button appearance when the mouse moves over it.
### 3. JavaScript
JavaScript controls the main working of the quiz.
All 10 quizzes are stored inside an array called `allQuizzes`.
Each quiz contains questions, four answers, and the number of the correct answer.
### 4. Starting a Quiz
The `startQuiz()` function starts the quiz selected by the user.
For example, when the user clicks the HTML Quiz button, JavaScript opens the HTML questions.
### 5. Showing Questions
The `showQuestion()` function displays the current question and its four possible answers on the screen.
### 6. Checking Answers
The `checkAnswer()` function checks whether the selected answer is correct.
If the answer is correct, the score increases by 1 and an alert says:
"Correct Answer!"
If it is wrong, an alert says:
"Wrong Answer!"
The user can only select one answer for each question.
### 7. Next Question
The `nextQuestion()` function moves the user to the next question.
When all questions are finished, the application displays:
"Quiz Completed!"
and shows the user's final score.
### 8. Restart Quiz
The `restartQuiz()` function starts the current quiz again from the beginning.
It resets:
* Current question to 0
* Score to 0
* Answer selection
* Question buttons
This allows the user to play the same quiz again.
### 9. Back to Quiz Menu
The `backToMenu()` function takes the user back to the main menu.
The user can then choose a completely different quiz.
### 10. Overall Working
The complete process is:
**Choose Quiz → Answer Questions → Check Answers → Next Question → Finish Quiz → See Score → Restart or Choose Another Quiz**
So, this project is a simple **10-in-1 Quiz Application** that demonstrates how HTML creates the page, CSS designs it, and JavaScript makes the quiz interactive.
Foundation level :-
Day 75
Roll:-005
π» Coding Task
link:- https://chimerical-paprenjak-8e7dc4.netlify.app/
## 10 Different Quiz Application – Code Description
This project is a **Basic Quiz Application** made using **HTML, CSS, and JavaScript in one file**.
### 1. HTML
HTML creates the structure of the quiz application.
The page has a **Quiz Menu** where the user can choose from 10 different quizzes:
1. General Knowledge
2. HTML
3. CSS
4. JavaScript
5. Science
6. Math
7. Geography
8. History
9. Sports
10. Computer
There is also a quiz screen that displays the **question, four answer buttons, Next Question button, Restart Quiz button, and Back to Quiz Menu button**.
### 2. CSS
CSS is used to make the quiz look better.
It gives the page a **light blue background**, a white quiz box, rounded corners, spacing, and different button colors.
The `button:hover` code also changes the button appearance when the mouse moves over it.
### 3. JavaScript
JavaScript controls the main working of the quiz.
All 10 quizzes are stored inside an array called `allQuizzes`.
Each quiz contains questions, four answers, and the number of the correct answer.
### 4. Starting a Quiz
The `startQuiz()` function starts the quiz selected by the user.
For example, when the user clicks the HTML Quiz button, JavaScript opens the HTML questions.
### 5. Showing Questions
The `showQuestion()` function displays the current question and its four possible answers on the screen.
### 6. Checking Answers
The `checkAnswer()` function checks whether the selected answer is correct.
If the answer is correct, the score increases by 1 and an alert says:
"Correct Answer!"
If it is wrong, an alert says:
"Wrong Answer!"
The user can only select one answer for each question.
### 7. Next Question
The `nextQuestion()` function moves the user to the next question.
When all questions are finished, the application displays:
"Quiz Completed!"
and shows the user's final score.
### 8. Restart Quiz
The `restartQuiz()` function starts the current quiz again from the beginning.
It resets:
* Current question to 0
* Score to 0
* Answer selection
* Question buttons
This allows the user to play the same quiz again.
### 9. Back to Quiz Menu
The `backToMenu()` function takes the user back to the main menu.
The user can then choose a completely different quiz.
### 10. Overall Working
The complete process is:
**Choose Quiz → Answer Questions → Check Answers → Next Question → Finish Quiz → See Score → Restart or Choose Another Quiz**
So, this project is a simple **10-in-1 Quiz Application** that demonstrates how HTML creates the page, CSS designs it, and JavaScript makes the quiz interactive.