XLogoOnline: A Single-Page, Browser-Based
Programming Environment for Schools aiming
at Reducing Cognitive Load on Pupils
Juraj Hromkovič1, Giovanni Seraﬁni1, and Jacqueline Staub1,2
1Department of Computer Science, ETH Zürich
Universitätstrasse 6, 8092 Zürich, Switzerland
2Pädagogische Hochschule Graubünden
Scalärstrasse 17, 7000 Chur, Switzerland
For more than twelve years, our chair has been introducing
primary school children to algorithmic thinking by teaching them how
to program in Logo. The key element of the proposed didactic approach
consists in reducing the extraneous cognitive load on the pupils. We
developed and stepwise reﬁned the required teaching materials that allow
for introducing only a few instructions in a programming language, which
is gradually extended simply relying on modular design. XLogoOnline
is our new browser-based, single-page programming environment for
schools which is perfectly attuned to our curriculum. We argue that the
platform reduces the extraneous cognitive load on the pupils thanks to a
heavily-simpliﬁed workﬂow, appropriate for young children, and present
evaluations that conﬁrm high usability and acceptance across ages.
It is crucial that young pupils leave school not only as passive users of com-
puters but also with the ability to think algorithmically and solve problems
by programming. This form of learning is constructive, enriches creativity and
teaches precision but is strenuous and demanding by its very nature. In this
work, we reﬂect on the diﬃculties children encounter while learning to program
and introduce our two-pronged approach of a programming environment and
curriculum as technical and didactic solutions to reduce cognitive load on novice
1.1 At long last, Computer Science in Swiss Schools
Research and development of programming concepts and languages have a long
and rich academic tradition in Switzerland. Pascal, Modula-2, and later Oberon
were conceived by Swiss computer science pioneer and Turing-award recipient
Niklaus Wirth, with his main objectives being that university students are
introduced to programming using modern and didactically appropriate teaching
It may seem paradoxical, however, that Switzerland is still debating about the
opportunity to introduce computer science as a mandatory subject at primary,
lower and higher secondary school. While the German speaking part of the
country slowly seems to agree on computer science for all children up to 15 years,
the so-called “Plan d’étude Romand” in the French part of the confederation still
completely neglects computer science [
]. At present, higher secondary school
students all around the country are allowed to choose computer science as an
optional subject, usually in the last year of the curriculum. The Swiss Conference
of Cantonal Ministers of Education is ﬁnally considering to introduce Computer
Science as a compulsory subject at higher secondary school. For the ongoing
debates a decision is expected for October 2017.
For more than twelve years, our chair at ETH Zurich – together with several
regional partners, among them Pädagogische Hochschule Graubünden [
University of Basel – have been conducting projects introducing primary school
children and their teachers to programming in Logo [
] using our didactic
approach. In the last two years, in the greater area of Basel alone, 96 primary
school classes (1862 pupils) and their teachers were taught how to program using
our teaching materials. Currently, we are even active outside the Swiss borders
and are introducing 8 primary school classes (141 pupils and their teachers) to
programming in the Principality of Liechtenstein.
In the rest of this paper we present XLogoOnline, our new browser-based pro-
gramming environment for introducing primary school children to programming.
1.2 Organization of the Paper
In Section 2, we reﬂect on the contribution of programming on algorithmic
thinking with a focus on preserving pupils’ working memory. In Sections 3
and 4, we highlight technical and didactic design principles of our curriculum
before honing in on implementation details of XLogoOnline. Section 5introduces
objectives, setup and results of three experiments after which we ﬁnally summarize
the key insights of the paper in Section 6.
2 Algorithmic Thinking and Cognitive Load
We consider the expressions algorithmic thinking and computational thinking as
two equivalent and interchangeable ways to state the same concept [
already reﬂected 30 years before Wing about the relations between algorithmic
thinking and mathematical thinking, and informally described algorithmic thinking
as his “perception of the most typical thought processes used by a computer
scientist”. Aho captured the nature of algorithmic thinking as follows: “We
consider computational thinking to be the thought process involved in formulating
problems so their solutions can be represented as computational steps and
]. Irrespective of whether we refer to it in one way or another, we
believe that computer science should be introduced at school “as an independent
scientiﬁc subject” and that it should be “studied both for its intrinsic intellectual
and educational value and for its applications to other disciplines” .
2.1 Programming is a Key to Algorithmic Thinking
Following the deﬁnition of Aho, we are ﬁrmly convinced that learning how to
develop well-structured programs is a key element to mastering algorithmic
thinking, and an ideal way to experience scientiﬁc methods at an appropriate
level of abstraction. In our curriculum, pupils ﬁrst learn to write small pieces of
code, which then are tested and revised for improvement. We mainly focus on
programming-in-the-small and the curriculum trains pupils to implicitly formulate
a hypothesis (write a program to solve a given problem), verify their hypothesis
(run and test the program), and successively reﬁne the hypothesis as necessary.
Modular design is both a technique to develop well-structured programs and
an overall problem solving strategy that can be used to tackle any complex tasks,
even outside of computer science. In our programming classes, pupils are explicitly
taught to seek geometric ﬁgures for repetitive patterns. They rapidly discover
the advantages of programming and naming such small bite-size elements, and
of reusing them in a proper modular fashion. The pupils learn to successively
decompose problems into smaller tasks which are each solved independently, and
ﬁnally reassembled to solve the original assignment.
Learning to program is generally considered to be a complex cognitive activity.
In our didactic approach, programming-in-the-small and modular design require
the pupils to organize their programs into conceptually independent units. This
modularization process is core to teaching computer science: First, it helps to
approach challenging problems by breaking them down into smaller tasks, which
can be solved independently by applying top-down or bottom-up problem solving
strategies. Second, thinking about problem instances in an abstract way helps
identifying structural properties inherent to the problem, and therefore allows
the pupils to classify them into abstract problem classes, with common properties
that can be solved relying on one single parameterized program. This results in
a high intrinsic cognitive load. Educational research highlights, that this kind of
cognitive load is speciﬁc to the contents and considers it as immutable .
2.2 How we Reduce the Extraneous Cognitive Load
The educational materials we developed consist of the German textbook Ein-
führung in die Programmierung mit Logo [
], the booklet Programming in LOGO
], and Logo programming environments that are tailored for young pupils and
programming exercises with a visual feedback [
]. The main subject of our paper
is XLogoOnline, the most recent programming environment in this suite [
We strongly believe that Logo – despite its age – still is one of the most
suitable languages for introducing novices of all ages to programming. Moreover,
we are convinced, that Logo together with our teaching materials and the pro-
gramming environments allow for a noticeable reduction of extraneous cognitive
load. Regarding knowledge dimensions presented in the Revision of Bloom’s
], we argue that our proposed didactic setting lower the mental eﬀort
and preserve the working memory of the pupils:
We massively reduce the impact of factual knowledge: Instead of introducing
pupils to all the instructions and features of a speciﬁc programming language,
we deliberately focus on a very limited set of basic instructions and teach
the kids how to gradually extend the programming language by naming their
programs and making them available for reuse. Furthermore, the chosen
syntax is adequate to age and abstraction skills of school children. The pupils
are not merely using a programming language but they are developing their
own, personalized vocabulary to actively interact with the computer.
Conceptual knowledge is introduced in a compact and didactically eﬀective
way: in the eyes of the pupils, a program simply is a sequence of unambigu-
ous instructions that the computer understands and predictably executes.
Furthermore, we focus on only one looping control structure that avoids
variables, and, later on, we introduce the simpler notion of a static parameter,
as a preparation step to the challenging concept of variable. Variables are
postponed to lower secondary school.
The procedural knowledge and to some extent also metacognitive knowledge
developed by children mainly relies on modular design. We use this design
principle as a straightforward problem solving strategy and, moreover, as a
mean to hide nested loops.
Readers who are interested in further details and reﬂections on our teaching
approach should refer to our prior publications [
]. With the exception of
the textbook, all teaching materials and environments are freely available to all.
2.3 Programming Languages for School Education
The choice of a speciﬁc programming language for school education strictly
depends on the targeted educational objectives. We mainly aim at designing
(and not only at using) a language together with the children, and strongly
believe that programming classes are a unique chance to learn being precise in
a semantic but also in a syntactic way. A text-based programming language
such as Logo is inherently well-suited for teaching both precision and modular
design. Block-based programming languages assume that the syntax is a major
hurdle while learning how to program, and therefore try to lower the extraneous
cognitive load by using graphical elements and a drag-and-drop programming
approach. Although the general objectives of programming classes with block-
and text-based languages seem to be similar, the methods adopted for reducing
the cognitive load on the pupils considerably diﬀer and make separate research
on this topic necessary.
3 Technical and Didactic Design Principles
XLogoOnline was designed as a browser application to meet the requirements
of being an easily deployable programming environment which may be used
across platforms. At schools we encounter a plethora of old and modern computer
infrastructures that vary from stationary computers to laptops and tablets, that
have diﬀerent operating systems, various screen sizes, and all may or may not be
connected to the Internet.
We had to decide upon numerous technical and didactic design alternatives. In
the following, we present the most inﬂuential choices we have taken and describe
their impact on the implementation of our platform:
Built-in diagnostics that oﬀer smart hints and pinpoint errors are automati-
cally generated in XLogoOnline and play an important role in the interaction
between computer and pupil. They help to foster a mostly autonomous and
self-driven learning process, and moreover alleviate pressure on the teacher.
XLogoOnline adopts a two-pronged strategy to reduce distractions in the user
interface. First, the chosen single-page approach, which makes all information
for developing and understanding a program visible at one glance, prevents
obstructively layered windows. Second, exhibiting nothing but the most
important features makes for a simple and clear user interface.
Our reactive, browser-based, client-side application relies on state-of-the-art
technologies and runs on a local web-server in oﬄine mode. It uses the local
ﬁle system to store and retrieve code from earlier sessions. This enables the
platform to be deployed independent of whether an internet connection is
available or not.
Our programming environment relies on Canvas, a native dot-matrix data
structure for drawing supported by most modern browsers, which does not
pollute the Document Object Model and, moreover, which provides a handle
for conveniently downloading pictures. Our tool makes eﬃcient use of the
canvas by discerning whether ﬂushing the entire drawing to the canvas is
possible, or whether it should be split into sequences (e.g. in case of a wait
command) as the parser is running.
4 Implementation of XLogoOnline
In the following, we explain what goes on behind the scenes when a Logo
instruction is executed by touching upon the parser, the editor and the canvas
and explaining what actions are triggered by a simple press of the <enter>
button in the input ﬁeld.
4.1 Information Flow
Pupils interact with four main components (Fig.1): they issue commands to
the input ﬁeld in a line-by-line manner and each line contains either built-in
or user-deﬁned commands. These programs are deﬁned in the code editor and
retrieved from it during execution. Once execution has ﬁnished successfully, the
result is visible as a drawing in the rendering component and the command is
added to the history which keeps track of all recently issued commands. Next,
we zoom in on the pertinent implementation aspects of each component.
Fig. 1: Information ﬂow
While our curriculum only introduces a very basic set of Logo primitives, pupils
use the editor to extend the set of commands by deﬁning new customized programs.
Programming demands precision and mistakes are inevitable, therefore we provide
helpful suggestions in terms of diagnostics which highlight token classes directly
in the editor by using diﬀerent colors and inline markers to pinpoint syntactical
errors. Programs are typically declared in the following characteristic form:
TO P R O G R A M N AME :param1 :param2 .. . : p a r a m N
Two especially common mistakes we see in pupils’ programs are due to
mistaken declarations or invocations of programs. The former usually appear
as parameters with missing double-colons, which are interpreted as invocations
to non-existing programs. The latter often manifest as missing spaces between
program names and their arguments, leading to a single program without any
parameters. Calling such a program later causes a run-time error because the
according signature cannot be found. We help identify these classes of mistakes
using syntax highlighting and checking, which we will explain in the following.
We assign unique colors to each class of syntactic elements
and reﬂect those in the editor. For instance, built-in commands like fd (for forward)
or cs (for clear screen) are rendered in a diﬀerent shade than numbers, parameters
and mathematical constants. Over time, pupils become acquainted to this coloring
scheme and common cases of invalid input such as missing spaces or double colons,
become evident. This simple, yet surprisingly eﬀective mechanism helps pupils
resolve basic mistakes autonomously and further enhances their understanding
of grammatical concepts by revealing how the code is interpreted.
As the users type in the editor, their programs are continu-
ously and automatically interpreted in the background after a short period of
inactivity. Programs which fail to parse are analyzed further to locate missing
keywords and erroneous numbers of parameters. The exact location and type
of an error is signaled by adding a red cross directly beside the faulty code
which shows a hint when hovered over. Doing so aids pupils and frees them from
concentrating on syntactical details and let them focus on semantics instead.
Next, we discuss the underlying concepts of our interpretation process.
4.3 Parser and Interpreter
The parser starts by validating that programs satisfy the structural requirements
imposed by the language speciﬁcation. Using a grammar, the sequence of charac-
ters found in the program is transformed into a sequence of tokens by the lexer.
Next, a parser derives a parse tree from the tokens. We label these two processes
as parsing. The grammar is deﬁned hierarchically as a set of recursive rules.
XLogoOnline parses programs starting at the top-level rule and this starting rule
diﬀers in two cases: in the input ﬁeld only program invocations are allowed; in
the editor, however, the starting rule only permits program declarations. Once
parsed, a decision is made and ill-typed programs are rejected and otherwise
execution continues with an interpretation phase which traverses the parse tree
using a visitor. Each node corresponds to a Logo instruction and execution entails
drawing to the canvas. These two steps we label drawing.
Once a program has successfully executed, the result is shown on a drawing
surface which allows the user to drag with their mouse and explore the painting.
To support panning, we draw onto a large backing buﬀer consisting of the visible
view port in the middle and its eight neighboring cells. The view port can ﬁll at
most the whole screen, leading to a backing buﬀer nine times the actual screen
size. The view port consists of two canvases; one used to display the turtle, the
other to draw strokes onto. Strokes are not rendered to the display until explicitly
ﬂushed. This is a costly operation because the whole frame needs to be redrawn
and so, where suitable, we limit these operations and defer the ﬂush to the end
of the execution.
5 Classroom Studies and Performance Evaluation
We evaluated XLogoOnline based on three experiments. First, we measured
the cognitive load experienced by pupils and teachers across several age ranges
while programming in Logo. Next, we compared XLogoOnline against one of its
predecessors in terms of usability. Last, we benchmarked three programs in a
performance sanity test measuring elapsed time for drawing and compilation.
5.1 Programming and Cognitive Load across Age Groups
In a typical classroom, a single teacher will guide and assist the entire class;
pupils learning how to program, however, progress at diﬀering rates. Ideally
pupils should work autonomously while not experiencing cognitive overload. In
order to observe children programming in a real classroom environment, we ran
several introductory lessons, measured pupils’ and teachers’ exhaustion levels
using a questionnaire and examined the diﬀerences in cognitive load across ages.
Setup and Participants
We introduced 75 children (23 girls and 52 boys) and
12 teachers to programming in Logo. In groups of 12, the (mostly) novice pro-
grammers spent 75 minutes solving exercises using sequences of basic movement
commands. Each group consisted either of (i) children aged 6 to 9 being exposed
to geometry for the ﬁrst time, (ii) children aged 10 to 13 more used to text-style
exercises, geometry and abstract thinking, or (iii) teachers who have progressed
even further in their education but mostly lack prior knowledge in computer
science. Our hypothesis is that with increasing age students become more accus-
tomed to abstract thinking and their cognitive load decreases. Cognitive load,
however, cannot be measured in absolute terms; so we instead asked participants
about their level of exhaustion by having them ﬁll out a questionnaire after
programming. Answers were provided along a 4-option Likert-type scale featuring
smiley faces. This subjective, indirect measure was proposed in prior work by
Paas et al [
], which assumed that the felt complexity of a task and the cognitive
load are correlated.
The combined student data conﬁrmed that children indeed feel cogni-
tively exhausted while programming (Fig.2a) reﬂecting the need for a tool which
eases their learning whilst also not imposing too much extraneous cognitive load.
The more detailed breakdown by age in Fig.2b conﬁrms our hypothesis; the
shifting peaks reﬂect that teachers are least exhausted, followed in turn by the
older and the younger pupils respectively who showed increased exhaustion.
(a) Overall pupil exhaustion (b) Exhaustion across three age groups
Fig. 2: Questionnaire indicate particularly high cognitive load for young pupils.
Since exhaustion levels proved to be similar and rather high in both student
groups, we require an objective measure which helps diﬀerentiating more ﬁnely.
For this reason, we plan to run a follow-up study examining cognitive load by
measuring the number of exercises solved in total. Furthermore, we will explore
the inﬂuence of diﬀerent exercise types on the cognitive load of the programmer.
The experiment conﬁrmed that most children experience rather high cognitive
load while programming, which reinforces the need for tailored teaching material
to enable better learning experiences. Children aged 6-9 showed the highest
exhaustion levels, while children aged 10-13 were not only less exhausted, but
we also observed them to be more progressive and able to work without direct
5.2 Usability Comparison of XLogo and XLogoOnline
To understand whether our design choices had a positive impact on user ex-
perience, we ran a second user study and examined the children’s interaction
with XLogoOnline, their understanding of the purpose of selected components
therein and general impression of the user interface. Figure 3shows a side-by-side
comparison of what solving the same exercise would look like in XLogoOnline
and its predecessor XLogo.
(a) Predecessor (native): XLogo (b) Our contribution: XLogoOnline
Fig. 3: XLogoOnline features an uncluttered single-page layout with bigger fonts
and a reduced set of GUI features for reducing the extraneous cognitive load and
in support of a young audience whose ﬁne motor skills have yet to fully develop.
Setup and Participants
A ﬁfth-grade class consisting of 18 pupils, generally
aged 11 or 12 years, participated in this on-site experiment. The class was ﬁrst
introduced to the traditional programming environment XLogo for three weeks
where they learned about the basic commands as well as the concepts of repetition
and modularization in Logo.
After getting used to programming in XLogo for three programming sessions
which lasted two hours each, we introduced XLogoOnline while covering regular
polygons. After a short introduction, we left the children to solve exercises for
two hours before ﬁnishing the experiment by handing out feedback questionnaires
covering three main questions: ﬁrst, we checked their understanding of the use of
the four main UI components by letting pupils draw connections between pictures
of both user interfaces and descriptions of the components’ purpose; second, we
asked pupils to grade the four components in XLogoOnline on both their visual
appearance and their functionality; last, we asked them to tell us about their
general impression working with the platform.
A vast majority (83% of all pupils) understood the usage and meaning
of the four UI components correctly and could easily transfer from XLogo to
XLogoOnline. We received strongly positive feedback (praises for the syntax
checker, error pinpointing, layout, clarity and comprehensibility) which give reas-
surance that simplifying the user interface in XLogoOnline, adopting a ﬂat design
and equipping it with additional diagnostic tools like syntax highlighting and
syntax checking are indeed beneﬁcial. Some pupils missed certain features XLogo
provided and others found the space usage not optimal, which we subsequently
adjusted according to their needs. We conclude, that the transition between
XLogo and XLogoOnline posed no signiﬁcant burden on the students.
5.3 Performance Test
It is easy to build complex shapes involving several tens of thousands of drawing
instructions by simply repeating sequences of basic patterns many times over. To
ensure that even these complex exercises in our teaching materials are executed
in reasonable time, we chose three benchmark programs (shown in Fig.4) which
represent a range from short to more time-intense programs and checked their
(a) Cheap (b) Medium (c) Expensive
Fig. 4: Benchmark programs ranging from cheap through expensive
The respective programs were re-run 1000 times in XLogoOnline while mea-
suring their overall execution times. We found an average performance of 20000
drawing instructions per seconds on a four-year old oﬀ-the-shelf laptop. Conse-
quently, the running time for simple shapes like the ones shown in Fig.4a and
Fig.4b add up to merely a few milliseconds. Moreover, even the most time-intense
exercises in our curriculum run to completion on the order of seconds, which we
consider satisfactory for the typical classroom setting.
Finally, we investigated the breakdown of execution time between drawing
and parsing to determine the cost of diagnostics, which rely on repeated parsing
of the input. We found drawing to be the more inﬂuential factor between the two
phases and that, as programs get bigger, it increasingly dominates the overall
execution time (shown in Figure 5). Diagnostics like error classiﬁcation and
additional hints are potentially expensive, however, the time spent in parsing
constitutes a negligible fraction of the total time and signiﬁcantly helps pupils
recover from their mistakes.
Fig. 5: The larger the pro-
gram, the more time we
spent traversing the parse
tree (i.e. drawing) while
building the parse tree (i.e.
parsing) takes only a frac-
tion of the time.
In summary, we found XLogoOnline able to execute all exercises in our
teaching material in reasonable times and parsing to be relatively cheap which
allows for further diagnostics as an additional help for the pupil, supporting a
more autonomous diagnosis and remedy of syntactic errors.
Teaching how to program in hundreds of schools, we found algorithmic thinking
and programming to be exciting but exhaustive activities, especially for young
pupils. We introduce XLogoOnline, our new browser-based programming environ-
ment that aims at reducing the extraneous cognitive load on school children. It
is tailored around a curriculum with a deliberately small set of basic commands.
Pupils steadily learn to expand the language with custom commands while
solving algorithmic problems. As a distinguishing attribute, our programming
environment features diagnostics which provide useful feedback to the program-
mer while having an uncluttered and easy to use single-page user interface. The
programming IDE can be deployed at the click of a button using only a web
browser and, thanks to its reactive design, can be run on a broad set of devices
with diﬀerent screen sizes and platforms. We ran classroom studies investigating
cognitive load during introductory lessons and found a clear need for appropriate
didactic settings which reduce the load on pupils’ working memory. XLogoOnline
was shown to be intuitive and generally approved by primary school pupils.
: Our broader goals are to understand what troubles young
programmers the most. Web environments are especially well-suited for collecting
rich data sets, for instance, containing student mistakes. Analyzing this data may
reveal patterns which can be tied back to conceptual error classes and tackled
more explicitly in our curriculum. Further, we are investigating social eﬀects in
programming and have built an early prototype extension for XLogoOnline that
allows pupils to collaborate on exercises by sharing code and drawings with their
Logo-Uunterrichtsmaterialialien & -Programmierumgebungen (Status as of Septem-
ber 18, 2017). http://www.abz.inf.ethz.ch/logo.
Walter Gander et al. Informatics education: Europe cannot aﬀord to miss the boat.
Informatics Europe & ACM Europe Working Group on Informatics Education,
Juraj Hromkovič, Tobias Kohn, Dennis Komm, and Giovanni Seraﬁni. Combining
the power of Python with the simplicity of Logo for a sustainable computer science
education. In Proc. of ISSEP 2016, LNCS, 9973:155–166, Springer, 2016.
Juraj Hromkovič, Tobias Kohn, Dennis Komm, and Giovanni Seraﬁni. Examples
of algorithmic thinking in programming education. Olympiads in Informatics,
Juraj Hromkovic, Tobias Kohn, Dennis Komm, and Giovanni Seraﬁni. Algorithmic
thinking from the start. Bulletin of the EATCS, 121:132–139, 2017.
Juraj Hromkovič. Einführung in die Programmierung mit LOGO. Springer, 3rd
Donald E. Knuth. Algorithmic thinking and mathematical thinking. The American
Mathematical Monthly, 92(3):170–181, 1985.
David R. Krathwohl. A revision of Bloom’s taxonomy: An overview. Theory into
Practice, 41(4):212–218, 2002.
Bernhard Matter. Projekt “Programmieren in der Primarschule” (Status as of
September 18, 2017).
Gabriel Parriaux and Jean-Philippe Pellet. Computer science in the eyes of its
teachers in French-speaking Switzerland. In Proc. of ISSEP 2016, LNCS, 9973:179–
190, Springer, 2016.
Giovanni Seraﬁni. Teaching programming at primary schools: Visions, experiences,
and long-term research prospects. In Proc. of ISSEP 2011, LNCS, 7013:143–154,
Jacqueline Staub. XlogoOnline (Status as of September 18, 2017).
Jacqueline Staub. Xlogo online - a web-based programming IDE for Logo. Master
John Sweller. Cognitive load theory. Psychology of Learning and Motivation,
55:37–76. Academic Press, 2011.
Fred G. W. C. Paas, Jeroen J. G. van Merriënboer, and Jos J. Adam. Measurement
of Cognitive Load in Instructional Research. Perceptual and Motor Skills, 79(1):419–