Studio Session – Getting Further into h5p

Reusing and Remixing

Embedding

11 STEPS

1. Navigate to any completed H5P element and click Rights of use (if you do not own it) to check if you have the right to embed this element

Step 1 image

2. The license is CC BY, so we can reuse this element as long as we give attribution. Click Close

Step 2 image

3. Click embed

Step 3 image

4. Copy embed code

Step 4 image

5. Open website (for example Canvas) where you want the H5P element to display and click Edit

Step 5 image

6. Click Insert

Step 6 image

7. Click Embed

Step 7 image

8. Paste the Embed Code

Step 8 image

9. Scroll down and click Submit

Step 9 image

10. Scroll down and click Save

Step 10 image

11. That’s it. You’re done.

Step 11 image

Here’s an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/1921202/H5P—Embed-Guide

Copy and paste within authoring tool

12 STEPS

1. Copy Option 1: On a completed h5p element within your h5p authoring tool, click Reuse

Step 1 image

2. Copy Option 1: Click Copy content

Step 2 image

3. Copy Option 2: Within the question editor, click on copy at the top of a question

Step 3 image

4. Copy Option 3: Within a question with several components (for example question set) press copy at the top of an individual element

Step 4 image

5. Paste option 1: Click Add New

Step 5 image

6. Paste option 1: Click Paste

Step 6 image

7. Copy option 2: Click Add New

Step 7 image

8. Paste option 2: Select any Content Type

Step 8 image

9. Paste option 2: Click Paste & Replace

Step 9 image

10. Paste option 2: Click Replace content

Step 10 image

11. Paste option 3: Within an H5P element that allows for several content types such as Question Set or Interactive Video, click paste where you want the element to appear

Step 11 image

12. That’s it. You’re done.

Step 12 image

Here’s an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/1921250/H5P—Copy-Paste-Guide

Download .h5p file

10 STEPS

1. On a completed H5P element embedded anywhere, click Rights of use

Step 1 image

2. Check the license to see if you are allowed to reuse and/or remix the content. Click Close

Step 2 image

3. Click Reuse

Step 3 image

4. Click Download as an .h5p file

Step 4 image

5. Click Add New in your H5P authoring tool of choice

Step 5 image

6. Click Upload

Step 6 image

7. Click Upload a file and select the .h5p file from your computer

Step 7 image

8. Click Use

Step 8 image

9. Edit the question if desired, then click Create.

That’s it – you’re done!

Step 9 image

10. That’s it. You’re done.

Step 10 image

Here’s an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/1921260/H5P—Download-and-remix-guide

Essays

Resources: Essay

We will work together to recreate the question below

Use the following information to recreate the above element

Title: Adapting others h5p content

Task description:

Suppose that you find an h5p element embedded somewhere and you want to use it in your course, but need to make a few small changes. What are the steps you need to take after finding the content to update it and get it into your course?

Help text

The first step you should take after finding h5p content that you want to use in your course is

Introduction

You were not expected to come up with this exact solution – this is just a sample. Your answer should, though, include the same key steps.

Sample solution text

Upon finding h5p content that you want to adapt for your course, the first step would be to check if the content’s license allows for you to reuse and remix it. You can do this by clicking “Rights of reuse” and checking the details of the license. If the license allows, you can click ‘Reuse’ on the content to download the .h5p file. Next, you can upload the .h5p file to wherever you author h5p content and make the changes that you need. Make sure to include attribution to the original author in the metadata, if required by the original license. After adapting the content, you can embed it in your course using the embed code. 

Keywords

First Keyword: Rights of reuse

Variations: license*, creative commons, cc

Feedback if keyword included: Yes – you should always check if content is licensed for reuse and adaptation before copying and changing anyone else’s content.

Feedback if keyword missing: How can you check if it’s okay to reuse and remix this content?

Second keyword: download*

Feedback if keyword included: Yes – if you click ‘Reuse’ then you can download the .h5p file.

Feedback if keyword missing: How could you get a copy of the question that would allow you to edit it?

Third keyword: upload*

Feedback if keyword included: Yes – you can upload the .h5p file to your own h5p authoring platform to reuse and adapt the content.

Feedback if keyword missing: Once you have the content saved, what do you have to do with it to be able to edit the content?

Fourth keyword: edit*, remix*, adapt*, change*

Feedback if keyword included: Yes – after uploading the .h5p file to an h5p authoring platform, you can edit the content to make any necessary changes.

Feedback if keyword missing: The question stated that the user wanted to use a similar but non-identical version of the content. How could you make a derivative?

Fifth keyword: embed*

Feedback if keyword included: Yes – once the desired changes have been made and saved, you can embed the new question in your own course.

Feedback if keyword missing: Once you have created the new version of the question, how do you get it into your course?

Review

Drag the Words

We will work together to recreate the question below

Use the following information to make the above element

Title:

Drag and Drop Words Symposium Example

Task description

​​​​​​​Drag the words into the correct boxes

Text

According to a meta-analysis performed by Miyatsu, Nguyen, & McDaniel (2018), the five most popular study techniques used by students, from most to least popular, are:

(1) *rereading\+Correct. 78% of students used rereading as a study technique\-Incorrect. This study technique is more popular than you think. Try again*
(2) *flashcards*
(3) *highlighting*
(4) *note-taking*
(5) *outlining*

Correct / Incorrect Feedback

For rereading: \+Correct. 78% of students used rereading as a study technique\-Incorrect. This study technique was more popular than you think. Try again*

For flash cards: \+Correct. 55% of students used flash cards as a study technique.\-Incorrect. Flash cards are quite popular but did not place where you put this study technique. Try again.*

For highlighting: \+Correct. 53% of students used highlighting as a study technique.\-Incorrect. Try again.

For note-taking: \+Correct. Note-taking was not a popular study technique with 30% of students doing it.\-Incorrect. Note-taking was not a popular study technique but did not place where you put it.

For outlining: \+Correct. This was the least popular study technique with only 23% of students using it. \-Incorrect. This study was less popular than you think. Try again.

Overall Feedback

0 – 19%: Read through Miyatsu et al. (2018) again and retry this question.

20 – 40%: Taking a look at which answers you got right and wrong and try again.

41 – 80%: Very close. Have another try and see if you can figure out your mistakes.

81 – 100%: Well done. Rereading was most popular with 78% of students reporting using it; 55% of students said they used flash cards, 53% used highlighting, 30% used note-taking, and 23% made use of outlining.

For your interest: Here is the article on which this question is based:

Miyatsu, T., Nguyen, K., & McDaniel, M. A. (2018). Five popular study strategies: Their pitfalls and optimal implementations. Perspectives on Psychological science, 13, 390-407.

Review

19 STEPS

1. Navigate to the H5P Hub on your H5P Authoring tool and click Drag the Words

Step 1 image

2. Add a Title. This is for organization and metadata and will not be displayed to the viewer.

Step 2 image

3. Type Task description

Step 3 image

4. Scroll down and add the question Text. For each droppable word use the format *droppable word\+Feedback if correct\-Feedback if incorrect*

Step 4 image

5. Scroll down and click Add Range until you have as many overall feedback ranges as desired.

Step 5 image

6. Type upper score range for each defined range

Step 6 image

7. Type Feedback for each defined score range

Step 7 image

8. Scroll down and click Instant feedback if you want users to receive feedback immediately after dropping a word, rather than after clicking Check

Step 8 image

9. If desired, add or change Faculty

Step 9 image

10. If desired, add Discipline

Step 10 image

11. Scroll up and add tags

Step 11 image

12. Click Metadata

Step 12 image

13. Click dropdown menu under License

Step 13 image

14. Select Preferred License

Step 14 image

15. Click Save metadata

Step 15 image

16. Click Create

Step 16 image

17. Click Embed

Step 17 image

18. Copy embed code

Step 18 image

19. That’s it. You’re done.

Step 19 image

Here’s an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/1921212/H5P—Drag-the-Words-Guide

Drag and Drop

We will work together to recreate the question below

Use the following information to recreate the above element

Images

Drag-and-drop background

Task Size: 1240X 277

Tick

Cross

Solution

Review

Interactive Video

We will work together to recreate the question below

Use the following information to recreate the above element

Video URL: https://youtu.be/aISnWfiL9cg

The title of this interactive video: H5P Interactive Video Example – Short Answer Chart

Bookmarks:

0:09 Fill in the Blank

0:33 Advanced Fill in the Blank

Interactive questions

First Interactive Element (0:08-0:09; Pause; Poster):

0:08 Copy and Paste the Drag and Drop element from your instance of H5P.

Second Interactive Element (0:19-0:29; No pause; Button): Fill in the blank

Label: Sample

Title: Sample fill in the blank integrated into interactive video

Task description: Fill in the missing words

Text blocks: Fill in the blank questions can be integrated into question sets and *interactive videos”, as demonstrated here.

Adaptivity: Jump to 0:15 if incorrect

Third interactive element (0:00-0:08): Cross-roads

Question text: Jump to

Choice text: Fill in the Blank

Go to 0:16

Choice text: Advanced Fill in the Blank

Go to: 0:33

Fourth interactive element (0:00-1:01): Hotspots

Link Fill in the blank logo to https://h5p.org/fill-in-the-blanks

Link Advanced Fill in the blank logo to https://h5p.org/advanced-fill-the-blanks

Review

Branching Scenario

We will work together to recreate the question below

Use the following information to recreate the above element

Title: Branching Scenario for Flash Cards Best Practices

Text:

In this Branching Scenario, we will walk through the best practices behind using Flash Cards as a study tool for students. 

This branching scenario is based off of the article 

Miyatsu, T., Nguyen, K., & McDaniel, M. (2018). Five popular study strategies: Their pitfalls and optimal implementations. Perspectives on Psychological Science, 13, 390 – 407.

Click on “Proceed” in the top right corner to begin. 

[can embed the following URL: https://bit.ly/35aOgWK]

Branching Question

Title: Branching Scenario Flash Cards Question 1

Question: True of false: Flash cards are a popular study tool among students.

Text: True / False

Correct Branch

Title: Branching Scenario Flash Cards Question 1 Correct

Text: Right! Results from Miyatsu and colleagues (2018) meta-analysis reveals that flash cards are the second most popular study device used by students, after rereading the material. 

URL: https://bit.ly/3JNfEt1

Incorrect Branch

Title: Branching Scenario Flash Cards Question 1 Incorrect

Text: The correct answer is true.

From Miyatsu and colleague’s (2018) meta-analysis, 55% of students said they use flash cards for studying making flash cards the second most popular study technique that students use (behind rereading content, which 78% of students indicated they did).

Don’t forget to add your tags!

For your interest: Here is the article on which this question is based:

Miyatsu, T., Nguyen, K., & McDaniel, M. A. (2018). Five popular study strategies: Their pitfalls and optimal implementations. Perspectives on Psychological Science, 13, 390-407.

Timelines

Examples of timelines

Use the following information to recreate the above element

Headline: The Four Seasons

Body Text: In this timeline, we’ll take a look at the four seasons and what each of them include. 

Background image:

Image credits:

Title: chris-lawton-5IHz5WhosQE-unsplash

Author: Chris Lawton

Source: https://unsplash.com/photos/5IHz5WhosQE

Start date: 2022,03,01

End date: 2022,05,31

Headline: Spring

Body text:


SPRING TIME


Spring is a time of rebirth. Temperatures begin to rise and blants begin to grow and blossom. During spring, daytime increases and nighttime decreases. When it is springtime in the Northern hemisphere, it is autum (or fall) in the Southern hemisphere. 

Animals also become more active during springtime as food resources increase. Listen to the song of a blackbird singing during springtime. 

Media: https://soundcloud.com/ch_sizar/spring-forest-blackbird-song-bird-singing-chirping-3-hours-of-relaxing-nature-sounds?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing

Thumbnail:

Title: merle-5901635_1920

Author: GAIMARD

Source: https://pixabay.com/photos/merle-bird-blackbird-perched-5901635/

Start date: 2022,06,01

End date: 2022,08,31

Headline: Summer

Body text:


SUMMER


Summertime is the hottest of the four seasons. Temperatures increase as the earth tilts on its axis bringing the Northern hemisphere closer to the sun. The days are the longest during summer and the nights, the shortest. The summer solstice is the day of the year with the most hours of sunlight and, correspondingly, the shortest night time. In the Northern hemisphere, this takes place on 21 June. When it is summer in the northern hemisphere, it is winter in the southern hemisphere. 

Media: https://youtu.be/oGlx9stITXY?t=12

Title: sunflowers-3792914_1920

Author: 165106

Source: https://pixabay.com/photos/sunflowers-flowers-sunflower-field-3792914/

Caption: A picture of sunflowers.