Learning JavaScript with Cue

By Bianca Rivera / Programming / June 2019 Issue

Meet your new favourite robot pal and learn how to code in JavaScript.

Wonder Workshop made waves with their first CleverBots, Dash and Dot. This chirpy duo introduced block coding to kids using Google’s Blockly. Wonder Workshop has now brought our little blue friends’ older, smarter sibling on board – Cue. Cue includes all of the features fans have come to expect, including sensors, lights, programmable buttons, microphones and speakers. Cue is a step up from its predecessors though, teaching users the in-demand text programming language, JavaScript.

Utilizing Microsoft’s free app, MakeCode for Cue, users can tackle well designed coding challenges. Lessons start users with block coding but swiftly transition to real JavaScript. Being thrown into the deep end works well as scaffolding is utilized in the 50+ tutorials. When a user hits a stumbling block, they can flip between block and text coding to visually compare what’s happening with the code.

Inside the MakeCode for Cue app, users can find a Challenges button. Clicking on it displays block and JavaScript lessons split into three major units. Lessons progress in difficulty, taking users from simple sequencing to JavaScript fundamentals including events, loops, functions, variables, conditionals and arrays. Most lessons start with block coding but by the end of each lesson, users are typing JavaScript code.

As soon as lesson 5 in Unit 1, users are introduced to JavaScript, where they will make Cue move and turn. Users can easily see how block and text accomplish the same task at the click of a button.

In Figure 2, block coding programs Cue to move 25 centimeters at the speed of 20 centimeters a second. The block coding also results in Cue turning 90 degrees after each movement.

In Figure 3, the JavaScript equivalent of the block coding produces the same movement and turns: actions.move(25, 20) = Cue moving forward 25 centimeters at the speed of 20 centimeters a second; actions.turn(90) results in Cue turning 90 degrees.

Another fun challenge includes changing Cue’s facial expressions when he’s picked up (or she, depending on the Avatar selected). Possible JavaScript code would look like:

events.whenPickedUp(function () {
    actions.setFacePattern("'111111111111'", 255)
})

Users could also try changing the 0s and 1s to ‘101010101010’. What do you think would happen?

For the adventurous user that wants to forgo working through the challenges and jump right into coding, they should go directly to the menu. The menu options include Actions, Events, Control, Variables, Functions and Math (Accessories are extra). An advanced feature of the MakeCode for Cue app is providing auto code completion for JavaScript programming – especially handy for beginners that will benefit from seeing a menu of options. And if the inevitable syntax error occurs, Cue politely lets the user know to try again.