Teaching children Elm

[Fedor Nezhivoi]

Hello folks,

Evan, Richard and the whole community as well as Elm language itself do a great job in teaching community. If you are staying with this community for a long time, you probably already can notice some improvements in your understanding of programming, API design, abstractions and etc. How can we take it even further?

Recently I got an opportunity to share some knowledge about functional programming and programming in general. However target audience are children (mostly 14-16 y.o.) and I am a little bit stuck. Not only I've never been a teacher, but with children I expect it to be even harder because of curse of knowledge. On the other hand trying to teach some boring basics doesn't feel right, to be interesting it should be kind of journey.

Previously there was some information about courses in USA where children are thought programming with Elm. So I am kindly ask people who are doing this to share your experience, tips, tricks and whatever may be helpful. It would be even better if you can share some actual content/topics/lessons/exercises. If you know exact person, but they are not here, please, provide me with contacts.

I am kindly ask you to abstain from discussions and only participate if you have something concrete.

Have a nice day!

[Janis Voigtländer]

I have concrete material (guided exercises) that I used with slightly older youths, 16-18 y.o., here: https://github.com/jvoigtlaender/Elm-Kurs

Also, you might be interested in this mailing list thread.

​

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tanya Bouman]

We have been using Elm in elementary schools for Computing and Software Outreach from McMaster University.  The kids have really enjoyed using animations; here are some examples http://outreach.mcmaster.ca/menu/fame.html.  We have also developed our own graphics library http://package.elm-lang.org/packages/MacCASOutreach/graphicsvg/latest/GraphicSVG which makes it easy to use notifications. Although we don't have any tutorials for that yet, there is a chapter about it in http://www.cas.mcmaster.ca/~anand/ThinkingComputationallyWithElm.pdf.

Tanya

[Will White]

Knowing (ahead of time) if there's someone in the class with a good idea for an application would be gold.

[Will White]

What about a homework diary?

[Rex van der Spuy]

On Tuesday, October 4, 2016 at 9:08:45 PM UTC-4, Tanya Bouman wrote:

We have also developed our own graphics library http://package.elm-lang.org/packages/MacCASOutreach/graphicsvg/latest/GraphicSVG which makes it easy to use notifications. 

This is awesome!!! 

[Fed Reggiardo]

Recently I've been working on some projects creating music in the browser with teens.  I get them hooked with simple HTML + CSS projects so they can quickly see tangible results.  Them slowly add some fun JS; in our case Web Audio but you could also do SVG, CSS animations, Canvas, etc.  Giving them some interactive bits of code that they can tinker with themselves to create cool things certainly can't hurt.  You can layer the meatier Elm topics on top of that.  

[Will White]

I've been thinking about how I'll give a talk about Elm (at a JS event in Nottingham, UK). To demonstrate Model-Update-View, I think I'll start with the Counter example, but instead of in code, in real life. So I'd say "I'm a counter, I'm on 0. Increment and Decrement me." and end up with a room of people yelling "Up" and "Down" with me going "4! 5! 4! 3!". Then we'll code it.

Just thought your 14-16 yos might find that fun and illustrative.

On Tuesday, October 4, 2016 at 6:33:04 AM UTC+1, Fedor Nezhivoi wrote:

[Will White]

And if someone yelled "Five" I'd say

-- MISSING PATTERNS ------------------------------------------------ counter.elm

This `case` does not have branches for all possibilities.

36|>    case msg of

37|>        Increment ->

38|>            model + 1

39|>

40|>        Decrement ->

41|>            model - 1

You need to account for the following values:

    Main.Five

Add a branch to cover this pattern!

Or words to that effect.

[Fedor Nezhivoi]

Thank you for your answers.

@Javis, do you have any plans of having an English translation?

@Tanya, do you have any video recordings of your sessions?

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/DjsnRPfHYN8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Best regards,

Fedor Nezhivoi

[Janis Voigtländer]

2016-10-10 10:18 GMT+02:00 Fedor Nezhivoi <gyz...@gmail.com>:

@Javis, do you have any plans of having an English translation?

Unfortunately, from my side this is only going to happen if I give the course to a group of youths that speak better English than German.

But it might be possible to have a low effort translation using Google Translate. I just experimented and took a random instruction page from my course and sent it through Google Translate, and the result is remarkably good (see below). Moreover, all the code of the exercises is of course already in English rather than German.

Anyway, here is what Google Translate gives for the German instruction block below the code block on https://github.com/jvoigtlaender/Elm-Kurs/blob/master/pages/Counter.md. Pretty good (though not completely accurate, it’s still just a machine translation):

There are some things to explain:

We have to express what the “remembered state” should be at the beginning, if there is no past to remember. Since we want to implement a simple counter here, we use the number 0 for this.

We have to express how the state should change when an event occurs. This is done in the update function. It uses case … of … to make a case distinction on the event. Here, we will first react only to the event “Empty button was pressed” (space), in this case, increase the counter reading by 1.

To express that in any other case (when the empty key has been pressed), we will use the line _ -> state. Such or similar lines should always exist in the following.

In the scene function, the current state is now available as a further input and can be used to calculate the output (ie the display to be rendered). Here, we simply output the current counter reading directly. We ignore the current mouse position and time (also in the update function).

By means of the displayWithState function, we bring everything together.

Task: Change the above program so that the counter starts at 10, is increased by means of the arrow-up key and is reduced by means of the arrow-down-key, but never drops below 0. In addition, the empty button should now be able to set the counter to 0 at any time. (The left, up, right and down event names exist for the four arrow keys.)

​

[Fedor Nezhivoi]

Sorry Janis for messing up with your name, I'll be more careful in the future.

Thank you for translate suggestion. To be honest you always forget about this possibility when your language automatic translation is super bad.

--

You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/DjsnRPfHYN8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tanya Bouman]

No, we don't have any video recordings of our sessions.

Tanya