Creating multi-step problems with the Step Builder in Open edX
The Step Builder is a powerful XBlock that allows you to ask multiple questions in a sequence to build a single greater activity, rather than listing all of your questions at once, potentially overwhelming the learner.
Here's a basic example of how it works, similar to what we'll be building in the screenshots of this article.
This short quiz is made up of 4 steps - 3 questions and a summary. Before we can start adding steps, however, we need to enable the XBlock.
Note: This XBlock by default has a copyright message at the bottom of every instance of this XBlock. This message can be hidden using custom CSS, but the legal notice must appear somewhere else on your site, such as in your terms of use. Reach out to us if you would like assistance with this.
Enabling the XBlock
The first step is to add the XBlock to the list of Advanced Modules for your course. To do this, in Studio you first need to select Settings, Advanced Settings from the navigation at the top of the page.
Once you're there, navigate to the very first field, Advanced Modules, and add the short name for the step builder to the list of enabled XBlocks, either by itself or with a comma separating entries if there are any XBlocks already enabled (as shown below.) In this case the name you need to add for the Step Builder XBlock is "step-builder" (include the quotes). Make sure click Save Changes once you've done so.
Provided your formatting is correct, the Step Builder XBlock will appear as an option when you enter a unit and click on the Advanced button to open up the list of available XBlocks. If you have trouble at this stage, and you're an Appsembler customer, feel free to reach out to our Support channels, and we can help you with getting the XBlock enabled.
Once this is done, you'll see an empty Step Builder component. The Step Builder is very different from other XBlocks and components in that it has its own way of editing the contents of the XBlock, and many different combinations of sub-components. In this article, we're going to look at how to do the three steps shown above. We recommend experimenting with the Step Builder and reaching out to us if you get stuck with any of the other variations available, because there's a lot of depth to this XBlock!
The first thing we're going to do is set the Title and Weight of this activity, as well as limit the Attempts to 3, as we want to pose our learners a bit of a challenge. To do this, we click Edit on our initial view of the component.
Once we're in this view, we simply change the relevant fields. We're not going to be using Extended feedback in this example, so for now it can be ignored.
Now that we've set up our activity and Saved it, we head back out to Studio, this time clicking the View button to take us into the component itself. This takes us to a whole new page where our Steps live.
There are two types of step available to us. Mentoring Steps are our questions, while the Review Step is what appears at the end of our quiz. For now, we'll insert a Mentoring Step and Edit it to populate some simple data about the problem.
The only option that isn't fairly clear here is why the Show title (True/False) option exists (see animated gif below). Show Title is there because many of the components within the steps can have their own headings, and it's a bad idea to duplicate headings, or overload the learner with too many headings. You should show and hide your headings based on the structure of your step and how it looks in the live site.
Once you click Save, you'll have your step, and can click View to populate it with questions to answer in that step.
As you can see, there are a lot options available! In this case we're going to add a single Multiple Choice Question, though your steps can be populated with many components. We typically don't recommend going above 2 or 3, however, as it can be a confusing experience for the learner.
Once you've got a multiple choice question added, you need to View it, rather than Edit. This will save a small amount of time later, because Edit is where we set which options for this question are correct. We don't want to do that yet, because there aren't any options!
Once you're in, you'll see buttons related to your question type inside your question. In our case, we have Add Custom Choices, Add Tips and a Message (Review). As our choices are the most important thing in a multiple choice question, we've quickly added three of them here.
Editing these choices is a simple affair. Click Edit and change the only field you should edit, the choice value. There's also a choice ID but that's for reference in things like answer recap tables, and not necessary for our purposes. We don't recommend adding Tips, but instead use the Message (Review) function to display a message if the learner got the question correct.
You'll notice that the button becomes grayed out once it has been inserted. This is because you can only have one review message. Adding this message is a simple case of clicking Edit on the component and typing your message. You should probably add something a little more constructive than the message above!
This message only appears in our Review step, so try to make sure it makes sense out of the context of the question.
Now that our options are set up, we can edit the question itself. To do this, scroll up to the top of the page and click Edit in the top right corner. You can also do this by going back to the previous level and clicking edit there, Either way will bring up the same settings. This is true regardless of what level of the step builder you find yourself in. The Edit window should at this point be familiar to you - fill in the fields with what you want to see, and pick the answers you want to be graded as correct!
You can add multiple questions within a step, and even include some learning content such as a video or some text, but as previously mentioned this can be a confusing user experience. For now we're going to go back and add more questions the exact same way. To get back up the many layers of the step builder, click the breadcrumb trail at the top of the page after you've Saved your question.
From here it's time to add more mentoring steps. This process is the same for each, with a few fairly simple variations based on what type of mentoring step you use. (See ours below.) This article would be more like a course if we covered every single component type available in this XBlock, so give it a try and if you have any problems, reach out to our support for assistance!
Now that our questions are in, it's a good idea to finish off an exercise like this with a Review Step, so that learners can get a summary of how they did. Unsurprisingly, we do this by adding a Review Step from the step editor.
Review steps don't have any settings, so we skip clicking Edit and go straight into View. This gives you 4 options of component types to add to your review step.
- Conditional Message allows you to display a message to the learner based on a combination of 3 options for two conditions.
- Whether the learner got a perfect score, got some questions wrong or got any score (right or wrong).
- Whether the learner has attempts left on the activity, has no attempts left, or has any number of attempts (whether they have attempts left or not)
- HTML just lets you insert whatever HTML you want, as per the usual HTML component.
- Score Summary is a pre-configured block with no options that simply displays their score (it's very handy!). You can only have one of these.
- Per Question Feedback displays your feedback messages that you configured earlier - the Message (Review) component. You can only have one of these, and it'll collect your review messages from across the other steps.
Rather than walk you through step by step on how to type into a field (which hopefully by this point you're a master of) we're going to over-construct a review step that combines all of these to show you how they can be used. You probably don't want to go too overboard and do this every time, but this is just an example.
First, we're going to open with some HTML just to contextualize things:
Lovely. Next we added a few conditional messages for our learners:
Lastly we'll include the per question feedback and score summary components and leave them as-is, because we can't edit those.
Once we head back out to our original unit and hit publish, on completing our activity we're treated to something that looks a little like this as a learner who has gotten some questions wrong:
You'll notice that our review message isn't helpful here. This was deliberate (honest) because it demonstrates how important it is for you to review and test your multi-step problems in various states. Done correctly, this can create a great dynamic experience, but you need to make sure that every possible state makes sense for your learners. The obvious solution here would be to go back in and amend "this question" to "question 1" or something similar.
The step builder (and its parent XBlock, the problem builder) are extremely deep XBlocks with tons of potential uses and functionality that we can't hope to cover in full in this article, which is already far too long. Try them out and if you run into any trouble, reach out to us. If you're an Appsembler customer, we'll work with you to help you create the experience you're trying to build.