Introducing QUIZORA: Explore the Joy of Learning with Quizzes Just for You!

Effective learning has taken a backseat in today's fast world where volumes of information that we go through on a daily basis have gone high. Now, let me introduce QUIZORA: a web application revolutionary in design, making effective learning engaging and fun! .

How did I come up with the idea:

The idea of QUIZORA clicked in my mind when I was looking for last-minute revision material, which wasn't really good enough to meet my needs. Most of them did not boast either customization or variety in a quiz-based format.

Having gone through the design, I found Shad-CN UI's sleek and user-friendly design to align perfectly with what I wanted for a modern, accessible learning platform. Finally, the simple yet interactive interface of my friend's Tic-Tac-Toe project furthered the experience that I wanted to replicate with QUIZORA.

Key Features

1. Personalized Quiz Generation
QUIZORA allows users to get questions generated via different tags: Science, Technology, Space, and Biology. You can even go into granular detail if you wish by choosing different models to get your quiz experience just right. Just think about being tested on such exciting questions as, "Which planet has most moons?" or "What is the significance of natural selection?"

2. Multiple AI Models for Varied Performance
One of the great features in QUIZORA is your ability to select one among three advanced AI models, which are Llama3-8b-8192, Mistral-Small, and GPT-4o-Mini. This further provides you with a gamut of performance levels, from which both beginners and seasoned quiz lovers can take their ultimate benefit.

3. Save and Load Question Sets
Got a favorite quiz? QUIZORA, automatically saves your generated question sets for later use. This will be great for studying or sharing with friends.

4. Interactive UI
The interface is intuitive and pleasingly interactive. Skim through categories, see questions, and answer them in an interactive manner- learning was never so much fun.

Why QUIZORA?

Living in a time when personalized learning is becoming essential, QUIZORA stands out in marrying technology and education through playing. We gamify the quizzes for an engaging experience with the material, furthering knowledge retention and understanding.

How QUIZORA Leverages Multiple AI Models

These variations of generated content are there because different AI models have their respective pros and cons. QUIZORA runs on three models:
Llama3-8b-8192
Excellent token processing speed, reaching 212.7 tokens/s, thus being perfect for users who need high efficiency and speed. It is accessed via Groq.

GPT-4o-Mini
Has a balanced experience because it has moderate speed, 112.9 tokens/s, while maintaining very reliable quality. It is accessed via the specialized API from NAGA.

Mistral-Small
Much slower in token processing at 80.7 tokens/s but makes up by being a lot more creative and deeper.

From our analysis, we have also found that Llama3-8b-8192 consistently delivered fastest responses. While, GPT-4o-mini and Mistral-Small's output speed were marginal for our task. Due to moderate requirements of QUIZORA project, all three models every provided similar performance results.

Source of performance data: Artificial Analysis Leaderboard
Source of images: Artificial Analysis

Challenges

Challenges Smooth card swiping, animations were one of the big challenges I had to work with to implement an interactive user experience. Quite a great deal of effort went into fine-tuning the transitions and movements to feel natural and responsive.

Of course, there were a lot of challenges throughout this project; another major one was designing the UI by using only two colors. It was hard to strike a balance between simplicity and visual appeal with a limited color palette, but ultimately it made me focus on clean and minimalistic design elements that would enhance the overall look and feel of QUIZORA.

Future plan

Perhaps the most important feature I will be implementing is the ability to explore QUIZORA with friends in real time. Users can create custom rooms with unique codes, which enables them to participate in quizzes together and make learning more interactive and shared.

Smarter UI Animations: To add to that, I want to make it more interactive with UI animation features. These will make the platform more interactive and visually appealing to its users.

Integration of Image Generation: Another exciting feature in the future is to integrate image generation into QUIZORA. This will enable users to create image-based questions, hence opening a whole new dimension toward quiz formats and enhancing the learning experience altogether.

Conclusion

QUIZORA is innovative in its use of multiple AI models because such practice not only enriches the quiz generation process but also guarantees a way in which every user may find the perfect fit for them. QUIZORA gives users options and ownership in order to make their learning more personalized and effective.

Installation

For installation follow following steps:

Install nodejs and mongodb into your machine.

Clone the Repository

git clone https://github.com/Subash-Lamichhane/QUIZORA.git

Frontend Setup
Navigate to the frontend directory and install dependencies:

cd QUIZORA/frontend
yarn

Start the development server:

yarn run dev

Backend Setup
Navigate to the server directory and install dependencies:

cd ../backend
yarn

Set up the environment variables by creating a .env file in the backend directory and add given details:

MONGO_URI=mongodb://localhost:27017/quizdb
NAGA_API_KEY="YOUR NAGA KEY HERE"
MISTRAL_API_KEY="YOUR MISTRAL KEY HERE"
OPENAI_BASE_URL=https://api.naga.ac/v1
GROQ_API_KEY="YOUR GROQ API KEY HERE"

• You can get your MISTRAL_API_KEY from here
• You can get GROQ_API_KEY from here
• You can get NAGA_API_KEY from NagaAI's discord server.

Start the backend server:

yarn run dev

The backend server will be running on PORT 3000.

Populate database with sample data while backend is running:

node populateDatabase.js

Usage:

1. Navigate to the Quizora Page: Start by clicking "Get Started" at home page.
2. Choose Your Tags: Select the tags you're interested in, like Science, Technology, or Space.
3. Select an AI Model: Pick a model based on your preferred performance—speed, creativity, or balanced.
4. Generate Your Quiz: Hit the "Quizora" button and watch as your personalized quiz is generated instantly.
5. Explore quizzes: Swap cards to get next cards, click on card to view answer to question.

End Results:

Explore Section:

Create Quizora:

Add Details:

Quizora:

Demo

Click here for demo

This project was created for Quira quest 16: School of open source
To explore Quira you can visit:
https://quira.sh/

Support Me! 🌟

Help me by:

Voting for me on Quira: Vote here!

Starring my GitHub repo: Give my repo a star!