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

Improve H5P Atto button to upload content

XMLWordPrintable

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE
    • MDL-66399-master-6
    • Hide

      Setup

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

      Testing scenario 1: Add a H5P file using the Atto button

      1. Add a new page "PageOne"
      2. Add some text in the Page content editor
      3. Verify the H5P icon is displayed in the "Insert H5P" button, at the end of the Atto toolbar
      4. Click the "Insert H5P" button in the Atto toolbar
      5. Click "Browse repositories"
      6. Upload the attached h5p file (ipsums.h5p)
      7. Open the H5P options and make sure none of the radios are checked
      8. Click "Insert H5P"
      9. Verify a grey placeholder box with the H5P icon text is shown in the Atto editor
      10. Verify the grey placeholder box does not change the Atto editor size, it should fit the Atto width
      11. Verify you can place the cursor below the H5P box and write some text
      12. Save the page
      13. Verify you can see the "Ipsums" H5P content (a accordion style content type)
      14. Verify there are no buttons underneath for embed or download.

      Testing scenario 2: Edit a H5P file settings

      1. In course C1 edit the page "PageOne"
      2. Double click the H5P placeholder
      3. Verify the "Insert H5P" dialogue opens and the "course-presentation-21-21180.h5p" file url is set in the "H5P file upload" input field
      4. Open the H5P options and check the "Allow download" option
      5. Click "Insert H5P"
      6. Verify you can see the "course-presentation-21-21180.h5p" H5P content and it has a download button in a frame below the content. (h5p content can be compared to the one here https://h5p.org/presentation)
      7. Edit the page "PageOne" again and change the H5P options
      8. Now check the "Embed button" option
      9. Click "Insert H5P"
      10. Verify you can see the "course-presentation-21-21180.h5p" H5P content and it has a embed button in a frame below the content.
      11. Edit the page "PageOne" again and change the H5P options
      12. Now check the "Copyright" option
      13. Click "Insert H5P"
      14. Verify you can see the "Ipsums" H5P content and it has a copyright button in a frame below the content.
         

        Testing scenario 3: Add a H5P embed code using the Atto button

      1. Go to https://h5p.org/content-types-and-applications
      2. Select any example content type
      3. View the content type and click the <> embed button in the frame underneath the content
      4. Copy the embed code
      5. Go back to your Moodle course C1
      6. Add a new page PageTwo
      7. Add some text in the Page content editor
      8. Click the "Insert H5P" button in the Atto toolbar
      9. In the "URL or Embed code" field past the H5P embed code from h5p.org
      10. Click "Insert H5P"
      11. Verify a grey placeholder box with the H5P icon text is shown in the Atto editor
      12. Save the page
      13. Verify you can see the example content type in your PageTwo.

      Testing scenario 4: Add a H5P URL the Atto button

      1. Add a new page PageThree
      2. Add some text in the Page content editor
      3. Verify the H5P icon is displayed in the "Insert H5P" button, at the end of the Atto toolbar
      4. Click the "Insert H5P" button in the Atto toolbar
      5. In the field "URL or Embed code" enter this url: "https://moodle.h5p.com/content/1290772960722742119"
      6. Click "Insert H5P"
      7. Save the page
      8. Verify you can see the example content type (ipsums accordion again) in your PageThree.
      Show
      Setup Login as admin Add a new course C1 Testing scenario 1: Add a H5P file using the Atto button Add a new page "PageOne" 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 Click "Browse repositories" Upload the attached h5p file (ipsums.h5p) Open the H5P options and make sure none of the radios are checked Click "Insert H5P" Verify a grey placeholder box with the H5P icon text is shown in the Atto editor Verify the grey placeholder box does not change the Atto editor size, it should fit the Atto width Verify you can place the cursor below the H5P box and write some text Save the page Verify you can see the "Ipsums" H5P content (a accordion style content type) Verify there are no buttons underneath for embed or download. Testing scenario 2: Edit a H5P file settings In course C1 edit the page "PageOne" Double click the H5P placeholder Verify the "Insert H5P" dialogue opens and the "course-presentation-21-21180.h5p" file url is set in the "H5P file upload" input field Open the H5P options and check the "Allow download" option Click "Insert H5P" Verify you can see the "course-presentation-21-21180.h5p" H5P content and it has a download button in a frame below the content. (h5p content can be compared to the one here https://h5p.org/presentation ) Edit the page "PageOne" again and change the H5P options Now check the "Embed button" option Click "Insert H5P" Verify you can see the "course-presentation-21-21180.h5p" H5P content and it has a embed button in a frame below the content. Edit the page "PageOne" again and change the H5P options Now check the "Copyright" option Click "Insert H5P" Verify you can see the "Ipsums" H5P content and it has a copyright button in a frame below the content.   Testing scenario 3: Add a H5P embed code using the Atto button Go to https://h5p.org/content-types-and-applications Select any example content type View the content type and click the <> embed button in the frame underneath the content Copy the embed code Go back to your Moodle course C1 Add a new page PageTwo Add some text in the Page content editor Click the "Insert H5P" button in the Atto toolbar In the "URL or Embed code" field past the H5P embed code from h5p.org Click "Insert H5P" Verify a grey placeholder box with the H5P icon text is shown in the Atto editor Save the page Verify you can see the example content type in your PageTwo. Testing scenario 4: Add a H5P URL the Atto button Add a new page PageThree 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 In the field "URL or Embed code" enter this url: "https://moodle.h5p.com/content/1290772960722742119" Click "Insert H5P" Save the page Verify you can see the example content type (ipsums accordion again) in your PageThree.
    • H5P Sprint 2, H5P Sprint 3, H5P Sprint Relase 3.8

      Tasks:

      • Add TAB Pane for Upload H5P content
      • Unzip uploaded file and save in the file system
      • Fill  h5p table with needed information
      • Add the right embed code:

      <iframe src="https://moodlesite/h5p/embed.php?id=xx" 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>

      Note: The requirements for this button have changed:

      • The file upload is no longer shown in a separate tab as decided by the UX team
      • The wording of Dialogue has changed
      • The button does not interact with the h5p DB
      • When a file is uploaded a placeholder image is shown with the h5p file url hidden inside.

      <div class="h5p-placeholder">
      		 
            http://nucky.fritz.box/moodle_h5p/draftfile.php/5/user/draft/957921139/ipsums.h5p
      		 
      </div>

        1. course-presentation-21-21180.h5p
          4.33 MB
        2. h5p_displayoptions_disabled.png
          h5p_displayoptions_disabled.png
          27 kB
        3. h5p-white.png
          h5p-white.png
          6 kB
        4. h5p-white.svg
          1 kB
        5. ipsums.h5p
          529 kB
        6. newui3.png
          newui3.png
          113 kB
        7. scenario01.gif
          scenario01.gif
          690 kB
        8. scenario01.gif
          scenario01.gif
          690 kB
        9. scenario02.gif
          scenario02.gif
          7.65 MB
        10. scenario03.gif
          scenario03.gif
          658 kB
        11. scenario04.gif
          scenario04.gif
          228 kB
        12. Screenshot 2019-09-25 at 17.16.50.png
          Screenshot 2019-09-25 at 17.16.50.png
          111 kB
        13. Screenshot 2019-09-26 at 10.42.49.png
          Screenshot 2019-09-26 at 10.42.49.png
          82 kB
        14. Screenshot 2019-09-26 at 15.11.18.png
          Screenshot 2019-09-26 at 15.11.18.png
          80 kB
        15. Screenshot 2019-10-01 at 11.34.30.png
          Screenshot 2019-10-01 at 11.34.30.png
          98 kB
        16. select files.png
          select files.png
          15 kB

            basbrands Bas Brands
            amaia Amaia Anabitarte
            Carlos Escobedo Carlos Escobedo
            Andrew Lyons Andrew Lyons
            Ferran Recio Ferran Recio
            Votes:
            0 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 week, 2 days, 4 hours, 43 minutes
                1w 2d 4h 43m

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