Eple thesis

University of Cagliari

Faculty of Mathematics, Physics

and Natural Sciences

Master of Science in Information Technology

An Interactive Environment

for the Didactical Manipulation

of Programs

Supervisor Candidate

Riccardo Scateni Pier Giuliano Nioi

Examiner

Andrea Casanova

Academic Year 2011-2012

Title:

An Interactive Environment for the Didactical Manipulation of

Programs

Author:

Pier Giuliano Nioi

Supervisor:

Riccardo Scateni

Examiner:

Andrea Casanova

Thesis typology:

Experimental

Abstract:

In the process of getting novices learning computer programming

is necessary to ease the process by using the right tools and avoid to

clutter novices mind with too many not-so-important details con-

cerning structure and characteristics of a particular language, and

instead letting them to be able to grasp the fundamental abstract

concept of programming. In this work we will go through the pro-

cess of building an interactive novice learning environment that suits

those needs of learning.

Keywords:

Learning Environment, Teaching Tools, Program Simulation, Pro-

gram Manipulation, Web Application, CS1, Python, Program Visu-

alization

This part of tree

has become book

in April 2013.

May one day

after completing its cycle

among men desirous of knowledge

return to Earth

and become a new tree.

Contents

1 Introduction 3

1.1 About this work . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 Goals of this work . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.3 Sequence of activities . . . . . . . . . . . . . . . . . . . . . . . 5

1.4 Chapters overview . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Learning Environments 7

2.1 History and state of the art . . . . . . . . . . . . . . . . . . . 7

2.2 Examples of Learning Environments . . . . . . . . . . . . . . 9

2.2.1 Not directly related to learning programming . . . . . 10

2.2.2 Directly related to learning programming . . . . . . . . 18

3 Learning Programming 27

3.1 Learnable Programming . . . . . . . . . . . . . . . . . . . . . 27

3.2 Where state of the art fails . . . . . . . . . . . . . . . . . . . . 39

4 Inventing Eple 45

4.1 Finding a solution to the problem . . . . . . . . . . . . . . . . 45

4.1.1 Conceptual prototyping . . . . . . . . . . . . . . . . . 47

4.2 Finding pre-existing solutions . . . . . . . . . . . . . . . . . . 51

4.2.1 Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

4.2.2 Visualization . . . . . . . . . . . . . . . . . . . . . . . 52

4.2.3 Connecting the dots . . . . . . . . . . . . . . . . . . . 54

1

2 CONTENTS

5 Building Eple 57

5.1 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . 575.1.1 Merging the parts . . . . . . . . . . . . . . . . . . . . . 585.1.2 Adding features . . . . . . . . . . . . . . . . . . . . . 595.1.3 Architectures . . . . . . . . . . . . . . . . . . . . . . . 60

6 Using Eple 63

6.1 Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.2 Functionalities overview . . . . . . . . . . . . . . . . . . . . . 656.3 An example . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686.4 Pro and cons of EPLE . . . . . . . . . . . . . . . . . . . . . . 71

7 Conclusions 73

7.1 Work recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737.1.1 Future works . . . . . . . . . . . . . . . . . . . . . . . 75

Chapter 1

Introduction

1.1 About this work

One of the most important things in education is to adjust the teachingmethods and tools to the nature of the content:

One size does not fit all.

In the teaching environment this rule is rarely applied. In fact, the oppositerule, known as

One size fits all

is used with its counterproductive effects on students. As Papert [1] said,what an individual can learn, and how he learns it, depends on what modelshe has available. More models, more tools and thus more sizes of a curricu-lum, meaning the more ways to learn he has available, the more the studentwill be involved in what he’s learning. Understanding will be more deep andpersonal with tools that promote experimenting with a custom made micro-world for a specific topic, avoiding the need to solely memorizing thingswithout understanding them. These kind of thoughts put the spotlight upona topic that names like Montessori and Piaget already discussed in the lastcentury, but Papert ones are related to constructionism and learning theoryapplied with computer technologies. In his work called “Mindstorms” Papert

3

4 CHAPTER 1. INTRODUCTION

takes those thoughts and concretize them with the creation of the Logo Lan-guage and Turtle Graphics with Logo, a toolset that uses computer to teachsome really profound concepts of Math to young children. Instead of propos-ing a classical curriculum, he proposed a micro-world with its rules, in thiscase basic math rules, that made possible for a child the exploration of wellknown real world concepts in math with the help of a physical and graphicalaid called Turtle, that a child can identify himself with. In conclusion hecreated an appropriate tool for tackling the learning process of math fromanother point of view, with great results.

Drawing inspiration from this example, in this thesis work we use the samemethodology of creating the right tools for the right job but targeting noviceprogrammers. In the process of getting novices learning computer program-ming, is necessary to ease the process by using the right tools and avoidto clutter novices mind with too many not-so-important details concerningstructure and characteristics of a particular language, and instead lettingthem to be able to grasp the fundamental abstract concept of programming.In this work we will go through the process of building an interactive novicelearning environment that suits those needs of learning, after analyzing whatthe current tools used by novices are, and what are their limitations andproposing a theoretical solution and a proof-of-concept implementation of aninteractive learning environment that can be used in introductory courses ofcomputer programming.

1.2 Goals of this work

Like mentioned above, the main goal of this work is to create a learning envi-ronment that makes possible for novice computer programming students tounderstand the inner workings of a computer program by showing, in an ab-stract and useful way, the behavior of the fundamentals building blocks of allcommon programming languages without focusing on any of them in partic-ular, but staying as general as possible, in a pseudocode manner, and takingcare of hiding not-so-useful-at-the-moment details to the student to ease the

1.3. SEQUENCE OF ACTIVITIES 5

process of learning and thus giving easily digestible bits of information aboutprogramming.

1.3 Sequence of activities

For the realization of this work, was followed this sequence of activities:

Studying the state of the art. Finding what has already been done inour field of work and analyze their characteristics and limitations.

Studying and realizing a concept. Prototyping an interface for such atool and a relative software architecture to sustain the whole tool.

Researching pre-built software. Instead of reinventing the wheel, it isimportant to continue the development from available software that can bemodified to our needs.

Studying and hacking pre-built software. Once the pieces of softwareare found, starts the process of deeply studying them and hacking them tofind their potential.

Implementation of personal solution. Starts the “welding” process ofvarious pieces of software that originally weren’t made to talk one another,and follows the implementation of unique features for the personal softwaresolution prototyped before.

1.4 Chapters overview

What follows is a short recap of the content of each chapter in this work.

In chapter 2, Learning Environments, we will talk about the concept of learn-ing environments, what they are, where do they come from and show some

6 CHAPTER 1. INTRODUCTION

examples of various learning environments acting in various fields of knowl-edge. We then move on to our specific field of interest, computer program-ming, and analyze what learning environments are available at the momentof writing.

In chapter 3, Learning Programming, we focus on what it means to buildsuch an environment that is suitable for teaching and learning purposes withregard of programming, and with those concepts in mind we will then con-tinue the analysis of the limits of the current available learning environmentsand of the tools currently used for computer programming teaching and uponthose limitations.

In chapter 4, Inventing Eple, we will study and create a theoretical conceptof tool that may suit our needs. We then look for pre-existing software solu-tion that can be used as starting point to our project and studying them forsubsequent process of making pieces of software talk to one another.

In chapter 5, Building Eple, is described the implementation phase with focuson the technologies used in the process and the software architecture createdfor the tool. Will be analyzed the structure of the tool, divided in frontendand backend, and each component will be respectively analyzed.

In chapter 6, Using Eple, we will do an overview of functionalities of thetool and analyze an example created with the tool, and the general benefitsintroduced by the tool.

In chapter 7, Conclusions, we draw conclusions from the work done, andshow future developments of the tool that may be used or integrated inbigger environments even outside the teaching and learning field.

Chapter 2

Learning Environments

In this chapter we are going to talk briefly about what Learning Environments(L.E. from now on) are, what they try to accomplish and what are the mostpopular examples in various fields of knowledge. We then focus on our fieldof interest, that is programming learning, and analyze what is available andwhere those solutions available meet their limits.

2.1 History and state of the art

As stated above at the beginning of the introductory chapter, names likeMontessori first and Piaget after, inspired the work of Seymour Papert ofbuilding a so called L.E. for letting the children exploring the world of mathconcepts for the first years of school. He followed theories like Construc-tivism, which states that learning is an active and continuous process wherethe learner takes information from the environment and constructs personalinterpretations and meaning based on prior knowledge and experience. Dur-ing the learning process the learner faces curiosity and investigation of theenvironment he has in front of himself, and experimenting with that envi-ronment he develops interests and needs that have a great influence on thelearning process itself, making the learner more active and participant on theentire process, and thus personal interpretations builds up to be the base ofnext question and interests guided not by a curriculum by the curiosity of

7

8 CHAPTER 2. LEARNING ENVIRONMENTS

the learner and the paths he choose to follow during the entire process. Basi-cally the learner absorbs the new concepts into the old concepts in a processthat Piaget calls assimilation, and constructs his knowledge in the courseof actively working with it. Obviously the learner can build false hypothe-sis on which will build even more of them, but during this process he willsomehow encounter the fact that something isn’t right and will understandthat he has been wrong somewhere and thus, with the help of a teacher thatis more like a mentor or tutor that knows already everything that concernsthat particular field of knowledge, he can truly learn with what is called thetrial and error process. Actually our educational system rejects the creationof "false theories" made by the learner, thereby rejecting the way a personreally learn. All of this is also seen as a social activity in which learning ismediated through the social interactions among the learners as they engagein the learning activity, thus collaborating instead of competing.

Papert exploited this collaborative nature of learning and also the previousstated theories, in the language Logo and the physical and virtual objectcalled “the Turtle”. With these two tools, he built a L.E. for learning mathconcepts, and the students were engaged in the process of learning in a col-laborative mode, sharing ideas and thoughts and reasoning about solutionsfor given problems. He did not create a tool in which a student can put aproblem and then the computer solves it like a calculator will do. He went be-yond the classical notion of computer as calculator, and thus avoiding puttinglimitations of classical tools, like calculators and text books for example, inthe way we use new technologies like a computer. Papert understood thatcomputers got so much more potential than classical tools and he imaginedto use them as hosts of micro-worlds in which certain subsets of math ruleswhere true and implemented, in its particular case math rules. The studentwas able to explore a simulated world without following a particular curricu-lum, or list of concepts to learn in sequence. The student was free to explorethe micro-world and built a personal mental figure of what math representedto him, while maintaining all the basic rules true to every interpretation ofall the student that were taking part in the process.

2.2. EXAMPLES OF LEARNING ENVIRONMENTS 9

He said, in the early 1980s, that most of what has been done up to now underthe name of "educational technology" or "computers in education" is still atthe stage of the linear mix of old instructional methods with new technolo-gies, as a way to remark the enormous potential of the new technology. Thisnew way of thinking and usage of the tool called computation is still at astage very similar to what Papert had in its times. In fact in its recent bookDouglas Rushkoff [4], in the attempt of describing a set of rules that someonein the digital era should live with, analyzes what kind of usage is made ofthe computer nowadays. The result, after 30 years so far after the work ofPapert, is shocking: we are still using this new technology of computing asit was the expected usage of a previous technology, for example the printedpaper. We are mainly treating the computer as an evolved writing machine,an evolved book, metaphor of Gutenberg era. In the context of L.E., learn-ing in fact still goes mainly for books, reading and writing processes insteadof interactive environments that engage and require active participation ofstudents. Both Papert and Rushkoff in their books wanted to incite the useof computer for higher purposes: student should be able to use it for whattechnologies it brings to the world of today, mainly its programmable capa-bility. But this one is a specific topic which we will cover later.

But as the matter of fact, we are still far from what Papert imagined, maybeit’s due to the Conservatism in the world of education. Returning to theconcept of L.E., example of these environments, or micro-worlds, are brieflydescribed in next session, where we can really take the essence of the conceptof experimenting and understanding and learning at the same time withouta prefixed curriculum of learning in which you have either "got it" or "got itwrong", no learning-by-mistakes allowed.

2.2 Examples of Learning Environments

To better understand what this abstract concept of L.E. is, we now brieflyanalyze what is offered in the education "market" and its characteristics.


We can differentiate between L.E. with or without the computer aid. L.E.without computer aid are classical environments born with the school en-vironment itself, where learning is achieved with lessons, presence of a cur-riculum, a grading system, books, written exams and so on. Computer areused only as mere tool of calculation. Some schools, by the way, constitutea different and more interesting L.E.: Montessori schooling system and edu-cation is a kind of approach toward learning developed by italian physicianand educator Maria Montessori in which education is characterized by anemphasis on independence, freedom within limits, and respect for a child’snatural psychological and cognitive development.It follows a constructivist or "discovery" model, where students learn con-cepts from working with materials, rather than by following a particularcurriculum, with the help of a teacher that helps them understand doubtsand concepts.L.E. with the aid of computer we can say that generally take some of thoseprinciple of a Montessori-like learning system, and like Papert with Logoand Turtle graphics, they create a set of micro-worlds, and environments, inwhich the student can explore and understand in its own ways the set of rulesimplemented in such environments, rather than following a prefixed point ofview. In this computer aided environments various fields are targeted andmany of them involve a multi-field scenario. L.E. with computer aid con-stitute a coadjutant to the classical environment of school but are also usedin certain situation where there is no schooling system, like auto-didacticallearning, or e-learning. What follows is a list of examples of the most pop-ular computer aided L.E. For purpose of argumentation, we divide them indirectly related to or not directly related to our field of interest in this workwhich is learning programming.

2.2.1 Not directly related to learning programming

Starting from L.E. that aren’t directly related to our field of interest which,again, is learning programming, is worth talking about some of the mostfamous examples of environments. In the field of math we have the prime


example of the above cited Papert: Logo language and Turtle Graphics. Inhis book [1] he says that:

Our education culture gives mathematics learners scarce re-sources for making sense of what they are learning. As a resultour children are forced to follow the very worst model for learningmathematics.

And with this and similar motivations he built the Logo environment, aimedat providing a way for young learners to actually learn math through ametaphor they could relate with: the Turtle and the micro-world were itlives. The environment gives the student the ability to find, explore, playand getting used to concepts of math and geometry in an Euclidean spacethrough the use of a on-screen turtle or a physical turtle robot, both of themcontrolled via code that the student types on a computer. As a side effectthe student learns to code, but primarily he get notions of angles, distances,abstract concepts like circles, and so on, and composing code through mod-ularity, he then engage himself and other children to draw various figures.The turtle moves with commands that are relative to its own position, andwhen it moves leaves a trace if the ’pen’ is ’down’. For example there arecommand to make the turtle go ’forward’ ( or ’fd’ for the abbreviated versionof the command ) of a certain amount of space, or ’back’ of another amountof space, make it ’turn right’ or ’left’ ( ’rt’ or ’lt’ for the abbreviated versionof the command ) by a certain quantity that in fact is directly mapped toangles, degrees, and so on. Due to facilities of the language, is possible toiterate, abstract, modularize the code, letting the student think in its ownway, free to explore, learn and solve the problem in its own personal way. Astudent could understand the turtle’s motion by imagining what they woulddo if they were the turtle, making this metaphor able to let the student feelthe problem to solve on its own body, like if he were identified in the turtleobject. “How do you draw a circle?” the teacher may ask, and the studentpretending he is the turtle could say “I move a little bit forward, then turninga little bit to the left, and then again moving and turning a little and so on”and in the meantime he starts to think about the quantities and find for him-


self that exists such things called angles and for example that the total sumof this angles for a circle is equal to 360, and so on. All without introducinghim to theorems or whatever, letting him free to discover. What follows is asnippet of Logo code that creates two procedures, procedures expressed morelike a verb in the form of “to do-something eventually-with-parameters”, oneprocedure that creates a circle and the other one that creates an abstractdrawing made of circles, and this one is called.

to circle

repeat 45[

fd 8

rt 8

]

end

to logo

repeat 20 [

circle

rt 18

]

end

logo

Drawing process of previous code.


The process is somewhat interactive, and thus the student can see the changeson the behavior of the turtle ( on-screen or physical robot ) when he inputsnew code. This is a completely new approach compared to reading a mathbook and try to figure out what happens, and memorizing, without reallyunderstanding why, theorem and rules. The role of the teacher in this en-vironment is that of a participant in the learning process of its students,helping with hints or aimed questions to give an input to students that ap-pear stuck, helping them reach the goal. Logo itself is no longer maintained,but a vast amount of clones are still in the “market” at the moment, each onewith its exclusive feature, like for example the possibility of having multipleturtles that concur and communicate to each other via so called ’messages’.A basic version of Logo is also implemented in the Python Language 1.Following the path of drawing and animating, the next L.E. that we are go-ing to describe is directly influenced by the Logo environment, but abstractsfrom the need of typing code and thus is much more easy to get used to it,introducing a metaphor of block-programming. This L.E. is called Scratch2

and it was developed by the Lifelong Kindergarten group at the MIT MediaLab. The metaphor it introduces consists in letting the user build programsand scripts by putting together blocks one upon the other, stacking them,nesting them in various ways for the final result of a sequential list of blocksthat achieve certain goals.

There are various kinds of blocks, data block, control-flow blocks, drawingblocks and many more. By dragging them from the palette onto the can-vas and combining them like Lego blocks, the user commands a little cat,which is the same concept of the Logo Turtle introduced by Papert in Logoenvironment. Uses are various, varying from math learning to storytellingand animation and even game creation, with the help of some functionali-ties that make the script of the user sensitive to input and thus interactive.

1Turtle graphics is a popular way for introducing programming to kids. It was part ofthe original Logo programming language developed by Wally Feurzig and Seymour Papertin 1966. http://docs.python.org/2/library/turtle.html

2Scratch: a programming language for everyone. Create interactive stories, games,music and art - and share them online. http://scratch.mit.edu

http://docs.python.org/2/library/turtle.html

http://scratch.mit.edu


Scratch has also been used to teach in various introductory courses in CS fornon-CS-major students, because it helps grasping fundamental programmingconcepts without being too formal or showing too many irrelevant ( for thebeginner ) details. A dedicated Online Community let Scratch user sharetheir programs and learn from what other users have produced with Scratch.

What follows is a screenshot of the application, in which the same programlisted above in Logo language is expressed but with the new metaphor ofblocks.

Code and drawing process are in the same window.

The image shows a snapshot of the little cat, mascot of Scratch, moving onthe canvas and drawing the same picture of previous example.

We can see clearly that the code is somewhat absent, but in reality is ex-pressed by those stacked blocks, which respectively clean the canvas, put thepen down on the canvas, start a first loop of 20 iterations of a second loopthat draws a circle and a command that rotates the cat by certain amountof degrees clockwise.


Another environment that uses this block metaphor ( before Scratch wasinvented ) is ALICE [10, 11] that also aims where the previous cited Logoand Scratch point, but it does so by using a 3D world instead of a 2D plane,putting its emphasis on visualization of concepts and storytelling.

There are many others L.E. similar to the ones depicted above that we cantalk about but main features are at the moment the one that are in thoseenvironments.

For more advanced math environments it is worth naming Geogebra 3 whichhas a fully implemented 2D and 3D environment, letting the user explore allof the major concepts like mathematical functions, points, vectors, segments,lines, polygons, conic sections, inequalities, implicit polynomials geometry,general algebra and calculus all in an interactive way, meaning that all ofthem can be changed dynamically and changes propagate and update theenvironment in which those objects live. The main difference of a programthat simply calculates results of expressions, or derivatives o integrals andso on, is the interactivity tied to the visualization of the concept that arehandled by the student. Teachers and students can set up the learning byexploring technique to make conjectures, hypothesis and find out about ge-ometric theorems simply by playing with this micro-world where math ruleare implemented. What follows is a picture of the environment while creatingan interactive notepad for understanding how two important math functionslike sine and cosine relate to one another in respect to a shift value that isinteractively modifiable.

3Geogebra: a geometry package providing for both graphical and algebraic input.http://www.geogebra.org

http://www.geogebra.org


In this really simple and silly example Geogebra is used to interactively findout, by moving the slider, the proof of why the two function depicted abovestart at value 1 when fed 0 as argument in case of the cosine function andstart at value 0 when fed with 0 as argument in case of the sine function,and by moving the slider until they overlap each other at a shift value forthe sine function that is in fact 1

2⇡. The toolbar offers so many option thatentire courses are based on the fundamental of this environment: a worldwithin a world. Geogebra is also integrated in another L.E. called Kojo4

implemented in the Scala Language5, an new Object Oriented FunctionalProgramming Language that runs on the Java Virtual Machine. Kojo itselfis an environment with many different features that enable play, exploration,creation, and learning in the areas of Computer Programming, Math and Sci-ence, Systematic and Computational Thinking, Art, Music and much more.It aims to be an all in one environment.

Moving on through the list of non-programming L.E., we must talk aboutthose environments that simulate the real world through physics engines withhuge sets of real world physics rule implemented: from gravity, to springs, im-

4Kojo Learning Environment: http://www.kogics.net/sf:kojo5Scala: http://www.scala-lang.org/

http://www.kogics.net/sf:kojo

http://www.scala-lang.org/


plementing forces, temperatures, friction, laws of particles and waves, light,sound and so on. The one choose as a representative is called Algodoo 6,previously named Phun and open-source, that has gone commercial due toits popularity. Basically is a 2D-simulation software designed in a playful,cartoony manner, built for creating interactive scenes and, like Papert wouldlike, encourages students and children’s own creativity, ability and motivationto construct knowledge while having fun (that why its previous name wasPhun ), because it is both entertaining and educational. Students can createsimulation scenes using simple drawing tools like boxes, circles, polygons,gears, brushes, planes, ropes and chains and interact with those objects byclick and drag and drop, make changes by rotating, scaling, moving, cuttingor cloning the objects. Is also possible to add more physics in your simula-tion like fluids, springs, hinges, motors, light rays, tracers, optics and lensesor playing around with different parameters like gravity, friction, restitution,refraction, attraction, and so on. Again, the students learns by playing andthen he better understands certain theorems and rules of physics. Follows, inthis case too, a picture of a scene in which many components are simulatedat the same time, that interact and change the world around them.

6Algodoo: http://www.algodoo.com/

http://www.algodoo.com/


There would be a lot more of environments worth describing for their par-ticular field like the complete software solution targeting children in poorareas of the One Laptop Per Child7 laptop, mounted with Sugar OS8, anoperative system studied to integrate various L.E. all in one device. Themain characteristics of a generic L.E. are by the way already depicted bythese few examples that we just analyzed. From now on we focus our aimexclusively to environment dedicated to learning programming, which is ourfield of interest for this work.

2.2.2 Directly related to learning programming

In this section we are going to briefly analyze what is available at the momentin the “market” of L.E. targeting our field of interest, for this work of the-sis, that is learning programming. It’s worth remembering that educationalprogramming learning environments are designed primarily as a learning in-strument and not so much as a tool for writing programs for real-world work.With this viewpoint in mind we first discuss rapidly the characteristics of his-torical tools for this purpose and then we analyze more recent, evolved andspecialized environments available today.

Starting from low-level oriented environments, which means environmentsthat make use of what comes right after machine code, namely assemblylanguages, we find various implementations and dialects for concrete and ab-stract machines. Being usually untyped and rigid, this kind of languagesand environments are used in combination of teaching the specific proces-sor architecture they are written for, hence this is usually used in advancedcourses for learning about fundamental computer processor operation. Littleman computer ( LMC ) is an educational model of a computer used to teachstudents all the basic features of a modern computer because it models asimple von Neumann architecture, programmable in machine code ( usuallyin decimal ) or in assembly code, which then is converted and compiled into

7One Laptop per Child: http://laptop.org/8Sugar OS, Sugar Labs—learning software for children: http://www.sugarlabs.org/

http://laptop.org/

http://www.sugarlabs.org/


machine code. Assembly code usually it is used for abstraction and read-ability purposes of machine code. This model is based on the metaphor ofa little man that lives inside a computer in which there are 100 mailboxesnumbered from 0 to 99, which represent the memory, and there are two mail-boxes, one for inbox and the other one for outbox, used for receiving andgiving data. The center of the computer, is a working area in which thereis a box called the accumulator that executes two function, addition andsubtraction, and then there is also another box which represent the programcounter that holds the next instruction that the little man has to carry out ofthe memory. Instruction and data are in the same memory as specified by thevon Neumann architecture. The execution process is like follows: the littleman has to fetch the instruction at the mailbox numbered like the programcounter, then he increments the program counter and decode the instructionand retrieving the data from the mailboxes on which the accumulator has towork on and then after the execution of the addition or subtraction the datawill be stored inside the mailbox from which the old data was retrieved. Thelittle man executes then the next instruction or halts.

This metaphor, besides its low-level concepts, helps the student to identifyinto the little man itself and understand the data-flow and operations thatare executed in such low-level details and helps him to program in such low-level terms. Obviously it is a simplified version of a calculator, working withonly two function and on reduced subset of numbers, but it is quite as pow-erful, computationally speaking, as a Turing Machine.

More concrete models are subset of the MIPS architecture, restricted for ex-ample to integers, but they follow the same concept depicted so far, even ifthere is no little man inside the processor architecture, but busses that passdata from ALU to memory and viceversa.

One can also build its own language and environment, low-lever or not, madeof tools for simulating a computer machine and its internal memory, all uponother existing language as Domain Specific Languages (DSLs). It is the case


of the AREtool, a customizable tool built in OCaml for the Computer Sci-ence course of Computer Architectures here in Cagliari. This tools receivesa program in a specific assembly code, that is then interpreted and executedand let the user say how many steps of computation he wants the tool toexecute and lets him analyze the state of the memory at each steps, lettingthe student able to understand the operations on data and so on.

Moving on toward high-level oriented environments, that aren’t meant tobe associated with high-level languages used by professionals everyday andhaven’t got features for promote learning programming, we focus on thoseparticular tools that provide instead, like all the previous L.E. depicted sofar, a sandbox for playing, grasping and understanding the fundamental con-cepts of programming in this particular case. We can make an exceptionfor the BASIC and Pascal languages, that were the primary choice in intro-ductory computer science classes for teaching students programming, whichhaven’t got an environment but they were created with the intent of mak-ing programming learning easy also for non programmers. The aid given tothe learner here is in the simplicity of the language itself that lets beginnersexpress their ideas and letting them create interactive programs with thehelp of clear syntax and clear error messages, without the need of knowingoperating systems and computer hardware details. Many dialects and appli-cations were made, but one in particular is worth mentioning: Basic-256. Itis an easy to use version of BASIC designed to teach anybody the basics ofcomputer programming and it uses traditional BASIC control structures (for loops, goto ) for ease of understanding program flow-control. It has thecode editor, text output window and graphics editor window are all visiblein the same screen, letting the learner focused in one environment, withoutconfusing him through various windows and steps to go through. Like tra-dition, we will see that this environment implement when possible a built-ingraphics mode that allow to draw pictures on screen after minutes, like theLogo Turtle. Picture of the environment calculating a fractal.


Moving on, we can now also consider under a different light the previousdiscussed Logo, Scratch, Kojo and Alice that were designed for building rea-soning skills but also, as a side effects, teach how to program. With the Javalanguage at his base, we can consider talking a little bit about BlueJ 9 andGreenfoot 10, developed by the same team but with different approaches tolearning java programming. The first one is considerable as an evolved text-editor & compiler couple, but a reduced professional IDE and does providerapid interaction with the created code, letting the user create object, exploreand inspect them, making them talk to one another, understanding in thisway the fundamentals of Object Oriented programming by providing con-crete experiences for abstract concepts. One can code and execute standardjava code. The main focus and goal of this approach is for beginners to moreeasily develop a consistent mental model of object-oriented systems, theirproperties, and their execution. Main interface visualizes code and classes

9BlueJ: http://bluej.org/10Greenfoot: http://www.greenfoot.org/door

http://bluej.org/

http://www.greenfoot.org/door


like a UML diagram keeping the environment and the interaction simple andconcise. There is no need to say that the pedagogical approach represented inBlueJ is still based on constructivism and visualization. Greenfoot, instead,teaches object orientation with concept of ’actors’ that can be programmedto act independently which live in ’worlds’ (represented by a rectangularscreen area) and use them to build games, simulations, and other graphicalprograms, by programming those actors with code for movement, rotation,changes of appearance, collision detection and much more.

Almost the same basic elements of Basic-256 interface and interaction arein KidsRuby11. It presents an editor where the learner can type in its codeand a view for analyzing the output of execution, it can be text or visual,in the last case the same classical visual output of a Turtle that draws likeknow we expect to do, but does not show the state of the memory, variables,data. It comes in forms of application executable or with its own live system,KidsRuby OS. This type of learning system interface is being adopted alsoon interactive online courseware like Codecademy 12, Khan Academy 13 andmany other more that in the recent times are contributing to help self-learnersincrease of knowledge in the field of computer programming.

Here is an example of interface of this kind of environments: to the left sidewe have and interactive editor and to the right side its output executed or inexecution.

11KidsRuby: http://kidsruby.com/12Codecademy: Learn to code http://www.codecademy.com13Khan Academy: https://www.khanacademy.org/

http://www.codecademy.com

https://www.khanacademy.org/


A particular set of high-level environments for learning programming con-cepts are programming oriented games. They are interactive and responsivefor their underlying nature of games and provide a micro-world to explore,in which create and learning, but at the same time they force the learner tothink in terms of abstract programs and rules.Microsoft’s Kodu 14 is a visual programming language made specifically forcreating games, simple and entirely icon-based. There is no code to type.It is designed to be accessible for children and enjoyable for anyone. Theenvironment runs on the PC but also on the Xbox, allowing rapid designiteration using only a game controller for input. Programs are composed ofpages, which are divided into rules, which are further divided into conditionsand actions. Conditions are evaluated simultaneously. Provides specializedprimitives derived from gaming scenarios. Programs are expressed in physicalterms, using concepts like vision, hearing, and time to control character be-havior. Kodu can express advanced game design concepts in a simple, direct,and intuitive manner. The world itself is a 3D world that can be changed bythe user or by the actors programmed accordingly to do a terraforming-likeoperation.Here we show the process of programming an actor (WHEN condition DOaction rules) and the surrounding world on the background.

14Kodu Game Lab: http://research.microsoft.com/en-us/projects/kodu/

http://research.microsoft.com/en-us/projects/kodu/


The last example that we are going to show is a far more formal game thanthe previous one. It is Manufactoria 15, a simulator and robot-based game forlearning automata theory. The main goal here is to build a set of orchestratedrobots that work accordingly for accepting or rejecting input strings (inputsthat have to go from top right to the bottom of the 2D game board whereparticular holes are located) that have to be processed and respect level spec-ifications. It may look easy at first levels but rapidly becomes difficult andthe learner may feel the need to use pen and paper to draw and reason aboutautomatons (if he studied them before, otherwise will learn them playing thegame) that can solve the problem. Strings can be read from or written ona tape, like an advanced turing machine, and many more controls appearwhen you progress into the game. The interface is pretty straight-forwardand responsive.

Here is a quick look at some of the screens of the game, from level selectionto real gameplay and test of the automaton with input tape.

15Manufactoria: http://pleasingfungus.com/Manufactoria/


It is also possible, during the test of the automaton, to control the speed ofexecution of the process.

As always there will be a lot more environments worth of discuss, but herewe have depicted the common features present in almost all of the modernL.E. for learning programming.


Chapter 3

Learning Programming

In this chapter we are going to discuss what an ideal L.E. may look like,what features it must have and then analyze where the state of the art failsat doing so.

3.1 Learnable Programming

In the previous chapter we’ve talked about general concepts of learning envi-ronments, involved directly or not to learning programming. They substan-tially built up on the concepts that Papert took from Piaget and Montessori,about constructivism, that he in his turn adapted to computer and computerscience, naming it “constructivism”. Thanks to an essay from Bret Victor,called “Learnable Programming”[2], we are going to find some key elementsand aspect that must be kept in mind for our work, that is building suchand environment for helping novice computer science students manipulateand enrich their knowledge of programs and programming. Upon this rea-soning and the previous depicted characteristics of existing L.E., we move oncritiques and propose a solution that will be explained in the next chapter.Like said before, commonly used tools by students to learn computer pro-gramming are systems that have been designed for purposes other than learn-ability, exception made for those student that have luck and use those L.E.discussed above, even if they do not completely represent what Papert though

27

28 CHAPTER 3. LEARNING PROGRAMMING

to be a reasonable environment for learning. We then need to build new onesthat have a different emphasis, almost like Papert did at his time, on learn-ability.Bret Victor at the beginning of his essay asks an important and tricky ques-tion to the reader:

How do we get people to understand programming?

The question can be interpreted as asking what a person has to learn in orderto be able to program and/or what has to be done in order to make peoplelearn the right concepts about programming. He approaches programmingas a way of thinking, not a rote skill. He claims that learning programming isaimed at building a robust mental model of an abstract machine with the goalof solving everyday problems by being able to formulate an abstract program,a set of instruction or steps to execute that bring the “programmer” to thesolution of the problem. He criticizes the fact that learning the features of aparticular language doesn’t help to solve the problem: there is first the needto build and educate a problem solver and then in a second time the educatedlearner can choose for himself what are the languages or technologies, thatcan better implement abstract models built by the solver, use for the concreteimplementation of the abstract solution. At this moment of writing we cansay that the learner is doing the effort of adapt himself to the languages andthe technologies available and not viceversa, that is instead a better way touse computer technologies and is a better approach to tackle problems, alsolike Papert was hoping in its book. Computing education research is aboutunderstanding how people develop robust models of abstract machines, andhow we can help them achieve those mental models.

Learning about "for" loops is not learning to program, anymore than learning about pencils is learning to draw.

It is then necessary to put the emphasis in the right things when creatingthe learning environments. In general, people understand what they can“see”, with the verb “to see” holding various meaning, varying from the phys-ical ability to perceive light and colors but mostly the ability to understand

3.1. LEARNABLE PROGRAMMING 29

things, seeing their inner mechanisms and how are they working. In our caseif a programmer cannot “see” what a program is doing, he can’t understandit. He has to try to figure it out by mentally following the flow of execu-tion and this could be simple for small programs but starts to be difficult ascode complexity grows. Thus, the goals of a programming system should be:to support and encourage powerful ways of thinking to enable programmersto “see” and understand the execution of their programs. Most of the en-vironments, besides their appearance of interactivity and understandability,usually let “see” very few useful things and make understanding a difficultprocess, mining the basis of good learning. And an interactivity feature, asa standalone feature, is worthless for learning. This reasoning is in contrastwith the classical statement that says

"To understand a program, you must become both the ma-chine and the program."

This is not the same as the machine that mimics the human, like the turtlethat helps reasoning like a living thing and not a machine, or the little manthat acts like a secretary and not a machine; in this statement instead isthe human that has to mimic the machine. This view is a mistake, theprogram is usually “one sized” and forcing the learners to fit inside of it,is wrong and inconvenient. It is this widespread and virulent mistake thatkeeps programming a difficult and obscure art. A person is not a machine,and should not be forced to think like one.How do we then get people to understand programming? Paraphrasing whatsaid before with a proverb, “if the programmer does not go to the program,then the program must come to the programmer”. And we do so by simplychanging programming and the way we learn it. We turn it into somethingthat’s understandable by people. We now, more than ever before, have thetools that let us build systems that can go far beyond the reduction of ourmulti-dimensional reality to a subset of dimension that fits the computerbut loses various important dimensions. For example it could be possible tobuild such a system that goes beyond the simply act of manually coding themachine, and upon that dimension create layers that interact with the user


via more and more complicated artificial intelligence algorithms that can forexample do the coding for us listening from our direct voice the specificationsof the application we want. But lets stay in the present for now.

Let’s start to find the major components of a programming system that wellsupports learning programming. We can say that a programming systemhas mainly two parts: the programming "environment" is the part that’sinstalled on the computer, the programming "language" is instead the partthat’s installed in the programmer’s head. Each one of this two parts has togive certain features in order to create a useful system. For the environmentwe have that is required from it, at least, to let the learner understand themeaning of the elements and words that the programming environment uses,to let him follow the flow of things in order to understand what is happeningat each point, to let him also see the state of the computer in such ways thatexplain who and why the computer act in certain ways. It would be alsonice that this environment promotes the creation from scratch and the buildmore complex things upon them, and also it should be possible to createa concrete thing and being able to generalize it with ease. The concept ofa system split between the computer and the head was derived from WillWright’s thoughts on games (Will Wright is the creator of some of the mostfamous computer games like The Sims , SimCity, Spore ).

The other component of such system, the language, should provide a way torelate the computer’s world to world owned by the learner, like the Turtlemetaphor does with the kid. The language should encourage to break downthoughts into mind sized pieces, meaning that the learner shouldn’t have theneed of keeping in mind complex structures when building them because themind does not scale well for bigger problems and we need to focus on piecesof knowledge that well adapts to our brain. But also with this feature weshould be able not only to go into detail of thing but also to abstract to seethe big picture of thing, by letting the learner able to understand and glueprevious built mind sized pieces together. These are some of the featuresthat it is nice to have in such systems but features are not the main point ofthem because a well designed system is not simply a bag of features but is


a thing designed to encourage particular ways of thinking, with all featurescarefully and cohesively designed around that purpose. The whole is morethan the sum of its parts. It is important not to implement them all butcarefully choice the right set of this design principles that they represent,and understand how these principles enable the programmer to think.

In our field of interest, a programming environment is a user interface forunderstanding a program and especially in one for learning, it must be de-signed to explain. As the matter of facts, today even some of those L.E. thatwe saw earlier do not explain very much. The whole process for now is likea cooking show, ruthlessly abbreviated. First, you’re shown a counter full ofingredients. Then, you see a delicious soufflé. Then, the show’s over. Thequestion rises: if such a show has sense to exists, would you still understandhow that soufflé was made? Would you feel prepared to create one yourself?Not really. We need to “see” the steps that bring those ingredients to thefinal form, passing through the various phases and procedures, otherwise weare not able to judge for example if the procedure that create that resultwas indeed correct. the same concept applies in programming but mostlyimportant in learning programming. Old tools or tools used by professionalare not suited for learning and even those environments who try to create analternative specialized for learning purposes, fails in some ways that we laterdiscuss. The programming environment and process exhibits the same ruth-less abbreviation as this hypothetical cooking show. We may have the codeon the left and the result on the right, but are the steps in between whichmatter most in learning phases. The computer usually traces a path throughthe code, looping around loops and calling into functions, updating variablesand incrementally building up the output. We generally still “see” none ofthis big amount of information, again useful for the learner. Programmersare expected to write code that manipulates variables, sometimes withoutever seeing the values of those variables. Also when non creating but read-ing code that someone else has written or created, readers are expected tounderstand code that manipulates variables, without ever seeing the valuesof the variables, without seeing the data flowing through procedures and soon. As Bret Victor remembers to the reader, the entire purpose of code is


to manipulate data, and we never see the data. We only see when we inputthe data and when we retrieve the results. Usually no information aboutthe inner manipulation of that data or the decision upon it. We write andread code usually by pretending to manipulate data ourselves like if we werecomputers. And this has to be turn in the opposite way, we have to makethe computer, and the environments for learning or not, show us the data.

If you are serious about creating a programming environ-ment for learning, the number one thing you can do more im-portant than live coding or adjustable constants, more importantthan narrated lessons or discussion forums, more important thanbadges or points or ultra points or anything else is to show thedata.

With this quote, we now have already an important concept explained clearly:the most important thing to do is to show what is happening, which is betterthan many cool features or the best prepared lessons (which also helps but inthis reframed context are less valuable than a mechanism to show the dataand let the learner easily understand and make his own idea about it). Sincethe value of a variable varies over time, showing the data is intimately con-nected with showing time. Hence certain L.E. do provide a set of controls formanipulating the time, but still do not show the data, but limit this featurefor showing the final result building step after step, which is by the way agood thing to do but must be completed with some other informations. Hereis an example that Bret Victor shows in his essay regarding showing infor-mation about what code is meaning and doing, showing variables and alsooutput as time passes and execution goes through its steps. This particularcode is building a graphic output by creating triangles and stacking themfollowing a procedure that rotates and scales them accordingly to obtain thedesired output.


Those environments can also be useful if they were like a canvas or sketch-book, and serving like if they were an aid to the thinking process, like anartist that can grow an idea from birth to maturity by continuously react-ing to what’s in front of him. Programmers, by contrast, have traditionallyworked in their heads or in the best case they plan with pen and paper, firstimagining the details of a program, then laboriously coding them. But this,as stated above for the need of visualizing the data, inner workings and vari-ables, also in this case working in the head doesn’t scale, and seeing the bigpicture all at once may be really difficult for professionals, and obviously be-ginners will have much more troubles than professionals. This may be fault ofevolution, because the head is a hardware platform that hasn’t been updatedin millions of years, but it is also true that this kind of technologies have madetheir appearance in the really last 50 years, that is nothing compared to thewhole time humans live on earth. Hence it does not make sense to continuewith this unproductive ways of learning, teaching and working, and it is timeto built ourself a better tool with the help of the older tools we have. Soto enable the programmer to achieve increasingly complex feats of creativ-ity, the environment must get the programmer out of his head, by providingan external imagination where the programmer can always be reacting to awork in progress. Bret Victor points out that some programming systemsattempt to address this with a so called "live coding" environment, wherethe output updates immediately as the code changes. Immediate update ismerely a prerequisite, a feature that not constitute a concept of interestingenvironment by itself, but is the base for doing anything interesting. It en-ables other features which require a tight feedback loop. In an environmentwhere you have to write the code and then save the file and then compile thefile and last executing the code, adding a feature like live coding wouldn’t


help much in terms of learning as like using an interactive REPL console (Read Evaluate Print Loop ). Live coding, on its own, is almost worthless.The programmer still must type at least a full line of code before seeing anyeffect. This means that he must already understand what line of code heneeds to write. The programmer is still doing the creative work entirely inhis head, imagining the next addition to the program and then translatingit into code, while keeping the entire system in idle even if it is in a so called“live coding” mode.

Another thing that may be useful introducing in a learning environmentwould be a palette of available things that the environment can do at astarting point, like if it were a toolbox or a box containing generic piecesof Legos or bricks. With the analogy of the Legos, we can remember ourchildhood while playing with them and we surely remember that as a firstact before starting to build, we often spread out all of the parts on the floor.This provides more than simply quick access. It allows to scan the availableparts and get new ideas. When building a Lego car we might spot a wide flatpiece, and decide to give the car wings. This is a form of create by reacting.In addition to reacting to the object under construction, the child is alsoreacting to the parts he has available. The environment must be designed toget something on the screen as soon as possible, so the programmer can startreacting. This requires modeling the programmer’s thought process, anddesigning a system that can pick up on the earliest possible seed of thought.The environment must dump the parts bucket onto the floor, allowing theprogrammer to continuously react to his raw material and spark new ideas.For example we show how an interactive environment for creating simpleprograms may look like, based on this last concept of showing the “parts”with which someone can build something.


The picture above shows how the interaction is focused on creating by re-acting, putting blocks, texts, colors on a toolbox from which we pick certainblocks that we like and create. The data in this case is the code that is cre-ated directly when drawing, with changing values when the manipulation isin act. This in conjunction with an interactive visualization part, discussedabove, can constitute a good starting point for any environment, speciallyfor a learning one, that can lead the learner to focus on abstract conceptsrather than trying to fit everything in his mind in a way of reasoning that isnot naturally present in him.

Until now we’ve talked about the first component of a learning system, theenvironment with the main characteristics that need to be implemented insome way. The second part regards the language that is “installed” in theprogrammer’s head and its design and we now talk about it and about itis as crucial as the first component. In best cases they are co-designed andinseparable. In this case the word “language” is not exclusively related tothe programming language but focus mostly on its abstract meaning. Thelanguage here is a medium which convey information an permits communica-tion between the programmer’s head and the environment. For the purposeof understanding and explaining what a language may composed of, we nowpresent programming systems that were carefully and beautifully designedaround the way people think and learn. The main reference here is again theenormous work of Seymour Papert called “Mindstorms”. In this book he hasdone the work of depicting the principles that are necessary to understandand build in order to design and create a learning system, while at the same


time introducing his own implementation, Logo and Turtle graphics. Wesaid that the Logo programmer draws picture by directing the "turtle", anon-screen (but also physical) character which leaves a trail as it moves. Thethe most important that the turtle does is that let the programmer identifywith it, because to figure out how to make the turtle perform an action, theprogrammer can ask how he would perform that action himself, if he werethe turtle. This metaphor of identity is one of the characteristics that aresuggested to be present in a “language” for a given system. Actually everyprogramming language is made of metaphors, but some fit the mind betterthan others. Standard imperative programming uses the metaphor of "as-signing to variables", shuffling bits between little boxes. Unlike the Logoturtle, this metaphor was not designed to resonate with how people learnand understand; it simply evolved as a thin layer over the metaphors usedin the underlying machine architecture, such as "storing to memory". AlanKay[19], the creator of Smalltalk language and father of the laptop, pointsout that

Assignment statements – even abstract ones – express verylow-level goals... Human programmers aren’t Turing machines –and the less their programming systems require Turing machinetechniques, the better.

In his language, Smalltalk, he used a valid metaphor, the message. Allcomputation in Smalltalk is represented by objects sending and responding tomessages from other objects. In order to program the behavior of an object,the programmer casts himself into the role of that object (to the extent ofreferring to the object as "self"!) and thinks of himself as carrying on aconversation with other objects. Which turn out to be a human capabilityto conversing and role-playing. Not the bare metal of chips, or bit andbytes of the machine, but something more abstract and familiar to us toreason with. Another environment definitely worth of talking in matter ofmetaphors and programming environments, very popular in the 80’s, was BillAtkinson’s HyperCard. All it was were a representation of a physical object, acard, in a virtual environment. The card could be personalized with content,


numbered, and searched inside a deck of cards. One can move from onecard to another by clicking elements of the card and navigating through theknowledge that one may create with this metaphor. Was used for variousapplications, from interactive encyclopedias to huge databases. Obviouslythis ideas and metaphors, lately added with network capabilities, constitutethe basis of the modern World Wide Web, as imagined by Vannevar Bushin his “As we may think”. Processing1 language metaphor, since Processingitself is an electronic sketchbook for developing ideas and promoting softwareliteracy within the visual arts, is is the "painter’s algorithm" metaphor. Thatparticular metaphor is not good for human because that algorithm is usedby the computer to fill pixels accordingly to the scene, and thinking in termsof pixel coordinates brings to thinking about variables and where exactly ashape should appear, without for example manipulating directly the shapeignoring the underlying detail. For now it is a weak metaphor but as soonthey will implement a tangible and living environment, it would be a goodexample and a good metaphor.Besides metaphor features, another feature that we previously treated is de-composition and modularity that lets tackle complexity in order to produceunderstandable things in mind sized chunks. The Logo environment for ex-ample let the user teach a new word to the turtle, that are in fact sub pro-cedures that are made up by other procedures and commands. This featurelies at the heart of functional programming languages like Haskell or Scheme,OCaml, and so on. When writing a modular program to solve a problem,one first divides the problem into subproblems, then solves the subproblems,and finally combines the solutions. The ways in which one can divide up theoriginal problem depend directly on the ways in which one can glue solutionstogether. Therefore, to increase one’s ability to modularize a problem con-ceptually, one must provide new kinds of glue in the programming language.Also recomposition is an important feature, directly following decomposition,because once that a module is created, and it is fully working on its own withno dependencies of any kind, it can be combined to serve other purposes with

1Processing: an electronic sketchbook for developing ideas.http://www.processing.org/

http://www.processing.org/


some other modules and create, in our case, a program that is a remix ofvarious other part of programs. Readability is also an important componentin language, meaning that the code should be clear and not cryptic. Forexample in case of a function call, we usually have to get an hint of whatarguments are expected to be given in input. A function call in C like this

writeFile("hello", "greetings");

compared to a HyperTalk (programming language of HyperCard)

Write "hello" to file "greetings".

is far less understandable than the last one. Arguments are readable andgiven in context and we surely say that “hello” is a string and “greetings” is afile while reading HyperTalk code but we don’t know if the same is true for theC counterpart. It is not just a matter of syntax, because programmers maygain time and productivity letting the system “type” this code for them, whichindeed may be a nice feature to have, avoiding error while coding by hand.Having the function name communicating meaning to the programmer is alsogood sign of caring about the programmer. For example Cocoa language (used in Mac Os programming environments ) has a function that even notgiving so much information about arguments, gives information about whatthat function does and give as results, in fact this

arrayByAddingObject

is far more understandable than this JavaScript function

concat

that is a verb and not a “noun phrase”. Most Cocoa code can thus be read andat least vaguely understood without documentation, because it is not am-biguous or misleading like other competitor languages, that are also involvedin learning processes.These design principles were presented in the context of systems for learning,but they apply universally. An experienced programmer may not need to

3.2. WHERE STATE OF THE ART FAILS 39

know what an "if" statement means, but he does need to understand theruntime behavior of his program, and he needs to understand it while he’sprogramming. So it is necessary to rethink, as soon as possible, the wholeprogramming environments and languages to accommodate useful featuresthat can improve productivity of programmable systems.

3.2 Where state of the art fails

With this analysis made by the help of Bret Victor’s essay, that expressesmany key points collected by various figures in the field of computer pro-gramming, we now try to apply those concepts and those principles to thestate of the art to spot where it fails implementing certain features that wenow understand to be necessary in a programming environment, specially ina programming learning environment.Let’s recap what features may implement such environment.The whole environment should be a micro-world, a sandbox, a simulator witha underlying set of rules that represents what is possible and what is per-mitted in that micro-world, and thus actually depicting its limits, where thelearner can explore and learn by experimenting various actions. He mainlylearns by viewing the process of execution of its command and viewing themoperate on data and he should be able to control this visualization in someway, for example by going through the steps of the program execution, backand forth in “time”. It is also useful to give a metaphor to the whole system inwhich the learner can identify himself in, like the turtle in the Logo languageor the message in the Smalltalk language, or even the card in HyperCard. Itshould provide some kind of modularization capability, in order to decomposedifficult problems into small pieces, that may be combined in various situ-ation to build something different from their official purpose. There shouldalso be a toolbox of pieces that let understand that is possible doing in themicro-world. It is nice to have implemented a somewhat tight feedback loopto let the environment being interactive and not a static process that has tobe repeated over time by the hand of the learner: if it is possible, this pro-cess should be automated and made interactive and engaging. The learning


experience, lacking immediacy, is slow to change the student’s intuitions. Ifwe are going to show a language, which written or not we are certainly goingto, it should be clear and not cryptic, understandable even if we are onlyreading a “code” created by others, and we must avoid introducing ambigu-ities in the system. These principles are only some of the most importantin order to create a good learning environment, but where do the previousenvironment that we analyzed fail? Let’s take for example the same subdi-vision that we had previously, not directly related to programming L.E. anddirectly related to programming L.E.. The first example of the first groupwas the Logo language. In the matter of visualization, it fails in showing thestate of the turtle itself when we decide to hide the turtle! We have to keep inmind while using the turtle its position and direction in which it is thanks tothe last command. We can say that is a minor fault due to due fact that wehide the turtle, but it would be nice to give the information somewhere elseon the screen, maybe in the corner, a small area which informs us orientationof the turtle and maybe its actual position with some kind of special coloredpoint. The other thing is that we have to manually code, an error proneprocedure that could lead to useless time consumption in case of search oferror in case of big programs (however if the program is well structured andmodularized, which is possible to do in Logo by creating new “words” for theturtle). During the execution it would be nice to have some kind of referenceto the execution of the code, maybe by highlighting the current row that isbeing executed. Some of this problems are solved in recent versions of clonesof the Logo language, like in Scratch, that was the second example that webrought up. It avoid the user typing code, but with the great metaphor ofblocks, it ensures no syntax error, which for a learner it is a great thing toease the process of learning itself. Scratch also shows in a special zone ofthe environment, the data about the position and orientation of the Turtle(depicted by a new mascot, the cat), data that is shown as number but incase of the direction of the mascot, is shown graphically by a little versionof the cat that is oriented in the same direction of the cat present in thecanvas(hidden or not). The language in both Logo and Scratch, written inone and graphical in the other one) is clear and not ambiguous, but Scratch


improves a little bit Logo by showing the group of blocks that is being ac-tually executed but doesn’t have a fine grained resolution, because it doesnot show the block involved in that particular moment of computation. Bythe way is more interactive and engaging than Logo. Regarding Geogebra,we have to say that the only thing it “fails” is that does not yet implement away to produce functions of a time variable, which can be faked by using amanual slider tied to the value of a variable with which one can manipulatethe plots, but it is actually the best piece of software out there for learningMath because it implements almost all possible principles depicted so far,from the interaction to the toolbar and the language itself. Algodoo is alsogood as Geogebra, but it lacks the feature of handling time too, it does notshow a way to control the physic simulation, one can only play the simula-tion without analyzing step by step the state of it, the state and directionof forces, interaction between elements: this brings the user to launch thesimulation various times instead of letting him able to see maybe a ghostshadow upon the simulation that can maybe tell where the ball is going tobounce in the future or were it has been in the past of the simulation. Stillit is a problem of poor visualization.

For the directly related to programming we had the Basic implementationwith Basic-256, which by itself it is a great piece of software targeting newprogrammers. It shows almost everything that is valuable to showing whilelearning programming, like state of the system, output, state of the vari-ables, but even if does this awesome job, it would be better if it had theoption in the step-by-step execution, to go backward in the execution andto highlight the code that is being executed for more clear comprehension ofalgorithms. Same thing holds for the online courseware Khan Academy thathides the step of execution and does not show what row of code is executedwhich can be confusing if someone is reading someone else code. It does notshow the state of variables and this is somewhat disappointing for a pro-gramming learning environment. The ARETool could be improved by a niceuser interface(actually absent) showing all the information at each step, andnot only after specifying how many steps to do and manually controlling thestate of the system. finally if we have to compare what actually is used in


introductory courses, like BlueJ, we have to move the same critiques of lackof visualization during execution and lack of control over the computation.By the way, at the moment of writing, most of the schools use, as teachingtools, tools that are used by and though for actual professional, people thatalready knows in the best cases what is going to do with code, and are toolsthat did implement almost none of the principles depicted above. If one wantto understand what his program is doing, he has to use unconventional waysto track the flow of execution with the help of print statements here andthere in the code, or actually using a complex and not so interactive debug-ging system in a second time, not right from the beginning in the first place.In learning to program, many students struggle with developing algorithms,figuring out how to apply problem solving techniques in their programs, andwith how to use common programming constructs. Mostly because they donot see what is happening and they cannot built their our idea and inter-pretation of the world of programming. One can’t learn well by hiding thecontent of what he is learning. But even professional rarely use this form ofunderstanding of what’s going on in their program. Experienced program-mers almost exclusively use form of debuggers when they are needed. I wouldsay that not using a debugger is a sign of inexperience. Stepping throughcode line by line is the best way to trace the flow of execution. Debuggersnowadays are sadly only a feature and not the main concept of working, theyare put aside when instead they should be the main part of a programmingsystem together with the editor. Most existing debuggers are old-fashioned,have careless interfaces, and require the programmer know and understandconcepts and paradigms that are difficult to master, and, nowadays, not fairto expect most programmers to use or know. As a result, most modern,experienced programmers, go to great lengths (they spend too much time)to learn the skills necessary to write the kind of code that rarely ever has tobe debugged in a debugger, to avoid the pain of the experience. It could bemuch more useful instead using this kind of tools during learning, in order tobe able to write in, the future, code that is almost right from the beginning,thanks to deep understanding of things. And even if the code isn’t correct atthe first shot, what better way to track down a bug than to actually follow


the execution of the code? This kind of system is surely more powerful thanprepackaged and static animations of the inner working of an algorithms,since the system is interactive, it promotes changing values and codes andlet the novice students see “what happens if..?”, actually letting them answertheir own doubts, instead of letting them wondering in front of a black boxthat does not let transpires useful information. In the next chapter we willsee how to create an environment that suit our need and follows those princi-ples of good design of a learning environment, that will also connect creationand process of creation, namely coding and its workings.


Chapter 4

Inventing Eple

In this chapter we will create a concept of environment that targets noviceprogrammers, ideally in between the phase that involves the passage from penand paper flowchart description of basic programming and the phase of realworld programming, to better help the transition from one way of thinking tothe actual way of doing things in programming nowadays. Environment thatwill be based upon those principle and design methodologies that we havetalked about so far. After proposing a theoretical concept we will discusson how to build that by finding pre-existing software solutions that betterfit our needs and how mix and improve them to achieve our goal, that is aconcept of a new tool that provides a possible approach to actively engagestudents in increasing their knowledge and understanding of programs andalgorithms.

4.1 Finding a solution to the problem

We have said before that for creating a concept of a better L.E. for theprogramming field, we must follow some basic principles mainly regardingvisualization of information and interactivity. Let’s first see what kind ofproblem our target user faces nowadays in terms of environment.

45

46 CHAPTER 4. INVENTING EPLE

This image above shows what current environments essentially consist of, in a“editor and compiler” form, even in advanced IDEs (Integrated DevelopmentEnvironments). There is a phase in which you edit the code of your program,then you save it and compile or interpret it to obtain the executable ordirectly the evaluation in case of interpreters. Then you have to repeat theprocess allover again in case of something has to be changed in the programand hence in the code. For novices this is not a right kind of tool for learning,it is a static process that may be repeated over time, but it is certainly notinteractive and even in REPL environments, they still do not convey andvisualize information about what’s happening “under the hood”, unless thenovice learns, while he is learning the basic fundaments of programming, alsohow to use a debugger, resulting in a cognitive overload that may cause theloss of important information regarding programming because he memorizedother, at that moment, useless information for that context. So the mainproblem is that this classical ways of learning through the use of these toolsdid not easily help the learner in the act of understanding what is goingduring the execution of the program that he previously wrote. He’s liketrying to learn how to fire a gun and centering the target at the same timewhile keeping his eyes closed. It is very hard for novice to take the right aim

4.1. FINDING A SOLUTION TO THE PROBLEM 47

when temporally blind. So does the programmer in its first stages, when istrying to figure out how to apply in a useful way concepts of problem solvinglearned from teacher and books.In the next pages we are going to propose a solution for this problem, andbuild a concept environment that is more suitable than this old style learning.Since the user is producing programs, the main thing to visualize here is thenthe program created itself and its execution involving the state of variables,functions, and the stack of function calls. These things, like stated previously,are not visualized in a classical development environment if not manuallyspecified by activating some kind of debugger. Then we are also going tocare care not only of the environment and its interface but also we will takecare of the other component of a L.E. that is an adequate language.

4.1.1 Conceptual prototyping

To visualize the execution of a program we are going to structure the wholeenvironment as a simulated micro-world, where the world itself is a computerwith its constrains and its capabilities to compute algorithms and so on. Tobe able to have this kind of simulation, we must have a mandatory form ofcode editor and a kind of visualizer of the execution. These are the maincomponents that we need for such a system. It should be structured in a waythat the learner doesn’t have the need to leave the environment for otherpurposes that quitting the learning session, in other words the environmentshould be made in such a way that provides everything needed for the learningact.There are mainly two ways of creating code nowadays: the first one is theclassical one, represented by the manual typing of the textual specificationof the code itself, which by the way is quite error prone specially in learningphases, and the other one is represented by the so called visual programminglanguages (VPLs), programming language that lets users create programs bymanipulating program elements graphically rather than by specifying themtextually. In between these two ways there are various shades, based on thelevel of presence of the main characteristic of the editor. The one that we


think is best to fill the gap between an environment made of flowchart blocksand an environment made of only text is the so called visually transformedlanguage. A visually transformed language (VTL) is a non-visual languagewith a superimposed visual representation. that means that is in the middlebetween the two named main ways to create code and programs. One kindof VTL is represented by the blocks metaphor adopted by Scratch and manyother programming environments. It lets the user play with block and exper-imenting while learning and while avoiding all those errors related to syntaxand abstracts from a specific programming language, like flowchart diagramsdo, while keeping a language (mostly english words and common program-ming keywords) that easily relate to actual programming languages like C,Python, Java, and so on. It hides programming constructs within the imple-mentation of block pieces and focuses on the combination of functionalities.Choosing a purely visual programing language with specific blocks wouldmean to restructure the whole learning process of programming, pointing ittoward another specific way of programming called data-flow programming,that is also a very valid way of thinking about computing but it is still con-strained to certain fields of applications. We have decided to simply improvethe actual learning programming process by focusing on the creation on aenvironment that shows what is needed to be shown instead of “reinventingprogramming”.

So enough said about the conceptual kind of editor that we will adopt, theblock one, we now discuss of what a visualizer might have to be a good visu-alizer of programs, since visualization is the main goal, output, that we wantto have from our environment. Since a program is executed line by line by ageneric computer that executes instructions, we have to decide what we wantto see. The most adequate resolution of interest here is the single instruction.Going in detail would be counterproductive as going less detailed from thatand seeing a block in execution instead of the single instructions, like Scratchdoes and we already said that is failing in that way. So considering this asour resolution, the visualization should provide a way to go back and forthin time during the execution process. A step by step visualization that letthe user understand inner workings without having to repeat from the begin-

4.1. FINDING A SOLUTION TO THE PROBLEM 49

ning the visualization like most one way algorithm visualization presentationprograms. It should visualize the state of the system at each step, like it ispossible to do in Basic-256 and in the ARETool. This involves mostly show-ing the values of used variables and the stack of function calls in order to helpkeeping track for example of multiple function calls and recursive functioncalls. Since the editor chosen is a block editor like Scratch, and since we needto fill the gap between the abstract way of programming with flowcharts andreal world code, we need also to show the code that is being produced bythe abstract block representation, in order to connect the learner with whatis going to do in the future, that is coding in a real world programming lan-guage. This in combination with a step by step visualization of the state ofthe simulation of the program created, with the help of a system that high-lights the current row executed, constitutes the main components of a usefulvisualization of programs. Obviously there would be some form of controlsin order to play the simulation, go a step forward or back, going to the end ofthe visualization (end of the program) or to the beginning. A textual outputfor showing the result of print statements would be also nice to have.

Now it is time to talk about the backbone of such a system. The connectionbetween the editor part and the visualizer part should be realized by someform of backend that takes the block representation of the program created,converts it in some kind of domain specific language (DSL) that would beevaluated and as a result of this evaluation, it will generate an enriched codethat contains information that will control, through a dedicated part of theenvironment, the visualization part of the system. Those information maycontain the real world code in its form of DSL that has to be shown to thelearner, a series steps of the execution of the program, namely a trace ofexecution, with information about the state of the micro-world at each steps,like variables and so on, and maybe the state of the output areas, like atextual output area that shows what is requested with print statements. Inan environment like this, created with the purpose of letting “see” the innerworking of programs, these steps help making things more understandable.All of this should be tied together in a tight feedback loop, in other wordschanges made in the editor section of the environment would be propagated


to the backend in order to generate a new and update visualization when re-quested. This would certainly improve the experimenting aspect of learning,letting the learner answer his own doubts when building code, the various“What if..?”s and would improve the speed of the process of trial and er-ror learning, that is heavily slowed down in classical environments, like theone currently used, where one has to save and compile and execute at eachtime, manually. In this environment this aspect is automated, interactiveand reactive by design. All these components, the special editor that avoidssyntax errors, the visualization that shows the inner working, the backendthat generates the visualization and connects the editor and the visualizer,all of this generate a visual program simulation (VPS) learning environmentthat immerses students in the execution-time dynamics of execution of easilycreated programs.Here is a picture showing the abstract architecture of the environment thatwe described so far.

To refer to this environment in the future in a short way, let’s give it a name:EPLE. It stands for “apple” in norwegian and it is an acronym for EPLEProgramming Learning Environment.

4.2. FINDING PRE-EXISTING SOLUTIONS 51

4.2 Finding pre-existing solutions

If I have seen further it is by standing on the shoulders ofgiants.

This quote from Isaac Newton remembers us that there is no need to reinventthe wheel. In software development, every not so small project is rarelystarted from scratch. So we are going to do the same, looking for piecesfrom where to start our work and improve what’s actually available in the“market” at the moment of writing.

4.2.1 Editor

The choice of the editor made in the conceptual prototyping phase was a blockprogramming editor, a type of editor that aids the learner avoiding him fromworrying about any specific language syntax or structure and thus reducingto the minimum, zero in this case, the number of syntax errors that is possiblemaking with such an editor, and a metaphor surely easy to use and grasp.The best solution found that implement this metaphor is a code editor calledBlockly1. Blockly is a free and open source web-based graphical programmingeditor, developed by Google aimed at application developers, where the usercan drag blocks together to visually describe logic that can then be turnedinto working code, all without typing. The blocks look like jigsaw pieces,are categorized and colored to provide intuitive cues to correctly connectthe outputs of each jigsaw piece. They snap together only if it is allowedby type rules specified for each block by the language files that come withBlockly. It is possible to create new blocks that may or may not receive orgive back data or that can or can not be stacked one upon another in orderto make or not block sequences, through access to implementation files. Theinner block representation may be converted into a specified language likePython, Javascript, or other specific languages, thus converting a visuallycreated program into a textual program that present no syntax errors. Let’sremember that novice programmers are fighting two battles at once: the

1Blockly visual programming editor: https://code.google.com/p/blockly/

https://code.google.com/p/blockly/


fight to translate their ideas into logical statements, and the fight to keepthe syntax legal. Blockly makes it completely impossible to make a syntaxerror. There are no unbalanced parentheses, no unescaped strings, no missingsemicolons. Blockly allows novice programmers to concentrate on the logic.This last feature is one of the most important features in EPLE, and simplifiesthe learning process letting the learner free to focus on what matters. Blocklyis currently being use to program Arduinos, creating little web scripts, forcontrolling a Lego Mindstorm robot, and many other use cases where theuser is expected to not have enough skills to code with bare hands or doesnot have any idea of basic programming concepts. Its simplicity involvesexploration and learning the language and metaphor it holds, compared tofacing a blank screen with a blinking cursor waiting the user to type code, isa matter of minutes.

4.2.2 Visualization

The choice of the visualization component was also made following whatsaid previously in order to have the basic elements of a useful visualization.In the past few decades, many program visualization tools have been cre-ated to assist instructors in this task[8, 12]. Sorva’s dissertation providesa comprehensive overview of 40 such tools, which all look similar at firstglance: one GUI pane shows source code with the currently-executing linehighlighted, another pane shows a visual representation of run-time state(e.g., stack frame contents, heap objects), and control widgets allow the userto step forwards and backwards through execution points. Certain tools likeUUhistle[7], that gives a sort of environment like the one that we are goingto build but with an editor that does require manually coding and all theproblems that come with it, provides instead a useful visualization of theexecution of a program with the metaphor of frame of activation or stacks,where information about variables and the general state of the machine isgiven. By the way this solution is only available through a Java applet,with all the software requirements that it needs. For keeping the whole en-vironment coherent and in one place, we have chosen a recently developed


free and open source web-based software visualization tool for Python, whichis becoming a popular language for teaching introductory CS courses, thatworks directly in the web browser (without installing any plugins), and it iscalled Python Tutor[6], and it is built specifically for the purpose of learn-ing programming by visualizing code execution. Unfortunately it does notcome in and interactive environment and comes without a proper editor. Thevisualizer is being embedded in many online interactive books like interac-tivepython.org, bringing interactivity to the learning process by letting thestudent modify the code and have a freshly new visualization of the exe-cution of his algorithms, without having to deal with old methods used byinstructors that typically illustrate program execution using graphical Pow-erPoint lecture slides, which require a great deal of preparation effort, or bydrawing diagrams on a whiteboard, and is tedious and error-prone and readonly and not interactive. With Online Python Tutor (OPT) the studentsare actively participants of the learning in a read/write manner, they canstep forwards and backwards through execution to view the run-time stateof data structures, and they can share their program visualizations on theweb.

The motivation of choosing OPT over the other available solutions, otherthan the fact that that runs within a web browser without any required soft-ware or plugin installation, are tied to the possibility of integrating OPT withthe block editor previously chosen Blockly, and also because in recent yearsPython has been gaining traction as a preferred language for CS1 coursesacross many universities, for its readable and friendly syntax. It is a web ap-plication structured in two main components, a frontend and a backend. Thebackend is written in Python and the frontend written using standard webtechnologies: HTML, CSS, and JavaScript. The OPTutor backend takes thesource code of a Python program as input and produces an execution traceas output. It executes the input program under supervision of the standardPython debugger module (bdb), which stops execution after every executedline and records the program’s run-time state. The default configurationstops after 300 steps to prevent infinite loops, but it is a parameter that canbe personalized. The trace is an ordered list of execution points, where each

http://interactivepython.org

http://interactivepython.org


point contains the state right before a line of code is about to execute, in-cluding: the line number of the line that is about to execute, a map of globalvariable names to their current values at this execution point, an ordered listof stack frames, where each frame contains a map of local variable names tocurrent values, the current state of the heap, and the program’s output upto this execution point. After execution terminates, the backend encodes thetrace in JSON format. Although this limit is tiny for real programs, it is suffi-cient for the pedagogical code examples that our users want to visualize. Thetrace contains redundancy since it stores a complete snapshot of the stackand heap at every execution point. Traces from pedagogical code examplesrange from 10KB to 200KB in size. When the frontend sends a program tothe backend, the backend then sends back a JSON execution trace, whichthe frontend renders graphically. The result is obviously not a rendering ofa real time program execution, but with some feature that we later explainand implement in our environment, it will be possible to create a simulationas close as possible to a real time execution of the program thus maintainingthe ability to look through the steps of the execution. The OPT frontend iscomposed of various sections, rendered to give an adequate interaction to theuser. There are VCR-like controls to go through the steps of simulations, thepython code is shown together with arrows that point to the right currentline of code at each step, the state of the program which includes the stackof the function calls and the variables involved in the program and last butnot least a useful output console in which we can se textual result buildingup print by print, step by step.

4.2.3 Connecting the dots

Until now we have analyzed the main components that our environment willhave. The next step is to merge those two functionalities accordingly in orderto create our implementation of the concept environment, adding features toimprove the overall effectiveness of the tool and a valid alternative to thestate of the art.Making those pieces talk consists in taking the code generated by the editor


and pass it as input to the backend of the OPT visualizer, that will thengenerate back as a result the trace of execution of that particular programinputted. The whole environment will take care of take that trace and give itto the frontend that visualizes and renders it. Will be necessary to have onefrontend including the editor part and the visualizer part. Some improve-ments could be the automatic generation of a trace when the code changes,in order to automate the process and creating a closed interactive feedbackloop for the whole system. To connect the student with his creation andwith the creation process itself, it would be nice to have also an option thatlet him jump always at the last step of the visualization, in order to see ateach change of the program, the final result of the program itself: this wouldcreate together with the tight feedback loop, a situation called “Live coding”mode, which can simulate very well a real time execution of the programthat will be more engaging with the process of experimentation and learningtaken by the student, because jumping at the last step promotes the act ofmodifying values in the code more than classical tedious processes where youhave to recompile all to have understand what the change you have done,does to the overall computation. Before tackling the real implementation ofthe environment we can recap the whole concept expressed so far with thisupdate architecture of the system.


Chapter 5

Building Eple

In this chapter we are going to discuss what has been done for the imple-mentation of EPLE starting from the previous discussed two main pieces ofsoftware that were hacked, customized and made talk one another to geta skeleton of environment that will be improved adding new functionalitiespreviously not present in neither in Blockly nor in the OPT visualizer.

5.1 Implementation

EPLE’s frontend, the part which is used by the student, was implementedwith established and widespread web technologies, namely HTML, CSS andJavascript, and this it made a web app accessible from virtually any compat-ible browser without needing any kind of external help of system administra-tors for installing software. Since it is a web app is also not tied to a specificoperating platform, and even modern tablet computers and smartphones canaccess and use it. The backend and the file consisting in the web app are lo-cated on a Google App Engine1 server, or we can say “in the cloud”. It couldbe also installed locally on any machine that has support for the Google AppEngine SDK, in order to make it an app that work even without Internetconnection.

1Google App Engine: https://developers.google.com/appengine/

57

https://developers.google.com/appengine/

58 CHAPTER 5. BUILDING EPLE

5.1.1 Merging the parts

The main and unique page of the web app frontend is composed of the blockeditor and the visualizer panel, with a menu bar that gives access to theapplication options. The whole structure is made with JQuery Mobile 2, aframework for building web apps in HTML5. The two panels are constitutedby two dedicated <div> sections of the page, that later on each of the twocomponent will respectively populate its own div. The two pieces, editorand visualizer, are functionally connected by a custom made Javascript codethat is executed within the user browser every time the workspace of theeditor, containing the blocks disposed on the canvas, is modified. Whenthe structure and properties of the workspace change, the Javascript codeensures with an Ajax call that the Python code, generated by Blockly codegenerators (which convert tree structure of the block into real world code),is sent to the address on which the script that executes the trace responds,that is the absolute path ’/exec’. The call ends when the trace is returnedback as a result from the backend and then the Javascript code ensuresto create a freshly new visualization. This is usually what happens whenthe web app option “Live Mode” is turned on, if this option is turned off,the communication between frontend and backend made by the Javascriptcode is executed only whenever the user decides to, by using the button“Run Code” which will produce only one trace and thus one visualizationonly when intentionally wanted. This is possible due to the attachment anddetachment of the Javascript code to the event listener of Blockly.Blockly itself in EPLE is a custom version that contains only the neces-sary language files for describing a toy language with blocks that support tocontrol the flow of execution of a program, logic blocks, math and numericblocks, strings and list blocks and variables and procedures blocks. Theyare all included in the main page as Javascript files with the core script ofBlockly that provides to inflate inside the page the desired categories of block,standard and custom created ones, together with the CSS files that providestyling of the editor and the blocks.

2JQM: JQuery Mobile http://jquerymobile.com/

http://jquerymobile.com/

5.1. IMPLEMENTATION 59

The OPT visualizer is also a custom version of the original visualizer, cus-tomized with the needed functions visible to the user. Whenever the custommade Javascript code is executed and a trace is generated, the following codeensures that a the new visualization is set up with the right parameters, likefor example the option to go to the last or first step or how to show the stackand so on:

VisualizerRef.visualize(dataFromBackend);

with the visualize function structured in this way:

Visualizer.visualize = function (data){

return new ExecutionVisualizer(’OutputPane’,

data,

{parameters});

};

where OutputPane is the name of the <div> that has to be filled with thenew visualization.

5.1.2 Adding features

At this point the two pieces work together to achieve the basic functionalityrequired. The backend has been modified to integrate a functionality thatlet the user save his work and share it through a URL. The functionality isimplemented with a second Ajax call that sends the XML tree structure ofthe block to the backend at the address ’/storage’ as its input and waits thebackend to serve the request by forwarding it to the script that saves into theGoogle App Engine datastore the XML passed as input and in the meanwhileit generates and returns as a result an hash of the given XML that is thengiven back as a result of the Ajax call. This hash lets the user load later onhis work, or the work of others, by interrogating again the backend askingfor the XML associated with the hash given in input.


5.1.3 Architectures

The following image show the overall architecture of the entire system, com-prehending the frontend on the left side and the structure of the backendon the right side with its layers of applications and the ways the two piecescommunicate with one another.

This other picture shows, whenever the “Run code” button is pressed orthe “Live mode” is activated, what is the flow of execution of the EPLEenvironment: the internal representation of the program, the whole tree, isextracted and converted through the Blockly generators into Python codethat is then sent through an Ajax POST to the backend, that execute thatprogram, generate the trace and convert the trace into JSON format andpassed back to the waiting frontend that will set up a new visualization forthe program created.

5.1. IMPLEMENTATION 61

Similarly, saving and retrieving the URL where the program is located, con-stitutes of taking the while tree representation of the workspace and passingit, without passing through generators, through an Ajax POST to the back-end that will generate an hash key and save the XML into the datastore andgive back as a result a hash key that will be used in the future to access thatparticular code that has been created.


Chapter 6

Using Eple

Starting from the general description of a L.E., analyzing some of the exampleavailable for programming learning and not, then passing through the phaseof conceptual prototyping of an environment that implements the principlesof visualization and interactivity, and through the description of technicalimplementation structure and architecture, we are now going to talk aboutthe usage of EPLE, its frontend part, and specifically we discuss in detail theinterface of the environment, the functionalities it brings and we then passthrough some of the example of programs that is possible to develop andanalyze with EPLE, to finally point out the advantages and disadvantagesin using EPLE.

6.1 Interface

As stated before, EPLE’s UI is divided into 2 modules, namely editor andvisualizer, as seen in the following figure.

63

64 CHAPTER 6. USING EPLE

In this picture there is a really simple group of blocks on the canvas. Theywere chosen from the categories in the left side of the editor by dragging thewanted jigsaw piece into the working area. Here we see almost all the fea-ture of the whole environment, and yet it all seems clean and not cluttered.Although it may look like a toy application, inside of it there is an implemen-tation of the Python language that can implement all the relevant algorithmsthat novice may need to understand before moving on using real world pro-gramming environments and debuggers. The visualizer show the code thatthe generator have produced starting from the block representation, a slidewith some control in order to be able to move through the simulation, anoutput text area that shows the printed result that builds up step by stepand there is also the heap and stack visualizer. The button “Options” bringsa sliding panel to the let of the environment letting the user interact with op-

6.2. FUNCTIONALITIES OVERVIEW 65

tions like the one for saving and sharing the program, the option for enablinglive mode, one option for jumping at the last step of the simulation, a optionto hide or show the textual output and a button for cleaning the workspacearea for starting a new program. The “Run Code” button starts a one-shotexecution-visualization request for updating manually the visualization of achanged program.

6.2 Functionalities overview

Blocks. In the left side of the editor are present the so called categories ofblocks. Before describing them we now describe what a block is really about.Looking like a jigsaw, or puzzle, a piece has the classical tiling capabilitiesthrough the slots that may be present at the sides or in top or bottom ofthe piece. The difference in slot presence and position on a block is brieflyexplained: when a slot is present on the inside or the right side of the block,it means that the particular function implemented and realized by that blockexpects an input of a certain kind. In the same way, if there is not a slot but aprotuberance on the left side, it means that the function implemented by theblock gives back an output, which then can be eventually used as an input toother blocks which receive and input instead, fitting thus in their slot if thetiling is granted. When a small slot is present in the top of the block, it meansthat the block could have another block above it which functionality wouldbe executed before its own function, in a sequence of command manner. Ifit has a small protuberance on the bottom, it means that it is allowed toeventually attach on top of another block that obviously have a small sloton its top. Certain blocks could receive more than one input or they couldhave internal slots for nesting commands, and if needed they could change“shape” to receive more than one input or more than one nested commandor branching paths for flow execution. Later on we will see a complete setpalette of blocks that EPLE gives to the user in order to combine them toachieve the desired functionality to implement and analyze.The ability to select a jigsaw piece to use in a new application is providedto the user through a panel, at the left side of the editor, listing available


jigsaw pieces in a category. Currently EPLE has 7 categories and 48 mainjigsaw pieces that could be personalized since some of them are multifunc-tional. Categories concern control flow block, logic blocks, math an numericblocks,test and string block, lists blocks and two special categories of variableblocks and procedures blocks, which update themselves whenever is createda new variable or a new procedure, giving the user the blocks personalizedto that new variable or procedure, usually get and set blocks for variablesand procedure call for the newly created procedure. The blocks are self de-scribing most of the time in the sense that the meaning and the functionalityof a block could be understood by “reading” it. They are color coded withlight shades of various colors, in order to make them easily memorizable andrecognizable in which category they belong. Some other blocks may belongto one category but return a result that is the type of another category. Thatis for example of the block “is even” in math category that asks if an inputnumber is is even or not and that returns a logic value between true andfalse. It easy to understand by the way those kind of functionalities.

6.2. FUNCTIONALITIES OVERVIEW 67

This image represents the whole palette of blocks that EPLE implements,with light colors that categorize them in 7 sets of blocks. Later on we willuse them to build examples of programs.

Visualizer. Moving on through the functionalities of the frontend of EPLEwe are obviously going to analyze its second most important feature, thevisualization feature. When a program is submitted to the backend and thena trace of then execution is then generated, the visualizer rendering thattrace helps in the process of understanding the inner workings of the programcreated. As shown in the beginning of this chapter in the picture showingthe UI of EPLE, the visualizer helps connecting the user with what he hascreated and with how that creation work. The python code visualizer sectionhelps to relate what an abstract concept like blocks and how they connectto one another, is effectively in the real world programming, in order tointroduce bit by bit and in a gentle way a real world programming language.


When the student starts to drag and drop blocks onto the canvas, he willrelate the abstract concept of a “for loop” to its real implementation in code.The slider and the buttons to move through the steps together with thearrows that indicate the current line of code executed, helps understandinghow the computer works when executing code and with the help of the globalvariables stack and function class stack, how actually it achieves the resultof computation.

Advanced features. By accessing the options menu bar with the “Op-tions” button in the top toolbar of the environment, we can load a previ-ously saved work by interacting with the “load” button and then entering thehash code when a prompt windows pops up. The button for saving the workactivate the procedure described before for saving the XML representationof the workspace and giving back the URL that one can share or use in thefuture to open that work from every browser since it is saved in the cloud.In the option menu bar if one activates the so called “live mode”, he enablesa way of working while receiving in an interactive manner the result of thatparticular block insertion in the existing program, and let the user exploreand experimenting and seeing changes instantaneously.

6.3 An example

In this section, we provide an example application that can be developed withEPLE showing how editor and visualizer and other options and features areused to achieve our goal: simple program editing and execution visualizationfor didactical purposes.Here we are going to test some script that comprehends a pretty full spectrumof programming concepts. The example chosen is the classical algorithmthat calculates the factorial of a number, in its recursive version, in orderto show how the stacks and heap works showing its contents and mainlybecause recursion is one of the most difficult concept to grasp in introductoryComputer Science courses. The block program is what follows.

6.3. AN EXAMPLE 69

We can see how effectively the blocks are nested, tiled, connected one anotherto achieve the desired functionality. Obtaining a value from a variable is easyas selecting the related get block from the category of the variables. Insidethe function block, there is an if-return construct which returns 1 only if thecondition “x = 1 ?” return true, otherwise the computation goes on returninganother function call. Let’s notice that the “do factorial” takes an input, anumber type block by inference of type, and outputs always by inference aresult that is also a number type block. It is pretty easy to understand whatthis code does even when we do not execute it.The blocks are converted by the language generators of the Blockly API inthis Python code.

1 x = None

2

3 def factorial(x):

4 if x == 1:

5 return 1

6 return x * factorial(x - 1)

7

8

9 print(factorial(4))

A snapshot of the step #13 of the whole execution shows how the functioncalls pile up in the stack and how they disappear when the return the resultof the computation that they have done.


The final result, when all the steps left are over, is the output of the factorialof the number 4, in the textual area of the visualizer.

In this particular example is not shown but the visualizer can show morecomplex things like references to functions or global variables, and complexdata structures due its original capabilities imported from the OPT visual-izer. Here is an example of complex visualization.

6.4. PRO AND CONS OF EPLE 71

6.4 Pro and cons of EPLE

In this section we are going to talk about what EPLE does in its simplicityand what does not do, what is good for and what not.

What EPLE does. The most important thing that EPLE does is offering,by connecting and making talk two piece of software made for other purposes,an environment that acts like a live debugger, a simple and interactive de-bugger that shows the inner workings of code, which are usually hidden withother tools and thus showing them it helps and boost the learning process.Instead of trying to image what the computer is doing with the code behindthe unmotivated black box, it lets see, in an simplified and abstract man-ner obviously, what’s running under the hood of the car, while keeping theengine on, thanks to the live mode that reflects the changes made to codeinstantaneously. The editor with its metaphor and ease of use, prevent syn-tax errors and type errors, thanks to the fact that the blocks simply do notconnect to one another, letting the learner focus on abstract concepts andtheir real execution, instead of trying also to understand where what wentwrong while typing the code. Although the system prevents syntax error,which by the way it is a great improvement for easing the learning processto the novices, semantical errors may obviously occur, but with the usage ofthe visualizer like a live debugger and going through the steps of execution


one can spot where the algorithm does not work correctly and correct it rightin the middle of the analysis, producing a new fresh code that works. Thevisualizer also shows runtime errors, and where do they happen, like divisionby 0 or invalid domain of mathematical functions, and so on, which again,can be spotted by analyzing the messages and looking at the highlighted lineof code. EPLE also holds the same expandability of Blockly and it is possibleto create custom made blocks with new functionalities.

What EPLE does not. EPLE is currently designed for creating relativelysmall programs, like the one that novices create with flowchart diagrams,and it may happen that resulting code(in our case python code is generated)sometimes could be shorter and more readable than the counter part ex-pressed in blocks, thus resulting not so useful for programming experts, evenif we have to say that its original focus is on the didactical environment, andit is not designed for experts. One may not attempt to maintain the Linuxkernel using EPLE. This environment is a domain specific solution, in thespecific it is about learning programming. it has its own target and its ownlimits. Experts should use more practical tools. It can not yet import alreadywritten Python code and transform it into blocks, it does only the other way,can export from blocks to Python language. The main issue is that modernprogramming languages are fearsomely complex, with closures, list compre-hension, operator overloading, and so on. Importing arbitrary code wouldhave a high development cost compared with a limited real-world utility. Thegenerated program in not interactive, “read input” request while generatingthe trace is not yet supported but one can prepare adequate variables tofake interaction thanks also the the rapidness of regeneration of the tracewithin the live mode architecture. Obviously there aren’t, not yet, featurelike networking programming or graphics, since those are arguments that aretreated in more advanced CS courses.

Chapter 7

Conclusions

We have discussed basic principles of a good L.E., analyzed some example,proposed our concept and implemented it showing its main functionalities.Now it is time to draw some conclusion of this thesis work.

7.1 Work recap

Computer science is still a relatively young topic, and so it is programmingand learning of it. Slowly we are understanding that the computer has tobe used for the new technology it brings and not only as an empowered oldtechnology.

If I had asked people what they wanted, they would have saidfaster horses.

As said by Henry Ford, the same applies with computers. Their usage nowa-days is mostly for and empowered typewriter, book, television. Fortunatelythe work toward the education in powerful computer usage has started al-most as the technology began to be present in every school or home, thanksto the work that Papert, Kay, and many others have done and are continuingdoing. Learning to program will be more a required skill as is required to beable to do basic maths. Giving the right tools is essential to help the processspeed up.

73

74 CHAPTER 7. CONCLUSIONS

In this work we created a proof of concept of application that is an environ-ment which fills the gap that is present in between abstract programminglearning, through diagrams and flowcharts, and the real world coding proce-dures. We also said that is essential to visualize what our program is doingwhile creating it to better understand inner mechanics or to visualize abstractprograming concepts difficult to grasp at first like recursion, which usuallyare hidden by an unmotivated black box.The EPLE environment achieve those goals of visualizing our main inter-est, program execution and workings, and also add language that createsa continuum between diagrams and real code by the usage of the blocksmetaphor. Metaphor that simplifies the coding activity freeing the learnerfrom the constraint of learning a particular programming language and itssyntax, letting him able to focus on the abstract skills he has to acquire. Thereal world code is also shown in order to relate abstract and concrete andto build a cognitive link between what is created and what is executed andhow. Abstraction and generalization are promoted by the capabilities of theblock language which gives constructs like procedures. The environment cre-ates a micro world where one can experiment with the basic building blockof structured programming, and in the meantime learn about algorithms bycombining these blocks together in such meaningful ways.EPLE could be categorizes as a live coding, simulating and debugging envi-ronment because in fact it supports those way of interacting with programs.Computation time is expressed in computation steps in the trace of executionand with this is possible to go back and forth in time during the execution,which is more useful, together with interactivity and live changes, than a vi-sual presentation of the execution of an algorithm on fixed and unchangeabledata and code.Thus we obtain manipulation in terms of physical interaction with blocksand manipulation of programs in terms of changing them, playing with themand understanding them while creating.EPLE’s UI could be used with a low cognitive effort since its simplicity andcleanness and since the puzzle block metaphor is a commonly know metaphorand it is simple to interact with it.

7.1. WORK RECAP 75

7.1.1 Future works

EPLE could be improved in so many ways by adding various minor features,from developing mobile oriented versions supporting multitouch gestures orwhatever fancy feature, but the core functionality is present and stable. Itcould evolve into some kind of IDE or integration with existing ones in orderto give the same tools used by professional to the learning student with someextension. Thus this would need a complete rewriting of the system becausecurrent IDE are not web based and are still installed locally on each computerinvolved in development. Maybe in the future IDE will move toward thedirection of web based and server centric farms of development and thus theprocess will be more quick and easy to tackle. It would be useful to createa mapping at time of simulation, thus enhancing the trace produced by thebackend, that shows not only the line of code executed in that step butalso the block involved in that step should be at least highlighted for moreunderstandability. Having the possibility to ask at each time the student goesover the step in which is requested an input, like the reading of a value fromkeyboard, could be a major feature that would be nice to have in order tocreate interactive simulations while playing them back and forth, requestinga new evaluation of the execution starting from that particular point. EPLEdoes not have yet a Turtle and graphics outputs, but the backend could bemodified in order to enrich the trace, and extending the block editor is amatter of a couple of lines of code. The visualization is stack oriented, othercan be implemented to fit the need of explaining complex data structureslike trees and graphs. An online community can also build for having theregister user have its own notebook of works which can be reviewed andshared among other users, like it has already been done with Scratch.

76 CHAPTER 7. CONCLUSIONS

Bibliography

[1] Seymour Papert, Mindstorms: Children, Computers, and PowerfulIdeas, 1980

[2] Bret Victor, Learnable Programming: Designing a programming systemfor understanding programs, September 2012

[3] Bret Victor, Inventing On Principle, February 2012

[4] Douglas Rushkoff, Program or be Programmed: Ten Commands for aDigital Age, November 2010

[5] Allen B. Downey, Jeffrey Elkner, Chris Meyers, Think Python: How toThink Like a Computer Scientist, February 2013

[6] Philip J. Guo, Online Python Tutor: Embeddable Web-Based ProgramVisualization for CS Education, Google, Inc. Mountain View, CA, USA2013

[7] Juha Sorva, Teemu Sirkiä, UUhistle – A Software Tool for Visual Pro-gram Simulation

[8] Juha Sorva, Visual Program Simulation in Introductory ProgrammingEducation, 2012

[9] Claudio Mirolo, Is Iteration Really Easier to Learn than Recursion forCS1 Students?

[10] Stephen Cooper, Wanda Dann, Randy Pausch, Alice: a 3-D tool forintroductory programming concepts, 2000

77

78 BIBLIOGRAPHY

[11] John P. Dougherty, Concept visualization in CS0 using ALICE , 2007

[12] Juha Helminen, Lauri Malmi, Jype – A Program Visualization and Pro-gramming Exercise Tool for Python

[13] Jeffrey Edgington, Teaching and viewing recursion as delegation, 2007

[14] Computing at School (CAS), The Raspberry Pi Education Manual, 2013

[15] Tyler Cooper, Adafruit Learning System Raspberry Pi WebIDE, 2013

[16] Jose Danado, Fabio Paternò, Puzzle: A Visual-Based Environment forEnd User Development in Touch-Based Mobile Phones, 2012

[17] Wanda Dann, Stephen Cooper, Randy Pausch, Using visualization toteach novices recursion, ACM Sigcse Bulletin 33, 2001

[18] Esa-Matti Järvinen, The Lego/Logo Learning Environment in Technol-ogy Education: An Experiment in a Finnish Context, JTE vol.9 num.21998

[19] Alan C. Kay, The Early History of Smalltalk, Apple Computer, ACMSIGPLAN Notices, Volume 28, No. 3 March 1993

I’m thankful to all the people that until now

I’ve encountered in some way or another,

that have had the strength to tolerate and support me

during these years.

And I’m also thankful to those who don’t.

My respect goes to all of you

for making who am I in this moment.

Kudos to you.

Eple thesis

Documents

learning programming

needs of learning

hes learning

right tools

learning environment

teaching tools

learnable programming

teaching environment