AI Quiz Generator

Uses OpenAI's ChatGPT API to generate multiple choice quiz with user defined language, topic, and difficulty.

Features a loading screen with random facts to give the user something to do while the data is retrieved from the API and an ending screen with score-determined gifs and sarcastic messages.

View Live App

Features

Customisable language, topic, difficulty, and number of questions
Loading screen that displays the live response stream and random webdev/programming facts (gives you something to do as it can take around 20-30 seconds for the quiz to generate)
Multiple choice Ed-style quiz with explanations and a progress bar
End screen with gifs, sarcastic messages, and confetti (>= 80%) that adapt to your quiz score
14 track kahoot-flavored audio player (this is the real highlight, the quiz is just something to do while you're groovin 😁)

Tech Used

Next.js 13.4 (using the new App router)
Tailwind CSS
OpenAI's gpt-3-turbo API

Packages Used

framer-motion (for animations)
highlight.js (for syntax highlighting)
react-confetti
react-loader-spinner
react-icons
react-use (for the useAudio() hook)
react-simple-typewriter

Tools

create-next-app (development and building)
Vercel (deployment)

OpenAI Integration

A custom prompt is created by interpolating user entered form data. Crucially, the response is asked to be returned in JSON format. Light "prompt engineering" was required to ensure the response was consistently in the correct format (for example: explicitly saying what the names of the keys should be).

The API is queried. After playing with the available parameters, I found leaving most of them at their default setting worked well.