A Code Reuse Interface for Non-Programmer Middle School Students Paul A. Gross1, Micah S. Herstand1, Jordana W. Hodges2, Caitlin L. Kelleher1 Washington University in St. Louis1 The University of North Carolina at Charlotte2 One Brookings Dr., St. Louis, MO 63130 9201 University City Blvd, Charlotte, NC 28223 {grosspa, herstandm, ckelleher}@cse.wustl.edu [email protected] ABSTRACT that users of Storytelling Alice were more than three times We describe a code reuse tool for use in the Looking Glass as likely to sneak extra time to program than users of a non- IDE, the successor to Storytelling Alice [17], which enables story based version of the same environment [18]. While middle school students with little to no programming encouraging, this study focused solely on users’ first two to experience to reuse functionality they find in programs three hours of programming. written by others. Users (1) record a feature to reuse, (2) find code responsible for the feature, (3) abstract the code Enabling middle school students to learn new skills by into a reusable Actionscript by describing object “roles,” reusing and adapting each others’ code may encourage and (4) integrate the Actionscript into another program. An more of them to explore computer programming over the exploratory study with middle school students indicates longer term. This paper introduces an interface that enables they can successfully reuse code. Further, 36 of the 47 users students to reuse others’ code without requiring that they appropriated new programming constructs through the understand how the program code works. process of reuse. Imagine that a user named Eva is creating an animation that Author Keywords tells a story about a girl named Melly who develops super Code reuse, non-programmer, end user, middle school, strength. Eva remembers seeing a story in which a secret Looking Glass, Storytelling Alice. agent character jumped into an evil doctor and the doctor toppled over. Eva wants Melly to jump into a house and ACM Classification Keywords knock it over. H.5.2 [Information interfaces and presentation]: User Interfaces. To enable this, our code reuse tool guides users through the processes of selecting and integrating code [13]. General Terms Specifically users: Human Factors 1. Record the execution of the program containing the INTRODUCTION functionality of interest. Middle school is a critical time when many students, 2. Identify the beginning and ending of the functionality of particularly female students, decide whether they are interest. interested in pursuing math- and science-based careers [7, 3. Abstract the code responsible for the functionality by 36]. At a time when the gap between male and female describing the roles that each character in the participation in undergraduate computer science is functionality plays. widening [37], the rarity of computer science teachers and opportunities to explore computing at the middle school We save the abstracted version of the code as an level is unfortunate. Programming environments that intermediate code representation called an Actionscript. To provide a motivating and supportive context for learning to use the Actionscript, the user selects characters from a new program may help increase the number of students program to act out the roles in the Actionscript. interested in exploring computing. To explore the potential for code reuse tools in a social Prior research on programming environments demonstrated learning environment, we conducted an exploratory study in that storytelling can provide a compelling context to learn the context of a summer science camp for at-risk middle computer programming, particularly for middle school girls school students. We found that users were able to [17]. A formal study of girls’ programming behavior found successfully reuse code with our tool. Further, the process of selecting code for reuse helped some users to develop an understanding of new programming constructs, which they Permission to make digital or hard copies of all or part of this work for successfully used outside of the context of Actionscripts. personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies As a next step, we plan to generate tutorials that will guide bear this notice and the full citation on the first page. To copy otherwise, users through reconstructing the Actionscript code in their or republish, to post on servers or to redistribute to lists, requires prior new program. specific permission and/or a fee. IUI’10, February 7–10, 2010, Hong Kong, China. Copyright 2010 ACM 978-1-60558-515-4/10/02...$10.00. 219 RELATED WORK Our related work spans two areas: software reuse and end- user program sharing. Software Reuse Researchers have identified a number of activities that are a part of code reuse [20, 26, 29]. Holmes [13] suggests that code reuse consists of three fundamental phases: location, selection, and integration. While much of the research in code reuse focuses on professional developers [35], some researchers have explored small-scale reuse [4]. Other work explores reuse through demonstration [10, 22]. Location During the location stage, users search for software artifacts Figure 1. Looking Glass where a user programs by (1) that may contain source code relevant to their task (not to dragging a method, (2) dropping it into the code pane, and (3) be confused with searching in source code to determine if selecting parameters. part of it is suitable for reuse). Many tools exist for assisting Using d.mix, a user can identify reusable components on an programmers in locating relevant source code (reviews in arbitrary web page, select components to reuse, and [14, 23, 27]). Some recent work focuses on finding code integrate them into a working wiki page [10]. Like d.mix, examples either on the web [11] or through tools integrated our system supports non-programmers through the selection with an IDE [1, 8, 14, 31, 34]. and integration steps, however d.mix generates static web Selection API calls where our system can capture and reuse dynamic In the selection phase, users try to identify the code behaviors. responsible for functionality of interest, understand it, End User Program Sharing determine its reusability, and extract it for reuse. There is a long history of designing programming The process of identifying and understanding the code environments for novice programmers [16]. To the best of responsible for particular functionality is difficult for non- our knowledge, none of these systems focus on enabling programmers [9]. Systems for end user programmers, who code reuse. Users of MOOSE Crossing could copy and typically have limited programming experience, employ a customize or extend scripts written by other users [2]. variety of techniques to help users identify and understand Scratch [25] directly supports sharing through a web relevant code. FireCrystal [28] enables users to record web repository, but users share entire programs and there is no browser events and view the Javascript and CSS code that integration support for reusing sprite behaviors dependent executed as a result of the events. The WYSIWYT on other sprites. spreadsheet environment [30] helps provides a visualization LOOKING GLASS of cell dependencies. The Whyline [19] allows end users to We built our code reuse tools into Looking Glass, the pose “why” and “why not” questions about program successor to Storytelling Alice that is under development. behavior and receive answers directly related to runtime Like Storytelling Alice, Looking Glass is designed to information. enable users to create interactive 3D animated stories. To Program understanding tools typically employ program prevent users from making syntax errors, Looking Glass visualizations to help professional programmers grapple users drag graphical tiles representing methods or with feature and fault localization (e.g., [21, 24, 32, 33]). programming constructs, drop them into a program editor Effective use of these visualizations requires knowledge area, and select parameter values through pop-up menus that non-programmers are unlikely to have. (see Figure 1). The environment supports common programming constructs such as loops and if-statements. Integration Additionally, the do together construct enables users to For the integration phase, users must insert the selected have statements in Looking Glass execute concurrently. code into their own code and adapt it for their own context. For Java developers, Jigsaw [4] evaluates structural and CODE REUSE TOOLS semantic information from a code source to manage Enabling users to reuse functionality from programs created dependencies and recreate missing functionality during by others requires supporting them in three basic activities: integration to a new program. CReN [15] and CloneTracker 1. Finding the code responsible for the target functionality. [5] attempt to manage variable references in multiple 2. Extracting the responsible code from its original cloned code locations. program. Currently there are no tools for general end-to-end software 3. Integrating the responsible code into a new context. reuse [13]. However, d.mix, a recent web programming For experienced programmers, an intelligent copy and paste system, helps users with the selection and integration steps. system might be sufficient to enable code reuse. However, 220 our goal is to enable new programmers to reuse code without requiring that they understand how that code works. In an educational system, this may seem strange. Our eventual goal is to have users select functionality they want to reuse and then complete a tutorial guiding them through building that functionality in their own program. We believe the high level strategy of selecting code without fully understanding it and reconstructing the code to build understanding has two strong advantages: 1. If users build the selected functionality step by step, they will see the impact of each new line and each change. We believe it will be easier for users to understand new functionality by constructing it themselves rather than by exploring potentially Figure 2.