Educational Graphical and Tangible
  Programming Platform using Rich Client
  Platform development


Sancho Oliveira                                  Pedro M. Dias
sancho.oliveira@iscte.pt                   petermdias@gmail.com
Summary
 Motivation
 What it is?
 Strategy
 Visual Language
 Tangible interface
 Field tests
 Published work
 Questions
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.
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
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.
Diagrammatic/node based
                  Positive
                    Obvious logic flow
                    Function
                     representation


                  Negative
                    Textual data-types
                    Textual logic and
                     mathematical
                     expressions
Block based
                 Positive
                   Data types validation
                   Block enclosing


                 Negative
                   Logic flow not so
                    obvious
                   Complexity grows
                    quickly with the
                    problem.
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.
Graphical Interface
Expression builder
   On top off MIT
    OpenBlocks
     Heavy
      customized.
      ○ Dynamic Blocks
        language
        definition.
      ○ Off-screen
        rendering.

   Used in Scratch
    and Google App
    Inventor
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.
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.
Tangible Interface




FCCT 2011 at IPT.pt
Field tests




FCCT 2011 at IPT.pt
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
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)
Botbeans CISTI 2011

Botbeans CISTI 2011

  • 1.
    Educational Graphical andTangible Programming Platform using Rich Client Platform development Sancho Oliveira Pedro M. Dias [email protected] [email protected]
  • 2.
    Summary  Motivation  Whatit 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.
  • 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  "theuse 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.
  • 17.
  • 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)