A MINOR PROJECT REPORT ON

StudyQuest
Submitted in partial fulfilment of the requirements for the award of
the degree of

BACHELOR OF COMPUTER APPLICATIONS

to
Guru Gobind Singh Indraprastha University, Delhi

Under the Guidance Submitted by:-

of:- Ms. Shweta Sharma Nimisha R Nair Neetu Bansal
(Associate Professor) BCA-VI Sem 03024002020
BCA-VI Sem 3522400202
CS/IT Department

Session 2020-2023

TRINITY INSTITUTE OF PROFESSIONAL STUDIES

(Affiliated to Guru Gobind Singh Indraprastha University, Delhi)
Ranked “A+” Institution by SFRC, Govt. of NCT of India
Recognized under section 2(f) of the UGC Act, 1956
NAAC Accredited “B++” Grade Institution

~1~
 CONTENTS
S.No. Topic Page No.

1. CERTIFICATE(S) 3
2. ACKNOWLEDGEMENTS 5
3. LIST OF TABLES 7
4. LIST OF FIGURES 7
5. LIST OF ABBREVIATIONS 7
6. INDEX- WEBSITE SCREENSHOTS 8
7. CHAPTER-1: INTRODUCTION 9
8. CHAPTER-2: SYSTEM REQUIREMENT ANALYSIS 11
9. CHAPTER-3: SYSTEM FEASIBILITY STUDY 16
10. CHAPTER-4: SYSTEM DESIGN 20
11. CHAPTER-5: SYSTEM DEVELOPMENT (CODING) 27
12. CHAPTER-6: SYSTEM IMPLEMENTATION 119
(SCREENSHOTS)
13. CHAPTER-7: SYSTEM TESTING 136
14. CHAPTER-8: FUTURE SCOPE 163
15. REFERENCES 165

~2~
 TRINITY INSTITUTE OF PROFESSIONAL STUDIES
(Affiliated to Guru Gobind Singh Indraprastha University, Delhi)
Ranked “A+” Institution by SFRC, Govt. of NCT of India
Recognized under section 2(f) of the UGC Act, 1956
NAAC Accredited “B++” Grade Institution

To Whom It May Concern

I, Nimisha R. Nair, Enrolment No.03024002020 from BCA-VI Sem of the Trinity Institute of
Professional Studies, Delhi hereby declare that the Minor Project Report entitled
StudyQuest at Trinity Institute of Professional Studies is an original work and the same has
not been submitted to any other Institute for the award of any other degree.

Date: Signature of the Student

Certified that the Project Report submitted in partial fulfillment of Bachelor of Computer
Applications (BCA) to be awarded by G.G.S.I.P. University, Delhi by Nimisha R. Nair,
Enrolment No. 03024002020 has been completed under my guidance and is Satisfactory.

Date:

~3~
 TRINITY INSTITUTE OF PROFESSIONAL STUDIES
(Affiliated to Guru Gobind Singh Indraprastha University, Delhi)
Ranked “A+” Institution by SFRC, Govt. of NCT of India
Recognized under section 2(f) of the UGC Act, 1956
NAAC Accredited “B++” Grade Institution

To Whom It May Concern

I, Neetu Bansal, Enrolment No. 35224002020 from BCA-VI Sem of the Trinity Institute of
Professional Studies, Delhi hereby declare that the Minor Project Report entitled
StudyQuest at Trinity Institute of Professional Studies is an original work and the same has
not been submitted to any other Institute for the award of any other degree.

Date: Signature of the Student

Certified that the Project Report submitted in partial fulfillment of Bachelor of Computer
Applications (BCA) to be awarded by G.G.S.I.P. University, Delhi by Nimisha R. Nair,
Enrolment No. 03024002020 has been completed under my guidance and is Satisfactory.

Date:

Signature of the Guide

Name of the Guide:

Designation:

~4~
~5~
 ACKNOWLEDGMENT

I am immensely grateful to Ms. Shweta Sharma for their invaluable

support and guidance throughout my major project. Their expertise,
dedication, and encouragement have been instrumental in shaping the
success of my project, StudyQuest. I extend my heartfelt appreciation to
my friends for their unwavering guidance and insightful feedback.

I would also like to thank the faculty members for fostering an

environment conducive to learning and growth. Their contributions have
played a pivotal role in my project's development, and I am truly grateful
for their assistance.

I made this project not only for marks but to also increase my knowledge.

Neetu Bansal
35224002020
BCA VI-Sem (2nd Shift)

~6~
LIST OF TABLES

SNO TABLE TITLE PAGE NO.

1. SOFTWARE REQUIREMENTS 14
2. HARDWARE REQUIREMENTS 15
3. USER 24
4. ADMIN 24
5. HISTORY 24
6. OPTIONS 25
7. QUESTIONS 25
8. QUIZ 25
9. RANK 25
10. ANSWER 26
11. FEEDBACK 26

LIST OF FIGURES

FIG NO. FIGURE TITLE PAGE NO.

1. ER DIAGRAM 21
2. 0-LEVEL DFD 22
3. 1-LEVEL DFD 23

LIST OF ABBREVIATIONS

SNO. ABBREVIATION FULLFORM

1. LMS Learning Management Systems
2. HTML Hypertext Markup Language
3. CSS Cascading Style Sheet
4. PHP Php Hypertext pre-processor
5. CGI Common Gateway Interface
6. CLI Command Line Interface
7. RDBMS Relational Database management system
8. SQL Structured Query language
9. LAMP Linux-Apache-MySQL-Php

~7~
~8~
CHAPTER-1: INTRODUCTION

1.1 INTRODUCTION

The Corona virus 2019 (COVID-19) pandemic has caused extraordinary challenges in
the global education sector. Most countries temporarily closed educational institutions
in an attempt to contain the spread of the virus and reduce infections. Now that things
are finally back to normal, it is not surprising that a lot of students are struggling to
get back into their old habits of studying. After spending almost 2 years indoors, in
front of a device using it as a study material, it's obvious that students will struggle to
get back into the traditional way of studying.

Education is better implemented through active, student-centered learning strategies,

as opposed to traditional educator-centered pedagogies. At the time of the COVID-19
outbreak, the decision to boost the use of active student-centered learning methods
and digitalization had already been made at both the governmental and institutional
levels because student-active learning (such as the use of student response systems
and flipping the classroom) increase motivation and improve learning outcomes.
However, the implementation of this insight was lagging behind.

A virtual classroom is an online learning environment where teachers and students

can interact and collaborate in real-time. It is a digital space where students can access
quality teachers from anywhere in the world, breaking down barriers to synchronous
learning such as cost, distance, and timing. Virtual classrooms utilize video
conferencing, online whiteboards, and screen sharing to allow educators to hold live
lectures, virtual office hours, and discussions with students in an interactive setting. In
a virtual classroom, students can engage with the material from any device that can
connect to the internet, and lessons are created based on the needs of the student. The
virtual classroom provides an abundance of opportunities, especially when combined
with self-study platforms or when used in addition to traditional classroom learning
activities. Synchronous virtual classrooms have the potential to provide significant
added value to online learning by addressing the needs of the learners as they relate to
social interaction and psychological safety.

~9~
1.2. OBJECTIVE OF THE PROJECT

The general objective of the virtual classroom is to develop a user-friendly, reliable

and dependable classroom for students.

This project has the following specific objectives:

 To develop a website that will surely help a student in their academics.

 To design a website able to accommodate a huge number of students at a time.
 To evaluate its performance and acceptability in terms of security, user-
friendliness, accuracy, and reliability.
 To improve the communication between the client and the server
and minimize the time of solving problems.

 To incorporate study tools like quizzes, flashcards, etc.

 To create a website combining several tools quizzes, flashcards, study links

, online notes and courses under one site, making it more accessible and
time- saving for students

Some of the main objectives of a virtual classroom is to:-

 Ensure student satisfaction.

 Enhance the quality of learning and teaching.
 Meet the learning style or needs of students.
 Improve the efficiency and effectiveness.
 Improve user-accessibility and time flexibility to engage learners in the
learning process.

~ 10 ~
 CHAPTER-2:
SYSTEM REQUIREMENT ANALYSIS

2.1 SYSTEM ANALYSIS

System study is the first stage of a system development life cycle. This gives a clear
picture of what the physical system actually is. The system is done in two phases. In
the first phase, the preliminary survey of the system is done which helps in identifying
the scope of the system. The second phase of the system study is a more detailed and
in-depth study in which the identification of user’s requirements and limitations and
problems of the present system are studied. After completing the system study, a
proposal is prepared by the user.

System analysis is the detailed study of the various operations performed by the
system and relationships within and outside the system. It is the most essential part of
the development of the project. During system analysis data is collected on the
available file, decisions points and transactions handled by the presence system.
System analysis must carry out a customary approach to the use of computers for
problem solving.

2.2 THE EXISTING SYSTEM

The use of networked computers to enhance learning was introduced as early as 1980,
when Chambers suggested that distance learning experiments should be
implemented in a way that could enable in-house learning for some educational
materials.
The term virtual classroom was introduced in 1986, when Hiltz perceived the use of a
computerized conference system as a “virtual classroom”. The early uses of virtual
classrooms focused on practical issues such as sound and video and use of a
“pencil” for the whiteboard, while the main problems reported were related to limited
bandwidth and lack of “turn-taking”. As video conference technology evolved and
matured, a lot of online synchronous tools for learning have emerged offering
choices for virtual classrooms. Most environments offered features like real-time
voice and video, whiteboard, slides presentation, text-based interaction and means for
learners’ feedback.

~ 11 ~
The use of virtual classrooms was initially driven by necessity, mainly in the context
of synchronous distance learning, where a professor had to emulate a typical
classroom for distance students. In these early examples, the main goal was to offer
students an experience similar to a face-to-face classroom. In many cases this wasn’t
successful, due to network and equipment limitations that lead into sound and
video problems, as well as due to lack of suitable tools (i.e. a discussion
administration feature). As new environments started to include more features,
leaving the sound and video issues in the past, focus was given into the quality and the
usability of the environment. Using virtual classrooms wasn’t only something for
distance learners, but also for blended learning, or even as a supplement of on-campus
courses.

2.2.1 Drawbacks of Existing system

Schools and teachers have done their best to shift instruction from the classroom to
online platforms, such as Zoom. Since not all students have computing devices, and
some—especially those in rural areas—often lack internet access, school
administrators have had to seek workarounds. Many have dug into reserve funds or
worked with business donors to equip students with what they need.

2.3 PROPOSED SYSTEM

The proposed system helps in many ways. It helps to study very easily. Account
maintenance also becomes easier. They can keep track of student’s marks, reports,
feedback, number of quizzes, and account details etc. The software is provided with
the facilities to find out the topics with according to the syllabus, and previous year
questions, and solutions to add or modify and delete their feedback and suggestions. It
helps in managing data of different topics according to syllabus and previous year
questions. Managing data of students, managing data of topics visited. It eliminates
the drawbacks of existing systems and also includes some more features.

~ 12 ~
 2.4. TECHNOLOGY OVERVIEW

2.4.1 FRONT END:

HTML, or Hypertext Markup Language, is used by web programmers to describe the

contents of a web page. It is not a programming language. You simply use HTML to
indicate what a certain chunk of text is-such as a paragraph, a heading or specially
formatted text. All HTML directives are specified using matched sets of angle
brackets and are usually called tags. For example<B> means that the following text
should be displayed in bold. To stop the bold text, use the </B> directive. Most
HTML directives come in pairs and surround the affected text.

CSS stands for "Cascading Style Sheet." Cascading style sheets are used to format the
layout of Web pages. They can be used to define text styles, table sizes, and other
aspects of Web pages that previously could only be defined in a page's HTML.CSS
helps Web developers create a uniform look across several pages of a Web site.
Instead of defining the style of each table and each block of text within a page's
HTML, commonly used styles need to be defined only once in a CSS document. Once
the style is defined in cascading style sheet, it can be used by any page that references
the CSS file. Plus, CSS makes it easy to change styles across several pages at once.

JAVASCRIPT is a dynamic computer programming language. It is lightweight and

most commonly used as a part of web pages, whose implementations allow client-side
script to interact with the user and make dynamic pages. It is an interpreted
programming language with object-oriented capabilities.

2.4.2 BACK END:

PHP is a server-side scripting language created in 1995 and designed for web
development but also used as a general-purpose programming language. While PHP
originally stood for Personal Home Page, it now stands for PHP: Hypertext Pre-
processor, which is a recursive acronym. PHP code can be simply mixed with HTML
code, or it can be used in combination with various templating engines and web
frameworks. PHP code is usually processed by a PHP interpreter, which is usually
implemented as a web server's native module or a Common Gateway Interface (CGI)
executable. After the PHP code is interpreted and executed, the web server sends

~ 13 ~
resulting output to its client, usually in form of a part of the generated web page; for
example, PHP code can generate a web page's HTML code, an image, or some other
data. PHP has also evolved to include a command-line interface (CLI) capability and
can be used in standalone graphical applications.

MYSQL is an Oracle-backed open source relational database management system

(RDBMS) based on Structured Query Language (SQL). MySQL runs on virtually all
platforms, including Linux, UNIX and Windows. Although it can be used in a wide
range of applications, MySQL is most often associated with web applications and
online publishing. MySQL is an important component of an open source enterprise
stack called LAMP. LAMP is a web development platform that uses Linux as the
operating system, Apache as the web server, MySQL as the relational database
management system and PHP as the object-oriented scripting language. (Sometimes
Perl or Python is used instead of PHP.)

2.5 HARDWARE AND SOFTWARE REQUIREMENTS:

SOFTWARE:

Front End Language: HTML, CSS, JavaScript

Back End / Database: PHP, MySQL
Operating System Windows 10
Browser Brave

Table No-1: Software Requirement

~ 14 ~
HARDWARE:

Operating System Windows 10

Processor Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz 2.50
GHz
RAM 8.00 GB
Storage 512GB SSD

Table No-2 : Hardware Requirements

~ 15 ~
 CHAPTER-3:
SYSTEM
FEASIBILITYSTUDY

3.1 FEASIBILITY STUDY:

A feasibility study is a short, focused study, which aims to answer a number of

questions:

1. Does the system contribute to the overall objectives of the organizations?

2. Can the system be implemented using current technology and within given
cost and schedule constraints?
3. Can the system be integrated with systems which are already in place?

3.1.1 Technical Feasibility:

 Is the project feasibility within the limits of current technology?

 Does the technology exist at all?
 Is it available within given resource constraints (i.e., budget, schedule)?

3.1.2 Financial Feasibility:

 Is the project possible, given resource constraints?

 Are the benefits that will accrue from the new system worth the costs?
 What are the savings that will result from the system, including tangible and
intangible ones?
 What are the development and operational costs?

3.1.3 Operational Feasibility:

Define the urgency of the problem and the acceptability of any solution; if the
system is developed, will it be used? Includes people-oriented and social issues:
internal issues, such as manpower problems, labor objections, manager resistance,
organizational conflicts and policies; also external issues, including social
acceptability, legal aspects and government regulations.

~ 16 ~
3.2 METHODOLOGY

Agile model believes that every project needs to be handled differently and the
existing methods need to be tailored to best suit the project requirements. In Agile, the
tasks are divided to time boxes (small time frames) to deliver specific features for a
release.

Here is a graphical illustration of the Agile Model −

Following are the Agile Manifesto principles −

 Individuals and interactions − In Agile development, self-

organization and motivation are important, as are interactions like co-
location and pair programming.
 Working software − Demo working software is considered the best
means of communication with the customers to understand their
requirements, instead of just depending on documentation.

~ 17 ~
  Customer collaboration − As the requirements cannot be gathered
completely in the beginning of the project due to various factors,
continuous customer interaction is very important to get proper product
requirements.
 Responding to change − Agile Development is focused on quick
responses to change and continuous development

3.3 MODULES

The Modules that we created for our project are:-

 Registration/Login
This module will take the student’s information in the form of user
input (i.e., name, email, course, semester & enrollment number).

 Subject-wise Display
This module will on a more in depth display of different Computer
Applications Subjects.

 Quiz Module
This module helps students make quizzes of their own and provides
quizzes based on the syllabus. Students can make quizzes of their
own and share them with colleagues. This module also prepares
quizzes based on the syllabus.

 Flashcards Generator
This module will help create flashcards based on the syllabus, for
students to learn short answers quickly and efficiently.

 ZOOM live Server

This module will handle a 24x7 live Zoom server, where students
can get together and study without interruptions. The time spent on
the server will be recorded by every student & will be displayed on
their profile.

~ 18 ~
 Online Notes
Students can access online notes of specific subjects for their
acadamics.

 Online Course Links

Students can access online course links related to their subjects and
some specific topics

 Contact Us
Students willing to contact the admin for additional changes can
post their queries on this page.

~ 19 ~
 CHAPTER-4
SYSTEM DESIGN

4.1 SYSTEM DESIGN

System design is the solution for the creation of a new system. This phase
focuses on the detailed implementation of the feasible system. It emphasis on
translating design specifications to performance specification.

There are 2 forms of system designs used in this project:-

i) ER Diagram
An Entity Relationship (ER) Diagram is a type of flowchart that illustrates
how “entities” such as people, objects or concepts relate to each other
within a system. ER Diagrams are most often used to design or debug
relational databases in the fields of software engineering, business
information systems, education and research. Also known as ERDs or ER
Models, they use a defined set of symbols such as rectangles, diamonds,
ovals and connecting lines to depict the interconnectedness of entities,
relationships and their attributes. They mirror grammatical structure, with
entities as nouns and relationships as verbs

ii) DFD- Data Flow Diagram

DFD is the abbreviation for Data Flow Diagram. The flow of data of a
system or a process is represented by DFD. It also gives insight into the
inputs and outputs of each entity and the process itself. DFD does not have
control flow and no loops or decision rules are present. Specific operations
depending on the type of data can be explained by a flowchart.

~ 20 ~
4.2 ER DIAGRAM

Figure No-1 : ER Diagram

~ 21 ~
4.3DATA FLOW DIAGRAM

Figure No-2: Level 0 DFD

~ 22 ~
Figure No-3: Level 1 DFD

~ 23 ~
4.4 DATABASE DESIGN (TABLES)

Databases are the storehouses of data used in the software systems. The data is stored
in tables inside the database. Several tables are created for the manipulation of the
data for the system. Two essential settings for a database are

 FOREIGN KEY- the field that is unique for all the record occurrences.
 PRIMARY KEY -the field used to set relation between
tables. Normalization is a technique to avoid redundancy in the
tables.

User:-
Field Name Data Type
name Varchar (50)
email Varchar (50)
password Varchar (50)
Enrollno Varchar (15)
Semester Varchar (5)

Table No-3 :User table

Admin:-

Field Name Type

admin_id int(11)
email varchar(50)
password varchar(500)

Table No-4 : Admin table

History:-

Field Name Type

email varchar(50)
eid text
score int(11)
level int(11)
sahi int(11)
wrong int(11)
date timestamp

Table No-5 : History table

~ 24 ~
Options:-

Field Name Type

qid varchar(50)
option varchar(5000)
optionid text

Table No-6 : Options table

Questions:-

Field Name Type

eid text
qid text
qns text
choice int(10)
sn int(11)

Table No-7 : Questions table

Quiz:-

Field Name Type

eid text
title varchar(100)
sahi int(11)
wrong int(11)
total int(11)
date timestamp

Table No-8 : Quiz table

Rank:-

Field Name Type

email varchar(50)
score int(11)
time timestamp

Table No-9 : Rank table

~ 25 ~
Answer:-

Field Name Data Type

qid text
ansid text

Table No-10 : Answer table

Feedback:-

Field Name Data Type

name Varchar (30)
email Varchar (50)
message Varchar (250)

Table No-11 : Feedback table

~ 26 ~
 CHAPTER-5:
SYSTEM DEVELOPMENT (Coding)

5.1 SignUP-Login Module

Signup.php
<!--
Author: Colorlib
Author URL: https://colorlib.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>StudyQuest Sign Up Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1);
} </script>
<!-- Custom Theme files -->
<link rel="stylesheet" href="style.css">
<!-- //Custom Theme files -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i"
rel="stylesheet">
<!-- //web font -->
</head>
<body>
<!-- main -->
<div class="main-w3layouts wrapper">
<h1>StudyQuest SignUp Form</h1>
<div class="main-agileinfo">
<div class="agileits-top">
<form action="signupback.php" method="post">
<input class="text" type="text"
name="enroll" placeholder="Enrollement Number" required="">
<br>
<input class="text" type="text" name="name"
placeholder="Student Name" required="">
<br>
<input class="text" type="text"
name="sem" placeholder="Semester" required="">
<input class="text email" type="email" name="email"
placeholder="Email Id" required="">
<input class="text" type="password"
name="pass" placeholder="Password" required="">

~ 27 ~
 <div class="wthree-text">
<label class="anim">

</label>
<div class="clear"></div>
</div>
<input type="submit" value="SIGNUP">
</form>
<p>Already have an account? <a href="login.php">
Login here!</a></p>
</div>
</div>

<ul class="colorlib-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- //main -->
</body>
</html>

Signupback.php

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$Enrollno = $_POST['enroll'];
$Name = $_POST['name'];
$Semester = $_POST['sem'];
$Email = $_POST['email'];
$Password = $_POST['pass'];

$servername = "localhost";
$username = "root";
$dbpassword = "";
$database = "exam";
# create a connection
$con = mysqli_connect($servername,$username,$dbpassword,$database);

# die if connection was unsuccessful

if(!$con) {
die("Sorry we failed to connect" . mysqli_connect_error($con));

~ 28 ~
 }
else{
echo "Connection Established<br><br>";
}

# insert values into table in the DB

$sql = "INSERT INTO user
values('$Name','$Email','$Password','$Enrollno','$Semester')";
$result = mysqli_query($con,$sql);

if($result) {
header("Location: login.php");
}
else {
echo "Row not inserted in table succesfully because of this error --->" .
mysqli_error($con);
}
}
?>
Login.php
<!--
Author: Colorlib
Author URL: https://colorlib.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>StudyQuest Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1);
} </script>
<!-- Custom Theme files -->
<link rel="stylesheet" href="style.css">
<!-- //Custom Theme files -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i"
rel="stylesheet">
<!-- //web font -->
</head>
<body>
<!-- main -->
<div class="main-w3layouts wrapper">
<h1>StudyQuest Login Form</h1>
<div class="main-agileinfo">
<div class="agileits-top">
<form action="loginback.php" method="post">

~ 29 ~
 <input class="text email"
type="email" name="email" placeholder="Email Id" required="">
<input class="text" type="password"
name="pass" placeholder="Password" required="">

<div class="wthree-text">
<label class="anim">

</label>
<div class="clear"></div>
</div>
<input type="submit" value="SIGNIN"
onclick="location:'newhome.html'">
</form>
<p>Don't have an Account? <a href="signup.php">
Sign Up now!</a></p>
</
div>
</div>

<ul class="colorlib-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- //main -->
</body>
</html>

Loginback.php
<?php
if($_SERVER['REQUEST_METHOD']=='POST')
{
$Email = $_POST['email'];
$Password = $_POST['pass'];

$servername="localhost";
$username="root";
$dbpassword="";
$database="exam";
header('location: newhome.html');
$con=mysqli_connect($servername,$username,$dbpassword,$database);
~ 30 ~
 if (!$con){
die("Sorry we failed to connect". mysqli_connect_error($con));
}
else{
echo"Connection Established<br><br>";
}
$sql="SELECT * from user where email='$Email' AND password='$Password'";
$result=mysqli_query($con,$sql);
$num= mysqli_num_rows($result);
if($num){
header("Location: newhome.html");
}
else{
echo"invalid email or password";
}
}
?>

Style.css
/*--
Author: Colorlib
Author URL: https://colorlib.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/-- reset --/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
margin: 0px;
padding: 0px;
}

~ 31 ~
 blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {

content: '';
content: none;
}

table {
border-collapse:
collapse; border-spacing:
0;
}

/-- start editing from here --/

a{
text-decoration: none;
}

.txt-rt {
text-align: right;
}

/* text align right */

.txt-lt {
text-align: left;
}

/* text align left */

.txt-center {
text-align: center;
}

/* text align center */

.float-rt {
float: right;
}

/* float right */
.float-lt {
float: left;
}

/* float left */
.clear {
clear: both;
}

/* clear float */
.pos-relative {
~ 32 ~
 position: relative;
}

/* Position Relative */
.pos-absolute {
position: absolute;
}

/* Position Absolute */
.vertical-base {
vertical-align: baseline;
}

/* vertical align baseline */

.vertical-top {
vertical-align: top;
}

/* vertical align top */

nav.vertical ul li {
display: block;
}

/* vertical menu */
nav.horizontal ul li {
display: inline-block;
}

/* horizontal menu */
img {
max-width: 100%;
}

/-- end reset --/

body {
background: #A6F6F1;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #76b852,
#8DC26F); background: -moz-linear-gradient(to top, #76b852,
#8DC26F); background: -o-linear-gradient(to top, #76b852,
#8DC26F); background: linear-gradient(to top, #76b852,
#8DC26F); background-size: cover;
background-attachment: fixed;
font-family: 'Roboto', sans-
serif;
}

h1 {
font-size: 3em;
text-align: center;
color: #fff;
~ 33 ~
 font-weight: 100;
text-transform: capitalize;
letter-spacing: 4px;
font-family: 'Roboto', sans-serif;
}

/-- main --/

.main-w3layouts {
padding: 3em 0 1em;
}

.main-agileinfo {
width: 35%;
margin: 3em auto;
background: rgba(0, 0, 0, 0.18);
background-size: cover;
}

.agileits-top {
padding: 3em;
}

input[type="text"], input[type="email"], input[type="password"] {

font-size: 0.9em;
color: #fff;
font-weight: 100;
width: 94.5%;
display: block;
border: none;
padding: 0.8em;
border: solid 1px rgba(255, 255, 255, 0.37);
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
background-position: -800px 0;
background-size: 100%;
background-repeat: no-repeat;
color: #fff;
font-family: 'Roboto', sans-serif;
}

input.email, input.text.w3lpass {
margin: 2em 0;
}

.text:focus, .text:valid {
box-shadow: none;
outline: none;
background-position: 0 0;

~ 34 ~
 }

.text:focus::-webkit-input-placeholder, .text:valid::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: .9em;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-o-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
visibility: visible !important;
}

::-webkit-input-placeholder {
color: #fff;
font-weight: 100;
}

:-moz-placeholder {
/* Firefox 18- */
color: #fff;
}

::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}

:-ms-input-placeholder {
color: #fff;
}

input[type="submit"] {
font-size: .9em;
color: #fff;
background: #76b852;
outline: none;
border: 1px solid #76b852;
cursor: pointer;
padding: 0.9em;
-webkit-appearance: none;
width: 100%;
margin: 2em 0;
letter-spacing: 4px;
}

input[type="submit"]:hover {
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;

~ 35 ~
 -ms-transition: .5s all;
transition: .5s all;
background: #8DC26F;
}

.agileits-top p {
font-size: 1em;
color: #fff;
text-align: center;
letter-spacing: 1px;
font-weight: 300;
}

.agileits-top p a {
color: #fff;
-webkit-transition: .5s all;
-moz-transition: .5s
all; transition: .5s all;
font-weight: 400;
}

.agileits-top p a:hover {
color: #76b852;
}

/-- //main --/

/-- checkbox --/
.wthree-text label {
font-size: 0.9em;
color: #fff;
font-weight: 200;
cursor: pointer;
position: relative;
}

input.checkbox {
background: #8DC26F;
cursor: pointer;
width: 1.2em;
height: 1.2em;
}

input.checkbox:before {
content: "";
position: absolute;
width: 1.2em;
height: 1.2em;
background: inherit;
cursor: pointer;
}

~ 36 ~
input.checkbox:after {
content: "";
position: absolute;
top: 0px;
left: 0;
z-index: 1;
width: 1.2em;
height: 1.2em;
border: 1px solid #fff;
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}

input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: #fff;
border-top-color: transparent;
border-right-color:
transparent;
}

.anim input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: transparent;
border-right-color: transparent;
animation: .4s rippling .4s
ease; animation-fill-mode:
forwards;
}

@keyframes rippling {
50% {
border-left-color: #fff;
}

100% {
}

~ 37 ~
 border-bottom-color: #fff;
border-left-color: #fff;

~ 38 ~
 }

/-- //checkbox --/

/-- copyright --/
.colorlibcopy-agile {
margin: 2em 0 1em;
text-align: center;
}

.colorlibcopy-agile p {
font-size: .9em;
color: #fff;
line-height: 1.8em;
letter-spacing: 1px;
font-weight: 100;
}

.colorlibcopy-agile p a {
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}

.colorlibcopy-agile p a:hover {
color: #000;
}

/-- //copyright --/

.wrapper {
position: relative;
overflow: hidden;
}

.colorlib-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.colorlib-bubbles li {
position:
absolute; list-
style: none;
display: block;
width: 40px;
~ 39 ~
 height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 20s infinite;
-moz-animation: square 250s infinite;
-o-animation: square 20s infinite;
-ms-animation: square 20s infinite;
animation: square 20s infinite;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}

.colorlib-bubbles li:nth-child(1) {
left: 10%;
}

.colorlib-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay:
2s; animation-delay: 2s;
-webkit-animation-duration: 17s;
-moz-animation-duration: 17s;
-o-animation-duration:
17s; animation-duration:
17s;
}

.colorlib-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay:
4s; animation-delay: 4s;
}

.colorlib-bubbles li:nth-child(4) {
left: 40%;
~ 40 ~
 width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
-moz-animation-duration: 22s;
-o-animation-duration: 22s;
-ms-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}

.colorlib-bubbles li:nth-child(5) {
left: 70%;
}

.colorlib-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay:
3s; animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}

.colorlib-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay:
7s; animation-delay: 7s;
}

.colorlib-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
-moz-animation-delay:
15s; animation-delay: 15s;
-webkit-animation-duration: 40s;
-moz-animation-duration:
40s; animation-duration: 40s;
}

.colorlib-bubbles li:nth-child(9) {

~ 41 ~
 left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay:
2s; animation-delay: 2s;
-webkit-animation-duration:
40s; animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}

.colorlib-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay:
11s; animation-delay: 11s;
}

@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}

@keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);

~ 42 ~
 transform: translateY(-700px) rotate(600deg);
}
}

/-- responsive-design --/

@media(max-width:1440px)
{
input[type="text"], input[type="email"], input[type="password"] {
width: 94%;
}
}

@media(max-width:1366px) {
h1 {
font-size: 2.6em;
}

.agileits-top {
padding: 2.5em;
}

.main-agileinfo {
margin: 2em auto;
}

.main-agileinfo {
width: 36%;
}
}

@media(max-width:1280px) {
.main-agileinfo {
width: 40%;
}
}

@media(max-width:1080px) {
.main-agileinfo {
width: 46%;
}
}

@media(max-width:1024px) {
.main-agileinfo {
width: 49%;
}
}

@media(max-width:991px) {
h1 {
font-size: 2.4em;
~ 43 ~
 }

.main-w3layouts {
padding: 2em 0 1em;
}
}

@media(max-width:900px) {
.main-agileinfo {
width: 58%;
}

input[type="text"], input[type="email"], input[type="password"] {

width: 93%;
}
}

@media(max-width:800px) {
h1 {
font-size: 2.2em;
}
}

@media(max-width:736px) {
.main-agileinfo {
width: 62%;
}
}

@media(max-width:667px) {
.main-agileinfo {
width: 67%;
}
}

@media(max-width:600px) {
.agileits-top {
padding: 2.2em;
}

input.email, input.text.w3lpass {
margin: 1.5em 0;
}

input[type="submit"] {
margin: 2em 0;
}

h1 {
font-size: 2em;

~ 44 ~
 letter-spacing: 3px;
}
}

@media(max-width:568px) {
.main-agileinfo {
width: 75%;
}

.colorlibcopy-agile p {
padding: 0 2em;
}
}

@media(max-width:480px) {
h1 {
font-size: 1.8em;
letter-spacing: 3px;
}

.agileits-top {
padding: 1.8em;
}

input[type="text"], input[type="email"], input[type="password"] {

width: 91%;
}

.agileits-top p {
font-size: 0.9em;
}
}

@media(max-width:414px) {
h1 {
font-size: 1.8em;
letter-spacing: 2px;
}

.main-agileinfo {
width: 85%;
margin: 1.5em auto;
}

.text:focus, .text:valid {
background-position: 0 0px;
}

.wthree-text ul li, .wthree-text ul li:nth-child(2) {

display: block;

~ 45 ~
 float: none;
}

.wthree-text ul li:nth-child(2) {
margin-top: 1.5em;
}

input[type="submit"] {
margin: 2em 0
1.5em; letter-spacing:
3px;
}

input[type="submit"] {
margin: 2em 0 1.5em;
}

.colorlibcopy-agile {
margin: 1em 0 1em;
}
}

@media(max-width:384px) {
.main-agileinfo {
width: 88%;
}

.colorlibcopy-agile p {
padding: 0 1em;
}
}

@media(max-width:375px) {
.agileits-top p {
letter-spacing: 0px;
}
}

@media(max-width:320px) {
.main-w3layouts {
padding: 1.5em 0 0;
}

.agileits-top {
padding: 1.2em;
}

.colorlibcopy-agile {
margin: 0 0 1em;
}

~ 46 ~
 input[type="text"], input[type="email"], input[type="password"] {
width: 89.5%;
font-size: 0.85em;
}

h1 {
font-size: 1.7em;
letter-spacing: 0px;
}

.main-agileinfo {
width: 92%;
margin: 1em auto;
}

.text:focus, .text:valid {
background-position: 0 0px;
}

input[type="submit"] {
margin: 1.5em 0;
padding: 0.8em;
font-size: .85em;
}

.colorlibcopy-agile p {
font-size: .85em;
}

.wthree-text label {
font-size: 0.85em;
}

.main-w3layouts {
padding: 1em 0 0;
}
}

5.2 HOME PAGE

Newhome.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home page</title>

~ 47 ~
<link rel="stylesheet" href="newhome.css">
</head>
<body>
<form action="database form/feedback.php">
<button class="p" type="submit">Feedback</button>
</form>
<form action="quiz/admin.php">
<button class="q">Admin</button>
</form>
<center>
<h1>CHOOSE HOW YOU WANT TO STUDY!!</h1>
</center>
<form action="quiz/welcome.php">
<button class = "quizzes" onclick=" location.href='quiz/welcome.php'">
<div class="left">
Attempt quizzes!
</div>
</button>
</form>
<form action="Flashcards Module/Flashcards-main/index.html">
<button class = "flashcards" type="submit">
<div class="right">
Create your own flashcards!
</div>
</button>
</form>
<form action="zoom/index.html">
<button class = "zoom" type="submit">
<div class="bottom">
Study Online with your collegues!
</div>
</button>
</form>
<form action="notes.html">
<button class="Online notes" type="submit">
<div class="four">
Online notes!
</div>
</button>
</form>

~ 48 ~
<form action="course.html">
<button class="Online notes" type="submit">
<div class="five">
Course links!
</div>
</button>
</form>
</body>
</html>

Newhome.css
body {
background-color: aqua;
}

button.p {
color: blue;
text-decoration: underline;
border: 2px solid rgb(93, 67, 67);
float: right;
padding: 5px;
font-weight:
bold; cursor:
pointer;
}
button.p:hover{
color: rgba(218, 5, 5, 0.401);
}

h1 {
color: black;
font-style:
bold;
text-shadow: 2px 3px #558ABB;
font-size: 50px;
}

body {
/* background-color: aqua; */
background-image: url('https://arc-anglerfish-arc2-prod-
spectator.s3.amazonaws.com/public/MOZVABU5ONBM3GOKFEEQZRNFPI');
opacity: 1;

div {
/* height: 150px;
width: 250px;
background-color:
~ 49 ~
brown; text-align: center;

~ 50 ~
 display: flex;
left: 804px;
top: 208px; */
/* float: center; */
position: absolute;
width: 400px;
height: 200px;
left: 200px;
top: 130px;
/* text-align: center; */
/* background-color: bisque; */
/* Dark 2 */
margin: auto;
background: #2D2B27;
border-radius: 12.1394px;
color: bisque;
padding: 10px;
justify-content: center;
text-align: center;
padding-top: 20px 0px;
font-size: 25px;
display: inline-flex;
align-items: center;
font-weight: bold;
cursor: pointer;
/* background-image: url('quiz.jpg');
opacity: 50%; */
}

div.right {
/* height: 150px;
width: 250px;
text-align: right;
float: center; */
/* margin: 100px; */
/* position: absolute;
*/ width: 350px;
height: 200px;
left: 904px;
top: 130px;
/* padding-top: 20px 0px; */
/* background-color: brown; */
/* Dark 2 */
color: bisque;
background: #2D2B27;
border-radius: 12.1394px;
font-size: 25px;
align-items: center;
font-weight: bold;
cursor: pointer;

~ 51 ~
}

div.bottom {
position:
absolute;
/* width: 389px;
height: 200px;
*/ left: 550px;
top: 384px;
bottom: 40px;
/* Dark 2 */
font-size: 25px;
background: #2D2B27;
border-radius:
12.1394px; font-weight:
bold;
cursor: pointer;

div.four {
/* position: absolute; */
/* /* width: 389px; */
height: 170px;
left: 100px;
top: 520px;
bottom: 60px;
/* Dark 2 */
font-size: 22px;
background: #2D2B27;
border-radius: 8px;
margin-left: 11px;
margin-top: 12px;
font-size: 25px;
font-weight:
bold; cursor:
pointer;

div.five {
/* position: absolute;
*/ width: 350px;
height: 170px;
left: 905px;
top: 520px;
bottom: 60px;
/* Dark 2 */
font-size: 22px;
background: #2D2B27;
~ 52 ~
border-radius: 12.1394px;
margin-left: 70px;

~ 53 ~
 margin-top: 12px;
font-size: 25px;
font-weight: bold;
cursor: pointer;
}

5.3 Quiz Module

Admin.php
<?php
include_once 'database.php';
session_start();
if(isset($_SESSION["email"]))
{
session_destroy();
}
$ref=@$_GET['q'];
if(isset($_POST['submit']))
{
$email = $_POST['email'];
$password = $_POST['password'];
$email = stripslashes($email);
$email = addslashes($email);
$password = stripslashes($password);
$password = addslashes($password);
$email = mysqli_real_escape_string($con,$email);
$password = mysqli_real_escape_string($con,$password);
$result = mysqli_query($con,"SELECT email FROM admin WHERE email =
'$email' and password = '$password'") or die('Error');
$count=mysqli_num_rows($result);
if($count==1)
{
session_start();
if(isset($_SESSION['email']))
{
session_unset();
}
$_SESSION["name"] = 'Admin';
$_SESSION["key"] ='admin';
$_SESSION["email"] = $email;
header("location:dashboard.php?q=0");
}
else
{
echo "<center><h3><script>alert('Sorry.. Wrong Username (or)
Password');</script></h3></center>";
header("refresh:0;url=admin.php");
}
}
?>

~ 54 ~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Admin Login | Online Quiz System</title>
<link rel="stylesheet" href="scripts/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="scripts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="css/form.css">
<style type="text/css">
body{
width: 100%;
background: url(image/book.png) ;
background-position: center
center; background-repeat: no-
repeat; background-attachment:
fixed; background-size: cover;
}
</style>
</head>

<body>
<section class="login first grey">
<div class="container">
<div class="box-wrapper">
<div class="box box-border">
<div class="box-body">
<center><h5 style="font-family: Noto
Sans;">Login to </h5><h4 style="font-family: Noto Sans;">Admin
Page</h4></center><br>
<form method="post"
action="admin.php" enctype="multipart/form-data">
<div class="form-group">
<label>Enter Your
Email Id:</label>
<input
type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label
class="fw">Enter Your Password:
<a
href="javascript:void(0)" class="pull-right">Forgot Password?</a>
</label>
<input
type="password" name="password" class="form-
control"> </div>

~ 55 ~
 <div class="form-group
text-right">
<button class="btn
btn-primary btn-block" name="submit">Login</button>
</div>

</form>
</div>
</div>
</div>
</
div>
</section>
<script src="js/jquery.js"></script>
<script src="scripts/bootstrap/bootstrap.min.js"></script>
</body>
</html>

Dashboard.php
<?php
include_once 'database.php';
session_start(); if(!
(isset($_SESSION['email'])))
{
header("location:login.php");
}
else
{
$name = $_SESSION['name'];
$email = $_SESSION['email'];
include_once 'database.php';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard | Online Quiz System</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/welcome.css">
<link rel="stylesheet" href="css/font.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default title1">
<div class="container-fluid">
<div class="navbar-header">
~ 56 ~
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Javascript:void(0)"><b>Online Quiz System</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li <?php if(@$_GET['q']==0) echo'class="active"'; ?>><a href="dashboard.php?
q=0">Home<span class="sr-only">(current)</span></a></li>
<li <?php if(@$_GET['q']==1) echo'class="active"'; ?>><a
href="dashboard.php?q=1">User</a></li>
<li <?php if(@$_GET['q']==2) echo'class="active"'; ?>><a
href="dashboard.php?q=2">Ranking</a></li>
<li class="dropdown <?php if(@$_GET['q']==4 || @$_GET['q']==5) echo'active"';
?>">
<li><a href="dashboard.php?q=4">Add Quiz</a></li>
<li><a href="dashboard.php?q=5">Remove Quiz</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li <?php echo''; ?>><a href="logout1.php?q=dashboard.php"><span
class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp;Log
out</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if(@$_GET['q']==0)
{
echo "<h1> WELCOME TO Admin Page!!
</h1>";
}
if(@$_GET['q']== 2)
{
$q=mysqli_query($con,"SELECT * FROM rank ORDER BY score
DESC " )or die('Error223');
echo '<div class="panel title"><div class="table-responsive">
<table class="table table-striped title1" >
<tr
style="color:red"><td><center><b>Rank</b></center></td><td><center><b>Name
</b></center></td><td><center><b>Score</b></center></td></tr>';
$c=0;
while($row=mysqli_fetch_array($q) )
{

~ 57 ~
 $e=$row['email'];
$s=$row['score'];
$q12=mysqli_query($con,"SELECT * FROM user WHERE email='$e'
" )or die('Error231');
while($row=mysqli_fetch_array($q12) )
{
$name=$row['name'];
$college=$row['college'];
}
$c++;
echo '<tr><td
style="color:#99cc32"><center><b>'.$c.'</b></center></td><td><center>'.$e.'</cent
er></td><td><center>'.$s.'</center></td>';
}
echo '</table></div></div>';
}
?>
<?php
if(@$_GET['q']==1)
{
$result = mysqli_query($con,"SELECT * FROM user") or die('Error');
echo '<div class="panel"><div class="table-responsive"><table
class="table table-striped
title1"><tr><td><center><b>S.N.</b></center></td><td><center><b>Name</b></c
enter></td><td><center><b>College</b></center></td><td><center><b>Email</b>
</center></td><td><center><b>Action</b></center></td></tr>';
$c=1;
while($row = mysqli_fetch_array($result))
{
$name = $row['name'];
$email = $row['email'];
$college = $row['college'];
echo
'<tr><td><center>'.$c++.'</center></td><td><center>'.$name.'</center></td><td><c
enter>'.$college.'</center></td><td><center>'.$email.'</center></td><td><center><a
title="Delete User" href="update.php?demail='.$email.'"><b><span
class="glyphicon glyphicon-trash"
aria-hidden="true"></span></b></a></center></td></tr>';
}
$c=0;
echo '</table></div></div>';
}
?>
<?php
if(@$_GET['q']==4 && !(@$_GET['step']) )
{
echo '<div class="row"><span class="title1" style="margin-
left:40%;font-size:30px;color:#fff;"><b>Enter Quiz Details</b></span><br /><br
/>
<div class="col-md-3"></div><div class="col-md-6">

~ 58 ~
<form class="form-horizontal title1" name="form" action="update.php?q=addquiz"
method="POST">

~ 59 ~
<fieldset>
<div class="form-group">
<label class="col-md-12 control-label" for="name"></label>
<div class="col-md-12">
<input id="name" name="name" placeholder="Enter Quiz title" class="form-control
input-md" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="total"></label>
<div class="col-md-12">
<input id="total" name="total" placeholder="Enter total number of
questions" class="form-control input-md" type="number">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="right"></label>
<div class="col-md-12">
<input id="right" name="right" placeholder="Enter marks on right
answer" class="form-control input-md" min="0" type="number">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="wrong"></label>
<div class="col-md-12">
<input id="wrong" name="wrong" placeholder="Enter minus marks on wrong answer
without sign" class="form-control input-md" min="0" type="number">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input type="submit" style="margin-left:45%" class="btn btn-primary"
value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form></div>';
}
?>
<?php
if(@$_GET['q']==4 && (@$_GET['step'])==2 )
{
echo '
<div class="row">
<span class="title1" style="margin-left:40%;font-size:30px;"><b>Enter Question
Details</b></span><br /><br />
<div class="col-md-3"></div><div class="col-md-6"><form class="form-horizontal
title1" name="form"

~ 60 ~
action="update.php?q=addqns&n='.@$_GET['n'].'&eid='.@$_GET['eid'].'&ch=4 "
method="POST">
<fieldset>
';
for($i=1;$i<=@$_GET['n'];$i++)
{
echo '<b>Question number&nbsp;'.$i.'&nbsp;:</><br /><!-- Text
input-->
<div class="form-group">
<label class="col-md-12 control-label" for="qns'.$i.' "></label>
<div class="col-md-12">
<textarea rows="3" cols="5" name="qns'.$i.'" class="form-control"
placeholder="Write question number '.$i.' here..."></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="'.$i.'1"></label>
<div class="col-md-12">
<input id="'.$i.'1" name="'.$i.'1" placeholder="Enter option a" class="form-control
input-md" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="'.$i.'2"></label>
<div class="col-md-12">
<input id="'.$i.'2" name="'.$i.'2" placeholder="Enter option b" class="form-control
input-md" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="'.$i.'3"></label>
<div class="col-md-12">
<input id="'.$i.'3" name="'.$i.'3" placeholder="Enter option c" class="form-control
input-md" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="'.$i.'4"></label>
<div class="col-md-12">
<input id="'.$i.'4" name="'.$i.'4" placeholder="Enter option d" class="form-control
input-md" type="text">
</div>
</div>
<br />
<b>Correct answer</b>:<br />
<select id="ans'.$i.'" name="ans'.$i.'" placeholder="Choose correct answer "
class="form-control input-md" >
<option value="a">Select answer for question '.$i.'</option>
<option value="a"> option a</option>
<option value="b"> option b</option>

~ 61 ~
<option value="c"> option c</option>
<option value="d"> option d</option></select><br /><br />';
}
echo '<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input type="submit" style="margin-left:45%" class="btn btn-primary"
value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form></div>';
}
?>
<?php
if(@$_GET['q']==5)
{
$result = mysqli_query($con,"SELECT * FROM quiz ORDER BY
date DESC") or die('Error');
echo '<div class="panel"><div class="table-responsive"><table class="table table-
striped title1">
<tr><td><center><b>S.N.</b></center></td><td><center><b>Topic</b></center></
td><td><center><b>Total
question</b></center></td><td><center><b>Marks</b></center></td><td><center>
<b>Action</b></center></td></tr>';
$c=1;
while($row = mysqli_fetch_array($result)) {
$title = $row['title'];
$total = $row['total'];
$sahi = $row['sahi'];
$eid = $row['eid']; echo '<tr><td><center>'.$c+
+.'</center></td><td><center>'.$title.'</center></td><td><ce
nter>'.$total.'</center></td><td><center>'.$sahi*$total.'</center></td>
<td><center><b><a href="update.php?q=rmquiz&eid='.$eid.'" class="pull-right btn
sub1" style="margin:0px;background:red;color:black"><span class="glyphicon
glyphicon-trash" aria-hidden="true"></span>&nbsp;<span
class="title1"><b>Remove</b></span></a></b></center></td></tr>';
}
$c=0;
echo '</table></div></div>';
}
?>
</div>
</div>
</div>
</body>
</html>

Database.php
<?php

~ 62 ~
$con= new mysqli('localhost','root','','exam')or die("Could not connect to
mysql".mysqli_error($con));
?>

Exam.sql
-- phpMyAdmin SQL Dump
-- version 4.7.7
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 04, 2018 at 08:02 AM
-- Server version: 10.1.30-MariaDB
-- PHP Version: 7.2.2
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET
@OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET
@OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET
@OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `exam`
--
--
-- Table structure for table `admin`
--
CREATE TABLE `admin` (
`admin_id` int(11) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `admin`
--
INSERT INTO `admin` (`admin_id`, `email`, `password`) VALUES
(1, '[email protected]', 'pinkylove');
--
-- Table structure for table `answer`
--
CREATE TABLE `answer` (
`qid` text NOT NULL,
`ansid` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--

~ 63 ~
-- Dumping data for table `answer`
--
INSERT INTO `answer` (`qid`, `ansid`) VALUES
('5b13ed3a6e006', '5b13ed3a9436a'),
('5b13ed72489d8', '5b13ed7263d70'),
('5b141d712647f', '5b141d71485b9'),
('5b141d718f873', '5b141d71978be'),
('5b141d71ddb46', '5b141d71e5f43'),
('5b141d721a738', '5b141d7222884'),
('5b141d7260b7d', '5b141d7268b9a'),
('5b141d72a6fa1', '5b141d72aefcb'),
('5b141d72d7a1c', '5b141d72dfa7b'),
('5b141d731429b', '5b141d731c234'),
('5b141d7345176', '5b141d734cd1b'),
('5b141d737ddfc', '5b141d73858df'),
('5b1422651fdde', '5b1422654ab51'),
('5b14226574ed5', '5b1422657d064'),
('5b142265b5d08', '5b142265c09f5'),
('5b1422661d93f', '5b14226635e0d'),
('5b14226663cf4', '5b1422666bf2b'),
('5b1422669481b', '5b1422669c8ea'),
('5b142266c525c', '5b142266cd369'),
('5b14226711d91', '5b14226719fb1'),
('5b1422674286d', '5b1422674a9ee'),
('5b1422677371f', '5b1422677b3fc');
--
-- Table structure for table `history`
--
CREATE TABLE `history` (
`email` varchar(50) NOT NULL,
`eid` text NOT NULL,
`score` int(11) NOT NULL,
`level` int(11) NOT NULL,
`sahi` int(11) NOT NULL,
`wrong` int(11) NOT NULL,
`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE
CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `history`
--
INSERT INTO `history` (`email`, `eid`, `score`, `level`, `sahi`, `wrong`, `date`)
VALUES
('[email protected]', '5b141b8009cf0', 22, 10, 8, 2, '2018-06-03
16:56:00'),
('[email protected]', '5b141b8009cf0', 30, 10, 10, 0, '2018-06-03 16:57:45'),
('[email protected]', '5b141b8009cf0', 22, 10, 8, 2, '2018-06-03 16:59:06'),
('[email protected]', '5b141f1e8399e', 26, 10, 9, 1, '2018-06-03
17:17:26');

~ 64 ~
--
-- Table structure for table `options`
--
CREATE TABLE `options` (
`qid` varchar(50) NOT NULL,
`option` varchar(5000) NOT NULL,
`optionid` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `options`
--
INSERT INTO `options` (`qid`, `option`, `optionid`)
VALUES ('5b13ed3a6e006', 'sdb', '5b13ed3a9436a'),
('5b13ed3a6e006', 'jsdb', '5b13ed3a94374'),
('5b13ed3a6e006', 'dsbv', '5b13ed3a94377'),
('5b13ed3a6e006', 'jbdv', '5b13ed3a94379'),
('5b13ed72489d8', 'vsdv',
'5b13ed7263d70'),
('5b13ed72489d8', 'vsdv', '5b13ed7263d7a'),
('5b13ed72489d8', 'vsdv',
'5b13ed7263d7d'), ('5b13ed72489d8',
'vsdv', '5b13ed7263d80'),
('5b141d712647f', 'Personal Home Page', '5b141d71485b9'),
('5b141d712647f', 'Private Home Page', '5b141d71485dc'),
('5b141d712647f', 'Pretext Hypertext Processor',
'5b141d71485e0'), ('5b141d712647f', 'Preprocessor Home Page',
'5b141d71485e4'), ('5b141d718f873', 'Rasmus Lerdorf',
'5b141d71978be'), ('5b141d718f873', 'Willam Makepiece',
'5b141d71978cc'), ('5b141d718f873', 'Drek Kolkevi',
'5b141d71978d1'), ('5b141d718f873', 'List Barely',
'5b141d71978d4'),
('5b141d71ddb46', '.html', '5b141d71e5f2b'),
('5b141d71ddb46', '.ph', '5b141d71e5f3c'),
('5b141d71ddb46', '.php', '5b141d71e5f43'),
('5b141d71ddb46', '.xml', '5b141d71e5f48'),
('5b141d721a738', 'for loop', '5b141d7222820'),
('5b141d721a738', 'do-while loop', '5b141d722282f'),
('5b141d721a738', 'foreach loop', '5b141d7222880'),
('5b141d721a738', 'All of the above', '5b141d7222884'),
('5b141d7260b7d', 'echo (“Hello World―);', '5b141d7268b8a'),
('5b141d7260b7d', 'print (“Hello World―);', '5b141d7268b95'),
('5b141d7260b7d', 'printf (“Hello World―);', '5b141d7268b98'),
('5b141d7260b7d', 'All of the above', '5b141d7268b9a'),
('5b141d72a6fa1', 'file()', '5b141d72aefcb'),
('5b141d72a6fa1', 'arr_file()', '5b141d72aefd8'),
('5b141d72a6fa1', 'arrfile()', '5b141d72aefdc'),
('5b141d72a6fa1', 'file_arr()', '5b141d72aefe0'),
('5b141d72d7a1c', 'Magic Function', '5b141d72dfa7b'),
('5b141d72d7a1c', 'Inbuilt Function', '5b141d72dfa85'),
('5b141d72d7a1c', 'Default Function', '5b141d72dfa88'),
~ 65 ~
('5b141d72d7a1c', 'User Defined Function', '5b141d72dfa8b'),

~ 66 ~
('5b141d731429b', 'CREATE TABLE table_name (column_name column_type);',
'5b141d731c234'),
('5b141d731429b', 'CREATE table_name (column_type column_name);',
'5b141d731c242'),
('5b141d731429b', 'CREATE table_name (column_name column_type);',
'5b141d731c248'),
('5b141d731429b', 'CREATE TABLE table_name (column_type column_name);',
'5b141d731c24b'),
('5b141d7345176', 'get_array() and get_row()', '5b141d734cd10'),
('5b141d7345176', 'fetch_array() and fetch_row()', '5b141d734cd1b'),
('5b141d7345176', 'get_array() and get_column()', '5b141d734cd1d'),
('5b141d7345176', 'fetch_array() and fetch_column()', '5b141d734cd20'),
('5b141d737ddfc', 'explode()', '5b141d73858d0'),
('5b141d737ddfc', 'implode()', '5b141d73858df'),
('5b141d737ddfc', 'concat()', '5b141d73858e3'),
('5b141d737ddfc', 'concatenate()', '5b141d73858e8'),
('5b1422651fdde', '32 bits', '5b1422654ab3a'),
('5b1422651fdde', '128 bytes', '5b1422654ab48'),
('5b1422651fdde', '64 bits', '5b1422654ab4d'),
('5b1422651fdde', '16 bytes', '5b1422654ab51'),
('5b14226574ed5', 'IP', '5b1422657d052'),
('5b14226574ed5', 'TCP', '5b1422657d05f'),
('5b14226574ed5', 'UDP', '5b1422657d064'),
('5b14226574ed5', 'ARP', '5b1422657d069'),
('5b142265b5d08', 'Session layer', '5b142265c09e3'),
('5b142265b5d08', 'Physical layer', '5b142265c09f5'),
('5b142265b5d08', 'Data Link layer', '5b142265c09fa'),
('5b142265b5d08', 'Application layer', '5b142265c09ff'),
('5b1422661d93f', '12.0.0.1', '5b14226635df5'),
('5b1422661d93f', '168.172.19.39', '5b14226635e04'),
('5b1422661d93f', '172.15.14.36', '5b14226635e09'),
('5b1422661d93f', '192.168.24.43', '5b14226635e0d'),
('5b14226663cf4', 'Application', '5b1422666bf2b'),
('5b14226663cf4', 'Presentation', '5b1422666bf39'),
('5b14226663cf4', 'Session', '5b1422666bf3e'),
('5b14226663cf4', 'Transport',
'5b1422666bf42'), ('5b1422669481b', 'VTP',
'5b1422669c8dc'), ('5b1422669481b', 'STP',
'5b1422669c8ea'), ('5b1422669481b', 'RIP',
'5b1422669c8ef'), ('5b1422669481b', 'CDP',
'5b1422669c8f3'), ('5b142266c525c', '14',
'5b142266cd353'),
('5b142266c525c', '15', '5b142266cd361'),
('5b142266c525c', '16', '5b142266cd365'),
('5b142266c525c', '30', '5b142266cd369'),
('5b14226711d91', '255.255.255.192', '5b14226719fa0'),
('5b14226711d91', '255.255.255.224', '5b14226719fb1'),
('5b14226711d91', '255.255.255.240', '5b14226719fb7'),
('5b14226711d91', '255.255.255.248', '5b14226719fbb'),
('5b1422674286d', '6', '5b1422674a9ee'),
('5b1422674286d', '8', '5b1422674aa01'),
~ 67 ~
('5b1422674286d', '30', '5b1422674aa06'),
('5b1422674286d', '32', '5b1422674aa0b'),
('5b1422677371f', '127.0.0.0', '5b1422677b3e9'),
('5b1422677371f', '1.0.0.127', '5b1422677b3f7'),
('5b1422677371f', '127.0.0.1', '5b1422677b3fc'),
('5b1422677371f', '127.0.0.255', '5b1422677b400');
--
-- Table structure for table `questions`
--
CREATE TABLE `questions` (
`eid` text NOT NULL,
`qid` text NOT NULL,
`qns` text NOT NULL,
`choice` int(10) NOT NULL,
`sn` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `questions`
--
INSERT INTO `questions` (`eid`, `qid`, `qns`, `choice`, `sn`) VALUES
('5b13ed30cd71f', '5b13ed3a6e006', 'dbjb', 4, 1),
('5b13ed6bb8bcd', '5b13ed72489d8', 'dvsd', 4, 1),
('5b141b8009cf0', '5b141d712647f', 'What does PHP stand for?', 4, 1),
('5b141b8009cf0', '5b141d718f873', 'Who is the father of PHP?', 4, 2),
('5b141b8009cf0', '5b141d71ddb46', 'PHP files have a default file extension of.', 4, 3),
('5b141b8009cf0', '5b141d721a738', 'Which of the looping statements is/are supported
by PHP?', 4, 4),
('5b141b8009cf0', '5b141d7260b7d', 'Which of the following PHP statements will
output Hello World on the screen?', 4, 5),
('5b141b8009cf0', '5b141d72a6fa1', 'Which one of the following function is capable
of reading a file into an array?', 4, 6),
('5b141b8009cf0', '5b141d72d7a1c', 'A function in PHP which starts with (double
underscore) is know as..', 4, 7),
('5b141b8009cf0', '5b141d731429b', 'Which one of the following statements is used to
create a table?', 4, 8),
('5b141b8009cf0', '5b141d7345176', 'Which of the methods are used to manage result
sets using both associative and indexed arrays?', 4, 9),
('5b141b8009cf0', '5b141d737ddfc', 'Which one of the following functions can be
used to concatenate array elements to form a single delimited string?', 4, 10),
('5b141f1e8399e', '5b1422651fdde', 'How long is an IPv6 address?', 4, 1),
('5b141f1e8399e', '5b14226574ed5', 'Which protocol does DHCP use at the Transport
layer?', 4, 2),
('5b141f1e8399e', '5b142265b5d08', 'Where is a hub specified in the OSI model?', 4,
3),
('5b141f1e8399e', '5b1422661d93f', 'Which of the following is private IP address?', 4,
4),
('5b141f1e8399e', '5b14226663cf4', 'If you use either Telnet or FTP, which is the
highest layer you are using to transmit data?', 4, 5),

~ 68 ~
('5b141f1e8399e', '5b1422669481b', 'Which of the following is a layer 2 protocol
used to maintain a loop-free network?', 4, 6),
('5b141f1e8399e', '5b142266c525c', 'What is the maximum number of IP addresses
that can be assigned to hosts on a local subnet that uses the 255.255.255.224 subnet
mask?', 4, 7),
('5b141f1e8399e', '5b14226711d91', 'You need to subnet a network that has 5
subnets, each with at least 16 hosts. Which classful subnet mask would you use?', 4,
8), ('5b141f1e8399e', '5b1422674286d', 'You have an interface on a router with the IP
address of 192.168.192.10/29. Including the router interface, how many hosts can
have IP addresses on the LAN attached to the router interface?', 4, 9),
('5b141f1e8399e', '5b1422677371f', 'To test the IP stack on your local host, which IP
address would you ping?\r\n\r\n', 4, 10);
--
-- Table structure for table `quiz`
--
CREATE TABLE `quiz` (
`eid` text NOT NULL,
`title` varchar(100) NOT NULL,
`sahi` int(11) NOT NULL,
`wrong` int(11) NOT NULL,
`total` int(11) NOT NULL,
`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE
CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `quiz`
--
INSERT INTO `quiz` (`eid`, `title`, `sahi`, `wrong`, `total`, `date`) VALUES
('5b141b8009cf0', 'Php & Mysqli', 3, 1, 10, '2018-06-03 16:46:56'),
('5b141f1e8399e', 'Ip Networking', 3, 1, 10, '2018-06-03 17:02:22');
--
-- Table structure for table `rank`
--
CREATE TABLE `rank` (
`email` varchar(50) NOT NULL,
`score` int(11) NOT NULL,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE
CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `rank`
--
INSERT INTO `rank` (`email`, `score`, `time`) VALUES
('[email protected]', 30, '2018-06-03 16:57:45'),
('[email protected]', 22, '2018-06-03 16:59:06');
--
-- Table structure for table `user`

~ 69 ~
--
CREATE TABLE `user` (
`name` varchar(50) NOT NULL,
`college` varchar(100) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`name`, `college`, `email`, `password`) VALUES
('Swagatika Padhi', 'National Institute of Science and Technology, Berhampur',
'[email protected]', 'pinky'),
('Priyanka Pattnaik', 'National Institute of Science and Technology, Berhampur',
'[email protected]', 'pinka');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `admin`
--
ALTER TABLE `admin`
ADD PRIMARY KEY (`admin_id`);
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`email`);
--
-- AUTO_INCREMENT for dumped tables
--
-- AUTO_INCREMENT for table `admin`
--
ALTER TABLE `admin`
MODIFY `admin_id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=2;
COMMIT;
/*!40101 SET
CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET
CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET
COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

~ 70 ~
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>| Online Quiz System |</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="shortcut icon" type="image/png" href="image/logo.png" />
<style type="text/css">
body {
width: 100%;
background: url(image/book.png) ;
background-position: center
center; background-repeat: no-
repeat; background-attachment:
fixed; background-size: cover;
}
</style>
</head>
<body>
<center>
<div class="intro">
<h1> online quiz system </h1>
<a href="login.php" class="btn"> login </a>&emsp;
<a href="register.php" class="btn"> register </a>
<h2> Good &nbsp;Luck. </h2>
</div>
</center>
</body>
</html>

Login.php
<?php
require('database.php');
session_start();
if(isset($_SESSION["email"]))
{
session_destroy();
}
$ref=@$_GET['q'];
if(isset($_POST['submit']))
{
$email = $_POST['email'];
$pass = $_POST['password'];
$email = stripslashes($email);
$email = addslashes($email);
$pass = stripslashes($pass);
$pass = addslashes($pass);
$email = mysqli_real_escape_string($con,$email);
$pass = mysqli_real_escape_string($con,$pass);

$str = "SELECT * FROM user WHERE email='$email' and

password='$pass'";
$result = mysqli_query($con,$str);

~ 71 ~
 if((mysqli_num_rows($result))!=1)
{
echo "<center><h3><script>alert('Sorry.. Wrong Username
(or) Password');</script></h3></center>";
header("refresh:0;url=login.php");
}
else
{
$_SESSION['logged']=$email;
$row=mysqli_fetch_array($result);
$_SESSION['name']=$row[1];
$_SESSION['id']=$row[0];
$_SESSION['email']=$row[2];
$_SESSION['password']=$row[3];
header('location: welcome.php?q=1');
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login | Online Quiz System</title>
<link rel="stylesheet" href="scripts/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="scripts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="css/form.css">
<style type="text/css">
body{
width: 100%;
background: url(image/book.png) ;
background-position: center
center; background-repeat: no-
repeat; background-attachment:
fixed; background-size: cover;
}
</style>
</head>
<body>
<section class="login first grey">
<div class="container">
<div class="box-wrapper">
<div class="box box-border">
<div class="box-body">
<center><h5 style="font-family: Noto
Sans;">Login to </h5><h4 style="font-family: Noto Sans;">Online Quiz
System</h4></center><br>

~ 72 ~
 <form method="post"
action="login.php" enctype="multipart/form-data">
<div class="form-group">
<label>Enter Your
Email Id:</label>
<input
type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label
class="fw">Enter Your Password:
<a
href="javascript:void(0)" class="pull-right">Forgot Password?</a>
</label>
<input
type="password" name="password" class="form-
control"> </div>
<div class="form-group
text-right">
<button class="btn
btn-primary btn-block" name="submit">Login</button>
</div>
<div class="form-group
text-center">
<span class="text-
muted">Don't have an account?</span><a href="register.php">Register</a> Here..
</div>
</form>
</div>
</div>
</div>
</
div>
</section>
<script src="js/jquery.js"></script>
<script src="scripts/bootstrap/bootstrap.min.js"></script>
</body>
</html>

Logout.php
<?php
session_start();
if(isset($_SESSION['email'])){
session_destroy();}
$ref= @$_GET['q'];
header("location:$ref");
?>
Logout.php<?php
session_start();
if(isset($_SESSION['email'])){
~ 73 ~
session_destroy();}
$ref= @$_GET['q'];
header("location:admin.php");
?>

Register.php
<?php
include("database.php");
session_start();
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$name = stripslashes($name);
$name = addslashes($name);
$email = $_POST['email'];
$email = stripslashes($email);
$email = addslashes($email);
$password = $_POST['password'];
$password = stripslashes($password);
$password = addslashes($password);
$college = $_POST['college'];
$college = stripslashes($college);
$college = addslashes($college);
$str="SELECT email from user WHERE email='$email'";
$result=mysqli_query($con,$str);
if((mysqli_num_rows($result))>0)
{
echo "<center><h3><script>alert('Sorry.. This email is already registered
!!');</script></h3></center>";
header("refresh:0;url=login.php");
}
else
{
$str="insert into user set
name='$name',email='$email',password='$password',college='$college'";
if((mysqli_query($con,$str)))
echo "<center><h3><script>alert('Congrats.. You have
successfully registered !!');</script></h3></center>";
header('location: welcome.php?q=1');
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register | Online Quiz System</title>

~ 74 ~
 <link rel="stylesheet" href="scripts/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="scripts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="css/form.css">
<style type="text/css">
body{
width: 100%;
background: url(image/book.png) ;
background-position: center
center; background-repeat: no-
repeat; background-attachment:
fixed; background-size: cover;
}
</style>
</head>
<body>
<section class="login first grey">
<div class="container">
<div class="box-wrapper">
<div class="box box-border">
<div class="box-body">
<center><h5 style="font-family:
Noto Sans;">Register to </h5><h4 style="font-family: Noto Sans;">Online Quiz
System</h4></center><br>
<form method="post"
action="register.php" enctype="multipart/form-data">
<div class="form-group">
<label>Enter Your
Username:</label>
<input type="text"
name="name" class="form-control" required />
</div>
<div class="form-group">
<label>Enter Your
Email Id:</label>
<input
type="email" name="email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter Your
Password:</label>
<input
type="password" name="password" class="form-control" required />
</div>
<div class="form-group">
<label>Enter Your
College Name:</label>
<input type="text"
name="college" class="form-control" required />
</div>

~ 75 ~
 <div class="form-group
text-right">
<button class="btn
btn-primary btn-block"
name="submit">Register</button> </div>
<div class="form-group

text-center"> <span class="text-

muted">Already have an account! </span><a href="login.php">Login </a>Here..
</div>
</form>
</div>
</div>
</div>
</
div>
</section>
<script src="js/jquery.js"></script>
<script src="scripts/bootstrap/bootstrap.min.js"></script>
</body>
</html>

Update.php
<?php
include_once 'database.php';
session_start();
$email=$_SESSION['email'];
if(isset($_SESSION['key']))
{
if(@$_GET['demail'] && $_SESSION['key']=='suryapinky')
{
$demail=@$_GET['demail'];
$r1 = mysqli_query($con,"DELETE FROM rank WHERE email='$demail' ") or
die('Error');
$r2 = mysqli_query($con,"DELETE FROM history WHERE email='$demail' ")
or die('Error');
$result = mysqli_query($con,"DELETE FROM user WHERE email='$demail' ")
or die('Error');
header("location:dashboard.php?q=1");
}
}
if(isset($_SESSION['key']))
{
if(@$_GET['q']== 'rmquiz' && $_SESSION['key']=='suryapinky')
{
$eid=@$_GET['eid'];
$result = mysqli_query($con,"SELECT * FROM questions WHERE eid='$eid' ")
or die('Error');
while($row = mysqli_fetch_array($result))
{
$qid = $row['qid'];
~ 76 ~
 $r1 = mysqli_query($con,"DELETE FROM options WHERE qid='$qid'") or
die('Error');
$r2 = mysqli_query($con,"DELETE FROM answer WHERE qid='$qid' ") or
die('Error');
}
$r3 = mysqli_query($con,"DELETE FROM questions WHERE eid='$eid' ") or
die('Error');
$r4 = mysqli_query($con,"DELETE FROM quiz WHERE eid='$eid' ") or
die('Error');
$r4 = mysqli_query($con,"DELETE FROM history WHERE eid='$eid' ") or
die('Error');
header("location:dashboard.php?q=5");
}
}
if(isset($_SESSION['key']))
{
if(@$_GET['q']== 'addquiz' && $_SESSION['key']=='suryapinky')
{
$name = $_POST['name'];
$name= ucwords(strtolower($name));
$total = $_POST['total'];
$sahi = $_POST['right'];
$wrong = $_POST['wrong'];
$id=uniqid();
$q3=mysqli_query($con,"INSERT INTO quiz VALUES ('$id','$name' , '$sahi' ,
'$wrong','$total', NOW())");
header("location:dashboard.php?q=4&step=2&eid=$id&n=$total");
}
}
if(isset($_SESSION['key']))
{
if(@$_GET['q']== 'addqns' && $_SESSION['key']=='suryapinky')
{
$n=@$_GET['n'];
$eid=@$_GET['eid'];
$ch=@$_GET['ch'];
for($i=1;$i<=$n;$i++)
{
$qid=uniqid();
$qns=$_POST['qns'.$i];
$q3=mysqli_query($con,"INSERT INTO questions
VALUES ('$eid','$qid','$qns' , '$ch' , '$i')");
$oaid=uniqid();
$obid=uniqid();
$ocid=uniqid();
$odid=uniqid();
$a=$_POST[$i.'1'];
$b=$_POST[$i.'2'];
$c=$_POST[$i.'3'];
$d=$_POST[$i.'4'];

~ 77 ~
 $qa=mysqli_query($con,"INSERT INTO options VALUES ('$qid','$a','$oaid')")
or die('Error61');
$qb=mysqli_query($con,"INSERT INTO options VALUES ('$qid','$b','$obid')")
or die('Error62');
$qc=mysqli_query($con,"INSERT INTO options VALUES ('$qid','$c','$ocid')")
or die('Error63');
$qd=mysqli_query($con,"INSERT INTO options VALUES ('$qid','$d','$odid')")
or die('Error64');
$e=$_POST['ans'.$i];
switch($e)
{
case 'a': $ansid=$oaid; break;
case 'b': $ansid=$obid;
break; case 'c': $ansid=$ocid;
break; case 'd':
$ansid=$odid; break; default:
$ansid=$oaid;
}
$qans=mysqli_query($con,"INSERT INTO answer VALUES ('$qid','$ansid')");
}
header("location:dashboard.php?q=0");
}
}
if(@$_GET['q']== 'quiz' && @$_GET['step']== 2)
{
$eid=@$_GET['eid'];
$sn=@$_GET['n'];
$total=@$_GET['t'];
$ans=$_POST['ans'];
$qid=@$_GET['qid'];
$q=mysqli_query($con,"SELECT * FROM answer WHERE qid='$qid' " );
while($row=mysqli_fetch_array($q) )
{ $ansid=$row['ansid']; }
if($ans == $ansid)
{
$q=mysqli_query($con,"SELECT * FROM quiz WHERE eid='$eid' " );
while($row=mysqli_fetch_array($q) )
{
$sahi=$row['sahi'];
}
if($sn == 1)
{
$q=mysqli_query($con,"INSERT INTO history VALUES('$email','$eid'
,'0','0','0','0',NOW())")or die('Error');
}
$q=mysqli_query($con,"SELECT * FROM history WHERE eid='$eid' AND
email='$email' ")or die('Error115');
while($row=mysqli_fetch_array($q) )
{
$s=$row['score'];
$r=$row['sahi'];
~ 78 ~
 }
$r++;
$s=$s+$sahi;
$q=mysqli_query($con,"UPDATE `history` SET `score`=$s,`level`=$sn,`sahi`=$r,
date= NOW() WHERE email = '$email' AND eid = '$eid'")or die('Error124');
}
else
{
$q=mysqli_query($con,"SELECT * FROM quiz WHERE eid='$eid' " )or
die('Error129');
while($row=mysqli_fetch_array($q) )
{
$wrong=$row['wrong'];
}
if($sn == 1)
{
$q=mysqli_query($con,"INSERT INTO history VALUES('$email','$eid'
,'0','0','0','0',NOW() )")or die('Error137');
}
$q=mysqli_query($con,"SELECT * FROM history WHERE eid='$eid' AND
email='$email' " )or die('Error139');
while($row=mysqli_fetch_array($q) )
{
$s=$row['score'];
$w=$row['wrong'];
}
$w++;
$s=$s-$wrong;
$q=mysqli_query($con,"UPDATE `history` SET
`score`=$s,`level`=$sn,`wrong`=$w, date=NOW() WHERE email = '$email' AND
eid = '$eid'")or die('Error147');
}
if($sn != $total)
{
$sn++; header("location:welcome.php?
q=quiz&step=2&eid=$eid&n=$sn&t=$total")or
die('Error152');
}
else if( $_SESSION['key']!='suryapinky')
{
$q=mysqli_query($con,"SELECT score FROM history WHERE eid='$eid' AND
email='$email'" )or die('Error156');
while($row=mysqli_fetch_array($q) )
{
$s=$row['score'];
}
$q=mysqli_query($con,"SELECT * FROM rank WHERE email='$email'" )or
die('Error161');
$rowcount=mysqli_num_rows($q);
if($rowcount == 0)

~ 79 ~
 {
$q2=mysqli_query($con,"INSERT INTO rank
VALUES('$email','$s',NOW())")or die('Error165');
}
else
{
while($row=mysqli_fetch_array($q) )
{
$sun=$row['score'];
}
$sun=$s+$sun;
$q=mysqli_query($con,"UPDATE `rank` SET `score`=$sun ,time=NOW()
WHERE email= '$email'")or die('Error174');
}
header("location:welcome.php?q=result&eid=$eid");
}
else
{
header("location:welcome.php?q=result&eid=$eid");
}
}
if(@$_GET['q']== 'quizre' && @$_GET['step']== 25 )
{
$eid=@$_GET['eid'];
$n=@$_GET['n'];
$t=@$_GET['t'];
$q=mysqli_query($con,"SELECT score FROM history WHERE eid='$eid' AND
email='$email'" )or die('Error156');
while($row=mysqli_fetch_array($q) )
{
$s=$row['score'];
}
$q=mysqli_query($con,"DELETE FROM `history` WHERE eid='$eid' AND
email='$email' " )or die('Error184');
$q=mysqli_query($con,"SELECT * FROM rank WHERE email='$email'" )or
die('Error161');
while($row=mysqli_fetch_array($q) )
{
$sun=$row['score'];
}
$sun=$sun-$s;
$q=mysqli_query($con,"UPDATE `rank` SET `score`=$sun ,time=NOW()
WHERE email= '$email'")or die('Error174');
header("location:welcome.php?q=quiz&step=2&eid=$eid&n=1&t=$t");
}
?>

Welcome.php
<?php
include_once 'database.php';

~ 80 ~
 session_start(); if(!
(isset($_SESSION['email'])))
{
header("location:login.php");
}
else
{
$name = $_SESSION['name'];
$email = $_SESSION['email'];
include_once 'database.php';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome | Online Quiz System</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/welcome.css">
<link rel="stylesheet" href="css/font.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default title1">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><b>Online Quiz System</b></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li <?php if(@$_GET['q']==1) echo'class="active"'; ?>><a
href="welcome.php?q=1"><span class="glyphicon glyphicon-home" aria-
hidden="true"></span>&nbsp;Home<span class="sr-
only">(current)</span></a></li>
<li <?php if(@$_GET['q']==2) echo'class="active"'; ?>><a
href="welcome.php?q=2"><span class="glyphicon glyphicon-list-alt" aria-
hidden="true"></span>&nbsp;History</a></li>

~ 81 ~
<li <?php if(@$_GET['q']==3) echo'class="active"'; ?>><a
href="welcome.php?q=3"><span class="glyphicon glyphicon-stats" aria-
hidden="true"></span>&nbsp;Ranking</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li <?php echo''; ?>><a href="logout.php?q=welcome.php"><span class="glyphicon
glyphicon-log-out" aria-hidden="true"></span>&nbsp;Log out</a></li>
</ul>
</div>
</div>
</nav>
<br><br>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if(@$_GET['q']==1)
{
$result = mysqli_query($con,"SELECT * FROM quiz ORDER BY date
DESC") or die('Error');
echo '<div class="panel"><div class="table-responsive"><table
class="table table-striped
title1"><tr><td><center><b>S.N.</b></center></td><td><center><b>Topic</b></c
enter></td><td><center><b>Total
question</b></center></td><td><center><b>Marks</center></b></td><td><center>
<b>Action</b></center></td></tr>';
$c=1;
while($row = mysqli_fetch_array($result)) {
$title = $row['title'];
$total = $row['total'];
$sahi = $row['sahi'];
$eid = $row['eid'];
$q12=mysqli_query($con,"SELECT score FROM history WHERE
eid='$eid' AND email='$email'" )or die('Error98');
$rowcount=mysqli_num_rows($q12);
if($rowcount == 0){
echo
'<tr><td><center>'.$c++.'</center></td><td><center>'.$title.'</center></td><td><ce
nter>'.$total.'</center></td><td><center>'.$sahi*$total.'</center></td><td><center><
b><a href="welcome.php?q=quiz&step=2&eid='.$eid.'&n=1&t='.$total.'" class="btn
sub1" style="color:black;margin:0px;background:#1de9b6"><span class="glyphicon
glyphicon-new-window" aria-hidden="true"></span>&nbsp;<span
class="title1"><b>Start</b></span></a></b></center></td></tr>';
}
else
{
echo '<tr
style="color:#99cc32"><td><center>'.$c++.'</center></td><td><center>'.$title.'&nbs
p;<span title="This quiz is already solve by you" class="glyphicon glyphicon-ok"
aria- hidden="true"></span></center></td><td><center>'.$total.'</center></
td><td><cent

~ 82 ~
er>'.$sahi*$total.'</center></td><td><center><b><a href="update.php?
q=quizre&step=25&eid='.$eid.'&n=1&t='.$total.'" class="pull-right btn sub1"
style="color:black;margin:0px;background:red"><span class="glyphicon glyphicon-
repeat" aria-hidden="true"></span>&nbsp;<span
class="title1"><b>Restart</b></span></a></b></center></td></tr>';
}
}
$c=0;
echo '</table></div></div>';
}?>
<?php
if(@$_GET['q']== 'quiz' && @$_GET['step']== 2)
{
$eid=@$_GET['eid'];
$sn=@$_GET['n'];
$total=@$_GET['t'];
$q=mysqli_query($con,"SELECT * FROM questions WHERE
eid='$eid' AND sn='$sn' " );
echo '<div class="panel" style="margin:5%">';
while($row=mysqli_fetch_array($q) )
{
$qns=$row['qns'];
$qid=$row['qid'];
echo '<b>Question &nbsp;'.$sn.'&nbsp;::<br /><br />'.$qns.'</b><br
/><br />';
}
$q=mysqli_query($con,"SELECT * FROM options WHERE
qid='$qid' "
); echo '<form
action="update.php?q=quiz&step=2&eid='.$eid.'&n='.$sn.'&t='.$total.'&qid='.$qid.'"
method="POST" class="form-horizontal">
<br />';
while($row=mysqli_fetch_array($q) )
{
$option=$row['option'];
$optionid=$row['optionid'];
echo'<input type="radio"
name="ans"
value="'.$optionid.'">&nbsp;'.$option.'<br /><br />';
}
echo'<br /><button type="submit" class="btn btn-primary"><span
class="glyphicon glyphicon-lock" aria-
hidden="true"></span>&nbsp;Submit</button></form></div>';
}
if(@$_GET['q']== 'result' && @$_GET['eid'])
{
$eid=@$_GET['eid'];
$q=mysqli_query($con,"SELECT * FROM history WHERE eid='$eid'
AND email='$email' " )or die('Error157');
echo '<div class="panel">

~ 83 ~
<center><h1 class="title" style="color:#660033">Result</h1><center><br /><table
class="table table-striped title1" style="font-size:20px;font-weight:1000;">';
while($row=mysqli_fetch_array($q) )
{
$s=$row['score'];
$w=$row['wrong'];
$r=$row['sahi'];
$qa=$row['level'];
echo '<tr style="color:#66CCFF"><td>Total
Questions</td><td>'.$qa.'</td></tr>
<tr style="color:#99cc32"><td>right Answer&nbsp;<span
class="glyphicon glyphicon-ok-circle"
aria-hidden="true"></span></td><td>'.$r.'</td></tr>
<tr style="color:red"><td>Wrong Answer&nbsp;<span class="glyphicon glyphicon-
remove-circle" aria-hidden="true"></span></td><td>'.$w.'</td></tr>
<tr style="color:#66CCFF"><td>Score&nbsp;<span class="glyphicon glyphicon-
star" aria-hidden="true"></span></td><td>'.$s.'</td></tr>';
}
$q=mysqli_query($con,"SELECT * FROM rank
WHERE email='$email' " )or die('Error157');
while($row=mysqli_fetch_array($q) )
{
$s=$row['score'];
echo '<tr style="color:#990000"><td>Overall Score&nbsp;<span
class="glyphicon glyphicon-stats" aria-
hidden="true"></span></td><td>'.$s.'</td></tr>';
}
echo '</table></div>';
}
?>
<?php
if(@$_GET['q']== 2)
{
$q=mysqli_query($con,"SELECT * FROM history WHERE
email='$email' ORDER BY date DESC " )or die('Error197');
echo '<div class="panel title">
<table class="table table-striped title1" >
<tr
style="color:black;"><td><center><b>S.N.</b></center></td><td><center><b>Quiz
</b></center></td><td><center><b>Question
Solved</b></center></td><td><center><b>Right</b></center></td><td><center><b
>Wrong<b></center></td><td><center><b>Score</b></center></td>';
$c=0;
while($row=mysqli_fetch_array($q) )
{
$eid=$row['eid'];
$s=$row['score'];
$w=$row['wrong'];
$r=$row['sahi'];
$qa=$row['level'];

~ 84 ~
 $q23=mysqli_query($con,"SELECT title FROM quiz WHERE
eid='$eid' " )or die('Error208');
while($row=mysqli_fetch_array($q23) )
{ $title=$row['title']; }
$c++;
echo
'<tr><td><center>'.$c.'</center></td><td><center>'.$title.'</center></td><td><center
>'.$qa.'</center></td><td><center>'.$r.'</center></td><td><center>'.$w.'</center></t
d><td><center>'.$s.'</center></td></tr>';
}
echo'</table></div>';
}
if(@$_GET['q']== 3)
{
$q=mysqli_query($con,"SELECT * FROM rank ORDER BY score
DESC " )or die('Error223');
echo '<div class="panel title"><div class="table-responsive">
<table class="table table-striped title1" >
<tr
style="color:red"><td><center><b>Rank</b></center></td><td><center><b>Name
</b></center></td><td><center><b>Email</b></center></td><td><center><b>Scor
e</b></center></td></tr>';
$c=0;
while($row=mysqli_fetch_array($q) )
{
$e=$row['email'];
$s=$row['score'];
$q12=mysqli_query($con,"SELECT * FROM user
WHERE email='$e' " )or die('Error231');
while($row=mysqli_fetch_array($q12) )
{
$name=$row['name'];
}
$c++;
echo '<tr><td
style="color:black"><center><b>'.$c.'</b></center></td><td><center>'.$name.'</cen
ter></td><td><center>'.$e.'</center></td><td><center>'.$s.'</center></td></tr>';
}
echo '</table></div></div>';
}
?>
</body>
</html>

Font.css
@font-face {
font-family: 'Open
Sans'; font-style:
normal;
font-weight: 400;

~ 85 ~
 src: local('Open Sans'), local('OpenSans'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERx
qtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Form.css
body {
font-family: "Noto
Sans"; font-weight: 300;
color: #191E21;
font-size: 1.4em;
}
h1, h2, h3, h4, h6,
.line div {
font-weight: 800;
font-family: 'Raleway';
color: #000;
margin: 10px 0;
}
h4 {
font-size: 26px;
}
.input-group .btn {
height: 40px;
}
a, .btn {
transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
}
a{
color: #F73F52;
}
a:hover, a:focus {
color: #C8081C;
}
section {
padding-top: 20px;
padding-bottom: 40px;
}
section.first {
padding-top: 120px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.form-control {
border-radius: 0;

~ 86 ~
 height: 40px;
}
.form-control:focus {
border-color: #989898;
box-shadow: 0 1px 2px #ddd;
}
.btn {
font-size: 15px;
border-radius: 0;
padding-left: 20px;
padding-right: 20px;
border-color:
transparent; padding-top:
10px; padding-bottom:
10px; letter-
spacing: .5px;
}
.btn.btn-lg {
border-radius: 0;
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 15px;
}
.btn.btn-sm {
border-radius: 0;
padding: 5px 10px;
font-size: 12px;
}
.btn:focus {
outline: 0;
box-shadow: none;
border-color:
transparent;
}
.btn.btn-rounded {
border-radius: 3px;
}
.btn i {
margin-right: 5px;
}
.btn-social {
font-weight: 400;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
.btn-social:hover {
}

~ 87 ~
 color: #fff;
opacity: .8;

~ 88 ~
.btn-primary {
background-color: #F73F52;
border-color: #F73F52;
}
.btn-primary:disabled, .btn-primary.disabled, .btn-primary:hover, .btn-primary:active,
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:focus {
background-color: #c8081c;
border-color: #c8081c;
box-shadow: none;
outline: 0;
}
.btn-primary:active:hover {
background-color:
#af0719;
}
.btn-success {
background-color: #1ABC9C;
color: #fff !important;
border-color: #1ABC9C;
}
.btn-success:disabled, .btn-success.disabled, .btn-success:hover, .btn-success:active,
.btn-success:active:hover, .btn-success:active:focus, .btn-success:focus {
background-color: #0e6252;
border-color: #0e6252;
outline: 0;
box-shadow: none;
}
.btn-success:active:hover {
background-color: #0b4c3f;
}
.btn-warning {
background-color: #F39C12;
color: #fff !important;
border-color: #F39C12;
}
.btn-warning:disabled, .btn-warning.disabled, .btn-warning:hover, .btn-
warning:active, .btn-warning:active:hover, .btn-warning:active:focus, .btn-
warning:focus {
background-color: #976008;
border-color: #976008;
outline: 0;
box-shadow: none;
}
.btn-warning:active:hover {
background-color: #7f5006;
}
.btn-danger {
background-color: #E74C3C;
color: #fff !important;
}

~ 89 ~
 border-color: #E74C3C;

~ 90 ~
.btn-danger:disabled, .btn-danger.disabled, .btn-danger:hover, .btn-danger:active, .btn-
danger:active:hover, .btn-danger:active:focus, .btn-danger:focus {
background-color: #a82315;
border-color: #a82315;
outline: 0;
box-shadow: none;
}
.btn-danger:active:hover {
background-color: #921e12;
}
.btn-info {
background-color: #3498db;
color: #fff !important;
border-color: #3498db;
}
.btn-info:disabled, .btn-info.disabled, .btn-info:hover, .btn-info:active, .btn-
info:active:hover, .btn-info:active:focus, .btn-info:focus {
background-color: #196090;
border-color: #196090;
outline: 0;
box-shadow: none;
}
.btn-info:active:hover {
background-color: #16527a;
}
.btn-default {
background-color: #E7E7E7;
color: #fff !important;
border-color: #E7E7E7;
}
.btn-default:disabled, .btn-default.disabled, .btn-default:hover, .btn-default:active,
.btn-default:active:hover, .btn-default:active:focus, .btn-default:focus {
background-color: #b4b4b4;
border-color: #b4b4b4;
border-color: transparent;
outline: 0;
box-shadow: none;
}
.btn-default:active:hover {
background-color: #a7a7a7;
}
.btn-magz {
background-color: transparent;
color: #F73F52;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all
0.5s; border-color:
#F73F52; position:
relative;
~ 91 ~
 overflow: hidden;
z-index: 2;
}
.btn-magz:after {
position: absolute;
bottom: -20px;
left: 20px;
width: 5px;
height: 5px;
opacity: 0;
border-radius: 50%;
content: ' ';
background-color: #F73F52;
z-index: -1;
transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-webkit-transition: all .3s;
}
.btn-magz:focus:after, .btn-magz:hover:after {
transform: scale(200);
-webkit-transform: scale(200);
-moz-transform: scale(200);
-o-transform: scale(200);
opacity: 1;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.btn-magz:focus {
color: #fff;
}
.btn-magz:hover {
background-color: transparent;
color: #fff !important;
}
.btn-magz i {
margin-left: 10px;
}
.btn-magz.white {
color: #fff;
}
.btn-magz.white:after {
background-color:
#fff;
}
.btn-magz.white:focus, .btn-magz.white:hover {
color: #F73F52 !important;
}
.form-group label {
~ 92 ~
 margin-bottom:
5px; font-size:
14px;
font-weight: 400;
}
.form-group label.fw {
display: block;
}
.form-group label .required {
color: #E74C3C;
font-weight: 600;
font-size: 16px;
}
.form-group label .required:before {
content: '*';
}
.form-group .help-block {
font-size: 12px;
margin-top: -3px;
}
.form-group .form-control {
border-radius: 0;
font-family: 'Noto
Sans'; font-weight: 300;
}
.form-group .form-control:focus {
border-color: #989898;
box-shadow: 0 1px 2px #ddd;
}
.form-group .form-control.rounded {
border-radius: 4px;
}
.form-group.has-error .form-control {
border-color: #E74C3C;
}
.form-group.has-error .control-label {
color: #E74C3C;
}
.form-group.has-error .help-block {
color: #E74C3C;
}
.form-group.has-success .form-control {
border-color: #1ABC9C;
}
.form-group.has-success .control-label {
color: #1ABC9C;
}
.form-group.has-success .help-block {
color: #1ABC9C;
}
.form-group.has-warning .form-control {
~ 93 ~
 border-color: #F39C12;
}
.form-group.has-warning .control-label {
color: #F39C12;
}
.form-group.has-warning .help-block {
color: #F39C12;
}
.form-group.floating {
position: relative;
margin-top: 10px;
}
.form-group.floating .form-control {
padding-left: 0;
padding-right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-right-color:
transparent; border-bottom-
width: 2px;
box-shadow: none;
}
.form-group.floating.stacked label
{ font-size: 12px;
position: absolute;
top: -13px;
left: 0;
background-color: #fff;
}
.form-group.floating.focus label {
position: absolute;
top: 10px;
left: 0;
transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all
0.5s; z-index: -1;
}
.form-group.floating.focus .form-control {
background-color: transparent;
border-radius: 0;
}
.form-group.floating.focus .form-control::-webkit-input-placeholder {
opacity: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.form-group.floating.focus.focused label {
~ 94 ~
 top: -13px;
left: 0;
font-size: 12px;
}
.form-group.floating.focus.focused .form-control::-webkit-input-placeholder {
opacity: 1;
}
section .container {
padding-left: 15px;
padding-right: 15px;
}
.box-wrapper {
width: 400px;
margin: 0 auto;
}
.box {
background-color: rgb(240, 240, 240);
border-radius: 3px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}
.box.box-border {
box-shadow:
none;
border: 1px solid #f2f2f2;
}
.box .box-body {
padding: 30px;
}
.box .box-body h4 {
margin-bottom:
30px;
}
@media screen and (max-width: 768px) {
.with-sidebar .sidebar {
display: none;
}
.with-sidebar .has-sidebar {
padding: 0 20px;
}
.for-tablet {
display: block !important;
}
footer.footer .block {
margin-bottom:
30px;
}
footer.footer .line {
margin: 0;
margin-bottom: 30px;
}
.divider-top {
~ 95 ~
 margin-top: 50px;
}

~ 96 ~
.sidebar {
position:
fixed; top: 0;
right: -320px;
height: 100%;
width: 320px;
z-index: 2001;
background-color: #fff;
overflow: auto;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.sidebar.active {
right: 0;
}
.sidebar .sidebar-title {
margin: 0 -15px;
height: 53px;
text-align: center;
border-bottom: 1px solid
#f2f2f2; letter-spacing: .5px;
font-weight: 700;
line-height: 55px;
font-family: 'Raleway', sans-
serif; margin-bottom: 30px;
}
.trending-tags {
margin-bottom: 20px;
}
.search-toggle {
display: none;
}
nav.menu {
height: 55px;
}
nav.menu .mobile-toggle {
display: inline-block;
}
nav.menu ul.nav-list {
position: fixed;
width: 320px;
height: 100%;
top: 0;
right: -320px;
background-color: #fff;
z-index: 3000;
overflow: auto;
transition: all 0.5s;

~ 97 ~
 -webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
}
nav.menu ul.nav-list.active {
right: 0;
}
nav.menu ul.nav-list li
{ display: block;
float: none;
position: static;
padding-top: 2px;
padding-bottom: 2px;
}
nav.menu ul.nav-list > li:first-child {
margin-left: 0;
text-align: center;
position: relative;
}
nav.menu ul.nav-list > li:first-child .back {
z-index: 9;
position: absolute;
height: 100%;
width: 50px;
line-height: 55px;
font-size: 20px;
}
nav.menu ul.nav-list > li:first-child a {
border-bottom: 1px solid #f2f2f2;
}
nav.menu ul.nav-list > li:first-child a:after {
display: none;
}
nav.menu ul.nav-list > li > a {
display: block;
}
nav.menu ul.nav-list > li > a .badge {
right: 10px;
top: 5px;
}
nav.menu ul.nav-list > li .dropdown-menu {
box-shadow: none;
position: absolute;
top: 57px;
left: initial;
right: -320px;
height: calc(100% - 55px);
height: -webkit-calc(100% - 55px);
height: -moz-calc(100% - 55px);
height: -o-calc(100% - 55px);

~ 98 ~
 width: 320px;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
display: none;
opacity: 1;
}
nav.menu ul.nav-list > li .dropdown-menu.active {
right: 0;
}
nav.menu ul.nav-list > li .dropdown-menu > li > a {
width: auto;
}
nav.menu ul.nav-list > li .dropdown-menu > li > a:hover:after {
transform: scale(105);
-webkit-transform: scale(105);
-moz-transform: scale(105);
-o-transform: scale(105);
}
nav.menu ul.nav-list > li .dropdown-menu > li ul {
top: 0;
}
nav.menu ul.nav-list > li .dropdown-menu [class^="col-"] {
margin-bottom: 30px;
}
header.primary.up {
top: -286px;
}
.firstbar {
text-align: center;
}
.firstbar .brand {
float: none;
}
.firstbar .brand img {
float: none;
display: inline-block;
margin-bottom:
15px;
}
.firstbar .brand h2 {
display: block;
float: none;
border: none;
margin: 0;
padding: 0;
width: initial;
}
.firstbar .search {
~ 99 ~
 margin: 0 70px;
}
.firstbar .right {
float: none;
display: block;
margin: 10px auto;
}
}
@media screen and (max-width: 425px) {
.article-list figure {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
.article-list .details
{ margin-left: 0;
}
.article-list .details .detail {
display: inline-flex;
display: -webkit-inline-box;
}
.line div {
font-size: 14px;
}
.featured {
height: 200px;
}
.featured .details h1 {
font-size: 16px;
}
.featured .details .category a {
padding: 3px 6px;
}
.firstbar .search {
margin-left: 20px;
margin-right:
20px;
}
.topbar .topbar-nav li a i, .topbar ul.info li a i {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
display: block;
font-size: 22px;
}
.topbar .topbar-nav li a span, .topbar ul.info li a span {
display: none;
}
.for-mobile {
display: block !important;
~ 100
~
 }
.nav-icons {
display: none;
}
.box-wrapper {
width: 100%;
}
.box .box-body {
padding: 20px;
}
}
@media screen and (max-width: 320px) {
nav.menu ul.nav-list {
width: 290px;
right: -350px;
}
nav.menu ul.nav-list > li .dropdown-menu {
width: 290px;
right: -350px;
}
.sidebar {
width: 290px;
right: -350px;
}
article figure {
height: 200px;
}
}

Index.css
body { line-height: 1; margin: auto; padding: auto; }
html, body { width: 100%; height: 100%; overflow: hidden; }
a:link { text-decoration: none; }
.intro { position: absolute; left: 0; top:20%; padding: 0 20px; width: 100%; text-
align: center; }
h1 {
color: #fff;
text-transform: uppercase;
font-size: 100px;
font-weight: 700;
letter-spacing: 0.015em;
}
h1::after {
content: '';
width: 200px;
display: block;
background: #ffee58;
height: 6px;
margin: 30px auto;

~ 101
~
 line-height: 1.1;
}
.btn {
display: inline-block;
padding: 15px 30px;
border: 2px solid #fff;
text-transform: uppercase;
letter-spacing: 0.015em;
font-size: 18px;
font-weight: 600;
line-height: 1;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.btn:hover {
color: #000;
border-color: #fff;
background-color: #607d8b;
}
h2 {
color: #ffd600;
text-transform: uppercase;
font-size: 35px;
font-weight: 700;
letter-spacing: 0.015em;
}
@media only screen and (max-width: 1000px) {
h1 {
font-size: 70px;
}
}
@media only screen and (max-width: 800px) {
h1 {
font-size: 48px;
}
h1::after {
height: 8px;
}
}
@media only screen and (max-width: 550px) {
.btn {
display: inline-block;
padding: 5px 15px;
border: 2px solid #fff;
text-transform: uppercase;
letter-spacing: 0.009em;

~ 102
~
 font-size: 13px;
font-weight: 400;
line-height: 1;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
}
@media only screen and (max-width: 430px) {
.btn {
display: inline-block;
padding: 5px 10px;
border: 1px solid #fff;
text-transform: uppercase;
letter-spacing: 0.005em;
font-size: 10px;
font-weight: 400;
line-height: 1;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
}
@media only screen and (max-width: 568px) {
.intro {
padding: 0 10px;
}
h1 {
font-size: 30px;
}
h1::after {
height: 6px;
}
p{
font-size: 18px;
}
.btn {
font-size: 16px;
}
}
@media only screen and (max-width: 320px) {
h1 {
font-size: 28px;
}

~ 103
~
 h1::after {
height: 4px;
}
}

Welcome.css
* {box-sizing: border-box;}
body {
background-color: #0b9164;
margin: 0;
font-family: Noto Sans;
}
.header {
text-align: center;
overflow: hidden;
background-color: #0b9164;
padding: 20px 10px;
text-decoration: none;
}
.header a, .header .logo {
color: rgb(255, 255, 255);
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 10px;
border-radius: 4px;
}
.header .logo {
color:#fff;
font-size: 25px;
font-weight:
bold;
}
@media screen and (max-width: 500px) {
.header a {
font-size: 15px;
display: inherit;
text-align: left;
}
.header-right {
padding-top: 10%;
font-size: 15px;
float: none;
}
}
.panel{
border-color:rgb(0, 0, 0);
margin:40px;
padding:20px;
font: 15px "Noto Sans";
~ 104
~
 }

5.4 Flashcards Module

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="flashcard.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Flashcards</title>
</head>
<body>
<main>
<header>
<div class="container">
<div id="header">
<h1>Flashcards</h1>
<div>
<button id="show_card_box">Add Card</button>
<button id="delete_cards">Del Cards</button>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div id="create_card">
<h2>Create Flashcard</h2>
<label for="question">Question</label>
<textarea id="question" maxlength="280"></textarea>
<label for="answer" maxlength="280">Answer</label>
<br>
<textarea id="answer"></textarea>
<div>
<button id="save_card">Save</button><button id="close_card_box">Close</button>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div id="flashcards"></div>
</div>
</section>
</main>

~ 105
~
<script src="script.js"></script>
</body>
</html>

Script.js
var contentArray = localStorage.getItem('items') ?
JSON.parse(localStorage.getItem('items')) : [];
document.getElementById("save_card").addEventListener("click", () => {
addFlashcard();
});
document.getElementById("delete_cards").addEventListener("click", () => {
localStorage.clear();
flashcards.innerHTML = '';
contentArray = [];
});
document.getElementById("show_card_box").addEventListener("click", () => {
document.getElementById("create_card").style.display = "block";
});
document.getElementById("close_card_box").addEventListener("click", () => {
document.getElementById("create_card").style.display = "none";
});
flashcardMaker = (text, delThisIndex) => {
const flashcard =
document.createElement("div"); const question =
document.createElement('h2'); const answer =
document.createElement('h2'); const del =
document.createElement('i'); flashcard.className
= 'flashcard';
question.setAttribute("style", "border-top:1px solid red; padding: 15px; margin-
top:30px");
question.textContent = text.my_question;
answer.setAttribute("style", "text-align:center; display:none; color:red");
answer.textContent = text.my_answer;
del.className = "fas fa-minus";
del.addEventListener("click", () => {
contentArray.splice(delThisIndex, 1);
localStorage.setItem('items', JSON.stringify(contentArray));
window.location.reload();
})
flashcard.appendChild(question);
flashcard.appendChild(answer);
flashcard.appendChild(del);
flashcard.addEventListener("click", () => {
if(answer.style.display == "none")
answer.style.display = "block";
else
answer.style.display = "none";
})
document.querySelector("#flashcards").appendChild(flashcard);
}
contentArray.forEach(flashcardMaker);
~ 106
~
addFlashcard = () => {
const question =
document.querySelector("#question"); const answer =
document.querySelector("#answer"); let flashcard_info
={
'my_question' :
question.value, 'my_answer' :
answer.value
}
contentArray.push(flashcard_info);
localStorage.setItem('items', JSON.stringify(contentArray));
flashcardMaker(contentArray[contentArray.length - 1], contentArray.length - 1);
question.value = "";
answer.value = "";
}

Style.css
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Nunito', sans-
serif; font-size: 1rem;
background: whitesmoke;
}
button{ padding
: 8px; outline:
none; cursor:
pointer;
border: 1px solid
lightgray; border-radius:
5px; background:
whitesmoke;
}
button:hover{
background-color: rgba(0, 0, 0, 0.1);
}
.container{ widt
h: 1280px;
margin: auto;
}
header{background-color: #fff;}
#header{
display: flex;
justify-content: space-
between; align-items: center;
min-height: 70px;
padding: 0 20px;
~ 107
~
 background: #fff;
}

~ 108
~
#header button{
font-family: inherit;
border: 1px solid red;
}
#create_card{ disp
lay: none; width:
370px;
margin:auto;
padding: 20px;
margin-top: 10px;
background: whitesmoke;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
}
#create_card h2{
color: black;
text-align: center;
}
#create_card textarea{
width: 100%;
border-radius: 5px;
font-family:
inherit;
border: 1px solid
lightgray; resize: none;
}
#create_card button{width: fit-content;}
#flashcards{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin: auto;
margin-top: 10px;
padding: 0px
10px;
}
.flashcard{ widt
h: 370px;
height: 200px;
word-wrap: break-word;
margin: 10px;
background:#fff;
cursor: pointer;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
position: relative;
}
.flashcard h2{font-size: 1rem;}
.fa-minus{
top: 3%;
right: 2%;
~ 109 ~
position: absolute;

~ 110 ~
 color: #1a1a1a;
transition: 0.3s ease-out;
}
.fa-minus:hover{color: red;}
@media(max-width:1280px){
.container{width: 100%;}
}
@media(max-width:768px){
.flashcard{margin: auto;}
.flashcard{
margin-top: 10px;
margin-bottom:
10px;
}
}
@media(max-width:480px){
#header{
padding: 20px;
gap: 10px;
flex-direction:
column; align-items:
center;
}
#create_card{width: 95%;}
.flashcard{width: 100%;}
}

5.5 Zoom Server Module

Index.js
window.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
websdkready();
});
function websdkready() {
var testTool = window.testTool;

if (testTool.isMobileDevice()) {
vConsole = new VConsole();
}
console.log("checkSystemRequirements");
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

// it's option if you want to change the WebSDK dependency link resources.
setZoomJSLib must be run at first
// if (!china) ZoomMtg.setZoomJSLib('https://source.zoom.us/2.9.5/lib', '/av'); //
CDN version default
// else ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/2.9.5/lib', '/av'); // china cdn
option

~ 111 ~
 //
ZoomMtg.setZoomJSLib('http://localhost:9999/node_modules/@zoomus/websdk/dist
/lib', '/av'); // Local version default, Angular Project change to use cdn version
ZoomMtg.preLoadWasm(); // pre download wasm file to save time.

var SDK_KEY = "Mb_aVyeSRXSr5J1b1ErOxw";

/**
* NEVER PUT YOUR ACTUAL SDK SECRET IN CLIENT SIDE CODE, THIS
IS JUST FOR QUICK PROTOTYPING
* The below generateSignature should be done server side as not to expose
your SDK SECRET in public
* You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-
sdks/web/essential/signature
*/
var SDK_SECRET = "Gn24QY7j35W9ZsiKQhsnXnumWeb1Sa1u";

// some help code, remember mn, pwd, lang to cookie, and autofill.
document.getElementById("display_name").value =
"CDN" +
ZoomMtg.getJSSDKVersion()[0] +
testTool.detectOS() +
"#" +
testTool.getBrowserInfo();
document.getElementById("meeting_number").value = testTool.getCookie(
"meeting_number"
);
document.getElementById("meeting_pwd").value = testTool.getCookie(
"meeting_pwd"
);
if (testTool.getCookie("meeting_lang"))
document.getElementById("meeting_lang").value = testTool.getCookie(
"meeting_lang"
);
document
.getElementById("meeting_lang")
.addEventListener("change", function (e) {
testTool.setCookie(
"meeting_lang",
document.getElementById("meeting_lang").value
);
testTool.setCookie(
"_zm_lang",
document.getElementById("meeting_lang").value
);
});
// copy zoom invite link to mn, autofill mn and
pwd. document
.getElementById("meeting_number")
.addEventListener("input", function (e) {
var tmpMn = e.target.value.replace(/([^0-9])+/i, "");

~ 112 ~
 if (tmpMn.match(/([0-9]{9,11})/)) {
tmpMn = tmpMn.match(/([0-9]{9,11})/)[1];
}
var tmpPwd = e.target.value.match(/pwd=([\d,\w]+)/);
if (tmpPwd) {
document.getElementById("meeting_pwd").value = tmpPwd[1];
testTool.setCookie("meeting_pwd", tmpPwd[1]);
}
document.getElementById("meeting_number").value = tmpMn;
testTool.setCookie(
"meeting_number",
document.getElementById("meeting_number").value
);
});
document.getElementById("clear_all").addEventListener("click", function (e) {
testTool.deleteAllCookies();
document.getElementById("display_name").value = "";
document.getElementById("meeting_number").value = "";
document.getElementById("meeting_pwd").value = "";
document.getElementById("meeting_lang").value = "en-US";
document.getElementById("meeting_role").value = 0;
window.location.href = "/index.html";
});
// click join meeting button
document
.getElementById("join_meeting")
.addEventListener("click", function (e) {
e.preventDefault();
var meetingConfig = testTool.getMeetingConfig();
if (!meetingConfig.mn || !meetingConfig.name) {
alert("Meeting number or username is empty");
return false;
}
testTool.setCookie("meeting_number", meetingConfig.mn);
testTool.setCookie("meeting_pwd", meetingConfig.pwd);
var signature = ZoomMtg.generateSDKSignature({
meetingNumber: meetingConfig.mn,
sdkKey: SDK_KEY,
sdkSecret: SDK_SECRET,
role: meetingConfig.role,
success: function (res) {
console.log(res.result);
meetingConfig.signature = res.result;
meetingConfig.sdkKey =
SDK_KEY;
var joinUrl = "/xampp/htdocs/Nimisha/Zoom/meeting.html?" +
testTool.serialize(meetingConfig);
console.log(joinUrl);
window.open(joinUrl, "_blank");
},
});
~ 113 ~
 });
function copyToClipboard(elementId) {
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).getAttribute('link'));
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
// click copy jon link button
window.copyJoinLink = function (element) {
var meetingConfig = testTool.getMeetingConfig();
if (!meetingConfig.mn || !meetingConfig.name) {
alert("Meeting number or username is empty");
return false;
}
var signature =
ZoomMtg.generateSDKSignature({ meetingNum
ber: meetingConfig.mn,
sdkKey: SDK_KEY,
sdkSecret: SDK_SECRET,
role: meetingConfig.role,
success: function (res) {
console.log(res.result);
meetingConfig.signature = res.result;
meetingConfig.sdkKey =
SDK_KEY; var joinUrl =
testTool.getCurrentDomain() +
"/xampp/htdocs/Nimisha/Zoom/meeting.html?" +
testTool.serialize(meetingConfig);
document.getElementById('copy_link_value').setAttribute('link', joinUrl);
copyToClipboard('copy_link_value');
},
});
};
}

Meeting.js
window.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
websdkready();
});
function websdkready() {
var testTool = window.testTool;
// get meeting args from url
var tmpArgs =
testTool.parseQuery(); var
meetingConfig = {
sdkKey: tmpArgs.sdkKey,
meetingNumber: tmpArgs.mn,
userName: (function () {
~ 114 ~
if (tmpArgs.name) {

~ 115 ~
 try {
return testTool.b64DecodeUnicode(tmpArgs.name);
} catch (e) {
return tmpArgs.name;
}
}
return (
"CDN#" +
tmpArgs.version +
"#" +
testTool.detectOS() +
"#" +
testTool.getBrowserInfo()
);
})(),
passWord: tmpArgs.pwd,
leaveUrl: "/xampp/htdocs/Nimisha/Zoom/index.html",
role: parseInt(tmpArgs.role, 10),
userEmail: (function () {
try {
return testTool.b64DecodeUnicode(tmpArgs.email);
} catch (e) {
return tmpArgs.email;
}
})(),
lang: tmpArgs.lang,
signature: tmpArgs.signature ||
"", china: tmpArgs.china ===
"1",
};
// a tool use debug mobile
device if
(testTool.isMobileDevice()) {
vConsole = new VConsole();
}
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
// it's option if you want to change the WebSDK dependency link resources.
setZoomJSLib must be run at first
// ZoomMtg.setZoomJSLib("https://source.zoom.us/2.9.5/lib", "/av"); // CDN
version defaul
if (meetingConfig.china)
ZoomMtg.setZoomJSLib("https://jssdk.zoomus.cn/2.9.5/lib", "/av"); // china cdn
option
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
function beginJoin(signature) {
ZoomMtg.init({
leaveUrl: meetingConfig.leaveUrl,
webEndpoint: meetingConfig.webEndpoint,
disableCORP: !window.crossOriginIsolated, // default true
// disablePreview: false, // default false
~ 116 ~
externalLinkPage: './externalLinkPage.html',

~ 117 ~
 success: function () {
console.log(meetingConfig);
console.log("signature", signature);
ZoomMtg.i18n.load(meetingConfig.lang);
ZoomMtg.i18n.reload(meetingConfig.lang);
ZoomMtg.join({
meetingNumber: meetingConfig.meetingNumber,
userName: meetingConfig.userName,
signature: signature,
sdkKey: meetingConfig.sdkKey,
userEmail: meetingConfig.userEmail,
passWord: meetingConfig.passWord,
success: function (res) {
console.log("join meeting success");
console.log("get attendeelist");
ZoomMtg.getAttendeeslist({});
ZoomMtg.getCurrentUser({ su
ccess: function (res) {
console.log("success getCurrentUser", res.result.currentUser);
},
});
},
error: function (res) {
console.log(res);
},
});
},
error: function (res) {
console.log(res);
},
});
ZoomMtg.inMeetingServiceListener('onUserJoin', function (data) {
console.log('inMeetingServiceListener onUserJoin', data);
});
ZoomMtg.inMeetingServiceListener('onUserLeave', function (data) {
console.log('inMeetingServiceListener onUserLeave', data);
});
ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', function (data) {
console.log('inMeetingServiceListener onUserIsInWaitingRoom', data);
});
ZoomMtg.inMeetingServiceListener('onMeetingStatus', function (data) {
console.log('inMeetingServiceListener onMeetingStatus', data);
});
}
beginJoin(meetingConfig.signature);
};

Index.html
<!DOCTYPE html>
<head>

~ 118 ~
<title>Zoom WebSDK</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet"
href="https://source.zoom.us/2.9.5/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.5/css/react-
select.css" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1, user-scalable=no">
</head>

<body>
<style>
.sdk-select {
height: 34px;
border-radius: 4px;
}
.websdktest button {
float: right;
margin-left: 5px;
}
#nav-tool {
margin-bottom: 0px;
}
#show-test-tool {
position: absolute;
top: 100px;
left: 0;
display: block;
z-index: 99999;
}
#display_name {
width: 250px;
}
#websdk-iframe {
width: 700px;
height: 500px;
border: 1px;
border-color: red;
border-style: dashed;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
left: 50%;
margin: 0;
}
</style>
<nav id="nav-tool" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">

~ 119 ~
<div class="navbar-header">
<a class="navbar-brand" href="#">Zoom WebSDK</a>
</div>
<div id="navbar" class="websdktest">
<form class="navbar-form navbar-right" id="meeting_form">
<div class="form-group">
<input type="text" name="display_name" id="display_name" value="2.9.5#CDN"
maxLength="100"
placeholder="Name" class="form-control" required>
</div>
<div class="form-group">
<input type="text" name="meeting_number" id="meeting_number" value=""
maxLength="200"
style="width:150px" placeholder="Meeting Number" class="form-
control" required>
</div>
<div class="form-group">
<input type="text" name="meeting_pwd" id="meeting_pwd" value=""
style="width:150px"
maxLength="32" placeholder="Meeting Password" class="form-
control">
</div>
<div class="form-group">
<input type="text" name="meeting_email" id="meeting_email" value=""
style="width:150px"
maxLength="32" placeholder="Email option" class="form-
control">
</div>

<div class="form-group">
<select id="meeting_role" class="sdk-select">
<option value=0>Attendee</option>
<option value=1>Host</option>
</select>
</div>
<div class="form-group">
<select id="meeting_china" class="sdk-select">
<option value=0>Global</option>
<option value=1>China</option>
</select>
</div>
<div class="form-group">
<select id="meeting_lang" class="sdk-select">
<option value="en-US">English</option>
<option value="de-DE">German Deutsch</option>
<option value="es-ES">Spanish Español</option>
<option value="fr-FR">French Français</option>
<option value="jp-JP">Japanese 日本語</option>
<option value="pt-PT">Portuguese Portuguese</option>
<option value="ru-RU">Russian Русский</option>

~ 120 ~
<option value="zh-CN">Chinese 简体中文</option>
<option value="zh-TW">Chinese 繁体中文</option>
<option value="ko-KO">Korean 한국어</option>
<option value="vi-VN">Vietnamese Tiếng Việt</option>
<option value="it-IT">Italian italiano</option>
</select>
</div>
<input type="hidden" value="" id="copy_link_value" />
<button type="submit" class="btn btn-primary" id="join_meeting">Join</button>
<button type="submit" class="btn btn-primary" id="clear_all">Clear</button>
<button type="button" link="" onclick="window.copyJoinLink('#copy_join_link')"
class="btn btn-primary" id="copy_join_link">Copy Direct join
link</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div id="show-test-tool">
<button type="submit" class="btn btn-primary" id="show-test-tool-btn"
title="show or hide top test tool">Show</button>
</div>
<script>
document.getElementById('show-test-tool-btn').addEventListener("click", function
(e) {
var textContent = e.target.textContent;
if (textContent === 'Show') {
document.getElementById('nav-tool').style.display = 'block';
document.getElementById('show-test-tool-btn').textContent = 'Hide';
} else {
document.getElementById('nav-tool').style.display = 'none';
document.getElementById('show-test-tool-btn').textContent = 'Show';
}
})

</script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-2.9.5.min.js"></script>
<script src="js/tool.js"></script>
<script src="js/vconsole.min.js"></script>
<script src="js/index.js"></script>
<script>
</script>
</body>
</html>

~ 121 ~
Meeting.html
<!DOCTYPE html>
<head>
<title>Zoom WebSDK</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet"
href="https://source.zoom.us/2.9.5/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.5/css/react-
select.css" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1, user-scalable=no">
<meta http-equiv="origin-trial" content="">
</head>
<body>
<script src="https://source.zoom.us/2.9.5/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.9.5/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-2.9.5.min.js"></script>
<script src="js/tool.js"></script>
<script src="js/vconsole.min.js"></script>
<script src="js/meeting.js"></script>
<script>
</script>
</body>
</html>

5.6 ONLINE NOTES MODULE

Notes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Notes</title>
</head>
<style>
body {
background-color: rgb(199, 219, 143);
background-image: url('https://images.unsplash.com/photo-1516979187457-
637abb4f9353?ixlib=rb-

~ 122 ~
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%
3D&auto=format&fit=crop&w=1170&q=80');
background-size: cover;
}
h1 {
text-align: center;
color: black;
font-style: bold;
text-shadow: 2px 3px #558ABB;
font-size: 50px;
animation: 3s linear 1s running slidein;
}
h2{
text-decoration: underline;
text-transform: uppercase;
text-shadow: 2px 3px #558ABB;
}
li {
font-size: 20px;
}
ul li{
font-style: italic;
/* text-decoration: underline; */
}
ul li:hover{
color: rgb(72, 176, 34);
}
li a:hover{
color:rgb(72, 176, 34);
}
li a{
text-decoration: none;
color: black;
}
</style>
<body>
<h1>ONLINE NOTES!!</h1>
<ol type="I">
<h2>BCA 1st Semester</h2>
<ul type="square">
<li><a

~ 123 ~
href="https://www.gtuelibrary.edu.in/publication/Technical%20communication%205
th%20June'09.pdf">Technical Communication</a></li>
<li><a
href="https://www.vssut.ac.in/lecture_notes/lecture1424354156.pdf">Introduction to
Programming Language using C</a></li>
<li><a href="https://www.tmv.edu.in/pdf/Distance_education/BCA%20Books/BCA
%20I% 20SEM/BCA-121%20Computer%20Fundamental.pdf">Introduction to
Computers and IT</a></li>

</ul>
<h2>BCA 2nd Semester</h2>
<ul type="disc">
<li><a href="https://www.shahucollegelatur.org.in/Department/Studymaterial/sci/it/
BCA/F Y/digielec.pdf">Digital electronics</a></li>

<li><a href="https://www.cet.edu.in/noticefiles/280_DS%20Complete.pdf">Data
Structures Using C</a></li>
<li><a
href="https://mrcet.com/downloads/digital_notes/ECE/III%20Year/DATABASE%20
MANAGEMENT%20SYSTEMS.pdf">Database Management System</a></li>
</ul>
<h2>BCA 3rd Semester</h2>
<ul type="square">
<li><a href="http://mdudde.net/books/BCA/bca%20-%20III%20Sem/bca-201-3rd-
Computer%20System%20Architecture.pdf">Computer Architechture</a></li>
<li><a href="https://www.tutorialspoint.com/vb.net/vb.net_overview.htm">Front
End Design Tool VB.Net</a></li>
<li><a href="https://www.w3schools.com/cpp/cpp_oop.asp">Object Oriented
Programming using C++</a></li>
</ul>
<h2>BCA 4th Semester</h2>
<ul type="square">
<li><a
href="https://www.rgmcet.edu.in/assets/img/departments/CSE/materials/R15/3-
2/Web%20Technologies.pdf">Web Technologies</a></li>
<li><a href="https://www.iitk.ac.in/esc101/share/downloads/javanotes5.pdf">Java
Programming</a></li>
<li><a href="https://iare.ac.in/sites/default/files/lecture_notes/IARE_SE_Lecture
%20Notes. pdf">Software Engineering</a></li>

</ul>
<h2>BCA 5th Semester</h2>
<ul type="square">
<li><a

~ 124 ~
href="https://www.vssut.ac.in/lecture_notes/lecture1423726024.pdf">Operating
System</a></li>
<li><a href="https://www.javatpoint.com/computer-graphics-tutorial">Computer
Graphics</a></li>
<li><a href="https://www.drnishikantjha.com/booksCollection/E-
Commerce%20.pdf">E-commerce</a></li>
<li><a href="https://ucanapplym.s3.ap-south-
1.amazonaws.com/RGU/notifications/E_learning/study_online/What%20is%20PHP
%20BCA%206th%20Sem.pdf">Web Based Programming</a></li>
</ul>
<h2>BCA 6th Semester</h2>
<ul type="square">
<li><a href="https://itconcept.xyz/dmdw/">Data warehouse and data
mining</a></li>
<li><a href="https://ccsuniversity.ac.in/bridge- library/pdf/Mobile
%20Computing%20Notes%20-All.pdf">Mobile
Computing</a></li>
<li><a href="https://www.fimt-ggsipu.org/study/bca-306.pdf">Linux
Environment</a></li>
<li><a
href="https://www.vssut.ac.in/lecture_notes/lecture1428550736.pdf">Computer
Network & Information Security</a></li>
</ul>

</html>
</body>

5.7 COURSE LINKS MODULE

Course.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Links</title>
</head>
<style>
body {
background-color: rgb(138, 218, 227);
background-image: url('https://images.unsplash.com/photo-1510070112810-

~ 125 ~
d4e9a46d9e91?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%
3D&auto=format&fit=crop&w=1169&q=80');
background-size: cover;
}
h1 {
text-align: center;
color: black;
font-style: bold;
text-shadow: 2px 3px #558ABB;
font-size: 50px;
}
li {
font-size: 20px;
}
ul li.neetu{
font-style: italic;
/* text-decoration: underline; */
color: rgb(2, 24, 9);
/* font-weight: bold; */
/* font-family: 'Courier New', Courier, monospace; */
}
h2{
text-decoration: underline;
}
ul li a {
/* text-decoration: underline; */
color: rgb(14, 1, 1);
}
ul li:hover{
color: rgb(72, 176, 34);
}
li a:hover{
color:rgb(72, 176, 34);
}
li a{
text-decoration: none;
color: black;
}
</style>
<body>

~ 126 ~
<h1>COURSE LINKS!!</h1>
<ol type="I">
<h2>Languages</h2>
<ul type="square">
<li class="neetu"><a href="https://www.youtube.com/playlist?
list=PLu0W_9lII9ahR1blWXxgSlL4y9iQB nLpR">JavaScript Tutorials for Beginners |
CodeWithHarry</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLu0W_9lII9aiXlHcLx-
mDH1Qul38wD3aR">C Language Tutorials | Code with Harry</a></li>
<li><a href="https://www.youtube.com/playlist?
list=PLu0W_9lII9agS67Uits0UnJyrYiXhD S6q">Java Tutorials For Beginners |
CodeWithHarry</a></li>
<li><a href="https://www.youtube.com/playlist?
list=PLu0W_9lII9agwh1XjRt242xIpHhPT2 llg">Python for Beginners (Full Course) |
CodeWithHarry</a></li>
</ul>
<h2>Web Development </h2>
<ul type="disc">
<li><a href="https://www.youtube.com/playlist?
list=PLu0W_9lII9agiCUZYRsvtGTXdxkzP yItg">Web Development Tutorials For
Beginners: HTML, CSS, JavaScript & more...
| CodeWithHarry</a></li>
<li><a href="https://www.youtube.com/playlist?
list=PLfqMhTWNBTe3H6c9OGXb5_6wcc 1Mca52n">Web Development Course |
Apna college </a></li>
<li><a href="https://www.youtube.com/playlist?
list=PLu0W_9lII9agAiWp6Y41ueUKx1Vc TRxmf">Web Development Using Flask
and Python | CodeWithHarry</a></li>
<li><a href="https://www.youtube.com/playlist?
list=PLjVLYmrlmjGdBWjZzfJqUWj5KJ_J OnFXR">The Complete Front-End Web
Development Course! | WsCube Tech
</a></li>
</ul>
<h2>Machine Learning</h2>
<ul type="square">
<li><a href="https://www.youtube.com/playlist?list=PLu0W_9lII9ai6fAMHp-
acBmJONT7Y4BSG">Machine Learning Tutorials For Beginners Using Python |
CodeWithHarry</a></li>
<li><a href="https://www.youtube.com/playlist?
list=PL9ooVrP1hQOEPjeOixXeBo1qFaVQ RdivC">Machine Learning Algorithms in
Python (With Demo) | edureka!</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLjVLYmrlmjGe-
xLyoCdDrt8Nil1Alg_L3">Machine Learning Full Course with Projects (Beginner to
Advanced Level) | WsCube Tech</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLlgLmuG_KgbaXMKcISC-

~ 127 ~
fdz7HUn1oKr9i">Data Science & Machine Learning Full Courses in Python & R |
Great Learning</a></li>
</ul>
<h2>Data Structures & Algorithms</h2>
<ul type="square">
<li><a href="https://www.youtube.com/playlist?
list=PLu0W_9lII9ahIappRPN0MCAgtOu3l QjQi">Data Structures and Algorithms
Course | CodeWithHarry</a></li>
<li><a href="https://www.youtube.com/playlist?
list=PL9ooVrP1hQOEPjeOixXeBo1qFaVQ RdivC">Data Structures and Algorithms |
Jenny's Lectures CS IT</a></li>
<li><a href="https://www.youtube.com/watch?v=RBSGKlAvoiM">Data Structures
Easy to Advanced Course - Full Tutorial from a Google Engineer |
freeCodeCamp.org</a></li>
<li><a href="https://www.youtube.com/watch?v=hCrO_cR7kno">Data Structures
and Algorithms Full Course Tutorial | DSA Tutorial for Beginners | WsCube
Tech</a></li>
</ul>
</html>
</body>

5.8 Contact/Feedback Module

Feedback.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyQuest-Contact Us </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact-form">
<h1>Study Quest - FEEDBACK FORM</h1>
</div>
<div class="contact-us">
<form action="save.php" method="post">
<input type="text" name="name" class="form-control" placeholder="Enter Name"
required=""><br>
<input type="email" name="email" class="form-control" placeholder="Enter Email"
required=""><br>
<input type="text" name="msg" class="form-control" placeholder="Enter Message"
required=""><br>
<input type="submit" class="form-control submit" value="submit">

~ 128 ~
</form>
</div>
</body>
</html>

Save.php

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['msg'];

$servername = "localhost";
$username = "root";
$dbpassword = "";
$database = "contact";
# create a connection
$con = mysqli_connect($servername,$username,$dbpassword,$database);

# die if connection was

unsuccessful if(!$con) {
die("Sorry we failed to connect");
}
else{
// echo "Connection Established<br><br>";
}

# create a table in the DB

$sql = "INSERT INTO feedback values('$name','$email','$message')";
$result = mysqli_query($con,$sql);

if($result) {
echo '<div class="alert alert-success" role="alert">
THANK YOU FOR YOUR FEEDBACK!
</div>';
}
else {
echo "Row not inserted in table succesfully because of this error --->" .
mysqli_error($con);
}
}
?>

Style.css
*{
padding: 0px ;
margin: 0px;
font-family:sans-serif ;
}
~ 129 ~
body{
background-image:
url("images/image5.jpg"); background-size:
cover;
text-align: center;
}
.contact-form{
margin-top: 100px;
color: #ff5722;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form h1{
font-size: 32px;
}
form{
margin-top: 50px;
transition: all 4s ease-in-out ;
}

.form-control{
width: 400px;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid
gray; color: #fff;
font-size: 18px;
margin-bottom:
18px;
}

input{
height: 45px;
}

form .submit{ backgrou

nd: #ff5722; border:
transparent; color:
#fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
}

form .submit:hover{ bac

}
~ 130 ~
 kground: #f44336;
cursor: pointer;

}
~ 131 ~
 CHAPTER-6:
SYSTEM IMPLEMENTATION (Screenshots)

Exam Database Table Structure

ADMIN Structure:-

Admin Data:-

~ 132 ~
Answer Structure:-

Answer data:-

~ 133 ~
History structure:-

History data:-

Options Structure:-

~ 134 ~
Options data:-

~ 135 ~
Questions structure:-

Questions data:-

~ 136 ~
Quiz structure:-

Quiz data:-

Rank structure:-

Rank data:-

~ 137 ~
User structure:-

User data: -

~ 138 ~
Contact Database Table Structure

Feedback Structure

Feedback Data:-

~ 139 ~
SIGNUP PAGE

LOGIN PAGE

~ 140 ~
HOME PAGE

QUIZ REGISTER PAGE

~ 141 ~
QUIZ LOGIN PAGE

QUIZ HOME PAGE

~ 142 ~
QUIZ ADMIN LOGIN PAGE

QUIZ ADMIN HOME PAGE

~ 143 ~
ADMIN USER PAGE

ADMIN USER RANKING PAGE

~ 144 ~
ADD QUIZ PAGE

REMOVE QUIZ PAGE

~ 145 ~
FLASHCARDS HOME PAGE

ZOOM WEB-SDK PAGE

~ 146 ~
ONLINE NOTES PAGE

~ 147 ~
ONLINE COURSE LINKS

CONTACT/FEEDBACK PAGE

~ 148 ~
 CHAPTER-7:
SYSTEM TESTING

7.1 TEST CASE SCENARIO- CHECK REGISTER FUNCTIONALITY

Case 1: New registration (Enter Enrollment number, Student name, Semester, Email
Id &Password) POSITIVE

~ 149 ~
Case 2: Enrollment Number not filled NEGATIVE

Case 3: Name not filled NEGATIVE

~ 150 ~
Case 4: Semester not filled NEGATIVE

Case 5: Missing @ in Email Id NEGATIVE

~ 151 ~
Case 6: Missing @ in Email Id NEGATIVE

Case 7: Password is not filled NEGATIVE

~ 152 ~
7.2 TEST CASE SCENARIO- CHECK REGISTER FUNCTIONALITY

Login (USER)

Case 1: Enter a valid(registered) email and a valid password POSITIVE

~ 153 ~
Case 2: Enter a invalid(registered) email and a valid password NEGATIVE

~ 154 ~
Case 3:Enter a valid(registered) email and a invalid password NEGATIVE

~ 155 ~
7.3 TEST CASE SCENARIO- CHECK QUIZ FUNCTIONALITY

Case 1: After login in, the student is able to go to the quiz web page. POSITIVE

~ 156 ~
Case 2: If the student is able to attempt the quiz POSITIVE

~ 157 ~
Case 3: If admin is able to login to the quiz web page POSITIVE

~ 158 ~
Case 4: If the admin is able to see how many students have attempted the given
quizzes POSITIVE

~ 159 ~
7.4 TEST CASE SCENARIO- CHECK FLASHCARDS FUNCTIONALITY

Case 1:If the student is able to access the Flashcards webpage POSITIVE

~ 160 ~
Case 2: If the student is able to create a new flashcard POSITIVE

~ 161 ~
~ 162 ~
Case 3: If the student is able to delete flashcards POSITIVE

~ 163 ~
7.5 TEST CASE SCENARIO- CHECK ZOOM STUDY
LINK FUNCTIONALITY

Case 1:IF the admin is able to access the ZOOM WebSDK POSITIVE

~ 164 ~
Case 2: If the admin is able to generate a meeting link. POSITIVE

~ 165 ~
~ 166 ~
~ 167 ~
7.6 TEST CASE SCENARIO- CHECK ONLINE NOTES FUNCTIONALITY

Case 1: If the user is able to click on the Online notes module POSITIVE

~ 168 ~
Case 2: If the user is able to click on the various subject links POSITIVE

~ 169 ~
7.7 TEST CASE SCENARIO- CHECK ONLINE NOTES FUNCTIONALITY

Case 1: If the user is able to click on the Online Courses module POSITIVE

~ 170 ~
Case 2: If the user is able to click on the various course links POSITIVE

~ 171 ~
7.8 TEST CASE SCENARIO- CHECK CONTACT US MODULE
FUNCTIONALITY

Case 1: If the user is able to click on the Contact us/Feedback Module POSITIVE

~ 172 ~
Case 2: If user is able to send a message to the admin POSITIVE

~ 173 ~
Case 3: Name not filled NEGATIVE

Case 4: Email not filled NEGATIVE

~ 174 ~
Case 5: Missing @ in Email NEGATIVE

Case 5: Message not filled NEGATIVE

~ 175 ~
 CHAPTER-8:
FUTURE SCOPE

8.1 IMPROVEMENTS THAT CAN BE DONE:

 Better UI/UX: A consistent UI can be designed to create a more user-friendly
experience for students with better front-end design.
 Better Linking: The current system can be linked with the student’s email id,
so that they can access all modules with ease.
 Admin & Module Linking: A better connection between the admin the
different modules can be achieved so that they can access the modules even
more efficiently.
 Extra Features: A Pomodoro timer can be added to the zoom Link server to
efficiently help students study. A constant stream of brown or white noise or
any other study-friendly music can be added. The hours spent in the zoom
server can be counted of each student so that the admin can observe a
student’s performance.
 Chat and Messaging: Virtual classrooms provide chat or messaging features
that enable real-time communication between teachers and students.
Participants can ask questions, seek clarification, or engage in discussions
during the class.
 File Sharing: Teachers can share files, such as presentations, documents, or
multimedia resources, with students in a virtual classroom. This feature
facilitates the distribution of learning materials and assignments.
 Recording and Playback: Virtual classrooms often offer the ability to record
sessions, allowing students to review the content later or for absent students to
catch up on missed lessons.

The above-mentioned points are the enhancements which can be done to increase the
applicability and usage of this project. Enhancements can be done to maintain all the
student details, quiz scores, flashcards data etc. We have left all the options open so
that if there is any other future requirement in the system by the user for the
enhancement of the system then it is possible to implement them. In the last we would
like to thanks all the persons involved in the development of the system directly or

~ 176 ~
indirectly. We hope that the project will serve its purpose for which it is develop there
by underlining success of process.

8.2 OVERALL CONCLUSION:

The primary aim of this website is to help students focus and learn new methods of
studying. As now everything is going back to normal with the classes and exams
being conducted offline, a lot of students feel anxious getting back into the old
conventional methods of studying. This website is a combination of new ways of
learning mixed with the old ones, where students can still use technology to their
advantage without getting distracted and improve their performance as well. It won’t
be an easy task but a lot of improvements can be further done to make sure
technology is used to its best in education without abusing it.

~ 177 ~
 REFERENCES

Pramod the Coach: https://pramodthecoach.in/scope-and-future-of-

online- education-in-india/

Explainer Video Makers: https://www.explainervideomakers.com/blog/scope-

importance-e-learning-regarding-covid-19-pandemic/

W3schools: http://www.w3schools.com/html/defualt.asp

W3schools: http://www.w3schools.com/css/default.asp,

W3schools: http://www.w3schools.com/js/default.asp

PHP mother site @http://php.net/

Top Hat:https://tophat.com/glossary/v/virtual-classroom/

E-Learning Industry:https://elearningindustry.com/goals-and-expectations-of-
elearning-major

Camu Digital Campus:https://camudigitalcampus.com/virtual-classrooms/top-5-

benefits-of-virtual-classrooms-in-2022

Ed-Mediagvu-http://edmediagvu.weebly.com/conclusion.html

ERD-Geekforgeeks: https://www.geeksforgeeks.org/introduction-of-er-model/
DFD-Geekforgeeks: https://www.geeksforgeeks.org/what-is-dfddata-flow-
diagram/

Agile Model: https://www.tutorialspoint.com/sdlc/sdlc_agile_model.htm

~ 178 ~