Adding images to a problem in Open edX

So, you want to make your problems a little more... interesting with some images? That sounds great, here's one I made earlier:

In this article, we're going to look at how this was made, and how you can make your own image questions. But first...

An Important Note on Accessibility

If the answer to your question is an image, it immediately becomes harder for users of assistive technologies to answer. Whether they're using screen readers or just generally a bit short-sighted, always ensure an image question is actually appropriate for the question. In this example, I've got a question that can only be practically asked and answered visually - a sightless user has no idea what icons are typically in use, because they aren't presented with icons. This might be a visual design course, or a UX course targetting sighted users. That doesn't make it OK to use images for everything, and in this example I'm still going to talk about using Alt text to ensure this question can at least be answered without sight (even if the question itself is inherently flawed due to the subject matter). But just please, bear it in mind when you're designing your questions.

Soapbox over, let's make a question.

1 - Upload your images

First up, we're going to need images uploaded to Files & Uploads. You'll find this in the menu at the top in Studio. I recommend keeping Files & Uploads open; you'll need it a few times. I'm going to very quickly cover this and not draw it out, as this isn't our article Inserting images in Open edX courses.

To upload images, hit the Upload New File button in the top right. once your images are uploaded, you'll be able to grab the Studio URL, which begins with /static/, in order to refer to your images later.

2 - Create your problem

Next we need the shell of the question that we're asking. Again, this isn't our article Adding a problem to your Open edX course so I'm not going to go into a huge amount of depth here about problem types and the actual creation of the problem. Feel free to check that article out if needed, I can wait. Let's say in this case, it's a multiple choice question. That looks like this in the problem editor.

Looking good! Oh, right, it needs answers. Now we're set up, we can actually get to the point of this, which is inserting our images.

3 - Insert the images

It's a little-known fact that HTML works in the basic problem editor. I was surprised myself. Even if you don't know HTML, images are extremely simple to insert. Meet the <img> tag.

In the example above, I've inserted the following code:

	 <img src="/static/Bug.png" alt="A Bug"/>

This tag (enclosed by chevrons <>) has three parts to it:

img - this tells the browser it's an image.
src="/static/Bug.png" - Remember your Studio URL from earlier? That's what goes here. The 'src' is the 'source' of the image.
alt="A Bug" - This is alternative text for screen readers and people who for whatever reason are not able to see or load images. This is vitally important for them to be able to complete this question. If you want a hand with image descriptions there are two tips I find helpful - Describe it the way you would to someone on the phone, and check out this article by WebAIM. Just try to keep it to a single sentence if possible.

By their powers combined, we have a complete image tag. So for each image, all we have to do is take that code, switch out the src attribute to the correct image, and give it a new description. In my case, here's how it looks:

Bonus Round - Succeeding with image questions

Make sure an image question is appropriate and not just images for the sake of images. It'll take most learners a few seconds to answer a question, it's just not worth it unless the images themselves have inherent value to the question.
Make sure your images aren't huge. Both in terms of file-size and dimensions. Large images may look strange presented as a question, and will be a nightmare for mobile users to scroll through. If the file size is too big, then anyone on a slow connection or a mobile device with a metered data limit isn't going to like you much. There's very few reasons for an image in a course to be over a megabyte in size, and even that's massive.
Ask for help. If something doesn't look right, and you're on a Tahoe trial or a customer of Appsembler, just reach out! We're always happy to help you get it sorted out. There's no reason to suffer in silence.
Don't forget to publish. Yep. If you can't see it live, make sure you remembered to publish your draft. It happens.