{"id":22191794,"url":"https://github.com/bigbluebutton/plugin-h5p","last_synced_at":"2025-07-26T22:31:33.771Z","repository":{"id":246963965,"uuid":"813203670","full_name":"bigbluebutton/plugin-h5p","owner":"bigbluebutton","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-08T20:49:15.000Z","size":1594,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-26T22:34:23.183Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigbluebutton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-10T17:05:27.000Z","updated_at":"2024-11-08T20:49:19.000Z","dependencies_parsed_at":"2024-10-21T18:40:08.408Z","dependency_job_id":null,"html_url":"https://github.com/bigbluebutton/plugin-h5p","commit_stats":null,"previous_names":["bigbluebutton/plugin-h5p"],"tags_count":0,"template":false,"template_full_name":"bigbluebutton/plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbluebutton%2Fplugin-h5p","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbluebutton%2Fplugin-h5p/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbluebutton%2Fplugin-h5p/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbluebutton%2Fplugin-h5p/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigbluebutton","download_url":"https://codeload.github.com/bigbluebutton/plugin-h5p/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227724143,"owners_count":17810036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-02T12:17:48.676Z","updated_at":"2024-12-02T12:17:49.199Z","avatar_url":"https://github.com/bigbluebutton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# H5P Plugin\n\nContents:\n- [Running the Plugin from Source](#running-the-plugin-from-source);\n- [Building and installing the Plugin](#building-and-installing-the-plugin);\n- [How to use the plugin?](#how-to-use-it);\n\n\n## What is it?\n\nWhat it does is basically expand type of activities that Bigbluebutton supports by adding H5P into them.\n\nMoreover, this plugin has its specific libraries to properly render the h5p-content, so pay attention to the instructions ahead.\n\n### Currently supported activities:\n\n- Crossword Puzzle (https://github.com/otacke/h5p-crossword);\n- Drag-and-drop (https://github.com/h5p/h5p-drag-n-drop);\n\n\n## Running the Plugin from Source\n\n1. Build and deploy necessary libraries (make sure this is done inside the BBB's docker server):\n\n```bash\ncd $HOME/src/h5p-plugin # Directory under which this plugin is placed in your computer. \n./pack_dependencies.sh # This will fetch every library this plugin needs\n./deploy_package.sh\n```\n\nThese few lines will prepare the environment.\n\nAfter you done that, if you run the following command:\n\n```bash\nls /var/www/bigbluebutton-default/assets/plugins/h5p/\n```\n\nyou should get:\n\n```log\nFontAwesome-4.5\t\t     H5P.Question-1.5\t\t  cypress.config.d.ts\nH5P.AdvancedText-1.1\t     H5P.Transition-1.0\t\t  fonts\nH5P.Crossword-0.6\t     H5PEditor.ColorSelector-1.3  frame.bundle.js\nH5P.DragNBar-1.5\t     H5PEditor.DragQuestion-1.10  frame.js.map\nH5P.DragNDrop-1.1\t     H5PEditor.RangeList-1.0\t  jQuery.ui-1.10\nH5P.DragNResize-1.2\t     H5PEditor.ShowWhen-1.0\t  main.bundle.js\nH5P.DragQuestion-1.14\t     H5PEditor.TableList-1.0\t  main.js.map\nH5P.FontIcons-1.0\t     H5PEditor.VerticalTabs-1.3   src\nH5P.Image-1.1\t\t     H5PEditor.Wizard-1.2\t  styles\nH5P.JoubelUI-1.3\t     assets\nH5P.MaterialDesignIcons-1.0  content\n```\n\nOr something similar.\n\n2. Start the development server (outside of the BBB's docker server):\n\n```bash\ncd $HOME/bbb/bigbluebutton/h5p-plugin\nnpm install\nnpm start\n```\n\n3. Send create call with the following parameter:\n\n```\npluginManifests=[{\"url\":\"http://172.17.0.1:4701/manifest.json\"}]\n```\n\n## Building and installing the Plugin\n\nTo build the plugin for production use, follow these steps:\n\n1. Build and deploy necessary libraries (make sure this is done inside the BBB's server):\n\n```bash\ncd $HOME/src/h5p-plugin # Directory under which this plugin is placed in your computer. \n./pack_dependencies.sh # This will fetch every library this plugin needs\n./deploy_package.sh\n```\n\n2. Build and deploy the plugin itself:\n\n```bash\ncd $HOME/src/h5p-plugin\nnpm install\nnpm run build-bundle\n```\n\nThe above commands will generate the `dist` folder containing the bundled JavaScript file named `H5pPlugin.js`. This file can be hosted on any HTTPS server.\n\nPreferebly, that bundled js file is placed into the Bigbluebutton's assets portion of the server, so for that, do the following: \n\n```bash\nmkdir -p /var/www/bigbluebutton-default/assets/plugins/plugin-h5p/\ncp H5pPlugin.js /var/www/bigbluebutton-default/assets/plugins/plugin-h5p/\n```\n\nThis will make this plugin available on `https://\u003cyour-host\u003e/plugins/plugin-h5p/H5pPlugin.js`\n\nTo use the plugin with BigBlueButton, add the plugin's manifest URL to the parameter as shown below:\n\n```\npluginManifests=[{\"url\":\"http://\u003cyourdomain\u003e/path/to/manifest.json\"}]\n```\n\n## How to use it?\n\nOnce it is inside your server and all the settings are correctly placed, it is already running in any meeting you create. But there are a couple of things you need to pay attention when running this plugin, so here I will let a step-by-step on how to properly run the activity:\n\n### Prepare a presentation\n\nThe basic concept is that the H5P activity will be placed inside a presentation, and once the plugin reads the presentation, it will make a button available for you to play the H5P activity. So a question that arises: \"How can I prepare a presentation to render the H5P?\".\n\n1. Get a `.h5p` archive:\n\nThe `.h5p` archive is available for you to download whenever you create an h5p activity. One way to do this is:\n- Go to https://h5p.org/ (or a Learning Management System that supports H5P activity creation like self-hosted moodle or Drupal. I will follow the steps from `h5p.org`);\n- Log into your account or create a new one;\n- If you have some activities already, click on any of them (and jump to later instructions with a \"*\"), if you don't have click \"Try out H5P\";\n- On the H5P activity creation page select you activity type, which in our case is Crossword (But you can choose any of the supported ones here in the Bigbluebutton integration, see section [Currently supported activities](#currently-supported-activities));\n- Create your activity;\n- *Once the activity is created, open it and you'll see on the bottom of it two buttons: \"Reuse\" and \"Embed\", click the \"Reuse\" one and click to download it.\n\nDone, there you have the `.h5p` archive.\n\n2. Build the Activity JSON:\n\nOnce you have the `.h5p` archive in hands, just unzip it and you'll see a folder in which there are a lot of files and folders.\nInside the unzipped folder, search for 2 files:\n\n- `h5p.json`;\n- `content/content.json`;\n\nCopy the contents of those 2 files and create a JSON in the following structure:\n```JSON\n{\n  \"contentAsJson\": {}, // \u003cPaste here the content of the second file, i.e. `content/content.json`\u003e \n  \"h5pAsJson\": {} // \u003cPaste here the content of the first file, i.e. `h5p.json`\u003e \n}\n```\n\nYou now have the activity json, to finish up, prepend the word `H5P` to this content you just created, the end result should look something like:\n\n```JSON\nH5P{\n  \"contentAsJson\": {}, // \u003cPaste here the content of the second file, i.e. `content/content.json`\u003e \n  \"h5pAsJson\": {} // \u003cPaste here the content of the first file, i.e. `h5p.json`\u003e \n}\n```\n\nCopy all that string and store it somewhere.\n\n3. Create the presentation:\n\nNow create a `.pptx` and within a slide of your choice, paste the content you create on the previous item (this slide can have other stuff written in it, but we advise you to just keep it to a title and this content).\n\nDone, you have the prepared presentation.\n\nWe highly recommend to already convert to `.pdf` since it is a more stable format.\n\n### Play an activity\n\n1. Play around:\n\nWith that presentation in hands, just upload it to Bigbluebutton and go to the prepared slide, you'll see a button labeled \"Play H5P\" on the toolbar of the presentation (bottom of the presentation). When you click that button you'll have the activity running for any non-presenter user.\n\n2. Minor detail:\n\nThere are some activities that need assets such as images and videos, which come insed of the `.h5p` archive under the `content/` directory, for instance, `content/images` (Drag-and-drop is one of them). If that's the case for you, you need to copy all those asset files over to `/var/www/bigbluebutton-default/assets/plugins/h5p/content/`, so for instance:\n\n```bash\ncp -r content/images /var/www/bigbluebutton-default/assets/plugins/h5p/content/\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigbluebutton%2Fplugin-h5p","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigbluebutton%2Fplugin-h5p","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigbluebutton%2Fplugin-h5p/lists"}