graduate school of engineering, shibaura institute of technology ○ toshiyuki imaizumi

A Programming Learning Environment "AZUR" : Visualizing Block Structures

and Program Function Behavior

Graduate School of Engineering, Shibaura Institute of Technology

○Toshiyuki ImaizumiHiroaki HashiuraSaeko MatsuuraSeiichi Komiya

JCKBSE’10 2010/08/26Shibaura Institute of Technology Toshiyuki Imaizumi 1

Table of contents background the function that AZUR aims control structure and program function visualization approach demonstration experiment future work conclusion

2010/08/26 Shibaura Institute of Technology Toshiyuki Imaizumi 2

grammar of the programming language

Basic algorithm

Application development

Flow of programming educationBackground

Problem of beginnersnot to understand concept of the programming

misunderstand the meaning of syntaxcannot understand the cause of error alone.

→lack of teacher, enough education is not done


Propose program learning environment AZUR for C language

the function that AZUR aims visualize various concept of programming

variable, control structure,function,various data type(array, struct, pointer)

can choose visualizationit is probable that user want to watch pointer only, not need array and struct

can training various errors to fix alonecompilation error and debugging with debugger

grasp the learning contextdiscover the person who cannot fix error


as the first purpose, I want that beginners can trace the execution process on the

desk

problem when beginner understand control structure nested control structure is difficult to understand


for(i=0;i<n;i++){ for(j=0;j<n;j++){ printf(“hoge”); }　 printf(“piyo”);}printf(“fuga”);

Which for-statement include or not?

When is this increment executed?

necessary supportto clarify execution range, show correspondence of control structure and source codeto show how actually moves, execute step by stepto show reason of movement, show correspondence of control structure and actual execution

After inside loop finish,where do execution go?

how I should visualize control structure [Hasegawa 98] investigate movement image of iteration

that beginner have.

result of investigationwho had image are more understand execution processloop type had better result than the other images


stairs type loop typecount up type

1 　　 2 　　　…　　　 n1 　　 2 　 … n

When control structure is nested, stairs type and count up type are difficult to think about movement image→ necessary to visualize by hierarchical form

visualization of control structure correspondence of source code and control

structure and the actual execution


for(i=0;i<n;i++){ for(j=0;j<n;j++){ printf(“hoge”); printf(“hogege”); }　 printf(“piyo”);}printf(“fuga”);

forfor

visualization of recursive function call I want to visualize the behavior of function

callactual argument is copied by formal argumentstacked to a stackframe and releasereturn a value to caller

make image of stackframe


int sum(int n){　 int s = n--;　 if(n > 0){　　 s += sum(n);　 }　 return s;}

sumif

sumif

return 6

function of AZUR visualization

visualize control structure and functionreal-time visualize structure when coding

can change visualization with tab IDE function

run, step in, step over, automatic stepshow referred variable in next line and changed variable just beforeshow line and variable value when run-time error occurredautomatic compilation error check and highlight


demonstration


constitution of AZUR


compiler(gcc)

debugger(gdb)

AZUR(implemented in Java)

.exe file

learner

compilation error help server

teacherlog server

generate

step,run ,success and fail compile with source code,runtime-error

experiment participants

second grader 43 people of the design department of engineering of Shibaura Institute of Technologytakes the class of C language for a half termstudying a class of algorithm practice from now on

they used AZUR by this class experiment

give 4 source codes and let them write execution process by before the class and after the class


line output variable valuei j n t

2 　 -1 -1 2 　　5 　 0 　　　

example of experiment

result of experiment(1)

Q2 ・ nested for-statementcorrect answer

mistake about execution

range

mistake about loop

mistake about nested

loop

others

before

5/43 (12%)

14/43(33%)

6/43(14%)

13/43(30%)

5/43(12%)

after 21/42(50%)

5/42(12%)

1/42(2%)

8/42(19%)

7/42(17%)

Q1 ・ nested if-statementcorrect answer mistake about

execution rangemistake about execution path

before 32/43 (74%) 7/43(16%) 4/43(9%)after 35/42 (83%) 1/42(2%) 6/42(14%)

2010/08/26 13Shibaura Institute of Technology Toshiyuki Imaizumi

result of experiment(2)Q3.function call

correct answer mistake about return value

mistake about execution path

before 15/43(35%) 17/43(40%) 11/43(25%)after 38/42(90%) 2/42(5%) 2/42(5%)

Q4. recursive function callcorrect answer

can't call recursive

can't return in recursive call

mistake about scope of variable

before 0/43 (0%)

38/43(89%)

3/43(7%)

2/43(4%)

after 8/42(19%)

13/42(31%)

16/42(38%)

5/42(12%)

2010/08/26 14Shibaura Institute of Technology Toshiyuki Imaizumi

result of F-test (1) carry out F-test for 41 participants who

attended at before the class and after the class together

compare result of the experiment with number of step execution

considered that the person who performed step execution used visualization, toonumber of step is counted by the unity that continued


become correct

Still not correct

average of step 108 65.3

variance 7795 1236

num 10 6

degree of freedom 9 5

P(F<=f) both side 0.0565

become correct

Still not correct

average of step 140 115

variance 19756 15297

num 20 16


P(F<=f)both side 0.621

1.nested if-statement 2.nested for-statement

result of F-test(2)


become correct

still not correct

average of step 111.8 47.2

variance 9985 870

num 22 4



become correct

still not correct

average of step 146.4 93

variance 22616 6331

num 24 12



3.function call 4.recursive function call

discussion


at all experiment, participants who become correct answer are more stepped average than not become correct answer.

null hypothesis is dismissed with probability less than 5% about the recursive function → it was effective in a result by using AZUR

about the for-statement, variance hardly has a difference

visualization is insufficient?change of the shape is necessary?

related work visualize of the control structure Avis[Kita 05]

converts code into flow chart→cannot correspond code andcontrol structure, and can't clarify execution range

[Shinkai 08] visualized hierarchicallycan execute step by stepsupport pseudo language only→ cannot support switchstatement and for-statement


related work visualize of the program function ETV[Terada 05]

when function called, open editor asidecan clarify where it was called → not show return value

Jeliot3[Moreno 04]can show the giving and receivingof the argument and return valuecan expression evaluation

effective for-statement→ there are many elements to one screens, it become blinder


Future work whole AZUR

cooperate with compilation error support system and error insertion systemdevelop real-time log analysis system

change of shapemake differences such as selection and iteration, while and do-while and for-stmtshow loop edge, loop count

add program function visualizationrelation of formal arg and actual argscope of variableassignment of return value

visualize variable and type2010/08/26 Shibaura Institute of Technology Toshiyuki Imaizumi 20

Conclusion I developed AZUR which visualize the concept of

the programmingVisualization is change possibility in a tabI regard teacher support and self-learning support

visualize control structure and function for understand execution process

clarify execution rangeshow correspond actual execution and control structure

AZUR is effective for recursive function


Thank you very much for kind attention


graduate school of engineering, shibaura institute of technology ○ toshiyuki imaizumi

Documents

azur aimscontrol structure

learning contextdiscover

various data typearray

alonecompilation error

cause of error

visualizing block structures

c language3the

execution process