Tutorial interface redesign

TUTORIAL PLAN

Prioritized list of tutorial refresh items! I split each big phase into a few smaller tasks and pulled out the "ship-blocking" pieces to do first--the others are in the "If time permits" category. I plan on just working down this list in this order and getting as much done by September as possible. @abchatra @Jaqster @soniakandah

Needed to ship:

• 1. Tabbed view (vertical)

  • Move the tutorial card into a vertical tab view with the simulator
  • Show mini simulator (will be the same as current tablet simulator view) when the tutorial tab is visible)
  • Update the tutorial card layout (step counter, previous/next buttons, hint, exit tutorial link)

• 2. Horizontal tabbed view

  • Update the tutorial card layout for horizontal view (move buttons, etc)
  • Update the simulator tab for horizontal view (simulator toolbar updates)

Hoping to have by September:

• 3. Tutorial text/markdown changes

  • Title and icon for each step
  • Bulleted steps with icons

• Add "Back" button to modals

If time permits:

• 3. Tutorial text/markdown changes

  • Alert callout for tutorial text
  • Toolbox icons next to inline block names
  • Inline button and tile images
  • Clickable inline blocks - ability for students to click on a shortened Block name in the instructions and either see some sort of callout image of the block, or have the actual block highlighted in the Toolbox

• 1. Tabbed view (vertical)

  • UI changes in the simulator tab (removing the outline, simulator toolbar updates)

• 4. Dynamic mini game pad

  • Simulator button changes for mini simulator view
  • Bigger/playable mini simulator

• 5. Overall modal refresh