Code Structure Highlighting & Error Indicators

Immediate feedback of errors (Pane & Myers 1996) is one of the recommended features that a pedagogical-PDE should have and supports the requirement to help recognise, diagnose and recover from errors (R8). SimplifIDE implements code

structure highlighting, which is a form of signalling to indicate to the novice programmer which parts of the source code are semantically related. Code structure error indicators are also implemented, which indicate if an error in the structure of the program has been detected. Both code structure highlighting and error indicators are displayed in a continuous, real-time fashion (Figure 4.7). These features also support the requirement of using signalling (R9) in a pedagogical-PDE.

Instead of only receiving feedback regarding the source code’s validity once program code is compiled, the code structure highlighting and code structure error indicators collectively provide continuous visual cues regarding the overall structural correctness of the program code. Whenever new program constructs are inserted or at regular intervals, the editor’s window is updated with annotations that provide information about the code structure.

Code Structure Error Indicator

Figure 4.7: Code Structure Highlighting, Code Structure Error Indicators and Identifier Error Indicators

Code structure highlighting annotates the source code in the code editor by shading structurally related pieces of text the same colour (Figure 4.7(d)). A fuzzy parsing technique is used to obtain high-level parsing information about the program code for the annotation to be useful. As mentioned previously, program code is very seldom syntactically correct after each key press (Teitelbaum & Reps 1981; Neal 1986; Khwaja & Urban 1993; Wallace et al. 2001). In addition to this, full parsing can be time consuming and is not appropriate for real-time updates.

The Abstract Syntax Tree created is only concerned with the structure of the program in terms of higher-level structures, such as variable declarations, procedures, functions, conditional and loop structures. The Abstract Syntax Tree is then used to render the annotations on top of the code editor. The code structure highlighter does not perform type checking. Type checking requires substantially more overhead to compute than code structure checking and is not feasible due to the highly interactive manner in which code structure highlighting is required to function.

If an error is detected with the code structure, then the Code Structure Error Indicator symbol, an exclamation mark in a yellow yield sign (Figure 4.7(a)), is placed next to the offending line in the source code editor. The novice programmer is not required to deal with the error immediately, but the program will not compile due to syntax errors should the novice programmer ignore it and attempt to compile the program code. Hovering the mouse cursor over the error indicator symbol brings up a tool tip

(a) Error description Location where error was detected ) (b) (c

Identifier Error (e) Code Structure Highlighting Blocks

indicating the nature of the problem (Figure 4.7(b)) and a red arrow to indicate which line of code triggered the error (Figure 4.7(c)).

For example, in Figure 4.7, the novice programmer would see the error indicator symbol appearing next to the repeat keyword, indicating that there is something wrong with the structure of the repeat loop. Hovering the mouse over the symbol will pop up the message “until expected, but end; found” and a red arrow will point to the

end; line. Using this information, it should be possible for the novice programmer to

search within the area between the two symbols to locate the source of the error, in this case a misspelling of the keyword until. In this example, the Identifier Error Indicator for unknown identifiers (Figure 4.7(e)) provides additional information to this effect. Identifier errors are discussed in Section 4.3.7.

for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; for i:=1 to 100 do begin sum := sum + n; if n mod 2 = 0 then begin inc(count1); writeln(count); end else inc(count2); end; Shaded Bracing Bracing Highlighting Highlighting Inverse

Indented Highlighting Inverse Indented Highlighting Shaded Bracing Inverse

There are a number of ways in which the code structure can be annotated. The annotation technique for highlighting code structure implemented in SimplifIDE was obtained by user testing and is discussed next.

Selection of Code Structure Annotation Technique

In order to select an appropriate annotation technique for SimplifIDE for highlighting code structure within source code, a prototype demonstrating a number of different techniques (Figure 4.8) was created and presented to 140 students who had completed the introductory programming course previously or were currently registered for it. The students were requested to complete questionnaires in which the students rated the various techniques from best to worst in terms of which made the structure of the code most visible and easy to see (de Jager 2004).

The annotation techniques implemented in the prototype included those commonly used by some other PDEs, such as the use of braces. The results of the test are shown in Figure 4.9.

Figure 4.9: Results of Code Structure Annotation Technique Questionnaires

Of the responses, almost 50% preferred inverse highlighting (lighter shading where the cursor currently is in the editor, with progressively darker shading of outer blocks, i.e. indented highlighting inverse 25% + highlighting inverse 21%) to any other kind of shading method. Indented highlighting inverse seemed to be the preferred choice of the students followed by highlighting inverse. The participating students stated that “the inverse colour scheme made the code easier to read than the normal colour

scheme and that the indentation helped to pick up the block of code easier” (de Jager 2004).

It is interesting to note that the use of braces, the most prevalent method of code structure highlighting used by professional-PDEs, was not very popular. Collectively, all the bracing techniques were the preferred annotation technique of 22% of the student respondents (4%+7%+11%).