Challenge

How do you make learning a language/literacy skill playful?

Problem

Topic

Teaching designers fundamental multimedia programming skills

Audience

Professional designers and design students, as well as educators and psychologists who are creating applications and interfaces.

Setting

Higher-education institutions/design schools, professional associations, workplaces/on-the-job training.

Problem

How do we create an approachable learning context for groups of designers with varying experience levels in computer programming so that students will achieve a sufficient enough level of self-efficacy that they will feel able to pursue code-related projects in their own multimedia/interactive work?

Resources

1. Hill, T., Smith, N. D., & Mann, M. F. (1986). Role of Efficacy Expectations in Predicting the Decision to Use Advanced Technologies: The Case of Computers. Journal of Applied Psychology, 72, 307-313.
2. Czajs, S., Charness, N., Fisk, A. D., Hertzog, C., Nair, S. N., Rogers, W. A., & Sharit, J. (2006). Factors Predicting the Use of Technology: Findings from the Center for Research and Education on Aging and Technology Enhancement (CREATE). Psychology and Aging, 21, 333-352.
3. Udama, L., Morrison, G. R. (2007). How do instructional designers use automated instructional design tool? Computers in Human Behavior, 23, 536-553.
4. Downey, A., Elkner, J. & Meyers, C. (n.d.). How to Think Like a Computer Scientist: Python Version. Retrieved February 11, 2007 from http://www.greenteapress.com/thinkpython/html/
5. Massachusetts Institute of Technology. June 18, 2002. Introduction to Logo Blocks.Retrieved February 26, 2007 from http://llk.media.mit.edu/projects/cricket...
6. The Gunakara Sun Systems. (n.d.). Prograph 1.1. Retrieved February 26, 2007 from http://www.mactech.com/articles/mactech/....

Concept

What are people going to learn? And why? What form will it take?

I intend to teach the fundamentals of multimedia programming to interface designers who have not had much exposure to programming. I will use a graphical programming language that guides players to build simple programs from a limited set of programming blocks. By doing this, players will gain an increased proficiency with programming skills and an increased sense of self-efficacy when approaching problems that require coding. It is hoped that this will enable the users to feel that they can pursue more difficult tasks on their own.

The game I will build is called Alien Pet Shop. The player is the chief mechanic of a funky store that sells unusual, customized pets to discerning customers. The mechanic's job is to build and expand the store's ordering system to allow for different kinds of requests. In the process of working on the store's machine, players will be introduced to important programming concepts suchs as variables, control structures, and functions.

Using the store as a metaphor for an interactive process, users will read the kind of inputs given to them by users. At first, the input will be very simple. Customers will ask for a specific type of pet, such as the "rudbud." The player will then set up a "plan" that will allow for a "type" request to come into the system.

After the request is in the system, the real work begins. The player will add a new "action" to the plan. The action will take the input and perform work to try and get the proper outcome.

The player can edit their actions to work with the kinds of requests that come through. For example, if the customer has asked for a "rudbud," then their action will simply be a condition that asks if the type equals "rudbud" and then returns that pet to the output.

As the player completes the simple challenges, different kinds of orders will start to come in. A customer might ask for a "red" pet. The player will then work with that input and return a set of new choices to the customer, based on which pets are red.

A further advancement will be customizable pets. A customer might ask for a "rudbud" with 5 legs instead of 3, which would require the player to set up a loop that can add legs to the pet based on the type and quantity requested.

By setting up increasingly challenging processes to manage the store, the player, as mechanic, will have to write more and more accommodating "code" to make the system work.

As they progress in complexity, they will see their work on the graphical code editor represented as an actual programming language in the code window. By showing the player multiple syntaxs, they will get used to the idea that the work they are doing in the graphical editor relates directly to the code produced in the code window.

A further advancement would encourage the player to start using the code window for complex scripts, and submitting the to the "machine." This would give the user their first taste of writing code, but would still keep the training wheels of the graphical system handy if they get stuck.

Idea Sketches

Take a look at the gallery.

Purpose

The purpose of this game is for professional interface designers to gain an increased proficiency with programming skills and an increased sense of self-efficacy when approaching problems that require coding. From this starting point, it is hoped that students will feel they can advance farther in programming than they otherwise thought they could have.

Structure

The Main Flow of the Game The main movement in the game begins with a new challenge posed by the fictional clients. In the first few runs, the player is assisted by the Master Mechanic. The MM guides the player through the process of selecting inputs from the order, setting up the plan, and, most crucially, "writing" the code. The MM prompts the player through the early challenges and points the player toward the right tools from a limited set that represent actual coding concepts.

Once the plan is complete and the code has been written, the plan is run. The player can see how the code operates with the input as each step is highlighted as it gets executed (see below.) Then a new challenge is initiated. Eventually, the MM takes a long and well-deserved vacation and the player is left to handle the challenge based on what they've learned.

Model

The Master Mechanic The model for this game is a highly-colorful alien pet shop. The palette for both the game pieces and the rest of the art is a saturated and contrasting, emphasizing fun and the odd funkiness of this futuristic enterprise. The game pieces themselves are large and block-like, and designed to suggest a pairing or an action without much additional prompting.

Taking a look at the attached PDF file (see bottom of this page,) the building of the code becomes apparent. The initial levels are guided by the Master Mechanic and prompts on the menu items, put the pieces themselves fit together consistently through the play of the game. In addition to explicit hints from the MM and implicit hints on the shapes, other elements appear the help guide likely pieces together, so that a user who drags an item around long enough will receive clues as the matching pieces near each other.

By using the simple set of cues, the player begins to see a fully formed program taking shape. This program is represented graphically in the main window, and takes more concrete shape in a side window in actual code that the player can grab, save, and manipulate more expertly as they progress in the game.

Evaluation

In the future, I want to focus on increasing the visual representation of what is happening, particularly in line with the machine/factory metaphor. By showing what actually happens as the pet is selected or constructed, it could reinforce important points along the "plan's" execution path. Increasing this tie to the central metaphor can help visual learners tie down the concepts to their own already sophisticated visual understanding.