A Template for Worksheets

Introduction

You can have all the text you like, even inline code.

Sometimes it's very handy to expose your text and use 'asides' for remarks that shouldn't appear within the text.

And you can expose concepts, or lessons to be learned interactively, like below. This will not clutter your websheet and the learner may explore the concepts at will.

I am within a block-level element belonging to the generic class, so I can be expanded and collapsed using the button.

My text property determines the label on the button.

I belong to the same generic class so we are automatically grouped together.

And you can even nest these things!

I am initially expanded, because I also belong to the active class.

What you can do with code

You can have prettified code: 

        
            This is a line of code.
            With another line following.

You can explain parts of the code. 

        
            This is a line of code.
            With another line following.
This explains the first line.
This is a general remark, an 'orphan' explanation.
This explains the other line.

And you can highlight code, or mark it as inserted or deleted.

        
            This is a line of code.
            With another line following.
            It can go on (almost) forever.

Hints and questions

When you ask the learner to perform a task, you can give hints, or even provide a solution.

This is a hint.

This is also a hint.

Hints can contain code (or whatever else you like).

            
                This is a line of code.
                With another line following.
And this is a complete solution.

You can pose questions to the learner.

There can be different types of questions, and there can also be feedback.

There can be only a single correct answer to this question.

There can be multiple options that should be selected for this question.

Here's an open question.

You can provide hints.
Or a complete answer.