Interactive Array Visualization Tool

Project Domain / Category

Web Programming

Abstract / Introduction

This project is a web-based application that aims to create an interactive visual learning tool that helps students and developers understand the Array data structure using animations or simulations. The tool will allow users to create, modify, and interact with arrays while visually observing how data is stored, accessed, and manipulated in real-time. Key operations such as insertion, deletion, searching, and sorting will be demonstrated step by step with clear animations. By integrating visual representations and real-time interaction, this application will enhance learning and make complex array concepts easier to grasp.

Functional Requirements:

Following are some abstract-level functional requirements of the game. The students who selected this project will provide detailed requirements in SRS documents.

Visual Appearance:

•       The application should have two side-by-side windows.

•       The window on the left should be used to write or show the code of the C++ language.

•       The window on the right should show a visual representation of the code written in the left window.

Execution Modes:

There should be two execution modes.

•       One mode will be used to just show the visual representation of the code on the left into the right window.

•       The second mode should allow creating a visualization step by step by moving through the code.

•       Moving from one line to another in the code should display visual changes in the right window.

Basic Operations:

Users of the application should be able to perform basic operations of an array like:

•       Create and initialize an array of custom size, and its visual representation should show on the right window.

•       Users should be able to insert, update, and delete an array element using code, and these changes should show visually in the right window.

Advanced Operations:

The application should be able to perform following three operations on an array:

•       Users will provide an array with values and select the operations (linear search, binary search, bubble sort) from a list of advanced operations.

•       Selecting an operation should show its code in the left window and animation of the operation in the right window.