Hints

[scottgarner]

The plan for the hint windows involves a series of divs in /editor/index.html that will populate the hints area at the appropriate time.

We've been talking about putting a lot of stuff there, but I think they can work as scrollable divs if they have to. For now I started by putting a few notes in place in the code. @shiffman, if you can continue to do that when we get the videos, I can work with you to format everything appropriately for display.

[shiffman]

Sounds great. I can work on the content and refer stuff back to you for formatting, etc.

[scottgarner]

I'm not sure if you saw, @shiffman, but I added this to a milestone ending this weekend. The idea is just to have draft content everywhere in the site, so if you want to start with a few lines for each video based on your notes, that would be great.

[scottgarner]

@shiffman, I saw that you committed the first hint! It was a nice surprise to see something there after the video. A couple of things:

1) I made that area scroll if the content is too long.

2) If it would make things easier on you, I think I can quickly modify things so that you could write the hints in Markdown instead of fussing with HTML. That would potentially limit our ability to style with CSS, though I don't imagine there'd be a lot of styling necessary and you can always mix HTML and Markdown.

[shiffman]

Great, I would like to try to keep the content compact so as not to require scrolling but it may just be necessary in terms of the length of the content. I don't have a strong preference re: HTML vs Markdown so really whatever makes it best for you is good by me.

This should maybe go in a different issue, but I had a thought re the time question. What if we say something like "while you should feel free to work at your own pace, this tutorial is designed to be completed in one hour. You should spend ten minutes on this assignment. Click here if you would like to start a timer to keep track." This isn't exactly the right language, but wondering if this direction might work.

Thoughts?

[shiffman]

Also, for links in the hints, should I manually set a new window target or could this be set globally on the site?

[scottgarner]

1) I broke all of the hints into individual files in _includes and made a preview page, which will hopefully make things easier to manage while you edit. http://hello.processing.org/hints/

2) When loading the hint, the site will try to add target="_blank" to all of the hint links, so they should open in a new window.

3) I spoke too soon about Markdown. Jekyll doesn't natively support parsing MD in includes for some reason and GitHub pages won't allow plugins, so we're stuck with HTML.

[shiffman]

FYI, the hints layout "test" page does not scroll for me so I can only see as much as fits on one page.

[scottgarner]

Sorry! In fixing the iPad problems I had to do a weird thing that basically eliminated scrolling on the site. We can add it back if needed with some more templates, but I just fixed this with CSS.

[shiffman]

Ok, I now have draft content in for all of the hints.

http://hello.processing.org/hints/

Please feel free to review and make any changes / suggestions. @scottgarner should I experiment with using header tags or anything in terms of layout?

One question is whether I should think about including a little info on things we missed in the videos. For example:

• code commenting?
• noStroke() and noFill()?
• alpha?

Also, I need to finalize the timing suggestions once we see how long all the videos are . . and we should make sure the hints match up with the teachers guide #34

[scottgarner]

At a glance, they look great, @shiffman!

I'd say that at a minimum it would be nice to have an h2 around things like "Play with color!" and "Reminders". I can style those and break up the text a little.

[shiffman]

To start, I made each hint have an h2 title summarizing the exercise. I don't love all the language choices, but I think we can refine once we have the videos in there.

[REAS]

It's a great pass at it. Two things I saw that might be premature comments. 1) We should match the font to use Thesis 2) The restore code button is currently different from the language in the hints.

[REAS]

The body typeface for the hints should be Thesis.

[shiffman]

i also think that some of the nice styling in the guide could be applied to the hints. i can work on this today.

[shiffman]

I updated the hints with some of the styling from the guide.

http://hello.processing.org/hints/

comments, suggestions, etc. welcome.

[scottgarner]

@shiffman, the hints looks great overall except for the last one, which needs a header and some copy above the buttons, I think.

I fixed some formatting here and there, too.

[shiffman]

I added some text to the final hint, you can see here:

http://hello.processing.org/editor/#goodbye-4:00 25dfba4e929a925750b015c8b92aaa2d68dd8f99

@REAS, feel free to rewrite as you see fit.

@scottgarner small thing, but the http://hello.processing.org/hints/ page which I use to preview lost its styling.

[REAS]

I shorted the text to increase the chance it will fit in the box without scrolling. Thanks for adding the text.

[scottgarner]

Sorry about that, @shiffman. Should be fixed.

[shiffman]

These are all set now.