Interactive Web-Based Quiz Platform

This repository contains the source code for a web-based quiz platform. The platform is equipped with an integrated quiz creation tool, quiz taker, question bank and a gamification feature for interactive quizzes. This was developed as part of the final year project for my Electrical and Electronic Engineering degree.

Currently there are already existing quiz platforms available. However, there is a lack for a singular product that incorporates both regular and gamified quizzes to cater for either professional or entertainment applications. Hence, this project aims to provides a versatile one-stop solution that addresses this problem. Its main objective is to enhance student participation and improve learning outcomes in classrooms.

Database and Website Hosting

The platform utilizes a Microsoft Azure SQL Database to store all quiz data. The website itself is hosted using Microsoft Azure Static Web Apps. These web apps have an integrated feature that allows them to connect seamlessly to an Azure SQL Database without needing any backend coding, and retrieves data using REST API. The quiz platform is deployed online as a web application, and the source files are stored in a GitHub repository.

The website can be accessed through the following link:
https://green-mud-023b7ab00.4.azurestaticapps.net/login.html

Username: teacher
Password: teacher

Note

As the database is currently offline, please wait for 1-2 minutes after the first login attempt, then refresh the login page and try again. The database will be awakened after the first login attempt, and the username and password can then be authenticated.

The Azure SQL Database was set up using a free student package, which only has a one year trial period. Hence, the online quiz platform will only be operational till 13/11/2024, after which the database will then be offline indefinitely.

JavaScript Libraries/Framework

Bootstrap 5
MathJax
MathJS
FileReader
jQuery

Features

Quiz Creator and Editor
- An integrated quiz creation tool with 6 different question types.
Quiz Taker
- A tool to attempt the created quizzes. It's equipped with a point allocation system, feedback system and timer.
Question Bank
- A structured repository to store questions for future quizzes. It's equipped with import/export and search/filter functionalities.
Interactive Quiz
- An integrated tool to host interactive quizzes. It gamifies existing quizzes by adding video game and interactive elements.

Code Structure

login.html: Login page for quiz platform.
dashboard.html: Home page to access to all the various features.
index.html: Integrated quiz creation tool.
editor.html: Selection page to choose an existing quiz to be edited.
quiz_edit.html: Integrated quiz editing tool.
tester.html: Selection page to choose an existing quiz to be attempted.
quiz_test.html: Integrated quiz taking tool.
qbank.html: Integrated question bank.
interactive.html: Selection page to convert exisiting quizzes into interactive quizzes and host them.
lobby.html: Game lobby for all participants to join the interactive quiz.
waiting.html: Waiting room for all participants before the interactive quiz starts.
int_quiz_question.html: Main interactive quiz screen where the game is carried out. Questions and answer choices are displayed along with a leaderboard and other video game elements.
int_quiz_answer.html: Main interactive quiz screen where each participant selects their desired answer choice, and the points earned for each question is calculated and displayed.
assets: Contains all the styles, libraries, fonts, images and frameworks needed for the website to operate.
swa-db-connections: Configuration file for Static Web Apps to Microsoft Azure SQL Database connection.

Usage

Clone this repository.
Download all HTML files and the 'assets' folder into the same directory.
Inspect all HTML files, and remove all occurences of the following code snippet:
```
const endpoint = '/data-api/rest/#';
const response = await fetch(endpoint);
const data = await response.json();
```
where '#' can be any value. This code snippet utilizes REST API to query data from the database in JSON format.

Replace all data variables with a dummy JSON object. For example:

data = {"value":[{"id":24,"course_id":"ENG1","quiz_id":"QZENG4","q_id":"2","q_type":"calc_multi"},{"id":25,"course_id":"ENG1","quiz_id":"QZENG4","q_id":"1","q_type":"calc"},{"id":26,"course_id":"ENG1","quiz_id":"QZENG1","q_id":"3","q_type":"sa"},{"id":27,"course_id":"ENG1","quiz_id":"QZENG1","q_id":"4","q_type":"essay"}]};

Refer to the subsequent code below each data variable to identify the key/value pairs needed.
Open dashboard.html using your default browser.
Access the desired feature by selecting any one of the cards in the home page.
If you do not wish to download the files onto your local machine, you may proceed to test the platform using the link: https://green-mud-023b7ab00.4.azurestaticapps.net/login.html

Examples

Login Page

Home Page (Dashboard)

Quiz Creator

Up to 6 different question types are made available to the educator.

Question Types

Multiple Choice
True/False
Short Answer
Essay

The correct answer is in the form of keywords. The total mark for the question is divided by the number of keywords the educator has set. Thus, the quiz taker will be awarded a portion of the total marks for each correct keyword he/she has included in his/her essay answer.
Calculated

Calculated questions are able to generate random numeric values which populate the questions, using a mathematical formula keyed in by the educator. This prevents academic misconduct among students as they cannot copy each other's answer, due to all values will be different. The answer only accepts numerical values. The range of numbers which the random values are generated from is also set by the educator.
Calculated Multichoice

Same concept as calculated questions, except the quiz takers are provided with 4 answer choices to choose from. The educator can set the format of which the answer choices are displayed in.
Get From Question Bank

The quiz creator can access, retrieve and duplicate questions directly from the question bank.

Quiz Editor

The quiz editor has the exact same layout as the quiz creator, except that it is only used to make changes to existing quizzes or delete them.

Quiz Tester

The quiz tester screen is equipped with a quiz navigation box to navigate between each question, a timer, and an automated feedback card system to display the correct answers when the quiz has ended.

Question Bank

The interface of the question bank is similar to the quiz creator tool, except that the existing questions in the bank are loaded beforehand. It is also equipped with a search and filter functionality.

Interactive Quiz

Starting Page

This page is where the educator can host an interactive quiz session using existing quizzes, or where participants can join ongoing interactive quizzes using the provided unique quiz PIN.
Lobby

The lobby screen displays the unique quiz PIN to join the session, along with each participant's name. This allows the educator to wait for all students to join the quiz before starting the session.
Waiting Room

This screen acts as a waiting room for all participants before the game session starts.
Game Session (Educator's Screen)
Game Session (Student's Screen)

The points earned for each question is calculated using a custom algorithm. For each question, a maximum amount of 1000 points is available. The student is awarded an amount of points based on the time remaining to answer the question (a quick answer = more points). This amount is then multiplied by a multiplier, which is determined based on the student's correct answer streak (if the student has answered 3 questions correctly in a row, then the points for the next question will be multiplied by x1.3). No points will be awarded for wrong answers and the student's answer streak will end.