+ All Categories
Home > Documents > A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function...

A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function...

Date post: 25-Dec-2015
Category:
Upload: anne-sutton
View: 219 times
Download: 0 times
Share this document with a friend
Popular Tags:
22
A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior Graduate School of Engineering, Shibaura Institute of Technology ○Toshiyuki Imaizumi Hiroaki Hashiura Saeko Matsuura Seiichi Komiya JCKBSE’10 2010/08/26 Shibaura Institute of Technology Toshiyuki Imaizumi 1
Transcript
Page 1: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

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/26

Shibaura Institute of Technology Toshiyuki Imaizumi 1

Page 2: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

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

Page 3: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

grammar of the programming language

Basic algorithm

Application development

Flow of programming education

Background

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

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

Propose program learning environment AZUR for C language

Page 4: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

the function that AZUR aims

visualize various concept of programmingvariable, 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

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

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

desk

Page 5: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

problem when beginner understand control structure

nested control structure is difficult to understand

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

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?

Page 6: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

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

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

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

Page 7: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

visualization of control structure

correspondence of source code and control structure and the actual execution

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

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

forfor

Page 8: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

visualization of recursive function call

I want to visualize the behavior of function call

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

make image of stackframe

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

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

sumif

sumif

return 6

Page 9: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

function of AZUR

visualizationvisualize control structure and function

real-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

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

Page 10: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

demonstration

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

Page 11: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

constitution of AZUR

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

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

Page 12: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

experiment

participantssecond 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

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

line output variable valuei j n t

2   -1 -1 2    5   0      

example of experiment

Page 13: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

result of experiment(1)

Q2 ・ nested for-statement

correct 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-statement

correct answer mistake about execution range

mistake 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

Page 14: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

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 call

correct 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

Page 15: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

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

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

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

degree of freedom 19 15

P(F<=f)both side 0.621

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

Page 16: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

result of F-test(2)

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

become correct

still not correct

average of step 111.8 47.2

variance 9985 870

num 22 4

degree of freedom 21 3

P(F<=f)both side 0.067

become correct

still not correct

average of step 146.4 93

variance 22616 6331

num 24 12

degree of freedom 23 11

P(F<=f)both side 0.032

3.function call 4.recursive function call

Page 17: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

discussion

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

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?

Page 18: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

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

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

Page 19: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

related work visualize of the program function

ETV[Terada 05]when function called, open editor aside

can 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

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

Page 20: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

Future work

whole AZURcooperate 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

Page 21: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

Conclusion

I developed AZUR which visualize the concept of the programming

Visualization 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

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

Page 22: A Programming Learning Environment "AZUR" : Visualizing Block Structures and Program Function Behavior A Programming Learning Environment "AZUR" : Visualizing.

Thank you very much for kind attention

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


Recommended