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

Create the basic skeleton, library and interfaces for rendering H5P content

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.8
    • 3.8
    • H5P
    • MOODLE_38_STABLE
    • MOODLE_38_STABLE
    • MDL-66609-master
    • Hide

       Setup

      1. Upload the test-h5p.html file to the $CFG->wwwroot.
      2. Login as admin.
      3. Go to the dashboard.
      4. Access to the private files block.
      5. Create the following folder: "Folder with spaces".
      6. Upload the files arithmetic-quiz.h5p, invalid.h5p and latex-demo.h5p to the root folder.
      7. Upload the course-presentation.h5p to the "Folder with spaces" folder.
      8. Save the changes.
      9. Create a student (s1).
      10. Create a course "Course 1".
      11. Access to the course.
      12. Create a "Folder" resource.
      13. Upload the interactive-video.h5p to the "Folder".
      14. Create a "Forum" activity (forum1).

       

      Testing scenario 1. Valid H5P file

      1. In the Private files block, copy the URL for the file arithmetic-quiz.h5p in the root (you'll get it right-clicking over the filename). It should be something like http://moodle.server/pluginfile.php/5/user/private/arithmetic-quiz.h5p?forcedownload=1
      2. Open $CFG->wwwroot/test-h5p.html in a new tab.
      3. Paste the previous URL into the "H5P file URL" form field.
      4. Click the Display button.
      5. Check the H5P content is displayed and working as expected. It should show some multiplications, like this: https://h5p.org/arithmetic-quiz 
      6. Check a sound is played when an answer is given regardless if it's right or wrong.
      7. Check there isn't a grey bar below the H5P content.

       

      Testing scenario 2. Invalid H5P file

      1. In the Private files block, copy the URL for the file invalid.h5p in the root.
      2. Open $CFG->wwwroot/test-h5p.html in a new tab.
      3. Paste the previous URL into the "H5P file URL" form field.
      4. Click the Display button.
      5. Check the following exception is displayed: "not-in-whitelist : File "content/phet.html" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt.".

       

      Testing scenario 3. Valid H5P file in a folder with spaces, with the action bar displayed

      1. In the Private files block, copy the URL for the file course-presentation.h5p in "Folder with spaces".
      2. Open $CFG->wwwroot/test-h5p.html in a new tab.
      3. Paste the previous URL into the "H5P file URL" form field.
      4. Select all the checkboxes (frame, embed, export and copyright).
      5. Click the Display button.
      6. Check the H5P content is displayed and working as expected. It should show a presentation like this: https://h5p.org/presentation 
      7. Check a grey bar is displayed below the H5P content with the following buttons: "Reuse", "Rights of use", "Embed".
      8. Click the "Reuse" button.
      9. Check you can download an H5P file.
      10. Click the "Rights of use" button.
      11. Check a new popup is opened with information about some files used in the presentation.
      12. Click the "Embed" button.
      13. Check a popup is displayed with the code for embedding this H5P content.
      14. Copy this code. 
      15. Access to "Course 1" and create a Page 
      16. In the Content field, display all the Atto buttons (clicking the first button) and click the HTML one (usually it's the last one with a symbol like this </>).
      17. Paste the code copied in #14.
      18. Save the page.
      19. Check the H5P content is displayed on the page.
      20. Check there isn't a grey bar below the H5P content.
      21. Upload the file downloaded in step #9 to the root of the private files.
      22. Copy the URL for this file from the Private files block.
      23. Open $CFG->wwwroot/test-h5p.html in a new tab.
      24. Paste the previous URL into the "H5P file URL" form field.
      25. Click the Display button.
      26. Check the H5P content is displayed and working as expected.
      27. Check there isn't a grey bar below the H5P content.

       

      Testing scenario 4. H5P content with addon

      1. In the Private files block, copy the URL for the latex-demo.h5p in the root.
      2. Open $CFG->wwwroot/test-h5p.html in a new tab.
      3. Paste the previous URL into the "H5P file URL" form field.
      4. Click the Display button.
      5. Check the H5P content is displayed and working as expected, and the formulas are rendered correctly. It should show a presentation like this: https://h5p.org/presentation 

       

      Testing scenario 5. User permissions accessing to the H5P content

      1. In the Private files block, copy the URL for the file arithmetic-quiz.h5p in the root.
      2. Open $CFG->wwwroot/test-h5p.html in a new tab.
      3. Paste the previous URL into the "H5P file URL" form field.
      4. Click the Display button.
      5. Check the H5P content is displayed and working as expected. It should show some multiplications, like this: https://h5p.org/arithmetic-quiz 
      6. Copy the URL.
      7. Open a different browser (for instance, if you're using Chrome, open Firefox).
      8. Paste the previous URL.
      9. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file."
      10. Open a new tab in the browser2.
      11. Login as s1 (for now, this student isn't enrolled in Course 1).
      12. Reload the first tab in browser2.
      13. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file."
      14. Access to the first browser (the one where admin user is logged-in).
      15. Go to the "Course 1".
      16. Click on the "Folder" resource and copy the URL for the interactive-video.h5p file.
      17. Open $CFG->wwwroot/test-h5p.html in a new tab.
      18. Paste the previous URL into the "H5P file URL" form field.
      19. Click the Display button.
      20. Check the H5P content is displayed.
      21. Copy the URL.
      22. Access to the second browser (the one where s1 is logged-in).
      23. Paste the previous URL.
      24. Check the following error message is displayed: "Course or activity not accessible. (Not enrolled)"
      25. Access to the first browser (the one where admin user is logged-in).
      26. Enrol s1 to the "Course1".
      27. Access to the second browser (the one where s1 is logged-in).
      28. Reload the page.
      29. Check the H5P content is displayed and working as expected. It should show the Smoothie interactive video: https://h5p.org/interactive-video 
      30. Access to the first browser (the one where admin user is logged-in).
      31. Hide the "Folder" resource.
      32. Access to the second browser (the one where s1 is logged-in).
      33. Reload the page.
      34. Check the following error message is displayed: "Course or activity not accessible. (Activity is hidden)".
      35. Close the second browser.
      36. Access to the first browser (the one where admin user is logged-in).
      37. Show the "Folder" resource.

       

      Testing scenario 6. H5P content for guests

      1. In the Private files block, copy the URL for the file arithmetic-quiz.h5p in the root.
      2. Open $CFG->wwwroot/test-h5p.html in a new tab.
      3. Paste the previous URL into the "H5P file URL" form field.
      4. Click the Display button.
      5. Check the H5P content is displayed and working as expected. 
      6. Copy the URL.
      7. Open a different browser (for instance, if you're using Chrome, open Firefox).
      8. Paste the previous URL.
      9. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file."
      10. Open a new tab in the browser2.
      11. Login as guest.
      12. Access to the previous page and reload the page.
      13. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file."
      14. Access to the first browser (the one where admin user is logged-in).
      15. Go to the "Course 1".
      16. Click on the "Folder" resource and copy the URL for the interactive-video.h5p file.
      17. Open $CFG->wwwroot/test-h5p.html in a new tab.
      18. Paste the previous URL into the "H5P file URL" form field.
      19. Click the Display button.
      20. Check the H5P content is displayed.
      21. Copy the URL.
      22. Access to the second browser (the one where the guest is logged-in).
      23. Paste the previous URL.
      24. Check the following error message is displayed: "Course or activity not accessible. (Not enrolled)".
      25. Access to the first browser (the one where admin user is logged-in).
      26. Enable access for guests (Participants / Enrolment methods / Guest access)
      27. Access to the second browser (the one where the guest is logged-in).
      28. Reload the page.
      29. Check the H5P content is displayed and working as expected

        

      Testing scenario 7. Change display options depending on the permissions

      1. Login as admin.
      2. Go to the "Course 1".
      3. Click on the "Folder" resource and copy the URL for the interactive-video.h5p file.
      4. Open $CFG->wwwroot/test-h5p.html in a new tab.
      5. Paste the previous URL into the "H5P file URL" form field.
      6. Select the checkboxes embed and copyright.
      7. Click the Display button.
      8. Check the H5P content is displayed and working as expected.
      9. Check a grey bar is displayed below the H5P content with the following buttons: "Rights of use", "Embed".
      10. Open again $CFG->wwwroot/test-h5p.html in a new tab.
      11. Paste the previous URL into the "H5P file URL" form field.
      12. Click the Display button.
      13. Check the H5P content is displayed and working as expected.
      14. Check there isn't a grey bar below the H5P content.
      15. Open a different browser (for instance, if you're using Chrome, open Firefox).
      16. Login as s1.
      17. Open $CFG->wwwroot/test-h5p.html
      18. Paste the previous URL into the "H5P file URL" form field.
      19. Select all the checkboxes (frame, embed, export and copyright).
      20. Click the Display button.
      21. Check the H5P content is displayed and working as expected.
      22. Check there isn't a grey bar below the H5P content.

       

      Testing scenario 8. Deploy H5P content depending on the permissions

      1. Login as s1.
      2. Go to the "Course 1".
      3. Post a message to the forum1 and add the interactive-video.h5p file as an attachment.
      4. Copy the URL for the interactive-video.h5p file attached to the forum post.
      5. Open $CFG->wwwroot/test-h5p.html in a new tab.
      6. Paste the previous URL into the "H5P file URL" form field.
      7. Click the Display button.
      8. Check the following error message is displayed: "This file can't be displayed because it has been uploaded by a user without the required capability to deploy H5P content."
      9. Open a different browser (for instance, if you're using Chrome, open Firefox).
      10. Log in as admin.
      11. Edit the Forum activity (forum1) permissions.
      12. Add the "Student" to the Roles with permission for the "Allow to deploy H5P content" capability.
      13. Access to the first browser (the one where admin user is logged-in).
      14. Reload the page.
      15. Check the H5P content is displayed and working as expected.
      Show
       Setup Upload the test-h5p.html file to the $CFG->wwwroot. Login as admin. Go to the dashboard. Access to the private files block. Create the following folder: "Folder with spaces". Upload the files arithmetic-quiz.h5p, invalid.h5p and latex-demo.h5p to the root folder. Upload the course-presentation.h5p to the "Folder with spaces" folder. Save the changes. Create a student (s1). Create a course "Course 1". Access to the course. Create a "Folder" resource. Upload the interactive-video.h5p to the "Folder". Create a "Forum" activity (forum1).   Testing scenario 1. Valid H5P file In the Private files block, copy the URL for the file arithmetic-quiz.h5p in the root (you'll get it right-clicking over the filename). It should be something like  http://moodle.server/pluginfile.php/5/user/private/arithmetic-quiz.h5p?forcedownload=1 Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed and working as expected. It should show some multiplications, like this: https://h5p.org/arithmetic-quiz   Check a sound is played when an answer is given regardless if it's right or wrong. Check  there isn't a grey bar below the H5P content.   Testing scenario 2. Invalid H5P file In the Private files block, copy the URL for the file invalid.h5p in the root. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the following exception is displayed: " not-in-whitelist : File "content/phet.html" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt. ".   Testing scenario 3. Valid H5P file in a folder with spaces, with the action bar displayed In the Private files block, copy the URL for the file course-presentation.h5p in "Folder with spaces". Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Select all the checkboxes (frame, embed, export and copyright). Click the Display button. Check the H5P content is displayed and working as expected. It should show a presentation like this:  https://h5p.org/presentation   Check a grey bar is displayed below the H5P content with the following buttons: "Reuse", "Rights of use", "Embed". Click the "Reuse" button. Check you can download an H5P file. Click the "Rights of use" button. Check a new popup is opened with information about some files used in the presentation. Click the "Embed" button. Check a popup is displayed with the code for embedding this H5P content. Copy this code.  Access to "Course 1" and create a Page  In the Content field, display all the Atto buttons (clicking the first button) and click the HTML one (usually it's the last one with a symbol like this </>). Paste the code copied in #14. Save the page. Check the H5P content is displayed on the page. Check  there isn't a grey bar below the H5P content. Upload the file downloaded in step #9 to the root of the private files. Copy the URL for this file from the Private files block. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed and working as expected. Check  there isn't a grey bar below the H5P content.   Testing scenario 4. H5P content with addon In the Private files block, copy the URL for the latex-demo.h5p in the root. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed and working as expected, and the formulas are rendered correctly. It should show a presentation like this:  https://h5p.org/presentation     Testing scenario 5. User permissions accessing to the H5P content In the Private files block, copy the URL for the file arithmetic-quiz.h5p in the root. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed and working as expected. It should show some multiplications, like this: https://h5p.org/arithmetic-quiz   Copy the URL. Open a different browser (for instance, if you're using Chrome, open Firefox). Paste the previous URL. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file." Open a new tab in the browser2. Login as s1 (for now, this student isn't enrolled in Course 1). Reload the first tab in browser2. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file." Access to the first browser (the one where admin user is logged-in). Go to the "Course 1". Click on the "Folder" resource and copy the URL for the interactive-video.h5p file. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed. Copy the URL. Access to the second browser (the one where s1 is logged-in). Paste the previous URL. Check the following error message is displayed: "Course or activity not accessible. (Not enrolled)" Access to the first browser (the one where admin user is logged-in). Enrol s1 to the "Course1". Access to the second browser (the one where s1 is logged-in). Reload the page. Check the H5P content is displayed and working as expected. It should show the Smoothie interactive video: https://h5p.org/interactive-video   Access to the first browser (the one where admin user is logged-in). Hide the "Folder" resource. Access to the second browser (the one where s1 is logged-in). Reload the page. Check the following error message is displayed: "Course or activity not accessible. (Activity is hidden)". Close the second browser. Access to the first browser (the one where admin user is logged-in). Show the "Folder" resource.   Testing scenario 6. H5P content for guests In the Private files block, copy the URL for the file arithmetic-quiz.h5p in the root. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed and working as expected.  Copy the URL. Open a different browser (for instance, if you're using Chrome, open Firefox). Paste the previous URL. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file." Open a new tab in the browser2. Login as guest. Access to the previous page and reload the page. Check the following error message is displayed: "This H5P content can't be displayed because you don't have access to the .h5p file." Access to the first browser (the one where admin user is logged-in). Go to the "Course 1". Click on the "Folder" resource and copy the URL for the interactive-video.h5p file. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed. Copy the URL. Access to the second browser (the one where the guest is logged-in). Paste the previous URL. Check the following error message is displayed: "Course or activity not accessible. (Not enrolled)". Access to the first browser (the one where admin user is logged-in). Enable access for guests (Participants / Enrolment methods / Guest access) Access to the second browser (the one where the guest is logged-in). Reload the page. Check the H5P content is displayed and working as expected    Testing scenario 7. Change display options depending on the permissions Login as admin. Go to the "Course 1". Click on the "Folder" resource and copy the URL for the interactive-video.h5p file. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Select the checkboxes embed and copyright. Click the Display button. Check the H5P content is displayed and working as expected. Check a grey bar is displayed below the H5P content with the following buttons: "Rights of use", "Embed". Open again $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the H5P content is displayed and working as expected. Check  there isn't a grey bar below the H5P content. Open a different browser (for instance, if you're using Chrome, open Firefox). Login as s1. Open $CFG->wwwroot/test-h5p.html Paste the previous URL into the "H5P file URL" form field. Select all the checkboxes (frame, embed, export and copyright). Click the Display button. Check the H5P content is displayed and working as expected. Check  there isn't a grey bar below the H5P content.   Testing scenario 8. Deploy H5P content depending on the permissions Login as s1. Go to the "Course 1". Post a message to the forum1 and add the interactive-video.h5p file as an attachment. Copy the URL for the interactive-video.h5p file attached to the forum post. Open $CFG->wwwroot/test-h5p.html in a new tab. Paste the previous URL into the "H5P file URL" form field. Click the Display button. Check the following error message is displayed: "This file can't be displayed because it has been uploaded by a user without the required capability to deploy H5P content." Open a different browser (for instance, if you're using Chrome, open Firefox). Log in as admin. Edit the Forum activity (forum1) permissions. Add the "Student" to the Roles with permission for the "Allow to deploy H5P content" capability. Access to the first browser (the one where admin user is logged-in). Reload the page. Check the H5P content is displayed and working as expected.
    • H5P Sprint 2, H5P Sprint 3, H5P Sprint Relase 3.8

      Create a basic skeleton for the H5P integration. It will include the minimum required for making work the H5P renderer.

        1. arithmetic-quiz.h5p
          731 kB
          Sara Arjona (@sarjona)
        2. course-presentation.h5p
          4.14 MB
          Sara Arjona (@sarjona)
        3. interactive-video.h5p
          2.84 MB
          Sara Arjona (@sarjona)
        4. invalid.h5p
          426 kB
          Sara Arjona (@sarjona)
        5. latex-demo.h5p
          711 kB
          Sara Arjona (@sarjona)
        6. test_loadLibrary.png
          97 kB
          Victor Déniz Falcón
        7. Test 1_Screenshot.png
          98 kB
          Gladys Basiana
        8. Test 2_Screenshot.PNG
          24 kB
          Gladys Basiana
        9. Test 3_Screenshot.png
          6.53 MB
          Gladys Basiana
        10. Test 4_Screenshot.PNG
          20 kB
          Gladys Basiana
        11. Test 5_Screenshot.png
          2.60 MB
          Gladys Basiana
        12. Test 6_Screenshot.png
          5.08 MB
          Gladys Basiana
        13. Test 7_Screenshot.png
          6.34 MB
          Gladys Basiana
        14. Test 8_Screenshot.png
          2.15 MB
          Gladys Basiana
        15. test-h5p.html
          0.4 kB
          Sara Arjona (@sarjona)

            sarjona Sara Arjona (@sarjona)
            sarjona Sara Arjona (@sarjona)
            Victor Déniz Falcón Victor Déniz Falcón
            Andrew Lyons Andrew Lyons
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            16 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 weeks, 1 hour, 30 minutes
                4w 1h 30m

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