Thuta Learning
ProjectsProgrammingbeginner

Quiz App

Relax. We'll talk through this in plain words โ€” no textbook voice.

๐ŸŽฏ 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 โœ“