QuizCraft

Description

A quiz app where the user can decide the quiz topic by prompting the AI. The quizzes could be used for fun but also for practicing and studying (e.g. interview questions, exam questions etc.). Answers and questions are going to be in text based form.

It's supposed to be like a game rather than a website. Once your on the website you should be greeted and asked for a name. Afterwards you initiate the quiz with a topic and start the quiz.

Features

• welcome screen asking for a topic
• input field for prompting the AI
• selector for setting the amount of questions
• Gemini API to generate questions with 3-4 possible answers
• give visual feedback for both wrong and right answers
• track the amount of wrong and right answers to create some kind of score
• visualize the results
• offer to start another quiz when a round is finished

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;
    }[];
}