How to lay out a lesson

[olizilla]

Here's what I'm working towards for the layout for a proto.school lesson... I'd like to split the text into "the lesson" where we teach some concept, and the "exercise" where we pose a coding challenge. Ideally we'd also add in a glossary of terms that we're introducing as well (a stretch goal ;-)

[olizilla]

Adding an instruction below the editor box gives a place to put feedback after validation:

Initial

Wrong answer

OOH YEAH

[olizilla]

Also rather than embedding the IPLD explorer this simplifies things be just offering the options to open it in a new tab.

[mikeal]

Love it.

How do we define content that sits in the glossary vs exercise vs lesson?

[olizilla]

Probably just 3 separate .md files.

• 01.md - Required, ideally contains instructional text that explains a concept.
• 01-exercise.md - Optional, goes in the box above the editor, defines the requirements for the coding challenge.
• 01-concepts.md - Optional, shows up in the box out if present. This can just be markdown too. We could make it structured, but let's just do the simplest thing to start with.

[mikeal]

Ok, I've added exersize and concepts properties alongside text which operate the same (they get passed through markdown and inserted into the page if they are there).

It still needs to be styled. I'm using the properties in Basics/01.

[terichadbourne]

@olizilla @mikeal Should this issue still be open or do you feel that it's been resolved?

The only thing I notice at first glance as a difference between Oli's screenshots here and the live site is that hexagonal "You Did It" badge in yellow appearing at the top right of the exercise box. Do we want that, or some version of that in a simpler form (for example, a trophy emoji built into the success message that appears in the green bar, or just want to make sure our success messages give people warm fuzzy feelings?

[terichadbourne]

Oh, just realized that the 'reset' button has also not been implemented (see related issue #13). Is there a branch where that code already exists but hasn't been merged to master? Or has the task not been tackled yet?

[mikeal]

I think it just hasn't been tackled yet.

[terichadbourne]

Okay, so creating a reset button is still on the to do list. Do we feel strongly about adding that "You did it" hexagon @olizilla proposed? Anything else from this issue that still needs building?

Action items:

• Make reset button that clears anything you've typed in the exercise box, resetting it to its original state.

[mikeal]

Rather than having a "reset" button, can we note that we've loaded code from a saved state and the present a reset link/button in the text?

It's not super clear in the current mocks when we're in a saved state or not.

[terichadbourne]

If we're talking about having an actual saved state that we're choosing to abandon, rather than just deleting the never-saved changes we've made in the text box, let's move the convo over to issue #13, where I've asked for some related suggestions on how to approach this. I'll copy your question over there @mikeal.

[terichadbourne]

Closing this one as all of the features proposed in this issue have either been implemented already or are in the works as part of issue #13 and WIP PR #86 (which relate to saving state).