Denniszyz/cisc121-insertion-sort-trainer

Insertion Sort Decision Trainer

Demo video/gif/screenshot of test

Testing & Verification

Normal Case

[image]

Reverse Order Case

[image]

Sorted Values Case

[image]

Invalid Input Case

[image]

Quiz Mode Interaction 1

[image].png)

Quiz Mode Interaction 2

[image].png)

Quiz Mode Interaction 3

[image].png)

Testing & Verification

Problem Breakdown & Computational Thinking

Why I chose Insertion Sort

I chose Insertion Sort because it is simple to understand step by step and works very well in an interactive teaching app. It clearly shows how one key element moves left until it reaches the correct position.

Decomposition

• —Accept user input as a list of integers
• —Validate the input
• —Select the current key
• —Compare the key with elements on the left
• —Shift larger elements to the right
• —Insert the key into the correct position
• —Repeat until the entire list is sorted

Pattern Recognition

• —The same comparison process repeats for each pass
• —Larger values are shifted right
• —The key keeps moving left until it finds the correct position

Abstraction

• —The app hides low-level implementation details from the user
• —It focuses on the most important learning elements:
• —current key
• —compared element
• —sorted section
• —explanation of each step
• —quiz decision

Algorithm Design

Input → validate numbers → generate insertion sort steps → display one step at a time → update visualization, explanation, and quiz → continue until sorted

Algorithm Implementation

This application is written in Python and uses the insertion sort algorithm to sort numbers in ascending order.

The program:

• —parses and validates user input
• —generates detailed insertion sort steps
• —displays comparisons and shifts
• —highlights the sorted and unsorted portions
• —explains each step in plain language
• —includes a mini quiz mode where the user predicts whether the key should move left

This makes the program both functional and educational.

Use of Python Libraries for UI

This project uses the Gradio library to build an interactive web app interface.

Gradio is used for:

• —text input
• —control buttons
• —HTML visualization
• —explanation text
• —progress statistics
• —quiz interaction

The interface is designed to be beginner-friendly and easy to test.

Features

• —Step-by-step insertion sort visualization
• —Highlighting of sorted section, current key, and compared value
• —Random array generation
• —Next-step execution
• —Auto-finish mode
• —Reset button
• —Quiz mode for learning and engagement
• —Progress and statistics tracking

Steps to Run

1. 1.Install dependencies:

pip install -r requirements.txt

1. 1.Run the app:

python app.py

1. 1.Open the local Gradio link in your browser.

Hugging Face Link

Live App

Author & Acknowledgment

Author: Dennis Zhang

This project was created for the CISC 121 final project. ChatGPT was used as a support tool for brainstorming, structuring the project, debugging, and improving explanations.