🎯 Quiz App - Interactive quiz with multiple choice questions, scoring, and results. Intermediate project!
📚 Concepts Covered:
• Arrays of objects
• Array methods (forEach, filter)
• Control flow
• Score tracking
• Conditional rendering
✨ Features:
• Multiple questions
• Track correct answers
• Calculate score
• Show results
• Feedback messages
javascript
// Quiz Application
class QuizApp {
constructor(questions) {
this.questions = questions;
this.currentQuestion = 0;
this.score = 0;
this.answers = [];
}
getCurrentQuestion() {
return this.questions[this.currentQuestion];
}
answerQuestion(answer) {
const question = this.getCurrentQuestion();
const isCorrect = answer === question.correct;
this.answers.push({
question: question.question,
userAnswer: answer,
correctAnswer: question.correct,
isCorrect: isCorrect
});
if (isCorrect) {
this.score++;
}
this.currentQuestion++;
return isCorrect ? "✅ Correct!" : `❌ Wrong! Correct: ${question.correct}`;
}
isFinished() {
return this.currentQuestion >= this.questions.length;
}
getResults() {
const percentage = (this.score / this.questions.length * 100).toFixed(1);
let grade = "";
if (percentage >= 90) grade = "Excellent! 🌟";
else if (percentage >= 70) grade = "Good! 👍";
else if (percentage >= 50) grade = "Pass ✓";
else grade = "Need improvement 📚";
return `
📊 Quiz Results
━━━━━━━━━━━━━━━━━━━━━━
Score: ${this.score}/${this.questions.length}
Percentage: ${percentage}%
Grade: ${grade}
`;
}
}
// Demo
const questions = [
{ question: "What does JS stand for?", correct: "JavaScript" },
{ question: "Which keyword declares a constant?", correct: "const" },
{ question: "What is 2 + 2?", correct: "4" }
];
const quiz = new QuizApp(questions);
console.log("Question 1:", quiz.getCurrentQuestion().question);
console.log(quiz.answerQuestion("JavaScript"));
console.log("\nQuestion 2:", quiz.getCurrentQuestion().question);
console.log(quiz.answerQuestion("let"));
console.log("\nQuestion 3:", quiz.getCurrentQuestion().question);
console.log(quiz.answerQuestion("4"));
console.log(quiz.getResults());You should see
Question 1: What does JS stand for? ✅ Correct! Question 2: Which keyword declares a constant? ❌ Wrong! Correct: const Question 3: What is 2 + 2? ✅ Correct! 📊 Quiz Results ━━━━━━━━━━━━━━━━━━━━━━ Score: 2/3 Percentage: 66.7% Grade: Pass ✓