I’m excited to share a demo of a new educational game, entirely created in Elm. This game is designed to teach children functional programming through a visual language called Link Lang (implemented in the game). The core idea is to get folks writing and using their own functions as quickly as possible, making coding engaging and accessible.
In the game, learners program a robot to solve puzzles and collect energy cells, while defining their own functions in a visual editor.
The ambition is to introduce functional programming to young learners.
Visual Language - Link Lang: Simplifies coding concepts, allowing kids to visually manipulate and understand functional programming constructs. It has basic types, type inference, function calling, etc.
I am trying to figure out what to prioritize next, and would really appreciate any advice on the following:
Game Design: Anything feel off or confusing with the UI, errors, language, or concepts?
Learning Curve: Is there a point that feels like too big of a jump in difficulty? Or anything that feels too slow? Is adding more similar levels a net negative or positive?
Future Directions: What additional features or concepts would you like to see? How can the game be further refined to better serve its educational purpose?
Spoilers - Full Game playthrough
Recording of me doing the levels (from an earlier version). Ideally you would try each level first, though .
This looks really nice. Well done. Great too see educational games like this.
I played it a couple of times, here is my feedback.
Defining functions is confusing. If you dont read the instructions carefuly. which I didn’t on purpose. It is very hard to figure out how to define a function. I had to reset the game an read the tutorial with more attention. I think that being able to do figure out things without reading a tutorial carefuly is important.
When defining the function it is possible to miss the () when selecting. Is this intented for later? You get a return type error.
The two buttons next to play (reset and back) are unclear on what they do, a hover or label would be great. I figured out what they do later, but should be clear much earlier e.g. reset code and remove step.
When resetting the robot doesn’t reset. It should probably reset along with the code. As your code will need to adapt with the new state of the robot, which makes learning by trying and fixing harder.
I would like to see what a function does after defining it. i.e. click on it to see the code that I saw when creating it.
I can put more steps in the editor than needed. As soon as the robot hits the battery, the level is complete, ignoring the extra steps. I thinks this can lead to people spamming the level.
I never used the negate to complete the level, I just used turnRight three times. Maybe there should be a check that you actually used the intented introduced concept.
In my second playthrough the game didn’t work as intented. After hitting start over. I didn’t allow me to move levels. I had to refresh the page.
I like that the game moved slowly, not rushing into teaching or using function arguments yet.
This is super helpful feedback, thank you! I’m working on a spotlight effect that will explain the feature broken down into discrete steps. More forced clicks, but should be quick for each one.
Ah, yeah that is how I’m currently imagining binding an argument in a function (if you try clicking the unit when defining a function then it allows you to choose a name for your argument). Still WIP, though and not intuitive at all.
I also noticed that you can just bind a unit by itself, so probably need to handle both of those cases.
Will do! I saw something nice in a book about microinteractions where you start with it written out and slowly shrink the text as the user gets used to the system, so maybe will try something like that.
My original thinking was trying to get users to write more (smaller) functions over bigger (more correct) ones.
I’ve also heard the opposite user feedback as well (that they like how it doesn’t start you over).
I’ll try adding a (hard) reset level in the top corner.
Heard. Not sure what to do about it, yet, though.
I kind of love it TBH. I added a “test harness” that asserts that the user has defined a function that will allow them to not get blocked later (just based on behavior of the function). I’ll think about how to test the internals too.
Not sure on this one. Do you mean that it forces you to redo all of the levels again (intended)? Or do you mean that the feature was just broken? I did add the feature the morning I posted this (so likely a bug on my end) .
TY! I am going to try breaking it down further as well.
Awesome ideas! I will look into these. Currently imagining a persistent log that can be inspected (with builtin hyper links to the tutorials).
I’ve wondered how to do edit’ing and haven’t landed on a solution I like just yet. I was planning on adding the ability to delete a function and show a created function soon (which then you could “edit” in a cumbersome way). I can definitely see the value if you accidentally mix up turnLeft and move1 and just want to swap them real quick.
.
I kind of love it TBH. I added a “test harness” that asserts that the user has defined a function that will allow them to not get blocked later (just based on behavior of the function). I’ll think about how to test the internals too.
.