New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed H5P Content into Page Resources #30

Open
icc opened this Issue Jan 5, 2016 · 67 comments

Comments

Projects
None yet
@icc
Member

icc commented Jan 5, 2016

Should we make it possible to insert H5P Content into the Page resources?

@xyulex

This comment has been minimized.

xyulex commented Feb 16, 2016

You can do that by simply going to HTML view of the editor in Moodle and copy-paste the <iframe> code.

@icc

This comment has been minimized.

Member

icc commented Feb 16, 2016

I'm sorry, I wasn't very clear. What I meant was a solution like in WordPress, where you use shortcodes to insert the content into other components. This can be useful if you do not have the permission to write HTML(iframe or script tags) into Pages or other resources. However, this might not be an issue on Moodle?
I'm not(yet!) very experienced in the different usage patterns in Moodle, but I hope to learn :-)

@xyulex

This comment has been minimized.

xyulex commented Feb 16, 2016

Well, if you are a content creator in Moodle (i.e. you have an 'Editing teacher' role), you can actually insert it:

via 'Multimedia' button, which is a user-friiendly method
via <> Icon, which is a more developer method, in which you should copy your embed URL

There isn't anyhting similar to WordPress shortcodes in Moodle.

@icc

This comment has been minimized.

Member

icc commented Feb 16, 2016

Ok, thank you for the feedback.

@brum1975

This comment has been minimized.

brum1975 commented Mar 11, 2016

I think the way to do this is by creating an "Atto" plugin. I don't think content embedded that way would be able to store grades though

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Apr 8, 2016

I have tried to develop a Moodle filter for h5p mod (hvp) and got stuck with trying to load all the H5P libraries before the $PAGE initiates, and could not find the proper way to do so.
Here is a link to a wip of this: https://gist.github.com/nadavkav/155cc21df9cd19e9ee1f6760462b62cb

And so...
Add to the hvp/view.php the following hack:
$isembeded = optional_param('isembedded', false, PARAM_BOOL);
...
if ($isembeded) {
$PAGE->set_pagelayout('embedded');
}

And used IFRAME to embed it into a Moodle Page resource (actually, anywhere)

<iframe class="h5p-embed" src="http://moodle-site.org/mod/hvp/view.php?id=XXX&isembedded=1" width="100%" height="500px"></iframe>
@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Apr 8, 2016

When we fix the filter, we would definitely have an ATTO plugin (toolbar button) for our Academic stuff that is displaying a list of hvp resources in the current course. clicking on one of them will generate the proper filter syntax and embed it into the content (similar to wordpress shortcodes)

Maybe, we will use the Generico filter

@icc

This comment has been minimized.

Member

icc commented Apr 13, 2016

This looks like some steps in the right direction, good work nadavkav!
I'm not able to see why it isn't working, but I haven't done any testing yet.
I guess we should have made a class or some functions so that we wouldn't have to duplicate so much of the code from view.php. I will fork it and do some testing when I get some spare time on my hands.
Again, this looks like a nice contribution and I think it will enrich the plugin!

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Aug 6, 2016

Update: We developed an ATTO plugin that list all the H5P activities in the course. choosing one, it embed it as an IFRAME in the editor and adds the above suggested extra param that display it in EMBED mode.

Please see if the above suggestion (display H5P activity in Embed mode) make sense, and if so... I will be happy to share the ATTO plugin code. If you are going with the filter option... we will easily update the ATTO plugin to support it and then share it too 😄

@mgancarzdsi

This comment has been minimized.

mgancarzdsi commented Aug 6, 2016

Hi Nadav, that's an interesting solution, I could see our educators using that one extensively. Most of the time if they want something graded, they want it as a seperate activity which H5P already supports.

I'm curious though, when the course is backed up and restored or imported somewhere else, will it require re-linking all of the h5p activities again? We often backup and restore our courses (we have a template one that we backup and restore to create specific offerings of a course), and this works seamlessly with images that are inserted via atto, but breaks if someone directly tries to use HTML to embed another activity from within the course, since when the course is restored, the HTML still pointing at the old copy of the course, rather than the newly restored one.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Aug 6, 2016

We are using some WIP beta H5P backup code which works. but I guess it will be available publicly on the next release. so we don't have any issues.

Normally, Moodle can restore links with specific IDs to course activities even when the course backup is restored on a different system. (It scan the links in the content and create a map of the old and the new activity IDs) I guess our current H5P links to the view.php?id=XXX&embed=1 will not break. but I did not had the opportunity to test it yet. (I will).
If we use an H5P filter plugin, which will probably use some kind of "shortcode" I am not sure if it will still work when the course content is restored on a different Moodle system.

@lewiscarr

This comment has been minimized.

lewiscarr commented Sep 5, 2016

Hi all, I have a need to build the H5P content in a course but need to be able to embed it in other courses as a label, is the embed code disabled somewhere else in the code or just on the hvp/view.php page? There is certainly the need to enable embed, even if it's a read-only, non-gradebook writing view.

@berrandonea

This comment has been minimized.

berrandonea commented Sep 15, 2016

Hello,

This atto plugin nadavkav talked about could be exactly what we need. Where can we find it ?

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Sep 18, 2016

Here is a link: https://github.com/nadavkav/moodle-atto_hvp

It's working, but, it's a hack. and I think we should have better support
and agreement with core h5p developer on the proper way to implement these
kind of usages.

On 15 September 2016 at 17:03, Brice Errandonea notifications@github.com
wrote:

Hello,

This atto plugin nadavkav talked about could be exactly what we need.
Where can we find it ?


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#30 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAOHAA70ap49SRFBe8dABfHDi4ltzy7Mks5qqVA_gaJpZM4G-x6K
.

@berrandonea

This comment has been minimized.

berrandonea commented Sep 19, 2016

Thank you very much. It works !

@berrandonea

This comment has been minimized.

berrandonea commented Sep 19, 2016

Well, it doesn't work with all themes. But with another little hack in my theme (archaius), I could fix this.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Sep 19, 2016

Yep, you just need to make sure you have a very minimal and clean layout in each theme that shows only the content and nothing else.

@nickvarney

This comment has been minimized.

nickvarney commented Oct 17, 2016

I just wanted to echo previous comments, in particular Lewis Carr's and say that in my opinion having the option to embed h5p content (in Pages, Labels etc) will be a big plus for the adoption of h5p in Moodle. Embeds on a main course page would do a great deal towards increasing our learners' engagement with the rest of the course for example.

Of course users can create content in h5p.org and embed that way but an in-Moodle solution would be far slicker and obviously better in terms of content management, privacy, confidentiality etc

@mgancarzdsi

This comment has been minimized.

mgancarzdsi commented Oct 17, 2016

Hear hear, thirded.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Oct 17, 2016

Reading through this issue again, and as I didn't seem to mention it before...
We add H5P activities to a special Moodle course topic (section/module/unit...) and then hide it and also set each H5P activity in it to "visible". It's a Moodle hack, to make all the H5P activities visually hidden from students viewing the frontpage of the course, BUT available to be embedded everywhere in the course, using the above (linked) Atto H5P embed plugin.

@pvo-it

This comment has been minimized.

pvo-it commented Oct 27, 2016

We would like to embed into pages and/or books. The problem is we don't have access to add the plugin to atto. We use a Moodle partner who would probably frown on using a hack, or charge us to install it.

I was thinking about creating an open course. (all users are enrolled) as a sort of repository, then embedding the code into a page or assignment in the active course.

We would have to enroll all students, but wouldn't want them to access the course. This course would become a repository of H5P content that could be embedded into other courses.

Has anyone thought of, or attempted something like this.

I sure wish there was an easier solution than these work arounds.

What I would really like to see is HTML source code access in H5P text editors.

@alanpt

This comment has been minimized.

alanpt commented Oct 27, 2016

Yea, we are in the same situation as pvo-it above. The problem with that solution is - the grades aren't attached to the course then. So it would be difficult for the course tutor to mark.

At the moment we use a separate hosted drupal site to make embeddable h5ps alongside the Moodle one.

  • For formative activities (non-marked), we use the drupal embeds;
  • For summative activities (marked), we use the moodle h5p activities (showing on separate pages).

It's a solution that works for now, but could get cumbersome in the future.

@mgancarzdsi

This comment has been minimized.

mgancarzdsi commented Oct 27, 2016

Hi @pvo-it , watch/vote for https://tracker.moodle.org/browse/MDL-4782 to get implemented to do what you want, ie: a way to embed from another activity that is hidden, but accessible by direct link.

@pvo-it

This comment has been minimized.

pvo-it commented Oct 27, 2016

Thank you mgancarzdsi
I voted. This issue has been a sore spot for a long time. Sounds like it is being addressed. Hopefully a solution will be part of Moodle core soon.

@nickvarney

This comment has been minimized.

nickvarney commented Nov 7, 2016

I've voted too.
The h5p atto editor (above) is a good piece of work but with our site's template it displays too much extraneous information for us to use it (all the site's left hand side blocks appear with the h5p content).

@tmkettunen

This comment has been minimized.

tmkettunen commented Nov 10, 2016

Is it impossible just to add the embed function for Moodle? Maybe with a notification that using the embed code will not record points/grades and that the course has to be accessible without a login for the embed to actually work outside the course.

@pstencel

This comment has been minimized.

pstencel commented Nov 10, 2016

Maybe I'm missing something obvious here (apologies, in that case), but why can't the grades be recorded for embedded H5P activities? Suppose we have a collection of H5P activities in a hidden topic of a moodle course and then we embed those activities in a page (or lesson, or quiz, or any other moodle module). The grades might be recorded in the original H5P activity (the one in the hidden topic), right?

@mhughes2k

This comment has been minimized.

mhughes2k commented Nov 10, 2016

The option to generate it as a "hidden" activity means that the hidden activity holds the resultant score, not the resource that is displaying.

So if you happened to embed the "hidden" h5p activity on to 2 pages, then the user could think they are doing 2 different activities, when in reality they're doing the same one twice...(however if you were to guarantee that you'd never do this, then it would work, caveats about users deleting the H5P content, or switching to course formats that expose it or do something else aside...)

I think that @brum1975 is correct, it should be an Atto plugin that would display an H5P editor for creating an H5P activity within the text editor (this would allow H5P content to be placed anywhere that an HTML editor appears).

However I've had a play with doing this, and the 1st problem that I ran into was that Atto Plugins have to be implemented as YUI modules, and the H5P editor is jQuery based, and is expecting jQuery objects to represent some of the UI controls that it requires to read information from (e.g. create / upload).

The 2nd problem is then how do you pass the grade information from each embedded H5P activity to the displaying Moodle component. Bearing in mind that Moodle components such as Page don't expect to present a grade to students! Some components like Lesson in theory do provide a grade at the end of them, but you'd need some mechanism to tell Moodle how to put all of the H5P activity content together into the final grade for the Moodle activity.

@wullie

This comment has been minimized.

wullie commented Jan 11, 2017

Thanks @nadavkav

@vaughany

This comment has been minimized.

Contributor

vaughany commented Jan 16, 2017

Hi all. The company I work for has just started using H5P in a big way, but one of the issues we're facing is much the same as mentioned in this thread: embedding. To be honest, the only resource the company really wants to embed is the 'timeline' resource at the top of each course, because it looks great (thanks, H5P devs!) but if a consequence of this is all things embeddable everywhere, then everyone wins.

Consequently my employer has deemed it important enough to us that we'll be working on this ourselves, but after we've looked into backup and restore.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Jan 16, 2017

Short update...
We have started working on adding the H5P's "auto resize js" to the above mentioned "ATTO insert embedded hvp activity". It might be ready in a week or so, as we have very little time allocated for it. (not to say it will take a week of work, of course ;-)

@nickvarney

This comment has been minimized.

nickvarney commented Jan 16, 2017

@nadavkav The inclusion of the $isembeded code in our mod/hvp/view.php had no effect on how embeds presented in both the 'clean' and 'more' themes? We still see most of site's structure in the embed frame. I'm wondering whether these themes have a particular 'embedded' layout or not?

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Jan 16, 2017

Clean & More are based on Bootstrapbase, which have an "embedded" layout: https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/layout/embedded.php

Are you sure you have all the code from the patch in your mod/hvp/view.php ?
(is it similar to: https://github.com/nadavkav/moodle-davidson/blob/moodle_31_davidson/mod/hvp/view.php ?)

@nickvarney

This comment has been minimized.

nickvarney commented Jan 17, 2017

Thanks @nadavkav . Yes I've even used a copy of that view.php file to double check I hadn't made an error with my first attempt. It still displays too much in Clean, More and our clone of More.

We are using the latest release candidate of h5p rc1.0-rc.5. Are you on the same build? Are you able to switch your theme to Clean and More to test?

Thanks for your help!

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Jan 17, 2017

I have tested it on Clean & More themes and it looks "clean" just the H5P content.
btw, if you add some "Intro" text, it will show above the H5P activity, which I think is good, in case some instructions are needed. And again, if it is not used, then the H5P content is the only thing that is displayed.
Hope you are not referring to it.

@nickvarney

This comment has been minimized.

nickvarney commented Jan 20, 2017

@nadavkav Hmm, most odd. I still got everything displayed in an embed in 'Clean' when I try it on a brand new, fresh install of Moodle 3.1.4 run locally on my machine!? When I say everything I see the nav bar, course title, breadcrumb, then the h5p content, then all the blocks on the LH side of the course page and then the footer.
What am I doing wrong?

  • h5p installed.
  • h5p libraries installed.
  • Your atto editor plugin installed and the atto toolbar config edited so the button displays.
  • The view.php file edited to include the embedded page layout code you have posted.

Anything missing?

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Jan 21, 2017

Nope. nothing is missing.
Can you send me a link with some temporary login credentials that I can look at it.
You can send an email to "my github user" @ gmail

@Nab59

This comment has been minimized.

Nab59 commented Apr 29, 2017

Hi,

This is my first post on github.
I read your posts and i need help for my case. I explain.
My moodle site is version 3.2.2. I am in the same situation as nickvarney. When integrate H5P content, I see the nav bar, course title, breadcrumb, then the h5p content, then all the blocks on the LH side of the course page and then the footer.

Could someone help please ?

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Apr 29, 2017

Digging into this...
It seems I shared link to github repositories that are not up to date, and the tiny but important difference between them cause this issue. So, here is what you need to fix to get it running for you:
The HVP Atto button is passing the "isembedded=1" param to the hvp/view.php file:
https://github.com/nadavkav/moodle-atto_hvp/blob/master/yui/src/button/js/button.js#L172
But in the current link I shared (in the past) it looks like one of our programmers changed the param to "embed" 😢 :
https://github.com/nadavkav/moodle-davidson/blob/moodle_31_davidson/mod/hvp/view.php#L28
And this is why the IFRAME display the HVP activity using the "incourse" theme layout and not the "embedded" layout.

So, to fix this, just change:
https://github.com/nadavkav/moodle-davidson/blob/moodle_31_davidson/mod/hvp/view.php#L28
to: "$isembeded = optional_param('isembedded', false, PARAM_BOOL);"

@Nab59

This comment has been minimized.

Nab59 commented Apr 29, 2017

Hi Nadav,

Yes, now it works.

thanks so much.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Apr 29, 2017

Great new 😄

@Nab59

This comment has been minimized.

Nab59 commented Apr 29, 2017

Now I will be able to take full advantage of this plugin.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Apr 29, 2017

Moodle 3.3 (which is out in a few days) will also have activity Stealth mode (see demo: http://prototype.moodle.net/stealth/) with which you can have an H5P activity on the course that is not visible on the front page of the course for the students, BUT you can use it (link to it) by using the H5P Atto plugin. and only then the students can use it. which is perfect for our case scenario.

@Nab59

This comment has been minimized.

Nab59 commented Apr 29, 2017

Oh, great news.
thank you for the information.

I will folow.

@giselebrugger

This comment has been minimized.

giselebrugger commented Jun 10, 2017

Thank you a lot @nadavkav. I'm using Fordson Theme with moodle 3.3 and is perfect embed.

@dgcruzing

This comment has been minimized.

dgcruzing commented Sep 17, 2017

nadavkav,
Sorry to be painful, spent most the day on this and getting the same as above on April 29th.. and have edited files correctly.
running 3.1.1 (Build: 20160711)
Theme - Pioneer
H5P - 1.5 2017083100
anything else I can try?
Thanks in advance

Edits: working now with extra edits.. anyone else comes across this.. Nadavkav popped me this extra code to add in..
Extra Code to add
Working well now

@Nab59

This comment has been minimized.

Nab59 commented Sep 17, 2017

Hi Nadav,
Hope you are doing well.

I wonder if we can have the same H5P integration in an other editor like TinyMCE ?

thanks in advance for your reply.

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Sep 18, 2017

Hi @Nab59 ,
I am not aware of any TinyMCE integration. I think it can take a few hours to make (base on the code from the Atto plugin) but since it is deprecated by Moodle core team... I am not sure if this will get developed.
All the Moodle systems I know moved to Moodle 3.3 with Atto. I advise to move forward to Atto as well.

@patsej

This comment has been minimized.

patsej commented Sep 20, 2017

Hi @nadavkav,

Thanks for those information.
There is still the activity title appearing in addition to the h5p area (in my case, an interactive video).

What would be the good approach to hide it ?
BTW, when will your change available in the official release?

Thx in advance

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Sep 20, 2017

There is no special CSS class added when the H5P activity is embedded (with IFRAME), so there is no easy way to hide it.
What I usually recommend is to remove the title and place a &nbsp char instead. it's a workaround. I know.

@patsej

This comment has been minimized.

patsej commented Sep 20, 2017

Thx!
I could get rid of the title with small changes in view.php.
The last <style> tag helps to remove the unnecessary space before the h5p (video in my case)
Note that I haven't tested it on other cases.

// Print page HTML.
echo $OUTPUT->header();
if (! $isembedded) {
    echo $OUTPUT->heading(format_string($content['title']));
    echo '<div class="clearer"></div>';
}

// Print any messages.
\mod_hvp\framework::printMessages('info', \mod_hvp\framework::messages('info'));
\mod_hvp\framework::printMessages('error', \mod_hvp\framework::messages('error'));

// Print intro.
if (trim(strip_tags($content['intro']))) {
     echo "<style>.mod_introbox {padding:0px} </style>" ;

The only remaining issue is the size of the iframe. It is too small vertically for the video and the controls.
The Javascript responsible for resizing the iframe, included by ATTO, does not do its job properly.
Any idea?

@thomasmars

This comment has been minimized.

Member

thomasmars commented Oct 18, 2017

@nadavkav Did you ever create a pull request for this ?

@nadavkav

This comment has been minimized.

Contributor

nadavkav commented Oct 18, 2017

@thomasmars , No. as it always seemed like a hack, and hoped I find time to finish the filter/hvp I started to develop long time ago, instead. (I am getting there, I can see it on the horizon...)

@Avemaar

This comment has been minimized.

Avemaar commented Jan 27, 2018

First of all H5p is such a great tool,but it would be great if
it would be possible embedding into moodle without the <iframe>
as mentioned by others like in tinyMc editor or Embed the (the real, direct) content
because iframe has some additional(an unnecessarily ) content.
I would work on this but have no idea

@thomasmars

This comment has been minimized.

Member

thomasmars commented Jan 31, 2018

Hi. I suggest you start by making yourself familiar with how the embedding is working currently and try to figure out how it can be improved upon. Determine some clear improvements you would like to make and create a new issue for discussing how this can be implemented most efficiently and without any regression issues. Finally if the changes are unproblematic a Pull Request should be made.
To start out have a look at embed: https://github.com/h5p/h5p-moodle-plugin/blob/master/embed.php

@Aditchoudhary

This comment has been minimized.

Aditchoudhary commented Aug 31, 2018

I have h5p file. now i want to view that file in HTML.

Please help in best and easiest way

@thomasmars

This comment has been minimized.

Member

thomasmars commented Sep 3, 2018

@Aditchoudhary This is not related to this topic. In the future please post questions in the H5P.org forums.

If you have an H5P-enabled website you can upload the .h5p file there and embed your content within an HTML file, instructions for embedding are found in the H5P.org documentation. If you wish to not use a H5P-enabled site there are no official resources that supports just showing an .h5p file directly in HTML

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment