about img

Visual modeling for algebra learners

OUR CODE

Project Origins

From Northfield Middle School to Carleton College Comps Project

We created AlgeBar for our senior comps project at Carleton College. Our goal was to provide students with an intuitive bar modeling environment to solve algebra equations, present instant feedback about their solutions, and allow their teacher to view their progress in real time. We determined the goals of this project in collaboration with Dan Meyers, a teacher at Northfield Middle School, who instructs remedial math courses for 6th-8th grade students. He has introduced bar modeling, a visual technique for representing and solving math problems, to his students in the past using the iPad app Thinking Blocks. However, since Thinking Blocks has little algebra material, he proposed the idea of creating a curriculum to extend bar modeling to algebra, and we created AlgeBar as a supplement to this curriculum.

The curriculum that teaches bar modeling as a technique for solving algebra equations was created by another group from the Math department at Carleton College for their senior comps project. The problems given in AlgeBar, as well as decisions about which features to include in the bar modeling environment on the application, come from them. They found that bar modeling can help students gain insights and understanding into the standard procedural methods they have likely already learned in school. To learn more about the curriculum that they developed you can check out their final project website.


Our Product

Overview

AlgeBar is an iPad application which functions as a supplement to a bar modeling curriculum aimed at middle school students. Students may track their progress through 4 levels of problems and teachers can compare student progress within classrooms to identify struggling students.

Login Screen

about img

Login Screen

Our login screen welcomes users to Algebar. From here they can login using google authentication, which we decided to use to make sure that confidential information is handled safely. If users have an account, we automatically send them to the correct dashboard, either student or teacher. Otherwise we prompt users to make an account, and with a single click they are into Algebar

Features

  • Easy and intuitive login
  • Enhanced security through the use of google authentication
  • Different accounts for teachers and students

Teacher Dashboard

Demo

The user sings into a teacher account and is directed to the teacher dashboard. The teacher observes their class named "Second Hour" in Student and Overview mode. They are also able to find the ID for their class by clicking the "Add Students" button. The user demonstrates adding and deleting a class, and navigates to the Student Dashboard. The Student Dashboard is in Teacher Mode, so that the user may access all levels.

Features

  • Table displays classes owned by the teacher
  • Add or delete classes
  • Displays students in a particular class by level individually or as a graph
  • Allows access to class ID for sharing with students
  • Can navigate to the problem selector and log out

Student Dashboard

Demo

Here the user makes a student account and is directed to the student dashboard. The user then looks at some tips for the app, joins a classroom, and proceeds to a level 1 problem. After submitting the answer to the problem, the user achieves one star for level 1. When the user goes back to the student dashboard, we can see that the level 1 button reflects the user’s progress.

Features

  • Join or leave an existing classroom
  • Access problem screen
  • View progress on each level
  • Real time updates on user’s information
  • View tips for approaching the student dashboard and problem screen

Problem Screen

about img

Check it out

In this image, you see how a student might use bar modeling to solve an algebraic problem on paper. In our video, you see how a student might solve the same problem in AlgeBar.

Features

  • Build bars by snapping blocks to the right of the black rectangles
  • Perform subtraction using the vortex
  • Change block value and size
  • Remove blocks using the garbage can and clear screen
  • Submit the correct answer and receive the next problem

Server Side

about img

Our Architecture Map

You can see here basic architecture of our program. We wanted a server so that students could save progress, teachers could see their student's progress, and so problems could be easily updated or added. We came up with this architecture plan. Every blue circle is a screen, and the screens can call the API Connector. The API Connector communicates through the internet with our server. The server has a database where it stores data, which can be updated or returned to the user.

Features

  • Handles asynchronous API calls, so the data acquisition can happen seamlessly
  • Can implement advanced error handling, so that no matter what happens the user is informed
  • Stores user progress, classroom data, and teacher data
  • Allows for easy update of problems, which are stored in the database

Our Team

about img

Developed By:

Sam Neubauer, Marco Dow, Wanchen Yao, Brynna Mering, Zoe Peterson, Meg Crenshaw

Special thanks to our advisor Anna Rafferty (not pictured)