A few days ago, there was a question in the Articulate eLearning Heroes community about using grouped objects in drag-and-drop interactions. It may be tricky to align grouped objects to drop targets, but technically you can use groups in D&D interactions.
This week’s eLearning challenge reminded me of that question and I decided to try this myself. For my experiment, I built a ‘mini-simulation’ of an iOS app called DroneBlocks.
DroneBlocks is an interesting initiative to introduce programming in STEM education. The neat thing is that “programming” doesn’t mean typing traditional Javascript or C++ syntax, but use logic blocks to visually create a set of instructions. Using the DroneBlocks iOS app (there is also a Chrome extension available) you can program a drone’s flight path within minutes; simply drag-and-drop the blocks, set some parameters and off you go flying a drone!
I had played around with DroneBlocks and a DJI drone a while back and really liked the simplicity of the app. For my Storyline experiment the challenge was that most of the drag objects (blocks) have at least two elements that need to move as one; a bitmap and at one number entry field. Some blocks have two num entry fields. The DroneBlocks interface also has several tabs along the left side. Each tab shows a group of related blocks.
DroneBlocks is very easy to learn, all you need is a quick demo from an instructor and you can start programming. For an eLearning interaction, I thought it may be a good idea to provide some guidance on what to do. I added a panel on the right with the steps for a simple exercise. The step markers provide visual feedback; blue indicate the current step, yellow means a step is still incomplete and green signifies a complete step. I also added placeholders that show where to drop the blocks.
See the finished test here, with the first two steps enabled. As always, I also tested the HTML5 output on a mobile device.
Test of a mobile device
The nav buttons on the left, the sliding panel on the right and the d&D functionality work as expected. However, tapping a num entry field didn’t bring up the onscreen keyboard. That made it impossible to get past the first step. I tested on two Samsung Galaxy phones. If you can use the text entry on other devices let me know.
With the HTML5 output on mobile devices not working correctly, I would call this a (half) failed experiment.
Michael, thanks! And thanks for sharing your great posts every week!