Organized
Organized
Project report in partial fulfillment of the requirement for the award of the degree of
Bachelor of Technology
In
Computer Science & Technology
Submitted By
1
CERTIFICATE
This is to certify that the project titled Quiz Hub – The Quiz Appearing Platform submitted by Anamitra
Mondal- 12022002022044, Anish Hazra- 12022002022012, Bibek Dhara - 12022002022014, Ishika Saha
- 12022002022020 & Raunak Das- 12022002002086 students of UNIVERSITY OF ENGINEERING &
MANAGEMENT, KOLKATA, in partial fulfillment of requirement for the degree of Bachelor of Computer
Science and Technology, is a bonafide work carried out by them under the supervision and guidance of Prof.
Dr. Subhalaxmi Chakraborty during the 3rd Semester of academic session of 2022 - 2026. The content of
this report has not been submitted to any other university or institute. I am glad to inform that the work is
entirely original and its performance is found to be quite satisfactory.
Signature of Guide
We would like to take this opportunity to thank everyone whose cooperation and
encouragement throughout the ongoing course of this project remains invaluable to us.
We are sincerely grateful to our guide Prof. Dr. Subhalaxmi Chakraborty of the Department of
CST & CSIT, UEM, Kolkata, for her wisdom, guidance and inspiration that helped us to go
through with this project and take it to where it stands now.
Last but not the least, we would like to extend our warm regards to our families and peers who
have kept supporting us and always had faith in our work.
Anish Hazra
Anamitra Mondal
Bibek Dhara
Ishika Saha
Raunak Das
3
TABLE OF CONTENTS
Page No.
• ABSTRACT ……………………………………………………………………………………… 5
• INTRODUCTION ……………………………………………………………………………… 6
• BIBLIOGRAPHY ………………………………………………………………………..……... 28
4
ABSTRACT
The "Quiz Hub" is a web-based quiz platform made using HTML, CSS, Python - Flask &
MySql. The project aims to create an interactive and engaging platform for conducting
quizzes, facilitating learning, and assessing knowledge. The platform allows users to set up
custom question papers, take tests, and view their scores for any number of students. The
development process involves designing intuitive user interfaces, implementing backend
functionality for question management and test evaluation, and ensuring scalability and
security. Key features include dynamic quiz creation, real-time feedback, and user
authentication. Through the integration of gamification elements and interactive learning
experiences, the platform seeks to enhance user engagement and knowledge retention. The
report discusses the design principles, development methodologies, and technical challenges
encountered during the project. Future enhancements and potential applications of the quiz
platform are also explored, emphasizing its utility in educational settings, corporate training
programs, and online learning communities.
5
INTRODUCTION
In this evolving world of digital learning, the Quiz Appearing Platform "Quiz Hub" is a crucial
and user-friendly solution to the process of creating and managing tests/quizzes especially in
educational institutions. Developed & coded by Bibek, this web-based application is designed
to fulfill the needs of every educator’s, institutions, and organizations who want a liable
platform for conducting quizzes and efficiently storing and analyzing results. This project is a
proof of the power of technology which can enhance the field of education.
The age-old methods of paper-based assessments and manual score calculations, are not only
time and resource-consuming but also can have errors. This project solves all these challenges.
With its automated service, it simplifies the job of creating multiple-choice question papers
and assessing the results. Even for students, the Web-Application offers a user-friendly
experience, allowing them to participate in quizzes by providing answers to each of the
questions presented. This Web-Application even allows the students to view their scores and
ranks in the test by collecting their responses.
In this document, we present an abstract that marks the essence of the project and its key
features. We would love to get feedbacks on this which would help us grow!
6
LITERATURE SURVEY
Building web-based quiz platforms, like QuizHub, is a significant effort to make learning fun
and evaluate student's knowledge. While there's a lot of information about online learning
and testing tools, a few features of QuizHub stand out:
1. Interactive Learning: Applications like QuizHub are part of interactive learning, which uses
technology to get students involved. Studies show that when students interact with their
learning material online, they get more engaged and learn better.
2. Tests and Feedback: Good testing is crucial for learning. Online quiz platforms like QuizHub
offer ways to test student's knowledge quickly and give them feedback right away. This helps
students improve faster.
3. Easy-to-Use Design: QuizHub is designed to be easy for users to understand and navigate.
Institutions setting up quizzes and students appearing for those quizzes both will have a user-
friendly experience here.
4. Using Technology Wisely: QuizHub knows how to blend technology with learning and
provides improvised learning methods. QuizHub is built to help teachers and students teach
and learn better using technology.
5. Keeping Things Safe: QuizHub is safe enough for use and keeps user information secure. It
follows best practices for online security to make sure users' data is protected.
To sum up, QuizHub combines ideas from research about interactive learning, testing, easy-
to-use design, using technology wisely in teaching, and keeping things safe online. By putting
all these ideas together, QuizHub hopes to be a helpful tool for teachers and students to
make learning and testing more engaging and effective.
PROBLEM STATEMENT
8
PROPOSED SOLUTION
The Code snippet of the files required to operate the Quiz Appearing Platform - Quiz Hub:
1. index.html
2. set_question_paper.html
3. test.html
4. result.html
5. thanks.html
All the codes of the above specified files are covered below -
1) app.py -
@app.route('/start_test', methods=['POST'])
def start_test():
delete_table = request.form.get('delete_questions')
if delete_table == "yes":
cmdo = "DROP TABLE IF EXISTS q_paper"
ques.execute(cmdo)
mydb.commit()
return redirect(url_for('set_question_paper'))
else:
return redirect(url_for('test'))
PROPOSED SOLUTION 1
9
quest VARCHAR(250) NOT NULL, opt1 VARCHAR(250) NOT NULL,
opt2 VARCHAR(250) NOT NULL, opt3 VARCHAR(250) NOT NULL,
opt4 VARCHAR(250) NOT NULL, correct_option VARCHAR(10))"
ques.execute(cmd)
for q in questions:
cmd2 = "INSERT INTO q_paper(quest, opt1, opt2, opt3, opt4, correct_option)
VALUES(%s, %s, %s, %s, %s, %s)"
ques.execute(cmd2, q)
mydb.commit()
flash('Questions submitted successfully!', 'success')
return redirect(url_for('test'))
except Exception as e:
flash('An error occurred while submitting questions.', 'error')
print("Error:", e)
mydb.rollback()
return render_template('set_question_paper.html', num_questions=num_questions)
@app.route('/result')
def result():
# Fetch the student name and score from the request arguments
student_name = request.args.get('student_name')
score = request.args.get('score')
# Insert the student's name and score into the 'marks' table
cur = mydb.cursor()
cmd = "INSERT INTO marks (StudentName, Marks) VALUES (%s, %s)"
cur.execute(cmd, (student_name, score))
mydb.commit()
cmd = "SELECT * FROM marks ORDER BY Marks DESC"
cur.execute(cmd)
data = cur.fetchall()
return render_template('result.html', data=data)
@app.route('/thanks')
def thanks():
return render_template('thanks.html')
if __name__ == '__main__':
app.run(debug=True)
PROPOSED SOLUTION 2
10
2) The 5 HTML Templates -
→ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body class = "welcome">
<h1>Welcome to the Modern Test Appearing System</h1>
<form action="/start_test" method="post" class = "starts">
<label for="delete_questions">Do you want to delete the existing questions?
</label>
<select id="delete_questions" name="delete_questions">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<button type="submit">Start Test</button>
</form>
</body>
</html>
→ set_question_paper.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Question Paper</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body class="set_question_paper">
<h1>Set The Question Paper</h1>
<form action="{{ url_for('set_question_paper') }}" method="POST"
class="add_questions">
<label for="num_questions">Number of Questions:</label>
<input type="number" name="num_questions" id="num_questions"
value="{{ num_questions }}" required>
<br><br>
{% for i in range(num_questions) %}
<label for="question_{{ i+1 }}">Question {{ i+1 }}:
</label>
<input type="text" name="question_{{ i+1 }}" id="question_{{ i+1 }}"
required><br>
<label>Options:</label><br>
{% for j in range(4) %}
<div class="option">
<label for="option_{{ i+1 }}_{{ j+1 }}"
class="option_label">Option_{{ j+1 }}</label>
<input type="text" name="option_{{ i+1 }}_{{ j+1 }}"
class="option_input" required></div>
{% endfor %}
<label for="correct_option_{{ i+1 }}">Correct Option:</label>
<input type="text" name="correct_option_{{ i+1 }}"
class="correct_option" required>
<br><br>
{% endfor %}
<input type="submit" value="Submit">
</form>
PROPOSED SOLUTION 3
11
</body>
</html>
→ test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body class="test">
<h1>University Of Engineering & Management - Kolkata</h1>
<form action="{{ url_for('test') }}" method="POST">
<label for="student_name">Your Name:</label>
<input type="text" name="student_name" id="student_name" required>
<br><br>
{% for i in range(num_questions) %}
<div class="question">
<p><strong>Question {{ i+1 }}:</strong> {{ questions[i][1] }}</p>
<!-- Display the question -->
<ul class="options">
{% for j in range(2, 6) %}
<li>{{ questions[i][j] }}</li> <!-- Display options -->
{% endfor %}
</ul>
<label for="answer_{{ i+1 }}">Your Answer:</label>
<input type="text" name="answer_{{ i+1 }}" id="answer_{{ i+1 }}"
required>
<input type="hidden" name="correct_option_{{ i+1 }}"
value="{{ questions[i][6] }}">
<!-- Hidden field to store correct option -->
</div>
<br>
{% endfor %}
PROPOSED SOLUTION 4
12
→ result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Result</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body class="result">
<h1 class="result-heading">Result</h1>
<table class="result-table">
<thead>
<tr>
<th>Student Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
{% for entry in data %}
<tr>
<td>{{ entry[0] }}</td>
<td>{{ entry[1] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Add the Okay button -->
<div class = "butt">
<form action="{{ url_for('test') }}" method="GET">
<button type="submit">Next</button>
</form>
<form action="{{ url_for('thanks') }}" method="GET">
<button type="submit">End Test</button>
</form>
</div>
</body>
</html>
→ thanks.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thanks</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body class = "greet">
<h1 class = "thanks">Thank You!</h1>
<div class="summary">
<h2>Project Summary: Modern Test Appearing System</h2>
<p><strong>Description:</strong> The Modern Test Appearing System is a web application design
ed to facilitate online testing. It allows users to set up question papers, take tests, view results,
and manage test-related functionalities.</p>
<h2>Features:</h2>
<ol> <li><strong> User-Friendly Interface:</strong>The application provides an intuitive user
interface for setting up question papers and taking tests, making it easy for users to navigate and i
nteract with the system.</li>
<li><strong> Dynamic Question Paper Creation:</strong>Users can dynamically create questi
on papers by specifying the number of questions and providing the questions, options, and correct ans
PROPOSED SOLUTION 5
13
wers.</li>
<li><strong> Scalability:</strong>The system allows for scalability by enabling users to
set up any number of questions for a test, ensuring flexibility and adaptability to varying testing n
eeds.</li>
<li><strong> Real-Time Test Taking:</strong>Users can take tests in real-time, providing
instant feedback on their performance and allowing for immediate grading and result generation.</li>
<li><strong> Result Generation:</strong>Upon test completion, the system generates result
s, displaying student names and their corresponding scores in descending order, providing quick insig
hts into student performance.</li></ol>
<div class="pros-cons">
<h2>Pros:</h2>
<ol><li><strong> Flexibility:</strong> The system offers flexibility in creating and admi
nistering tests, accommodating varying test formats and requirements.</li>
<li><strong> Scalability:</strong> Users can set up question papers with any number o
f questions, making the system scalable and suitable for both small-scale and large-scale testing sce
narios.</li>
<li><strong> Real-Time Feedback:</strong> Test takers receive immediate feedback on t
heir performance, enhancing the learning experience and enabling timely intervention if needed.</li>
<li><strong> Efficiency:</strong> Automated result generation streamlines the assessm
ent process, saving time and effort for instructors and administrators.
</li></ol>
<h2>Cons:</h2>
<ol><li><strong> Limited Security Measures:</strong> The application may lack advanced se
curity features to prevent cheating or unauthorized access to test content.</li><li><strong> Dependen
cy on Internet Connectivity:</strong> Users require a stable internet connection to access and use th
e system, which may pose challenges in areas with poor connectivity.</li></ol>
</div>
</div>
</body>
</html>
3) Lastly the unified Stylesheet which gave life to the Web-Application - style.css
Follow the link for the style.css file as it is quite lengthier in size
link- https://drive.google.com/file/d/1ten_T6ZFEoByJyuT8sKqrH66SJuojwWU/view?usp=sharing
This files altogether makes it possible for an individual to run our project QuizHub - The Quiz Appearing Platform.
PROPOSED SOLUTION 6
14
Order & Structure Analysis -
The hierarchical order the Quiz Appearing Platform is as follow -
The Above Hierarchy Model Explains the working order of the Coded
Application, to understand the flow of the program precisely a Proper Workflow
Diagram and is given Below
15
In order to briefly understand the flow of the Applications Backend, A Proper
Logical Flow of the Backend is necessary that will help an individual to
understand the working of the backend without understanding the actual code
16
Also for a project with so many multiple files, it is really quite important to
construct a proper workflow diagram which is easier to understand for any
individual whether from a CS or a Non - CS Background, so that he/she can
understand the workflow of the Project just by looking at the diagram rather
understanding the codes as a whole.
17
EXPERIMENTAL SETUP
To set-up the quiz appearing platform “Quiz Hub” and make it runnable in a User’s Personal
Computer, the following steps must be fulfilled in order to run the Application, as this is a
testing version of the Application, it must be run on a local server / developmental server.
1) Installation Of Python & MySQL – In order to run the Web Application both the
software’s / programming languages i.e., The MySQL Database and Python must be installed
manually in the users PC. One can download the required software’s from their official
respective websites, (i) Python from https://www.python.org
(ii) MySQL from https://www.mysql.com
(iii) Any Web-Browser: Like Google Chrome, etc.
2) After Installing the Software’s, the user must install all the specified package of Python in
order to establish connection between the Backend & the Frontend as well as with the local
MySQL Database which is used for storing purpose in this initial stage.
(i) Press Win + R -> Type cmd & press Enter.
(ii) Type “pip install flask mysql-connector-python” & Press Enter.
3) Creation of the Database: Next we will be required to create a MySQL database for the
Question Set & Result using the following MySQL Commands after opening the MySQL
Command Line Client from the Start UP Menus of the System – “create database question;”
then “create table marks (StudentName VARCHAR(250) NOT NULL, Marks VARCHAR(250)
NOT NULL);” then the user can type the command “exit” to close the MySQL Command Line
Client.
4) Once The above Steps are performed the User will be all – set to run the Program in his/her
PC and Enjoy the Efficiency, Accuracy & Compatibility of “Quiz Hub – The Quiz Appearing
Platform”, all he will be required to do is to run the App.py through his/her integrated
terminal, once the code runs successfully in the terminal the user is hereby instructed to visit
http://127.0.0.1:5000 which is the in general local dedicated server for hosting such Web-
Application.
18
Output Analysis
The moment when the mentioned steps in the Experimental Setup are
performed successfully, The user will be able to run the Program at ease… all
they will be required to do is run the command “python app.py” in their
integrated terminal of the system also to note the directory of the terminal
should also be same as the directory of app.py, the output will be as follow -
Output Analysis 1
19
Above is the Landing page of the Web-Application “QuizHub” where the user
will be asked to select “Yes” or “No” from a dropdown menu by selecting which
he/she will be redirected further-
If the user selects “Yes” that will indicate that the user wants to set a
Question Set of his/her own before initiating the Quiz, therefore will be
redirected to “set_question_paper.html” where he/she will be able to store
his/her question set at ease which will afterwards be store in the local
database once submitted furthermore he/she will also be redirected to
“test.html” for initiating the quiz
If the user select “No” that will indicate that the user wants to proceed with
the existing Question set which was previously stored in the local database,
therefore by selecting “No” he/she will directly be redirected to “test.html”
which is basically the Quiz initiating template and thus will be able to host
the Quiz for his/her students without any hustle.
Output Analysis 2
20
→ “set_question_paper.html”
Output Analysis 3
21
→”test.html”
Output Analysis 4
22
→”result.html”
In the “result.html” there are two buttons named “Next” & “End Test” each of
which has different roles, as in the “Next” button is used to take the Quiz of the
next user by redirecting the next user to the “test.html” template where he/she
will be able to give the test just like his/her previous user, when he/she
completes the test he/she will again be redirected to “result.html” where he/she
will be able to view his/her result just like the previous user, hence like this the
loop will continue every time the “Next” button will be clicked whereas the “End
Test” button when clicked will redirect the user to the “thanks.html” page which
is basically the end of the conduct.
Output Analysis 5
23
→”thanks.html”
Output Analysis 6
24
Result Analysis:
Quiz Hub - The Quiz Appearing Platform
Introduction
The Quiz Hub is a Flask application designed to facilitate the creation,
administration, and assessment of quizzes and tests. It provides a user-
friendly platform for educators and students to interact with quizzes, manage
assessments, and view results effectively.
The Quiz Appearing Platform “Quiz Hub” does simplify the process of creating and hosting a
test / quiz, it is and will be saving time for its each and every respective user in an efficient
manner with on - time accuracy, thus will also be providing user satisfaction. Its user-friendly
interface, efficiency, and accuracy in scoring and evaluating marks make it a valuable tool for
educators and institutions all around the globe. As technology continues to reshape the
education field, this system serves as an exemplar of innovation and user-centric design, with
potential for further enhancements and impact in the far future.
Future Scopes –
• A more Comprehensive Report & Analytics can be coded in the future to assess the
subjects more precisely in certain possible aspects.
• Duration of Exam for each student can also be added in the code, so that each student
will be having a fixated time to complete the exam.
• Quiz customization - Allow quiz creators to customize the number of questions,
difficulty levels and categories for each quiz.
• Mobile Application - A mobile application version of the system can be made in the
future to support mobiles and tablets using languages like Flutter to reach a wider
audience.
• Multi – Language Support as well can be initiated.
27
Bibliography
1. Duckett, Jon. (2011). "HTML and CSS: Design and Build Websites".
Python:
3. Downey, Allen. (2015). "Think Python: How to Think Like a Computer Scientist".
4. Sweigart, Al. (2015). "Automate the Boring Stuff with Python: Practical Programming for
Total Beginners".
Flask - Pyrhon:
5. Grinberg, Miguel. (2018). "Flask Web Development: Developing Web Applications with
Python" .
6. Shalabh Aggarwal. (2019). "Flask Framework Cookbook: Over 80 proven recipes and
best practices for using Flask, Python, and its related libraries for effective web
development".
MySQL:
7. Zeller, Ryan. "Python and MySQL Development." 1st ed., Packt Publishing, 2010.
8. Reese, George. "MySQL Pocket Reference: SQL Statements, Functions and Utilities and
more." O'Reilly Media, 2016.
28