Save the flowchart program solution.

The B# flowchart program solution can be saved for future access from within the B# development environment. The textual programming notation program solution may also be exported in a standard textual programming notation form for future access from within a conventional textual programming development environment.

5.3.3 Design of B# Icons

As mentioned previously, the flowchart representing a program solution contains programming constructs, metaphorically represented by icons and interconnected with lines. Each icon represents a specific and unique programming construct. The purpose of each icon is therefore to indicate the presence of a particular programming construct within a program solution (Dale 1998; Blackwell et al. 2000).

Programming Construct Icon Programming Construct Icon

Assignment Input

Simple conditional construct (IF) Output

Counter iteration loop (FOR)

Table 5.2: Metaphorical images of programming icons in B# ver. 1.0

Application of an icon design methodology (Chang et al. undated) for the design of B#’s icons resulted in the foundation programming constructs of sequence, selection and iteration to be represented by icons (Mayer 1981; Shu 1985; Blackwell et al. 2000; McIver 2000; Howell 2003; Warren 2003). An icon image which attempted to instantly induce the correct meaning of the construct, was associated with each of the identified foundation programming constructs (Blackwell 2001). Table 5.2 shows the icons associated with the programming constructs supported by B# ver. 1.0 (Brown 2001a, b).

The level of intuitiveness attributed to a B# icon is dependent upon how close the mapping between the icon image presented and the programming construct represented. If the

mappings are not optimal, novice programmers require more time to comprehend and assimilate the knowledge content of the underlying programming constructs (Ben-Ari 2001). In acknowledgement of the possibility that the B# mappings might not be ideal, an informal survey (Appendix E) of the closeness of mapping between the icon metaphors used in B# ver. 1.0 and their associated programming constructs was conducted.

An evaluation of the icons used in the initial version was conducted during the development of B# ver. 2.0 in 2002 by means of a survey amongst CS/IS major students of a second year computer programming course in the Department of CS/IS at UPE (Thomas 2002b). Participants in the survey were firstly presented with a two-column table (Section E.2), one column containing the icon images and the other the programming construct supported by B#. The participants were required to associate with an image the programming construct which in their mind was immediately induced by the metaphorical image.

Programming Construct Icon Programming Construct Icon

Assignment Input

Simple conditional

construct (IF) Output

Multiple conditional construct (CASE)

Conditional iteration loop (REPEAT_UNTIL)

Counter iteration loop (FOR)

Operation to return to calling function (RETURN) (appears within a user- defined function) Conditional iteration loop

(WHILE) Procedure call

Upon collecting the survey forms, the administrator of the survey then informed the participants of the correct associations. An hour later the same participants were required to complete the second part of the survey using the form replicated in Section E.3. This questionnaire determined the level of recollection of the programming constructs for each of the B# programming construct icons.

One of the findings of the first section of the survey was that some of the participants did not immediately correctly match the associated programming constructs with some of the icons (Thomas 2002b). The responses of the second part of the survey did however show that participants retained knowledge of the associations between icons and programming constructs, once correctly advised. As a result of this study, some of the icons were redesigned resulting in B# ver. 2.0 supporting the programming constructs and icons shown in Table 5.3.

Further semantics associated with each B# programming construct are conveyed by the spatial arrangement of the icons within the flowchart program solution representation.

5.3.4 Program Solution Representation

Iconic programming notations, like all visual programming notations, still require some kind of syntax to represent the semantics of a program solution (Schiffer et al. 1995). One reason for using a flowchart as the development representation notation for B# is that flowcharts involve minimal syntax, where the syntax is visual rather than textual. Another reason is that flowchart program solutions are easier and more intuitive for novice programmers to comprehend than structured textual program solutions (Scanlan 1989; Crews 2001; McKinney 2003).

In the Department of CS/IS at UPE, novice programmers initially practice problem-solving using traditional flowcharting techniques in the introductory programming course. Novice programmers at UPE are thus familiar with the methodology. B#’s program solution representation in the form of a flowchart takes advantage of this prior experience of the novice programmers (Chang et al. 1999). Further, the curriculum of the introductory programming course presented by the Department of CS/IS at UPE uses the procedural

paradigm, corresponding to the preferred novice programmer paradigm of control flow (Good et al. 1999; Good 1999; Oberlander, Cox et al. 1999) which is visually supported by the flowcharting methodology implemented by B#.

Figure 5.2: Flowchart program solution in B#

Figure 5.2 illustrates a typical example of a flowchart program solution composed in B#. The B# flowchart program solution is a top-down single-sequence box-and-line construction typical of visual programming notations (Green & Petre 1996). It consists of icons, each representing a distinct foundation introductory programming construct (Chattratichart et al. 2002). The icons are connected by non-crossing lines to indicate the sequential nature of the programming constructs in relation to one another (Lyons et al. 1993; Green & Blackwell 1996; Chattratichart et al. 2000, 2002; Lyons undated).

Visual secondary notation in a B# flowchart program solution is supported by the vertical and horizontal arrangement of icons in relation to one another (Figure 5.2). Vertical

arrangement of icons is primarily an indication of order of sequence, or control flow, from top to bottom. Horizontal arrangement of icons is an indication of mutually exclusive selection.

Manipulation of the icons in the flowchart is the only means by which a novice programmer can specify a program solution using the B# development environment. The flowchart program solution is, however, complimented by an equivalent textual programming notation program solution in order to encourage the transfer of textual notation programming knowledge ultimately required for the introductory programming course at UPE. The positioning of the display of these alternative program solution representations was one issue considered as being important during the design of the B# development environment screen layout.

5.3.5 Screen Layout

The B# screen design process involved developing an interface that could be used effectively by novice programmers. Of special significance was the requirement that a minimal number of windows should be required to be manipulated by a novice programmer at any one time (Green & Blackwell 1996). Figure 5.3 depicts the generic layout of the main screen.

The menu bar contains standard Win32 application options. The tool bar contains specific options from the menu bar that are used regularly by a novice programmer. Examples of such options are saving and executing B# program solutions. The icon palette contains the metaphorical icon images that are associated with the programming constructs supported by B#.

Figure 5.3: Generic screen layout

The B# programming development environment makes use of a multiple document interface (MDI) allowing it to contain multiple flowcharts in its client area (Thomas 2002b). Context-sensitive views are implemented to make it easier for the novice programmer to know which choices are available and consequently be shielded from the occurrence of unnecessary errors (Pane et al. 2002). The main screen of B# has two states, namely a starting and working state.

In the starting state, the icon palette is not visible. The reason for this is to guide the novice programmer to open a new or existing B# program solution. Once a B# program solution has been created or opened, a state transition to the working state takes place. In the working state at least one flowchart program solution is open in the client area and the icon palette becomes visible.

The evolution of the screen design across the 3 subsequent versions of B# appears in Figures 5.4 – 5.6.

Menu bar

Toolbar

Icon

B# ver 1.0

Figure 5.4 shows an example of the screen presented to a novice programmer in the working state while the novice programmer is in the process of developing a program solution in B# ver. 1.0. The client area is divided into four sections: the flowchart editing pane, listing of declared constants and listing of declared variables, as well as the textual programming notation representation corresponding to the flowchart program solution.

Figure 5.4: B# Ver. 1.0 screen layout

The icon palette facilitates the addition of an icon to the flowchart program solution by the novice programmer simply dragging it from the palette into the correct position in the flowchart. The flowchart is completely interactive, continuously allowing for the addition, moving, deleting and editing of icons. Variables and constants can also be added, edited and deleted on the right hand side of the client area. The textual program solution area at the bottom left hand side of the client area displays the automatically generated equivalent textual program solution representation.

Constants and variables declarations Icon palette Flowchart editing pane Menu bar _Toolbar Generated textual program solution Client area

In B# ver. 1.0, the textual program solution would be displayed in the preferred textual programming notation, namely one of C++, JAVA or PASCAL. The textual program solution is immediately modified whenever any change is made to either the flowchart program solution or the variables and constants ensuring that both program solution representations are mutually consistent (Cockburn et al. 1997; Blackwell et al. 2000).

B# ver 2.0

Informal usability testing of B# ver. 1.0 using the questionnaire in Appendix E revealed that improvements were required in the screen layout (Thomas 2002b). The detailed analysis of the results of this survey appears in Appendix F.

The juxtaposibility property (Blackwell et al. 2000) was not sufficiently well supported by B# ver. 1.0 since the textual program solution representation pane appeared below that of the flowchart editing pane, and was also much smaller. This resulted in extra effort by the novice programmer to locate textual program solution extracts corresponding to a particular icon in the flowchart program solution. The consequence of these observations was a reimplementation of the screen layout in B# ver. 2.0. The resulting screen design is illustrated in Figure 5.5.

In the revised screen design (Figure 5.5), the equivalent program solution representations are located horizontally adjacent to one another. In this way, B# visually enhances the correspondence between icon and textual programming notation representations for programming constructs. The generic screen layout was also modified to contain an additional partition, the routine bar. This bar allows the novice programmer to switch between user-defined procedures and/or functions that have already been declared for a particular B# program solution.

The left hand side of the client area in Figure 5.5 presents the B# program solution being composed. Constants, variables and, in the case of procedures and/or functions, parameter declarations, as well as the flowchart of icons are displayed in this section. The union of the various declarations resulted from a requirement to optimise screen space usage. This

design decision upholds the natural flow of a routine in an equivalent textual programming notation program solution where the declarations appear at the top of the program solution.

Figure 5.5: B# ver. 2.0 screen layout

In support of the B# feature for facilitating user-defined routines, the contents of the flowchart editing pane in Figure 5.5 determines the section of the corresponding textual programming notation program solution displayed. If the flowchart editing pane represents the main section (driver) of the program solution, the entire equivalent textual program solution is displayed. In the case of the flowchart editing pane representing a user-defined function or procedure, only the textual program solution extract relevant to the particular sub-routine is displayed. In all cases, minor effort is required on the part of the novice programmer to search for the textual program solution extract corresponding to the displayed flowchart extract (Blackwell et al. 2000).

B# ver 3.0

To further minimise the effort required to search for corresponding textual program solution extract for a flowchart icon, B# ver. 3.0 includes a code-highlighting feature. On a

Icon palette

Constants, local variables and parameters

declarations Flowchart editing pane Generated textual program

novice programmer selecting an icon in the flowchart program solution, B# highlights the associated generated textual program solution extract thereby visually focussing the attention of the novice programmer to the equivalent program solution extract.

The third version of B# also provides two ways in which a B# program solution can be executed and tested (Yeh 2003b). The first is to execute a program solution through an external compiler with only the final results of the execution, if any, being displayed. This method was also supported by both previous versions of B#. The second method is to execute a program solution within the B# programming environment allowing the novice programmer to control and follow the progress of the execution on both the flowchart and generated textual program solution extract, one programming construct at a time.

Figure 5.6: B# ver. 3.0 screen layout Tracer toolbar Flowchart editing pane Generated textual program solution Trace control pane Client area

Constants and variables declarations and values

Real-time visual feedback on the progression of the programming logic, the listing of variables and their current values as well as the displaying of any results from the program solution is supported. The need for the behaviour of program solutions to be visualised in B# ver. 3.0 required that both the flowchart and the generated textual program solution extract be animated simultaneously (Yeh 2003a, b). This would serve to reduce the mapping between the novice programmer’s mental model of the behaviour of the program solution and the actual behaviour evident by observation (Wright et al. 2002), and assist further in supporting retention and transfer of programming knowledge, thereby encouraging in-depth learning. Figure 5.6 illustrates the screen layout implemented in B# ver. 3.0.

The screen design of B# ver. 3.0 retains the juxtaposibility property. The code-highlighting is implemented using the colour blue to animate both the flowchart and textual program solutions simultaneously as the novice programmer manipulates the animation, or trace, of the program solution using the controls in the trace control pane (see blue conditional icon in flowchart editing pane and associated blue text in textual program solution extract in Figure 5.6).

Since graphical versions of program solutions tend to make use of more screen space than their textual counterparts (Blackwell et al. 1999b), the layout of the client area was adapted to maximise screen space usage. The variables/constants declarations table pane was repositioned to be above the generated textual program solution representation.

The trace control pane is designed to be visible at all times during the tracing process. B# supports two ways in which the trace control pane can be used. The first is by means of a floating window, allowing the novice programmer to move the trace control pane around freely (illustrated in Figure 5.6). The trace control pane consequently remains on top of the other visual components of B# until the tracing process has been completed.

The second method permits the novice programmer to stabilise the positioning of the trace control pane by docking it to the bottom of the flowchart editing pane. Figure 5.7 illustrates a B# program with the trace control pane docked. The latter method reduces the

flowchart display area but ensures that the trace control pane does not obscure any of the other visual components.

Figure 5.7: B# ver. 3.0 showing docked trace control pane

Both methods of using the trace control pane provide the novice programmer with the same manipulation operations for tracing a B# program solution. These manipulation operations are namely to

• proceed to the next step/programming construct in the program solution; • stop the trace; or

• toggle between docking and free floating the trace control pane.

The declarations table (Figure 5.7) is comparable with the watchlist feature of Delphi™ Enterprise but has been designed to be more accessible for novice programmers. During Declarations table Client area

Modified value marker

Docked trace control pane

the trace of a B# program solution, all the variables and constants declared for the program solution are listed in the declarations table. At the stage where a variable’s value is changed as a result of a programming construct effect, a marker (green tick) appears alongside the variable name to visually focus the attention of the novice programmer to the changed value.

An additional feature of B# ver. 3.0 is one that encourages novice programmers to always initialise variables. This feature is implemented by the automatic initialisation of all variables to randomised values upon declaration. During the debugging of program solutions, novice programmers are consequently faced with unpredictable program solution output until variable initialisation is included in the program solution.

As previously described, all B# program solutions are in the form of a flowchart of icons. On the addition of an icon to the flowchart, a customised icon dialogue guides the novice programmer in the specification of the properties required for the particular programming construct metaphorically represented by the icon.

5.3.6 Icon Dialogue Design

An icon dialogue was designed for each programming construct icon, giving a total of nine icon dialogues being implemented in B# ver. 2.0. An example of an icon dialogue, namely the counting iteration programming construct dialogue (corresponding to the PASCAL textual programming notation FOR statement), is shown in Figure 5.8.

An icon dialogue allows for the associated programming construct’s essential data to be viewed and maintained by the novice programmer, in effect eliminating the need for the memorisation of these details by the novice programmer. For example, the icon dialogue illustrated in Figure 5.8 requires the novice programmer to enter a looping variable, starting and ending values. These data items are essential to the counting loop programming construct and considered the properties of the counting loop programming construct. A screen shot of each of the remaining B# icon dialogues appears in Appendix B, together with other selected screenshots from the B# programming development environment.

Figure 5.8: B# ver. 2.0 counting loop programming construct icon dialogue

Figure 5.9: B# ver. 1.0 counting loop programming construct icon dialogue Menu bar Properties panel Errors panel Data specific to particular programming construct Generated textual program solution extract corresponding to programming construct Menu bar _{Properties panel}

Textual programming notation panel

Each icon dialogue has a similar design. The icon dialogues implemented in B# ver. 1.0 each consisted of four panels. An example of such an icon dialogue, the counting loop programming construct icon dialogue, is illustrated in Figure 5.9.

The top panel consisted of a menu bar containing shortcuts to previously declared variables and constants, as well as available primitive programming operators. The panel just below the menu bar, the properties panel, allowed the novice programmer to enter/edit information concerning the specific programming construct. The next panel was a textual programming notation panel displaying the generated textual program solution extract corresponding to the combination of the current icon with its essential data item properties.

The lower panel was an errors panel that displayed meaningful error messages related to all errors detected by the compiler with respect to the data entered in the icon dialogue. All entered data was thus required to be error free before the dialogue could be successfully closed (Blackwell et al. 2000). In this way B# ensured that the program solution remained free from syntactical errors at all times, and could thus be executed at any time.

Informal usability evaluation of the B# ver. 1.0 icon dialogues design (Thomas 2002b) determined that novice programmers did not pay much attention to the generated textual program solution extract presented in the third panel (Figure 5.9) and consequently might