920723 - Implement new tutorial functionality

Status: RESOLVED FIXED

(Webmaker Graveyard :: Thimble, defect)

Description

[Brett Gaylor [:brett]]

Based on the results of user testing, implement the new tutorial UI

Comment 1

[Thomas Park [:tompark]]

Ran a survey in September asking about people's impressions of 5 variations on the tutorial design (along with HTML comments version):
http://thomaspark.me/mozilla-thimble-tutorial-prototypes/

Draft of the survey results here, which I'll eventually turn into a blog post.
https://docs.google.com/document/d/1G6DRaDMqo_qrNbzTNGOMaVuTBRt3UEcV-6qXZ-7VP6g/edit?usp=sharing

In a nutshell, Sidebar was most popular overall, and the design we're moving forward with.

Comment 2

[Thomas Park [:tompark]]

Attachment: https://github.com/mozilla/thimble.webmaker.org/pull/256

Comment 3

[Thomas Park [:tompark]]

Pull request for Thimble tutorials

The main code is in /public/scripts/tutorials.js
With this, web pages can be attached to a make by tagging with tutorial-[url]. This brings it up to speed with Popcorn.

The files in /public/tutorial/ can be used to extend the functionality a tutorial. Including tutorial.js and tutorial.css in a tutorial make will:
* Paginate sections with a navbar
* Hover line numbers in the tutorial to highlight them in the editor
* Click line numbers in the tutorial to smooth scroll to them in the editor
* Modify code in the editor and get updated line numbers in the tutorial

I have the two files hosted on aws for testing purposes:
//s3.amazonaws.com/thimble/tutorial.js
//s3.amazonaws.com/thimble/tutorial.css

And here's how they'd be used in action (sans any actual functionality):
Make: https://thimble.webmaker.org/en-US/project/20818/edit
Tutorial: https://thimble.webmaker.org/en-US/project/20817/edit

I also added localization strings in US, RU, and TH for "tutorial".

Comment 4

[Pomax]

Comment on attachment 818041 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/256

r- with probably an overwhelmingly large number of notes in the PR. Poke me if you want to walk through any of those with me

Comment 5

[Thomas Park [:tompark]]

Will work on Pomax's comments first.

Comment 6

[Thomas Park [:tompark]]

Lots of helpful comments from Pomax. Hopefully this commit addresses most of the issues.

tutorial.js and tutorial.css were moved to learning_projects, where they'll be accessible for webmakers to link to, and can be used as a tutorial starter make. The zombie test pages were removed.

I reformatted the inline html to be more readable, but didn't use templating. In the first case, the snippet is small enough. The other is in tutorial.js, which is intended to be used by webmakers, so I'd like it to be as streamlined as possible.

Comment 7

[Pomax]

Comment on attachment 818041 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/256

this is pretty <cencored> awesome, few more comments in the PR but this is going to rock both users and mentor's world when we land it.

Comment 8

[Thomas Park [:tompark]]

Update addresses second round comments.

Also:
* Added condition for handlers to return if line number less than 1 or greater than max
* Cleaned up logic for when line numbers are changed by code edits

Comment 9

[Pomax]

Comment on attachment 818041 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/256

you forgot to actually set someone as reviewer =P

Comment 10

[Pomax]

Comment on attachment 818041 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/256

we have won at least three internets with this. Very nice work!

Comment 11

[Pomax]

If you can rebase then I'll hit the merge button after

Comment 12

[Brett Gaylor [:brett]]

winsome!

Comment 13

[Thomas Park [:tompark]]

Done! What's the internets:£ rate nowadays? :D

Comment 14

[[github robot]]

Commit pushed to master at https://github.com/mozilla/thimble.webmaker.org

https://github.com/mozilla/thimble.webmaker.org/commit/ddeda502628055e063c5ccdcc19d5a32de3fdb94
Merge pull request #256 from thomaspark/bug920723

Bug 920723 - Implement new tutorial functionality

Comment 15

[Pomax]

it's roughly one galactic triangle per internet, btw. I don't think there's a pound sterling conversion