Thanks, Oliver for sharing this set of tutorials about H5P, there is barely found some relevant tutorial for h5p developer but glad you did it. Appreciate
Thanks Oliver! Awesome stuff. That was really useful. I am very interested to learn more about H5P development. Are you running Drupal locally? Please do more of these sort of videos when you can. Thanks again
There's more to come. Scheduled for tomorrow, December 11 and December 13 and then three more shortly after. If there are topics that I should cover, please let me know.
Thanks, Oliver! As you know, I am not a developer, so it was pretty hard stuff for me. The problem for me was not only to follow your video in every detail but rather to set up the server & development environment on my macOS (MAMP, Drupal 7). BTW: I noticed that you still assumed some knowledge that is - I think - not common for the typical user. You explained how to install npm but not git, and even commands via terminal are not everyone's daily business. I am thinking of providing a tutorial based on your video to show some missing steps and the problems I confronted following your guide. But all in all: Even me, I managed it following your video! 👍 👏
Glad you made it! As I explained right in the beginning, this video will neither turn you into a developer (not my intention) nor will it explain every potential detail of dev ops (not my intention). It's an overview of what you may need when you develop for H5P. I am well aware that some people will have trouble following, but I am sorry to (arrogantly) say: I don't care (anymore). There are tons of tutorials on hot to use git, on setting up web servers, on installing Drupal, and I don't see the point in creating yet another one. If you want to: Thumbs up for the initiative!
@@OliverTackeI mentioned the knowledge requirements for terminal commands and git not as a critique but only to point out that they are (besides installing npm) other prerequisites to follow your video. It is also a reminder for me if I write a tutorial for beginners like me not to forget these (even for me) not so apparent requirements. In the case of git, a beginner would not need an installation as (s)he could go the more conventional way in downloading and copying the files from the GitHub repository manually. In education settings, the *level* of requirements is always a critical point. It is not possible to explain things from the ground up. As a philosophical argument, this would lead to an endless regress. One would require to learn using the computer, or even typing, sitting on the chair, etc. You always have to choose a starting point and assume a certain level of knowledge. I wrote my comment under the perspective of what else is necessary to know that even a typical (power) user - clearly way below a programmer's level - could reproduce your steps.
Thanks for your help over on the H5P boards. Do you have a tutorial for how to accomplish this in a Wordpress environment? I'm struggling to get started but I'll get there eventually!
Hi Goster! No, I have not. As I have mentioned in the video, coding for H5P on WordPress is not fun, because the H5P plugin for WordPress doesn't provide the development features that the H5P plugin for Drupal 7 has. I don't recommend to do that.
Programming is new to me, but I would be super interested in dumbed down version of app building in h5p. Like something from start to finish. There are a few h5p modules on the Wordpress plugin that I would love to tweak. Feeling pretty confident after setting up my first WordPress site. Still don’t know how to easily collect and display xAPI data. Think thats the next step for me.
Welcome to the world of coding. I don't have any plans for such a tutorial, unfortunately, but there is a boilerplate template at github.com/otacke/snordian-h5p-boilerplate that one can use as a starting point for new content types, and the code of the WordPress plugin H5PxAPIkatchu at github.com/otacke/h5pxapikatchu contains all that is necessary to get hold of xAPI statements. You'd still need to process them as required, of course.
@@Zealwind I see. There already are two templates :-) One for "normal" content in the master branch of github.com/h5p/h5p-boilerplate and one for question type content types in the respective branch at github.com/h5p/h5p-boilerplate/tree/question-type
Hey Oliver, question... Do you plan uploading a video about the js files? For me, it's the most difficult part and the examples are not easy to understand because their js code is too complex. Thanks in advance!
@@OliverTacke JavaScript files which contain the logic of the H5P library. Their code look pretty different compared to when I code in vanilla JS. Maybe I should start looking at the code of the simplest library, do you know which is it?
It is mostly plain JavaScript :-) You will encounter some jQuery, some content types use React, one or two Vue. But apart from that, you essentially only need to implement a function named "attach" that H5P expects you to provide and return your content. A "Hello World" is the simplest example, probably? github.com/h5p/h5p-boilerplate/blob/master/src/scripts/h5p-hello-world.js
@@OliverTacke Ok thanks, I will look into it! And another question, in some examples there is something like this: "@augments H5P.EventDispatcher" but in the comment section. I want to look for information about it because I'm not used to it. Do you know how it's called? I cannot find anything by searching for something like "declarations in the comments".
That's a JSDoc comment (jsdoc.app/). It doesn't do anything to your code, but it can be used to automatically generate (API) documentation for yor code. Here the reader would learn that the function/class your looking at extends the `H5P.EventDispatcher` class (inheriting some functions for event messaging).
HI Oliver, I am looking to create H5p based quiz using the questions from API. If I import H5p quiz package from github, will I able to autogenerate the quiz and track the interactions in LRS ? I am not looking to embed H5p content, use drupal, rather buillding using js,HTML and css
I am not sure if I fully grasp what you are asking, but if you want to know how to store the scores of H5P content in Drupal, please look at h5p.org/documentation/for-authors/analyzing-results-and-answers
If it's about whether you can track progress with content types installed from github or your own: sure. It doesn't matter where they are installed from. If the content type supports xAPI, it will send scores, etc.
Hi, Oliver, why do I follow your video, but the console doesn't show up after the modification, it still shows the content before the modification, and only works every time I restart MAMP(maybe)?
Sorry, I am not entirely sure what you mean by "the console doesn't show up". Make sure you're browser is not caching things, either by having the development console open and checking the "disable cache" option or by reloading the page by pressing shift-F5. That has nothing to do with H5P though.
@@OliverTacke It worked, thank you very much!!! You are really awesome! I have another question to ask, when I add the true/false content type to the development folder, npm run build shows: Unknown command: "build", what should I do to make sure build and watch exist in package.json?
You can either ignore it (as it doesn't cause any harm) or fix it by deactivating the interest-cohort in Drupal's PHP settings file. It's a Drupal thing, not H5P related.
You can't. It doesn't have one. H5P Group meanwhile encourages to use the latest version of the H5P CLI tool (github.com/h5p/h5p-cli) which includes an inbuilt server to run content on.
How should I help you given that piece of information? Please use the H5P forum where the H5P community (including myself) helps each other (if you properly describe what the problem is). h5p.org/forum
Hello Oliver ! I created the greetingcard content type as a tutorial on h5p.org and it worked. Then I edited the css file. How do I see the changes when editing the css or js files ?
@@quynhhoang4241 If you have followed my tutorial (using development mode, doing the changes inside the development folder, re-building the content type if required), then all you need to do is reload your content.
Thanks, Oliver for sharing this set of tutorials about H5P, there is barely found some relevant tutorial for h5p developer but glad you did it. Appreciate
Thank you, Oliver, for your great videos.
They actually inspired me to make h5p coding options the topic of my masters thesis. :)
Cool! Would love to read it when you're done. Let me know if I can help somehow.
@@OliverTacke Thank you! Would indeed appreciate to chat with you about it sometime.
Hi Oliver, very clear explanation. Congratulations, I'm now following your channel!
Thanks!
Thanks Oliver! Awesome stuff. That was really useful. I am very interested to learn more about H5P development. Are you running Drupal locally? Please do more of these sort of videos when you can. Thanks again
Hi Ben! Yes, I run Drupal locally (and the other platforms :-)). I already recorded three other videos and three more are planned.
@Ollie bookmarked ;-)
There's more to come. Scheduled for tomorrow, December 11 and December 13 and then three more shortly after. If there are topics that I should cover, please let me know.
Thanks, Oliver! As you know, I am not a developer, so it was pretty hard stuff for me. The problem for me was not only to follow your video in every detail but rather to set up the server & development environment on my macOS (MAMP, Drupal 7).
BTW: I noticed that you still assumed some knowledge that is - I think - not common for the typical user. You explained how to install npm but not git, and even commands via terminal are not everyone's daily business. I am thinking of providing a tutorial based on your video to show some missing steps and the problems I confronted following your guide.
But all in all: Even me, I managed it following your video! 👍 👏
Glad you made it! As I explained right in the beginning, this video will neither turn you into a developer (not my intention) nor will it explain every potential detail of dev ops (not my intention). It's an overview of what you may need when you develop for H5P. I am well aware that some people will have trouble following, but I am sorry to (arrogantly) say: I don't care (anymore). There are tons of tutorials on hot to use git, on setting up web servers, on installing Drupal, and I don't see the point in creating yet another one. If you want to: Thumbs up for the initiative!
@@OliverTackeI mentioned the knowledge requirements for terminal commands and git not as a critique but only to point out that they are (besides installing npm) other prerequisites to follow your video. It is also a reminder for me if I write a tutorial for beginners like me not to forget these (even for me) not so apparent requirements. In the case of git, a beginner would not need an installation as (s)he could go the more conventional way in downloading and copying the files from the GitHub repository manually.
In education settings, the *level* of requirements is always a critical point. It is not possible to explain things from the ground up. As a philosophical argument, this would lead to an endless regress. One would require to learn using the computer, or even typing, sitting on the chair, etc. You always have to choose a starting point and assume a certain level of knowledge. I wrote my comment under the perspective of what else is necessary to know that even a typical (power) user - clearly way below a programmer's level - could reproduce your steps.
@@baumgartner53 When you download the archives manually and wonder why H5P CLI won't work, please don't ask me :-P
Thank you very much. Your works is very helpful for education.
Thanks for your help over on the H5P boards. Do you have a tutorial for how to accomplish this in a Wordpress environment? I'm struggling to get started but I'll get there eventually!
Hi Goster! No, I have not. As I have mentioned in the video, coding for H5P on WordPress is not fun, because the H5P plugin for WordPress doesn't provide the development features that the H5P plugin for Drupal 7 has. I don't recommend to do that.
Programming is new to me, but I would be super interested in dumbed down version of app building in h5p. Like something from start to finish. There are a few h5p modules on the Wordpress plugin that I would love to tweak. Feeling pretty confident after setting up my first WordPress site. Still don’t know how to easily collect and display xAPI data. Think thats the next step for me.
Welcome to the world of coding. I don't have any plans for such a tutorial, unfortunately, but there is a boilerplate template at github.com/otacke/snordian-h5p-boilerplate that one can use as a starting point for new content types, and the code of the WordPress plugin H5PxAPIkatchu at github.com/otacke/h5pxapikatchu contains all that is necessary to get hold of xAPI statements. You'd still need to process them as required, of course.
@@OliverTacke git’s on the list too ;) can’t make sense of the files there yet..
Interesting stuff. Please explain more about h5p coding. Btw, anyone interested in the code example can jump to 21:12
Thanks. Feel free to have a look at all the other H5P videos on my channel or to be a little more specific about what you're interested in.
@@OliverTacke interested how to made a content template. Thanks for the quick reply.
@@Zealwind I see. There already are two templates :-) One for "normal" content in the master branch of github.com/h5p/h5p-boilerplate and one for question type content types in the respective branch at github.com/h5p/h5p-boilerplate/tree/question-type
Trouble is Oliver, everybody in the professional Drupal world moved on to D8 and D9 several years ago.
I know. You're welcome to tell this to the H5P core team who can actually change their integrations and improve developer support. I cannot.
Hey Oliver, question... Do you plan uploading a video about the js files? For me, it's the most difficult part and the examples are not easy to understand because their js code is too complex. Thanks in advance!
What JavaScript files are you referring to? Anything in particular?
@@OliverTacke JavaScript files which contain the logic of the H5P library. Their code look pretty different compared to when I code in vanilla JS. Maybe I should start looking at the code of the simplest library, do you know which is it?
It is mostly plain JavaScript :-) You will encounter some jQuery, some content types use React, one or two Vue. But apart from that, you essentially only need to implement a function named "attach" that H5P expects you to provide and return your content.
A "Hello World" is the simplest example, probably? github.com/h5p/h5p-boilerplate/blob/master/src/scripts/h5p-hello-world.js
@@OliverTacke Ok thanks, I will look into it! And another question, in some examples there is something like this: "@augments H5P.EventDispatcher" but in the comment section. I want to look for information about it because I'm not used to it. Do you know how it's called? I cannot find anything by searching for something like "declarations in the comments".
That's a JSDoc comment (jsdoc.app/). It doesn't do anything to your code, but it can be used to automatically generate (API) documentation for yor code. Here the reader would learn that the function/class your looking at extends the `H5P.EventDispatcher` class (inheriting some functions for event messaging).
HI Oliver,
I am looking to create H5p based quiz using the questions from API. If I import H5p quiz package from github, will I able to autogenerate the quiz and track the interactions in LRS ? I am not looking to embed H5p content, use drupal, rather buillding using js,HTML and css
I am not sure if I fully grasp what you are asking, but if you want to know how to store the scores of H5P content in Drupal, please look at h5p.org/documentation/for-authors/analyzing-results-and-answers
If it's about whether you can track progress with content types installed from github or your own: sure. It doesn't matter where they are installed from. If the content type supports xAPI, it will send scores, etc.
Hi, Oliver, why do I follow your video, but the console doesn't show up after the modification, it still shows the content before the modification, and only works every time I restart MAMP(maybe)?
Sorry, I am not entirely sure what you mean by "the console doesn't show up". Make sure you're browser is not caching things, either by having the development console open and checking the "disable cache" option or by reloading the page by pressing shift-F5. That has nothing to do with H5P though.
@@OliverTacke It worked, thank you very much!!! You are really awesome! I have another question to ask, when I add the true/false content type to the development folder, npm run build shows: Unknown command: "build", what should I do to make sure build and watch exist in package.json?
That content type does not need to be built. The source files are the distribution files, too.
23:24 On the Console, I get the "Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'". How to fix it ? please help me
You can either ignore it (as it doesn't cause any harm) or fix it by deactivating the interest-cohort in Drupal's PHP settings file. It's a Drupal thing, not H5P related.
@@OliverTacke Thank you
How can you activate developer mode in Drupal 10? Thank you
You can't. It doesn't have one. H5P Group meanwhile encourages to use the latest version of the H5P CLI tool (github.com/h5p/h5p-cli) which includes an inbuilt server to run content on.
How to install drual7 and h5p？ Where can I get the introduction of it？
Have you tried drupal.org and h5p.org?
h5p work with localhost only, but in production domain no please help me
How should I help you given that piece of information?
Please use the H5P forum where the H5P community (including myself) helps each other (if you properly describe what the problem is). h5p.org/forum
Hello Oliver ! I created the greetingcard content type as a tutorial on h5p.org and it worked. Then I edited the css file. How do I see the changes when editing the css or js files ?
That depends on what platform you're running H5P on.
@@OliverTacke i use drupal to run h5p. And I don't know how to see the change when editing the code.
@@quynhhoang4241 If you have followed my tutorial (using development mode, doing the changes inside the development folder, re-building the content type if required), then all you need to do is reload your content.