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. The History tool interface: (1) Time Slider for complex, fully functional code. scrubbing through time, (2) Scene Viewer shows the scene at 2. Users are motivated to build their own stories [17]. We the selected time, (3) Current Actions Pane shows what believe that enabling users to construct the new actions characters did at the selected time, and (4) Annotated functionality in the context of their own story will align Code View selects the executing line(s) of code, affords block and statement playback, and navigational controls. with their natural motivation. 1. Users struggle to match their motion descriptions to To help users find the code responsible for functionality method names and parameters in the code. they want to reuse, we enable users to navigate the code 2. Users often fail to fully navigate relevant code. based on observable output. After users identify the 3. Users do not recognize temporal relationships in beginning and ending points of the functionality they want programs containing constructs such as loops, do to reuse, they can extract the code responsible and integrate togethers (i.e., a concurrency block), or method calls. it into another program using wizard-style interfaces. Identifying Functionality for Reuse We designed a history tool to address these barriers by Previous research on how new programmers approach the helping users identify what code is executing and connect problem of identifying the code responsible for observable the code with visual output. This history tool is integrated output found that new programmers employ a cyclic search into the code reuse process. The history tool interface process. New programmers (1) identify a search target in includes four components: (1) the Time Slider, (2) the the output (or code), (2) search for potentially matching Scene Viewer, (3) the Current Actions Pane, and (4) the lines of code (or output actions) and (3) repeat (changing Code View Pane (see Figure 2). from output to code or vice versa) until there are enough The Time Slider (1) enables users to scrub forward and matches to form a solution. This process was not very backward through the program’s recorded history. successful for non-programmers; users successfully found the code responsible for a specific output feature only 41% The Scene Viewer (2) displays the scene’s appearance at the of the time [9]. selected time. To find an action of interest, a user can scrub through recorded history using the Time Slider until he or The study identified several barriers contributing to non- she sees the action of interest shown in the scene viewer. programmers lack of success, including: The Current Actions Pane (3) shows all methods executing
Figure 3. Overview of process for selecting and integrating code for reuse.
221 at the selected time, organized by character. To determine what a particular character (e.g., geoffrey) was doing at the selected time, the user can expand “geoffery’s Actions.” The expanded view shows which individual statements were executing and the methods from which they were called. The user can navigate to a statement or method call by clicking on it. The Code View Pane will update to display the statement that the user clicked. Finally, the Code View Pane (4) presents a view of the executed code in the latest run of the program. The statement that executed at the selected time is highlighted in green. A play button next to the executing statement enables users to play back all of the images captured while Figure 4. Recording the program to capture that statement executed. Buttons on the right side of the a feature for reuse. interface enable users to zoom in on block statements Figure 4) which loads the history tool to help her find Wizards for Extraction and Integration where the agent’s jump and knock over begins and ends A wizard-style interface guides users through extracting the (see Figure 5). selected code. We abstract the extracted code and save it Step 2: To find where the agent began to jump, Eva drags into an intermediary form we call an Actionscript. the Time Slider (Fig. 5a, circle 1) back until she sees the A second wizard-style interface allows users to select which agent start to move up (Fig. 5a, circle 2). At the selected characters will perform the actions recorded in the time, the Current Actions Pane (Fig. 5b) indicates the agent Actionscript. After users assign characters to each role in and the doctor are active. Users’ programs often contain the Actionscript, we generate the code necessary for the simultaneously executing statements using the do together actions encoded in the Actionscript. construct [9]. Figure 3 shows the process overview for identifying and Because Eva is interested in the agent’s actions, she reusing a section of code. In the remainder of this section, expands “agent’s Actions” in the Current Actions Pane. In we describe the process of reusing a section of code. this example, Eva clicks on move up. This action occurs within the method jumpkick, which is not currently shown Usage Scenario – Recording an Actionscript in the code view (Fig 5a, circle 4). When Eva clicks the In the introduction, we described a scenario in which a user link, the history tool opens the jumpkick method in the named Eva wants to reuse an agent’s action of jumping and code view and selects the move up method in green (Fig. knocking over an evil doctor in her story about super-strong 5c). Eva clicks the play button to the statement’s left, which Melly. Creating an Actionscript for the jump and knock animates through the series of images recorded while the over action requires five steps that are presented through a line of code executed. wizard-style interface. At this point, Eva has found the beginning of the actions Step 1: Eva records the actions occurring in the agent’s that comprise the jump and knock over. She selects the story (i.e., the tool constructs a dynamic execution trace for “start” arrow next to the move up action to indicate that the the history tool) until after the agent’s fall is complete. At code to reuse begins with this action. the bottom of the record panel, Eva clicks a next button (see
Figure 5. (a) The history tool for selecting the beginning of a feature. (b) After expanding an object’s current actions to see action links. (c) After clicking an action link to show a new method in the code view and selecting a statement as the beginning.
222 Figure 8. Choosing an Actionscript to reuse. Melly program and her Actionscript library (see Figure 8). She selects the “Jump and Knock Down” Actionscript she recorded earlier. Figure 6. Reviewing an Actionscript to To incorporate the jump and knock down action into her ensure the functionality is captured. current program, Eva selects the character who she wants to Step 3: To find the end action, Eva can scrub forward in jump and knock over another object (see Figure 9). time to find where the doctor falls. She can use a similar Once Eva assigns all roles and presses “Add Actionscript,” process as described in Step 2 to identify the final statement Looking Glass generates all the code necessary for the that is the end of the functionality to reuse. chosen actors to perform the actions recorded in the script. Step 4: With the beginning and ending of the functionality The code is stored in a global method called she wants to reuse identified, Eva can play through the “Jump_and_Knock_Down,” which Eva can invoke or edit selected actions to confirm she selected the correct (see Figure 10). Looking Glass also adds an invocation of functionality (see Figure 6). If Eva decides that she prefers Jump_And_Knock_Down to the beginning of the program a different beginning or ending, she can return to the so Eva may immediately view it by running the program. previous steps to make changes. IMPLEMENTATION Step 5: In the final step, Eva names and describes her Our system for selection and integration has five steps: Actionscript (see Figure 7). The names and descriptions 1. Based on the user’s start and end statement selections, help her to remember the functionality in the Actionscript we extract the responsible code from an execution trace. and what each character did. Eva names her Actionscript 2. We ensure all local references in the extracted code are “Jump and Knock Down” and describes the roles each declared to prevent integration syntax errors. character played in the extracted code. In this example, she describes the agent’s role as “Jumper” and the doctor’s role as “Thing knocked over”. Looking Glass saves the completed Actionscript in Eva’s library for later use. Usage Scenario – Using an Actionscript To use her Actionscript, Eva opens the super-strength
Figure 9. Choosing objects to play the roles that were recorded in the ActionScript.
Figure 7. Abstracting the selected code into an Actionscript by naming object’s roles. Figure 10. The Actionscript is added as a global method.
223
3. To enable type-safe integration, we determine the object class. If we assigned table to the ‘walker’ role, this would types that can fill roles. violate type safety and cause a run-time error. 4. We parameterize the extracted code by roles to make it To determine which characters and scenery objects can reusable and store it in an Actionscript. safely fill roles in an Actionscript, we must determine the 5. When the user integrates an Actionscript, we generate class that implements a role’s most specific type reference. new code with the characters and scenery objects the To accomplish this, we crawl the extracted code to find user selects to play each role. expressions that directly and indirectly reference character Extracting the Responsible Code and scenery objects. Because the extracted code is static, To extract the code responsible for the functionality the we use expressions’ runtime evaluations from the captured user wants to reuse requires that we 1) enable the user to program execution (e.g., function result, variable access) to select functionality based on the observable output and 2) resolve indirect references. The expressions’ types link the selected functionality to the program statements determine a role’s most specific type reference. responsible for producing that output. Creating an Actionscript We continuously capture time-tagged screenshots of the At this point in the process, we have extracted all the code output to enable users to select functionality to reuse. These responsible for the user’s desired functionality and images are used later in the interface to help the user choose determined which object types are safe to fill the roles the appropriate start and end statements executing at the present in the code. Next, we need to store this information appropriate times by showing what the scene looked like at in a form that will allow us to easily reuse it at a later time: a selected time. our Actionscript. Actionscripts contain a copy of the extracted code, parameterized by the roles, and role To link the selected functionality to the program code information. Because potential conflicts with local and responsible for it, we capture and structure the executed dynamic dependencies have been resolved in the previous program into a tree that affords easily extracting the steps, we can use this information to perform a simple responsible code. The tree represents execution periods and object substitution and code copy operation. program structure as subtrees. Each tree node contains a reference to a statement that executed and the statement’s Integrating an Actionscript execution time range. Each child node’s time range is To integrate an Actionscript into a new program requires contained in its parent’s time range and its statement two steps: 1) the user selects objects to fill the executed in its parent’s context (e.g., a method call that Actionscript’s roles, and 2) we copy the Actionscript’s code executed within a loop). When a user selects start and end into the new program. statements, we find the lowest common ancestor of the Because an Actionscript’s code is parameterized by its statements. We then quickly prune the subtree by traversing roles, a user must choose objects to fill the Actionscript’s the common ancestor’s time-sorted children and discarding roles to use the Actionscript. To ensure type safety while nodes not in the start and end statement’s time range. integrating an Actionscript, we use the roles’ most specific We use the timing information to link the images and type reference information to present users with a list of program execution events within the user interface. characters and scenery objects in their program that can safely fill the roles. Avoiding Compilation Errors in Extracted Code The extracted code will not compile later if it contains With the objects filling the roles selected, we can then copy references to locals not declared in the extracted code. To the Actionscript’s code and substitute in the chosen objects; account for this, we record any local declarations and but we must ensure all chosen objects are in scope for the modifications occurring in children of the common ancestor contexts they will be used. We avoid the scope issue by that execute before the first relevant statement. If any copying the code into a new method of the program’s Scene extracted code references an undeclared local parameter or class. The Scene class has all program objects as fields; variable, then we add all recorded statements affecting the thus any object reference in a Scene class method is in local to the beginning of the extracted code. scope. Additionally, every Looking Glass program contains a globally available Scene instance, allowing an invocation Avoiding Runtime Errors in Extracted Code Allowing any object to fill any Actionscript’s role can of a Scene class method in any context. violate type safety during integration and cause run-time Differences in the body structure of different graphical errors later. For instance, assume a user creates the role objects create another potential source of integration ‘walker’ from a person, like the agent, and the role invokes problems. Because 3D objects can have different subparts, the walk method on the object filling the role. Then a user type safety does not prevent all possible errors. Suppose a can only safely fill the ‘walker’ role with objects inheriting user creates a role from a Samurai which turns the from the class implementing the walk method (i.e., the Samurai’s helmet subpart. The user may later assign a Person class). For example, an object like a table cannot fill Coach to safely fill this role, but the Coach does not have a the ‘walker’ role because a table does not extend the Person helmet subpart to turn. If unchanged, a run-time error will
224 occur when the program tries to turn the Coach’s helmet. Day 1 User methods, count loop, do together Because the error results from a role assignment, it cannot Day 2 If/else, while loop, functions be resolved earlier. During copying, we match referenced Day 3 Sequential blocks in do togethers, sequential subparts by name (e.g., the role references a helmet and the iteration over a list, parallel execution over a list object filling the role has a helmet) but defer to the user Table 1. Concepts and constructs in daily example programs when a suitable match is not found (e.g., user chooses a hat character, making characters perform actions by dragging to substitute for the helmet). and dropping method invocations, and running the program. Implementation Limitations We also introduced students to our code reuse interface. Our approach has two major limiting factors. To enable students to teach themselves new programming First, because Looking Glass is designed for middle school concepts through reuse, we provided each student with students, we elected not to support full inheritance through three example programs on each of the first three days. We the programming environment. Hence our implementation designed the three example programs to contain motivating cannot resolve class hierarchy conflicts like other systems animations to be reused in other stories, and to illustrate a for integration [4]. For instance, iterating over an array of set of focus concepts for that day. The focal language Samurais to invoke the Samurai class method backflip concepts and constructs for each day are listed in Table 1. cannot be abstracted to a super class with a backflip method Each day, the students had access to the programs for the for two roles to inherit from. Thus we cannot assign two current day and all the previous days for that session. different types of objects to fill the Samurais’ roles later. To ensure example code was students’ primary learning Second, Looking Glass programs provide rich visual output resource, researchers did not provide assistance to students. that users can utilize to find particular functionality. Instead, researchers responded to help requests by Applying these techniques to non-visual domains requires suggesting a relevant program in the example library. additional work to make program behavior observable. Social Propagation CODE REUSE EVALUATION We are also interested in whether program functionality To evaluate the potential use for our code reuse tools, we may spread through different social groups. We created two conducted an exploratory study to answer several questions: different types of groups: working groups and presentation groups. While students actively built programs, they sat 1. Can middle school users with little or no previous with members of their working group. Toward the end of programming experience successfully reuse code? each session, we asked students to show the project they 2. Does the process of selecting and reusing code help created that day to the members of their presentation group. middle school users extend their programming skills? Each working group contained eight students. Each 3. Will animations propagate through social networks? presentation group contained six students. Participants On the first three days of each class, we asked each student We conducted this study within the context of a class for to create a new program that incorporated two animations the Exxon Mobil Bernard Harris Summer Science Camp reused from other programs. Each day we created two held at Washington University. The camp provides example programs from which all working groups could opportunities to explore science and engineering for reuse animations. We also provided a third example students with potential to succeed but who may be at risk program, unique to each working group, intended to seed due to limited academic opportunities in their school, novel animations into the presentation groups. family problems, or other issues. The camp works with St. Louis teachers to identify students who may benefit from Presentation groups contained two students from each attending. The camp accepts students based on teacher working group. Students gathered in their presentation recommendations and an essay. The 47 camp attendees groups to view other student’s programs constructed that were rising sixth through eighth graders. The group was day. We encouraged students to reuse animations they gender balanced and predominantly African-American. found captivating in their presentation group and offered prizes to anyone whose unique animation was reused more Camp Course than once by other students. During the two-week camp we oversaw two one-week classes: the first for 24 students and the second for 23 Data students. Each class was to include four two-hour sessions. We collected three types of data: Actionscripts that The first week was limited to three sessions due to a participants captured, programs using those Actionscripts, network outage that made the lab unusable. and participants’ performance on a programming quiz given during the final session of each camp class. Evaluating Learning To explore the potential for students to learn new Scripts and Programs programming skills through reusing code, we intentionally Collecting participants’ Actionscripts and programs enabled limited the formal instruction we provided the students. us to gather qualitative information about how users reuse During the first session we demonstrated adding a 3D code with our system, what kinds of actions they capture,
225
Programming User Captured User User Construct in Used Script Modified Added Property Assign. 31 4 2 Function Call 38 1 10 Do Together 40 10 28 Count Loop 25 1 1 While Loop 20 0 For Each In Order 30 0 Each In Together 10 2 User Method Call 39 0 2 Table 2. Number of participants who captured a construct in an Actionscript they used, modified the construct in a Figure 11. Frequency of Actionscript size (lines of code). program using the Actionscript, or added it independently. and how they use those actions within their own creations. Modification and Use of Programming Constructs We are interested in the potential for users to learn new Thirty-six of our 47 participants either modified or programming constructs or concepts through the process of independently used programming constructs which were reuse. To ascertain the extent to which this happens, we only introduced through the process of reusing code. collected quantitative information about the constructs Although our example programs used a variety of participants use through their Actionscripts and constructs, we saw a strong concentration of do together independently in their programs. and loop constructs in the users’ Actionscripts. This Post-camp quiz construct homogeneity limited the scope of learning. At the end of the final session, participants took an eleven- However, we observed evidence that participants used item forced-choice programming quiz in which we asked creating and modifying Actionscripts to learn new skills them to predict the behavior of short segments of Looking (see Table 2). Table 2 shows participants usage of Glass code. Each question presented a small snippet of code programming constructs in their scripts and programs. and a series of four or five textual descriptions of how that code might behave. We asked participants to select the best We observed three levels of programming construct usage. description for each snippet of code. The questions on the At the most basic level, users created Actionscripts quiz covered simple uses of sequential and parallel including a particular construct. In the next level, users programming, count and while loops, iterating over a list, explored the code created by Actionscripts in their parameter passing, and method calls. programs and modified one or more programming constructs. At the most advanced level, users created new Based on an exploratory factor analysis of the quiz sections of code that included programming constructs or questions, we created a programming quiz scale that techniques they discovered through reuse. Due to the included six questions loading on the same factor emphasis on do together in the captured Actionscripts, we (Cronbach’s α = 0.60). This factor reflects participants’ see the greatest number of modifications and independent ability to predict basic constructs behavior including uses of do together constructs. However, users also sequential and parallel execution, parameter passing, loops, frequently learned how to call functions to request and method calls, and iterating over lists. An additional two animate the individual body parts of characters. questions covered more advanced programming constructs: if statements and parallel execution over a list. Programming Quiz Performance We expect that learning will come primarily through Results modifying code from an Actionscript or using constructs Forty-six of our 47 participants successfully captured and discovered in an Actionscript to accomplish other goals. To reused code. The majority of their Actionscripts, 77%, investigate this, we divided our participants into two groups contain more than five lines of code (Figure 11), which we based on their programming behavior (see Table 3). The consider non-trivial functionality. Typical script content Low programming group (11 participants) includes focused on a single character or an exchange involving a participants who made no modifications to Actionscripts small group of characters. This content indicates a focus on they used and did not use new programming constructs capturing functionality that can be used in a story that may elsewhere in their programs. The High programming group be unrelated to the source. (36 participants) includes participants who either modified Learning Through Reuse Programming Basic Advanced We measured learning in two ways: (1) participants’ Group Constructs Constructs modification or use of new programming constructs in their Low (n = 11) 3.9 0.7 programs and (2) participants’ performance on the post- High (n = 36) 4.7 1.0 workshop programming quiz. Table 3: Average number of correct answers on Post-camp Quiz by Programming Group
226 is necessary to explore the success of our tools with other populations. FUTURE WORK Our interface enables middle school students to successfully select and integrate code. Further, the results of our exploratory study suggest the reuse process helps users to build their repertoire of programming constructs. Currently, our system does not support any customization or modification of an existing Actionscript. However, several users asked about modifications, such as including or excluding roles from an Actionscript or changing a property that is set within the Actionscript. To enable this type of interaction, we need to first understand what non- programmers want to modify in their Actionscripts and how they expect to accomplish this. Enabling users to remove a role or modify a specific action may increase the reusability and utility of Actionscripts. Communication with non- Figure 12. Reuse originating from Skateboard World. programmers about these modifications will be challenging. Black wave shapes are scripts and grey shapes are worlds. Labels show creator ID, with color showing a creator’s Participants in our study selected Actionscripts that working group and an object for their presentation group. included only a subset of the programming constructs the code in Actionscripts or used programming constructs represented in the example set. We are considering an introduced through the Actionscripts in other places of their interaction for watching and automatically recording from a program. We found that modification of code and use of stream of Looking Glass programs called Looking Glass new constructs correlates with better performance on the TV. A user simply stops watching when they see something quiz for basic (r=2.67, p<.1) and advanced (r=2.95, p<.05) they want and they can immediately begin the reuse constructs. While this is not necessarily a causal process. By maintaining a history of programming relationship, we believe it suggests code reuse using our constructs the user has experience with, we may be able to tools may be a learning pathway for new programmers. select examples for Looking Glass TV that help to introduce new programming concepts. Furthermore, this Social Propagation of Functionality support for locating useful artifacts allows us to create a We did see animations propagate through the camp’s complete end-to-end software reuse tool. working and presentation groups. Figure 12 shows how participants captured and reused functionality from one While users seem to gradually increase their repertoire of source program, Skateboard World. During the first week programming constructs through reuse, we believe the of camp, three yellow working group users made process of constructing the code for an Actionscript may Actionscripts containing animations from Skateboard make the learning process faster and more effective. We World. Two of the three users created programs using these plan to develop an automatic tutorial system that can guide Actionscripts. The users shared their programs with their users through building the code for a given Actionscript. presentation groups at the end of the first day. On the REFERENCES second day, two red working group users and one blue 1. Brandt, J., Dontcheva, M., Weskamp, M., and Klemmer, working group user captured new Actionscripts from the S.R. Example-Centric Programming: Integrating Web yellow user’s program and used the Actionscripts in their Search into the Development Environment. Stanford own prorgrams. These users were in the same animal University Technical Report, CSTR-2009-01. presentation group. We see a similar reuse pattern in week 2. Bruckman, A. MOOSE Crossing: Construction, two for a purple working group user and Skateboard World. Community, and Learning in a Networked Virtual This social propagation of functionality may provide a World for Kids. MIT Media Lab. Boston, MA., 1997. social channel through which users of Looking Glass can 3. Cottrell, R., Chang, J., Walker, R.J., and Denzinger, J. teach each other new programming constructs. Determining detailed structural correspondence for Study Limitations generalization tasks. Proc. SIGSOFT, (2007), 165-174. The participants for the camp in which we conducted our 4. Cottrell, R., Walker, R.J., and Denzinger, J. Semi- study were selected because they had potential to be automating small-scale source code reuse via structural successful but were at risk for academic problems. The goal correspondence. Proc. SIGSOFT (2008), 214-225. of the camp is to motivate these students to engage with 5. Duala-Ekoko, E. and Robillard, M.P. Tracking Code academics. While we do not believe that our results are Clones in Evolving Software. Proc. ICSE (2007), 158- limited to this population and environment, more research 167.
227
6. Fischer, G., Henninger, S., and Redmiles, D. Cognitive 21. Lanza, M. CodeCrawler-lessons learned in building a tools for locating and comprehending software objects software visualization tool. Proc. CSMR, (2003), 409- for reuse. Proc. ICSE (1991), 318-328. 418. 7. Gill, J. Shedding Some New Light on Old Truths: 22. Leshed, G., Haber, E.M., Matthews, T., and Lau, T. Student Attitudes to School in Terms of Year Level and CoScripter: automating & sharing how-to knowledge in Gender. Proc. of the American Educational Research the enterprise. Proc. CHI, ACM (2008), 1719-1728. Association. (1994). 23. Lucredio, D., Prado, A., and de Almeida, E. A survey on 8. Goldman, M. and Miller, R. Codetrail: Connecting software components search and retrieval. Proc. source code and web resources. Proc. VL/HCC (2008), Euromicro Conference (2004), 152-159. 65-72. 24. Lukoit, K., Wilde, N., Stowell, S., and Hennessey, T. 9. Gross, P. and Kelleher, C. Non-programmers TraceGraph: immediate visual location of software Identifying Functionality in Unfamiliar Code: Strategies features. Proc. ICSM, (2000), 33-39. and Barriers. Proc. VL/HCC (2009), 75-82. 25. Maloney, J., Burd, L., Kafai, Y., Rusk, N., Silverman, 10. Hartmann, B., Wu, L., Collins, K., and Klemmer, S.R. B., and Resnick, M. Scratch: a sneak preview Programming by a sample: rapidly creating web [education]. Proc. C5 (2004), 104-109. applications with d.mix. Proc. UIST, ACM (2007), 241- 26. Mili, H., Mili, F., and Mili, A. Reusing software: issues 250. and research directions. Software Engineering, IEEE 11. Hoffmann, R., Fogarty, J., and Weld, D.S. Assieme: Trans. on Soft. Eng. 21, 6 (1995), 528-562. finding and leveraging implicit references in a web 27. Mili, A., Mili, R., and Mittermeir, R. A survey of search interface for programmers. Proc. UIST, ACM software reuse libraries. Annals of Soft. Eng. 5, 1 (1998), (2007), 13-22. 349-414. 12. Holmes, R., Walker, R., and Murphy, G. Approximate 28. Olney, S. and Myers, B. FireCrystal: Understanding Structural Context Matching: An Approach to Interactive Behaviors in Dynamic Web Pages. Proc. Recommend Relevant Examples. IEEE Trans. On Soft. VL/HCC, (2009), 105-108. Eng. (2006), 952-970. 29. Prieto-Diaz, R. Status report: software reusability. IEEE 13. Holmes, R., Cottrell, R., Walker, R.J., and Denzinger, J. Software 10, 3 (1993), 61-66. The End-to-End Use of Source Code Examples: An Exploratory Study. Proc. ICSM, (2009), to appear. 30. Ruthruff, J., Creswick, E., Burnett, M., et al. End-user software visualizations for fault localization. Proc. 14. Holmes, R., Walker, R.J., and Murphy, G.C. Strathcona SoftVis, ACM (2003), 123-132. example recommendation tool. Proc. ESEC/FSE, ACM (2005), 237-240. 31. Sahavechaphan, N. and Claypool, K. XSnippet: mining for sample code. SIGPLAN Not. 41, 10 (2006), 413- 15. Jablonski, P. and Hou, D. CReN: a tool for tracking 430. copy-and-paste code clones and renaming identifiers consistently in the IDE. Proc. OOPSLA, ACM (2007), 32. Schafer, T., Eichberg, M., Haupt, M., and Mezini, M. 16-20. The SEXTANT Software Exploration Tool. IEEE Trans. on Soft. Eng. 32, 9 (2006), 753-768. 16. Kelleher, C. and Pausch, R. Lowering the barriers to programming: A taxonomy of programming 33. Storey, M. and Muller, H. Manipulating and environments and languages for novice programmers. documenting software structures using SHriMP views. ACM Comput. Surv. 37, 2 (2005), 83-137. Proc. ICSM, (1995), 275-284. 17. Kelleher, C. and Pausch, R. Using storytelling to 34. Thummalapenta, S. and Xie, T. Parseweb: a motivate programming. Comm. of ACM 50, 7 (2007), programmer assistant for reusing open source code on 58-64. the web. Proc. ASE, ACM (2007), 204-213. 18. Kelleher, C., Pausch, R., and Kiesler, S. Storytelling 35. Yongbeom, Kim and Stohr, E.A. Software Reuse: alice motivates middle school girls to learn computer Survey and Research Directions. Journal of programming. Proc. CHI, ACM (2007), 1455-1464. Management Info. Sys. 14, 4 (1998), 113-147. 19. Ko, A.J. and Myers, B.A. Designing the whyline: a 36. Zimmer, L. and Bennett, S. Gender differences on the debugging interface for asking questions about program California statewide assessment of attitudes and behavior Proc. CHI, ACM (2004), 151-158. achievement in science. Proc. of the American Educational Research Association, (1987). 20. Krueger, C.W. Software reuse. ACM Comput. Surv. 24, 2 (1992), 131-183. 37. Zweben, S. 2007-2008 Taulbee Survey. Computing Research News 21, 3 (2009), 8-23.
228