Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-66388

Create a new button in Atto to add H5P content in anywhere from hp5.com and h5p.org external URLs

XMLWordPrintable

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE
    • MDL-66388-master-2
    • Hide

      Setup

      1. Login as admin
      2. Add a new course C1

      Testing scenario 1: Add H5P content using the Atto button

      1. Add a new page PageOne
      2. Give the page a title
      3. Add some text in the Page content editor
      4. Verify the H5P icon is displayed in the "Insert H5P" button, at the end of the Atto toolbar
      5. Click the "Insert H5P" button in the Atto toolbar
      6. Enter an H5P URL for example "https://moodle.h5p.com/content/1290772960722742119" or "https://h5p.org/h5p/embed/576651"
      7. Verify a grey box with the H5P text is shown in the Atto editor (instead of the H5P content)
      8. Verify the H5P content does not change the Atto editor size, it should fit the Atto width
      9. Place the cursor below the H5P box and write some text
      10. Click "Save and display"
      11. Verify the H5P content is displayed

       

      Testing scenario 2: Remove H5P content

      1. Edit the previous page
      2. Click the "Insert H5P" button in the Atto toolbar
      3. Enter an H5P URL for example "https://moodle.h5p.com/content/1290772960722742119" or "https://h5p.org/h5p/embed/576651"
      4. Verify a grey box with the H5P text is shown in the Atto editor (instead of the H5P content)
      5. Remove the H5P content from the editor
      6. Verify the grey box disappears
      7. Click "Save and display"
      8. Verify the H5P content is displayed

       

      Testing scenario 3: Check the admin setting

      1. Access to "Site administration > Plugins > Text editors > Atto HTML editor > Atto toolbar settings"
      2. Verify the "Insert H5P" component is displayed in the table
      3. Verify "h5p" appears in the "files" row in the "Toolbar config" setting.
      Show
      Setup Login as admin Add a new course C1 Testing scenario 1: Add H5P content using the Atto button Add a new page PageOne Give the page a title Add some text in the Page content editor Verify  the H5P icon is displayed in the "Insert H5P" button, at the end of the Atto toolbar Click the "Insert H5P" button in the Atto toolbar Enter an H5P URL for example "https://moodle.h5p.com/content/1290772960722742119" or "https://h5p.org/h5p/embed/576651" Verify a grey box with the H5P text is shown in the Atto editor (instead of the H5P content) Verify the H5P content does not change the Atto editor size, it should fit the Atto width Place the cursor below the H5P box and write some text Click "Save and display" Verify the H5P content is displayed   Testing scenario 2: Remove H5P content Edit the previous page Click the "Insert H5P" button in the Atto toolbar Enter an H5P URL for example "https://moodle.h5p.com/content/1290772960722742119" or "https://h5p.org/h5p/embed/576651" Verify a grey box with the H5P text is shown in the Atto editor (instead of the H5P content) Remove the H5P content from the editor Verify the grey box disappears Click "Save and display" Verify the H5P content is displayed   Testing scenario 3: Check the admin setting Access to "Site administration > Plugins > Text editors > Atto HTML editor > Atto toolbar settings" Verify the "Insert H5P" component is displayed in the table Verify "h5p" appears in the "files" row in the "Toolbar config" setting.
    • H5P Sprint 1, H5P Sprint 2, H5P Sprint 3

      As a tool for content creators, to make it easier to use existing H5P content in Moodle, we have to create a new Atto button to add H5P content. The behavior of the new “insert H5P content” button allows to add a new URL to an external H5P content.

      For URLs like https://xxx.h5p.com/content/yyy or https://h5p.org/h5p/embed/yyy the button should add the HTML code above:

       

      <iframe src="https://xxx.h5p.com/content/yyy/embed" width="www" height="hhh" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://xxx.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>

      or

      <iframe src="https://h5p.org/h5p/embed/yyy" width="www" height="hhh" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
      		 
      <script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
      		 
        

       

      Tasks:

      • Create a basic skeleton H5P plugin for Atto
      • Create templates/icon/styles for JS tabs
      • Add TAB Pane for Embed URL H5P. Allow external URLs from h5p.com and hp5.org
      • Create new capability for using H5P atto button
      • Create callbacks
      • Privacy: No user data

        1. edit_media_atto.png
          edit_media_atto.png
          16 kB
        2. h5pgreybox.png
          h5pgreybox.png
          20 kB
        3. h5pvslink.png
          h5pvslink.png
          21 kB
        4. Screenshot_1.png
          Screenshot_1.png
          65 kB
        5. Screenshot_2.png
          Screenshot_2.png
          81 kB
        6. Screenshot 2019-08-23 at 15.24.30.png
          Screenshot 2019-08-23 at 15.24.30.png
          72 kB
        7. Screenshot 2019-08-23 at 15.24.34.png
          Screenshot 2019-08-23 at 15.24.34.png
          87 kB
        8. Screenshot 2019-08-23 at 15.25.38.png
          Screenshot 2019-08-23 at 15.25.38.png
          75 kB

            basbrands Bas Brands
            amaia Amaia Anabitarte
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Adrian Greeve Adrian Greeve
            Janelle Barcega Janelle Barcega
            Votes:
            3 Vote for this issue
            Watchers:
            11 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 2 hours, 6 minutes
                4d 2h 6m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.