IEEE 1999 IEEE. Personal use of this material is permitted. However, permission to reprint/republish this material for advertising or promotional purposes or for creating new collective works for resale or redistribution to servers or lists, or to reuse any copyrighted component of this work in other works must be obtained from the IEEE.

Return to Table of Contents


Teaching Programming Concepts
Using an Icon-Based Software Design Tool

Donald J. Bagert, Senior Member, IEEE and Ben A. Calloni


Abstract - The authors have developed a Windows-based iconic detailed design tool named BACCII++TM, which allows the user to design a program with icons representing all the major procedural and object-oriented programming constructs and data structures within a syntax-directed environment. The user can then generate syntactically correct code for any one of several text-based languages. This tool was used successfully for several years in an academic environment, and multimedia-based teaching materials were developed in conjunction with a National Science Foundation grant.



I.   Introduction
II.  An Overview of BACCII++
         Procedure-Oriented Features
           Data Types
           Main Screen Display
           Code Structuring
           Input To Each Statement
         Object-Oriented Features
III.  Development and Use of BACCII++ as a Teaching Tool
         Original Study of BACCII Use in CS1
         The First Year Computer Science Programming Sequence
         Further Development and Study of BACCII++ Teaching Materials
         Student Commentary
IV. Summary and Future Directions
Acknowledgments
Copyrights and Trademarks
References
Contact Information
Biographies




I.  Introduction

Many noted researchers, e.g. [5] and Scanlan [10], have empirically established the cognitive advantage which graphical methodologies provide over textual ones. Research undertaken by the co-authors has resulted in development a Windows-based iconic detailed design environment called BACCIITM (Ben A. Calloni Coding for Iconic Interface) [2]. BACCII allows the user to design an algorithm with icons representing all the major programming constructs, such as loops, conditional branching, within a syntax-directed environment. The user can use this design to generate syntactically correct code for any one of several text-based languages. Later, BACCII was extended to include object-oriented features, resulting in BACCII++.

Much work has previously been accomplished in iconic software development environments but almost all of it has been developed for high level workstations; however, the rapid progress in hardware development over the last years has made possible more visually based programming environments to a wider range of users. Also, many such CASE tools completely ignore the detailed design aspects of software development, going from a high-level design directly to programming language code. The advantages of have a detailed design, especially in a graphical format, can be essential in providing communication between different groups within the software development team, and in enhancing the maintainability of a system.

The BACCII++ iconic environment uses a syntax-directed approach, which practically guarantees syntactically correct code before the compiler even sees it. By providing a graphical representation for the flow of control, semantic accuracy is also increased by accurately conveying to the user which variables of the proper type could be used at a particular point in the algorithm.

Section II of this paper provides an overview of BACCII++. Section III discusses educational materials that were developed under an National Science Foundation grant, and which were successfully used under experimental conditions. Finally, Section IV provides a summary and some future directions.




II.  An Overview of BACCII++

This section gives an overview of the procedure-oriented and object-oriented features of BACCII++, respectively. A complete summary of the procedure-oriented features are in [2].




Procedure-Oriented Features

Data Types

The type icons developed for the BACCII++ environment are shown in Figure 1. (The icon design incorporated some of Waguespack's ideas [12] plus used the guidelines given by Lodding [8], McCleary [9] and Wood [13].) The integer icon, for instance, has "rounded" corners to indicate a round or a whole number, while the real representation has sharp corners to indicate precision.

The use of begin-end or opening and closing braces { } to indicate the grouping of statements together provides a necessary part of the icon representation (Figure 2). The b_node and e_node are critical to BACCII++ at the procedural level, since to avoid cluttering of the screen, the display had to be limited; therefore, the b_node-e_node pair provide some control over the chaos. All statements between this begin-end pair are organized sequentially at the level one is viewing; if a need to execute another block occurs, the display will show a compound statement node and nothing else.

 Figure 1. Data Icons.


Main Screen Display

When the user first activates BACCII++, he or she is presented with a standard Windows layout. The use of grayed menus only allows the user to select FILE options. The selection of FILE presents a drop down menu which allows one to create a new file or open an existing one. After selection is made, the user is shown more information (Figure 3).

Figure 2. Blocks.

The user now has three choices: heading, declarations, and main body. BACCII++ enforces the need to declare the program name before one declares anything else. It also requires at least one declaration be made before the main body be accessed. While the "Heading" input is handled through a dialog box, the "Declarations" presents a graphic of the available choices here. Since most high level languages can have declarations of constants, types, variables, and subroutines, BACCII++ adds more to the display (Figure 4).

Figure 3. Main Module.
 
 

Figure 4. Declarations Expansion.

To declare any of the various options, the user clicks on the appropriate box. Constants and subroutines are handled via dialog boxes. The user merely begins entering values in the appropriate places. Message boxes are displayed to guide the process; if an incorrect value is entered, the system displays a warning message.

The subroutine declaration dialog box displays only the subroutines declared within the scope of the parent. The user clicks on the subroutine name, and BACCII++ re-configures to allow work on that subroutine. If the user wishes to declare a new subroutine, a new template for the routine is added. The user is then led through name and parameter list declarations.

While enumerated types are handled through a dialog box, variable, record type, and parameter declarations are made graphically via a "paint program" style of display in which the data icons (both basic and user-defined) are presented on the left side (Figure 5). The user selects the type and an appropriate dialog box is displayed to accept the specific details. As stated earlier, all dialog boxes provide guidance messages to the user. After the dialog box is complete and the data accepted, the user clicks the mouse in the client area and the appropriate icon is created and displayed with the variable, parameter, and/or type name displayed above or below.

For type definitions and record declarations the user places the variables on the screen as normal. When all the field variables are declared the user "encapsulates" the icons with an enclosing rectangle. If the rectangle placement is correct, the user can "accept" the new data icon and is challenged for the new type's name. After input, the new data is shrunk to a 45 by 45 pixel bit map and displayed in the "paint brush menu" as a new type which can be used to declare new variables.

Figure 5. Variable, Type, and Parameter Declaration.

Subroutine parameter displays are similar to the icons for all the other variable types except they display as a tube through which the actual parameters are passed. Also an arrow indicating the direction(s) of pass is displayed (Figure 6).

 Figure 6. Parameter Declaration.


Code Structuring

BACCII++ provides a standard access to code regardless of the subroutine. Click in the body section of the bit map display and the system moves to a new screen (Figure 7). Since BACCII++ handles block structured languages, all blocks have a begin-end pair with a bracketed nonterminal statement icon.

In order to insure syntactic correctness, BACCII++ allows the user to input new statements only if they would be correct in the parse tree. The user selects a statement from the "paint menu" and clicks on the <STMT> node in the display. BACCII++ automatically calculates screen locations for every new selection.

Figure 7. Coding Screen.

Single statements, such as read, write, assignment, and so forth, simply replace the <STMT> icon. The selection and iteration statements always are created in groupings. For instance, one cannot create just the "if" part of a selection. The user always gets both <STMT> options for true-false. The same process is applied to all "multiple statement" icons.

With a text-based editor, users will undoubtedly type the keywords in the document and then proceed to enter the actions which should occur on a selection or iterative process. For example, when an if-then-else is placed in the editor, usually the "if <condition>" is typed. Immediately the user begins to place the statement or statements (begin-end) which are executed if true. Within the true option could be other selection criterion and more nesting of blocks.


Input To Each Statement

One of the guiding principles was to create a system which would nearly guarantee syntactically correct code. As explained earlier, most of this syntactic accuracy is achieved through a parse tree construction process. Gaining semantic correctness is not foolproof, but many advances have still been made in this area.

BACCII++ accepts almost all inputs through dialog boxes. These dialog boxes display combinations of buttons, radio buttons, list boxes, and edit boxes. Much of the input is via mouse selection of displayed items. Keyboard input in Windows is via an edit box. The user always has the option of typing each value in, just as in text based programming; this action, however, would bypass many of the automatic features of the system.

Input is as mouse-oriented as possible. Each statement node can store an 128 character string. It can contain an assignment expression, Boolean expression, case condition value, and so on. Input to each BACCII++ statement is diverse but not as wide ranging as one would suppose. Nearly all the dialog boxes to each statement node provide variable list boxes; each particular box has specifically designed objects to assist in the "minimize typing" ideology.

The assignment box provides an example of the behavior present throughout the system. The user has available several point and click options necessary to handle an assignment statement. The user can select all necessary variables, operators, parentheses, and functions from the screen. These items are concatenated onto the string and displayed in an edit box.

Several features were added to make the process more semantically correct. For example, the functions are not displayed until after the assignment token is selected since a function cannot appear as an L-value in an assignment statement. The function box lists the pre-defined system functions such as ABS and SQRT, as well as any user defined functions which occur within the scope of the current subroutine. The functions appear with a parameter list showing the type of variable the function expects. After the user clicks and adds a function to the assignment string in the edit box, BACCII++ will evaluate the function parameter list, highlighting each parameter type from left to right. It then fills the variable list boxes only with variables of that type as awaits the users click on the selection. Thus, if the user selects only the listed variables, it would be very difficult to hand the compiler a parameter mismatch error.

The BACCII++ environment can then perform the final step, once the user has completed development of the algorithm. BACCII++ code at this time cannot be internally compiled and executed; instead it is converted into either C++ (the language focus for this proposal), Pascal or Fortran, at the user's discretion. The user selects the generate option from the menu in the coding section of BACCII++ and is presented with a dialog box which allows the user to generate, view (using the Notepad text editor), compile (using Visual C++ or some other appropriate compiler) and execute the code.



Object-Oriented Features

Over the last several years, object-oriented constructs to allow for the definition and implementation of classes have been added to BACCII, with the resulting environment being named BACCII++. A request for the definition of a new class is in Figure 8; the resulting class icon is shown in Figure 9. Attributes and methods can then be declared in a similar manner to how variables and subroutines, respectively, were declared in BACCII, except for the fact that each attribute and method can be declared as public, private, or protected.

Figure 8. Creating a new class.

After a class is completely defined, the C++ class header and class implementation files can be generated and used. A .bll file similar to a Windows .dll file is also created for importation into other BACCII++ programs.

Figure 9. A class icon.




III.  Development and Use of BACCII++ as a Teaching Tool

Original Study of BACCII Use in CS1

In the spring of 1993, BACCII was used at Texas Tech in two of the five laboratory sections of Computer Science 1462 (Fundamentals of Computer Science I). This course is an introduction to programming (at the time using Pascal; C++ is now being used) and software engineering. The course is required for all Computer Science (CS) and Electrical Engineering (EE) majors, CS minors, students seeking Computer Information Systems teaching certification, and a variety of other non-majors.

The class consisted of 126 students. The Pascal course is a required course for the first year Electrical Engineering students so there were 59 engineering students (including a number of EE/CS dual majors), 50 computer science students and 17 students from various other disciplines (e.g. mathematics, english, biology, and finance). Unfortunately, there were not enough female students, minority students, or future teachers to make a statistically significant sample in any of these areas. Assignment to these sections was assumed to be random since the students pre-registered for lecture and lab sections the prior semester without knowledge that a controlled experiment was planned. (BACCII was used in two of the five lab sections.)

The experiment was designed to divide the students into two groups: one which would use Pascal only and the other which used both BACCII and Pascal for development. The BACCII students were required to use BACCII for the programming assignments and to submit BACCII files for evaluation, in addition to submitting correct Pascal code for grading. This step was necessary to insure that all students would know Pascal syntax upon completion of the course. (BACCII is robust enough that it could be used for program development without the need to learn Pascal syntax.) Use of BACCII for laboratory assignments was optional. The Pascal course consisted of four lecture sections and five lab sections. BACCII was not addressed at all during lectures.

One of the areas that was to be evaluated was the ability of any iconic language to provide a much more intuitive development process. A conscious decision was made to "handicap" the BACCII group from the outset just to evaluate this hypothesis. The Pascal labs were taught by a highly experienced teaching assistant, who conducted closed labs. He met with the students every week for the full periods conducting discussions of the labs and programs, and offering direct help.

The students had to accomplish two types of programming assignments: labs and programs. The students had one new lab assignment each week for a total of ten labs. The other programming assignments were complete programs. They were given a specification of the problem and had to design and implement the program.

There were several areas that were evaluated:

  • Scores on programs of all students using BACCII versus all those that did not;
  • Scores in BACCII-assisted programming assignments for engineering majors vs. computer science majors (which was of interest, since most of the engineering majors had Fortran before taking this course);
  • Scores in programming assignments of all engineering students using BACCII versus all engineering students that did not use BACCII;
  • Scores on labs of all students using BACCII versus all those that did not;
  • Scores on (Pascal-only) exams of all students using BACCII versus all those that did not; and
  • Final course averages of all students using BACCII vs. all those that did not.
  • The breakdown of the students into various sections as described above was assumed to be random and the makeup of each section could be said to come from the same population with similar means and variances (normally distributed); one-tailed, comparison of two means tests were performed. The results were that among all students, the sections using BACCII performed significantly better than the Pascal-only students in the programming assignments, the laboratory assignments, the exams (which were entirely in Pascal, with no BACCII), and in the overall grades.

    A complete summary of the results of the 1993 experiment can be found in [3].

    There were some limitations to this experiment. First of all, it was set up and run by the creators of BACCII, which means that there is going to be a motivation and enthusiasm which not be inherent with other teachers and other schools. Second, only a limited set of BACCII teaching materials were available, so an entire closed laboratory for that language could not be conducted (which makes it even more remarkable that it was so successful).  The next experiment (described below) eliminated the latter impediment.



    The First Year Computer Science Programming Sequence

    Section III discussed in detail C S 1462, the first programming course at Texas Tech. This course has its roots in the updated ACM Curriculum 78 CS1 course [6], but is actually closer to the course CD 101 described on pages 103-4 of Computing Curricula 1991 [11]. C S 1462 is a four-semester hour course with a closed lab, which switched from Pascal to C++ in 1994.

    Computer Science 2463 (Fundamentals of Computer Science II), was the second programming course; its prerequisite is C S 1462.  Subsequent to this experiment, the course was renumbered C S 1463.  The evolution of C S 1463 has paralleled that of 1462; it originally resembled the updated ACM Curriculum 78 CS2 data structures course [7], but is actually closer to the course CD 102 described on pages 103-4 Computing Curricula 1991 [11]. The course is taught using object-oriented programming from the very beginning. C S 1463 is a four-semester hour course with a completely open laboratory; it has recently switched to C++ as the programming language taught, and started using BACCII++ in the spring of 1996, using the object-oriented version with the extensions.

    Both C S 1462 and 1463 at Texas Tech also focus on the basic principles of software engineering, especially in the analysis and design phases. In this manner, these computer science courses are similar to introductory classes in traditional engineering disciplines. This makes a design tool such as BACCII++ ideal for this introductory sequence in computer science.



    Further Development and Study of BACCII++ Teaching Materials

    Under a grant from the National Science Foundation, a complete set of BACCII course materials for both the CS1 and CS2 courses were developed, and then used under experimental conditions in C S 1462 and 2463, respectively, at Texas Tech. The CS1 materials were used in Computer Science 1462 in the Fall 1995 semester, and then revised for use again in the spring of 1996; while the CS2 materials were used in the spring only in C S 2463.

    The course materials that have been developed as a result of this grant include a supplementary text for using BACCII with C++; a set of closed laboratories, programming assignments, tutorials, and sample on-line and off-line examination problems for both courses. Examples of lab materials for the CS1 and CS2 courses, developed in Asymetrix ToolBook [1], can be found in Figures 10 and 11, respectively.

    Each course had closed laboratories throughout the semester, with each lab section having no more than 25 students. The courses would be evaluated in a manner similar to one previously used; i.e. approximately half of the students used BACCII++, while the other half would be a control group using only C++. (Similar courseware, without BACCII++, was developed for the control group, in order to make the lab as similar as possible.)

    Figure 10. Example BACCII++ Courseware Screen for CS1.

    For three different semesters, C S 1462 in Fall 1995, C S 1462 in Spring 1996 and C S 2463 in Spring 1996, the following information was evaluated:

  • Scores in labs of all students using BACCII versus all those that did not;
  • Scores in programs of all students using BACCII versus all those that did not;
  • Scores in (C++ only) exams of all students using BACCII versus all those that did not; and
  • Final course averages of all students using BACCII vs. all those that did not.
  • Statistically significant differences were found favoring BACCII++ on the following criteria: labs, exams and course average in C S 1462 in both Fall 1995 and Spring 1996 semesters; and programs, exams and course average in C S 2463 in Spring 1996. The authors feel that the fact that there was a significant difference in the exam average, which did not contain any information concerning BACCII++, in all three courses was significant, since this meant that the use of BACCII++ did not impede the learning of C++ syntax. Of course, the fact the BACCII++ sections did significantly better in course average in all three courses was also significant.

    A complete summary of the results of the 1995-96 experiment can be found in [4].

    Figure 11. Example BACCII++ Courseware Screen for CS2.


    Student Commentary

    As would be expected, students had a wide variety of comments concerning the use of BACCII++.  Some of the positive comments:

    Some of the negative comments: These comments have been taken into account for the reengineering of BACCII++ (see next section).




    IV. Summary and Future Directions

    The results of the experiments further strengthen the previous results which demonstrated that iconic language representations enhance a student's ability to comprehend and learn the language syntax albeit Pascal or C++. A comprehensive set of teaching materials for both courses was developed under an NSF grant.  BACCII++ has been used successfully in the CS1 and CS2 courses at Texas Tech University during the test period of the 1995-96 school year. The current version of BACCII++ and the associated NSF course materials can be downloaded from the their respective web pages.

    The authors also believe that BACCII++ can be beneficial in learning programming skills at the primary and secondary levels; in fact, it may be even more beneficial to those students.  (This is because of the visual nature of the language, and because such students are less likely to have been previously exposed to text-based programming.)

    BACCII++ is currently undergoing reengineering in order to produce a version which will be available for commercial license and distribution, and which will incorporate student comments (see the end of Section III).  For more information, contact Dr. Calloni.



    Acknowledgments

    This work was partially supported by the National Science Foundation Division of Undergraduate Education under Grant DUE-9455614 to Texas Tech University.

    The authors would like to recognize H. Paul Haiduk for being the primary developer of the CS1 multimedia software, and for his contributions to the general "look and feel" of the BACCII++ teaching materials. A complete list of people that worked on the BACCII++ courseware are credited at the beginning of the CS1 and CS2 laboratory programs.



    Copyrights and Trademarks

    BACCII is © and TM 1992-1999 Ben A. Calloni.

    BACCII++ is © and TM 1995-1999 Ben A. Calloni.



    References

    1.  Asymetrix Corporation. ToolBook User Manual. Asymetrix Corporation, Bellevue WA, 1994.

    2.  Calloni, Ben A. An Iconic, Syntax Directed Windows Environment for Teaching Procedural Programming. Master's Thesis, Department of Computer Science, Texas Tech University, May 1992.

    3.  Calloni, Ben A. and Bagert, Donald J. Iconic programming in BACCII vs. textual programming: which is a better learning environment? Proceedings of the 25th SIGCSE Technical Symposium on Computer Science Education, Phoenix AZ, 10-11 March 1994, pp. 188-192.

    4.  Calloni, Ben A.; Bagert, Donald J.; and Haiduk, H. Paul. Iconic programming proves effective for teaching the first year programming sequence. Proceedings of the 28th SIGCSE Technical Symposium on Computer Science Education, San Jose CA, 27 February - March 1997, pp. 262-266.

    5.  Glinert E. and Tanimoto S. Pict: An interactive graphical programming environment. IEEE Computer, Vol. 17, No. 11, pp. 7-25.

    6.  Koffman, Elliot P.; Miller, Philip L. and Wardle, Caroline E. Recommended curriculum for CS1, 1984: a report of the ACM curriculum task force for CS1. Communications of the ACM, 27, 10 (October 1984), pp. 998-1001.

    7.  Koffman, Elliot P.; Stemple, David and Wardle, Caroline E. Recommended curriculum for CS2, 1984: a report of the ACM curriculum task force for CS2. Communications of the ACM, 28, 8 (August 1985), pp. 330-335.

    8.  Lodding, Kenneth N. Iconic Interfacing. Chapter of Visual Programming Environments: Applications and Issues, Glinert, Ephraim P. Ed. IEEE Computer Society Press, Los Alamitos CA, pp. 231-238.

    9.  McCleary, George F., 1990. An effective graphic "vocabulary". Chapter of Visual Programming Environments: Applications and Issues, Glinert, Ephraim P. Ed. IEEE Computer Society Press, Los Alamitos CA, pp. 239-246.

    10.  Scanlan, David. Structured flowcharts outperform pseudocode: an experimental comparison, IEEE Software, Vol. 6, No. 5, pp. 28-36.

    11.  Tucker, Allen B; Barnes, Bruce H.; Aiken, Robert M.; Barker, Keith; Bruce, Kim B.; Cain, J. Thomas; Conry, Susan E.; Engle, Gerald L.; Epstein, Richard G.; Lidtke, Doris K.; Mulder, Michael C.; Rogers, Jean B.; Spafford, Eugene H. and Turner, A. Joe. Computing Curricula 1991: Report of the ACM/IEEE-CS Joint Curriculum Task Force. Jointly published by ACM Press, New York NY and IEEE Computer Society Press, Los Alamitos CA, 17 December 1990.

    12.  Waguespack, Leslie J. Visual metaphors for teaching programming concepts. Proceedings of the ACM 20th SIGCSE Symposium on Computer Science Education, 23-25 February 1989, pp. 141-145.

    13.  Wood, William T., and Wood, Susan K. Icons in everyday life. Chapter of Visual Programming Environments: Applications and Issues, Glinert, Ephraim P. Ed. IEEE Computer Society Press, Los Alamitos CA, pp. 231-238.


    Contact Information

    Donald J. Bagert, Ph.D., P.E.
    Department of Computer Science
    Texas Tech University
    Lubbock, TX 79409-3104
    Phone: 806-742-1189
    Fax: 806-742-3519
    E-mail: bagert@ttu.edu

    Ben A. Calloni, Ph.D., P.E.
    Lockheed Martin Tactical Aircraft Systems
    P.O. Box 748
    Fort Worth TX  76101
    Mail Zone 2859
    Phone:  817-777-4345
    Fax:  817-763-2967
    Ben.A.Calloni@lmco.com


    Biographies

    Donald J. Bagert, Ph.D., P.E. is a Professor and Associate Chair of Computer Science at Texas Tech, where he has worked for the past eleven years.  Dr. Bagert has published numerous papers in the areas of computer science and software engineering education.  He is a co-editor of FASE, a monthly electronic newsletter dedicated to software engineering education, training, and professional issues.  Dr. Bagert is also co-director of the Software Engineering Research, Training, and Education Center (SERTEC) at Texas Tech. In September 1998, he became the first licensed Professional Engineer (P.E.) in software engineering in both Texas and the United States.

    Ben A. Calloni, Ph.D., P.E. is a senior engineering specialist at Lockheed Martin Technical Aircarft Systems in Fort Worth, Texas.  After 12 years as a USAF pilot, including over 2000 hours as a jet fighter and instructor pilot, he began graduate studies in 1986.  His research interests are in Computer Aided Software Engineering (CASE) and Computer Aided Instruction (CAI). Dr. Calloni developed BACCII++ under the direction of Dr. Bagert (receiving his Ph.D. from Texas Tech in 1997), and has subsequently continued in iconic language research.  In 1999, he became the first software engineering P.E. in the history of the Lockheed.
     

    Return to Table of Contents