ataylor4 / seeplusplus

Project Description

Every quarter, CS106B students dread learning recursion and pointers, arguably the two hardest concepts in CS106B. We're excited to develop see++, a C++ memory visualization tool, to help students better understand how code affects memory. see++ lets students watch their code execute line by line, updating local variables as well as heap memory, helping them understand pointers in much greater detail.

Ultimately, see++ will help students understand pointers, the stack, and the heap in more detail and even debug their own code that manipulates linked lists and trees.

Marty Stepp, Senior Lecturer of CS106A/B/X at Stanford University, describes the need and use for see++:

I have taught introductory computer programming at the college level since 2001. In my experience, many students struggle with creating a proper mental model of the state of a program as it is running. The layout of the program and its data and state in memory, along with the changes to that state over time as the program runs, are very important for students to understand. Being able to simulate these aspects of a program's state helps students write correct code and find bugs in existing code. We instructors often draw pictures with boxes and labels to help students picture the variables and function call stacks in their code, but it can be tedious and error-prone to try to draw a new picture for every program.

In particular, data structures and recursion present challenges for many students. Recursion requires a deep understanding of a program's call stack, along with the various data and state for each call. Data structures such as linked lists and arrays produce complex references and pointers between different regions of the computer's memory. Maintaining an accurate mental model of a data structure such as a linked list is a challenging task, particularly if the structure is changing as the program is running.

Tools like See++ that help automate the visualization of such code are extremely valuable for students who are learning these challenging topics. I'm very excited about the See++ project and can't wait to show it to my students in the coming school year.

Below is an example of a visualization possible with our interface:

Getting Started

To use our tool, go to See++. To join development on our tool, please check out our Wiki.

Team Skills Matrix

Member	Skills	Personal Traits	Desired Growth	Weaknesses	Hat
Kashif	Full stack, Pedagogy	Will sit at computer for 16 hours straight	Working with a team	Often bogged down by details	Black
Ashley	Management, logistics, pedagogy, backend	Very detail-oriented, goal-oriented, deadline-driven	Design, product management	Web programming, creating a large code base, perfectionist	Green
Maria	Pedagogy, logistics, Documentation, digital systems	bubbly, optimistic, determined, diligent	Learning more front-end stuff	can be nitpicky, dislikes getting close to deadlines	Yellow
Lucy	Pedagogy, backend, NLP, UI/UX	Artistic and bubbly	More interface design experience	nitpicky, worries a lot	Red

Team Communication

Our internal communication is largely through Facebook Messenger. However, we are maintaining a Google Drive with our weekly blog posts and other team materials, which is available to view here. Others may communicate with our team through email.

Weekly Blog

Our blog posts are located in the Blog Posts folder in our Google Drive folder.

Brought To You By:

Kashif Nazir, Ashley Taylor, Lucy Wang, and Maria Yang