Page 1 of 79 - Cover Page Submission ID trn:oid:::7772:494933977

Submission
My Files

My Files

University

Document Details

Submission ID

trn:oid:::7772:494933977 77 Pages

Submission Date 10,723 Words

Sep 9, 2025, 4:43 PM GMT+5:30

66,362 Characters

Download Date

Sep 9, 2025, 4:46 PM GMT+5:30

File Name

[Link]

File Size

7.8 MB

Page 1 of 79 - Cover Page Submission ID trn:oid:::7772:494933977

 Page 2 of 79 - AI Writing Overview Submission ID trn:oid:::7772:494933977

0% detected as AI Caution: Review required.

The percentage indicates the combined amount of likely AI-generated text as It is essential to understand the limitations of AI detection before making decisions
well as likely AI-generated text that was also likely AI-paraphrased. about a student’s work. We encourage you to learn more about Turnitin’s AI detection
capabilities before using the tool.

Detection Groups
0 AI-generated only 0%
Likely AI-generated text from a large-language model.

0 AI-generated text that was AI-paraphrased 0%

Likely AI-generated text that was likely revised using an AI-paraphrase tool
or word spinner.

Disclaimer
Our AI writing assessment is designed to help educators identify text that might be prepared by a generative AI tool. Our AI writing assessment may not always be accurate (it may misidentify
writing that is likely AI generated as AI generated and AI paraphrased or likely AI generated and AI paraphrased writing as only AI generated) so it should not be used as the sole basis for
adverse actions against a student. It takes further scrutiny and human judgment in conjunction with an organization's application of its specific academic policies to determine whether any
academic misconduct has occurred.

Frequently Asked Questions

How should I interpret Turnitin's AI writing percentage and false positives?

The percentage shown in the AI writing report is the amount of qualifying text within the submission that Turnitin’s AI writing
detection model determines was either likely AI-generated text from a large-language model or likely AI-generated text that was
likely revised using an AI paraphrase tool or word spinner.

False positives (incorrectly flagging human-written text as AI-generated) are a possibility in AI models.

AI detection scores under 20%, which we do not surface in new reports, have a higher likelihood of false positives. To reduce the
likelihood of misinterpretation, no score or highlights are attributed and are indicated with an asterisk in the report (*%).

The AI writing percentage should not be the sole basis to determine whether misconduct has occurred. The reviewer/instructor
should use the percentage as a means to start a formative conversation with their student and/or use it to examine the submitted
assignment in accordance with their school's policies.

What does 'qualifying text' mean?

Our model only processes qualifying text in the form of long-form writing. Long-form writing means individual sentences contained in paragraphs that make up a
longer piece of written work, such as an essay, a dissertation, or an article, etc. Qualifying text that has been determined to be likely AI-generated will be
highlighted in cyan in the submission, and likely AI-generated and then likely AI-paraphrased will be highlighted purple.

Non-qualifying text, such as bullet points, annotated bibliographies, etc., will not be processed and can create disparity between the submission highlights and the
percentage shown.

Page 2 of 79 - AI Writing Overview Submission ID trn:oid:::7772:494933977

Page 3 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Computing Project – SCC

Project Report: Game Quiz Platform for Young

Children

Student ID:

Student Name:

Page 3 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 4 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Table of Contents
Table of Figures .............................................................................................................. 5

Introduction ..................................................................................................................... 6

Background ................................................................................................................. 6

Chosen Topic .............................................................................................................. 7

Rationale and Relevance............................................................................................. 8

Aim and Objectives ...................................................................................................... 9

Aim ........................................................................................................................... 9

Project Objectives (SMART Goals) .......................................................................... 9

Requirements Gathering ................................................................................................. 9

Functional Requirements ........................................................................................... 10

Non-Functional Requirements ................................................................................... 11

Security Requirements .............................................................................................. 12

Documentation of Requirements ............................................................................... 13

Proposed Solution ......................................................................................................... 15

System Architecture................................................................................................... 15

Frontend: HTML, CSS, JavaScript............................................................................. 16

Backend: PHP ........................................................................................................... 16

Database: Arangodb .................................................................................................. 17

ER Diagram: ArangoDB Equivalent ........................................................................... 21

Accessibility Features ................................................................................................ 24

Alt-Text for Visual Elements: .................................................................................. 24

Tab-Navigable UI: .................................................................................................. 24

Colour Contrast: ..................................................................................................... 24

2

Page 4 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 5 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Usability Enhancements ............................................................................................ 24

Responsive Design: ............................................................................................... 24

Visual Feedback:.................................................................................................... 25

Intuitive Layout: ...................................................................................................... 25

Support for Screen Readers .................................................................................. 25

UI Mock-ups and Wireframes .................................................................................... 25

Home Page Mock-up ............................................................................................. 26

Quiz Page Mock-up................................................................................................ 27

Colour Palette and Typography.............................................................................. 29

Implementation .............................................................................................................. 29

Setup and Configuration ............................................................................................ 29

Backend Logic ........................................................................................................... 30

Frontend Design ........................................................................................................ 31

Challenges and Resolutions ...................................................................................... 33

Testing .......................................................................................................................... 37

Testing Types ............................................................................................................ 37

Test Plan Summary ................................................................................................... 38

Bug Fixes and Improvements .................................................................................... 39

Ethics ............................................................................................................................ 40

User Privacy .............................................................................................................. 40

Fairness and Inclusivity ............................................................................................. 41

Responsible Sharing and Use ................................................................................... 41

Conclusion .................................................................................................................... 41

Future Enhancements ............................................................................................... 42

Page 5 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 6 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Reflection ...................................................................................................................... 43

Key Learnings ............................................................................................................ 43

Areas for Improvement .............................................................................................. 44

References .................................................................................................................... 46

Appendices ................................................................................................................... 52

Page 6 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 7 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Table of Figures
Figure 1: Use case diagram .......................................................................................... 14

Figure 2: ER Diagram.................................................................................................... 23

Figure 3: Wireframe of Home page ............................................................................... 26

Figure 4: Wireframe of Quiz page ................................................................................. 29

Figure 5: Index page of Jungle Quiz web app ............................................................... 35

Figure 6: Home page with ticket counter ....................................................................... 35

Figure 7: Quiz page with user name ............................................................................. 36

Figure 8: Leaderboard page along with tables .............................................................. 36

Page 7 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 8 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Introduction

Background

The gamification process, in making the elements of game design in an environment that
is not a game, has ceased being a phenomenon and has become a revolution in the
outdoor of online learning and user interaction. Since gamification has proven to be
popular in the educational and marketing sectors, and health and enterprise software, the
digital platforms are still expanding their usage capabilities beyond education, since it
works in fostering user motivation and enhancing the learning process. In the case of
education, an interactive and immersive experience has provided the means of enhancing
the acquisition of knowledge through gamification.

Along with the introduction of web technologies and the intensive development of the e-
learning environment, an ideal moment has come to close the gap between entertainment
and education. Many gamification techniques, such as quizzes, have always been
effective in cementing learning, testing how knowledge is remembered and keeping the
user interested. When paired with a themed environment, such as a jungle ecosystem,
this mechanism can introduce something more imaginative to the experience that can
also make it more attractive to young audiences.

Here, the Jungle Quiz Game is devised as a web-based interactive quiz game that is
developed in a jungle interface. Animals quiz is a pretty good quiz because it allows the
players to answer questions concerning animals and thus, be useful to both teach and
entertain at the same time. In general, the project represents all the main principles of
gamification in its application since it gives players a score and provides instant feedback
in order to stimulate repeated play and reinforcement of new knowledge. The design
utilises the latest web development tools and techniques, and, at the same time, employs
hints at the trendy educational games (Mohanty et al., 2021).

The significance of this project can only be increased by the technical architecture in this
project. It is written in the popular PHP as the backend logic, which is also characterised
as flexible and possessing an extremely large support base. The latter operates on the
database side as the project is based on MySQL, which is a relational database
6

Page 8 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 9 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

management system that enjoys high levels of robustness, scalability, and structured
queries. This option proves the relevance of the SQL-based database technologies in
web development by ensuring an organised storage of data, relationship building in the
data and effective querying of records in comparison to alternative database systems
(Ouahbi et al.,2021).

Chosen Topic

The selected project topic in this project is the Jungle Quiz Game, an educational web
application, as a project of construction based on PHP and MYSQL. The foundation of
this game is to provide a learning experience that is exciting, centred upon animal
knowledge, but also to demonstrate how a relational database can be integrated into a
web application in the real world. This game consists of two parts: a player interface and
an administrator dashboard.

The primary front-facing module, where the users will engage with the quiz, is the player
interface. The player is shown a succession of questions with jungle-related pictures, and
multiple choices to go with each question. It enables the user to stay in such an interactive
and realistic world. This will provide learners with instant feedback following every answer
to aid them in learning and remembering (Halim et al., 2020).

But content creators or educators use the administrator panel to configure quiz questions,
categories, and manage player scores. The backend component and the login
authentication, and the simplified management of the game data are considered
important and are provided with security and modularity. It is a practical application of
content management systems that displays to us how PHP sessions, form processing
and CRUDs are applied to a relational SQL database (Multazam et al., 2023).

The Jungle Quiz Game also utilises MySQL fairly well to place something practical. In
contrast to the case with unstructured database models, MySQL uses structured schema,
tables and relationships, which is why it is highly suitable to manage the content of
quizzes and the categories related to it. Through SQL, queries can be efficiently executed
for inserting new questions, retrieving random sets, and updating player scores. With this,

Page 9 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 10 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

learners and developers gain exposure to structured database models in constructing

scalable, reliable, and efficient web applications.

Rationale and Relevance

This project is a learning exercise and a technological demonstration in line with the
current trends in the Computing area. Reasons for selecting this project are many and
various:

In the last decade, the web-based educational platforms have been exponentially
growing. As far as the expansion of remote and blended learning models is concerned,
learning tools are more in demand, and they need to be accessible, engaging, and useful.
This demand is filled by a quiz-based game that improves user engagement with
educational content (Pitoyo et al., 2020).

The second one that the project offers is an opportunity to examine a complete web
development, the front-end design, back-end logic, and database integration. The server-
side logic is implemented with PHP, and the database is based on MySQL, which
encompasses the key aspects of web development and can be elastically scaled in data
modelling and administration. This is highly applicable today in the software industry,
where each and every hand must be prepared to seal its deal at the lowest tier of the
stack.

Lastly, the project concerns usability and accessibility. In accordance with the key
principles of good UI/UX design, the Jungle Quiz Game is developed in a responsive
layout, accessible interface, and easy-to-use elements to help users of various
commodities, skills, and of different types of devices to interact with the application easily
(Safitri et al., 2022).

Moreover, MySQL is a very popular relational database management system and,

therefore, introduces students and developers to industry-standard technologies.
Meanwhile, SQL-based data solutions are essential in the domain of enterprise systems
and structured applications. The data modelling capabilities to create normalised tables
containing relationships imply that the developers can make use of structured schemes,
restrictions and joins that MySQL supports.
8

Page 10 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 11 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

The final section, the project showed the need for secure web development. Ensuring
secure login systems, input validation, and session control helps to perpetuate secure
coding practices and shows how vulnerabilities can be addressed in a PHP-based
application.

Aim and Objectives

Aim

To design and develop a gamified web-based quiz platform that enhances learning
engagement for young children through interactive digital experiences.

Project Objectives (SMART Goals)

Specific: Build a PHP-based web application to deliver quiz questions using a structured
type of game.

Measurable: Add performance tracking features to track user engagement and progress.

Achievable: Work on the core functionalities within the given project timeframe

Resourced: Development is performed in PHP, MySQL database and frontend

technologies (HTML, CSS, JavaScript).

Time-limited: Doing the design, development and testing phases in the allocated time
frame.

Requirements Gathering
This was a Jungle Quiz Game that was developed with the process of the requirements
gathering in a structured and thorough way for the platform to be reliable, engaging and
secure. The needs for which users required, the project goals were considered and also
best practices in web and educational application development. In this section, the
requirements are classified into functional, non-functional and security requirements
using a formal requirements document table.

Page 11 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 12 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Functional Requirements

The Jungle Quiz Game should have the following functional requirements, which define
the core operations and behaviours the Jungle Quiz Game must have. They are what the
system should do and how it functions with the users and data. To determine these
requirements, a brainstormed method was used to analyse how similar quiz-based
applications work, and understand what users of players and admin users expect from
this application (Balsam and Mishra, 2025).

 FR1: The player should be able to play quizzes using images and multiple choices.
The interactive quiz is the central feature of the application. There will be an animal
image presented with four answer options in each question. Players answer and
are immediately provided feedback.

 FR2: Whenever admin users want to manage Questions in quizzes and players
for the quiz, they should log in. It must have an admin login interface that any of
the authorised users can use to manage the quiz content and monitor the players'
data. If needed, admins will be able to see scores, update questions and remove
players.

 FR3: Each quiz question should have an image, 4 possible answers, and one
correct answer. In the backend, a structured question dataset should be used that
includes image path, four options (A-D), and their answer. Easy addition and
retrieval of questions are supported by the data model.

 FR4: Player scores should be stored in the application. After completing a quiz,
the players’ performance data should be logged into MySQL, containing their name
and score. This enables ranking, progress tracking and historical analysis.

 FR5: A pre-defined number of questions must be asked, and the quiz must stop
when the player decides to leave it or after the pre-specified number of questions.
The quiz should be user-friendly and should allow completion in the given set of
questions. Time-based or score-based quiz endings are made optional.

 FR6: Quiz questions must be dynamically rendered and responded to based on

selections by the player interface. It should allow the front to load new questions
10

Page 12 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 13 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

without page reload, have a seamless transition from question to question and
immediate feedback on results.

 FR7: There is a need to retain player data only for the duration of the game session
unless opted for storage. Sometimes it is not desirable for temporary players to
store data. Transient and persistent player profiles must be catered for by the
system.

Non-Functional Requirements

Quality attributes of the system are described as non-functional requirements. They are
needed to find out how well the system performs with constraints like usability, scalability,
maintainability, and availability (Yuenyongviwat and Bvonpanttarananon, 2021).

 NFR1: This application must be responsive and accessible on any device. It should
support different screen sizes and devices (mobile, tablet, desktop) with the
usability and readability not degraded.

 NFR2: User input should be answered within 2 seconds. With minimal latency
needed to keep the user engaged, all actions (question loading to answer
submission) must happen.

 NFR3: The system should be able to support at least 100 concurrent users without
degrading performance. The Jungle Quiz Game can be deployed in educational
environments and therefore support needs to be provided for more than one
simultaneous user.

 NFR4: The data also needs to be stored securely with the right validation and
sanitisation. The input data has to be checked to prevent either incorrect or
malicious entries. MySQL should be used for storing all of the data that is persisted,
and the schema for all of that data should be consistent. Data should be validated
before insertion or update operations through SQL, with strict typing and
constraints ensuring data integrity.

 NFR5: Code needs to be modular, well-coded well and well maintainable. Best
PHP and frontend design practices should be followed in the codebase and

11

Page 13 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 14 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

modular components with well-documented code to be followed to enable further

modifications.

 NFR6: The user interface needs to abide by the web accessibility standards. For
the application to be inclusive design, it has to follow WCAG guidelines. Screen
readers support, buttons are accessible through the keyboard, and texts must be
readable (Washington, 2023).

 NFR7: The user should be friendly to error handling. All errors in system or user
must be conveyed through clear, helpful message that will guide the user to own
responsibility for the problem and go to correct path to its solution without
frustration.

Security Requirements

The specifics of such a web-based applications, which stores data about users and is
given administrative access, require special attention to security. The Jungle Quiz Game
has been integrated with several such measures to protect data and a secure usage.

 SR1: Login credentials must be encrypted. If the database is compromised, the

admin login details should be hashed using hashing algorithms (such as bcrypt)
and at best stored securely so that no one can access it.

 SR2: On input forms, XSS and SQL injection prevention is also required. The
player’s name or admin credentials must be validated and sanitised, so all the user
input fields must pass through that as well (Khan et al., 2023). Prepared
statements in SQL should be used to mitigate injection risks.

 SR3: Admin features such as access should be protected from any a priori access
from a user who should not have access to those. Compulsory would be to
authenticate to be able to access admin functionalities like question management
and data deletion. In other case, restrict access if session-based tokens can be
used (as same as secure PHP sessions).

12

Page 14 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 15 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 SR4: Sensitive operations must be logged. All changes to questions, player

deletions, and admin logins are to be recorded on server logs for auditability and
monitoring.

 SR5: Use of the HTTPS protocol when deployed publicly. First, the application is
written to run ‘locally’, but a plan to secure all communication over HTTPS is
needed since the data in transit is important.

 SR6: Implementation of logout and session timeout features. There will be

provided the logout button in the admin panel, and the session should time out
automatically after a period of inactivity.

Documentation of Requirements

All the above requirements have been documented using a structured table format, which
contains a unique identifier, type of classification (functional, non-functional or security),
description, priority and testability. The traceability matrix helps in the validation of the
system functionality and can be used as a basis for testing.

Requirement Type Description Priority Testable

ID

FR1 Functional Players can start and complete High Yes

a quiz

FR2 Functional Admin can add/edit/delete High Yes

questions

FR3 Functional Store player scores High Yes

FR4 Functional Show images and options for High Yes

each question

FR5 Functional Players can exit the quiz at any Medium Yes
point

13

Page 15 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 16 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

FR6 Functional Quiz transitions smoothly High Yes

without reloads

FR7 Functional Support temporary and Medium Yes

persistent players

NFR1 Non- Load time must be < 2 seconds Medium Yes

Functional

NFR2 Non- Responsive design across High Yes

Functional devices

NFR3 Non- Handle 100+ concurrent users Medium Yes

Functional

NFR4 Non- Input validation and schema High Yes

Functional enforcement

NFR5 Non- Modular and maintainable code Medium Yes

Functional

NFR6 Non- WCAG-compliant accessible Medium Yes

Functional interface

NFR7 Non- Clear error messages High Yes

Functional

SR1 Security Encrypted admin credentials High Yes

SR2 Security Sanitization against XSS and High Yes

injection attacks

SR3 Security Restricted access to admin High Yes

features

14

Page 16 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 17 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

SR4 Security Logging of sensitive operations Medium Yes

SR5 Security HTTPS protocol for public Medium Yes

deployment

SR6 Security Session timeout and logout Medium Yes

support

Proposed Solution
To solve the functional, non-functional, and security requirements of Jungle Quiz Game,
an end-to-end web-based system consisting of a front-end interface, a backend server
logic, and a relational SQL database is proposed. The choice of this architecture was
made to ensure scalability, maintainability, and to have a seamless user experience
across all platforms. In this part of the paper, how the system works is described, what
the system’s components are, what the system’s design choices and how each part
improves the goal of the project (Hebebci and Alan, 2021).

System Architecture

Jungle Quiz Game is architected to make it easy to develop, scalable in the future, and
also interactive with the user. The system comprises three main components in totality:

 Frontend: Built with HTML, CSS, and JavaScript.

 Backend: Developed using PHP.

 Database: Powered by MySQL (a relational SQL database management system).

 Hosting: Deployed and run on a local XAMPP server environment.

This web-based learning game consists of each of these layers working as a collective
so that the end result is a responsive, dynamic, and secure system.

15

Page 17 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 18 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Frontend: HTML, CSS, JavaScript

The jungle quiz game involves interaction of the front end with the player. The tool is to
be intuitive, visually pleasing and browser and device compatible.

 HTML (HyperText Markup Language): It is used to organize the content and

layout of the application. The quiz is broken down each page, from the landing
page, to the quiz screen and to the admin login screen and it is all build in a
semantic way with the use of HTML semantic elements in order to maintainership
and be accessible.

 CSS (Cascading Style Sheets): Handles the visual styling of the application. By
using background images, typography, animations, and colors schemes, the
theme of a jungle has been implemented in an interface to make it more user
friendly and consistent with the theme. A responsive layout, that can change as
per screen sizes, was made with CSS Flexbox and Grid (Benjamin, 2025).

 JavaScript: It had dynamic behavior on the client side. It is used for client side
validation, interactive quiz elements (like answering questions and tracking
scores), and asynchronous requests to the PHP backend (using AJAX as
necesary). It improves the interactivity and decreases the page reloads (Sidorov,
2024).

Backend: PHP

PHP was selected as the backend programming language for a few reasons: PHP is
heavily used in web development, Apache (used by XAMPP) can run PHP, and it is
compatible with ArangoDB through a full-featured PHP driver.

The backend handles:

 Business Logic: This includes reading quiz data, scoring, verifying their answers,
authenticating admin users and managing session data.

 Admin Panel Functionalities: All options related to secure login

authentication,Crud operations (Create, Read, Update, Delete) for quiz questions

16

Page 18 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 19 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

and players, and Session based access control to avoid unauthorised use of the
API is available in php backend.

 Security Measures: In the server side all user inputs are validated and sanitised
to avoid the security threat like XSS (Cross Site Scripting) and Nosql injection
attacks. As it is, encrypted login uses PHP’s native session management and
password hashing functions (password_hash(), password_verify()).

PHP logic is broken into modules, some of which are contained in separate files, and
some in classes, for database connection, authentication, routing and logic processing.
This allows easier management of the codebase, testing, and extension of it (Chen et al.,
2022).

Database: MySQL

The application’s main data storage is MySQL. It is a relational SQL database

management system and supports structured schemas, relationships, and indexing,
therefore offering reliability and extensibility. The primary relational model used for this
project was in this case (Babucea, 2021).

Why MySQL?

 Structured Data Storage: The fields that each quiz question or player can store are
managed as rows within tables, and it is easy to organize categories or difficulty levels
through columns and relationships.
 Relational Scalability: Suitable for circumstances where scalability could be vertical
or distributed with replication in the future.
 SQL Query Capabilities: Offers a powerful query language (SQL), useful for
inserting, retrieving, and updating quiz and player data efficiently.
 Performance: Many web-based use cases are more efficiently handled with relational
schemas and indexed queries by MySQL, ensuring consistency and speed over
unstructured alternatives (Chen et al., 2022).

Database Tables:

17

Page 19 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 20 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Players: Stores player name, score, and may include category of the quiz
attempted.

 questions: Stores quiz questions containing image path, answer options, correct
answer, and optional metadata (category, difficulty).

 Admin: Stores hashed credentials, used for authenticated admin access.

Every table has an ID as the unique identifier for records. As efficient management,
updating, and removal of rows programmatically is important, this is crucial.

Example Record (questions):

INSERT INTO questions (id, image_path, option_a, option_b, option_c, option_d,

correct_answer, category)

VALUES (101, 'images/[Link]', 'Lion', 'Tiger', 'Cheetah', 'Jaguar', 'Lion', 'Wildlife');

It was used to integrate PHP scripts with the database, utilizing PDO (PHP Data Objects).
In an attempt to ensure reliable communication, secure connection parameters and
exception handling were added.

Hosting: Local XAMPP Server

The application is hosted and run in its entirety on a local development environment with
XAMPP (Cross-platform Apache, MariaDB, PHP, and Perl). The choice of an environment
was made due to its simplicity and accessibility to students and developers.

 Apache Web Server: Contains the PHP files and serves HTTP requests to the
browser.

 PHP Module: Runs backend scripts.

 MySQL: Runs as a background service managed within XAMPP.

Local Development Workflow:

1. Launch Apache and MySQL services.

2. Place project files under htdocs in the XAMPP directory.

3. Access the application via [Link]

18

Page 20 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 21 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

4. MySQL is accessed via phpMyAdmin at [Link] for managing

tables and performing administrative tasks.

However, the current setup is local, but the project can be run on cloud (e.g. DigitalOcean
or AWS) or containerised (using Docker) for production use in the future (Männistö, 2023).

Justification of Design Choices

The whole system meets all outlined requirements and consists of a relational SQL
database, a dynamic front end, and a lightweight PHP backend.

 Scalability: Larger datasets and more complex logic will not degrade performance
in MySQL and PHP.

 Usability: The interface was made accessible and clear for users of all ages and
skill levels.

 Security: Every component of the stack has input validation, session management
and data encryption.

 Maintainability: Components are also reusable, mainly for quizzes, admin logic
and database access (Ahmad Faudzi et al., 2023).

Future Considerations

As a strong foundation for further enhancements, the current design offers:

 Relational Question Recommendations: In the future, MySQL’s relational

features can be used to link questions by categories or levels of difficulty and
enable intelligent sequencing through SQL joins.

 User Accounts and Leaderboards: Players currently enter their names without
an account. The next step could be to add user accounts with profiles with
persistent progress.

 Mobile App Porting: The project had a responsive frontend and a modular
backend, which could be wrapped using frameworks like React Native or Flutter
as a mobile app (Rathod, 2023).

Design Diagrams

19

Page 21 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 22 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

The multiple design diagrams that were created gave a structured and efficient way to
develop the system and visualise the system’s functionality, data structure, and user
interaction. These diagrams represent building blocks and blueprints for the
implementation phase and help both the developers and the stakeholders understand
how the system will operate (Li et al., 2022). This section discusses three main diagrams:
Use Case Diagram, and two diagrams that support the UI (wireframes and mockups),
after minor adaptation to fit MySQL’s relational schema model: Entity-Relationship
Diagram.

Use Case Diagram

The Use Case Diagram shows how users will interact with the Jungle Quiz Game system
from a higher level. With that said, this is the player-focused version of the application
where the only actor is the Player, and no admin panel or backend content management
features are implemented. Everything is preloaded in the MySQL database, and the
interaction is through a simple, jungle-themed web interface. The site has no user
authentication, no registration, or no dynamic question editing.

Primary Actor

 Player: The Quiz is played by the end user (the end user who has visited the site),
and there is only one actor who is representing the end user in the given scenario.

Use Cases

 Open Web Application: The game is launched by the player in a browser, and
the home page is loaded if the XAMPP server and database are running.
 Click 'Play Game': The “Play Game” button is pressed by the player to begin the
quiz.
 Book Ticket / Enter Nickname: A nickname is saved to the database to track the
results of the player.
 Play Quiz: It presents a variety of questions, each with animal images and four
options. The player answers to the best of their knowledge.

20

Page 22 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 23 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Submit Answer: Feedback is provided immediately upon the player selecting one
option, and then redirecting to the next question.
 View Score / Leaderboard: The player then sees the score they obtained and
compares it with others on the leaderboard after the quiz.

These use cases not only guarantee a uncluttered, natural hands to feel experience
however additionally give certainty regarding how and when information is dealt with.
Also, the system doesn’t include admin interactions or advanced user features to keep
things simple, with the concentration on gameplay.

Figure 1: Use case diagram

ER Diagram: MySQL Equivalent

Relational databases are usually used with traditional ER (Entity Relationship) Diagrams.
It becomes possible to design an equivalent schema for MySQL, a relational SQL
database that can be set up by using tables and foreign keys to model the entities and
the relationship between them.
21

Page 23 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 24 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Key Tables:

1. Players: This table stores records representing individual players. Each player row
contains:

o player_id (INT, primary key, auto-increment)

o name (VARCHAR)

o score (INT)

o timestamp (DATETIME)

2. Questions: This table includes the quiz content. Each question row contains:

o question_id (INT, primary key, auto-increment)

o image_path (VARCHAR – relative path to the image)

o options (VARCHAR for each option)

o correct_answer (VARCHAR)

o category (VARCHAR, optional)

o difficulty (VARCHAR, optional)

3. Scores (optional collection for extensibility): Rather than embedding scores in the
player table, scores could be linked to players through a foreign key. This makes
it possible for richer queries and history tracking in the future.

22

Page 24 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 25 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Figure 2: ER Diagram

MySQL DB Design Approach:

 Foreign keys are used for storing relationships. For instance, a score entry refers
to a player via player_id, enforcing integrity.

 Normalized tables (with options stored as separate columns) make the model
structured and support efficient SQL queries.

As such, this relational ER model is structured and very well suited for efficient querying
using SQL. Additionally, the normalized schema makes the integration with the backend
simple using the PHP backend via PDO and associative arrays (Furlan et al., 2021).

Usability and Accessibility Considerations

The Jungle Quiz Game is a key priority in making sure it is usable and accessible to as
many users as possible regardless of their age, experience level or physical ability. The

23

Page 25 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 26 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

following is the result of adapting to best practices in UI/UX design as well as the
standards of accessibility (for example WCAG 2.1):

Accessibility Features

Alt-Text for Visual Elements:

The alt attributes or ARIA labels are present on every image, button, and icon used in the
application. For instance, the quiz question images (lions or elephants) have alt text that
speaks to the answer but provides something akin to 'animal image for quiz question' to
people with screen readers (Generosi et al., 2022).

Tab-Navigable UI:

It can be used only by a keyboard. It’s useful to people who have motor issues or simply
prefer to use a keyboard. Key tab stops include:

 Buttons (e.g., "Play Game", "Submit Answer")

 Form fields (e.g., admin login form)

 Answer options (e.g., radio buttons or stylized divs)

Also, CSS is used to style focus indicators so that users see which element is currently
active, making their work easier.

Colour Contrast:

Text on background colour contrast is high enough for reading, especially in jungle theme
sections where most colours are naturally green and brown. Even the contrast guidelines
set by WCAG were confirmed by using accessibility testing tools.

Usability Enhancements

Responsive Design:

Flexbox and media queries are used in the application to make all pages and components
resize beautifully to any screen like a smartphones, tablets, and desktop monitors. This
is also usable on mobile devices without a separate app (Shahid et al., 2022).

24

Page 26 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 27 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Visual Feedback:

Interactive elements provide visual feedback, such as:

 Hover effects for buttons and answer options.

 Modal popups for correct/incorrect answers.

 Toast notifications for success or error messages (e.g., when a question is added
by the admin).

Intuitive Layout:

Pages are structured to guide the user’s attention. For instance:

 The home page features a clear hero section with two prominent buttons.

 The quiz interface presents the image at the top, followed by four neatly spaced
answer buttons.

 The admin dashboard uses tabs or collapsible sections to separate functionalities

such as “Manage Questions” and “View Players” (Stoeva, 2021).

Support for Screen Readers

Wherever applicable, ARIA (Accessible Rich Internet Applications) roles and attributes
are used to inform screen readers about dynamic content. For example:

 Quiz feedback messages are updated using aria-live="polite" so screen readers

announce when an answer is correct or incorrect.

 Interactive elements use appropriate roles such as role="button" or role="form".

UI Mock-ups and Wireframes

Low-fidelity wireframes and UI mock-ups were created during the early stage of the
design phase to illustrate how the UI will look in the application. These sketches and
prototypes served to define usability issues and plan how the functionality would be
responsive layouts and feature priorities (Fahreza et al., 2023).

25

Page 27 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 28 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Home Page Mock-up

The home page functions as the primary entry point and sets the tone for the game’s
theme. The mockup features:

 Hero Section: A full-width background image of a jungle with an overlay message

"Welcome to Jungle Quiz."

 Buttons:

o "Play Game": takes the user to the quiz interface.

o "Admin Login": redirects to the admin authentication page.

 Branding Elements: A jungle-themed logo and catchy tagline to attract younger

players.

The layout is centred both vertically and horizontally using Flexbox, ensuring that it
remains visually appealing on all devices (Chochev and Hristov, 2022).

Figure 3: Wireframe of Home page

26

Page 28 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 29 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Quiz Page Mock-up

This is the core gameplay interface. The mock-up includes:

 Image Display: A central image representing an animal. It's styled to maintain a

consistent size and aspect ratio.

 Question Number Indicator: Displays progress, e.g., "Question 2 of 10".

 Answer Options: Four visually distinct buttons labelled with animal names.

o These buttons change colour upon hover.

o Upon selection, the chosen option is visually highlighted and temporarily

disabled to prevent repeated clicks.

 Next Button: Appears only after an answer has been selected, guiding the user
to the next question.

27

Page 29 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Page 30 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

28

Page 30 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 31 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Figure 4: Wireframe of Quiz page

Colour Palette and Typography

 Color Palette: With a jungle theme, the walls were dominated by natural tones
such as green, brown, and beige. CTAs (Call to Action) are highlighted with
(orange, and yellow) accent colors.

 Fonts: Headers are played with but readable fonts such as “Poppins” or “Balloo”
and a clean sans serif font like “Roboto” are used for body text.

Implementation
The Jungle Quiz Game was built with PHP for the backend, HTML, CSS, JavaScript and
MySQL as a relational SQL-based data storage. Setup of tools and technologies, as well
as logic to handle data, was implemented, alongside frontend design for responsive
results, followed by debugging challenges during integration. This section includes core
implementation components, the reasons for design decisions and specific solutions
applied to solve technical challenges encountered during the development (Medina et al.,
2024).

Setup and Configuration

Setting up a development environment and required dependencies was the first step in
implementing the Jungle Quiz Game:

 XAMPP Installation: To configure a local development environment, XAMPP

packages installed. The web server was Apache and the server side scripting was
PHP 8.x.

 MySQL Setup: The reason for choosing MySQL was its structured relational
schema and powerful SQL query language. A local database named
jungle_quiz_db was created.

 Database Tables: Two primary tables were created within jungle_quiz_db:

 Players: stores player information such as id, name, score, and timestamp.

29

Page 31 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 32 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Questions: Store quiz questions, options, correct answers, and image path.

 PHP-MySQL Integration: The PHP script uses PDO (PHP Data Objects) for
database interaction. In [Link], connection details such as host, user,
password, and database name are stored, and the connection is established
securely at runtime. Therefore, configuration management is centralized (Lucier,
2022).

// [Link] (simplified example)

$dsn = 'mysql:host=[Link];dbname=jungle_quiz_db;charset=utf8mb4';

$user = 'root';

$pass = '';

$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];

$pdo = new PDO($dsn, $user, $pass, $options);

Directory Structure:

 /assets/ - Stores quiz images and CSS files.

 /db/ - Contains PHP files like [Link] and db_functions.php.
 /games/ - Contains user-facing pages such as [Link], [Link],
and [Link].

Backend Logic

It was implemented in PHP, the backend that handles all operations regarding data
insertion, retrieval, and storage into MySQL. The core functionalities were adding player
records, loading questions, evaluating answers, and storing results (Shen et al., 2023)

 Player Record Creation: A new row is inserted into the players tables when a
player starts the game and their name is collected. It initializes the score to 0.

$stmt = $pdo->prepare("INSERT INTO players (name, score, timestamp) VALUES

(?, 0, NOW())");

$stmt->execute([$_POST['name']]);

30

Page 32 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 33 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Loading Questions: SQL is used to fetch all the questions from the questions
table. An image path accompanies four answer choices and one correct answer.
The records are randomly displayed to eliminate the monotony.

$stmt = $pdo->query("SELECT * FROM questions ORDER BY RAND()");

$questions = $stmt->fetchAll();

 Answer Evaluation: The correct answer stored in the table is compared with the
player’s selected option. Scores are updated accordingly. The player’s final score
is stored after the quiz has ended using the player’s unique ID.

if ($selectedAnswer == $correctAnswer) {

$score++;

$pdo->prepare("UPDATE players SET score = ? WHERE id = ?")->execute([$score,

$playerId]);

 Result Storage: Results are stored permanently for the leaderboard or for
analysis: name, score, timestamp. Being a relational table in MySQL, it is
straightforward to extend fields like difficulty level or quiz duration at a later point.

 Secure Input Handling: PHP filter functions and htmlspecialchars() are used to
validate and sanitise all form inputs to avoid script injection.

Frontend Design

The frontend was done using HTML 5, CSS 3 (flex box), Vanilla JavaScript. It has a jungle
theme with greens and animal illustrations for child and young users. It was primarily
aimed at having a simple and engaging experience (Christopoulos and Mystakidis, 2023).

 Homepage ([Link]): Features a large hero section with the "Welcome to

Jungle Quiz" message and two buttons:

 "Play Game" - leads to the quiz interface.

 (Note: Admin panel is not implemented and hence the Admin Login button
is inactive or removed.)
31

Page 33 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 34 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Quiz Interface ([Link]): Displays a single question at a time with:

 A full-width animal image

 Four answer choices in large, clickable boxes

 JavaScript logic to show visual feedback on selection (green for correct, red
for incorrect)

const options = [Link]('.option');

[Link](option => {

[Link]('click', function() {

if ([Link] === "true") {

[Link]('correct');

} else {

[Link]('wrong');

[Link]('#nextBtn').[Link] = 'block';

});

});

 Responsive Layout: The quiz adjusts seamlessly across devices:

 Mobile-friendly with touch-optimized buttons

 Grid layout ensures images and options don’t overflow

 Result Page ([Link]):

 Displays total score

 Option to retry the quiz

 Option to return to the home screen

 Theme and Aesthetics:

32

Page 34 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 35 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Consistent use of natural colours (green, brown)

 Rounded buttons, and soft shadows for a modern appearance

 Animations for transitions and interactions

Challenges and Resolutions

Throughout the design and development process, several technical and design
challenges were encountered. Targeted solutions were provided for these so that
implementation could go smoothly.

 Challenge 1: Accessing Auto-Increment Keys in MySQL (id)

 Issue: Unlike document keys in NoSQL, relying on names as identifiers

could cause conflicts when updating or deleting rows.

 Resolution: Used the auto-increment primary key id to retrieve or modify

specific player records. It made update or deletion of precise rows possible
without relying on mutable fields like names.

$pdo->prepare("DELETE FROM players WHERE id = ?")->execute([$playerId]);

 Challenge 2: Duplicate Player Names

 Issue: The problem with names not being unique meant that deleting or
updating players by name would affect the wrong user.

 Resolution: Used the id column for each player entry as the unique
reference and displayed the id alongside names when displaying entries to
update or delete scores.

 Challenge 3: Randomizing Questions Without Repeats

 Issue: In the case that the same question is shown more than once, the
quiz was ineffective.

 Resolution: Used ORDER BY RAND() in SQL and applied PHP shuffle to

ensure randomness. The desired number of questions is sliced from the
randomized result.

33

Page 35 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 36 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

$stmt = $pdo->query("SELECT * FROM questions ORDER BY RAND() LIMIT 5");

Challenge 4: Dynamic Image Paths

 Issue: To further prevent the use of fixed paths, image paths have to be
relative and valid for local and server environments.

 Resolution: Stored relative paths such as assets/images/[Link] and

verified existence with file_exists() before rendering.

 Challenge 5: Validating and Sanitizing User Input

 Issue: XSS or malformed SQL queries could be caused by unsafe inputs.

 Resolution: Applied input validation filters on all user-generated content

and encoded it in HTML.

$name = htmlspecialchars(trim($_POST['name']));

 Challenge 6: Maintaining Session State

 Issue: The user had to be remembered across different quiz pages in PHP.

 Resolution: The player’s ID and score, during gameplay, were stored using
PHP sessions.

session_start();

$_SESSION['player_key'] = $playerKey;

 Challenge 7: Score Synchronization on Refresh

 Issue: Duplicate entries or score resets could be caused by page refresh.

 Resolution: The score update was only done at the final submission and
the existing records were updated instead of inserted anew.

 Challenge 8: Styling Consistency Across Browsers

 Issue: There were minor UI inconsistencies between Chrome and Firefox.

 Resolution: Applied CSS resets and used vendor-prefixed properties

where needed.

34

Page 36 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Page 37 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Figure 5: Index page of Jungle quiz web app

Figure 6: Home page with ticket counter

35

Page 37 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Page 38 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Figure 7: Quiz page with user name

Figure 8: Leaderboard page along with tables

36

Page 38 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 39 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Testing

Testing Types

Ensuring the operations of the Jungle Quiz Game go as intended and that users have a
pleasant experience is critical and can be achieved only through testing. Several kinds of
testing methodologies were used to validate the functionality, performance and security.

 Unit Testing

Backend logic used PHP functions as individual units and was unit-tested. The testing
included inserting, retrieving, and deleting players and quiz questions. Mock inputs
were provided to the functions and returning values were validated to test the functions
in isolation. The particular focus was on testing the robustness of the MySQL
connection setup and that table manipulation with auto-incremented IDs worked
correctly (Olatunji et al., 2023).

 Functional Testing

The core use cases used in the application, i.e. playing the quiz, viewing or deleting
the results, were all functionally tested. Individual functional requirements were
checked against what was expected based on the defined functional requirements.
This way each of the responses is triggered whenever user input occurs such as
showing the quiz questions with picture options, evaluating the user's selection and
providing feedback on the score (Stanojevic et al., 2021).

 Security Testing

The security testing was done with input validation and access restriction checks.
Some of the web security vulnerabilities that the forms were tested against included:

o XSS (Cross-Site Scripting): by injecting script tags into form fields.

o SQL Injection: by attempting to inject malicious SQL statements via input

fields.

o Session Protection: Ensuring unauthorised access to restricted actions was

not possible (Aydos et al., 2022).

37

Page 39 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 40 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

This phase has been verified to use appropriate sanitisation techniques such as
htmlspecialchars() on input fields. It was shown that the application was protected against
malicious and unauthorized input treatment.

Test Plan Summary

The summary of five major test cases used in Jungle Quiz Game during the testing phase
are given below in the table. The table describes the test case, its purpose, and expected
and actual results and whether or not it matched expectations.

Test Case Test Expected Actual Output Result

Description Output

Access Browse the The homepage Pass

Homepage application and loads with a
navigate to the hero section
home page. and buttons.

Play quiz Try to hit the The "Play Pass

without a "Play Game" game" button
Ticket button without should be
booking a disabled.
ticket.

Book Ticket Enter “Test “Your ticket is Pass

User” in the booked; you
field and book can Play now”
a ticket. A Message
should pop up
at the top of the
page.

Select Navigate to the Different quiz Pass

Category quiz page and categories will
change the

38

Page 40 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 41 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

quiz category show on the

through the dropdown.
drop-down
menu.

Check Complete the “Test user” Pass

Leaderboard quiz and check score should
the name of be visible on
the "Test user” the
in the updated leaderboard.
leaderboard.

As expected, these tests proved that the game’s core functionalities perform reliably with
the requisite conditions and that the application meets the stated requirements.

Bug Fixes and Improvements

Several issues were identified and fixed to fix the application stability and usability during
the testing (Gupta et al., 2021).

1. Deletion Bug Due to Duplicate Names

 Issue: Multiple players with the same name caused unexpected behaviour when
trying to delete a player using their name.

 Resolution: To delete, the logic was changed to use the MySQL primary key id rather
than the name field. This ensured that even if names were duplicated, the correct
player record was deleted.

2. Malformed Inputs in Form Fields

 Issue: The input fields allowed entering HTML tags and scripts which potentially
attacked the application with XSS attacks.

 Resolution: htmlspecialchars() has been used around all form inputs to escape
special characters. This blocked all embedded scripts and HTML from being executed
in the browser.

39

Page 41 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 42 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

3. Slow Initial Load on Image Rendering

 Issue: Some quizzes had noticeable delays on some devices due to image-heavy
quiz pages.

 Resolution: Images were optimized for web, that is smaller in size and load faster.
Future improvements were also considered concerning lazy loading.

4. Score Not Updating Consistently

 Issue: In some cases, after completing the quiz, the player's score was not updating.

 Resolution: A logical error in the SQL update function was identified and fixed. After
completion, scores were tested as updating consistently.

Ethics
The Jungle Quiz Game is educational, and therefore ethical considerations are of the
essence in the design and development of any software application, just as it is for the
Jungle Quiz Game. The project goes to great lengths to address the big ethical principles
that are involved in user privacy, fairness, as well as responsible sharing of resources so
that it should conform to the acceptable standards of ethical computing (Shethiya, 2025).

User Privacy

The Quiz Game only collects personal data to a minimum extent and in its capacity.
During gameplay, no other user information is collected other than a nickname that is
used solely for displaying and scoring. The application makes no request to store or
process sensitive or personally identifiable information (PII) such as email addresses,
phone numbers, or real names. Also, user records are stored in MySQL with basic
validation and access control such that user records are not accessible to unauthorized
users. This gives a guarantee that the application remains congruent with the ethical rules
and follows the digital rights of the application's users.

40

Page 42 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 43 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Fairness and Inclusivity

The game makes sure to provide an equal and neutral experience for all users. All quiz
questions are randomly loaded from the database and hence, no player gets preferential
treatment or an advantage over others. There is consistency and transparency in the
scoring system because points are granted only when the answer is correct. Question
difficulty and result evaluation are not influenced by any algorithmic bias or manipulation
for equality in gameplay and learning outcomes. Also, responsive design and keyboard
navigation support make inclusivity possible among different variety of user
demographics and device types.

Responsible Sharing and Use

The source code of the Quiz Game was distributed to peer groups close to me, for
learning collaboration. The project is not for commercial use nor profit. All code sharing
has been responsible, with appropriate context and acknowledgment so that all ethical
standards in academic and open source environments are met (Wahyuningsih et al.,
2021).

Conclusion
Virtually, the core objective of the Jungle Quiz Game project has been accomplished: it
has successfully created a gamified web-based educational platform where the users are
engaged in a fun interaction with the quiz based on questions regarding animals. With the
use of secure and modular PHP code, straightforward integration with MySQL, and a
simple, pleasing, and user-friendly interface, the application shows how modern web
technology and gamification principles can be used together to create a good educational
example of the course.

From the very beginning, it was intended to produce a technically sound solution that
would be an educationally beneficial one. While delivering a very enjoyable and intuitive
experience for the player, it also maintains data integrity and good performance behind
the scenes. Structured relational storage was achieved by the strategic choice of using
MySQL—a robust SQL database. This made the storage of questions, images, and player
41

Page 43 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 44 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

scores efficient in a format that allows the application to scale and easily access data.
The PHP scripts performed server-side logic, managed database connections, and
handled functions such as fetching random questions, saving scores, and deleting players
according to unique primary keys.

One of the strengths is the front-end design of the project, the design is clean and
responsive to various devices. The jungle graphics, the clear labeling of buttons and the
ease of accessing the keyboard makes the game interesting and accommodating.
Secondly, the application complies with significant non-functional demands that include
performance responsiveness, brief loading time, and general accessibility.

The other consideration of the project was to provide security as a first priority since form
validation and sanitization were employed as a method of preventing typical web attacks
like a cross-site scripting (XSS) and SQL injection. Session based authentication was
used to handle the administration and data access was limited to appropriate levels. This
one did not have a complete administration dashboard but the base is established to
further expand it in the future.

Future Enhancements

The present version of Jungle Quiz Game meets its simple requirements, yet there are
certain aspects, which can be improved in the future to enhance its functionality and user
interaction, as well as educational quality:

 User Registration and Progress Tracking: A system of registration would be

included since players will be able to create accounts and their quiz history, their
scores and improvement over time would be monitored. It would also enable the
use of leaderboards, performance analytics, etc.

 Normalisation-Based Difficulty Mapping: The relational and structured querying

facility of MySQL also enabled connecting questions based on difficulty level, topic
and the concept that a question presupposed. This would allow dynamic quiz flows
in which the next question to be asked in the quiz would adjust to the prior answers
of the player making the learning experience more adaptable and personal. Using

42

Page 44 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 45 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

SQL queries, questions and category relationships may be effectively handled in

join-tables, foreign keys, and indexed very quickly.

 Expanded Question Bank and Categories: The content would be more divers,
since it would include more categories (aquatic animals, insects or birds) and offer
more refreshing and educational gameplay.

Jungle Quiz Game in general is a strong base of an educational web application, and it
is simple and functional enough. It is an argument that should prove that application of
web technologies and gamification in learning is not a myth but provides several
directions in the development of the study of interactive digital learning.

Reflection
Jungle Quiz Game project was a highly productive and educative experience regarding
the development of technical skills as well as personal development. Unlike the others
that I built, this was a total full stack development from scratch and had a very good
exposure to the cycle of designing, developing, testing, and deploying a complete web
application. That meant writing code and all, but also architecting, understanding user
requirements, knew how to make difficult decisions on tools and technologies.

Key Learnings

Working with MySQL was one of the most important learning outcomes, as it is a
structured relational database with wide applicability. Before this project, my database
experience primarily involved simple relational models. Integrating MySQL into the PHP-
based application required learning to define relational schemas, write SQL queries,
manage tables with primary and foreign keys, and execute CRUD operations efficiently.
This included understanding the structured nature of relational databases, normalisation,
and how relationships can be maintained across tables, which was a shift from document-
oriented thinking.

The other important thing I learned is the design and development of secure and modular
PHP applications. Because early on sessions need to manage for admin login, and
sanitise inputs using functions like htmlspecialchars(), secure coding practices became
43

Page 45 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 46 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

apparent. It also made it easier for the backend to be structured in a modular fashion,
improving the maintainability and reusability of said structures. Isolating database
connections as well as business logic, by breaking down functionalities into different files
and classes, made debugging of each functionality a lot easier.

Additionally, the test and debug phase emphasized the necessity of meticulous attention
to detail. Testing randomisation logic for quiz questions and verifying that database
operations through SQL queries executed correctly, such as insertion, deletion, and
update of records, enriched my problem-solving and critical thinking skills. Documenting
test cases, comparing expected versus actual outcomes, and methodically recording
results helped ensure structured quality assurance throughout the project.

Areas for Improvement

Overall, the project accomplished most of its goals, but there was room for improvement
in some areas. To start with, using a more robust admin panel template or framework (or
even an already existing admin panel) would have saved some development time and
would have prevented a bad user experience when it came to the management of content.
Admin login and player data handling were achieved, but alongside that, a more dynamic
UI with decent layout components would have made for better scalability in the future.

Secondly, more thought could have gone into the database schema planning so that
future enhancements may be made with less of a pain. To begin with, at the schema
level, questions can be categorised by difficulty, or even topic. That way I can have more
personalised and flexible quizzes. At first, the database was designed for simplicity, but
later benefited from its lifetime evolution.

Finally, I realised how important a visual API testing tool can be, for instance, Postman
or Insomnia. Most of the testing was done through the browser or with PHP’s var_dump()
and print_r() function, but using visual tools would’ve been great to use for checking HTTP
requests to and from the database while inserting and deleting.

This project overall has been a very spiritual experience. In addition to enhancing my web
development, and database management skills, I gained a new appreciation for project
planning, security, and testing. During this journey, I have learned the lessons and I am
44

Page 46 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 47 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

confident to pick up bigger and bigger development tasks in the future with a different
perspective of full stack application design and deployment.

45

Page 47 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 48 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

References
Ahmad Faudzi, M. et al. (2023) ‘Investigating the User Interface Design Frameworks of

Current Mobile Learning Applications: A Systematic Review’, Education Sciences,

13(1), pp. 94–94. Available at: [Link]

Aydos, M. et al. (2022) ‘Security testing of web applications: A systematic mapping of

the literature’, Journal of King Saud University - Computer and Information Sciences,

34(9), pp. 6775–6792. Available at: [Link]

Babucea, A.-G. (2021) SQL OR NoSQL DATABASES? CRITICAL DIFFERENCES.

Available at: [Link]

Balsam, S. and Mishra, D. (2025) ‘Web application testing—Challenges and

opportunities’, Journal of Systems and Software, 219, p. 112186. Available at:

[Link]

Benjamin, M., 2025. Adaptive CSS Techniques Enhanced by AI Algorithms. Available

at: [Link]

5/publication/389901017_Adaptive_CSS_Techniques_Enhanced_by_AI_Algorithms/link

s/67d7dd127d56ad0a0f04f32c/Adaptive-CSS-Techniques-Enhanced-by-AI-

[Link]

Chen, C., Lu, J. and Mathioudakis, M. (2022) Multi-Perspective Evaluation of Relational

and Graph Databases. Available at:

[Link]

e416ffc39182/content (Accessed: 22 April 2025).

46

Page 48 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 49 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Chochev, N. and Hristov, H., 2022. Design Techniques and Practices of Grid Layouts

and Content of Web Pages. Scientific Works of the Union of Scientists in Bulgaria-

Plovdiv. Series C. Technics and Technologies, 20, pp.99-103. Available at:

[Link]

Christopoulos, A. and Mystakidis, S. (2023) ‘Gamification in Education’, Encyclopedia,

3(4), pp. 1223–1243. Available at: [Link]

Fahreza, F. et al. (2023) ‘Quiz-based Learning Media’, Jurnal Pendidikan LLDIKTI

Wilayah 1 (JUDIK), 3(01), pp. 17–22. Available at:

[Link] (Accessed: 21

April 2025).

Furlan, V. et al. (2021) ‘SQL and NoSQL Databases in the Context of Industry

4.0’, Machines, 10(1), pp. 20–20. Available at:

[Link]

Generosi, A. et al. (2022) ‘A Test Management System to Support Remote Usability

Assessment of Web Applications’, Information, 13(10), p. 505. Available at:

[Link]

Gupta, C., Inácio, P.R.M. and Freire, M.M. (2021) ‘Improving software maintenance with

improved bug triaging’, Journal of King Saud University - Computer and Information

Sciences, 34(10), pp. 8757–8764. Available at:

[Link]

Halim, A., Hashim, H. and Yunus, M.M. (2020) ‘Pupils’ Motivation and Perceptions on

ESL Lessons through Online Quiz-Games’, Journal of Education and e-Learning

47

Page 49 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 50 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Research, 7(3), pp. 229–234. Available at:

[Link]

Hebebci, M.T. and Alan, S., 2021. Gamification in education: An overview of the

literature. Current studies in social sciences, 2021, pp.174-194. Available at:

[Link]

_S9_03-[Link]#page=178

Khan, W. et al. (2023) ‘SQL and NoSQL Database Software Architecture Performance

Analysis and Assessments—A Systematic Literature Review’, Big Data and Cognitive

Computing, 7(2), pp. 97–97. Available at: [Link]

Li, W. et al. (2022) ‘Design Factors to Improve the Consistency and Sustainable User

Experience of Responsive Interface Design’, Sustainability, 14(15), p. 9131. Available

at: [Link]

Lucier, C. (2022) Educational Online Quiz-Based Games 101, [Link]. Power

Learning Solutions. Available at:

[Link]

101/ (Accessed: 21 April 2025).

Männistö, E., (2023). Building a simple PHP framework. Available at:

[Link]

Medina, J.A. et al. (2024) ‘Acquisition and Development of Basic Competences in

Collaborative Environments Through Quiz-Based Game Applications’, Electronics,

13(22), p. 4500. Available at: [Link]

48

Page 50 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 51 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Mohanty, A., et al. (2021) Design and development of digital game-based learning

software for incorporation into school syllabus and curriculum transaction. Design

Engineering, 8, pp.4864-4900. Available at: [Link]

Mohanty/publication/355490495_Design_and_Development_of_Digital_Game-

_Based_Learning_Software_for_Incorporation_into_School_Syllabus_and_Curriculum_

Transaction/links/61757ecca767a03c14a90444/Design-and-Development-of-Digital-

Game-Based-Learning-Software-for-Incorporation-into-School-Syllabus-and-

[Link] (Accessed: 20 April 2025).

MULTAZAM, M., SYAHRIAL, Z. and RUSMONO, R. (2023) ‘DEVELOPMENT OF

LEARNING MODELS IN WEB PROGRAMMING COURSES WITH COMPUTER-

BASED LEARNING TUTORIALS’, Turkish Online Journal of Distance Education, 24(2),

pp. 232–244. Available at: [Link]

Olatunji, M.A. et al. (2023) ‘Software Security Vulnerability Prediction Modeling for PHP

Systems’. Available at: [Link]

Ouahbi, I., Darhmaoui, H. and Kaddari, F. (2021) Gamification Approach in Teaching

Web Programming Courses in PHP: Use of KAHOOT Application. International Journal

of Modern Education & Computer Science, 13(2). Available at:

[Link]

Ouahbi/publication/350772422_Gamification_Approach_in_Teaching_Web_Programmi

ng_Courses_in_PHP_Use_of_KAHOOT_Application/links/6070dae692851c8a7bb708c

2/Gamification-Approach-in-Teaching-Web-Programming-Courses-in-PHP-Use-of-

[Link]

49

Page 51 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 52 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Pitoyo, M.D., Sumardi, S. and Asib, A. (2020) ‘Gamification-Based Assessment: The

Washback Effect of Quizizz on Students’ Learning in Higher Education’, International

Journal of Language Education, 4(2), p. 1. Available at:

[Link]

Rathod, D. (2023) QUIZ WEB APPLICATION, CSUSB ScholarWorks. Available at:

[Link] (Accessed: 22 April 2025).

Safitri, D. et al. (2022) ‘Improvement of Student Learning Motivation through Word-Wall-

based Digital Game Media’, International Journal of Interactive Mobile Technologies

(iJIM), 16(06), pp. 188–205. Available at: [Link]

Shahid, J. et al. (2022) ‘A Comparative Study of Web Application Security Parameters:

Current Trends and Future Directions’, Applied Sciences, 12(8), pp. 4077–4077.

Available at: [Link]

Shen, S. et al. (2023) Quiz-based Knowledge Tracing, [Link]. Available at:

[Link] (Accessed: 21 April 2025).

Shethiya, A.S. (2025) ‘Scalability and Performance Optimization in Web Application

Development’, Integrated Journal of Science and Technology, 2(1). Available at:

[Link] (Accessed: 22 April 2025).

Sidorov, D. (2024) ‘Best Practices for Developing Secure Front-End Web

Applications’, COMPUTER-INTEGRATED TECHNOLOGIES EDUCATION SCIENCE

PRODUCTION, (56), pp. 51–58. Available at: [Link]

2024-56-06.

50

Page 52 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 53 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Stanojevic, S. et al. (2021) ‘ERS/ATS technical standard on interpretive strategies for

routine lung function tests’, European Respiratory Journal, 60(1), pp. 2101499–

2101499. Available at: [Link]

Stoeva, M., 2021. Evolution of Website Layout Techniques. In Computer Technologies

and Applications-Anniversary International Scientific Conference, Pamporovo,

Bulgaria (pp. 15-17). Available at: [Link]

2/publication/354675809_Evolution_of_Website_Layout_Techniques/links/61459d1c3c6

cb3106977314d/[Link]

Wahyuningsih, F. et al. (2021) ‘Utilization of QuizWhizzer Educational Game

Applications as Learning Evaluation Media’, [Link], pp. 148–152. Available

at: [Link]

Washington, K. (2023) Modern Practices for Responsive Web Design and Web

Accessibility, DigitalCommons@University of Nebraska - Lincoln. Available at:

[Link] (Accessed: 22 April 2025).

Yuenyongviwat, V. and Bvonpanttarananon, J., (2021) ‘Using a Web-Based Quiz Game

as a Tool to Summarize Essential Content in Medical School Classes: Retrospective

Comparative Study’, JMIR Medical Education, 7(2), pp. e22992–e22992. Available at:

[Link]

51

Page 53 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 54 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Appendices
Index Page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Little Zoo Guessing Game</title>

<link rel="stylesheet" href="assets/css/[Link]">

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: url('assets/images/[Link]') no-repeat center center/cover;

position: relative;
52

Page 54 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 55 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

text-align: center;

.overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

.container {

position: relative;

z-index: 2;

color: white;

.title {

font-size: 32px;

margin-bottom: 30px;

font-weight: bold;

53

Page 55 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 56 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

.buttons {

display: flex;

justify-content: center;

gap: 20px;

.btn {

width: 200px;

padding: 12px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 18px;

color: white;

.btn-primary {

background-color: #28a745;

.btn-primary:hover {

background-color: #218838;

54

Page 56 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 57 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

.btn-secondary {

background-color: #007bff;

.btn-secondary:hover {

background-color: #0056b3;

</style>

</head>

<body>

<div class="overlay"></div>

<div class="container">

<p class="title">Welcome to Little Zoo Guessing Game</p>

<div class="buttons">

<!--<button class="btn btn-primary"

onclick="[Link]='admin/[Link]'">Admin Login</button>-->

<button class="btn btn-secondary"

onclick="[Link]='game/[Link]'">Play Game</button>

</div>

</div>

</body>

</html>
55

Page 57 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 58 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

Home Page:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Jungle Quiz</title>

<link rel="stylesheet" href="../assets/css/[Link]">

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: url('../assets/images/[Link]') no-repeat center center/cover;

position: relative;

56

Page 58 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 59 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

text-align: center;

.overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

.container {

position: relative;

z-index: 2;

color: white;

.box {

background: rgba(255, 255, 255, 0.9);

padding: 20px;

border-radius: 10px;

width: 350px;

text-align: center;

57

Page 59 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 60 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

margin: auto;

box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

.box h2 {

margin-bottom: 15px;

color: #333;

.input-field {

width: 80%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 5px;

text-align: center;

.btn {

width: 100%;

padding: 10px;

margin-top: 10px;

border: none;

border-radius: 5px;

58

Page 60 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 61 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

cursor: pointer;

font-size: 16px;

.btn-primary {

background-color: #28a745;

color: white;

.btn-primary:hover {

background-color: #218838;

.btn-secondary {

background-color: #007bff;

color: white;

.btn-secondary:hover {

background-color: #0056b3;

.btn-disabled {

background-color: #ccc;

59

Page 61 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 62 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

cursor: not-allowed;

.buttons {

display: flex;

justify-content: center;

margin-top: 20px;

gap: 20px;

.back-btn {

margin-top: 30px;

background-color: #dc3545;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

.back-btn:hover {

background-color: #c82333;

60

Page 62 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 63 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

</style>

</head>

<body>

<div class="overlay"></div>

<div class="container">

<h1>Enter your name to get a ticket and play the game</h1>

<div class="box">

<h2> Ticket Counter </h2>

<input type="text" id="player_name" class="input-field" placeholder="Enter your

name" required>

<button id="bookTicketBtn" class="btn btn-primary">Book Ticket</button>

</div>

<div class="buttons">

<button id="playGameBtn" class="btn btn-secondary btn-disabled" disabled>Play

Game</button>

<button onclick="[Link]='[Link]'" class="btn btn-

secondary">Leaderboard</button>

</div>

<!-- Back Button -->

61

Page 63 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 64 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

<button class="back-btn" onclick="[Link]='../[Link]'">Go

Back</button>

</div>

<script>

let playerNameInput = [Link]("player_name");

let bookTicketBtn = [Link]("bookTicketBtn");

let playGameBtn = [Link]("playGameBtn");

[Link]("click", function() {

let playerName = [Link]();

if (playerName !== "") {

alert("Your ticket is booked! You can now play the game.");

[Link]("btn-disabled");

[Link] = false;

[Link]("onclick",

`[Link]='[Link]?player_name=${encodeURIComponent(play
erName)}'`);

} else {

alert("Please enter your name before booking a ticket.");

});

</script>

62

Page 64 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 65 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

</body>

</html>

Quiz Page:

<?php

require_once "../db/[Link]";

use ArangoDBClient\Statement;

// Retrieve player name from URL

$player_name = isset($_GET["player_name"]) ? trim($_GET["player_name"]) : null;

if (!$player_name) {

die("Player name is missing. Please go back and enter your name.");

// Get selected category (default to 'animal')

$category = isset($_GET["category"]) ? trim($_GET["category"]) : "animal";

// Fetch questions based on category

$query = "FOR q IN questions FILTER [Link] == @category RETURN q";

$statement = new Statement($connection, [

'query' => $query,

'bindVars' => ["category" => $category]

63

Page 65 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 66 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

]);

$cursor = $statement->execute();

$questions = iterator_to_array($cursor);

if (empty($questions)) {

die("No questions found for the selected category.");

// Handle form submission

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$score = 0;

$total_questions = count($questions);

foreach ($questions as $index => $question) {

$correct_answer = $question->get("answer");

$player_answer = isset($_POST["answer_$index"]) ? $_POST["answer_$index"] :

null;

if ($player_answer === $correct_answer) {

$score++;

// Save player result in "players" collection

64

Page 66 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 67 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

$query = "INSERT { name: @name, score: @score, category: @category } INTO

players RETURN NEW";

$statement = new Statement($connection, [

"query" => $query,

"bindVars" => ["name" => $player_name, "score" => $score, "category" =>
$category]

]);

$statement->execute();

// Redirect to leaderboard with player's name and score

header("Location: [Link]?player_name=" . urlencode($player_name) .

"&score=" . $score . "&category=" . urlencode($category));

exit;

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Jungle Quiz</title>

<link rel="stylesheet" href="../assets/css/[Link]">

<style>
65

Page 67 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 68 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

.quiz-container {

width: 60%;

margin: auto;

font-family: Arial, sans-serif;

text-align: center;

.category-select {

margin-bottom: 20px;

.question-block {

border: 2px solid #ddd;

padding: 15px;

margin-bottom: 20px;

border-radius: 8px;

background-color: #f9f9f9;

.question-block img {

max-width: 100%;

height: auto;

display: block;

margin: 10px auto;

66

Page 68 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 69 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

.option {

display: block;

padding: 10px;

margin: 5px 0;

background-color: white;

border: 1px solid #ccc;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

text-align: center;

.option:hover {

background-color: #f1f1f1;

.[Link] {

background-color: #28a745 !important;

color: white;

border: none;

67

Page 69 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 70 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

.submit-btn {

display: block;

width: 100%;

padding: 12px;

font-size: 18px;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

.submit-btn:hover {

background-color: #0056b3;

</style>

</head>

<body>

<div class="quiz-container">

<h1>Jungle Quiz</h1>

<h3>Player: <?php echo htmlspecialchars($player_name); ?></h3>

68

Page 70 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 71 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

<!-- Category Selection -->

<form id="categoryForm" method="GET">

<input type="hidden" name="player_name" value="<?php echo

htmlspecialchars($player_name); ?>">

<label for="category"><strong>Select Quiz Category:</strong></label>

<select name="category" id="category" class="category-select"

onchange="[Link]('categoryForm').submit();">

<option value="animal" <?php if ($category == "animal") echo "selected";

?>>Animals</option>

<option value="fruit" <?php if ($category == "fruit") echo "selected";

?>>Fruits</option>

<option value="flower" <?php if ($category == "flower") echo "selected";

?>>Flowers</option>

</select>

</form>

<form action="" method="POST" id="quizForm">

<?php foreach ($questions as $index => $question) { ?>

<div class="question-block">

<p><strong><?php echo $question->get("question"); ?></strong></p>

<img src="../assets/images/<?php echo $question->get("image"); ?>" alt="Quiz

Image">

<?php foreach ($question->get("options") as $option) { ?>

69

Page 71 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 72 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

<div class="option" onclick="selectOption(this, '<?php echo $index; ?>', '<?php

echo $option; ?>')">

<?php echo $option; ?>

<input type="radio" name="answer_<?php echo $index; ?>" value="<?php

echo $option; ?>"

style="display: none;">

</div>

<?php } ?>

</div>

<?php } ?>

<button type="submit" class="submit-btn">Submit Answers</button>

</form>

</div>

<script>

function selectOption(optionElement, questionIndex, optionValue) {

// Deselect all options for the question

[Link](`[name="answer_${questionIndex}"]`).forEach(input =>
{

[Link]("selected");

});

// Select the clicked option

[Link]("selected");
70

Page 72 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 73 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

// Mark the corresponding radio button as checked

[Link]("input").checked = true;

</script>

</body>

</html>

Leaderboard Page:

<?php

require_once "../db/[Link]";

use ArangoDBClient\Statement;

// Retrieve player name and score from the URL

$player_name = isset($_GET["player_name"]) ? trim($_GET["player_name"]) : null;

$player_score = isset($_GET["score"]) ? intval($_GET["score"]) : null;

// Fetch leaderboard (sorted by highest score)

$query = "FOR p IN players SORT [Link] DESC RETURN p";

$statement = new Statement($connection, ['query' => $query]);

$cursor = $statement->execute();

$players = iterator_to_array($cursor);

71

Page 73 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 74 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Leaderboard - Jungle Quiz</title>

<link rel="stylesheet" href="../assets/css/[Link]">

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background: url('../assets/images/[Link]') no-repeat center

center/cover;

color: white;

.leaderboard-container {

width: 50%;

margin: auto;

background: rgba(0, 0, 0, 0.7);

padding: 20px;

72

Page 74 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 75 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

border-radius: 10px;

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

background: white;

color: black;

border-radius: 8px;

overflow: hidden;

th,

td {

padding: 10px;

border: 1px solid #ddd;

th {

background-color: #007bff;

color: white;

73

Page 75 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 76 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

.highlight {

background-color: #28a745 !important;

color: white;

font-weight: bold;

.home-btn {

display: inline-block;

margin-top: 20px;

padding: 10px 20px;

font-size: 18px;

color: white;

background: #ff9800;

border: none;

border-radius: 5px;

cursor: pointer;

.home-btn:hover {

background: #e68900;

</style>

</head>

74

Page 76 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 77 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

<body>

<div class="leaderboard-container">

<h1>Jungle Quiz Leaderboard</h1>

<?php if ($player_name && $player_score !== null) { ?>

<h3> Well done, <?php echo htmlspecialchars($player_name); ?>! Your score:

<?php echo $player_score; ?>

</h3>

<?php } ?>

<table>

<tr>

<th>Rank</th>

<th>Player Name</th>

<th>Score</th>

</tr>

<?php foreach ($players as $rank => $player) { ?>

<tr class="<?php echo ($player->get("name") == $player_name) ? 'highlight' : '';

?>">

<td><?php echo $rank + 1; ?></td>

<td><?php echo htmlspecialchars($player->get("name")); ?></td>

<td><?php echo $player->get("score"); ?></td>

</tr>

75

Page 77 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 78 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

<?php } ?>

</table>

<button onclick="[Link]='[Link]'" class="home-btn"> Back to

Home</button>

</div>

</body>

</html>

Submit_answer.php

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$selected_answer = $_POST['answer'];

$correct_answer = $_POST['correct_answer'];

if ($selected_answer === $correct_answer) {

echo "<script>alert('Correct Answer!');

[Link]='game/[Link]';</script>";

} else {

echo "<script>alert('Wrong Answer. Try Again!');

[Link]='game/[Link]';</script>";

}
76

Page 78 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

 Page 79 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977

?>

77

Page 79 of 79 - AI Writing Submission Submission ID trn:oid:::7772:494933977