API for free https://quizapi.io/
A simple interactive Quiz App built with HTML, CSS, and JavaScript. The app fetches quiz questions from an external API and lets users answer multiple-choice questions, see explanations, and track their score.
- Display multiple-choice questions fetched from an API
- Show correct/incorrect answer feedback
- Display explanations for each question
- Track and display user score
- Navigate between questions with a "Next" button
- Restart quiz anytime
Open index.html in your browser to start the quiz.
- Clone the repository or download the files.
- Open
index.htmlin your browser. - Open
quiz.jsand replace the API key placeholder with your own Quiz API key:
const apiKey = "YOUR_API_KEY_HERE"; // Replace with your own API key
Click Start Quiz to fetch questions and begin.
Use Next to go to the next question, or Restart Quiz to start over.
File Structure
bash
Copy code
quiz-app/
│
├── index.html # Main HTML file
├── quiz.css # Styling for the quiz
├── quiz.js # JavaScript logic
└── README.md # Project instructions
How It Works
The app fetches questions from the QuizAPI using fetch().
Questions are displayed one by one, along with multiple-choice answers.
When an answer is selected, the app shows:
✅ Correct or ❌ Incorrect
Explanation of the correct answer
Updates the score
Users can navigate to the next question using the Next button.
Once all questions are answered or the limit is reached, the final score is shown.
Configuration
Number of questions: You can set the maximum number of questions by changing the limit variable in quiz.js:
javascript
Copy code
const limit = 15; // Change to any number of questions you want
API Key: Replace "YOUR_API_KEY_HERE" with your own key from QuizAPI.