QuizCraft

Description

A fun, interactive quiz game where you choose the topic! Start by entering your name, pick a subject for the AI to generate custom questions, and dive into text-based trivia—perfect for studying or just having fun!

Features

• Interactive Welcome Screen: Sets up a customizable quiz of your choice.
• Uses the Gemini API to create engaging questions with 3–4 possible answers.
• Provides clear visual indicators for correct and incorrect answers.
• countdown timer for increased difficulty
• Results Visualization: Displays the final result in a user-friendly format.
• Offers the ability to start a new quiz at the end of each round.

Tech Stack

• Gemini API(Model - Gemini 1.5 Flash)
• Vite (React)
• React Context for state
• Typescript
• HTML, SCSS
• Netlify (frontend hosting)

Usage

1. Install the dependencies in the root folder with:

npm install

2. Create a .env file in root using the .env.example as a template

NOTE: You can get your API key from the Gemini API documentation.

3. Within the App.tsx file, you can set your desired quiz subject and number of questions generated by changing the parameters within the testQuizOutput() function.

    await testQuizOutput(4, "Frontend Web Development");

4. Call the run dev command

npm run dev

This will output the generated quiz questions and answers in the web dev console when the page is loaded. Visit http://localhost:5173/ to view the page. Use F12 or right click and inspect or ctrl+shift+I to view the console.

The generateQuiz() function returns a QuizResult object with the following structure:

interface QuizResult {
    quizTitle: string;
    questions: {
        questionText: string;
        options: string[];
        correctAnswerIndex: number;
    }[];
}