A small experience in teaching JavaScript to a kid

[David Bruant]

Hi,

In France, we have this thing that when kids are at their last year of
middle school (that we call "collège" but is unrelated to college),
they're supposed to do an "observational internship" at a company.
Long story short, I've had a kid during this entire week. My company
being just me currently contracting for Mozilla, writing doc on the
WebAPIs, not necessarily the sexiest part and working at a coworking
space. I chose to teach the kid a little bit of coding.


I'm sharing here every piece of feedback I find relevant for the
WebMaker movement.

I wanted to start with Thimble... which is only in English so far. If
Mozilla is serious about targeting youth, things will have to be
translated in kid's languages. English-only is sort-of acceptable for
adults, but clearly not for young kids already having issues expressing
ideas in their mother tongue.
Interestingly, although the language was a barrier, he managed to
understand things more or less by throwing text in Google translate or
whatever other translating service.

Anyway, I put him in the London zoo project. He's played a bit with the
basics of HTML and CSS. Over lunch, he told me he liked Minecraft. It
was fascinating to discover that he had learned to program and
algorithmic thinking through Minecraft circuits. Not your regular way of
learning algorithmic thinking. He said things like "sometimes I take
circuits created by other people and try to write the same circuit with
less blocks" aka "code review" and "refactoring" in "professional
developers" jargon.
I made him write a Minecraft tutorial HTML page from scratch to teach
about Minecraft. He did that on the second day.
He wanted to learn programming. I was sort of unprepared and he didn't
know what he wanted to do so I asked him to do clock. HTML is not good
for circles (I don't feel like teaching border-radius hacks ;-) ), so I
chose to go with SVG. HTML5 allows SVG to be inlined inside an HTML
document. Not cross-browser, but who gives a shit in the context of
teaching JS?
I think SVG is a fantastic technology to teach programming, because it's
very graphic-oriented.

We ran into a combination of very annoying bugs [1] which led the kid to
loose most of his work after publishing. A very frustrating and painful
experience, let me tell you. In a nutshell, the scripts became part of
the body (WTF) and SVG elements got removed (WTF²). Not the sort of UX
you wish people to have when first learning how to program.
A combinaison of local files and Thimble (without publishing) was enough
of a workaround.
After the clock, he did a Pong game.

About the JavaScript part. I was writing part of the code, explaining
what was going on, teaching a one and then giving small assignments
where the kid had to struggle against the code to make it work
Darwinism-style. Among the little things taught one by one:
- how to rotate an SVG element
- how to move an SVG element
- if statement and simple conditions
- && and || in conditions

I took on myself to write some boilerplate I was finding not important
to teach upfront. As a starter, I added a
"document.addEventListener('DOMContentLoaded', function(){ ... })" block
so that document.getElementById wouldn't return null when expected to
return something. I was doing variable declarations and calls to
document.getElementById (but explained the correspondance between
HTML/SVG elements and the returned value). The kid picked up quickly the
idea of adding an id and calling document.getElementById just by looking
at what I had written and explained.
I wrote setInterval(function(){ ... }, time) and explained what the
second argument was about (particularly important for the clock :-) ) so
that he would just have to change this value and the block of code
inside the function.

On a more "generational" note, there have been countless times where I
explained the kids what to do and even without trying he woul instantly
say "but I don't know how to do that" although he had proven to
understand each piece individually. I don't blame the kid, but I blame
the education system which makes kids consumers and as a consequence put
them in fear of creating of being let on their own to solve a problem,
to pick up pieces they know and try to assemble them.

I think that's all for now.
I hope it was helpful feedback.

David

[1] https://github.com/mozilla/webpagemaker/issues/623

[Dethe Elza]

Hi David,

This is GREAT feedback, thanks so much for writing it up.

> I wanted to start with Thimble... which is only in English so far. If Mozilla is serious about targeting youth, things will have to be translated in kid's languages. English-only is sort-of acceptable for adults, but clearly not for young kids already having issues expressing ideas in their mother tongue.

I don't know what is going on already with translation, but agree this is a necessary step.

> Anyway, I put him in the London zoo project. He's played a bit with the basics of HTML and CSS. Over lunch, he told me he liked Minecraft. It was fascinating to discover that he had learned to program and algorithmic thinking through Minecraft circuits. Not your regular way of learning algorithmic thinking. He said things like "sometimes I take circuits created by other people and try to write the same circuit with less blocks" aka "code review" and "refactoring" in "professional developers" jargon.

I think this is more and more the case. Kids who failed match have been known to teach each other matrix arithmetic so they could make 3D work. With the right motivation, kids will overcome the limitations and shortcomings (as you found with the language barrier). The first generation of kids with computers had to struggle with Basic (or worse) and arcane PEEK and POKE commands, and from that they built today's game industry. Minecraft and other hackable games are a great way to introduce this kind of motivation. "Notch," the creator of Minecraft is working on a new game, called 0x10c[1] where this is even more explicit. In this science-fiction themed game there are computers called DCPU-16[2]. In the game you can program these computers in assembly language. This arcane language, for an imaginary computer, in an unreleased game is the 74th most popular language for projects on Github[3], has its own subreddit[4] where people teach each other not only this assembly dialect, but the theory and practice of writing higher-level languages on top of it, and has at least two other sites dedicated to the language[5][6].

> I think SVG is a fantastic technology to teach programming, because it's very graphic-oriented.

Agreed. I'll be using it next week in a 3-hour intro to Javascript for 4th year design students.

> We ran into a combination of very annoying bugs [1] which led the kid to loose most of his work after publishing. A very frustrating and painful experience, let me tell you. In a nutshell, the scripts became part of the body (WTF) and SVG elements got removed (WTF²). Not the sort of UX you wish people to have when first learning how to program.

The currently released version of Thimble does not support Javascript (which is why the scripts ended up in the body). Sounds like the sanitizer is not expecting SVG (which would be why the SVG disappeared). I know there is work on supporting Javascript, and will add a request for SVG support if there isn't one already.

> A combinaison of local files and Thimble (without publishing) was enough of a workaround.
> After the clock, he did a Pong game.

Very cool.

> I took on myself to write some boilerplate I was finding not important to teach upfront. As a starter, I added a "document.addEventListener('DOMContentLoaded', function(){ ... })" block so that document.getElementById wouldn't return null when expected to return something. I was doing variable declarations and calls to document.getElementById (but explained the correspondance between HTML/SVG elements and the returned value). The kid picked up quickly the idea of adding an id and calling document.getElementById just by looking at what I had written and explained.

The value of view source and motivation!

> On a more "generational" note, there have been countless times where I explained the kids what to do and even without trying he woul instantly say "but I don't know how to do that" although he had proven to understand each piece individually. I don't blame the kid, but I blame the education system which makes kids consumers and as a consequence put them in fear of creating of being let on their own to solve a problem, to pick up pieces they know and try to assemble them.

Agreed. Our current education systems punishes failure, which teaches kids not to experiment or take risks. Given that trying something and failing is one of the most important ways to learn, this is a huge problem.

Thanks again for sharing this.

--Dethe

[1] http://0x10c.com/
[2] http://dcpu.com/
[3] https://github.com/languages/DCPU-16%20ASM
[4] http://www.reddit.com/r/dcpu16/
[5] http://0x10co.de/
[6] http://dcpu.ru/

[Majken Connor]

> _______________________________________________
> Webmaker mailing list
> Webm...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/webmaker
>

Sounds wonderful! I just want to add that it's not necessarily generational
or a product of the education system. Some people are not wired to be the
risk takers in the same way others are. *We* have to adapt and learn how to
teach those people rather than perceive them as broken. As you saw, when
the kid had examples to follow and hack he was quite brave and competent.
It was simply when asked to do something from scratch that he hesitated. I
am the same way. I prefer to be handheld the first time I learn something.
I see it more that if you already know how to do it why should I waste my
time hitting my head against the wall when you can just show me how to do
it in a fraction of the time. It's not because i was taught not to be
confident, it's just how my brain works. I think I am also more able to
repurpose things and use them in ways they weren't designed than people who
like to figure things out on their own. It is two different mindsets, and
they can be foreign to each other. We have to be careful to accept both and
see neither side as afraid or anti-social.

[David Bruant]

Le 25/11/2012 03:57, Majken Connor a écrit :
> Sounds wonderful! I just want to add that it's not necessarily
> generational or a product of the education system. Some people are not
> wired to be the risk takers in the same way others are. *We* have to
> adapt and learn how to teach those people rather than perceive them as
> broken.

Just to clarify, at no point did I consider the kid broken. He was just
having repeatedly a reaction to a given situation that made me realize
that school doesn't promote initiative, problem solving and creativity.
On the first day, after he told me about what he was doing on Minecraft,
I had no doubt whatsoever of his ability to do what I was asking to.
The fact that he was telling me he "didn't know" without even trying to
think about it was what made me realize that he's rarely put in a
situation of problem solving. Maybe I'm wrong, but I feel that if school
promoted open problem solving, the kid wouldn't have felt so lost and
compelled to say "I don't know" as a first reaction to an open problem.

Given all of that and regardless of whether who or what is the cause of
the reaction I talked about, I shared this to point out that this kind
of behavior does exist, specifically to take that into account in
WebMaker curricula (so that as you say, we adapt to this kind of
behavior regardless of any positive or negative judgement we'd make)

> As you saw, when the kid had examples to follow and hack he was quite
> brave and competent. It was simply when asked to do something from
> scratch that he hesitated. I am the same way. I prefer to be handheld
> the first time I learn something. I see it more that if you already
> know how to do it why should I waste my time hitting my head against
> the wall when you can just show me how to do it in a fraction of the
> time. It's not because i was taught not to be confident, it's just how
> my brain works. I think I am also more able to repurpose things and
> use them in ways they weren't designed than people who like to figure
> things out on their own. It is two different mindsets, and they can
> be foreign to each other. We have to be careful to accept both and see
> neither side as afraid or anti-social.

I agree with you, but don't understand your reaction.
I was just trying to describe and decrypt an attitude I had observed. At
no point did I make a negative judgement such as "broken", "afraid" or
"anti-social". I did mention "put them in fear of creating", but that's
a very ponctual fear. I only described the initial reaction. Passed that
initial reaction, I would not hear about the kid for about 2 hours
sometimes, because he was in "try-fail-fix" mode and would only stop
after he felt he had succeeded.

David

[Carla Casilli]

Hey all,

A few quick responses:
1) Local is best.
Localization is a known issue and we are thinking through how to quickly and properly address this. NESTA has been translating some projects into other languages. The best solution involves community involvement, from not only a creation standpoint but from a localization standpoint as well.

1a) Corollary: Not everything translates. We build with the knowledge that some ideas possess regional or local reference points. Language is bound into the culture from which it emanates and that culture—-which may seem universal and pervasive--has boundaries and limits. That said, let's see how far we can get with our efforts while recognizing that some projects will be more popular and successful with some audiences. Writing to certain grade levels to ensure comprehension is something that professional journalists have been doing for years. And Wikipedia has shown us how to make similar content work in different contexts.

2) Mentors are important.
We've been creating projects that can be completed individually, but we're pretty much all in agreement that some face to face interaction can be vital to understanding and learning.

3) Achievement is complicated but entirely possible
There are many psychological theories about achievement. I prefer not to talk about failure since it is so complicated, praised, and demonized all at once. Rather I'd suggest that we focus on encouraging being comfortable in being slightly uncomfortable with what we know. What's really important is a commitment to trying despite the allure of quitting. Dr. Mihaly Csikszentmihalyi talks about Flow. http://www.cgu.edu/pages/4751.asp Dr. Carol Dweck talks about fixed mindsets vs. growth mindsets http://mindsetonline.com/. We can and will refer to folks who can help us think through how to empower and engage anyone who's interested in learning about webmaking.

I like to think of us as ambassadors to the web and I'm excited that our community is so invested in the process. Thanks for sharing your thoughts and continue to do so—-it's much appreciated.

[Carla Casilli]