Initial test scenarios

[rachel-fenichel]

The goal in the first phase of this project is to make it possible to complete introductory curriculum sequences using only keyboard navigation.

Each educational product has a different introductory sequence, but most involve creating between one and four stacks of blocks, with each stack containing between one and five blocks. (For example, here are the MakeCode + micro:bit introductory tutorials.) It is normal to teach sequencing, loops, and sometimes conditionals in these early stages. Usually there is a clear visual or aural output that a student can use to check their work.

For testing purposes we need to define a simple sequence that can be completed on the keyboard-experimentation test page. I propose this because it lets us avoid issues of integration (e.g. linking beta versions of multiple libraries together in order to deploy a beta of MakeCode that depends on a rapidly changing keyboard-experimentation plugin).

The test page has a canvas on the left side and a Blockly workspace on the right side, with a limited number of blocks in a simple (non-category) flyout.

Proposal

I propose the following introductory tasks, which may need new blocks.

Note that these examples use visual outputs. That's entirely based on what I know how to do with p5.js this week, and is not a hard requirement. I consider these tests relevant because they can equally apply to a student with a broken mouse or bad touchpad.

User tasks

1. Open and run the starter code, which will draw a blue background and a red circle.
   

2. Change the color of the background and the color of the circle, run the code, and verify the result.
   

3. Replace the color of the circle with a random colour block from the flyout.
   

4. Modify the code to draw a heart emoji in addition to the circle.
   

5. Modify the code to draw a bear emoji instead of a heart emoji
   

6. Modify the code to only draw a bear emoji, with no circle
   

Required capabilities

This sequence requires the following abilities. Where a discussion already exists, I've linked it to the appropriate action. We can create new discussions as needed.

• Open the page and run code
• Navigate between stacks
• Navigate within a stack to a target block
• Open a complex field editor (colour picker) and enter a new value
• Open a moderately complex field editor (dropdown) and enter a new value
• Navigate between blocks in the toolbox
• Add a new block to the workspace and move it to a target location in a stack
  • Note that this can be done either by choosing a block first or by choosing a target location first. Both should be investigated.
• Add a new block to the workspace and move it to replace a shadow block
  • Note that this can be done either by choosing a block first or by choosing a target location first. Both should be investigated.
• Delete a block

Future work

Obviously the list above is not exhaustive. handling text inputs and creating new top-level stacks are clear requirements that can follow from this initial work. Conditionals and loops (c-shape and e-shape blocks) are also often introduced at an early stage.

[microbit-lucy]

This looks great. I would be really interested to see those blocks in the experiment so we can walk through the test scenario end-to-end. I have shared it with our education team in case they have other thoughts to share but we will start to put together a test plan for user testing at the end of October/beginning of November based on this. Thanks.

[rachel-fenichel]

#58 tracks updating the page to be accessible to you.