A simple Worksheet activity for Open edX

4 min readSep 5, 2021

In our training courses, we often use activities in which students practice what they have learnt by filling in worksheets that aid them in structuring their ideas. These activities are not graded, although they may be shared for feedback from other students or course facilitators.

A worksheet can have a very rich structure, for example, it could be:

A project checklist
A business model canvas
A story outline template

In moving our training online (using Open edX), we have created an open source XBlock that allows course authors to create a worksheet of any structure using HTML/CSS.

Creating a worksheet

A very simple tabular worksheet will be used as an example:

The orange and dark grey cells are static content of the worksheet. The student fills in the light grey cells. Any number of rows can be added with the + button.

The HTML fragment for the above worksheet is:

<div>
    <div class="xbt-table">
            <div class="xbt-row">
                <div class="xbt-cell header"></div>
                <div class="xbt-cell header">Name</div>
                <div class="xbt-cell header">Description</div>
                <div class="xbt-cell header">Duration</div>
            </div>
            <div class="xbt-row">
                <div class="xbt-cell header">Example</div>
                <div class="xbt-cell static">Design</div>
                <div class="xbt-cell static">Design the outfit as a sketch</div>
                <div class="xbt-cell static">6 hours</div>
            </div>
            <div class="xbt-row repeat">
                <div class="xbt-cell header">Activity</div>
                <div name="name" class="xbt-cell input">Enter the name</div>
                <div name="description" class="xbt-cell input">Enter the description</div>
                <div name="duration" class="xbt-cell input">Enter the duration</div>
            </div>
    </div>
    <div id="buttons"><p>You can add and delete more rows to the worksheet</p></div>
</div>

The HTML uses the class input to define a cell elements into which a response can be added. Each cell element must have an attribute name that will be used to identify the part of the response that is stored in the student state.

This is all that is required to make a worksheet. The rest of the HTML is simply there to create the visual structure of the worksheet and can be any valid HTML. The CSS for the above template can be found here.

Repeating sections

In the above example, we allow students to add any number of “activity” rows to the worksheet. Any element of the worksheet HTML can be marked with a repeat class that indicates that the student can duplicate this HTML element an arbitrary number of times. Currently, only one repeat element can exist per worksheet.

When a repeat section is used, an element with id buttons must be defined. The “Add” and “Delete” buttons for the repeating section will be inserted as children of this element.

Under the hood

In order to style the worksheet, it is necessary to understand how the worksheet input elements are structured. When the worksheet is rendered, elements are added to each input element to capture and display the student responses. For each cell of the worksheet a <textarea> element is added for editing the response in that cell and a <pre> element is added for displaying the response (which may have multiple lines). Typically, only one of these is visible at a time depending on whether the student is currently editing that cell. An example of how this would look for the name input in the above example is:

<div name="name" class="xbt-cell input">
    <pre class="visible">Enter the name</pre>
    <textarea placeholder="Enter the name"></textarea>
</div>

The visible class is applied as a toggle between the <pre> and the <textarea> depending on which of the pair is visible.

The CSS for the worksheet can style these elements as required.

To assist with styling, a value class is added to the cell when the student has entered a response:

<div name="name" class="xbt-cell input value">
    <pre class="visible">My response</pre>
    <textarea placeholder="Enter the name"></textarea>
</div>

Using the worksheet XBlock

The XBlock can be added to Open edX from the git repo https://github.com/imsimbi-training/xblock-worksheet.

In the studio, the XBlock offers these settings:

We have not used the HTML editor in Studio, because it is not rich enough for the structure of the worksheets that we create and because we want to maintain an external library of worksheets (HTML and CSS) that are easy to reuse across courses. For this reason, the HTML and CSS are simply URLs to the content.

Where to next

We will add functionality to allow students to share their worksheets with others on the course, similar to the freetextresponse XBlock.

We would love to hear your feedback on the usefulness of this XBlock and any ideas to improve it.

See the source code here.