SEE Report
SEE Report
1. Introduction
1.1. Project Overview
1.2. Objectives and Goals
1.3. Problem Statement
Page | 1
10. Deployment and Maintenance
10.1. Deployment Strategy
10.2. Post-Deployment Maintenance Plan
13. Conclusion
15.1. Key Outcomes and Impact
15.2. Future Improvements and Plans
Page | 2
1. Introduction
1.1. Project Overview
The project aims to gamify core Data Structures and Algorithms (DSA) concepts, focusing on
the Tree Data Structure. As part of this initiative, we, a team of 10 members, collaborated to
create an interactive, game-based learning platform. The project is designed to provide
students with a dynamic way to understand and practice concepts related to trees in computer
science, through four progressively challenging levels. Each level represents a different
aspect of the tree data structure, starting from its basic array representation and advancing to
more complex operations such as binary search trees (BST) and deletion.
The game uses visual and interactive components to help learners visualize and engage with
tree concepts, making learning enjoyable and effective. By playing the game, users can
strengthen their understanding of tree structures and their applications in real-world
programming tasks.
Page | 3
1.3. Problem Statement
Understanding and mastering data structures is essential for every computer science student.
Among the various data structures, trees present a unique challenge due to their complexity
and diverse applications in algorithms. Learning tree-based structures such as binary search
trees (BST), AVL trees, and operations like tree traversal, insertion, and deletion can be
overwhelming for students, especially when only theoretical approaches are used.
The problem addressed by this project is the lack of interactive and engaging tools for
learning tree data structures. Traditional methods such as textbooks, lectures, and static
visualizations are often insufficient in helping students develop a deep understanding of how
these structures work and how to manipulate them.
By gamifying these concepts, the project aims to provide a more interactive, hands-on
approach, which has been shown to enhance learning. The game will help students not only
understand the theory behind trees but also visualize and perform tree operations in a way
that is intuitive, fun, and effective.
The core problem is that existing educational tools do not adequately address the need for an
engaging, interactive, and scalable approach to learning complex data structures like trees.
This project aims to fill that gap by providing a gamified platform that makes learning tree
structures accessible and enjoyable for students at all levels.
Page | 4
o Which features (e.g., levels, hints, visualizations) would enhance your learning
experience?
o How should feedback be provided during the learning process?
Examples of Responses:
o User 1: Preferred step-by-step solutions for errors and progress tracking.
o User 2: Highlighted the need for interactive exercises to strengthen
understanding.
o User 3: Emphasized visualizations and gamification as essential motivators
for learning.
2. Interviews
One-on-one interviews were conducted with both novice and advanced users to gather deeper
insights. These interviews helped us understand how the learning experience differs based on
the user's level of knowledge and what features they value most.
Key Findings:
o Beginners struggle with understanding basic tree concepts, often feeling
overwhelmed by abstract explanations.
o Advanced users wanted additional features such as challenges, performance
tracking, and rewards for progress to keep them engaged and motivated.
3. Observation
We observed users interacting with existing learning platforms to identify gaps and areas for
improvement.
Key Insights:
o Many platforms lacked interactive, hands-on learning experiences.
o Feedback mechanisms on existing platforms were either delayed or
insufficient, preventing users from learning from their mistakes in real-time.
4. Analysis of Existing Platforms
To benchmark our platform, we analyzed competing platforms to identify missing features
and opportunities for improvement.
Key Findings:
o Users preferred a gamified experience with levels, progress tracking, and
real-time feedback.
o A significant portion of users found data structures difficult to grasp due to the
lack of visual and interactive aids.
o Instant feedback and step-by-step corrections were highly desired by users.
Page | 5
2.2. Functional Requirements
The functional requirements describe the core features and behaviors the platform must
support to deliver a valuable learning experience. These requirements are aimed at ensuring
that the platform provides an interactive, educational, and engaging environment for users to
learn about tree data structures.
1. User Authentication
Feature: The system must allow users to securely register, log in, and manage their
accounts.
Requirements:
o Users must be able to sign up and log in using a secure authentication
mechanism.
o Passwords must be encrypted and securely stored.
o Session management should ensure users stay logged in during their session,
but not beyond.
2. Dashboard
Feature: The dashboard should present a clear overview of the user's progress
through the game levels.
Requirements:
Page | 6
o The dashboard must display four distinct levels (Array Representation, Tree
Representation, BST Operations, and Deletion).
o Each level should have a progress bar to indicate the user's progress and level
completion status.
3. Interactive Levels
Feature: The game must provide users with interactive tasks related to each level.
Requirements:
o Each level should present specific tasks, such as:
Arranging nodes into an indexed array (Level 1).
Performing tree traversals (Level 2).
o Users should receive real-time validation on their actions, guiding them
through mistakes and helping them understand the correct approach.
4. Feedback Mechanisms
Feature: Provide immediate feedback for each user action to ensure continuous
learning.
Requirements:
o Feedback must be instant, offering hints, explanations, and solutions for
incorrect answers.
o The feedback should be context-sensitive, offering solutions tailored to the
specific task or error encountered.
5. Progress Tracking
Feature: The system should track the user's progress through the game.
Requirements:
o The platform must store user progress in a database.
o A visual representation (progress bars or other indicators) must show the
current status of level completion.
Page | 7
o The system must provide feedback for each user action within 1 second to
avoid delays in user interaction.
2. Scalability
Feature: The platform should be able to scale to support a growing number of users
without performance degradation.
Requirements:
o The system should be designed to handle a large number of concurrent users
without causing significant slowdowns or crashes.
3. Security Requirements
Feature: Ensure the platform is secure and protects user data.
Requirements:
o Implement secure login and data encryption to protect user credentials and
personal information.
o The platform should be protected against unauthorized access and data
breaches.
4. Usability
Feature: The platform must have a user-friendly interface that adapts across multiple
devices.
Requirements:
o The interface should be intuitive and easy to navigate for users with varying
levels of technical expertise.
o The design must be responsive, adapting seamlessly to desktops, tablets, and
mobile devices to ensure accessibility on any platform.
Page | 8
Start End
Milestone Description
Date Date
Requirements Gathering 14-10- 20-10- Collecting and analyzing requirements through interviews,
and Analysis 2024 2024 surveys, and documentation review.
Software Architecture and 21-10- 28-10- Designing the system architecture, including technical
Design 2024 2024 specifications and workflow planning.
User Interface Design and 29-10- 15-11- Creating wireframes and prototypes for the application
Prototyping 2024 2024 interface, ensuring usability and aesthetics.
Database Design and 16-11- 22-11- Designing the database schema and implementing the
Implementation 2024 2024 required tables, relationships, and queries.
23-11- 20-12- Writing code for the application based on the design
Development and Coding
2024 2024 documents and implementing core functionality.
21-12- 30-12- Conducting unit, integration, and system testing to ensure
Testing and Integration
2024 2024 reliability and performance.
Deployment and 31-12- 10-01- Deploying the application to the production environment
Maintenance 2024 2025 and establishing a maintenance workflow.
Level Rishitha, Deletion from the Binary Implementing node deletion logic and
4 Shreelakshmi Search Tree (BST) ensuring the tree remains balanced.
Page | 9
This table outlines the project's milestones, tasks, and team members. Tasks are allocated
based on expertise to ensure efficient collaboration across key areas such as requirements
gathering, design, coding, testing, and deployment. The structured task distribution ensures a
balanced workflow, fostering effective teamwork throughout the project.
Assigned Team
Milestone Description
Members
Page | 10
4. Software Architecture Design
Page | 11
4.1. System Architecture Overview
This outlines the flow of a system based on the given controllers, models,
and views. It describes the interaction between the different components,
highlighting their roles and relationships within the system. The
architecture is designed to ensure a smooth flow of data, efficient
processing, and a user-friendly interface. Each component works in
harmony, adhering to the principles of modularity and separation of
concerns.
Key Features of the Architecture:
Controllers: Serve as intermediaries, managing user interactions
and coordinating data flow between views and models.
Models: Handle business logic and data operations, ensuring data
consistency and integrity.
Views: Represent the user interface, providing a responsive and
accessible experience.
Page | 12
Deployment: Features a database server for persistent data
storage, an application server for core logic, and client services for
user-facing interfaces.
Views
Login Page: Provides authentication interfaces, feedback for invalid
attempts, and options for registration or recovery.
Home Page: Displays personalized content and quick navigation
options.
LeaderBoard Page: Highlights rankings with user-specific
achievements and filters for customized views.
Page | 13
Dashboard Page: Showcases progress, activity graphs, and
shortcuts to frequently used features.
Profile Page: Allows profile updates and displays achievements
and preferences.
Registration Page: Offers a user-friendly registration process with
input validation.
Game Level Page: Interactive interface for managing and
progressing through game levels.
Page | 14
Deployment Diagram Overview
1. Database Server:
o Centralized storage for user data and game scores.
o Supports secure storage, retrieval, and management of
persistent data.
2. Application Server:
o Hosts backend services like authentication, game logic,
leaderboard, profile management, and score updates.
o Acts as a bridge between the database server and client
services.
3. Client Service:
o Represents the user-facing interface, interacting with backend
systems via HTTPS/HTTP protocols.
o Delivers responsive UI components for seamless interaction.
Page | 15
4.3. Design Patterns Used
Model-View-Controller (MVC): Separates concerns, enabling
independent development of user interfaces, business logic, and
data management.
Modular Design: Ensures each component (controllers, models,
views) is self-contained, facilitating easier updates and feature
additions.
Layered Architecture: Utilizes distinct layers for data, logic, and
presentation, enhancing scalability and maintainability.
Observer Pattern: Employed in real-time updates, like leaderboard
rankings and game progress notifications.
Factory Pattern: Used for dynamic level generation, enabling the
creation of levels with branching paths based on user progress.
Page | 16
User Interface (UI) and User Experience (UX) design are critical to ensuring that the
application is both functional and easy to use. The design principles focus on creating a
seamless and intuitive experience for the user. These include:
Usability: The design should be intuitive and simple, making it easy for users to achieve their
goals without confusion.
Consistency: Consistent use of colors, fonts, and layouts creates a cohesive experience.
Responsiveness: The design should adapt smoothly to various screen sizes and devices,
providing a consistent experience across platforms.
Accessibility: Ensuring the application is usable by people with disabilities, following best
practices for accessibility.
(ui/ux wireframes)
5.3. Prototype Development and Feedback
Prototyping involves creating an interactive version of the application that simulates user
interactions and functionality. This step allows the team to test usability and gather feedback
before the development phase begins.
Prototype Development: Using tools like Figma and Adobe XD, prototypes are created
based on wireframes and mockups. These are interactive and allow users to experience the
flow of the application.
Feedback and Iteration: Feedback is collected from stakeholders and end-users to identify
areas for improvement. Based on this feedback, revisions are made, and the prototype is
updated until it meets the necessary usability standards.
Home Page:
Page | 17
Page | 18
Level 1:
Page | 19
Points updation after level 1:
Level 2:
Page | 20
Points updation after level 2:
Level 3:
Page | 21
Level 4:
Page | 22
);
Leaderboard Table
Tracks the leaderboard points for each user.
CREATE TABLE Leaderboard (
leaderboard_id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
points INT NOT NULL,
FOREIGN KEY (user_id) REFERENCES User(user_id) ON DELETE CASCADE
);
Progress Table
Keeps track of user progress and is linked to the User table.
CREATE TABLE Progress (
progress_id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
FOREIGN KEY (user_id) REFERENCES User(user_id) ON DELETE CASCADE
);
Optional Achievement Table
For tracking user achievements or milestones.
CREATE TABLE Achievement (
achievement_id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
description VARCHAR(255) NOT NULL,
achieved_date DATE NOT NULL,
FOREIGN KEY (user_id) REFERENCES User(user_id) ON DELETE CASCADE
);
Page | 24
7.Development and coding
7.1 Technology Stack Used
The application is built using a robust set of technologies chosen for their scalability,
performance, and compatibility with the system's requirements, ensuring high performance
and ease of use across platforms:
Frontend Technologies:
o React.js: A modular and efficient library for building responsive and dynamic
user interfaces, enabling quick updates and high interactivity.
o HTML5, CSS3, JavaScript: Used for structuring content, styling, and adding
interactivity to the application.
o Tailwind CSS: Ensures responsive design, making the app compatible across
various devices and screen sizes.
Backend Technologies:
o Node.js: An asynchronous, event-driven architecture ideal for handling
multiple requests simultaneously.
o Express.js: A lightweight framework for backend routing, middleware
handling, and API development.
o Database: MySQL/PostgreSQL for relational data management, ensuring
robust queries and scalability.
Version Control and CI/CD:
o Git: Used for version control, enabling smooth collaboration and maintaining
code history.
o GitHub/GitLab: Repository management for seamless integration into the
CI/CD pipeline.
o Jenkins: Automates testing and deployment as part of the CI/CD process.
Game Logic Technologies:
o JavaScript (Frontend) and Node.js (Backend): Handles game logic, user
interaction, scoring, and progression tracking.
o WebSocket: Enables real-time data synchronization, particularly useful for
multiplayer modes or live leaderboard updates.
7.2 Coding Structure and Game Logic
The code is structured to ensure scalability, maintainability, and separation of concerns. Key
aspects of the game logic include:
Modular Architecture: Code is organized into independent modules based on
functionality (e.g., game logic, user management, database interaction), ensuring easy
testing and reusability.
Game Logic Design:
Page | 25
o State Management: Tracks and updates game state (level, score, user
progress) dynamically based on user actions.
o Event Handling: Event-driven programming handles user input, triggering
appropriate game actions to ensure smooth interactivity.
o Leaderboards: Real-time leaderboard updates based on user progression and
performance.
Performance Optimization:
o Lazy Loading: Game assets and components are loaded only when required,
reducing initial load times.
o Caching: User profile data and leaderboard rankings are cached to improve
performance and reduce unnecessary database queries.
treeContainer.querySelectorAll('.array-slot').forEach(slot => {
userOrder.push(slot.dataset.value || null);
});
// Answer is correct
class BST {
Page | 26
// Traverse left subtree
return result;
violations.push({
node: node.value,
});
violations.push({
node: node.value,
});
violations = violations.concat(
);
return violations;
Page | 27
4. Level 4 - BST Deletion:
// Core BST deletion algorithm
class BST {
delete(value) {
} else {
return null;
return node.right;
return node.left;
else {
successor = successor.left;
node.value = successor.value;
node.right = deleteNodeHelper(node.right,
successor.value);
Page | 28
return node;
};
} }
• Tree Structure for Level Progression: A tree structure represents game progression,
where each level is a node and its connections (e.g., difficulty, prerequisites) are edges. This
allows for dynamic generation of challenges based on the user's current level.
• Tree Traversal for Level Completion: When a user completes a level, the game uses
Depth-First Search (DFS) or Breadth-First Search (BFS) algorithms to unlock subsequent
levels based on criteria like scoring or achievements.
• Dynamic Level Generation Using Trees: The tree structure allows for the dynamic
creation of levels with branching paths, providing a unique experience for each playthrough
as new sub-levels or challenges are unlocked.
• Efficient Data Storage and Access: The tree structure ensures efficient access to level data
(e.g., scores, progress) by utilizing parent-child relationships, enabling quick updates and
retrieval based on user actions.
beforeEach(() => {
bst = new BST();
// Create a sample tree:
// 25
// / \
// 15 30
// / \
// 10 20
bst.insert(25);
bst.insert(15);
bst.insert(30);
bst.insert(10);
bst.insert(20);
});
test('Preorder Traversal', () => {
Page | 29
const expected = [25, 15, 10, 20, 30];
const result = bst.traverse(bst.root, 'preorder');
expect(result.map(node => node.value)).toEqual(expected);
});
test('Inorder Traversal', () => {
const expected = [10, 15, 20, 25, 30];
const result = bst.traverse(bst.root, 'inorder');
expect(result.map(node => node.value)).toEqual(expected);
});
test('Postorder Traversal', () => {
const expected = [10, 20, 15, 30, 25];
const result = bst.traverse(bst.root, 'postorder');
expect(result.map(node => node.value)).toEqual(expected);
});
test('Empty Tree Traversal', () => {
const emptyBST = new BST();
expect(emptyBST.traverse(emptyBST.root, 'inorder')).toEqual([]);
});
});
Integration Testing
describe('BST Game Integration Tests', () => {
beforeEach(() => {
document.body.innerHTML = `
<div id="tree"></div>
<div id="score">0</div>
<button id="preorder">Preorder</button>
<button id="inorder">Inorder</button>
<button id="postorder">Postorder</button>
`;
});
test('Complete Game Flow', async () => {
// Initialize game
const game = new TreeTraversalGame();
game.startGame();
// Simulate user selecting correct traversal order
const correctOrder = [25, 15, 10, 20, 30]; // Preorder
Page | 30
document.getElementById('preorder').click();
· Complete Game Flow: Testing the entire user journey from start to finish
· User Interactions: Verifying correct handling of user clicks and input
· Score Management: Testing score updates and level progression
· Visual Feedback: Ensuring correct visual updates for node selection and traversal progress
· Error Handling: Testing incorrect node selections and user recovery
Testing Considerations
Accessibility Testing
· Ensuring keyboard navigation works for all game controls
· Verifying color contrast meets WCAG guidelines
· Testing screen reader compatibility for game instructions and feedback
Performance Testing
· Measuring render times for different tree sizes
· Testing smooth animations and transitions
· Verifying memory usage with large trees
Cross-browser Testing
· Ensuring consistent behavior across different browsers
· Testing responsive design on various screen sizes
· Verifying touch interactions on mobile devices
Page | 31
· Integration Coverage: Test all user interaction flows
This testing strategy ensures robust functionality of the BST traversal implementation while
maintaining a good user experience in the educational game context.
Page | 32
· Level progression logic
· Score persistence between levels
· Menu navigation
· Back button functionality
Data Management
test('Data Persistence', () => {
// Test local storage
expect(localStorage.getItem('gameProgress')).toBeDefined();
// Test state management
expect(store.getState().levels).toMatchSnapshot();
// Test progress tracking
expect(calculateOverallProgress()).toBe(expectedProgress);
});
Performance Testing
test('Performance Metrics', async () => {
const metrics = await measurePerformance();
// Page load time
expect(metrics.loadTime).toBeLessThan(3000);
// Animation smoothness
expect(metrics.fps).toBeGreaterThan(30);
// Memory usage
expect(metrics.memoryUsage).toBeLessThan(100MB);
});
Error Handling
test('System Recovery', () => {
// Test network failure recovery
simulateNetworkFailure();
expect(getErrorMessage()).toBe('Network Error');
expect(autoRecoveryInitiated()).toBe(true);
// Test data corruption recovery
simulateDataCorruption();
expect(dataRecoveryMechanism()).toBe('successful');
});
Test Groups
Computer Science Students
· Familiarity with BST concepts
· Focus on algorithmic accuracy
Non-CS Students
Page | 33
· Learning curve assessment
· Interface intuitiveness
Educators
· Educational value assessment
· Content accuracy verification
Learning Effectiveness
const learningMetrics = {
preTestScore: number,
postTestScore: number,
timeSpent: number,
attemptsPerLevel: number,
confidenceRating: number
};
test('Learning Improvement', () => {
const results = analyzeLearningMetrics(learningMetrics);
expect(results.improvement).toBeGreaterThan(30);
expect(results.userConfidence).toBeGreaterThan(7);
});
Functionality
· All levels completable without technical issues
· Score tracking accurate and consistent
· Progress saving reliable
Usability
· Instructions clear and accessible
· UI responsive and intuitive
· Error messages helpful and clear
Educational Value
· Concepts clearly demonstrated
· Feedback helps understanding
· Difficulty progression appropriate
Page | 34
UAT Results Analysis
const UATResults = {
completionRate: '95%',
averageTimePerLevel: '15 minutes',
userSatisfaction: '4.2/5',
recommendationRate: '88%',
keyImprovements: [
'Clearer error messages',
'More visual feedback',
'Additional practice exercises']};
Post-UAT Actions
Immediate Fixes
· Critical usability issues
· Bug fixes
· Performance improvements
Future Enhancements
· Additional features requested
· UI/UX improvements
· Content additions
Documentation Updates
· User guide refinement
· FAQ additions
· Tutorial improvements
This comprehensive testing approach ensures that the BST Learning Game not only
functions correctly from a technical standpoint but also effectively serves its educational
purpose while providing a positive user experience.
Page | 35
Release Process
Testing: Comprehensive testing in a staging environment ensures the game functions
smoothly before launch.
Version Control: Using Git or similar tools allows for efficient code management
and version tracking.
Release Notes: Detailed release notes inform users about new features, bug fixes, and
improvements with each update.
Page | 36
Use tools to monitor server performance, track user activity, and identify potential
bottlenecks or issues. Insights gained can guide further optimizations and updates.
Page | 37
Security tests are conducted using tools like OWASP ZAP or Burp Suite to identify
vulnerabilities in the application.
Penetration testing is performed to simulate real-world attacks and ensure the
application is secure.
Usability Testing:
Validation of the application's user interface to ensure it is intuitive, easy to navigate, and
meets the design guidelines
Page | 38
Code coverage tools like JaCoCo (Java) or Coverage.py (Python) measure the percentage of
code ested by automated tests, ensuring important code paths are validated.
Page | 39
Integrating complex game logic, especially for dynamic level progression using tree data
structures, posed initial challenges in terms of performance and scalability. However, after
careful optimization of data structures and algorithms, these challenges were overcome.
Real-Time Data Synchronization:
Ensuring that user scores and leaderboards updated in real-time without excessive database
queries was another challenge. This was solved by implementing WebSockets for real-time
communication, but performance issues were encountered in the early stages, which were
later addressed with efficient data caching strategies.
UI/UX Adjustments:
While the initial design was promising, feedback from early users highlighted usability
issues, such as difficulty navigating between levels. These feedbacks required several
iterations of the UI, which delayed the project slightly, but ultimately led to a more intuitive
design.
Database Normalization:
The process of normalizing the database to avoid redundancy and maintain data integrity
required several revisions to the initial schema. Specifically, balancing the complexity of
database relationships with the need for efficiency in query performance was a challenge that
was resolved with a more optimized schema.
Deployment and Cloud Infrastructure:
During deployment, setting up the cloud infrastructure and ensuring that the application
scaled effectively for a large number of users proved difficult. There were concerns related to
performance, particularly during peak usage times, which were mitigated with the
implementation of load balancing and auto-scaling features.
Page | 40
Database Efficiency:
Ensuring that the database schema is both normalized and optimized for performance is
essential. Over-normalization can lead to unnecessary complexity and slower performance, so
finding the right balance between redundancy and efficiency is critical.
Collaboration and Communication:
The success of the project was heavily reliant on effective communication among team
members. Regular meetings, clear documentation, and sharing knowledge between
developers, designers, and testers ensured smooth development and timely delivery.
13. Conclusion
13.1. Key Outcomes and Impact
The project has successfully met its primary objectives and delivered a functional system that
adds value to users and stakeholders. The key outcomes include:
Achieving Project Milestones:
The project progressed through each phase as planned, from requirements gathering to
deployment, ensuring that all core features were implemented and tested thoroughly.
User Engagement:
The application has received positive feedback from users, with the main features being well-
received, such as the leaderboard system, user progress tracking, and intuitive interface.
Enhanced Efficiency and Experience:
The project has significantly improved how users engage with the system, offering a
streamlined experience that enhances their ability to track progress and earn rewards.
Positive Business or Social Impact:
The project has made a measurable impact by achieving its goal of providing users with a
sense of progression, leading to increased engagement and motivation.
13.2. Future Improvements and Plans
Despite the successes of the current project, there are always opportunities for future
enhancements. Some of the potential improvements and plans for the next stages include:
Feature Expansion:
Introducing new features, such as additional levels, challenges, or achievement milestones, to
keep the users engaged and add more value to their experience.
Performance Optimization:
Working on further performance improvements, especially in terms of scaling the application
to handle larger numbers of users and increasing data storage capacity.
User Feedback Integration:
Page | 41
Gathering more user feedback through surveys and user-testing sessions to refine the user
interface, fix any emerging issues, and optimize the overall user experience.
Cross-Platform Integration:
Expanding the application to support additional platforms (mobile, tablet) and integrating it
with other services or platforms to broaden its reach and functionality.
Page | 42