Abstract Thinking Description System for Programming Education Facilitation

-- Views

July 22, 20

スライド概要

Programming courses in universities generally teach how to solve problems. However, there are many beginners who fail to make programming well. This is because the beginners cannot be aware of abstract thinking related to the structure of the program, and cannot share abstract thinking with their instructors. In this paper, we propose a method to describe the structure of a program with native language comments in the code tree view and to simply change the structure of the program and the source code by drag-and-drop operation in the code-tree. With this method, beginners can easily organize their thoughts, and instructors can understand the level of understanding and thinking of beginners. We constructed a prototype system using our proposed method. The experiment indicated that it was possible to deepen the understanding of the beginners and utilize it for teaching.

Citation
Yasutsuna Matayoshi, Satoshi Nakamura. Abstract Thinking Description System for Programming Education Facilitation, International Conference on Human-Computer Interaction (HCII 2020), No.LNCS 12206, pp.76-92, 2020.

profile-image

Nakamura Laboratory (Meiji University)

@nkmr-lab

スライド一覧

明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

Abstract thinking description system for programming education facilitation Meiji University, Tokyo, Japan Yasutsuna Matayoshi, Satoshi Nakamura HCII2020

2.

Introduction • The objective of this study is to support teaching programming in universities. • Learning programming is step by step • Va r i a b l e • Conditional branch • Loop • Array • Function, and so on

3.

Introduction: Difficulties Not easy to learn programming for beginners. Courses on programming at private universities in Japan often have more than 100 students in a class. Te a c h i n g A s s i s t a n t s ( TA s ) are hired to support teaching.

4.

Introduction:Student-TA ratio I n o u r U n i v e r s i t y, 6 TA s h a v e t o support 120 students. S t u d e n t - TA r a t i o i s 20:1 !! TA s a r e t o o b u s y t o r e s t . TA s t a k e a l o t o f t i m e t o communicate with students.

5.

Introduction:Example of program by a student This task is to show “ FizzBuzz .” console 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz

6.

Introduction:Example of program by a student This task is to show “ FizzBuzz .” Please try to find out the mistakes programmed by the student console 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz

7.

An example programmed by a student int i=1; while(i <= 20) { println(i); if (i%5==0) { println("Buzz"); } else if (i%3==0) { println("Fizz"); } else if (i%3==0&&i%5==0) { println(“FizzBuzz”); } } console 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 …

8.

An example programmed by a student int i=1; while(i <= 20) { println(i); if (i%5==0) { println("Buzz"); } else if (i%3==0) { println("Fizz"); } else if (i%3==0&&i%5==0) { println(“FizzBuzz”); } i++; } console 1 2 3 Fizz 4 5 Buzz 6 Fizz 7 8 9 Fizz 10 Buzz 11 12 Fizz 13 14 15 Buzz 16 17 18 Fizz 19 20 Buzz

9.

An example programmed by a student int i=1; while(i <= 20) { println(i); if (i%5==0) { println("Buzz"); } else if (i%3==0) { println("Fizz"); } else if (i%3==0&&i%5==0) { println(“FizzBuzz”); } i++; } console 1 2 3 Fizz 4 5 Buzz 6 Fizz 7 8 9 Fizz 10 Buzz 11 12 Fizz 13 14 15 Buzz 16 17 18 Fizz 19 20 Buzz

10.

An example programmed by a student int i=1; while(i <= 20) { if (i%5==0) { println("Buzz"); } else if (i%3==0) { println("Fizz"); } else if (i%3==0&&i%5==0) { println(“FizzBuzz”); } else { println(i); } i++; } console 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 Buzz 16 17 Fizz 19 Buzz

11.

An example programmed by a student int i=1; while(i <= 20) { if (i%5==0) { println("Buzz"); } else if (i%3==0) { println("Fizz"); } else if (i%3==0&&i%5==0) { println(“FizzBuzz”); } else { println(i); } i++; } console 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 Buzz 16 17 Fizz 19 Buzz

12.

An example programmed by a student int i=1; while(i <= 20) { if (i%3==0&&i%5==0) { println("FizzBuzz"); } else if (i%3==0) { println("Fizz"); } else if (i%5==0) { println(“Buzz”); } else { println(i); } i++; } console 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz

13.

Introduction:Many Questions from students Could you find out these mistakes? D i f f i c u l t f o r TA s t o f i n d o u t m i s t a k e s o n l y checking programs presented by students. It's a very heavy burden for TAs.

14.

Purpose: Resolve teaching issue We proposal a method to support communication between TAs and students in programming education Students ソースコードを読解する時間と労力の削減 Students want to receive advice from TAs TA s TAs want to reduce time and effort to read and understand student’s program

15.

Abstract Thinking Abstract thinking is to decompose, abstract and generalize the program process. This skill is necessary to do programming. Example Abstract Thinking : Low ellipse copy-paste ellipse copy-paste.. Abstract Thinking : High Write 100 circles in a double loop with coordinates specified in a variable

16.

Abstract Thinking Example: “Create a program to manage Othello's frames” Abstract Thinking : High • Create a two-dimensional array to manage the state of the frames • Update the two-dimensional array Abstract Thinking : Low • Tr y i n g t o a c h i e v e u p d a t e s w i t h o n l y d i r e c t drawing instructions, not with variables

17.

Method : Visualizing Abstract Thinking We v i s u a l i z e w h a t s t u d e n t s a r e t h i n k i n g t o d o p r o g r a m m i n g . Write 100 circles in a double loop with coordinates specified in a variable ? We v i s u a l i z e a b s t r a c t t h i n k i n g b y f o c u s i n g o n t h e nesting of programs. → Tr e e s t r u c t u r e i s a d o p t e d .

18.

System

19.

System Students write the model of program using the code tree.

20.

Students write program with support of comment by the code tree.

21.

The tree is added "increment i by 1"

22.

The tree is added "if i can not be divided by 3 or 5"

23.

Reorder the tree

24.

Method:Code Tree Feature • Expressed his/her thinking as a tree with comment nodes • Parent-child relationships are described by nest structure • Users can add, delete, edit, and replace nodes

25.

Method:Code Tree A t e x t i n t h e C o d e Tr e e i s dynamically relate to a comment in a program. C o d e Tr e e ⇔ P r o g r a m Code Tree Program This method enables users to edit and reorder programs easily in each side.

28.

Difference between Flowchart and Code Tree Flowchart • Users need to learn how to write a flowchart in many cases. • D i ff i c u l t t o e d i t a f l o w c h a r t w h i l e w r i t i n g a p r o g r a m . Code tree • Users can learn the code tree easily because the writing process is intuitive. • Easy to edit the tree with the structure of the program in mind.

29.

Outline of experiments • Preliminary Experiment • First Evaluation in support teaching about programming • Additional Experiment • E v a l u a t i o n f o c u s e d o n c o m m u n i c a t i o n b e t w e e n s t u d e n t s a n d TA s • User Study with Beginners • User studies for beginners who were just learning In this presentation, we talk user study only because of the time imitation. For other experiments, please read our paper or contact us. yasutsuna.matayoshi@gmail.com

30.

User Study with Beginners Ta r g e t : 1 2 S t u d e n t s , 2 TA s • The students had just learned programming for three months.

31.

User Study with Beginners We c r e a t e d t w o s i m p l e t a s k s . Students are required to write a steering program. The location of the mouse cursor is expressed with a red circle and aisles are expressed with white rectangles. When the mouse cursor enters the black area, this program will finish. Students are required to write a program of a moving ball. The moving ball bounces off the wall, and changes colors when it hits the wall.

32.

Results : User Study with Beginners TA s c o u l d u n d e r s t a n d s t u d e n t s ’ q u e s t i o n b y u s i n g t h e c o d e tree and support their programming A TA s a i d “ I t ' s e a s i e r t o c o m m u n i c a t e t h a n u s u a l . ” The use of the code tree made it easier to explain ≒ Suggesting that sharing abstract thinking can facilitate instruction

33.

Effect of COVID-19 • We c o u l d n o t t e a ch f a ce t o f a ce. • We h a d t o t a k e a r e mo te pr o gr ammi ng c l ass. • We i mpr oved t h e pr o t otype s y stem s o t h a t s e p ar ated s t u de nts a n d TA s c a n c o l l abor ate.

34.

TA’s PC Student’s PC

35.

Summary We p r o p o s e d a n d e v a l u a t e d a m e t h o d t o s u p p o r t s t u d e n t s a n d TA s b y v i s u a l i z i n g t h e a b s t r a c t t h i n k i n g o f t h e program in the code tree. • Students: The code tree supports thinking and writing. • TA s : T h e c o d e t r e e e n a b l e s TA s t o u n d e r s t a n d t h e i n t e n t o f t h e q u e s t i o n o f s t u d e n t s e a s i l y. F u t u r e Wo r k • Experiment of the system in online classes