Paper Reading #17: A code reuse interface for non-programmer middle school students

Comments
 Luke Roberts
Evin Schuchardt

Reference Information
Title: A code reuse interface for non-programmer middle school students
Authors: Paul A. Gross, Micah S. Herstand, Jordana W. Hodges, Caitlin L. Kelleher
Presentation Venue: IUI 2010: Proceedings of the 15th international conference on Intelligent user interfaces; February 7-10, 2009; Hong Kong, China

Summary
In this paper researchers discuss their work with Looking Glass, a system under development that allows people – particularly middle school aged students – learn programming skills through dragging graphical tiles and pop-up menus that allow them to create interactive 3D stories. They add to the Looking Glass system to allow users to reuse functionality from other preexisting programs. While a simple copy-and-paste of code will work for experienced programmers, their goal was to create a way for people who do not understand the code to still capture and reuse its functionality.

Taken from paper: a look at the user interface

To help users identify the part of the animation they want to use in their programmed animation, the researchers make use of a Time Slider and Scene Viewer to allow the user to select the proper start and end time of the animation visually, a Current Actions Pane that displays all methods being executed for a specific character at a selected time and a Code Viewer Pane to allow the user to view the appropriate code. They provide the user with a wizard-style interface to help the user actually extract and integrate the action into their own animation. With this process a user can take an action – say a man kicking a scientist down – and reuse the code for that action to make a kid kick down a samurai.

The researchers also discuss errors that could arise if the 3D objects are of different sizes or different subparts. They resolve these issues during copying by having the user reference subparts by name and choose more subparts if there is no match (like when one character wears a hat but another does not – the user would be asked to give the character a hat).

They did a user study with 47 students in sixth, seventh and eighth grade. They demonstrated the basic uses of the system and provided the students with three example programs. When asked questions, they suggested programs from an example library to encourage students to learn from the code and reuse the code. They also had the students break up into groups and show their animations to further encourage students to reuse animations.

Through their results they discovered that the program encouraged students to show each other how they did different animations. 77% of the actions used in the animation contained more than five lines of code, which the researchers consider non-trivial functionality. They also had the students take a programming quiz at the end of the study and found that students who made changes to the code of actions – rather than just copying them – performed better on the tests. Overall they found that their system helped students successfully select and integrate code.

Discussion
I really enjoyed reading about this system. It’s a neat way to introduce programming at a young age. It kind of reminds me of RPG Maker, which I remember playing with a lot during middle school. Allowing the student to see both a visual representation of their code and the actual code being used is a great way to help people new to coding understand how things work.

Future work that the researchers mention is creating a tutorial to help teach students how to build the code for an action. They are also thinking about creating a system that allows for a student to watch actions while they are recorded. This way when a user sees an action they want, they can stop the video and automatically begin the reuse process without have to go through the selection process.