Najua: A Quiz Webapp

Video Demo: https://youtu.be/6rUOQWw4XvY

Description:

Najua means I know in my native swahili. A perfect name for this quiz app that lets users create custom quizzes, play saved quizzes and keep track of quizzes taken and thier scores.

Built With

• 
• 
• 
• 
• 
• 
• 

Getting Started

Prerequisites

• virtual environment

• Python3

• Redis-server

sudo apt-get update  
sudo apt-get install redis-server  
sudo service redis-server start 

• Firebase project go to https://console.firebase.google.com/ and configure a firebase project
  Build authentication (email & password), realtime database, and Storage

On add firebase SDK step, copy the values for:

# firebase config
apiKey=
authDomain=
projectId=
storageBucket=
messagingSenderId=
appId=
measurementId=
database_url= 

Add these values to the .env file in the root folder of the app(.env.example is provided)

Add this block to realtime database rules to enable search by username:

{
  "rules": {
    ".read": true,
    ".write": true,
      "users": {
      ".indexOn": ["username"]
      }
  }
}

Installation

1. Clone the repo

git clone [email protected]:bee2100cs/najua.git

2. Activate virtual environment then install flask packages:

pip install -r requirements.txt

3. clone auth submodule
   Najua uses an auth submodule stored in a different repository that needs to be cloned into the main repo

git submodule init  
git submodule update --remote --recursive  

Change git remote url to avoid accidental pushes to base project

git remote set-url origin [email protected]:bee2100cs/flaskAuth.git
git remote -v # confirm the changes

(back to top)

Usage

Start flask app

flask run

Najua lets users take quizzes as anonymous users or create user accounts to keep track of quizzes taken.
There are three types of quizzes one can take:

1. A random Quiz:
   User gets to set only the number of questions and they
   are presented with a quiz with random categories, difficulty levels and quiestion type.
2. A Custom quiz:
   Here a user has more control and they can select the category, difficulty level and answer-type(multiple or boolean)
3. Existing quiz:
   The user takes existing quizzes created by other users.

Users can also create a user profile to save their quiz scores

Code explanation

Auth

authentication.py

This Flask blueprint defines several routes to handle user authentication,
including sign-up, login, password reset, and account deletion,
using Firebase as the backend for authentication and user management.

config.py

This file has an ApplicationConfig class that manages configurations,
including handling environment variables, Firebase, and Redis for session management.

profile.py

This code defines a Flask blueprint that manages user profiles and
onboarding and storing user datain the firebase real-time database, and storage.

main

routes.py

This code defines the quiz routes and logic for a Flask application, managing:

• three quiz routes to render the three quiz-type pages
• /api/quiz: a quiz creation route that fetches questions from Open Trivia Database API.
• /search-quizzes: route to search for existing quizzes with the given user parameters
• /quiz: quiz answer handling
• / results: Displays the user's performance on a quiz, showing correct answers and user selections.

helpers.py

This code contains various helper functions that manage the quiz system,
interacts with the Trivia API for fetching quiz questions,
stores data in Firebase database, and tracks user quiz progress.

JS code

app.js

javascript code for handling forms and displaying quiz questions dynamically.

firebase.js

JavaScript code for handling user authentication

onboarding.js

Implements a multi-step onboarding form using
jQuery and Axios for AJAX requests.

templates

several html templates for rendering pages for the quiz interface uses bootstrap and jinja2 templating engine

Styling

styles.css

contains extra code for styling focusing on layout, background, cards, and interactive elements.