QuizMe

GIF
Navbar Demonstration for QuizMe
Home Page for QuizMe
Game Page for QuizMe
End Page for QuizMe
High Scores Page for QuizMe

Inspiration

We found an article published by Boise State University about self-quizzing. Professor Kris Campbell at BSU describes how students feel less stressed and more prepared when studying with untracked and ungraded quizzes. “Anxiety is reduced since students can practice in a penalty-and-judgment-free environment before taking a quiz for points” (Campbell 10).

We thought, how can we incorporate self-studying with popular technology? We decided to build QuizMe, an interactive study tool that uses generative AI. QuizMe allows students to quiz themselves on STEM topics they learn in school. This way, students can be engaged with their studies without stress.

What it does

Our project utilizes NodeJS, Vite, and the OpenAI library. Based on the user’s input, a series of four-option multiple-choice questions will be generated by GPT-4. The user picks an answer. Each correct answer will award the user with 100 points. Wrong answers will not affect the score. Students can view a local leaderboard of their past scores, motivating them to score higher.

How we built it

We used HTML, CSS, and JS to build this website. We used NodeJS to install the OpenAI library, and we used the Vite framework to be able to host Node modules in a browser environment. This is a snippet of our code in game.js which generates a new chat completion with OpenAI:

    const generatedQuestion = await openai.chat.completions.create({
        model: "gpt-4",
        messages: [
        {
            role: "system", // this is basically background info for HOW the AI should respond
            content: "[content-here]"
        },
        {
            role: "user", // this is where the user's prompt goes
            content: "[content-here]"
        }]
    });

This is in an async function with three arguments: the prompt (as given by the user), the list of previous generated responses to prevent duplicate questions, and a boolean value for if the prompt is the first generation or not. You can view the full game.js file as well as other files in our GitHub repository, linked below.

async function generateQuestionsAndAnswers(selectedTopic, pastGeneratedResponse, isFirstGeneratedResponse)

This easily accesses generated responses given the topic and constraints.

Challenges we ran into

Our major challenge was proper formatting for the generated responses. We ran into many problems. For example, our code could not distinguish where the splits between the generated question and the generated choices were, causing the choices to be in the question and the buttons to say [undefined]. It took a lot of time to format this properly. We also ran into issues with Vite, and we were not able to use Node modules in a browser-like environment. We had to overcome such challenges to finish our project.

Accomplishments that we're proud of

This is the first hackathon that we have competed in, and we are proud of the product that we have created. We are excited to participate in more hackathons in the future and expand our knowledge of artificial intelligence.

What we learned

This is our first time coding with Node JS and a framework. We learned how to use the basics of the OpenAI JavaScript library, and we learned how to use the Vite framework to use Node modules in a browser. This project gave us more practice with programming in JavaScript.

What's next for QuizMe

We are looking into deploying QuizMe on a purchased domain. After doing so, we will implement Firebase so that students can log in and have their scores saved on a new database rather than local storage.