Project 2
Project 2
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.
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.
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.
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
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.
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.
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.
16
⬇
[Database] (Storage of User & Lesson Data)
⬇
[External APIs] (Compiler & Game Integration)
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.
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.
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:
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
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.
30
CHAPTER 5
PROPOSED ENHANCEMENTS
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.
32
CHAPTER 6
CONCLUSION
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
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:
● 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:
● 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:
● 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
● 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 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>
<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>
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');
});
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))
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
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
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
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
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)
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)
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]
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
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)
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
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
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
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
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)
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))
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.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>
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>© 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