Moodle for mobile

H5P on Moodle App

 
Picture of Sya Rahim
H5P on Moodle App
 

Hi,

I am currently using Moodle 3.2 and there are a few courses with H5P activities. I can view them in my web browser and desktop/laptop browser. For some reason I'm not able these H5P activities in the Moodle App. Is there anything I am suppose to set on my Moodle site so that I can see them? 

 
Average of ratings: -
Picture of Marcus Green
Re: H5P on Moodle App
Core developersParticularly helpful MoodlersPlugin developersTesters
Specific code needs to be developed to allow a plugin to work on the Mobile App. The H5P developers have not done this yet so it will not work with the mobile app. I have no association with the H5P developers apart from greatly admiring their work.
 
Average of ratings: Useful (1)
Picture of Sya Rahim
Re: H5P on Moodle App
 

Thanks for your feedback, Marcus. I wish the H5P developers would allow their code to be integrated in Moodle app.

 
Average of ratings: -
Picture of Oliver Tacke
Re: H5P on Moodle App
 

Hi Sya!

Our source code of H5P is freely available and openly licensed. One does not need our permission to use it, or e.g. integrating in into the Moodle app. If someone wants to, he/she/they can right away.

We'd love to contribute the required code ourselves (and it's been on our list of issues for quite some time not), but right now we're focussing our resources on some other aspects of H5P.

Best,

Oliver

 
Average of ratings: Useful (3)
Picture of Dan Jeffries
Re: H5P on Moodle App
 

If the H5P activities don't need assessment, you can display them in the Moodle Mobile app by hosting them on a Wordpress site. The embedded item in your Moodle site will show perfectly in the Mobile app.

We use a dedicated Wordpress site with the H5P plugin to make all our content (if it needs assessment then we simply export it and upload it to the Moodle H5P plugin) and find this a much simpler solution.

Hope that helps.

 
Average of ratings: Useful (1)
Picture of Ketan Chandaria
Re: H5P on Moodle App
Testers
Hi Dan

Can you please detail what steps to take to make the H5P activities show in Moodle App.


Hi Oliver
It would be great if the H5P can be integrated within moodle app as mentioned by Marcus


Thanks 

 
Average of ratings: -
Picture of Oliver Tacke
Re: H5P on Moodle App
 

Hi Ketan!

As I said: We'd love to contribute the required code ourselves, but right now we're focussing our resources on some other aspects of H5P. However, we invite the moodle community to have a look at the source code (it's all on github) and make the changes that are necessary.

Best,

Oliver

 
Average of ratings: -
Picture of Sya Rahim
Re: H5P on Moodle App
 

Thanks for the work around solution, Dan. I still need to explore the H5P assessment as it doesn't have the item analysis for the Quiz module.

 
Average of ratings: -
Picture of Dubbo Feng
Re: H5P on Moodle App
 

I worked out a way to use h5p activities on mobile. But it is not secure, so not recommended.

1, create a h5p activity in a course.

2, create a page activity

3, get the embed code from the h5p activity and paste in the page activity.

4, in Home -> Site administration -> Security -> HTTP security -> Allow frame embedding

App user should be able to see the h5p activity on mobile now.


If you want to record the user activity, you need another plugin, generico filter,

I added a  generico filter template like this:

<iframe id="embed_h5p_with_user" src="https://yourmoodle.com/mod/hvp/embed.php?id=@@h5p_id@@&user_id=@@USER:ID@@"  width="750" height="1334" frameborder="0" allowfullscreen="allowfullscreen"></iframe>


Copy the h5p activity id, then edit the page activity, use the generico filter template you just created, input the id.


also add 4 lines to moodle/mod/hvp/embed.php  before  try{}catch{}



if(isset($_GET['user_id'] && $_GET['user_id'])){

    $USER = $DB->get_record('user', array('id' => $user_id));

    $PAGE->set_context(context_system::instance());

}



now the embeded code should work on mobile app.


 
Average of ratings: Useful (2)
Picture of Dubbo Feng
Re: H5P on Moodle App
 

I have added a new php file embed_with_user.php (added some code based on embed.php) to moodle\mod\hvp,

the file has been attached.

I have also added some check to make sure the request is from moodle mobile app.

so change the generico filter template to 

<iframe id="embed_h5p_with_user" src="https://yourmoodle.com/mod/hvp/embed_with_user.php?id=@@h5p_id@@&user_id=@@USER:ID@@"  width="750" height="1334" frameborder="0" allowfullscreen="allowfullscreen"></iframe>


So the full process is:


1,download embed_with_user.php put it under moodle\mod\hvp

2,in Home -> Site administration -> Security -> HTTP security -> Allow frame embedding

3,install plugin generico filter,

4,add a  generico filter template like this:

<iframe id="embed_h5p_with_user" src="https://yourmoodle.com/mod/hvp/embed_with_user.php?id=@@h5p_id@@&user_id=@@USER:ID@@"  width="750" height="1334" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

5, create a h5p activity in a course. and copy the activity id, set visibility to hidden

6, create a page activity, in page content area, use the generico filter template you just created, input the id.


 
Average of ratings: Useful (2)
Picture of Dubbo Feng
Re: H5P on Moodle App
 

Update:

Actually, on Step 5, it will not work when set the h5p activity visibility to hidden.

I have to use another plugin: Moodle Mobile app: https://moodle.org/plugins/availability_mobileapp

Set the h5p activity for non mobile app only, and set the page activity to mobile app only.

 
Average of ratings: Useful (2)
Picture of Justin Hunt
Re: H5P on Moodle App
Particularly helpful MoodlersPlugin developers

Cor, Dubbo ...thats great work. I tested and it works. I put your Generico code into a bundle so that people do not need to make their own template. Its attached to this post (h5p_embed.txt).

  • It expects Dubbos file to be there: embed_with_user.php
  • It will auto detect the site url, so you do not need to change the template. Just use it.
  • In the Generico tags specify the id that H5P gives you in the embed code as: h5p_id
  • It makes a responsive iframe automatically. By default it makes it portrait mode. Specify alternate dimensions by setting  height/width value as a percent. (But do not use the % percent mark). e.g 16/9 = 177 , 9/16 =56 .25


Some examples:

Portait mode responsive

{GENERICO:type="h5p_embed",h5p_id="155",height/width="177"}

or simply

{GENERICO:type="h5p_embed",h5p_id="155"}

Landscape mode responsive

{GENERICO:type="h5p_embed",h5p_id="155",height/width="56.25"}

(See here for how to use template bundles. The slideshow talks about Poodll but its the same for Generico)
https://poodll.freshdesk.com/support/solutions/articles/19000080054-how-to-use-template-bundles

 
Average of ratings: Useful (1)
on the Great Wall
Re: H5P on Moodle App
 

Hi Feng, 


I am a little confused on the settings. 

I have loaded up Justin's Generico code and loaded in your .php files. 

(thanks again Justin for an outstanding plugin)

I have worked out how to load a H5P activity into a lesson

I have got the "availability_mobileapp" Setup.. 

,in Home -> Site administration -> Security -> HTTP security -> Allow frame embedding


Its somewhere in these settings I am not getting it right. 

Set the h5p activity for non mobile app only, and set the page activity to mobile app only.
Option 1: Set H5P Activity "Make available but not shown on course page"


Set to non-Mobile


on page setting. 


Embedded into Lesson via Generico code and loaded in your .php files - confirmed activity is showing. (Computer)

then set as below.

 


unfortunately not showing in mobile app.. 

I have done a test with just a straight embed and not hidden and same as above. 

Anyone else had a play with this and got it showing in the mobile app?

There is a good discussion going on within the H5p Forums on it and with luck once M3.5 is settled there will be a way to do this as a norm. 

but at this stage be nice to get Feng's way working to show a pathway forward. smile

I can play with this over the next week if we need any more bugging info.. let me know and will supply what is needed. 


Feng, 

hope you don't mind but have crossed reference this back to the H5P site as there would be many that would love to see this working. 

H5P/Moodle Mobile --- would be a match made in heaven.. smile

https://h5p.org/node/66275#comment-20303


 
Average of ratings: -
Picture of Dubbo Feng
Re: H5P on Moodle App
 
Hi Daniell,


I have only tested it on a page activity. Never tried it in a lesson.

Could you please try it in a page activity and see if it works?


 
Average of ratings: -
on the Great Wall
Re: H5P on Moodle App
 
Hi Feng, 

Thanks for the reply, couldn't do that test last night as went down the track of setting up a WP site to play with and compare notes between the methods. Happy to report this is working has been confirmed by a few across the forums. 

(for anyone interested the workaround head to the bitnami\Moodle forums as I have posted the "how to" there. )


Ok, Tests run.. 

As per settings above and embedded into activity page only. 

shows on Desktop but not Mobile. ( to be expected shows on a Mobile browser)

I then went ahead and tried "hidden" v "Hide" and same. 


But before we go further exploring this.. Need to know I am only using Android Mobile app. Not Iphone\Ipad and so don't have one of these systems on hand to test. (And a bit of a shame that it's not that easy to set up an IOS emulator to test, as while you actually can, you can't get the app as I haven't found one that connects to the app store. May have to bite the bullet for development and get a tablet for this type of testing). 


Not sure if we want to spend to much time on this as with using the WP site I can achieve what I need for a few quick course extensions I am working on. But maybe we can revisit this once M3.5 settles down and at least we know we have a 6-month window to play with before upgrades. 


But already by the release of the filter you have made a few people happy, as some are still not comfortable with the paste of embedding code via the HTML way. So If they can get their admin to set up this filter there is a pathway for these types of teachers. Good Work..



 
Average of ratings: -
Picture of Dubbo Feng
Re: H5P on Moodle App
 

Hi Daniell,

In my embed_with_user.php


line 49


if(preg_match("/MoodleMobile/i", $_SERVER["HTTP_USER_AGENT"])){

        return true;

    }


So, it only works on mobile app. Not working on mobile browser.


If you want it to work on mobile browser, just change line 63 to


$is_mobile = true;

 
Average of ratings: -
Picture of Elton LaClare
Re: H5P on Moodle App
 

I have managed to get this working using the combination of Dubbo's file plus the Generico H5P embed template. I've only tested on iOS devices, but I'll try to get my hands on an Android device for further testing. It seems as though you've followed the same steps as I have, so I'm not sure where the problem is exactly. 

In my case, I've used both the Page resource and the Book module for displaying the H5P content. Page seems to work the best, but I might try the Lesson to see how that looks.

Here's what I did in the course once the file was in place and the template had been added to Generico...

1) In an empty section, create an H5P activity.

2) In the editor, choose the Quiz (question set) content type.

3) Create your questions (I used Multiple Choice, True/False, Drag Text, and Drag Drop). 

4) In my case I deselected the Display action bar and frame and the copyright button.

5) Click save and display and note the id number in the url.

6) In a different section, create a Page resource.

7) Insert the following code into the Content area {GENERICO:type="h5p_embed",h5p_id="174"} be sure to change the id# with the one you made note of in step 5. (Easier that what I've just described is to select the box in the Generico template to display H5P embed in the Atto toolbar. This way you can apply the template without having to cut and paste any snippets of code). 

8) Save and return to course, then attempt to open the Page resource where the H5P Quiz has been embedded using the Moodle app.

Good luck. I hope this works for you...


 
Average of ratings: Useful (2)
Picture of Sandro Franco
Re: H5P on Moodle App
 

Hi everyone,

I´ve been checking the long list of open request for features that have to do with Moodle. We are currently in the need of developing some solutions in the same lines. Is anyone else currently developing code for H5P/Moodle needs? if so, would you be interested in teaming up and save some time and effort?

Regards,

Sandro Franco


 
Average of ratings: -
Picture of Sandro Franco
Re: H5P on Moodle App
 

Hello everyone,

We are moving forward in our implementing h5p on mobile moodle,

We have done this:

    - We followed the instructions on https://docs.moodle.org/dev/Mobile_support_for_plugins

    - In  the app we were able to display the hp5 embeded iframe.To do this we disabled permission validation on folder ¨cachedassets¨.

 We have found problems with authentication on the iframe. Can anyone suggest a solution based on this thread regarding user authentication?

We accept any suggestion.

Our code is on https://github.com/Andmat7/h5p-moodle-plugin/tree/soport_moodle_mobile_2

Video demostration:


 
Average of ratings: Useful (2)
on the Great Wall
Re: H5P on Moodle App
 
Sandro,

Is that on the iPhone mobile app or Android?


But it looks perfect. Well done.

Now that there is working prototypes in action it won't be long before this becomes available as standard.


I had a quick preview of both links you have added. On the GitHub code are you able to post a few more steps in the implementation?


I would be keen to try it out on one of my development sites that are 3.5.


At the moment I am course designing into a 3.5 and a main production M3.3 site. But will upgrade this site within weeks. As per my other thread on sizing within the mobile app, we haven't been happy with how it looks within a contained container. (More on that within my thread on codes to make IFrames fit within the mobile app).


Thanks for coming back and sharing the work.


As to your question, I can't provide any useful information but hope there is plenty of interest generated so this can be settled quickly for the community and we get another power tool to use with the Moodle mobile ecosystem

 
Average of ratings: -