This document describes an educational programming platform that uses graphical and tangible interfaces to make programming more accessible to beginners. It uses visual blocks and nodes to represent programming concepts and control structures. It also utilizes a tangible robot interface to provide feedback on programs and allow for physical interaction. The goal is to remove some of the complexity of text-based programming and increase student engagement through a more hands-on experience. The platform has been tested in classroom field tests and information on related publications and presentations is also provided.

1. Educational Graphical and Tangible
Programming Platform using Rich Client
Platform development
Sancho Oliveira Pedro M. Dias
sancho.oliveira@iscte.pt petermdias@gmail.com

2. Summary
 Motivation
 What it is?
 Strategy
 Visual Language
 Tangible interface
 Field tests
 Published work
 Questions

3. Motivation
 Traditionally programming is learned/taught with industrial tools.
 Borland C++
 Visual Studio
 Eclipse
 Others…
 Textual representation is a problem for beginners
 Removing the language complexity from the learning process.
○ If, se, si, wenn, если, ?
○ Eyes don’t have language.
 Understanding the results – Tangible interface
 Student needs to know how to read the results in order to grade them.
 Botbeans shows the results.
○ Robot interacting with the real world.
 Starting point to object-oriented languages
 Basic control structures.

4. What it is?
 Environment to teach and learn computer
programming.
 Graphical representations for basic control
structures.
 Graphical display of memory.
 Hybrid display for logic representation.
 Tangible interface
 Collaboration catalyzer
 Motivation

5. Strategy
1. Complexity
 Solution:
○ Visual language
 Better understanding of the algorithm.
1. Lack of motivation
 Solution:
○ Tangible interface
 Keep the student emerged and motivated.
 Seed collaboration between students.
2. Initial fear
 Solution:
○ Rich Client Platform
 IDE without any interface cluttering.
 Avoid information overload.

7. Diagrammatic/node based
 Positive
 Obvious logic flow
 Function
representation
 Negative
 Textual data-types
 Textual logic and
mathematical
expressions

8. Block based
 Positive
 Data types validation
 Block enclosing
 Negative
 Logic flow not so
obvious
 Complexity grows
quickly with the
problem.

9. Hybrid solution
 Block-based
 "In graphical block programming, users
manipulate and connect puzzle-piece objects to
build their programs.“
 "allowing only complementary blocks to connect
prevents users from making syntax errors“
○ R.V. Roque, “OpenBlocks : an extendable
framework for graphical block programming
systems.”
 Node-based
 "learning a programming language is easier if
people who are visual learners by nature began
by learning a data flow programming language“
 "The concepts of CGs are easily matched to
those found in textual programming languages“
○ B. Smith, “Conceptual graphs as a visual
programming language for teaching
programming,” Visual Languages and Human-
Centric Computing, 2009. VL/HCC 2009. IEEE
Symposium on, 2009, pp. 258-259.

10. Graphical Interface

11. Expression builder
 On top off MIT
OpenBlocks
 Heavy
customized.
○ Dynamic Blocks
language
definition.
○ Off-screen
rendering.
 Used in Scratch
and Google App
Inventor

14. Tangible interface
 How to output in Botbeans?
 Robot’s actions
○ Robot movement.
○ Robot small display.
○ Robot speaker.
 Input?
 Sensors connected to robot.
 Understanding the results
 Did the robot crash?
 Did it turned left instead of right?
 …
 Multiple points of interaction with the learning tool
 Screen for visual programming
 Robot for input, output and debug.

15. Tangible interface
 "the use of the tangible interface results in a more child-
focused activity. In other words, children seem to be more
actively involved and self-motivated“
 "tangible interface is more inviting and provides better
support for active collaboration“
 "if for no other reason than the tangible interface consists
of multiple input devices that can be manipulated
independently, while the graphical condition consists of
only a single input device."
 M.S. Horn, E.T. Solovey, R.J. Crouser, e R.J.K. Jacob, “Comparing
the use of tangible and graphical programming languages for
informal science education,” Proceedings of the 27th international
conference on Human factors in computing systems, New York, NY,
USA: ACM, 2009, pp. 975–984.

16. Tangible Interface
FCCT 2011 at IPT.pt

17. Field tests
FCCT 2011 at IPT.pt

18. Field tests
Do you think this experience has the potential to
motivate / cativate students?
14
15
10
5
0 1
0
Low Average High
Characterize your students participation in the
experience
10 8
5
5
1 1
0
Insuficient Suficient Good Very Good
FCCT 2011 at IPT.pt

19. Published work
 Related work
 A. Manso, C. Marques, P. Dias - Portugol IDE v3.x- A new environment to teach
and learn computer programming – Published in IEEE Engineering Education
2010, Madrid, Spain , 14-16 April 2010.
 A. Manso, P. Dias, C. Marques, Ensino e aprendizagem de algoritmia com a
ferramenta Portugol IDE - Published in XI International Conference on Engineering
and Technology Education - Ilhéus bahia, Brazil, 7-10 March 2010.
 Technical article
 Simplified IDEs for Teaching Programming on the NetBeans Platform -
http://netbeans.dzone.com/nb-simplified-ide-for-learning-to-program
 Presentations
 Botbeans - OSDOC 2010 - http://www.slideshare.net/pedromadias/botbeans-
osdoc2010
 Portugol - Educon 2010 - http://www.slideshare.net/pedromadias/portugol-
educon2010
 http://www.dei.estt.ipt.pt/portugol/
 http://www.botbeans.com (coming soon)