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?
Thanks for your feedback, Marcus. I wish the H5P developers would allow their code to be integrated in 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
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.
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
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
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.
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.
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.
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.
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).
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
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.
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..
https://h5p.org/node/66275#comment-20303
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?
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..
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;
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...
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
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:
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
Yesterday this message was posted on the H5P forums at https://h5p.org/comment/26435#comment-26435
"Good news! H5P for Moodle Mobile has been released. However the offline mode is not yet avaible but it is coming soon.
-BV52"
On my local Moodle test site i have the latest H5P version 1.17.2 dated 2019031301 and I can see in its folder that mobile is enabled.
To test it I use the moodle mobile test site at https://mobileapp.moodledemo.net/
Indeed the H5P activities I created do not display the icon meaning that these activities are only available by going to the site itself.
So I should be able to display my H5P activity in the mobile app.
However, when I click on the link to the H5P activity I get this error message:
This site is not configured properly for displaying mobile H5P content. Please contact a site administrator.
What am I missing?
Any update on this issue?
Hi everybody,
we are also interested in this. We have almost the same configuration and our H5P content will not show inside the App. It's giving us the same message (...not configured properly) or just stays blank.
Our H5P content is embedded into a lesson and "hidden but available".
Is there a certain permission needed for the users?
Latest Moodle version, plugin version 1.17.2 and App version 3.62
Best regards from Hamburg,
Stefan
Did you try doing this...
Site administration -> Security -> HTTP security -> Allow frame embedding
I was having troubles similar to what you described until I changed this setting.
Hi Elton
Thank you so much for this information - that did the trick! It works now at least for the mobile app on ios 11. Still doesn't show content on ios 7 and android (using an older version). Is there a list around of all supported operating systems?
Kind regards from Hamburg,
Stefan
Moodle version: 3.4
H5p version: 1.17.2
iFrame embedding: enabled
App version: 3.6.1
SMART OS: Android 7 (nougat)
Chris
Hi all,
I've now tried accessing H5p with a SMART device running iOS 12. Still no luck.
It might be something to do with our Moodle version (3.4)
I'll be updating to 3.6 in July, so I'll reply again in a few months!
Thanks
Chris
Dear Elton,
Thank you for the reply. It worked!
Thanks again.
I am interested to see H5P on moodle mobile app.
I use 3.5 moodle, and updated moodle mobile app which i install from play store (android)
Is still not working form me showing me
Your organisation installed a plugin that is not yet supported.
Contact the site administrator and tell them you want to use this activity with the Moodle Mobile app.
You can still use it using your device's web browser.
Please update on
Hi,
to clarify things:
- The app does not support the H5P plugin
- The author of the H5P plugin should make them mobile compatible (but I don't know if they are interested or have the resources)
- At the same time, Moodle is evaluating supporting H5P natively in both the web version and the app
Regards, Juan
CHINESE:
为了在moodle app上使用H5P活动，我做了以下设置：
网站管理--》安全--》HTTP安全，启用“允许嵌入框架”
这样，在Moodle APP中可以正常参加H5P活动。
但是，为了防止我的Moodle站点被恶意嵌入到一个外部网站的框架中，我又修改了这个文件：“/etc/httpd/conf/httpd.conf”，向其中加了一句“Header always append X-Frame-Options SAMEORIGIN”，然后重启Apache服务，这样我自己的站点可以嵌入我自己的站点页面。但是，这却导致Moodle APP不可以正常使用H5P活动。
请问要怎样设置才能在防止我的Moodle站点被恶意嵌入到一个外部网站的框架中的同时，又能够在Moodle App中正常使用H5P的活动内容呢？
translate(google):
In order to use the H5P activity on the moodle app, I made the following settings:
Website Management--"Security--"HTTP Security, Enable "Allow frame embedding"
In this way, i can participate in H5P activities in the Moodle APP.
However, in order to prevent my Moodle site from being maliciously embedded in the framework of an external website, I modified this file: "/etc/httpd/conf/httpd.conf" and added a sentence "Header always append X- Frame-Options SAMEORIGIN", then restart the Apache service. This way my own site can be embedded in my own site page. However, this has caused the Moodle APP to not use H5P activities properly. When the Moodle APP accesses the H5P content, it prompts "The webpage could not be opened."
How can I set up to prevent my Moodle site from being maliciously embedded into the framework of an external website, while still being able to use H5P active content in the Moodle App?
I've just updated the docs to explain the correct way to set up the parameters to make H5P work in Moodle Mobile App.
It's here : https://docs.moodle.org/37/en/Interactive_Content_-_H5P_activity#Moodle_Mobile_App_compatibility
Hi Joseph, I am able to view h5p activities on my Android and iOS apps but I am not able to view them on full screen.
On the android app, I see the full screen button when I disable "display action bar and frame" but on iOS I can't see the button at all, also when I click it on android, nothing happens, it still sticks to half of the screen, when I rotate my device it fills the screen but the ionic header and footer are still present.
Any help would do.
