I'm Alan Levine. Ask Me Anything About Using H5P

Open Education Week Do OE Week Activities
,
#18

A question came to me via email. At first it’s not relevant to H5P but it is…

I was wondering if you could help me with something in Pressbooks. I am not sure if you are familiar with it. There is a way in Pressbooks to have expandable/collapsible sections but I haven’t been able to figure out how to do it.

Here is a website that uses it (see blue sections called Activity): 22. Phrases, Cadences, and Harmonic Function – Fundamentals, Function, and Form

I reached out to the author of the link I sent and he was extremely helpful. However, it involved a lot of computer coding. I am not familiar with computing coding, so I was hoping Pressbooks has a secret easy way to do it.

I know of no secrets!

The question is relevant, because one way you can achieve this effect in Pressbooks without manipulating HTML is with H5P (it is built in) using the Accordion content type.

This came up in my work with BCcampus for the H5P Kitchen (with good answers provided in twitter from Steel Wagstaff) and there is a no code way to do this using just HTML.

It even works here in this platform! I use it here to share a related post where I compared the H5P and HTML methods

Show/Hide A Kitchen Secret

I wrote a post Accordions, Collapsibles, Drawers, Disclosures (H5P Kitchen) comparing the two approaches to creating content revealed via H5P Accordions and the HTML only Summary / Details tags

Let’s see if I can even tuck an H5P embed of an H5P Accordion inside this HTML tag constructed one. In the old days we might say this was very “meta”…

The HTML method does require entering “code” but it can be done in the Pressbooks editor using the Text/HTML editor tab. There are some fancier things you can add to the effect with custom CSS, but the basic structure can be done with the simple tags (warning, I love writing HTML, others may differ)

This is another example among many where there are multiple approaches to solutions in not only H5P but almost any web technology.

I feel strongly about the open format we are doing here because often (a) more than one person has the same question so there is value to have it public and (b) it is highly likely others can answer it better or add additional suggestions.

I am excited for more questions this week.

1 Like
#19

This has been an area that concerns me too. Now I have retired I have exported my H5P packages and saved them on a personal disk, uploading to moodle when I work there. I also have a user account on H5P but understand this free facility may become a paid facility in future (is that right?) I do already pay for a wordpress hosting of my blog but I am not sure how I would use this to publish my resources. Is there a tutorial I could use? Cost and expertise are not endless so I would appreciate any advice!

#20

The pandemic has also revealed that many practitioners are happy to create and share resources but do not wish to spend ages learning to code so simple advice/demos helps to keep the barriers to entry low, especially if English is not your first language.

#21

You’ve done well, teresa, to save your source .h5p content- they can be used in any platform that supports the editor.

The free service at h5p.org is only for getting practice with creating H5P content, not for archiving or publishing (they offer a paid service via h5p.com) And the .org version now only offers a few content types to try out.

I recommend for getting experience creating/using H5P to get the desktop editor from Lumi where you can (a) use any content type (b) import /h5p content and remix; and (c) even generate HTML versions of your content.

If your WordPress is a self hosted (e.g. on your domain), you can get the full editing/publishing capability with the H5P plugin for WordPress. H5P has pretty good documentation and other guides are certainly out there.

If it was me, I would create a separate site to make as an H5P portfolio. You can import your content to the H5P library there and add them to posts that explain them, use categories to organize. Or it can be used in your main blog, and create some pages/posts to describe your content.

In work with the OpenETC co-op we saw a few institutions create a “studio” site just to author faculty a place to build H5P that could then be used to embed in other sites, not even publishing them to the studio site, e.g. https://h5pstudio.opened.ca/ – I was working on a cloneable template it never went past the prototype https://labh5p.opened.ca/

#22

This is totally understandable. H5P absolutely lowers many barriers for creating interactive content that before would have had a technical hurdle to jump.

But it’s also not just a 1-2-3 magic solution. Creating good interactive content calls for some design and thought, and as one digs deeper into the tools, there are important nuances to figure out.

The biggest mistake we make with folks new to it is throwing he big list of tool at them; I always think it is better to start with seeing possibilities and potentials first, ideally in your subject area.

Or

1 Like
#23

Hi Alan, thanks for all your amazing resources for H5P!
I’m new to OE Week this year and feeling really inspired!

Wondering which H5P content type is your favorite and why?
I like Interactive Presentation and am excited about the new AR Scavenger, but my go-to’s are the hotspot activities for versatility.

#25

Hello! I’m working on some video tutorials for this very question, so will share it when it’s ready. :slightly_smiling_face:

#26

Hi Lyra, thanks for stopping by.

I’d be hard pressed to pick one favorite. I agree that the Hotspots have probably a use in almost any subject areas so yes to versatility.

I also like the Interactive presentation especially knowing you can use it to create branching or hyperlinked content, you are not limited to just linear paths- a favorite example as it is also useful is the Periodic Table of H5P Content Types.

And I find the column is just plan useful for assembling multiple content types into one whole. I have seen good examples for having something like a hotspot put together with say a question set to have some practice content and then an activity with feedback.

The documentation tool is useful as it is one of the few content types where learner can save/share their work.

But I guess I have a soft spot for the Branching Scenario, as crazy complex as it can get, because of the experiences you can put there. I did one that may have pushed the limits

I cannot really pick one favorite!

#27

Wow, is there ever a lot of H5P happening this week:

2 Likes
Claim a Digital Badge for Hosting an #OEWeek 2022 Event
#28

Some lovely tips here Alan, thank you! I do own the WP domain so maybe the plug in would work for me.

#29

I’m in this workshop session The Use of H5P to Create Interactive Learning Objects: Demo and Tips (workshop) (Center for Innovation in Teaching and Learning-Memorial University of Newfoundland) and they have a collection of H5P content examples and practice exercises:

#30

Yes, so many content types to pick from. I do go for the ones that have a fixed size though as the responsive screens of devices varies so much.

I wasn’t able to make all the H5P events this week, but glad to have found OE Global!

#31

No one can do all the events! And we are glad you came here too. These areas will never close…

The responsiveness is one of those small issues you find with several tools. A trick I found for the Image Hotspot is you have to mind the aspect ratio of images, because the device always stretches the width to the maximum available. This means if you use a portrait orientation image, it will extend below the bottom of the screen. Here is a fix!

#32

Hi Alan,
I have a question concerning “drag the words”. As soon as I want to have a longer text (actually just a sentence) being dropped into a blank, it doesn’t “catch”, it just flows down to the bottom again whereas all other texts can be placed/dropped in any blank.
Do you know the reason for this and how I could fix it?

Thanks a lot in advance,
Smilla

#33

Hello and thanks for asking a question. From what I understand, drag the words is really meant for words/phrases, not long sentences (see this message in the H5P forums) and answers longer than 17 characters are truncated with ellipses when dropped.

It would help to see a link or a screenshot of the task you are trying to do. I just made a test version of something with long responses. It seems like it can be hard to drop when the drop blanks are on the edges, I did see some long mis drops a few times, but it was not consistent.

It actually looks like to me it depends where you click the long sentence to drag from. If I click on the middle, it is hard to drop, but if I click on the left edge of a long item, it seems to drop better.

If that is the case with your own, you might include a hint in the instructions??

This might be a case where something like Drag and Drop works better? Or redesigning the activity with maybe a different tool than can check the understanding of long sentences.

I do not have specific technical expertise to answer why, I just try to experiment myself. Please let us know what you discover.

#34

Hi Alan,

thank you so much for responding so fast, I’m impressed and appreciate it immensely.
I will include screen shots but while experimenting I might have found the solution (or the reason behind it respectively).
First I used workaround that you mentioned, namely that I used the “drag and drop (on image)” instead of “drag the words”- This works perfectly fine. Thank you for the tip!

Then I experimented a little bit more with the “drag the words” activity:

A: When I use more than 3 blanks, it works (most of the time. As you said, it’s something that’s not consistent). This still bothers me (but only since I can’t figure out why it’s not consistent).

B: When I break the text that should be dropped down into lines by using a soft return it works instantaneously.

What I still don’t understand is how h5p arranges the text snippets that should be dropped. Sometimes you find them below the blanks, sometimes to the right of it. Could that also have anything to do with the length of the texts? (I sometimes have the feeling, it’s been arranged to the right, when the answers are shorter and as soon as they’re over 17 characters they’re arrange at the bottom …) Have you made the same experience?

Thanks again so much for your help and this very helpful discussion!!

And here are the screenshots: :slight_smile:

Bildschirmfoto 2022-03-29 um 21.41.10
Bildschirmfoto 2022-03-29 um 21.41.102364×414 61.9 KB

Bildschirmfoto 2022-03-29 um 21.52.30
Bildschirmfoto 2022-03-29 um 21.52.302354×298 85.1 KB

Bildschirmfoto 2022-03-29 um 22.04.24
Bildschirmfoto 2022-03-29 um 22.04.241860×288 83.2 KB

#35

I am only guessing but the location of the choices is likely a result of the relative sizing of content areas to fill the width of the available screen, so yes, longer choices would make the area needed to display them to wide and they get placed below.

You will not have much control over this, all choices will likely end up below on a mobile screen. You might try gradually narrowing your browser window to see how it changes layout on smaller screens.

I did report your original issues to H5P and at least a request has been made to developers to address it.

I would strongly recommend sending bug reports and questions at https://h5p.org/forum they know much more than me!

#36

Worth adding here, because it demonstrates an answer to your question, Stephen (though a few weeks later), from JR Dingwall in twitter, offering his blogged example:

His post demonstrates using the desktop H5P editor Lumi to export H5P content as standalone HTML content, and then putting to use inside of Canvas.

#37

Hello, regarding the truncation of text over 17 chars. An issue I’m experiencing is if your item contains LaTex coding then it calculated the chars on the raw text rather than the formatted text. Can you think of a solution to this, or could you point me to where the source code is so that I can take a look at it? Thanks, George

Screenshot 2022-05-26 at 12.16.42
Screenshot 2022-05-26 at 12.16.421920×1110 123 KB

#38

Hi George, I’m not sure it’s possible as the Latex strings are rendered likely after it’s loaded. But I don’t know for sure how the innards work.

The code is here GitHub - h5p/h5p-multi-choice and one could submit an Susie but I would ask first in the forums at H5P.

If it were me I might redesign perhaps using a different content type (drag drop) or something putting the Latex options displayed in the text of the question with a key for each like ( mine not latex here)

(eq1) C2H24
(eq2) C4H8

And the choices use the key. There might be other ways but I prefer an approach of changing the structure/design of the question than trying to do something that involves changing the code. Sorry that may not be precisely what you sought!