Abstract Thinking Description System for Programming Education Facilitation

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

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

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.

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.

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

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

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 …

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

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

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

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

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

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.

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

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

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

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 .

System

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

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

The tree is added "increment i by 1"

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

Reorder the tree

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

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.

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.

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

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.

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.

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

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.

TA’s PC Student’s PC

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