Tutorial interface redesign

[shakao]

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:

• [x] 1. Tabbed view (vertical)

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

• [x] 2. Horizontal tabbed view

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

---

Hoping to have by September:

• [x] 3. Tutorial text/markdown changes

  • [x] Title and icon for each step
  • [x] Bulleted steps with icons

• [x] 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

[Jaqster]

And I'd like to add an item to the "If time permits" section:

• [ ] Clickable inline blocks - this is the 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.