Tree Traversal
Students can easily see how trees are traversed in-order, pre-order, and post-order
Dr. Cheng noticed that most upper-division Computer Science courses at Sac State are mainly presented in a lecture format and most lack an interactive component like a lab. Compared with students in classes that offer labs, these other students often solely rely on lectures and self-study to grasp knowledge in upper-division classes, putting them at a disadvantage.
ALVIS aims to enhance the undergraduate curriculum by using user-controlled animated visualizers. These interactive animations will be for topics taught in Sac State upper-division Computer Science classes. Students will be able to change the parameters of the animations to help enhance their understanding of the concepts and make learning them more enjoyable.
Dr. Cheng believes that animated visualization can help the learning experiences of these students and increase engagement with what they are being taught.
The scope of the project is primarily to create a collection of interactive animation projects for several Computer Science courses at Sacramento State. Each animation visually illustrates the steps that occur in the algorithm, so that they can get a look at its internals. The parameters of the animations are easily adjusted by the students.
The business problem this project will address is to enhance the student’s understanding of the concepts such as binary tree, graphing algorithms, sorting algorithms, page replacement, and CPU scheduling algorithms. The business problem this project will address is to enhance the student’s understanding of the concepts such as binary tree, graphing algorithms, sorting algorithms, page replacement, and CPU scheduling algorithms.
The main goal of this project is to help students practice knowledge after class and before exams by using ALVIS. The instructor can use it to demonstrate the operation of these algorithms in class.
As ALVIS already existed as a Javascript web app, we expanded on its functionality and rewrote some of the existing code to a more modern standard.
Most notably, we added algorithms that are taught in the Sac State CSC130 course. These include Binary Trees(PreOrder, InOrder, and PostOrder search), Graphing algorithms(Prim, Dijkstras, and Kruskal) and Sorting algorithms(Insertion, Selection, Quick, Bubble, Heap, Shell).
Students can easily see how trees are traversed in-order, pre-order, and post-order
Students can create and map out paths with the graphing algorithms
Students can sort datasets with our sorting algorithm suite
Students can see how a CPU programs are schedueled with our CPU schedueling algorithm suite
Students can visualize how pages are stored in memory with our page replacement suite
Students can build their own disk schedueling graph with our disk schedueling suite
While looking through other visualizers, we noticed a theme of having a difficult syntax that users needed to follow. ALVIS gives a clean input format that allows users to easily build and modify datasets. This allows for students to easily recreate examples that teachers use in class, and helps the student visualize how specific these algorithms work.
In addition to this, we optimized the code that runs ALVIS by using a component-based in react. By doing this, we cut down on code redundancy and implemented a uniform and easy way for future developers to add in new classes and algorithms.
The ALVIS Algorithm Visualizer delivers a unique educational experience to those that wish to take advantage of it. ALVIS is a profile-based and interactive website to demonstrate core computer science subjects in action. Developed as a learning tool for teachers, and an engaging resource for students, or a primer for career-seeking graduates, ALVIS is catered to the needs of all academic outreach. Watch the visuals of ALVIS and seek to broaden your knowledge of various concepts in computer science!
For the front end, we used Reactjs with material UI for the user interface. We used d3 and Konva for the algorithm displays.
On the backend, we have our database running in PostgreSQL with Bcrypt in place for security.
To automatically run the front end of our website, we have Nginx with npm. To persistently keep the database running, we have pm2 keeping the database up as a daemon
For testing, we used Jest to automatically test ALVIS. This allowed us to keep watch on any crucial parts that might have been changed in ALVIS.
We started off development by making a business even table and context diagram. This allowed us to visualize how the program will be run.
We created a couple of low fidelity prototypes for our client to pick and choose parts from.
We finalized our prototyping by working with the client to create a high-fidelity prototype.
We planned out our backlog for the next coming months by creating a product backlog on flying donut. We also documented this in a product backlog documentation. We also created a prototype document that details all of the Business Events that ALVIS needed.
We started to update ALVIS, using the high fidelity prototype as an example to follow. We did a bulk of the UI updates in this phase, however, we did not implement the component-based layout in this phase.
In this phase, we added the old ALVIS functionality of the 139 algorithms into our new UI that we made. We also began to implement the 130 algorithms from scratch at this time.
We began work on implementing login capabilities for ALVIS. This meant we needed to start setting up the database. We also finished working on implementing the 130 algorithms.
We completely overhauled the previous ALVIS was organized, setting up a component-based display. This cut down on reused code. We continued to work on the login capabilities by adding in an authentication and cookie system. We also started to develop test cases for ALVIS during this sprint.
We deployed ALVIS onto the client’s server, however, we were having troubles with the database. Next, we documented all of the Algorithm page files, as well as added, gave detailed comments, giving future developers insights into how each algorithm was implemented. Finally, We created an instruction and time/space complexity section within each algorithm page.
We were able to get ALVIS working on the client’s target server with login capabilities. We also created the Testing Manual.
We finished off documentation by creating the user manual and the maintenance manual. We delivered these manuals and the final ALVIS code to our client.
While not currently implemented, we have laid the groundwork for other algorithms to be easily added to ALVIS. We also have provided information and documentation for later teams to implement previously discussed features like adding more classes, such as CSC 137, Sac State Single Sign-On, and Achievements.
Our team learned how to develop, test, and deploy a website properly using React. Many of us had never worked with React, let alone javascript. We constantly kept open communication with eachother, which made it easy to ask help from eachother.
As for deployment, we learned how set up the backend, build the frontend on a remote server, and deploy the website with both front and backend functionality. In order to deploy our project onto the Sacramento State ECS server, we kept in constant contact with IRT. This taught us that it's better to contact third parties that you are working with early on in the project development, in order to give them time to respond.
For testing, we learned how to automate our tests with Jest in order to save time and ensure that our project kept stable functionality.
Finally, this class showed us that software development is a group effort. The key to success lies within good communication and proper task management. After that, the rest of the project starts to fall in place.
First and foremost, we want to thank Dr. Yuan Cheng for giving us the opportunity to work on this project and for being an amazing client. We also wanted to thank our CSC 190 advisor Dr. Haiquan Chen and our CSC 191 advisor Dr. Jingwei Yang. Finally, we want to thank all of our friends and families who have supported us throughout this final senior project!