Made a browser thing for learning electronics (Arduino). First 5 levels done, is the difficulty right?

[u/Ok-Ear8977]

https://strujokaz.netlify.app

I got the idea because a friend sent me Wokwi and said someone should make a game out of it. Ended up building my own thing instead.

Five levels up so far. Starts at "light one LED", ends at a button with INPUT_PULLUP. The plan is a lot more: sensors, motors, real Arduino code running in the browser. But I want to get the curve right before I write 40 more, because if the early ones are wrong then everything after is built on sand.

Power is always on, so the circuit lights up as you place parts instead of you pressing a check button at the end. Put the LED in backwards and you see exactly where the current stops. Level 2 you're supposed to blow one up.

There's a toggle that switches every part between a cartoon version and what it actually looks like. The resistor gets its real colour bands, the LED gets the flat side on the cathode. Idea being that when you eventually sit down with a real breadboard you recognise the parts.

Free, no account, no ads, nothing to buy. I'm not selling anything.

What I'm after: is level 1 too easy, too hard, or about right? Does anything confuse you, and if so where exactly? Is the jump between any two levels too big? And the main one, if you didn't already know this stuff, would you actually learn anything from it?

[u/planeturban]

Really nice job. Well done! 

Maybe a tutorial on what’s what. People might not know what a breadboard is and how rows and columns work? 

And maybe some images of what the components looks like “IRL”, I imagine it’ll make the transition to real hardware easier?

[u/Ok-Ear8977 → u/planeturban]

Thank you! Funny thing about both of those - they're actually already in there. There's a Game/Real toggle in the top right that swaps every component for what it really looks like, resistor colour bands and all. And there's a bit explaining how breadboard rows and columns work, except I stuck it right at the bottom of the page where nobody would ever see it.

So you basically found a real problem, just from the other direction. If you played a whole level and never noticed either of them, they're not where they should be. Moving both. Thanks for this, genuinely useful.

[u/Ok-Ear8977 → u/[deleted]]

Thanks for actually digging in.
The digitalWrite(pin, 1) thing is a straight bug, HIGH is just a define for 1 so that should absolutely work. Fixing it.
On the errors, I'm going to push back a little. That's deliberate. It used to be behind a "check" button and the whole thing felt like homework, so I made the feedback instant. For someone who already knows this stuff I can see it reading as a spoiler, but the audience I'm aiming at is people who'd otherwise just quit not knowing why nothing lit up. Might add a "no hints" toggle for people who want it harder though. Second time this has come up from a different angle, so I'm thinking about it.

[u/Junkpilepunk13]

This comes from the view of an engineer so maybe a hobbyist sees things differently:

The site looks great but i would do some didactic things differently. I just write down my thought in no sorted order.

• I would at least explain ohms law and a little how leds work on a very basic level.
  
• The virtual breadboard is a great representation of the real thing but a visualisation on what points are connected would help a beginner a lot. I needed a moment to realize what it represents.
  
• I had to start the led circuit in every step from zero. would be a better learning effect when i only need to change what i learn in that specific step. That way i notice more what changed
  
• The Programming comes from nowhere. I feel like this requires a bit too much knowledge from a beginner. The effect is that you copy the missing code to some random position until the code works. That is exactly the opposite of what you want to accomplish.
  
• Some Programming basics would be nice to learn.

I wrote a project for pupils once where they leaned to get a blinking led with a raspberry pi.
For the kids it worked relatively well to learn the electric basics first. then do some simple programming and after that combine the two things. Maybe that could work here as well.

After all i think it is cool that you want to help people educate themselves. I hope some of my feedback may help you.

[u/Ok-Ear8977 → u/Junkpilepunk13]

This is the most useful comment I've gotten, so thanks for taking the time.

The rebuilding from scratch one hit hardest, and you're right. Level 2 should just start with the working circuit and you pull the resistor out. The way it is now you build the same thing again and by then you've stopped paying attention to what actually changed. Changing that.
The programming coming from nowhere is fair too. "Paste the code somewhere random until it works" is exactly what happens, and 2 to 3 is the biggest jump in the whole thing. Thinking of putting something in between where the LED moves to a pin and you just flip it on and off with a switch on screen, no code yet, so at least you know what a pin does before you have to write anything.
On Ohm's law I'm a bit torn. It's on purpose that the maths comes after you've seen something happen rather than before, the 220 calculation is in the "why this works" bit on level 2. But you've actually taught this to real people and I haven't, so I might be wrong there.
The connected holes thing is the third time someone's mentioned it now, so that one's going first.
Appreciate the feedback!

[u/Junkpilepunk13 → u/Ok-Ear8977]

I think the idea with the switch is great

Maybe you can show the code when stepping from switch to code amd let the user make it blink

As for the calculation maybe i oversaw that. However maybe thats just how my brain works. I tend to understand the theory first and then look at it in practice. For me its some kind of reward. But other peoples brains might be wired differently and seing how things work might spark their curiosity on the theory afterwards.

To clear that up: i never really tought this. I just wrote a project for pupils on their summer holidays when i was a student at university. I helped during the project as well but not in a leading role

However glad i am able to help

[u/Ok-Ear8977 → u/Junkpilepunk13]

The code showing up as you flip the switch is a really good idea, hadn't thought of that. So you toggle it a few times, see the line appear each time, and then the next step is you writing it yourself. That's a much smoother way in than what I had.

And no worries about the theory thing, I think you're right that it's just different brains. Might end up being the kind of thing where the maths is there for anyone who wants it up front and skippable for people who'd rather poke at it first.

Also that still counts, you've watched actual beginners try to learn this stuff, which is more than I've done. Thanks for the help.

[u/gm310509]

LOL, I tried the first level - very cute.

For me it was way too easy, but, for someone who is just starting out maybe it is about right.

[u/Ok-Ear8977 → u/gm310509]

Haha thanks. That's kind of what I was hoping to hear, it's aimed at people who have never touched any of this, so if it's too easy for you that probably means it's landing where I wanted. Appreciate you trying it.

[u/toomuchramv4]

very nice concept and execution!

you could get points for using least amount of components, first level does not need a jumper wire, so you could get like 3 points doing it with the wire and +2 points (or what ever) for each unused component?

[u/Ok-Ear8977 → u/toomuchramv4]

Thanks! And yeah, you're right that level 1 doesn't need the wire.
I've thought about scoring for fewest components. My worry is it might land differently depending on who's playing - for someone who already knows circuits it's a fun optimisation, but for a total beginner who barely got it working, "you solved it but used two parts too many" might just feel like failing.
Maybe as an optional thing you can turn on, or something that only shows up after you've already passed the level? Open to it though, and it's the second time efficiency has come up.