Core Concept

This prototype is intended to be a visualization of parameter passing for functions.

Why

Parameter passing is one of the hardest concepts to teach according to our survey of local computer science and technology teachers. Parameter passing is difficult for beginning students because the process of passing a parameter to a function and getting a different value back is not intuitive. We therefore wanted to make a prototype that could illustrate this exact process. 

The Pitch

This prototype was originally pitched as a clothing shop where players would combine fabrics, patterns, and dyes to make clothing to put on mannequins behind them. Each element would require sending a robot to a neighboring shop to combine materials into something more useful. The interaction of giving the robots the appropriate materials and having them move to neighboring shops and come back with the result has remained the same, but we adjusted the theme because making clothes did not offer enough distinct types of materials to combine.

The Actual Experience

Jumping Robot Prototype is a Virtual Reality experience in Oculus Rift that aims to illustrate the concept of parameter passing in functions. In this prototype, the player is expected to assemble a jumping robot given materials on their hand. The player is required to place the right material onto the right spot on the window ledge. Each window in the game represents different functions. Moreover, the player is expected to follow the sequence required in the game: to make a jumping robot, player needs to make a robot model first, then a textured robot model, and then finally a jumping robot.

Build a jumping robot given the materials you have in your inventory! Be careful with the material type and the procedure!

Key Interactions

1. The player is required to place the right material onto the right spot on the window ledge. Each window in the game represent a different function.
2. When the correct materials are presented, the robot will walk away to the neighboring shop and come back with the results of combining the materials it was given.
3. Moreover, the player is expected to follow the sequence required in the game: to make a jumping robot, player needs to make a robot model first, then a textured robot model, and then finally a jumping robot.

Key Lessons

1. Restriction on types: material passed onto the circle must have the same type as required by the circle
2. Parameter passing: the process of robot taking the materials to the factory and taking the built model back resembles the process of parameter passing for a function.

Step by Step Walkthrough Guide

Team Goals

Week 1

For the first week, we aimed to finalize the basic design for the prototype. We transitioned from using making clothes as a metaphor of parameter passing to using making a jumping robot.

Week2

For the second week, our target was to get the minimal viable version of our prototype done.

Week 3

For the third week, our target was to finish our prototype and playtest with students and teachers to get useful feedbacks as to whether or not this sort of interactive visualization actually helps students understand the concept of parameter passing.

Lessons Learned

Throughout the iterations of Jumping Robot, we made several decisions that made this prototype more effective. At the beginning, we planned to have this prototype be about making clothes, but then we realized that materials for clothes were not that easy to make digitally. We then shifted to an experience about making models.

At first we were surprised and a bit confused that parameter passing was so confusing to students, but it turned out that following the problem shown by the survey and the advice from the instructors was the right thing to do. From the teachers’ responses, we found that this really helped illustrate the idea of parameter passing.

Usability:

Since the prototype focuses more on teaching the concept, some of the usability settings are not satisfying enough. For instance, the button to send the robot away is not visually obvious, so players get confused easily once they have put the materials on the window ledge.

Teaching:

This prototype received recognition from many teachers thanks to the use of robots walking to represent parameter passing. The process of the robots taking the parameter towards the shop and coming back with a finished product exactly corresponds to what happens when a program calls a function and gets a returned value.

We did find that the error feedback for wrong type/wrong order of materials is not especially apparent, and having that would have made this an even stronger teaching tool. Additionally, that feedback could potentially be customized to reflect how different programming languages handle type checking.

Role in a Lesson

This experience could help new programmers understand the concept of parameter passing for functions, followed up with code-based practices.

Besides being used as a primer for parameter passing, it also has the potential to illustrate the concept of classes and objects, and the workflow of compiler. The items in your left-hand inventory can be seen as “classes”, and by dragging you created a new item of that class. The process of the robots taking away your materials and making a product out of them resembles how functions work internally. It could also possibly explain the difference between Python and Java, if we add the process of compilation to set up the robot workflow.

In programming terms:

• The material corresponds to parameters.
• Different materials are equivalent different types of parameters.
• The robot we made corresponds to object and return value.
• The factories correspond to functions.

This prototype can be used in companion with the pseudo-code provided below, which is a code representation of what happens in the prototype.

//Function1
Model GenerateModel(ModelDesign md, Cube cb) {
     //generate a basic model from model design and cube
     return model;
}

//Function 2
TexturedModel GenerateTexturedModel(TextureDesign td, Model model) {
     //generate a textured model from a basic model and textured design
     return tmodel;
}

//Function 3
AnimatedModel GenerateAnimatedModel(AnimDesign md, TexturedModel tmodel) {
     //generate an animated model from a textured model and textured model
     return amodel;
}

Ideas for future Development

• Add more materials so that players have more options to choose different materials to build different objects, reflecting that there can be many different instances of the same type of parameter.
• Build versions for Python and Java to illustrate the difference in type checking between these two languages.
• Build versions for pass by value and pass by reference to illustrate the difference between these two.

Teacher Reaction

Overall, the teachers we’ve shown this experience to have thought this prototype definitely illustrates the concept of parameter passing. Specifically, the process of robots taking away raw materials and coming back with a new item corresponds to the idea of passing information to functions via parameters and receiving something else from the function via the return statement.

Student Reaction

Students were entertained by the experience of creating a jumping robot. However, we realized that the prototype would need to go with certain kind of teaching material to build the connection between the prototype and the concept of parameter passing.

Thoughts From the Team

Zach – I think this prototype represent the concept well. Since the interactions are too simple and don’t require the user to think much. the player probably will enjoy the game interaction experience instead of thinking deeply enough about the CS concept.

Joe – I think this prototype introduces parameter passing in a very detailed and realistic way for people to form a basic sense of this the very abstract but fundamental topic in programming. As each phrase represents a related stage in parameter passing. For instance, the fetching from inventory and put it in the input spot is like making a copy from the original variable, passing the parameters for further processing inside the function is like the robot carrying the stuff back and forth. Also the parameter validation and using the returned value from one function inside another function is also represented in this game.

Jiawen – This prototype benefits a lot from previous prototypes. It demonstrates the idea of parameter passing clearly in an interesting way. If we have time to allow more valid operations, more functions, it could direct be a lesson. It might even be used to demonstrate class, and other type related concepts.

Nick – This prototype is an exemplar that illustrates parameter passing for function. The setup, the mechanics and the interactions all match with what is going on with function when parameter are being passed in. The robot passing the parameter to the house and coming back with a returned product corresponds to the process of function getting the parameter and return a new value back. The process of passing is very well illustrated by robot walking towards the house. However, this prototype still needs some refinement in terms of error and success feedback. These will be the essential learning moments in the game. For instance, if the player faltered, he would think why, and the thinking process is exactly what leads him/her to learn the concept.

Miriam – I really like this prototype. I think that it really fulfills the design goal of being something that would be easy for teachers to refer to during a lesson. Each element of the experience corresponds to something to do with parameter passing. Because of that, there are also lots of ways this prototype could be extended to include more detail like how different programming languages respond when parameters of the wrong type are passed to a function. There is definitely room for improvement; I would like to have seen some way to visually match the items and the places they go on the ledges beyond just words. However, I think ultimately this prototype has been quite successful and it one I would enjoy seeing developed further.

Luna – I like the fact that it really aligned with the concept. It is fairly simple, but reveals a relatively deep concept of parameter passing that is vague to most of beginning students. The key moment that the robot takes inputs away and returns with outcome is very intuitive for most of playtesters.

Click Here to Get the Code for Yourself and Try it Out

Further Reading

If you’d like to learn more about this prototype and its development, check out these blog posts:

1. Week 8: Refining and Preparing
2. Week 10: Playtesting and More
3. Week 11: Steady Progress
4. Week 12: Wrapping Up Development