20 Adding Media and Interactive Activities to an Annotation

I want to include four components in this annotation:

1) A short text

2) A multiple choice quiz

3) An image

4) An essay question

The first thing I will want to do is make sure I navigate to the published version of my chapter.

We’ve set Hypothes.is to be automatically enabled in this textbook, so when I view the chapter I have created, an annotation pane should appear on the right-hand side of the screen.

Next, I want to make sure I am logged in to Hypothesis.

I’ll click “log in,” and if I’ve told my browser to remember my password in the past (as is the case in the video below,) Hypothesis should log me in very quickly. If this doesn’t automatically happen for you, you’ll simply enter your username and password.

(Authorize Hypothesis Video Link)

This next part works best if I have two tabs or windows open at once. In one tab, I’ll keep the published chapter and annotation pane open.
In the second tab, I will open my Pressbooks Dashboard for the text I am working on.

When I select the text I want to be the subject of my annotation, two options should appear: Annotate and Highlight.

I’ll click annotate.

(Annotate Hypothesis Video Link)

Adding a Multiple-Choice Quiz to an Annotation

(Multiple Choice Annotation Video Link)

Next, I’ll add some text and a multiple choice quiz to this annotation.

I’ll copy-paste the text directly into the annotation editing window.

After this, I’ll switch to that second tab I kept open so that I could access my Pressbooks Dashboard while editing my annotation.

I will use the left-hand menu to select the “H5P activities” menu item. Because I’ve prepared my multiple choice quiz in advance, my quiz will show up in my “all H5P content” list.

I will select the quiz in question and a preview version of that quiz will appear on my screen. At the bottom of my preview is an option titled “embed.” I’ll select this and copy the resulting text.

I’ll navigate to my annotation tab and will paste this code directly into the annotation editor.

Once I click “Post to Public,” this code will convert into my multiple choice H5P activity. You can always go back and edit your annotations by clicking the pencil icon on the bottom-right of each annotation, so it is fine to save this now and come back later.

Adding an Image to an Annotation

In this case, however, I know I want to add an additional image and activity to this single annotation. Because I have already uploaded my image to the Pressbooks media page and created my additional H5P file, I can continue on to add more media.

I will navigate back to my Pressbooks editor page and click on the “Media” section of my left-hand menu. I’ll click on the image I’ve uploaded for this annotation.

(Annotation Images Video Link)

The process of uploading images or audio to an annotation is different from the process of adding an H5P activity. What I need from this screen is a link to my image url, which I will find listed on the right side of the page.

I’ll copy this address and switch back to my annotation tab.

Next, I’ll click the photo icon in the annotator editing pane. This will insert a snippet of text that will direct me to paste my image’s address between a pair of brackets. Once I have published this annotation, the image will appear.

Adding Another Activity to the Same Annotation

Finally, I want to add that second H5P activity just below the image I have inserted. I will follow the same steps I took above and will paste the embed code directly below my image url.

(Activity Annotation Video Link)