WebEx: Learning from Examples in a Programming Course

Peter Brusilovsky

School of Information Sciences
University of Pittsburgh
Pittsburgh PA 15260

Abstract: Experienced and novice programmers often use program examples they have created or learned in the past to solve new programming tasks. Experienced teachers of programming-related courses know and use the power of example in their teaching. This paper presents WebEx - a Web-based tool for exploring programming examples that enables teachers to use example-based programming approach with heterogeneous classes. WebEx maximizes learning opportunity for every student, gives every student a second chance in understanding key programming examples, and encourages every student to explore example programs.


It has often been claimed that humans use solutions to previous problems to solve new problems or planning tasks. Especially in the domain of programming, both experienced and novice programmers often use program examples they have created or learned in the past to solve new programming tasks. Experienced teachers of programming-related courses know and use the power of example in their teaching. The traditional approach to using examples in programming courses is the following. For each lecture the teacher prepare some number of carefully chosen problem-solving examples in the form of small programs. The teacher during the lecture analyzes these examples. To let the students further explore the examples and use them for solving assigned problems, the teacher provides the code of all analyzed examples as a part of printed or online lecture notes. Authors of good programming textbooks (who are good teachers themselves) also follow this approach and provide a lot of explained program examples in their books. To encourage the students to run and explore the provided examples many authors nowadays choose to place the code of all examples either on a CD supplied with the book, or on the book's Web site.

The problem with the traditional approach to using programming examples in the classroom is that it works well only for small homogeneous groups of students. Students in a homogeneous group have about the same level of programming knowledge and the same speed of material acquisition. Working with a small homogeneous group a teacher can usually predict the number and the complexity of examples for each lecture and choose the proper pace and level of detail for the presentation. In large heterogeneous classes where students have very different starting level of knowledge of the subject and acquisition capabilities the effectiveness of the traditional example-based approach decreases dramatically. Different students need essentially different speed and level of details in example explanations. Moreover, weaker students usually need more examples to understand the same concept. A teacher facing a heterogeneous classroom is destined to "lose" both strongest and weakest parts of the class during the lecture. Unfortunately for the students who have failed to understand examples presented in the class, there is no easy second chance. Even in a situation when the code of all examples is available online, it has little use for these students because the code itself lacks the explanation part.

We have designed WebEx, a Web-based tool for exploring programming examples to enable teachers to use example-based programming approach with heterogeneous classes. Our goal was to maximize learning opportunity for every student, to give every student a second chance in understanding key programming examples, to encourage every student to explore example programs and re-use it for problem solving. The core of WebEx is a database of explained programming examples prepared by teachers in a special "dissection" format. The environment lets each student to explore program examples in his or her own pace and order. In particular, weaker students will be able to work with more examples and explore each example in more detail. Currently we are using WebEx in the context of a course on Data Structures and Programming Principles at the University of Pittsburgh. However, WebEx is language and course-independent and can be used with any programming-related course. This paper presents the first version of WebEx, compares it with earlier approaches to use technology in the context of example-based teaching of programming courses, and summarizes its benefits.

A Web-based environment to support learning from examples

The idea and the tool

The key innovative idea of the suggested project is to replace bare code of programming examples offered on the course Web site with self-explaining examples . To provide self-explaining examples we intend to use a popular approach to example explanations used in a number of programming textbooks and sometimes referred as "dissections" (Kelley & Pohl, 1995). With this approach, an author of an example (a teacher) supplies textual explanations for each line in the example program. The explanations serve at least two different purposes. First, it explains the student the meaning of each program line and its role of in the overall solution of a programming problem. Second, it comments on a particular way of using language constructs in every line of code thus bridging the gap between student general knowledge about programming language constructs and practical skills of their use for solving programming problems.

Figure 1. The code of a programming example is left intact in WebEx.
Green and white buttons to the left indicates availability of a comment for the given line (Full size).

In a typical programming textbook a dissected example is provided in a special format where each line of code is followed by explanations that can vary from a line or two to several paragraphs of text. This format has a clear problem: even in textbooks that use a special font and color for the lines of code, the code is hard to comprehend since the lines of code are spread among the explanations. The explanations are not easy to comprehend either. Usually, a student has a problem with just a few lines of code in a program and need explanations for just these lines. Presenting all explanations at once distracts the student from concentrating on most needed explanations. Finally, reading through a large "dissection" is a rather passive kind of learning.

WebEx, a Web-based tool for interactive exploration of programming examples, was designed to overcome the problems listed above. Our key idea is to leave the example code intact as much as possible (Figure 1). The program example looks in WebEx just the same way it looks in a program editor. The only visible difference is a presence of green or white bullets to the left of each line. Green bullet indicates an availability of explanations for this line of code. While bullet tells that there are no explanations for the line. Naturally, clicking on a green bullet opens an explanations note for the selected line (Figure 2). In a spirit if a good hypertext, this interface let the user to use his or her preferred browsing strategy. Some users may want browse the example line by line. Other students may concentrate on the most hard-to-understand lines and selectively read explanations for these lines. In the example on Figure 3 the role of the line being explored is not obvious even for good students who may have no troubles with understanding all other lines. When exploring this example such students can go straight to this troublesome line ignoring other unnecessary explanations.

Figure 2: In WebEx example explanations are shown one at a time next to the line being explained (the bullet and the font for this line is changed to provide the context) (Full size).

WebEx approach offers several benefits over the traditional book format. First, the code of the example is shown as an easy-to-grasp single chunk, instead of being distributed among the comments. Second, explanations are shown one by one helping the student to concentrate on one thing. Third, from being a passive reading activity the work with every example become an interactive exploration. As an extra benefit, every action of the student in this environment can be recorded thus providing a teacher with a possibility to monitor the student activity and giving an educational researcher a powerful tool to explore how student work with examples in a programming course.

While the first version of WebEx is already in use by students, we need some time to evaluate the effectiveness of WebEx as a teaching and learning tool. It is out hope that a database of interactive explained examples will give every student a second chance to understand key programming examples. Each student will be able to work with the examples in his or her own pace requesting only necessary explanations.

Figure 3: With WebEx a student can selectively choose explanations of the most hard to understand lines of code that are usually different for different students (Full size).


The database of examples is implemented using Microsoft Access. The interactive part of the environment (example exploration and navigation between examples and concepts) is implemented using Microsoft Internet Server and Active Server Pages technology. The choice of Microsoft tools is determined by their free availability for faculty and students or our university. Besides, Microsoft Access system is relatively easy to use and has a simple interface. We have found that teachers and teaching assistants have no problems with copying, commenting, and contributing their examples in Access tables. Currently, we use WebEx in the context of a Blackboard CourseInfo (Blackboard, 1999) course management system (CMS), however, it is independent from CourseInfo and can be used as a standalone application or in conjunction with any CMS.

Related works

While the idea of interactive self-explaining examples on the Web is innovative, the idea of a shared database of examples is not entirely new. We know (and will use an experience of) several example-based programming environments that let the students use a database of examples in the process of problem solving (Brusilovsky & Weber, 1996; Brusilovsky, 1992; Burow & Weber, 1996; Faries & Reiser, 1988; Guzdial, 1995; Hohmann, Guzdial & Soloway, 1992; Linn, 1992a; Linn, 1992b; Redmiles, 1993). With two exclusions, the only function of example-based programming systems was to help the student find a relevant example. In most of the cases the systems simply let the student pick a static program example from a large list or search for an example using keywords. Two systems went further and provided some interface to the student to explore an example. In a system designed by Redmiles (1993) explanations for an example were "hardwired" into the system's code by the author himself. ELM-PE (Burow & Weber, 1996) applied an Artificial Intelligence approach. Using its knowledge about programming goals and an ability to "understand" the program, it can interactively generate a goal-based explanation of every function of any program example represented in the system. Our approach is integration of these two. WebEx can provide an explanation for every line of a program in any language with a very little authoring overhead. WebEx is a practical tool that can be used in any programming course. Still, like the tools mentioned above it has an important research agenda - to explore how the students ue examples in programming courses.

Current development

Student side

The experience of the previous works on databases of examples lets us anticipate a problem of navigation. As we noted, known databases typically let the student pick an example from a large list or search for an example using keywords. However, an experiment with ELM-PE environment (Weber, 1996) shows that only in two thirds of all cases were the users able to find the most relevant example using these simple example-selection tools. For our case the navigation problem may be even more serious since the estimated number of examples in our environment will be several time larger than in the known databases.

To help the students navigate in our database of examples we plan to organize all examples into a hyperspace. This idea was originally explored by Linn (1992b) who also has shown that this hyperspace has to be structured following expert-level understanding of the subject. We intend to apply a concept-based approach to structure the hyperspace of examples. The concept-based approach was originally suggested by the author to structure the hyperspace of pages in the InterBook system (Brusilovsky, Eklund & Schwarz, 1998). The core of the concept-based navigation is a glossary of concepts used in the course - from C programming constructs (assignment operator) to higher level concepts (loop). The users are able to observe a description of each concept in on a separate glossary page. The system maintains two-way links between an example and each concept used in this example. That means that from each concept page students are able to move to all examples that demonstrate the use of this concept. Vice versa, from each example page the student will be able to move to description of each involved concept. This approach supports rich navigation. In particular, starting from an example of interest, the student will be able to move to an explanation of a troublesome concept used in this example and from that to another simpler example that uses this concept. Our experience with InterBook shows that this organization can successfully support navigation in a hyperspace with several hundred of content pages (i.e., examples) and more than a hundred of concepts. In addition to the new concept-based access to examples we intend to keep currently implemented syllabus-based access where the student can get a list of links to all examples relevant to a given lecture.

Teacher side

One of the key assumption behind WebEx is that examples in a database are contributed by several instructors who teach different sections of the same course. Thus, from being a secondary support for teaching a particular section of the course, the database of examples will become a shared resource for the whole course, a place to accumulate the "instructional wisdom" of several teachers. Once initiated, this database can be used by several generations of instructors who can also contribute their favorite examples. As it often happens are taught by different instructors in different years. In this situation the shared database of examples will offer a significant reduction of work for a new instructor of the course. Instead of preparing and testing a large amount of examples to analyze at every lecture, a teacher can simply pick and re-use a subset of examples from the database that he or she founds most relevant. The students themselves may have an access to the whole wealth of explained examples that will allow weaker students to work with more examples than were presented in the classroom.

We are now working currently on improving teacher's side of WebEx. In the original version of WebEx the teachers have to create and annotate examples using Microsoft Access directly. This approach worked well for one or two teachers. To support a larger community of teachers working on the same course we are developing a Web-based interface for teachers to create, update, and re-use examples. The goal is to make the system a tool in teacher's hands; to support all major activities of a teacher working with examples. Our experience shows that it is one of the main keys to the success of any educational system in the classroom.



Instead of providing a summary of the paper we have chosen to provide a summary of WebEx benefits.



Blackboard (1999) CourseInfo 1.5, Blackboard Inc. http://company.blackboard.com/CourseInfo/index.html (Accessed 21 August, 1999)

Brusilovsky, P., Eklund, J., and Schwarz, E. (1998) Web-based education for all: A tool for developing adaptive courseware. Computer Networks and ISDN Systems (Proceedings of Seventh International World Wide Web Conference, 14-18 April 1998) 30 (1-7), 291-300.

Brusilovsky, P. and Weber, G. (1996) Collaborative example selection in an intelligent example-based programming environment. In: D. C. Edelson and E. A. Domeshek (eds.) Proceedings of International Conference on Learning Sciences, ICLS'96, Evanston, IL, USA, AACE, pp. 357-362, http://www.contrib.andrew.cmu.edu/~plb/papers/icls96.html.

Brusilovsky, P. L. (1992) Intelligent Tutor, Environment and Manual for Introductory Programming. Educational and Training Technology International 29 (1), 26-34.

Burow, R. and Weber, G. (1996) Example explanation in learning environments. In: C. Frasson, G. Gauthier and A. Lesgold (eds.) Intelligent Tutoring Systems . Lecture Notes in Computer Science, Vol. 1086, (Proceedings of Third International Conference on Intelligent Tutoring Systems, ITS-96, Montreal, June 12-14, 1996) Berlin: Springer Verlag, pp. 457-465.

Faries, J. M. and Reiser, B. J. (1988) Access and use of previous solutions in a problem solving situation. In: Proceedings of Tenth Annual Conference of the Cognitive Science Society, Montreal, 1988, Lawrence Erlbaum Associates, pp. 433-439.

Guzdial, M. (1995) Software-realized scaffolding to facilitate programming for science learning. Interactive Learning Environments 4 (1), 1-44.

Hohmann, L., Guzdial, M., and Soloway, E. (1992) SODA: a computer-aided design environment for the doing and learning of software design. In: I. Tomek (ed.) Proceedings of 4th International Conference, ICCAL'92, Berlin, Wolfville, Canada, June 17-20, 1992, Springer-Verlag, pp. 307-318.

Kelley, A. and Pohl, I. (1995) C by Dissection : The Essentials of C Programming. NY: Addison-Wesley.

Linn, M. C. (1992a) Can experts' explanations help students develop program design skills. Int. J. Man-Machine Studies, International Journal on the Man-Machine Studies 36, 511-551.

Linn, M. C. (1992b) How can hypermedia tools help teach programming. Learn. Instr., Learning and Instruction 2, 119-139.

Redmiles, D. F. (1993) Reducing the variability of programmers' performance through explained examples. In: Proceedings of INTERCHI'93, New York, Amsterdam, 24-29 April 1993, ACM, pp. 67-73.

Weber, G. (1996) Individual selection of examples in an intelligent learning environment. Journal of Artificial Intelligence in Education 7 (1), 3-31.