0% found this document useful (0 votes)
25 views126 pages

Project 2

LEARNIFY is a web-based educational platform that offers interactive learning experiences in programming languages like C++, Java, Python, and HTML & CSS, integrating structured modules, quizzes, and practical exercises. It features a built-in compiler for real-time coding practice and incorporates gamification elements, such as a chess game, to enhance engagement and critical thinking. Designed for accessibility and flexibility, LEARNIFY caters to a diverse audience, providing a comprehensive learning experience that bridges the gap between theory and practical application.

Uploaded by

nicksharma2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views126 pages

Project 2

LEARNIFY is a web-based educational platform that offers interactive learning experiences in programming languages like C++, Java, Python, and HTML & CSS, integrating structured modules, quizzes, and practical exercises. It features a built-in compiler for real-time coding practice and incorporates gamification elements, such as a chess game, to enhance engagement and critical thinking. Designed for accessibility and flexibility, LEARNIFY caters to a diverse audience, providing a comprehensive learning experience that bridges the gap between theory and practical application.

Uploaded by

nicksharma2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 126

CHAPTER 1

INTRODUCTION
In the digital age, online learning has become an essential tool for education, enabling
users to gain knowledge at their own pace and convenience. LEARNIFY is a web-based
educational platform designed to provide interactive learning experiences in various
programming languages, including C++,C, Java, Python, and HTML & CSS. The
platform integrates learning modules, quizzes, and practical exercises to enhance user
engagement and retention of knowledge.
LEARNIFY aims to bridge the gap between theoretical knowledge and practical
application. By offering a structured approach to learning, it ensures that users can grasp
fundamental programming concepts while also testing their understanding through
quizzes and hands-on exercises. This approach fosters an interactive and dynamic
learning environment that caters to beginners and advanced learners alike.
One of the key features of LEARNIFYis its structured curriculum, which organizes
content into welldefined sections for each programming language. Users can navigate
through tutorials, attempt quizzes to assess their progress, and practice coding in a
simulated environment. Additionally, the platform includes a built-in compiler, allowing
users to execute and test their code directly from the web interface, making the learning
process seamless and efficient.
Beyond coding tutorials, LEARNIFY incorporates gamification elements to boost
motivation and engagement. The inclusion of a chess game, built using Pygame, adds an
element of logical thinking and strategic problem-solving, complementing the technical
learning aspects of the platform. This combination of coding exercises and cognitive
challenges helps users develop critical thinking skills while reinforcing programming
concepts.
The development of LEARNIFYwas driven by the need for an accessible and interactive
learning platform that caters to a diverse audience. Whether users are students,
professionals, or coding enthusiasts, the platform provides a comprehensive learning
experience tailored to different skill levels. By leveraging web technologies, interactive
quizzes, and gamified elements, LEARNIFY ensures that learners remain engaged and
motivated throughout their educational journey.
Furthermore, LEARNIFYis designed with an intuitive user interface, making navigation
and accessibility effortless. The platform supports a responsive design, ensuring
compatibility across multiple devices, including desktops, tablets, and smartphones. This
accessibility allows learners to continue their education anytime, anywhere, without
restrictions.
Another unique aspect of LEARNIFY is its focus on real-world applications. The
platform provides case studies, project-based learning, and coding challenges that mimic
real-life scenarios, helping users develop industry-relevant skills. By integrating these
practical elements, LEARNIFY prepares learners for careers in software development,
data science, and other technology-related fields.

1
As technology continues to evolve, platforms like LEARNIFYplay a crucial role in
shaping the future of digital learning, empowering individuals to master new skills and
achieve their educational goals.

Importance of LEARNIFY
Traditional learning methods often fail to provide a hands-on coding experience.
LEARNIFY is designed to bridge this gapby offering a structured, interactive, and
engaging learning environment. This approach:
✔ Enhances knowledge retention– Active learning improves comprehension and memory.
✔ Encourages problem-solving skills– Interactive quizzes and coding exercises develop
critical thinking abilities.
✔ Introduces game-based learning– The Pygame-based chess game makes programming
fun and engaging.
✔ Provides accessibility and flexibility– A web-based platform enables users to learn
from anywhere.

With the increasing demand for practical programming knowledge, having an


interactiveand structured learning platform like LEARNIFY is crucial for beginners and
aspiring developers.

In conclusion, LEARNIFY represents a step forward in digital education by integrating


interactive tutorials, assessments, and engaging activities in a single platform. Its
emphasis on practical learning, combined with an intuitive user interface, makes it an
effective tool for individuals looking to enhance their programming skills. With
continuous improvements and updates, LEARNIFY has the potential to become a
valuable resource in the field of online education.

2
1.1. Project Overview
LEARNIFY is built using modern web development technologies, ensuring an optimal learning
experience. The key technologies used in this project include:
● Frontend: HTML, CSS, JavaScript
● Backend: Python (Flask)
● Database: SQLite/MySQL
● Game Development: Pygame for the chess application
● Compiler Integration: Online code execution for multiple programming languages
Develop an online educational platform that provides interactive learning experiences in various
programming languages. The platform integrates learning modules, quizzes, a built-in compiler,
and gamification elements to enhance user engagement and knowledge retention.

Steps:
1. Content Development:
a. Design structured learning modules for C++, Java, Python, and HTML & CSS.
b. Create quizzes and interactive assessments for user engagement.
2. Web Development:
a. Develop a user-friendly interface with responsive design.
b. Implement backend functionalities using Django/Flask for dynamic content
delivery.
3. Interactive Coding Environment:
a. Integrate a real-time code compiler for hands-on practice.
b. Provide debugging support and code execution within the platform.
4. Gamification Features:
a. Incorporate a chess-based game using Pygame for logical
thinking enhancement.
b. Design achievement badges and progress tracking systems.
5. User Authentication and Data Management:
a. Implement login/logout functionalities with user progress tracking.
b. Store learning history and quiz results for performance analysis.

Key Concepts: E-learning, Interactive Programming, Gamification, Real-time Compilation,


Game-based Learning, Logical Thinking, AI-based Gameplay

Tech Stack: Python (Django/Flask), JavaScript, HTML, CSS, Pygame, SQLite, Firebase,
Python, Pygame, AI-based Move Prediction Algorithms
Description: Develop a chess-based game within the platform to enhance logical reasoning
and problem-solving skills. The game will be built using Pygame and seamlessly integrated
into the learning experience.
Steps:
● Game Development:
○ Create a chess game using Pygame.

3
○ Implement AI-based opponent for solo gameplay.
● User Interaction & Engagement:
○ Integrate multiplayer functionality.
○ Track user performance and provide feedback.
● Integration with Learning Modules:
○ Link chess-based challenges to programming
logic concepts.
○ Reward users with badges for completing
strategic moves.

By combining structured learning, real-time coding practice, and interactive challenges,


LEARNIFY sets itself apart as a comprehensive educational tool for aspiring programmers.
The project aims to evolve with technological advancements, making programming
education more accessible, enjoyable, and effective for learners worldwide.

LEARNIFY is a powerful and interactive programming education platform that


combines structured learning, real-time code execution, and game-based learning to
make programming more engaging and effective. By integrating a built-in compiler,
interactive quizzes, and a Pygame-based chess application, the platform provides a
unique and immersive learning experience.

With its user-friendly interface, personalized learning paths, and interactive coding
exercises, LEARNIFY serves as an ideal platform for beginners and intermediate
learners who want to build a strong foundation in programming while having fun
through interactive and practical learning.

4
1.2. Project Need
Why Learnify?
In today's digital era, programming skills have become essential for students,
professionals, and technology enthusiasts. However, traditional learning methods often
lack interactivity and fail to engage learners effectively. LEARNIFY addresses these
challenges by offering an interactive and structured learning platform that combines
educational content with practical assessments and engaging activities.
Identified Challenges in Learning Programming:
● Lack of Structured Learning
○ Many beginners struggle due to unorganized learning resources.
○ LEARNIFY provides a step-by-step approach to learning programming
languages.
● Limited Practical Implementation
○ Theoretical learning alone is insufficient for mastering programming.
○ A built-in compiler allows users to write, test, and execute code in real time.
● Lack of Self-Assessment Tools
○ Many learners fail to track their progress due to the absence of quizzes or
assessments.
○ LEARNIFY includes interactive quizzes to reinforce learning and evaluate
performance.
● Need for an Engaging Learning Experience
○ Traditional methods often lack engagement, leading to reduced interest.
○ The integration of multimedia elements and a chess game makes learning
enjoyable and interactive.
Target Users:
● Students looking for an interactive way to learn programming.
● Beginners who need a structured and engaging learning experience.
● Professionals wanting to test and enhance their coding skills.
● Educators seeking an interactive tool to support teaching.

LEARNIFY bridges the gap between theoretical knowledge and hands-on practice by
providing an interactive learning experience. With structured lessons, real-time code
execution, and quizzes, it caters to learners of all levels. The inclusion of a chess game
further enhances logical thinking, making it a unique and effective learning platform.

5
CHAPTER 2
SPECIFIC REQUIREMENTS

2.1 External Interface Requirements


External Interface Requirements define how the system interacts with external entities, such
as users and other systems. They focus on inputs, outputs, data exchanges, and user
interactions.
Here’s a structured breakdown of the external interface requirements for LEARNIFY:
1. User Interfaces:
This section describes the interface between users and the system, covering all
screens, forms, and other visual elements users interact with.
Example:
● Login Page:
○ Input: Username, Password
○ Output: Success/Failure message
○ Constraints: Username must be an email, and the password must be at
least 8 characters long.
● Course Selection Page:
○ Input: Programming language selection (C++, Java, Python, HTML &
CSS)
○ Output: List of available courses
○ Constraints: Filter by difficulty level (Beginner, Intermediate,
Advanced)
● Interactive Coding Page:
○ Input: User-written code
○ Output: Compilation results, error messages, output
of executed code
○ Constraints: Code execution limited to sandboxed
environment for security
● Quiz Page:
○ Input: User-selected answers to quiz questions
○ Output: Quiz score and correct/incorrect answers
○ Constraints: Timed quizzes with immediate feedback

2. API Interface for System Interaction:


To enhance interoperability with external systems, LEARNIFY provides an API
interface allowing seamless data exchange.
● Authentication API:
○ Endpoint: POST /login
○ Input: Username, Password

6
○ Output: Authentication token
● Constraints: Secure login via JWT-based authentication
○ Course Retrieval API:
■ Endpoint: GET /courses
■ Input: Course category, difficulty level
■ Output: JSON list of matching courses
■ Constraints: Paginated results for optimized performance
○ Code Execution API:
■ Endpoint: POST /execute
■ Input: User code snippet, selected language
■ Output: Execution result, error messages
■ Constraints: Sandbox execution with time and resource limits
3. Batch Processing Interface:
For handling bulk data processing, LEARNIFY includes batch processing
capabilities.
● Bulk User Registration:
○ Input: CSV file with user details
○ Output: Status report on successful and failed registrations
○ Constraints: Data validation to ensure proper formatting
● Mass Quiz Evaluation:
○ Input: JSON with multiple quiz responses
○ Output: Evaluation results for all users
○ Constraints: Automated grading with analytics

These external interface requirements ensure LEARNIFY operates efficiently while maintaining
security, scalability, and usability.

7
2.2. Hardware Interfaces
The hardware interface requirements define how LEARNIFY interacts with physical
components, ensuring compatibility and smooth performance. Below are the key hardware
interfaces necessary for the system:
1. Server Requirements:
LEARNIFY is a web-based system requiring reliable server infrastructure for hosting
and execution.
• Processor: Minimum Intel Xeon or AMD Ryzen 9 (Multi-core support for
handling multiple requests)
• RAM: At least 16GB (Recommended 32GB for better performance)
• Storage: SSD-based storage (Minimum 500GB; recommended 1TB for
scalability)
• Operating System: Linux-based (Ubuntu Server, CentOS) or Windows Server for
deployment
• Database Server: PostgreSQL, MySQL, or MongoDB compatibility • Network:
High-speed internet connection with at least 1Gbps bandwidth
2. Client-Side Requirements:
End users access LEARNIFY through web browsers and mobile applications, requiring
the following hardware specifications:
• Processor: Minimum Intel Core i3 or ARM-based equivalent
• RAM: At least 4GB for smooth web browsing
• Storage: 10GB of available disk space
• Display: Minimum 720p resolution; recommended 1080p for optimal experience
• Internet Connectivity: Broadband connection (Minimum 5 Mbps download
speed)
• Supported Devices:
Desktop and Laptop (Windows, Mac, Linux)
Tablets (iOS,Android)
Smartphones (iOS, Android)
3. Peripheral Device Support:
LEARNIFY supports integration with external devices for an enhanced learning
experience:
• Microphone & Webcam: Required for interactive sessions and assessments
• External Storage Devices: USB drives and external HDDs for offline content
storage
• Printers: Compatible for printing study materials and reports
• Headphones/Speakers: Recommended for better audio clarity in learning sessions
These hardware interface requirements ensure that LEARNIFY remains accessible, scalable,
and efficient across different environments.

8
2.3 Software Interfaces
A software interface defines the interaction between different components of a system,
including user interfaces, system interfaces, APIs, and hardware interactions. The LEARNIFY
project is a web-based learning platform that incorporates various software interfaces to
facilitate user interactions, code execution, data storage, and game-based learning. These
interfaces ensure smooth communication between different system components, making the
platform efficient, interactive, and scalable.
This section describes the key software interfaces included in the LEARNIFY project,
categorized as User Interfaces (UI), System Interfaces, Application Programming Interfaces
(APIs), and Database Interfaces.
1. User Interface (UI):
The User Interface (UI) is the front-end component that allows users to interact with the system.
LEARNIFY is designed with a responsive and intuitive UI to ensure a seamless learning
experience. Technologies used:-
● HTML, CSS, JavaScript – Used to build the structure, styling, and interactivity of the
UI.
● Bootstrap – Provides a responsive design that adapts to different screen sizes.
Key Features
● Homepage – Displays course options, user authentication, and navigation links.
● Dashboard – Personalized space where users can track their progress.
● Lesson Pages – Step-by-step tutorials for C++, Java, Python, and HTML & CSS.
● Quiz Interface – Interactive self-assessments with multiple-choice questions.
● Code Editor & Compiler – Allows users to write, execute, and test code in real-time.
● Game Interface (Pygame Chess) – Provides an interactive chess board for game-based
learning.
User Interaction Flow
● User logs in and selects a course from the homepage.
● Reads lessons and interacts with examples.
● Takes quizzes and submits answers for immediate feedback.
● Writes and runs code in the built-in compiler.
● Plays the Pygame-based chess game to enhance logic skills.
2. System Interfaces
System interfaces enable communication between different software and hardware
components of the project. The LEARNIFY platform interacts with:
1. Web Server (Flask Framework)
● Handles requests and responses between users and the backend system.
● Manages authentication, quizzes, and lesson retrieval.

2. Compiler Integration
● Connects to an online compiler API to execute code in real-time.

9
● Supports C++, Java, Python, code execution.
3. Pygame Interface
● The Pygame-based chess game runs within the system.
● Uses Python scripts to render game graphics and handle user input.
3. Application Programming Interfaces (APIs)
APIs enable communication between different software components and third-party services.
LEARNIFY integrates various APIs to enhance functionality.
1. Online Compiler API
● Purpose: Enables users to write, execute, and test code within the platform.
● Languages Supported: C++, Java, Python
● Functionality:
○ Sends user code to an external API for execution.
○ Receives output and error messages in real-time.
2. User Authentication API
● Purpose: Manages user login, registration, and session tracking.
● Functionality:
○ Secure user authentication using hashed passwords.
○ Allows users to save progress and retrieve data.
3. Pygame API
● Purpose: Renders the chess game interface and logic using Python.
● Functionality: Manages chess board rendering. Handles player moves and game
rules.

10
2.4. Communications Protocols
Communication protocols define the rules and standards that enable different components of a
system to exchange information securely and efficiently. In the LEARNIFY platform, multiple
communication protocols are utilized to facilitate user interaction, server communication, API
requests, and database transactions. These protocols ensure seamless integration between the
frontend, backend, external APIs, and database while maintaining data security and integrity.
1. HTTP/HTTPS (Hypertext Transfer Protocol / Secure HTTP)
Purpose:
● Used for client-server communication between the frontend (browser) and backend
(Flask server).
● Ensures that users can send requests (e.g., login, fetch lessons, execute code) and receive
responses (e.g., lesson content, quiz results, compiler output).
Functionality in LEARNIFY:
● User Requests: When a user logs in, selects a course, or submits a quiz, a request is sent
using HTTP/HTTPS.
● Server Responses: The backend processes the request and sends the requested data (e.g.,
lesson content, quiz results) to the frontend.
● Data Security: HTTPS encrypts the communication, preventing unauthorized access or
tampering.
2. WebSocket Protocol
Purpose:
● Enables real-time communication between the client (user) and server.
● Unlike HTTP, which follows a request-response model, WebSockets allow continuous
bidirectional communication.
Functionality in LEARNIFY:
● Live Code Execution: Can be used to enable real-time compiler feedback. ensuring
users get results instantly.
● Pygame Chess Game: Allows real-time interaction, making it possible for multiplayer
functionality in future enhancements.

3. RESTful API Communication


Purpose:
● The LEARNIFY platform uses RESTful APIs to facilitate communication between
frontend, backend, and external services.
● REST (Representational State Transfer) is a widely used web service architecture based
on HTTP methods (GET, POST, PUT, DELETE).

11
Functionality in LEARNIFY:
● Fetching Lessons & Quizzes: The frontend makes GET requests to retrieve
programming lessons and quiz questions.
● Submitting Quiz Answers: The user submits quiz answers via a POST request, and the
backend evaluates them.
● Executing Code: The compiler API receives POST requests with user code and responds
with execution results.
4. Secure Authentication Protocols
Purpose:
● Ensures that only authorized users can access their learning progress, quizzes, and
personal data.
● Prevents unauthorized access, data breaches, and identity theft.
Authentication Methods Used in LEARNIFY:
● JWT (JSON Web Token): Secure token-based authentication to verify users.
● OAuth (Optional for future enhancements): Can be used for third-party authentication
(Google, GitHub).
● Session-Based Authentication:Keeps users logged in securely while interacting with
lessons and quizzes.

2.5. Security Maintainability/ Performance


1. Security Considerations

12
Security is a critical aspect of any web-based platform, especially one that
involves user authentication, data storage, and real-time code execution.
LEARNIFY implements several security measures to protect user data, prevent
unauthorized access, and ensure safe execution of code.
1.1 User Authentication and Data Protection
● Secure Login System: The platform uses hashed passwords with
encryption techniques (e.g., bcrypt) to prevent unauthorized access.
● JWT Authentication: JSON Web Tokens (JWT) are used to
authenticate users and maintain secure sessions.
● Role-Based Access Control: Different levels of access control prevent
unauthorized users from modifying system resources.
1.2 Secure Data Storage and Transmission
● HTTPS Encryption: All data transmission between the client and server
is secured using SSL/TLS encryption, preventing man-in-the-middle
(MITM) attacks.
● Database Security: The database is protected against SQL injection
attacks by using prepared statements and ORM (SQLAlchemy).
● User Input Validation: All input fields (e.g., login, code submission)
include validation to prevent XSS (Cross-Site Scripting) and CSRF
(Cross-Site Request Forgery) attacks.
1.3 Secure Code Execution Environment
● Sandboxed Execution: The real-time code execution feature uses an
isolated environment to prevent malicious code from affecting the
server.
● Execution Time Limits: Prevents infinite loops and denial-of-service
(DoS) attacks by setting maximum execution time for each code
snippet.
● Restricted File Access: Ensures that user-submitted code cannot access
sensitive system files or execute dangerous commands.
2. Maintainability Considerations
Maintainability ensures that LEARNIFY can be easily updated, debugged, and
extended over time. A well-structured codebase allows developers to add new
features, fix bugs, and scale the application efficiently.
2.1 Modular Code Architecture
● Separation of Concerns: The project follows a modular architecture,
separating the frontend, backend, database, and API layers for better
maintainability.
● MVC (Model-View-Controller) Structure: The backend follows the
MVC pattern, making it easier to manage and scale.
2.2 Code Documentation and Readability
● Well-Commented Code:Every module is documented with comments,
making it easier for developers to understand and modify the code.

13
● Consistent Coding Standards: The project follows best practices in
Python (PEP 8), JavaScript, and SQL for better readability and
maintainability.
2.3 Version Control and Deployment
● GitHub for Version Control: The project is maintained on GitHub,
ensuring version tracking and collaborative development.
● CI/CD Pipelines: Future enhancements can include Continuous
Integration/Continuous Deployment (CI/CD) to automate testing and
deployment.
● Containerization with Docker (Optional Future Enhancement): Using
Docker containers can help in deploying the project across different
environments without compatibility issues.
3. Performance Considerations
Performance optimization ensures that LEARNIFY runs efficiently, providing
a fast and smooth user experience. Since the platform involves real-time
interactions, code execution, and database transactions, performance tuning is
essential.
3.1 Optimized Backend Processing
● Asynchronous Processing: For handling multiple user requests
efficiently, Flask APIs can use asynchronous execution to prevent
bottlenecks.
● Efficient Query Handling: Using indexed databases and optimized SQL
queries reduces query execution time and improves response speed.
● Caching Mechanism: Future enhancements can include caching (Redis,
Memcached) to store frequently accessed data and reduce server load.
3.2 Frontend Performance Optimization
● Minimized HTTP Requests: Reducing the number of server requests
improves page load speed.
● Optimized JavaScript & CSS: Minifying JavaScript and CSS files
decreases page load time.
● Lazy Loading: Images and other heavy resources load only when
needed, improving initial page speed.
3.3 Efficient Code Execution Handling
● Optimized Compiler API Requests: Only necessary data is sent to the
compiler API, reducing network traffic.
● Parallel Processing for Code Execution: The system can execute
multiple user submissions simultaneously without delays

CHAPTER 3
SOFTWARE PRODUCT FEATURES

14
3.1 System Architecture
The system architecture of LEARNIFY defines the structure, components, and communication
flow between different modules of the platform. LEARNIFY follows a three-tier architecture,
ensuring modularity, scalability, and maintainability. It consists of:
● Frontend (Client-Side) – The user interface for learners to interact with the system.
● Backend (Server-Side) – Handles business logic, user authentication, and data
processing.
● Database (Storage Layer) – Manages lesson content, user progress, quiz results, and
authentication data.
Additionally, external APIs (such as a compiler API and Pygame-based chess game) enhance
the platform’s functionality.
1. System Architecture Overview
The three-tier architecture of LEARNIFY consists of separate components, allowing for
efficient management and scalability.
1.1. Frontend (Client-Side)
● Technology Used: HTML, CSS, JavaScript, Bootstrap
● Functionality:
○ Provides an interactive UI for users to access courses, attempt quizzes,
and execute code.
○ Sends HTTP requests to the backend to fetch lessons, submit quizzes, and
receive compiler responses.
○ Integrates a Pygame-based chess game for logic development.
1.2. Backend (Server-Side)
● Technology Used: Flask (Python)
● Functionality:
○ Processes user authentication and session management using JWT-based
authentication.
○ Handles API requests for fetching lessons, evaluating quizzes, and
running code.
○ Manages secure communication between the frontend, database, and
external APIs.
1.3. Database (Storage Layer)
● Technology Used: SQLite / MySQL
● Functionality:
○ Stores user profiles, progress, quiz results, lesson content, and game
statistics.
○ Uses SQL queries and ORM (Object-Relational Mapping) for efficient
data retrieval.

15
○ Ensures data security with hashed passwords and role-based access
control.

2. Component Interaction and Workflow


The system follows a structured workflow to handle user interactions and ensure smooth
operation.
Step 1: User Access & Authentication
● The user accesses LEARNIFY via a web browser.
● The frontend sends a login request to the backend.
● The backend verifies credentials and returns a JWT token for session
management.
Step 2: Lesson & Quiz Access
● The frontend requests lesson content from the backend.
● The backend retrieves data from the database and returns it to the client.
● The user completes quizzes, and answers are submitted via an API call.
● The backend evaluates the responses, stores the score, and returns feedback.
Step 3: Code Execution
● The user writes code in the built-in code editor.
● The frontend sends a request to the compiler API for execution.
● The API processes the code and returns the output/error messages.
● The output is displayed in real-time to the user.
Step 4: Pygame Chess Game
● The user starts the Pygame-based chess game from the interface.
● The game logic, written in Python (Pygame library), runs locally in the browser.
● The user interacts with the game board, moves pieces, and plays against AI or
another player.

3. System Architecture Diagram

The three tier architecture can be represented as:

[User Interface] (Frontend)



[Flask Backend] (Server-Side Logic)

16

[Database] (Storage of User & Lesson Data)

[External APIs] (Compiler & Game Integration)

4. External API Integration


LEARNIFY integrates external APIs to provide additional functionalities:
● Compiler API – Enables real-time code execution for C++, Java, Python, and
HTML.
● Authentication API – Manages user login, session tracking, and access control.
● Pygame API – Handles rendering and interaction for the chess-based learning
module.

3.2. Database Requirements


1. Introduction
A well-structured database is essential for managing user data, lesson content, quiz
results, and progress tracking in LEARNIFY. The database ensures data integrity,

17
security, and efficient retrieval, allowing users to access their learning materials and
track their progress seamlessly.
The LEARNIFY platform requires a relational database such as MySQL or SQLite,
which supports structured storage, indexing, and efficient querying. The database must
handle multiple users, store various data types, and ensure scalability for future
enhancements.
2. Key Database Requirements
The database must meet the following requirements:
● User Management: Securely store user credentials, roles (admin/student), and
authentication tokens.
● Course & Lesson Storage: Maintain structured course materials, including text, images,
and videos.
● Quiz & Assessment Storage: Store quiz questions, user responses, scores, and feedback.
● Code Execution Logs: Store user-submitted code and execution results for tracking and
debugging.
● Game Data Storage: Store user performance and progress in Pygame-based chess for
logical learning.
● Data Security & Integrity: Implement encryption, role-based access, and backup
mechanisms to protect data.
3. Database Schema & Table Requirements
3.1. User Table :- Stores user information such as login credentials, roles, and progress.

 Security Measures: Passwords are hashed and role-based access is enforced.


3.2. Courses & Lessons Table:- Stores programming lessons, including textual content,
videos, and images.

18
 Optimization: Indexed on course_name for fast retrieval.
3.3. Quiz & Assessments Table :- Stores quiz questions and their respective answers.

3.4. Game Data Table (Pygame Chess Integration) :- Stores user performance in chess-based
logic exercises.

✅ Use Case: Tracks user engagement in gamified learning.


4. Data Security & Performance Considerations
To ensure data security, reliability, and efficiency, the database implements:
● Encryption & Hashing: User passwords and sensitive data are encrypted.
● Indexing & Query Optimization: Indexed columns (user_id, lesson_id, quiz_id) for
faster lookups.
● Data Backup Mechanism: Regular database backups prevent data loss.
● Role-Based Access Control: Only admins can modify course content

19
3.3. ER Diagram
The Entity-Relationship (ER) Diagram represents the structure of the LEARNIFY project,
showcasing how different entities interact within the system. The platform is designed for online
learning, providing features such as course enrollment, lessons, quizzes, coding exercises, and
user progress tracking.
Below is a breakdown of the main entities, their attributes, and relationships:

Entities and Relationships in the ER Diagram


● User (User_ID, Name, Email, Password, Role)
○ Has → Enrollments (User enrolls in courses)
○ Attempts → Quizzes and coding exercises
● Course (Course_ID, Title, Description, Instructor_ID)
○ Contains → Lessons
○ Has → Quizzes
● Lesson (Lesson_ID, Course_ID, Title, Content)
○ Belongs to → Course
● Quiz (Quiz_ID, Course_ID, Title)
○ Includes → Questions
● Question (Question_ID, Quiz_ID, Text, Answer)
○ Belongs to → Quiz
● Attempt (Attempt_ID, User_ID, Quiz_ID, Score, Timestamp)
○ Tracks → User's quiz attempts
● Code_Exercise (Exercise_ID, Course_ID, Description, Difficulty)
○ Has → Submissions

20
● Submission (Submission_ID, User_ID, Exercise_ID, Code, Result)
○ Belongs to → Code_Exercise
● Admin (Admin_ID, Name, Email)
○ Manages → Courses

21
3.4. Data Flow Diagram
1. Data Flow Diagram (DFD) - Overview
A Data Flow Diagram (DFD) visually represents how data moves within the system,
from input to processing and output. It shows the interactions between users, databases,
and processes involved in the system.
2. Levels of DFD
● Level 0 DFD (Context Diagram)
The Level 0 DFD (Context Diagram) provides an overview of the entire system.
It highlights how users (Students, Admins, Instructors) interact with LEARNIFY,
with data flowing to and from the database and processing units.
Entities & Data Flow
● Users (Students, Admins, Instructors) → Interact with the system.
● LEARNIFY Platform → Processes user inputs, manages courses,
quizzes, coding exercises, and tracks progress.
● Database → Stores user profiles, courses, quizzes, progress, and system
logs.
Diagram Representation (Level 0)
+----------------------+
| Students |
+----------------------+
|
v
+----------------------------------+
| LEARNIFY SYSTEM |
| (Processes Courses, Quizzes, |
| User Data, & Learning Progress) |
+----------------------------------+
|
v
+------------------+
| Database |
+------------------+
● Level 1 DFD
In Level 1 DFD, the system is broken down into its core modules:
● User Management → Handles login, sign-up, authentication.
● Course & Content Management → Manages courses, lessons, and
resources.
● Quiz & Assessment Module → Manages quizzes and tracks performance.
● Coding Practice Module → Handles programming exercises.

22
● Report Generation → Generates user progress reports.
Diagram Representation (Level 1)
+----------------------+
| Students |
+----------------------+
|
v
+----------------------------------+
| User Management Module |<-----> Database (User Data)
+----------------------------------+
|
v
+----------------------------------+
| Course & Content Management |<-----> Database (Courses)
+----------------------------------+
|
v
+----------------------------------+
| Quiz & Assessment Module |<-----> Database (Quiz Scores)
+----------------------------------+
|
v
+----------------------------------+
| Coding Practice Module |<-----> Database (Code Data)
+----------------------------------+
|
v
+----------------------------------+
| Report Generation |<-----> Database (Reports)
+----------------------------------+
● Level 2 DFD (Detailed Data Flow)
At Level 2, each module is further detailed. Here's a breakdown of how each
module interacts with users, data storage, and system processes.
● 1. User Management
○ User Inputs → Register/Login
○ Processes → Validate user, store profile
○ Outputs → Dashboard access
● 2. Course Management
○ User Inputs → Enroll in course, access lessons
○ Processes → Fetch content, track progress
○ Outputs → Updated progress, downloadable resources

23
● 3. Quiz & Assessment
○ User Inputs → Attempt quiz
○ Processes → Evaluate answers, store scores
○ Outputs → Quiz results, feedback
● 4. Coding Practice
○ User Inputs → Write/submit code
○ Processes → Compile, check syntax
○ Outputs → Display output/errors
● 5. Report Generation
○ User Inputs → Request progress report
○ Processes → Fetch user data, generate insights
○ Outputs → PDF/graphical reports

The Data Flow Diagram (DFD) for LEARNIFY helps in understanding how data moves
between different components, ensuring smooth interaction between users, processing units, and
the database. This structured flow improves performance, usability, and data management for a
better e-learning experience.

24
3.5. User Interfaces
The user interface (UI) of LEARNIFY plays a crucial role in delivering a smooth and engaging
learning experience. A well-designed UI ensures that users can easily navigate through courses,
quizzes, coding exercises, and interactive games. The LEARNIFY platform is designed with a
clean, intuitive, and responsive UI, making learning more accessible for students of all levels.
1. Key User Interface Components
● Home Page
○ Purpose: The home page serves as the main entry point of the system, providing
an overview of available courses, quizzes, and coding exercises.
○ Features:
■ User-friendly layout with quick navigation buttons.
■ Welcome message and personalized greetings for logged-in users.
■ Display of recent activity, top courses, and recommended learning paths.
■ Access to login and sign-up options for new users.
○ Design Considerations:
■ Clean and minimalistic design for a smooth user experience.
■ Dark and light mode options for better accessibility.
■ Responsive design that works well on mobile, tablets, and desktops.
● User Registration and Login Interface
○ Purpose: Enables users to create an account or log in securely.
○ Features:
■ Simple and interactive sign-up and login forms.
■ Multi-step authentication for better security.
■ Password reset and Google/Facebook authentication options.
○ Design Considerations:
■ Error validation messages for incorrect logins.
■ Mobile-friendly interface for easy access.
■ Secure input fields to protect user credentials.
● Dashboard
○ Purpose: The dashboard provides an overview of the user's progress, quizzes, and
coding exercises.
○ Features:
■ Progress tracking for courses and quizzes.
■ Quick access to enrolled courses, upcoming quizzes, and achievements.
■ Leaderboard and rewards section for gamification.
○ Design Considerations:
■ Simple, well-organized layout with graphs and progress bars.
■ Easy-to-read fonts and color-coded indicators for progress tracking.
● Course Page
○ Purpose: Displays detailed content of each course, including videos, slides, and
lessons.
○ Features:
■ Course outline and learning objectives.
■ Embedded videos, notes, and downloadable materials.

25
■ Discussion forum for student interactions.
○ Design Considerations:
■ Expandable sidebar navigation for quick topic selection.
■ Bookmarking feature to save progress.
■ Interactive elements like quizzes and pop-up hints for better engagement.
● Quiz Interface
○ Purpose: Provides an interactive way to assess a student's knowledge.
○ Features:
■ Multiple-choice, true/false, and coding-based questions.
■ Timer and progress bar to keep track of quiz completion.
■ Instant feedback on answers.
○ Design Considerations:
■ Color-coded correct/incorrect answers to improve clarity.
■ Detailed score breakdown and explanations for learning.
■ Mobile-friendly layout for taking quizzes on the go.
● Code Editor Interface
○ Purpose: Enables students to write and execute code directly within the platform.
○ Features:
■ Live coding editor with syntax highlighting.
■ Support for multiple programming languages (Python, C++).
■ Error handling and debugging tools.
○ Design Considerations:
■ Dark/light mode toggle for better visibility.
■ Auto-save functionality to prevent loss of code.
■ Code execution sandbox for secure testing.
● Pygame-Based Learning Interface
○ Purpose: Engages students in game-based learning experiences.
○ Features:
■ Interactive coding challenges with Pygame.
■ Educational games like Chess and logic-based puzzles.
■ Real-time feedback on learning performance.
○ Design Considerations:
■ Smooth graphics and animations for an engaging experience.
■ Low-latency controls for seamless gameplay.
■ Integration with leaderboard and rewards system.
● Admin Panel
○ Purpose: Allows administrators and instructors to manage users, courses, and
quizzes.
○ Features:
■ Dashboard for monitoring system usage and user activities.
■ Course and quiz creation tools.
■ Security logs and access controls.
○ Design Considerations:
■ Role-based access control (RBAC) for enhanced security.
■ Graphical analytics and reports for easy data interpretation.

26
The user interfaces in LEARNIFY are designed to provide a seamless, engaging, and intuitive
learning experience. From course navigation to quiz participation and coding exercises, every
UI component is built with usability, accessibility, and responsiveness in mind. The integration
of gamification, interactive elements, and real-time progress tracking ensures that users remain
engaged and motivated throughout their learning journey. With ongoing UI enhancements,
LEARNIFY aims to create a more personalized and interactive learning experience for students
worldwide.

27
3.6. Report Formats
A well-structured report format is essential for documenting the LEARNIFY project in
a clear, organized, and professional manner. The report follows a standard format,
ensuring that all key aspects of the project are covered systematically. Below is the
structured format used in this project report:
1. Introduction :- Brief description of LEARNIFY and its objectives, importance of
interactive and gamified learning, technologies used in development (Python, Pygame,
SQLite, Flask).
2 . System Overview :- Explanation of the platform’s functionality, how the system
enhances learning experiences.
3. System Architecture :- Overview of the system design and workflow, architecture
diagram explaining different components.
4. Database Design :- ER Diagram representation, tables, fields, and data relationships.
5. Software Interfaces :- Technologies and frameworks used (Flask, Django, SQLite,
Pygame), API and backend integration details.
6. Communication Protocols :- Explanation of client-server communication, security
mechanisms and encryption techniques.
7. Security and Performance Considerations :-Measures taken for secure user
authentication, performance optimization strategies.
8. User Interfaces :-Screenshots of key UI components, description of user navigation.
9. Report Formats Used :- Types of reports generated (Student Progress, Quiz Results,
System Activity), how these reports help in analysis and decision-making.
10. Drawbacks and Limitations :-Challenges faced in the project, current system
limitations.
11. Proposed Enhancements :- Future improvements for better user experience and
performance.
12. Conclusion :- Summary of project impact and future potential.
13. Bibliography:- References to books, research papers, and online sources used in
development.

28
CHAPTER 4
DRAWBACKS AND LIMITATIONS

While LEARNIFY is an effective e-learning platform with interactive features like


quizzes, coding execution, and gamification, it also has certain drawbacks and
limitations that impact user experience and system performance. Below, we categorize
the drawbacks and limitations separately to understand the challenges better.
1. Drawbacks of LEARNIFY
● Performance Issues
○ The platform consumes high system resources, especially for code
execution and Pygame-based activities.
○ Running multiple interactive features simultaneously may slow down
the application.
○ Lag in quiz and coding execution responses can affect the user
experience.
○ Heavy graphical components in Pygame may cause delays on lower-end
devices.
● Limited User Engagement Features
○ Lack of personalized learning paths based on individual progress.
○ No social learning features like discussion forums or peer collaboration.
○ Limited customization options for theme, font size, and accessibility
settings.
○ Gamification elements are minimal, with only chess as an interactive
learning method.
● Security Concerns
○ Basic user authentication methods(login/password) need additional
layers like multi-factor authentication (MFA).
○ Code execution poses risks of infinite loops or malicious input,
requiring better sandboxing.
○ No encryption for quiz answers and user progress data, which could be
exploited.
○ Possible vulnerabilities to SQL Injection or Cross-Site Scripting (XSS)
attacks in database interactions.
● Lack of Offline Mode
○ Requires a stable internet connection for learning, limiting accessibility
in low-connectivity areas.
○ Quizzes, lessons, and coding exercises cannot be accessed offline.
○ No downloadable content for users who want to study without internet
access.
○ No local storage support for saving progress and syncing when online.

29
2. Limitations of LEARNIFY
● Scalability Issues
○ Database performance may degrade as more users enroll and submit
data.
○ Limited capability to handle large concurrent users accessing lessons
and quizzes.
○ Server load increases when multiple users execute code simultaneously.
○ Needs cloud-based optimization for better scalability.
● Compatibility Restrictions
○ Limited mobile responsiveness—some interactive features do not work
well on smartphones.
○ The platform is optimized for desktop/laptop users, making it less
accessible for mobile learners.
○ Pygame-based features require a graphical interface, limiting usage on
basic systems.
○ Browser-dependent features may not function the same across different
web browsers.
● Limited Administrative Controls
○ Admin panel lacks advanced analytics for tracking student progress
effectively.
○ No custom grading system for quizzes and assignments.
○ No role-based access control—all admins have the same permissions.
○ Course creation tools are basic and do not allow multimedia-rich content
integration.
● Dependency on Third-Party Libraries
○ Uses Pygame for gamification, which may not be suitable for all
devices.
○ Relies on third-party code execution APIs, which could introduce
security and performance concerns.
○ Frequent library updates might break compatibility with older versions.
○ Limited customization options due to dependency on pre-built libraries.

While LEARNIFY provides an engaging online learning experience, it has drawbacks


related to performance, security, and accessibility and limitations in scalability,
compatibility, and administrative control. Addressing these issues through
optimization, security improvements, and better mobile support can significantly
enhance the platform’s usability and effectiveness.

30
CHAPTER 5
PROPOSED ENHANCEMENTS

LEARNIFY is a feature-rich e-learning platform that integrates quizzes, coding


execution, and game-based learning to provide an engaging educational experience.
While the current system effectively delivers interactive learning, several
enhancements can improve performance, security, accessibility, and user engagement.
These proposed enhancements focus on expanding functionality, optimizing system
performance, and making learning more accessible to a wider audience.

1. Performance Optimization
To improve the platform’s speed and responsiveness, the following optimizations are
suggested:
● Efficient Code Execution: Implement a faster sandboxing system to execute
Python and C++ programs with minimal delay.
● Database Optimization: Use indexing and caching mechanisms to speed up
queries and enhance database performance.
● Asynchronous Processing: Reduce lag by executing quizzes, lessons, and code
in the background without blocking the UI.
● Optimized Pygame Graphics: Enhance game rendering efficiency to ensure a
smooth learning experience on low-end devices.
2. Security Enhancements
Security is a crucial aspect of any online learning platform. To make LEARNIFY
more secure, the following improvements are proposed:
● Multi-Factor Authentication (MFA): Strengthen user authentication by
requiring an additional verification step during login.
● Data Encryption: Secure user credentials, quiz results, and code submissions
using advanced encryption methods.
● Improved Code Execution Security: Implement stricter sandboxing policies to
prevent unauthorized code execution and hacking attempts.
● Regular Security Audits: Conduct frequent vulnerability scans to protect
against SQL injection, XSS attacks, and unauthorized access.
3. Offline Learning Support
Many learners face internet connectivity issues, limiting their access to the platform.
To address this, the following offline features can be implemented:
● Downloadable Lessons and Quizzes: Allow users to save educational content
locally for offline access.
● Local Progress Storage: Enable students to track their learning offline and sync
their progress once they reconnect to the internet.

31
● Offline Code Editor: Provide a built-in code editor for users to practice
programming without an active internet connection.
● Exportable Quiz Results: Let students export and review their quiz scores and
answers for offline study.
4. Enhanced Gamification and User Engagement
To increase student motivation and engagement, the following gamification
enhancements are suggested:
● Points and Rewards System: Introduce a badge and leaderboard system to
encourage students to complete lessons and challenges.
● Interactive Coding Challenges: Add real-world coding problems and
hackathon-style competitions to make learning more dynamic.
● Expanded Pygame-Based Learning: Include additional educational games
beyond chess to improve logic and problem-solving skills.
● Peer Collaboration Features: Implement discussion forums, group quizzes, and
coding collaborations to promote social learning.

These proposed enhancements will significantly improve LEARNIFY’s performance,


security, accessibility, and user engagement. By integrating offline access, advanced
security, optimized performance, and interactive gamification, the platform can
provide a more inclusive, secure, and engaging learning experience. Continuous
innovation in these areas will make LEARNIFY a leading e-learning solution for
students and educators worldwide.

32
CHAPTER 6
CONCLUSION

LEARNIFY is an innovative e-learning platform that combines structured learning, interactive


quizzes, real-time coding execution, and gamification to enhance the educational experience. By
integrating Python, Pygame, and database management, the platform provides a seamless
environment for students to learn, practice, and assess their skills. The inclusion of a code
execution feature allows users to test their programming knowledge instantly, while gamified
learning through chess improves logical thinking and engagement.
Throughout the development process, LEARNIFY has successfully implemented user
authentication, lesson management, quiz evaluation, and an admin dashboard. These features
ensure that both students and administrators can efficiently interact with the system. The user-
friendly interface makes navigation intuitive, allowing learners to focus on content rather than
technical complexities. Additionally, the platform provides a progress tracking mechanism,
enabling students to monitor their learning journey.
Despite its success, the project faced several challenges, including performance limitations,
security concerns, and scalability constraints. The real-time code execution feature requires
strong sandboxing to prevent security risks, and the Pygame-based learning module can demand
high system resources, causing lag on low-end devices. Moreover, the platform relies heavily on
internet connectivity, limiting accessibility for users in remote areas. Addressing these issues in
future iterations will make the system more efficient and widely accessible.
To enhance the platform further, several improvements can be introduced, such as offline access
to lessons, multi-factor authentication for better security, and mobile compatibility for a wider
user base. Expanding the gamification features and adding more interactive learning modules
will also boost user engagement. These enhancements will contribute to making LEARNIFY a
more robust and scalable e-learning solution.
In conclusion, LEARNIFY is a promising step toward modernizing digital learning by
combining structured lessons, real-time coding practice, and game-based education. It bridges
the gap between traditional learning methods and interactive technology, providing an engaging
and effective educational experience. LEARNIFY bridges the gap between traditional learning
methods and modern technology by providing an interactive, engaging, and practical
educational experience. With continuous improvements in performance, security, and usability,
the platform has the potential to become a widely adopted tool for digital learning, helping
students enhance their knowledge effectively.

33
CHAPTER 7
BIBLIOGRAPHY

The development of LEARNIFY was based on extensive research, utilizing books, research
papers, online documentation, technical blogs, and open-source resources. The following
sources provided valuable insights into e-learning technologies, programming languages,
database management, and gamification techniques.
1. Books and Research Papers
● Sharma, A. E-Learning and Digital Education: A Modern Approach*, Springer, 2021.
○ Discusses advancements in digital learning platforms and interactive learning
methodologies.
● Bloom, B. S. Taxonomy of Educational Objectives: The Classification of Educational
Goals, Longman, 1984.
○ Explores learning models and evaluation techniques used in digital education.
● Mayer, R. Multimedia Learning*, Cambridge University Press, 2009.
○ Covers cognitive learning theories and the impact of multimedia on student
engagement.
● Patel, J. Enhancing Student Engagement with Gamified Learning, E-Learning Journal,
2022.
○ Focuses on gamification techniques to improve student participation and
motivation.
● Verma, S. The Role of Coding Platforms in Digital Education, TechLearning Blog,
2021.
○ Examines the benefits of integrating coding execution within online learning
systems.
● Thompson, M. How AI and Automation Improve E-Learning Platforms, EdTech
Review, 2023.
○ Discusses the use of AI in personalizing learning experiences and automating
assessments.
2. Online Documentation and Technical References
● Python Software Foundation, Python 3 Documentation, [https://docs.python.org/3]
(https://docs.python.org/3/)
○ Official documentation for Python programming, covering syntax, libraries, and
best practices.
● Pygame Developers, Pygame Official Documentation, [https://www.pygame.org/doc]
(https://www.pygame.org/docs/)
○ Provides guidelines for developing interactive games used in gamified learning.
● SQLite Documentation, SQLite Database Management,
[https://www.sqlite.org/docs.html](https://www.sqlite.org/docs.html)

34
○ Explains database structures, queries, and optimization techniques* for managing
learning data.
● Django Documentation, Django Web Framework Guide,
[https://docs.djangoproject.com/](https://docs.djangoproject.com/)
○ Covers the backend framework used for user authentication, course management,
and data handling.
● Flask Documentation, Flask Web Framework, [https://flask.palletsprojects.com/]
(https://flask.palletsprojects.com/)
○ Guides on building lightweight APIs for handling user interactions in
LEARNIFY.
3. Articles, Blogs, and Research Papers
● E-Learning Industry Blog, The Future of Online Learning, 2023.
○ Discusses trends in digital education and the impact of AI-driven learning
systems.
● GeeksforGeeks, Python Programming and Data Structures,
[https://www.geeksforgeeks.org/](https://www.geeksforgeeks.org/)
○ Provides in-depth tutorials on Python programming, data structures, and
algorithm development.
● Stack Overflow, Community Discussions on E-Learning Development,
[https://stackoverflow.com/](https://stackoverflow.com/)
○ Features solutions to common coding challenges faced during project
implementation.
● W3Schools, HTML, CSS, and JavaScript Tutorials, [https://www.w3schools.com/]
(https://www.w3schools.com/)
○ Guides on front-end development techniques for building an interactive user
interface.
● Coursera Research, Gamification in Online Learning, 2022.
○ Examines the effectiveness of game-based learning in improving retention rates.
● IEEE Research Paper, Improving Student Performance Through Interactive Learning,
2021.
○ Discusses best practices for integrating interactivity in educational software.
4. Open-Source Resources and Community Contributions
● GitHub Repositories, Python-Based Learning Management Systems,
[https://github.com/](https://github.com/)
○ Provides open-source code for developing educational applications.
● Mozilla Developer Network (MDN), JavaScript and Web Development Best Practices*,
[https://developer.mozilla.org/](https://developer.mozilla.org/)
○ Covers advanced JavaScript and CSS techniques for enhancing user experience.
● Kaggle Datasets, Educational Data for Machine Learning in E-Learning,
[https://www.kaggle.com/](https://www.kaggle.com/)
○ Offers real-world datasets to analyze student behavior and learning outcomes.

35
● Google Developers, Firebase for Web Applications, [https://firebase.google.com/]
(https://firebase.google.com/)
○ Explains real-time database integration for managing user progress.
● OpenAI Blog, Using AI to Enhance Digital Education, 2023.
○ Explores how AI-driven tools can personalize learning experiences.

This bibliography includes a combination of books, online documentation, technical blogs, and
research papers, which were instrumental in shaping LEARNIFY’s development. By
referencing programming frameworks, database management techniques, gamification methods,
and security best practices, the project ensures an engaging, secure, and scalable e-learning
platform.

36
Chapter 8
Annexure

8.1. User Interface Screens


● Login & Registration Screens
○ Login Screen → Fields: Email, Password, Login Button
○ Registration Screen → Fields: Name, Email, Password, Role Selection
(User/Admin)
● Dashboard Screens
○ User Dashboard → Shows enrolled courses, quiz progress, coding
exercises, and chess game
○ Admin Dashboard → Manages courses, quizzes, users, and chess game
logs
● Course Management Screens
○ Course List Page → Displays available courses
○ Course Details Page → Course description, lessons, quizzes, coding
exercises
● Lesson Screens
○ Lesson Viewing Page → Displays text, video, or content for a lesson
● Quiz Screens
○ Quiz List Page → Lists quizzes available for a course
○ Quiz Attempt Page → Displays quiz questions with answer options
● Coding Exercise Screens
○ Exercise List Page → Displays all coding challenges
○ Code Submission Page → Code editor, run button, execution result
● Chess Game Screens
○ Game Selection Page → Choose opponent (AI or another user)
○ Chess Game Interface → Chessboard, move history, timer
● Profile & History Screens
○ User Profile Page → Name, email, completed courses, quiz scores
○ Attempt History Page → Quiz scores, coding submissions, chess game
results

37
8.2. Output Reports with Data
The project generates several reports that help track user activity, learning progress, quiz
performance, coding submissions, and chess game results. These reports provide insights into
course engagement, user achievements, and overall system performance.

● User Enrollment Report – Displays details about users and the courses they have
enrolled in. It includes information such as the user’s name, the course they are taking,
and their progress percentage. This report helps administrators monitor student
engagement and identify those who may need additional support.
Example:

User ID Name Course Name Progress

101 John Doe Python Basics 75%

● Course Completion Report – Lists users who have successfully completed their courses
along with their final scores. This report is useful for both students and instructors as it
reflects learning outcomes and helps in evaluating the effectiveness of the course
content.
Example:

User ID Name Course Name Score Status

102 Jane Smith Web Development 90% Completed

● Quiz Performance Report – Records quiz attempts, showing the scores achieved by
users and whether they passed or failed. This report assists instructors in understanding
how well students are grasping the concepts. It also helps users track their progress and
identify areas that need improvement.
Example:

User ID Quiz Name Score Status

103 Python Functions 85% Pass

● Coding Exercise Report – Logs all user submissions, including the status of their
solutions. It helps track which coding exercises have been attempted, which ones were
successfully completed, and where users faced difficulties. This is particularly useful for
programming courses where practical coding tasks are a significant part of the learning
process.
Example:

38
Submission ID User Name Exercise Name Status

201 Mark Wilson | Pandas Task Passed

● Chess Game Report – Logs chess matches, players, and winners.


Example:

Game ID Player 1 Player 2 Winner

301 John Doe Jane Smith John Doe

● System Usage Report – Summarizes platform activity by displaying metrics such as the
total number of registered users, the number of courses available, and the number of
completed activities. This report provides an overall view of how well the platform is
performing and helps administrators make data-driven decisions to improve the system.
Example:

Metric Count

Total Users 150

Total Courses 20

These reports play a crucial role in analyzing the effectiveness of the platform, ensuring user
engagement, and improving the learning experience based on data insights.

39
8.3. Program Code
1. Homepage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Environment</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap"
rel="stylesheet">
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */

40
padding: 20px 0;
text-align: left;
}
.nav-links {
position: absolute;
right: 20px;
top: 30px;
bottom: 20px;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 100vh;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: var(--golden-color);
}
.sidebar a.active {
background-color:var(--golden-color);
}
/* Center content */
.content {
margin-left: 250px;
padding: 50px;
text-align: center;
flex: 1;

41
}
.content h1 {
font-size: 110px;
font-family: 'Brush Script MT', cursive;
color: var(--golden-color);
overflow: hidden; /* Ensures content is hidden while typing */
white-space: nowrap; /* Prevents text from wrapping */
border-right: 2px solid #333; /* Creates the typing cursor */
width: fit-content;
margin-left: 400px;
margin-top: 200px;
margin-bottom: 100px;
animation: typing 4s steps(30, end), blink 0.5s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 58%;
}
}
@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
.content p {
margin-top: 20px;
font-size: 18px;
color: #555;
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;

42
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
}
</style>
</head >
<body>

<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>

<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>

<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>
<a href="LEARNIFY\pygameChess-main\templates\index.html">Game</a>
</div>

<span class="content">
<h1>Welcome to the Learnify<br></h1>
</span>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></
script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

43
44
2. Learning.html

<!DOCTYPE html>
<html>
<head>
<title>Combined Lectures</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}

body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;
text-align: left;

45
.nav-links {
position: absolute;
right: 20px;
top: 30px;
bottom: 20px;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 100vh;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: var(--golden-color);
}
.sidebar a.active {
background-color:var(--golden-color);
}
body {
font-family: sans-serif;
background-image: url('learning.jpeg'); /* Update as needed */
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.9;
}

46
.container {
width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 600px;
padding: 50px;
text-align: center;
flex: 1;
}
.container h2 {
text-align: center;
display: block;
width: 100%;
font-size: 70px;
color: var(--golden-color);
font-family: 'Brush Script MT', cursive;
margin: 50px auto; /* Centers it */
}
h1 {
margin-bottom: 30px;
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);

47
}
a{
text-decoration: none;
color: white;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 58%;
}
}

@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
</style>
</head>
<body>
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>
<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>

<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>
<a href="pygameChess-main\index.html">Game</a>
</div>

48
<div class="container">
<h2>Welcome to the Learning Portal</h2>
<button class="btn-custom" onclick="window.location.href='cpp.html';">CPP</button>
<button class="btn-custom" onclick="window.location.href='c++.html';">C++ </button>
<button class="btn-custom"
onclick="window.location.href='html&css.html';">HTML</button>
<button class="btn-custom" onclick="window.location.href='python.html';">Python </button>
<button class="btn-custom" onclick="window.location.href='java.html';">Java </button>
</div>
</body>
</html>

49
3. Quiz.html
<!DOCTYPE html>
<html>
<head>
<title>Combined Quizzes</title>
<link rel="stylesheet" href =
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;
text-align: left;
}
.nav-links {
position: absolute;

50
right: 20px;
top: 30px;
bottom: 20px;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 100vh;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: var(--golden-color);
}
.sidebar a.active {
background-color:var(--golden-color);
}
body {
font-family: sans-serif;
background-image: url('learning.jpeg'); /* Update as needed */
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.9;
}
.container {
width: 600px;
margin: 50px auto;

51
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 600px;
padding: 50px;
text-align: center;
flex: 1;
}
.container h2 {
text-align: center;
display: block;
width: 100%;
font-size: 70px;
color: var(--golden-color);
font-family: 'Brush Script MT', cursive;
margin: 50px auto; /* Centers it */
}
h1 {
margin-bottom: 30px;
}
h2 {
color: var(--golden-color);
margin-left: 15px;
text-align:center;
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);

52
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);
}
a{
text-decoration: none;
color: white;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 58%;
}
}

@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
</style>
</head>
<body>
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>

<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>
<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>

53
<a href="pygameChess-main\index.html">Game</a>
</div>
<div class="container">
<h2>Welcome to the Quiz Portal</h2>
<button class="btn-custom" onclick="window.location.href='cpp_quiz.html';">CPP
Programming Quiz</button>
<button class="btn-custom" onclick="window.location.href='c++_quiz.html';">C++
Programming Quiz</button>
<button class="btn-custom" onclick="window.location.href='html_quiz.html';">HTML
Quiz</button>
<button class="btn-custom" onclick="window.location.href='python_quiz.html';">Python
Quiz</button>
<button class="btn-custom" onclick="window.location.href='java_quiz.html';">Java
Quiz</button>
</div>
</body>
</html>

54
55
4. Compiler.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Compilers</title>
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}

body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;
text-align: left;

56
.nav-links {
position: absolute;
right: 20px;
top: 30px;
bottom: 20px;
}
h2 {
color: var(--golden-color);
margin-left: 15px;
text-align:center;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 130vh;
}

.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
/* position:fixed; */

.sidebar a:hover {
background-color: var(--golden-color);
}

.sidebar a.active {
background-color:var(--golden-color);

57
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);
}
a{
text-decoration: none;
color: white;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('https://www.transparenttextures.com/patterns/black-paper.png');
/* Background image */
background-size: cover;
color: #fff; /* Text color */
}
h1 {
/* text-align: center; */
margin-top: 20px;
color: #4CAF50; /* Header color */
}
h3 {
color: var(--black-color);
margin-left: 15px;
text-align:center;
}

58
.button-container {
width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 550px;
text-align: center;
flex: 1;
}
button {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
button:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);
}
.compiler-container {
width: 1150px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 250px;
padding: 50px;
text-align: center;
flex: 1;

59
display: none; /* Hide all compilers initially
width: 80%;*/
height: calc(100vh - 100px); /* Full height minus header and buttons */
border: 1px solid #ccc;
border-radius: 5px;
}
iframe {
width: 100%;
height: 90%;
border: none;
}
.active {
display: block; /* Show the active compiler */
}
</style>
</head>
<body>
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>
<h2>Online Compilers</h2>
<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>
<div class="sidebar">
<a href="combinedlearning.html">Learn</a><br>
<a href="combined quiz page.html">Quiz</a><br>
<a href="compiler.html">Practice Compiler</a><br>
<a href="help.html">AI Assistance</a><br>
<a href="pygameChess-main\index.html">Game</a><br>
</div>

<div class="button-container">
<button onclick="showCompiler('python')">Python Compiler</button>
<button onclick="showCompiler('java')">Java Compiler</button>
<button onclick="showCompiler('c_cpp')">C/C++ Compiler</button>
</div>
<div id="java" class="compiler-container">
<h3>Java Compiler</h3>

60
<iframe src="https://www.jdoodle.com/online-java-compiler" title="Java Compiler"></iframe>
</div>
<div id="python" class="compiler-container active">
<h3>Python Compiler</h3>
<iframe src="https://www.programiz.com/python-programming/online-compiler/"
title="Python Compiler"></iframe>
</div>

<div id="c_cpp" class="compiler-container">


<h3>C/C++ Compiler</h3>
<iframe src="https://www.jdoodle.com/c-online-compiler" title="C/C++ Compiler"></iframe>
</div>

<script>
function showCompiler(compiler) {
// Hide all compilers
const compilers = document.querySelectorAll('.compiler-container');
compilers.forEach(comp => {
comp.classList.remove('active');
});
// Show the selected compiler
document.getElementById(compiler).classList.add('active');
}
</script>
</body>
</html>

61
62
63
5. Help.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Helper Tools</title>
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}

body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;
text-align: left;

64
.nav-links {
position: absolute;
right: 20px;
top: 30px;
bottom: 20px;

}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 130vh;
}

.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}

.sidebar a:hover {
background-color: var(--golden-color);
}

.sidebar a.active {
background-color:var(--golden-color);
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;

65
background-image: url('https://www.transparenttextures.com/patterns/black-paper.png');
/* Background image */
background-size: cover;
color: #fff; /* Text color */
}
h1 {
margin-top: 20px;
color: #4CAF50;
}
h2 {
color: var(--golden-color);
margin-left: 15px;
text-align:center;
}
h3 {
color: var(--black-color);
margin-left: 15px;
text-align:center;
}
.button-container {
width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 550px;
text-align: center;
flex: 1;
}
button {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 8px;
align-items: center;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;

66
cursor: pointer;
}
button:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);
}
.helper-container {
width: 1150px;
/* margin: 50px auto; */
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
margin-left: 250px;
padding: 50px;
text-align: center;
flex: 1;
display: none; /* Hide all helpers initially */
height: calc(100vh - 100px); /* Full height minus header and buttons */
border: 1px solid #ccc;
border-radius: 5px;
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);

67
iframe {
width: 100%;
height: 90%;
border: none;
}
.active {
display: block; /* Show the active helper */
}
</style>
</head>
<body>
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>
<h2>Helper Tools</h2>
<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>

<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>
<a href="pygameChess-main\index.html">Game</a>
</div>

<div class="button-container">
<button onclick="showHelper('blackbox')">AI Assitance for Code</button>
<button onclick="showHelper('grammarly')">Content Modification Helper</button>
<button onclick="showHelper('quillbot')">Plagrism Checker</button>
</div>

<div id="blackbox" class="helper-container active">


<h3>AI Assitance for Code</h3>
<iframe src="https://blackbox.ai/" title="Blackbox"></iframe>
</div>

<div id="grammarly" class="helper-container">

68
<h3>Content Modification Helper</h3>
<iframe src="https://www.gingersoftware.com/grammarcheck" title="Grammarly"></iframe>
</div>
<div id="quillbot" class="helper-container">
<h3>Plagrism Checker</h3>
<iframe src="https://smallseotools.com/plagiarism-checker/" title="QuillBot"></iframe>
</div>
<script>
function showHelper(helper) {
// Hide all helpers
const helpers = document.querySelectorAll('.helper-container');
helpers.forEach(h => {
h.classList.remove('active');
});

// Show the selected helper


document.getElementById(helper).classList.add('active');
}
</script>
</body>
</html>

69
70
71
6. Chess
● addition.py
# two player chess in python with Pygame!
# pawn double space checking
# castling
# en passant
# pawn promotion

import pygame
from constants import *
pygame.init()
# draw main game board
def draw_board():
for i in range(32):
column = i % 4
row = i // 4
if row % 2 == 0:
pygame.draw.rect(screen, 'light gray', [600 - (column * 200), row * 100, 100, 100])
else:
pygame.draw.rect(screen, 'light gray', [700 - (column * 200), row * 100, 100, 100])
pygame.draw.rect(screen, 'gray', [0, 800, WIDTH, 100])
pygame.draw.rect(screen, 'gold', [0, 800, WIDTH, 100], 5)
pygame.draw.rect(screen, 'gold', [800, 0, 200, HEIGHT], 5)
status_text = ['White: Select a Piece to Move!', 'White: Select a Destination!',
'Black: Select a Piece to Move!', 'Black: Select a Destination!']
screen.blit(big_font.render(status_text[turn_step], True, 'black'), (20, 820))
for i in range(9):
pygame.draw.line(screen, 'black', (0, 100 * i), (800, 100 * i), 2)
pygame.draw.line(screen, 'black', (100 * i, 0), (100 * i, 800), 2)
screen.blit(medium_font.render('FORFEIT', True, 'black'), (810, 830))
if white_promote or black_promote:
pygame.draw.rect(screen, 'gray', [0, 800, WIDTH - 200, 100])
pygame.draw.rect(screen, 'gold', [0, 800, WIDTH - 200, 100], 5)
screen.blit(big_font.render('Select Piece to Promote Pawn', True, 'black'), (20, 820))

# draw pieces onto board


def draw_pieces():
for i in range(len(white_pieces)):
index = piece_list.index(white_pieces[i])
if white_pieces[i] == 'pawn':
screen.blit(white_pawn, (white_locations[i][0] * 100 + 22, white_locations[i][1] * 100 +
30))

72
else:
screen.blit(white_images[index], (white_locations[i][0] * 100 + 10, white_locations[i][1]
* 100 + 10))
if turn_step < 2:
if selection == i:
pygame.draw.rect(screen, 'red', [white_locations[i][0] * 100 + 1, white_locations[i][1]
* 100 + 1, 100, 100], 2)
for i in range(len(black_pieces)):
index = piece_list.index(black_pieces[i])
if black_pieces[i] == 'pawn':
screen.blit(black_pawn, (black_locations[i][0] * 100 + 22, black_locations[i][1] * 100 +
30))
else:
screen.blit(black_images[index], (black_locations[i][0] * 100 + 10, black_locations[i][1]
* 100 + 10))
if turn_step >= 2:
if selection == i:
pygame.draw.rect(screen, 'blue', [black_locations[i][0] * 100 + 1, black_locations[i][1]
* 100 + 1,100, 100], 2)
# function to check all pieces valid options on board
def check_options(pieces, locations, turn):
global castling_moves
moves_list = []
all_moves_list = []
castling_moves = []
for i in range((len(pieces))):
location = locations[i]
piece = pieces[i]
if piece == 'pawn':
moves_list = check_pawn(location, turn)
elif piece == 'rook':
moves_list = check_rook(location, turn)
elif piece == 'knight':
moves_list = check_knight(location, turn)
elif piece == 'bishop':
moves_list = check_bishop(location, turn)
elif piece == 'queen':
moves_list = check_queen(location, turn)
elif piece == 'king':
moves_list, castling_moves = check_king(location, turn)
all_moves_list.append(moves_list)
return all_moves_list

73
# check king valid moves
def check_king(position, color):
moves_list = []
castle_moves = check_castling()
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
# 8 squares to check for kings, they can go one square any direction
targets = [(1, 0), (1, 1), (1, -1), (-1, 0), (-1, 1), (-1, -1), (0, 1), (0, -1)]
for i in range(8):
target = (position[0] + targets[i][0], position[1] + targets[i][1])
if target not in friends_list and 0 <= target[0] <= 7 and 0 <= target[1] <= 7:
moves_list.append(target)
return moves_list, castle_moves

# check queen valid moves


def check_queen(position, color):
moves_list = check_bishop(position, color)
second_list = check_rook(position, color)
for i in range(len(second_list)):
moves_list.append(second_list[i])
return moves_list

# check bishop moves


def check_bishop(position, color):
moves_list = []
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
for i in range(4): # up-right, up-left, down-right, down-left
path = True
chain = 1
if i == 0:
x=1
y = -1
elif i == 1:

74
x = -1
y = -1
elif i == 2:
x=1
y=1
else:
x = -1
y=1
while path:
if (position[0] + (chain * x), position[1] + (chain * y)) not in friends_list and \0 <=
position[0] + (chain * x) <= 7 and 0 <= position[1] + (chain * y) <= 7:
moves_list.append((position[0] + (chain * x), position[1] + (chain * y)))
if (position[0] + (chain * x), position[1] + (chain * y)) in enemies_list:
path = False
chain += 1
else:
path = False
return moves_list

# check rook moves


def check_rook(position, color):
moves_list = []
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
for i in range(4): # down, up, right, left
path = True
chain = 1
if i == 0:
x=0
y=1
elif i == 1:
x=0
y = -1
elif i == 2:
x=1
y=0
else:

75
x = -1
y=0
while path:
if (position[0] + (chain * x), position[1] + (chain * y)) not in friends_list and \
0 <= position[0] + (chain * x) <= 7 and 0 <= position[1] + (chain * y) <= 7:
moves_list.append((position[0] + (chain * x), position[1] + (chain * y)))
if (position[0] + (chain * x), position[1] + (chain * y)) in enemies_list:
path = False
chain += 1
else:
path = False
return moves_list

# check valid pawn moves


def check_pawn(position, color):
moves_list = []
if color == 'white':
if (position[0], position[1] + 1) not in white_locations and \
(position[0], position[1] + 1) not in black_locations and position[1] < 7:
moves_list.append((position[0], position[1] + 1))
# indent the check for two spaces ahead, so it is only checked if one space ahead is also open
if (position[0], position[1] + 2) not in white_locations and \
(position[0], position[1] + 2) not in black_locations and position[1] == 1:
moves_list.append((position[0], position[1] + 2))
if (position[0] + 1, position[1] + 1) in black_locations:
moves_list.append((position[0] + 1, position[1] + 1))
if (position[0] - 1, position[1] + 1) in black_locations:
moves_list.append((position[0] - 1, position[1] + 1))
# add en passant move checker
if (position[0] + 1, position[1] + 1) == black_ep:
moves_list.append((position[0] + 1, position[1] + 1))
if (position[0] - 1, position[1] + 1) == black_ep:
moves_list.append((position[0] - 1, position[1] + 1))
else:
if (position[0], position[1] - 1) not in white_locations and \
(position[0], position[1] - 1) not in black_locations and position[1] > 0:
moves_list.append((position[0], position[1] - 1))
# indent the check for two spaces ahead, so it is only checked if one space ahead is also
open
if (position[0], position[1] - 2) not in white_locations and \
(position[0], position[1] - 2) not in black_locations and position[1] == 6:
moves_list.append((position[0], position[1] - 2))

76
if (position[0] + 1, position[1] - 1) in white_locations:
moves_list.append((position[0] + 1, position[1] - 1))
if (position[0] - 1, position[1] - 1) in white_locations:
moves_list.append((position[0] - 1, position[1] - 1))
# add en passant move checker
if (position[0] + 1, position[1] - 1) == white_ep:
moves_list.append((position[0] + 1, position[1] - 1))
if (position[0] - 1, position[1] - 1) == white_ep:
moves_list.append((position[0] - 1, position[1] - 1))
return moves_list

# check valid knight moves


def check_knight(position, color):
moves_list = []
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
# 8 squares to check for knights, they can go two squares in one direction and one in another
targets = [(1, 2), (1, -2), (2, 1), (2, -1), (-1, 2), (-1, -2), (-2, 1), (-2, -1)]
for i in range(8):
target = (position[0] + targets[i][0], position[1] + targets[i][1])
if target not in friends_list and 0 <= target[0] <= 7 and 0 <= target[1] <= 7:
moves_list.append(target)
return moves_list

# check for valid moves for just selected piece


def check_valid_moves():
if turn_step < 2:
options_list = white_options
else:
options_list = black_options
valid_options = options_list[selection]
return valid_options

# draw valid moves on screen


def draw_valid(moves):
if turn_step < 2:
color = 'red'
else:

77
color = 'blue'
for i in range(len(moves)):
pygame.draw.circle(screen, color, (moves[i][0] * 100 + 50, moves[i][1] * 100 + 50), 5)

# draw captured pieces on side of screen


def draw_captured():
for i in range(len(captured_pieces_white)):
captured_piece = captured_pieces_white[i]
index = piece_list.index(captured_piece)
screen.blit(small_black_images[index], (825, 5 + 50 * i))
for i in range(len(captured_pieces_black)):
captured_piece = captured_pieces_black[i]
index = piece_list.index(captured_piece)
screen.blit(small_white_images[index], (925, 5 + 50 * i))

# draw a flashing square around king if in check


def draw_check():
global check
check = False
if turn_step < 2:
if 'king' in white_pieces:
king_index = white_pieces.index('king')
king_location = white_locations[king_index]
for i in range(len(black_options)):
if king_location in black_options[i]:
check = True
if counter < 15:
pygame.draw.rect(screen, 'dark red', [white_locations[king_index][0] * 100 + 1,
white_locations[king_index][1] * 100 + 1, 100, 100], 5)
else:
if 'king' in black_pieces:
king_index = black_pieces.index('king')
king_location = black_locations[king_index]
for i in range(len(white_options)):
if king_location in white_options[i]:
check = True
if counter < 15:
pygame.draw.rect(screen, 'dark blue', [black_locations[king_index][0] * 100 + 1,
black_locations[king_index][1] * 100 + 1, 100, 100], 5)

def draw_game_over():
pygame.draw.rect(screen, 'black', [200, 200, 400, 70])

78
screen.blit(font.render(f'{winner} won the game!', True, 'white'), (210, 210))
screen.blit(font.render(f'Press ENTER to Restart!', True, 'white'), (210, 240))

# check en passant because people on the internet won't stop bugging me for it
def check_ep(old_coords, new_coords):
if turn_step <= 1:
index = white_locations.index(old_coords)
ep_coords = (new_coords[0], new_coords[1] - 1)
piece = white_pieces[index]
else:
index = black_locations.index(old_coords)
ep_coords = (new_coords[0], new_coords[1] + 1)
piece = black_pieces[index]
if piece == 'pawn' and abs(old_coords[1] - new_coords[1]) > 1:
# if piece was pawn and moved two spaces, return EP coords as defined above
pass
else:
ep_coords = (100, 100)
return ep_coords

# add castling
def check_castling():
# king must not currently be in check, neither the rook nor king has moved previously,
nothing between
# and the king does not pass through or finish on an attacked piece
castle_moves = [] # store each valid castle move as [((king_coords), (castle_coords))]
rook_indexes = []
rook_locations = []
king_index = 0
king_pos = (0, 0)
if turn_step > 1:
for i in range(len(white_pieces)):
if white_pieces[i] == 'rook':
rook_indexes.append(white_moved[i])
rook_locations.append(white_locations[i])
if white_pieces[i] == 'king':
king_index = i
king_pos = white_locations[i]
if not white_moved[king_index] and False in rook_indexes and not check:
for i in range(len(rook_indexes)):
castle = True

79
if rook_locations[i][0] > king_pos[0]:
empty_squares = [(king_pos[0] + 1, king_pos[1]), (king_pos[0] + 2, king_pos[1]),
(king_pos[0] + 3, king_pos[1])]
else:
empty_squares = [(king_pos[0] - 1, king_pos[1]), (king_pos[0] - 2, king_pos[1])]
for j in range(len(empty_squares)):
if empty_squares[j] in white_locations or empty_squares[j] in black_locations or \
empty_squares[j] in black_options or rook_indexes[i]:
castle = False
if castle:
castle_moves.append((empty_squares[1], empty_squares[0]))
else:
for i in range(len(black_pieces)):
if black_pieces[i] == 'rook':
rook_indexes.append(black_moved[i])
rook_locations.append(black_locations[i])
if black_pieces[i] == 'king':
king_index = i
king_pos = black_locations[i]
if not black_moved[king_index] and False in rook_indexes and not check:
for i in range(len(rook_indexes)):
castle = True
if rook_locations[i][0] > king_pos[0]:
empty_squares = [(king_pos[0] + 1, king_pos[1]), (king_pos[0] + 2, king_pos[1]),
(king_pos[0] + 3, king_pos[1])]
else:
empty_squares = [(king_pos[0] - 1, king_pos[1]), (king_pos[0] - 2, king_pos[1])]
for j in range(len(empty_squares)):
if empty_squares[j] in white_locations or empty_squares[j] in black_locations or \
empty_squares[j] in white_options or rook_indexes[i]:
castle = False
if castle:
castle_moves.append((empty_squares[1], empty_squares[0]))
return castle_moves

def draw_castling(moves):
if turn_step < 2:
color = 'red'
else:
color = 'blue'
for i in range(len(moves)):

80
pygame.draw.circle(screen, color, (moves[i][0][0] * 100 + 50, moves[i][0][1] * 100 + 70),
8)
screen.blit(font.render('king', True, 'black'), (moves[i][0][0] * 100 + 30, moves[i][0][1] *
100 + 70))
pygame.draw.circle(screen, color, (moves[i][1][0] * 100 + 50, moves[i][1][1] * 100 + 70),
8)
screen.blit(font.render('rook', True, 'black'),
(moves[i][1][0] * 100 + 30, moves[i][1][1] * 100 + 70))
pygame.draw.line(screen, color, (moves[i][0][0] * 100 + 50, moves[i][0][1] * 100 + 70),
(moves[i][1][0] * 100 + 50, moves[i][1][1] * 100 + 70), 2)

# add pawn promotion


def check_promotion():
pawn_indexes = []
white_promotion = False
black_promotion = False
promote_index = 100
for i in range(len(white_pieces)):
if white_pieces[i] == 'pawn':
pawn_indexes.append(i)
for i in range(len(pawn_indexes)):
if white_locations[pawn_indexes[i]][1] == 7:
white_promotion = True
promote_index = pawn_indexes[i]
pawn_indexes = []
for i in range(len(black_pieces)):
if black_pieces[i] == 'pawn':
pawn_indexes.append(i)
for i in range(len(pawn_indexes)):
if black_locations[pawn_indexes[i]][1] == 0:
black_promotion = True
promote_index = pawn_indexes[i]
return white_promotion, black_promotion, promote_index

def draw_promotion():
pygame.draw.rect(screen, 'dark gray', [800, 0, 200, 420])
if white_promote:
color = 'white'
for i in range(len(white_promotions)):
piece = white_promotions[i]
index = piece_list.index(piece)

81
screen.blit(white_images[index], (860, 5 + 100 * i))
elif black_promote:
color = 'black'
for i in range(len(black_promotions)):
piece = black_promotions[i]
index = piece_list.index(piece)
screen.blit(black_images[index], (860, 5 + 100 * i))
pygame.draw.rect(screen, color, [800, 0, 200, 420], 8)

def check_promo_select():
mouse_pos = pygame.mouse.get_pos()
left_click = pygame.mouse.get_pressed()[0]
x_pos = mouse_pos[0] // 100
y_pos = mouse_pos[1] // 100
if white_promote and left_click and x_pos > 7 and y_pos < 4:
white_pieces[promo_index] = white_promotions[y_pos]
elif black_promote and left_click and x_pos > 7 and y_pos < 4:
black_pieces[promo_index] = black_promotions[y_pos]

# main game loop


black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
run = True
while run:
timer.tick(fps)
if counter < 30:
counter += 1
else:
counter = 0
screen.fill('dark gray')
draw_board()
draw_pieces()
draw_captured()
draw_check()
if not game_over:
white_promote, black_promote, promo_index = check_promotion()
if white_promote or black_promote:
draw_promotion()
check_promo_select()
if selection != 100:

82
valid_moves = check_valid_moves()
draw_valid(valid_moves)
if selected_piece == 'king':
draw_castling(castling_moves)
# event handling
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
if event.type == pygame.MOUSEBUTTONDOWN and event.button == 1 and not
game_over:
x_coord = event.pos[0] // 100
y_coord = event.pos[1] // 100
click_coords = (x_coord, y_coord)
if turn_step <= 1:
if click_coords == (8, 8) or click_coords == (9, 8):
winner = 'black'
if click_coords in white_locations:
selection = white_locations.index(click_coords)
# check what piece is selected, so you can only draw castling moves if king is
selected
selected_piece = white_pieces[selection]
if turn_step == 0:
turn_step = 1
if click_coords in valid_moves and selection != 100:
white_ep = check_ep(white_locations[selection], click_coords)
white_locations[selection] = click_coords
white_moved[selection] = True
if click_coords in black_locations:
black_piece = black_locations.index(click_coords)
captured_pieces_white.append(black_pieces[black_piece])
if black_pieces[black_piece] == 'king':
winner = 'white'
black_pieces.pop(black_piece)
black_locations.pop(black_piece)
black_moved.pop(black_piece)
# adding check if en passant pawn was captured
if click_coords == black_ep:
black_piece = black_locations.index((black_ep[0], black_ep[1] - 1))
captured_pieces_white.append(black_pieces[black_piece])
black_pieces.pop(black_piece)
black_locations.pop(black_piece)
black_moved.pop(black_piece)

83
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
turn_step = 2
selection = 100
valid_moves = []
# add option to castle
elif selection != 100 and selected_piece == 'king':
for q in range(len(castling_moves)):
if click_coords == castling_moves[q][0]:
white_locations[selection] = click_coords
white_moved[selection] = True
if click_coords == (1, 0):
rook_coords = (0, 0)
else:
rook_coords = (7, 0)
rook_index = white_locations.index(rook_coords)
white_locations[rook_index] = castling_moves[q][1]
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
turn_step = 2
selection = 100
valid_moves = []
if turn_step > 1:
if click_coords == (8, 8) or click_coords == (9, 8):
winner = 'white'
if click_coords in black_locations:
selection = black_locations.index(click_coords)
# check what piece is selected, so you can only draw castling moves if king is
selected
selected_piece = black_pieces[selection]
if turn_step == 2:
turn_step = 3
if click_coords in valid_moves and selection != 100:
black_ep = check_ep(black_locations[selection], click_coords)
black_locations[selection] = click_coords
black_moved[selection] = True
if click_coords in white_locations:
white_piece = white_locations.index(click_coords)
captured_pieces_black.append(white_pieces[white_piece])
if white_pieces[white_piece] == 'king':
winner = 'black'
white_pieces.pop(white_piece)

84
white_locations.pop(white_piece)
white_moved.pop(white_piece)
if click_coords == white_ep:
white_piece = white_locations.index((white_ep[0], white_ep[1] + 1))
captured_pieces_black.append(white_pieces[white_piece])
white_pieces.pop(white_piece)
white_locations.pop(white_piece)
white_moved.pop(white_piece)
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
turn_step = 0
selection = 100
valid_moves = []
# add option to castle
elif selection != 100 and selected_piece == 'king':
for q in range(len(castling_moves)):
if click_coords == castling_moves[q][0]:
black_locations[selection] = click_coords
black_moved[selection] = True
if click_coords == (1, 7):
rook_coords = (0, 7)
else:
rook_coords = (7, 7)
rook_index = black_locations.index(rook_coords)
black_locations[rook_index] = castling_moves[q][1]
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
turn_step = 0
selection = 100
valid_moves = []
if event.type == pygame.KEYDOWN and game_over:
if event.key == pygame.K_RETURN:
game_over = False
winner = ''
white_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
white_locations = [(0, 0), (1, 0), (2, 0), (3, 0), (4, 0), (5, 0), (6, 0), (7, 0),
(0, 1), (1, 1), (2, 1), (3, 1), (4, 1), (5, 1), (6, 1), (7, 1)]
white_moved = [False, False, False, False, False, False, False, False,
False, False, False, False, False, False, False, False]
black_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']

85
black_locations = [(0, 7), (1, 7), (2, 7), (3, 7), (4, 7), (5, 7), (6, 7), (7, 7),
(0, 6), (1, 6), (2, 6), (3, 6), (4, 6), (5, 6), (6, 6), (7, 6)]
black_moved = [False, False, False, False, False, False, False, False,
False, False, False, False, False, False, False, False]
captured_pieces_white = []
captured_pieces_black = []
turn_step = 0
selection = 100
valid_moves = []
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')

if winner != '':
game_over = True
draw_game_over()

pygame.display.flip()
pygame.quit()

86
● Constant s.py
import pygame
pygame.init()

WIDTH = 1500
HEIGHT = 700
screen = pygame.display.set_mode([WIDTH, HEIGHT,pygame.RESIZABLE])
pygame.display.set_caption('Two-Player Pygame Chess!')
font = pygame.font.Font('freesansbold.ttf', 20)
medium_font = pygame.font.Font('freesansbold.ttf', 40)
big_font = pygame.font.Font('freesansbold.ttf', 50)
timer = pygame.time.Clock()
fps = 60
# game variables and images
white_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
white_locations = [(0, 0), (1, 0), (2, 0), (3, 0), (4, 0), (5, 0), (6, 0), (7, 0),
(0, 1), (1, 1), (2, 1), (3, 1), (4, 1), (5, 1), (6, 1), (7, 1)]
black_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
black_locations = [(0, 7), (1, 7), (2, 7), (3, 7), (4, 7), (5, 7), (6, 7), (7, 7),
(0, 6), (1, 6), (2, 6), (3, 6), (4, 6), (5, 6), (6, 6), (7, 6)]
captured_pieces_white = []
captured_pieces_black = []
# 0 - whites turn no selection: 1-whites turn piece selected: 2- black turn no selection, 3 - black
turn piece selected
turn_step = 0
selection = 100
valid_moves = []
# load in game piece images (queen, king, rook, bishop, knight, pawn) x 2
black_queen = pygame.image.load('assets/images/black queen.png')
black_queen = pygame.transform.scale(black_queen, (80, 80))
black_queen_small = pygame.transform.scale(black_queen, (45, 45))
black_king = pygame.image.load('assets/images/black king.png')
black_king = pygame.transform.scale(black_king, (80, 80))
black_king_small = pygame.transform.scale(black_king, (45, 45))
black_rook = pygame.image.load('assets/images/black rook.png')
black_rook = pygame.transform.scale(black_rook, (80, 80))
black_rook_small = pygame.transform.scale(black_rook, (45, 45))
black_bishop = pygame.image.load('assets/images/black bishop.png')
black_bishop = pygame.transform.scale(black_bishop, (80, 80))
black_bishop_small = pygame.transform.scale(black_bishop, (45, 45))

87
black_knight = pygame.image.load('assets/images/black knight.png')
black_knight = pygame.transform.scale(black_knight, (80, 80))
black_knight_small = pygame.transform.scale(black_knight, (45, 45))
black_pawn = pygame.image.load('assets/images/black pawn.png')
black_pawn = pygame.transform.scale(black_pawn, (65, 65))
black_pawn_small = pygame.transform.scale(black_pawn, (45, 45))
white_queen = pygame.image.load('assets/images/white queen.png')
white_queen = pygame.transform.scale(white_queen, (80, 80))
white_queen_small = pygame.transform.scale(white_queen, (45, 45))
white_king = pygame.image.load('assets/images/white king.png')
white_king = pygame.transform.scale(white_king, (80, 80))
white_king_small = pygame.transform.scale(white_king, (45, 45))
white_rook = pygame.image.load('assets/images/white rook.png')
white_rook = pygame.transform.scale(white_rook, (80, 80))
white_rook_small = pygame.transform.scale(white_rook, (45, 45))
white_bishop = pygame.image.load('assets/images/white bishop.png')
white_bishop = pygame.transform.scale(white_bishop, (80, 80))
white_bishop_small = pygame.transform.scale(white_bishop, (45, 45))
white_knight = pygame.image.load('assets/images/white knight.png')
white_knight = pygame.transform.scale(white_knight, (80, 80))
white_knight_small = pygame.transform.scale(white_knight, (45, 45))
white_pawn = pygame.image.load('assets/images/white pawn.png')
white_pawn = pygame.transform.scale(white_pawn, (65, 65))
white_pawn_small = pygame.transform.scale(white_pawn, (45, 45))
white_images = [white_pawn, white_queen, white_king, white_knight, white_rook,
white_bishop]
white_promotions = ['bishop', 'knight', 'rook', 'queen']
white_moved = [False, False, False, False, False, False, False, False,
False, False, False, False, False, False, False, False]
small_white_images = [white_pawn_small, white_queen_small, white_king_small,
white_knight_small,
white_rook_small, white_bishop_small]
black_images = [black_pawn, black_queen, black_king, black_knight, black_rook,
black_bishop]
small_black_images = [black_pawn_small, black_queen_small, black_king_small,
black_knight_small,
black_rook_small, black_bishop_small]
black_promotions = ['bishop', 'knight', 'rook', 'queen']
black_moved = [False, False, False, False, False, False, False, False,
False, False, False, False, False, False, False, False]
piece_list = ['pawn', 'queen', 'king', 'knight', 'rook', 'bishop']
# check variables/ flashing counter

88
counter = 0
winner = ''
game_over = False
white_ep = (100, 100)
black_ep = (100, 100)
white_promote = False
black_promote = False
promo_index = 100
check = False
castling_moves = []

● Main.py
# two player chess in python with Pygame!
# part one, set up variables images and game loop

import pygame

pygame.init()
WIDTH = 1500
HEIGHT = 700
screen = pygame.display.set_mode([WIDTH, HEIGHT],pygame.RESIZABLE)
pygame.display.set_caption('Two-Player Pygame Chess!')
font = pygame.font.Font('freesansbold.ttf', 20)
medium_font = pygame.font.Font('freesansbold.ttf', 40)
big_font = pygame.font.Font('freesansbold.ttf', 50)
timer = pygame.time.Clock()
fps = 60
# game variables and images
white_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
white_locations = [(0, 0), (1, 0), (2, 0), (3, 0), (4, 0), (5, 0), (6, 0), (7, 0),
(0, 1), (1, 1), (2, 1), (3, 1), (4, 1), (5, 1), (6, 1), (7, 1)]
black_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']

89
black_locations = [(0, 7), (1, 7), (2, 7), (3, 7), (4, 7), (5, 7), (6, 7), (7, 7),
(0, 6), (1, 6), (2, 6), (3, 6), (4, 6), (5, 6), (6, 6), (7, 6)]
captured_pieces_white = []
captured_pieces_black = []
# 0 - whites turn no selection: 1-whites turn piece selected: 2- black turn no selection, 3 - black
turn piece selected
turn_step = 0
selection = 100
valid_moves = []
# load in game piece images (queen, king, rook, bishop, knight, pawn) x 2
black_queen = pygame.image.load('static/images/black queen.png')
black_queen = pygame.transform.scale(black_queen, (80, 80))
black_queen_small = pygame.transform.scale(black_queen, (45, 45))
black_king = pygame.image.load('static/images/black king.png')
black_king = pygame.transform.scale(black_king, (80, 80))
black_king_small = pygame.transform.scale(black_king, (45, 45))
black_rook = pygame.image.load('static/images/black rook.png')
black_rook = pygame.transform.scale(black_rook, (80, 80))
black_rook_small = pygame.transform.scale(black_rook, (45, 45))
black_bishop = pygame.image.load('static/images/black bishop.png')
black_bishop = pygame.transform.scale(black_bishop, (80, 80))
black_bishop_small = pygame.transform.scale(black_bishop, (45, 45))
black_knight = pygame.image.load('static/images/black knight.png')
black_knight = pygame.transform.scale(black_knight, (80, 80))
black_knight_small = pygame.transform.scale(black_knight, (45, 45))
black_pawn = pygame.image.load('static/images/black pawn.png')
black_pawn = pygame.transform.scale(black_pawn, (65, 65))
black_pawn_small = pygame.transform.scale(black_pawn, (45, 45))
white_queen = pygame.image.load('static/images/white queen.png')
white_queen = pygame.transform.scale(white_queen, (80, 80))
white_queen_small = pygame.transform.scale(white_queen, (45, 45))
white_king = pygame.image.load('static/images/white king.png')
white_king = pygame.transform.scale(white_king, (80, 80))
white_king_small = pygame.transform.scale(white_king, (45, 45))
white_rook = pygame.image.load('static/images/white rook.png')
white_rook = pygame.transform.scale(white_rook, (80, 80))
white_rook_small = pygame.transform.scale(white_rook, (45, 45))
white_bishop = pygame.image.load('static/images/white bishop.png')
white_bishop = pygame.transform.scale(white_bishop, (80, 80))
white_bishop_small = pygame.transform.scale(white_bishop, (45, 45))
white_knight = pygame.image.load('static/images/white knight.png')
white_knight = pygame.transform.scale(white_knight, (80, 80))

90
white_knight_small = pygame.transform.scale(white_knight, (45, 45))
white_pawn = pygame.image.load('static/images/white pawn.png')
white_pawn = pygame.transform.scale(white_pawn, (65, 65))
white_pawn_small = pygame.transform.scale(white_pawn, (45, 45))
white_images = [white_pawn, white_queen, white_king, white_knight, white_rook,
white_bishop]
small_white_images = [white_pawn_small, white_queen_small, white_king_small,
white_knight_small,
white_rook_small, white_bishop_small]
black_images = [black_pawn, black_queen, black_king, black_knight, black_rook,
black_bishop]
small_black_images = [black_pawn_small, black_queen_small, black_king_small,
black_knight_small,
black_rook_small, black_bishop_small]
piece_list = ['pawn', 'queen', 'king', 'knight', 'rook', 'bishop']
# check variables/ flashing counter
counter = 0
winner = ''
game_over = False

# draw main game board


def draw_board():
for i in range(32):
column = i % 4
row = i // 4
if row % 2 == 0:
pygame.draw.rect(screen, 'light gray', [600 - (column * 200), row * 100, 100, 100])
else:
pygame.draw.rect(screen, 'light gray', [700 - (column * 200), row * 100, 100, 100])
pygame.draw.rect(screen, 'gray', [0, 800, WIDTH, 100])
pygame.draw.rect(screen, 'gold', [0, 800, WIDTH, 100], 5)
pygame.draw.rect(screen, 'gold', [800, 0, 200, HEIGHT], 5)
status_text = ['White: Select a Piece to Move!', 'White: Select a Destination!',
'Black: Select a Piece to Move!', 'Black: Select a Destination!']
screen.blit(big_font.render(status_text[turn_step], True, 'black'), (20, 820))
for i in range(9):
pygame.draw.line(screen, 'black', (0, 100 * i), (800, 100 * i), 2)
pygame.draw.line(screen, 'black', (100 * i, 0), (100 * i, 800), 2)
screen.blit(medium_font.render('FORFEIT', True, 'black'), (810, 830))

91
# draw pieces onto board
def draw_pieces():
for i in range(len(white_pieces)):
index = piece_list.index(white_pieces[i])
if white_pieces[i] == 'pawn':
screen.blit(white_pawn, (white_locations[i][0] * 100 + 22, white_locations[i][1] * 100 +
30))
else:
screen.blit(white_images[index], (white_locations[i][0] * 100 + 10, white_locations[i]
[1] * 100 + 10))
if turn_step < 2:
if selection == i:
pygame.draw.rect(screen, 'red', [white_locations[i][0] * 100 + 1, white_locations[i][1]
* 100 + 1,
100, 100], 2)

for i in range(len(black_pieces)):
index = piece_list.index(black_pieces[i])
if black_pieces[i] == 'pawn':
screen.blit(black_pawn, (black_locations[i][0] * 100 + 22, black_locations[i][1] * 100 +
30))
else:
screen.blit(black_images[index], (black_locations[i][0] * 100 + 10, black_locations[i][1]
* 100 + 10))
if turn_step >= 2:
if selection == i:
pygame.draw.rect(screen, 'blue', [black_locations[i][0] * 100 + 1, black_locations[i]
[1] * 100 + 1,
100, 100], 2)

# function to check all pieces valid options on board


def check_options(pieces, locations, turn):
moves_list = []
all_moves_list = []
for i in range((len(pieces))):
location = locations[i]
piece = pieces[i]
if piece == 'pawn':
moves_list = check_pawn(location, turn)
elif piece == 'rook':
moves_list = check_rook(location, turn)
elif piece == 'knight':

92
moves_list = check_knight(location, turn)
elif piece == 'bishop':
moves_list = check_bishop(location, turn)
elif piece == 'queen':
moves_list = check_queen(location, turn)
elif piece == 'king':
moves_list = check_king(location, turn)
all_moves_list.append(moves_list)
return all_moves_list

# check king valid moves


def check_king(position, color):
moves_list = []
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
# 8 squares to check for kings, they can go one square any direction
targets = [(1, 0), (1, 1), (1, -1), (-1, 0), (-1, 1), (-1, -1), (0, 1), (0, -1)]
for i in range(8):
target = (position[0] + targets[i][0], position[1] + targets[i][1])
if target not in friends_list and 0 <= target[0] <= 7 and 0 <= target[1] <= 7:
moves_list.append(target)
return moves_list

# check queen valid moves


def check_queen(position, color):
moves_list = check_bishop(position, color)
second_list = check_rook(position, color)
for i in range(len(second_list)):
moves_list.append(second_list[i])
return moves_list

# check bishop moves


def check_bishop(position, color):
moves_list = []
if color == 'white':

93
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
for i in range(4): # up-right, up-left, down-right, down-left
path = True
chain = 1
if i == 0:
x=1
y = -1
elif i == 1:
x = -1
y = -1
elif i == 2:
x=1
y=1
else:
x = -1
y=1
while path:
if (position[0] + (chain * x), position[1] + (chain * y)) not in friends_list and \
0 <= position[0] + (chain * x) <= 7 and 0 <= position[1] + (chain * y) <= 7:
moves_list.append((position[0] + (chain * x), position[1] + (chain * y)))
if (position[0] + (chain * x), position[1] + (chain * y)) in enemies_list:
path = False
chain += 1
else:
path = False
return moves_list

# check rook moves


def check_rook(position, color):
moves_list = []
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
for i in range(4): # down, up, right, left

94
path = True
chain = 1
if i == 0:
x=0
y=1
elif i == 1:
x=0
y = -1
elif i == 2:
x=1
y=0
else:
x = -1
y=0
while path:
if (position[0] + (chain * x), position[1] + (chain * y)) not in friends_list and \
0 <= position[0] + (chain * x) <= 7 and 0 <= position[1] + (chain * y) <= 7:
moves_list.append((position[0] + (chain * x), position[1] + (chain * y)))
if (position[0] + (chain * x), position[1] + (chain * y)) in enemies_list:
path = False
chain += 1
else:
path = False
return moves_list

# check valid pawn moves


def check_pawn(position, color):
moves_list = []
if color == 'white':
if (position[0], position[1] + 1) not in white_locations and \
(position[0], position[1] + 1) not in black_locations and position[1] < 7:
moves_list.append((position[0], position[1] + 1))
if (position[0], position[1] + 2) not in white_locations and \
(position[0], position[1] + 2) not in black_locations and position[1] == 1:
moves_list.append((position[0], position[1] + 2))
if (position[0] + 1, position[1] + 1) in black_locations:
moves_list.append((position[0] + 1, position[1] + 1))
if (position[0] - 1, position[1] + 1) in black_locations:
moves_list.append((position[0] - 1, position[1] + 1))
else:
if (position[0], position[1] - 1) not in white_locations and \

95
(position[0], position[1] - 1) not in black_locations and position[1] > 0:
moves_list.append((position[0], position[1] - 1))
if (position[0], position[1] - 2) not in white_locations and \
(position[0], position[1] - 2) not in black_locations and position[1] == 6:
moves_list.append((position[0], position[1] - 2))
if (position[0] + 1, position[1] - 1) in white_locations:
moves_list.append((position[0] + 1, position[1] - 1))
if (position[0] - 1, position[1] - 1) in white_locations:
moves_list.append((position[0] - 1, position[1] - 1))
return moves_list

# check valid knight moves


def check_knight(position, color):
moves_list = []
if color == 'white':
enemies_list = black_locations
friends_list = white_locations
else:
friends_list = black_locations
enemies_list = white_locations
# 8 squares to check for knights, they can go two squares in one direction and one in another
targets = [(1, 2), (1, -2), (2, 1), (2, -1), (-1, 2), (-1, -2), (-2, 1), (-2, -1)]
for i in range(8):
target = (position[0] + targets[i][0], position[1] + targets[i][1])
if target not in friends_list and 0 <= target[0] <= 7 and 0 <= target[1] <= 7:
moves_list.append(target)
return moves_list

# check for valid moves for just selected piece


def check_valid_moves():
if turn_step < 2:
options_list = white_options
else:
options_list = black_options
valid_options = options_list[selection]
return valid_options

# draw valid moves on screen


def draw_valid(moves):

96
if turn_step < 2:
color = 'red'
else:
color = 'blue'
for i in range(len(moves)):
pygame.draw.circle(screen, color, (moves[i][0] * 100 + 50, moves[i][1] * 100 + 50), 5)

# draw captured pieces on side of screen


def draw_captured():
for i in range(len(captured_pieces_white)):
captured_piece = captured_pieces_white[i]
index = piece_list.index(captured_piece)
screen.blit(small_black_images[index], (825, 5 + 50 * i))
for i in range(len(captured_pieces_black)):
captured_piece = captured_pieces_black[i]
index = piece_list.index(captured_piece)
screen.blit(small_white_images[index], (925, 5 + 50 * i))

# draw a flashing square around king if in check


def draw_check():
if turn_step < 2:
if 'king' in white_pieces:
king_index = white_pieces.index('king')
king_location = white_locations[king_index]
for i in range(len(black_options)):
if king_location in black_options[i]:
if counter < 15:
pygame.draw.rect(screen, 'dark red', [white_locations[king_index][0] * 100 + 1,
white_locations[king_index][1] * 100 + 1, 100, 100], 5)
else:
if 'king' in black_pieces:
king_index = black_pieces.index('king')
king_location = black_locations[king_index]
for i in range(len(white_options)):
if king_location in white_options[i]:
if counter < 15:
pygame.draw.rect(screen, 'dark blue', [black_locations[king_index][0] * 100 + 1,
black_locations[king_index][1] * 100 + 1, 100, 100], 5)

97
def draw_game_over():
pygame.draw.rect(screen, 'black', [200, 200, 400, 70])
screen.blit(font.render(f'{winner} won the game!', True, 'white'), (210, 210))
screen.blit(font.render(f'Press ENTER to Restart!', True, 'white'), (210, 240))

# main game loop


black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
run = True
while run:
timer.tick(fps)
if counter < 30:
counter += 1
else:
counter = 0
screen.fill('dark gray')
draw_board()
draw_pieces()
draw_captured()
draw_check()
if selection != 100:
valid_moves = check_valid_moves()
draw_valid(valid_moves)
# event handling
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
if event.type == pygame.MOUSEBUTTONDOWN and event.button == 1 and not
game_over:
x_coord = event.pos[0] // 100
y_coord = event.pos[1] // 100
click_coords = (x_coord, y_coord)
if turn_step <= 1:
if click_coords == (8, 8) or click_coords == (9, 8):
winner = 'black'
if click_coords in white_locations:
selection = white_locations.index(click_coords)
if turn_step == 0:
turn_step = 1
if click_coords in valid_moves and selection != 100:
white_locations[selection] = click_coords

98
if click_coords in black_locations:
black_piece = black_locations.index(click_coords)
captured_pieces_white.append(black_pieces[black_piece])
if black_pieces[black_piece] == 'king':
winner = 'white'
black_pieces.pop(black_piece)
black_locations.pop(black_piece)
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
turn_step = 2
selection = 100
valid_moves = []
if turn_step > 1:
if click_coords == (8, 8) or click_coords == (9, 8):
winner = 'white'
if click_coords in black_locations:
selection = black_locations.index(click_coords)
if turn_step == 2:
turn_step = 3
if click_coords in valid_moves and selection != 100:
black_locations[selection] = click_coords
if click_coords in white_locations:
white_piece = white_locations.index(click_coords)
captured_pieces_black.append(white_pieces[white_piece])
if white_pieces[white_piece] == 'king':
winner = 'black'
white_pieces.pop(white_piece)
white_locations.pop(white_piece)
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')
turn_step = 0
selection = 100
valid_moves = []
if event.type == pygame.KEYDOWN and game_over:
if event.key == pygame.K_RETURN:
game_over = False
winner = ''
white_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
white_locations = [(0, 0), (1, 0), (2, 0), (3, 0), (4, 0), (5, 0), (6, 0), (7, 0),
(0, 1), (1, 1), (2, 1), (3, 1), (4, 1), (5, 1), (6, 1), (7, 1)]
black_pieces = ['rook', 'knight', 'bishop', 'king', 'queen', 'bishop', 'knight', 'rook',

99
'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
black_locations = [(0, 7), (1, 7), (2, 7), (3, 7), (4, 7), (5, 7), (6, 7), (7, 7),
(0, 6), (1, 6), (2, 6), (3, 6), (4, 6), (5, 6), (6, 6), (7, 6)]
captured_pieces_white = []
captured_pieces_black = []
turn_step = 0
selection = 100
valid_moves = []
black_options = check_options(black_pieces, black_locations, 'black')
white_options = check_options(white_pieces, white_locations, 'white')

if winner != '':
game_over = True
draw_game_over()

pygame.display.flip()
timer.tick(fps)
pygame.quit()

● App.py

100
from flask import Flask, render_template
import subprocess
import os

app = Flask(__name__, template_folder='templates')

@app.route('/')
def index():
return render_template('index.html')

@app.route('/run-chess', methods=['GET'])
def run_chess():
# Path to your chess game's main.py
chess_script = os.path.abspath('main.py')

if os.path.exists(chess_script):
subprocess.Popen(['python', chess_script], shell=True) # Start the chess game
return "Chess game is starting!", 200
else:
return f"Error: Chess game script not found at {chess_script}", 404

if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True) # Accessible on local network

● Index.html

101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Game</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap"
rel="stylesheet">

<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;

102
text-align: left;

/* Center content */
.content {
margin-left: 250px;
padding: 50px;
text-align: center;
flex: 1;
}
.content h1 {
font-size: 90px;
font-family: 'Brush Script MT', cursive;
color: var(--golden-color);
overflow: hidden; /* Ensures content is hidden while typing */
white-space: nowrap; /* Prevents text from wrapping */
border-right: 2px solid #333; /* Creates the typing cursor */
width: fit-content;
margin-left: 420px;
margin-top: 200px;
margin-bottom: 100px;
animation: typing 4s steps(30, end), blink 0.5s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 42%;
}
}
@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
.content p {
margin-top: 20px;

103
font-size: 18px;
color: #555;
}

</style>
<script>
function startChessGame() {
fetch('http://127.0.0.1:5000/run-chess') // Update this port number
.then(response => response.text())
.then(message => {
alert(message);
})
.catch(error => {
alert("Error starting the game!");
});
}
</script>
</head>
<body>
<span class="content">
<h1>
<button onclick="startChessGame()">Start Chess Game</button></h1>
</span>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></
script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

104
105
106
107
7. Aboutus.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Learnify</title>
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;
text-align: left;
}
.nav-links {
position: absolute;
right: 20px;

108
top: 30px;
bottom: 20px;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 100vh;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: var(--golden-color);
}
.sidebar a.active {
background-color:var(--golden-color);
}
/* Add background image to the section */
#about-us {
margin-left: 250px;
text-align: center;
flex: 1;
background-image: transparent;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
background-size: cover;
background-position: center;
padding: 50px;
color: white; /* Text color */
/* Optional text shadow for better readability */

109
}
h2 {
font-size: 36px;
margin-bottom: 20px;
}
p{
font-size: 18px;
line-height: 1.6;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 58%;
}
}

@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);

110
}
</style>
</head>
<body >
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>
<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>
<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>
<a href="pygameChess-main\index.html">Game</a>
</div>
<section id="about-us">
<h2 align="center">About Us</h2>
<p align="center">At <strong>Learnify</strong>, we are dedicated to revolutionizing
education through innovative, personalized learning experiences. <br>Our mission is to make
learning more accessible, engaging, and effective for individuals and organizations alike.<br>
By leveraging advanced technology, including AI, we create adaptive learning paths tailored to
each learner’s needs and goals.</p>

<p align="center">Whether you're a student, a professional, or an organization, Learnify offers


a wide range of courses across various fields, designed to help you grow and succeed. <br>Our
expert instructors, interactive tools, and supportive community are here to ensure you stay
motivated and achieve your full potential.</p>

<h2 align="center"><strong>Our Vision</strong></h2><br><p align="center">Our


vision is to revolutionize education by creating an inclusive, interactive, and engaging learning
environment for all. <br>We aim to bridge the gap between traditional learning methods and the
evolving demands of the modern world, empowering learners to succeed and excel in whatever
they choose to pursue.</p>
</section>
</body>
</html>

111
112
8. Contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('contact1.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;

113
text-align: left;
}
.nav-links {
position: absolute;
right: 20px;
top: 30px;
bottom: 20px;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 120vh;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: var(--golden-color);
}
.sidebar a.active {
background-color:var(--golden-color);
}
h2 {
color: var(--golden-color);
margin-left: 15px;
text-align:center;
}
.btn-custom {
background-color: var(--golden-color);

114
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
}
body {
font-family: Arial, sans-serif;
background-size: cover;
background-position: center;
background-attachment: fixed;
margin: 0;
padding: 0;
color: white; /* Adjust text color for better contrast */
}
.container {
width: 80%;
margin: 0 auto;
padding: 50px 0;
margin-left: 250px;
padding: 50px;
text-align: center;
flex: 1;
}
.contact-form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 800px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;

115
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 200px;
padding: 50px;
text-align: center;
flex: 1;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
font-weight: bold;
color: var(--black-color);
}
.form-group input, .form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.form-group textarea {
resize: vertical;
height: 150px;
}
.submit-btn {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}
.submit-btn:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);

116
}
.footer {
text-align: center;
margin-top: 30px;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 58%;
}
}
@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
</style>
</head>
<body>
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>
<h2>Contact Us</h2>
<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>
<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>
<a href="pygameChess-main\index.html">Game</a>
</div>
<div class="container">

117
<div class="contact-form">
<form action="#" method="POST">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Contact Number</label>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{10}"
placeholder="1234567890">
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</div>
<div class="footer">
<p>&copy; 2025 Your Company Name. All Rights Reserved.</p>
</div>
</body>
</html>

118
119
9. Loginpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
:root{
--golden-color:rgb(239, 186, 61);/*golden color */
--black-color:rgb(7, 3, 3);/*black color*/
--grey-color:rgba(51, 54, 58, 0.8);/*grey color*/
}
body {
font-family: Arial, sans-serif;
background-color: var(--grey-color); /* Fallback color */
color: var(--golden-color); /* Text color for better visibility */
position: relative;
z-index: 0; /* Ensure content is above the background */
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('learning.jpg'); /* Replace with your image path */
background-size: cover; /* Cover the entire background */
background-repeat: no-repeat; /* No repeat */
background-attachment: fixed; /* Fixed background */
opacity: 0.2; /* Adjust the opacity */
z-index: -1; /* Place the background behind the content */
}
.header {

120
background-color: var(--grey-color); /* Semi-transparent background for header */
padding: 20px 0;
text-align: left;
}
.nav-links {
position: absolute;
right: 20px;
top: 30px;
bottom: 20px;
}
.nav-links a {
color: var(--black-color);
margin-left: 15px;
}
/* Left navigation menu */
.sidebar {
width: 250px;
background-color: var(--black-color);
color: white;
padding: 20px 0;
position: absolute;
height: 100vh;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: var(--golden-color);
}
.sidebar a.active {
background-color:var(--golden-color);
}
.login-container {
width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;

121
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
margin-left: 600px;
padding: 50px;
margin-top: 200px;
flex: 1;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@keyframes typing {
from {
width: 0;
}
to {
width: 58%;
}
}
@keyframes blink {
from {
border-right-color: var(--golden-color);
}
to {
border-right-color: transparent;
}
}
h2 {
margin-bottom: 20px;
}
.btn-custom {
background-color: var(--golden-color);
color: var(--black-color);
box-shadow: 2px 2px 15px var(--black-color);
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
}

122
.btn-custom:hover {
background-color:var(--black-color);
color:var(--golden-color);
box-shadow: 5px 2px 10px var(--golden-color);
transform: scale(1.05);
}
.input-group {
margin-bottom: 15px;
text-align: left;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #007BFF;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #0056b3;
}
#error-message {
color: red;
margin-top: 10px;
}
</style>
<body>

123
<div class="header">
<h1><img src="logo.png" height="100px" width="110px" margin-left="20px"></h1>

<div class="nav-links">
<a href="homepage.html" class="btn btn-custom">Home</a>
<a href="aboutus.html" class="btn btn-custom">About us</a>
<a href="contact.html" class="btn btn-custom">Contact us</a>
<a href="loginpage.html" class="btn btn-custom">Login</a>
</div>
</div>

<div class="sidebar">
<a href="combinedlearning.html">Learn</a>
<a href="combined quiz page.html">Quiz</a>
<a href="compiler.html">Practice Compiler</a>
<a href="help.html">AI Assistance</a>
<a href="pygameChess-main\index.html">Game</a>
</div>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
<p id="error-message"></p>
</div>
<script src="script.js"></script>
</body>
</html>

124
125
126

You might also like