Description
Within my thesis on the 'future of learning Arduino'. I found that some of the main struggles for beginners are typing/understanding the Arduino specific jargon and syntax, and knowing what instructions exist (and are useful for beginners)...
In this proposal, we could make use of the draggable HTML feature to make code draggable from the reference (or perhaps a beginner specific cheatsheet based on the reference) that makes it easier to mix and match using dragging rather than typing. This idea is based on the awesome article by Bret Victor on learnable programming
This is of course not only applicable to Arduino but could be used for almost every text-based programming language for beginners. I could also see this being implemented as an extension for the current IDE; where it might be in the tools dropdown...
Here is a video, showing/explaining it:
This is not the most beautiful way of executing it (both from UX and programming perspective), but it's more a proof of concept. It is using the setData function: [https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData] that should be supported by most modern browsers at the moment.
document.getElementById("delay").addEventListener("dragstart", function (evt){
evt.dataTransfer.setData("text","\tdelay(1000); //usage: (milliseconds)\n")
})Some thought around how a UX would work best;
- Focus mostly (and have a page) on the functions that are crucial for beginners; mostly used in beginners code (digitalWrite, delay, digitalRead...)
- It would be really cool if it is integrated into the reference; since it will allow/invite students to dig deeper if they like.
- Perhaps this could also be a way to drag example code (or lines from it) from the reference; (I don't know how long text we can move; it's not clearly defined in the specs as far as I know).
- Show the code perhaps next to it; or on hover
- Perfect would be if it is coupled to some of the libraries (especially the ones used in Arduino education packages, CTC go! CTC 101...)
