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

H5P editor integration

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-67814-master
    • Hide

      Setup

      1. Login as admin.
      2. Create the course "H5P editor testing" (shortname c1).
      3. In course c1, add a Page in Topic 1 section:
        1. Name: Slider.
        2. Page content: add the attached H5P content using the H5P Atto button.
        3. Save and display.
      4. Confirm that a four slides image slider is displayed (food pictures).
      5. Download the attached test_editor.php file in the root folder.
      6. Keep Slider Page in a tab and in new one open https://yoursite/test_editor.php.
      7. Ensure that in the Select a content to edit dropdown, there is the option "H5P editor testing - Module: Slider - ERROR: No title". If you used another name for the course or the Page module, they should appear in this option.
      8. Ensure that in the Select a content to create dropdown, there is the option "Image Slider".

      Please, test both the Boost and Classic themes

      Edit content

      1. Ensure you are in the
        H5P Editor manual testing page (test_editor.php script).
      2. In the Select a content to edit dropdown, choose the option "H5P editor testing - Module: Slider - ERROR: No title" and click the Edit button.
      3. Confirm that the H5P Editor is properly displayed.
      4. Modify the Image Slider content:
        1. Title: Image Slider
        2. Untitled Image Slide #1
          1. Title: Slide 1
          2. Click "Edit image" button and upload a new image.
          3. Alternative text: New image uploaded
        3. Remote the second slide:
          1. Click the "Remove item" icon in the title bar of the slide.
        4. Add a new slide
          1. Below the last slide, click the button "Add item".
          2. Click "Add" button and upload a new image.
          3. Alternative text: Second image uploaded
      5. Reload the tab with the Slider Page
      6. Confirm the images have changed.
      7. Load again in the other tabhttps://yoursite/test_editor.php.
      8. In the Select a content to edit dropdown, choose the option "H5P editor testing - Module: Slider - Image Slider" and click the Edit button (notice instead of "ERROR: No title" you can see "Image Slider", the title added before).
      9. Confirm that all the changes were saved.

      Create content

      1. Load https://yoursite/test_editor.php.
      2. In the Select a content to create dropdown, choose the option "Image Slider" and click the "Create" button.
      3. Ensure that the H5P Editor fields are empty or filled with default values.
      4. Fill up the form:
        1. Title: New Image Slider
        2. Image Title: Image 1
        3. Click "Add" button and upload a new image.
        4. Alternative text: Alternative 1.
      5. Add a second slide:
        1. Below the last slide, click the button "Add item".
        2. Image Title: Image 2
        3. Click "Add" button and upload a new image.
        4. Alternative text: Alternative 2.
      6. Press the "Save" button.
      7. Confirm in the "Private files" block that there is a file image-slider-x.h5p.
      8. Go to the c1 course.
      9. Add a Page in Topic 2 section:
        1. Name: New Image Slider.
        2. Page content: using the H5P Atto button, go to the Private files repository and select the file image-slider-x.h5p.
        3. Save and display.
      10. Confirm that a slider with the images you selected is displayed.
      Show
      Setup Login as admin. Create the course "H5P editor testing" (shortname c1). In course c1, add a Page in Topic 1 section: Name:  Slider. Page content : add the attached H5P content using the H5P Atto button. Save and display. Confirm that a four slides image slider is displayed (food pictures). Download the attached test_editor.php file in the root folder. Keep Slider Page in a tab and in new one open https://yoursite/test_editor.php . Ensure  that in the Select a content to edit dropdown, there is the option "H5P editor testing - Module: Slider - ERROR: No title". If you used another name for the course or the Page module, they should appear in this option. Ensure that in the Select a content to create dropdown, there is the option "Image Slider". Please, test both the Boost and Classic themes Edit content Ensure you are in the H5P Editor manual testing page ( test_editor.php script). In the Select a content to edit dropdown, choose the option "H5P editor testing - Module: Slider - ERROR: No title" and click the Edit button. Confirm that the H5P Editor is properly displayed. Modify the Image Slider content: Title: Image Slider Untitled Image Slide #1 Title: Slide 1 Click "Edit image" button and upload a new image. Alternative text: New image uploaded Remote the second slide: Click the "Remove item" icon in the title bar of the slide. Add a new slide Below the last slide, click the button "Add item". Click "Add" button and upload a new image. Alternative text: Second image uploaded Reload the tab with the Slider Page Confirm the images have changed. Load again in the other tabhttps://yoursite/test_editor.php. In the Select a content to edit dropdown, choose the option "H5P editor testing - Module: Slider - Image Slider" and click the Edit button (notice instead of "ERROR: No title" you can see "Image Slider", the title added before). Confirm that all the changes were saved. Create content Load https://yoursite/test_editor.php . In the Select a content to create dropdown, choose the option "Image Slider" and click the "Create" button. Ensure that the H5P Editor fields are empty or filled with default values. Fill up the form: Title: New Image Slider Image Title: Image 1 Click "Add" button and upload a new image. Alternative text: Alternative 1. Add a second slide: Below the last slide, click the button "Add item". Image Title: Image 2 Click "Add" button and upload a new image. Alternative text: Alternative 2. Press the "Save" button. Confirm in the "Private files" block that there is a file image-slider-x.h5p . Go to the c1 course. Add a Page in Topic 2 section: Name:  New Image Slider. Page content : using the H5P Atto button, go to the Private files repository and select the file image-slider-x.h5p . Save and display. Confirm that a slider with the images you selected is displayed.

      Summary

      Integrate the H5P editor with all its functionality in core. Based on the H5P Editor PHP library and the mod_hvp plugin.

      User stories

      As an instructional designer
      I want to modify an existing H5P content
      So I edit the content in the H5P editor

      As an instructional designer
      I want to create a new H5P content
      So I create the content in the H5P editor

      Tasks

      • Add H5P editor library in core (lib/h5p/editor)
      • Moodle-ish the implementation of the interfaces (following Moodle coding standards)
      • Display inside a standalone form (lib/h5p/editor.php)
      • Integrate translations with Moodle (if possible)

        1. editor_file_storage.png
          editor_file_storage.png
          39 kB
        2. image-slider-demo.h5p
          454 kB
        3. MDL-67814_CreateContent_Boost.jpg
          MDL-67814_CreateContent_Boost.jpg
          74 kB
        4. MDL-67814_CreateContent_Classic.jpg
          MDL-67814_CreateContent_Classic.jpg
          68 kB
        5. MDL-67814_EditContent_Boost.jpg
          MDL-67814_EditContent_Boost.jpg
          61 kB
        6. MDL-67814_EditContent_Classic.jpg
          MDL-67814_EditContent_Classic.jpg
          61 kB
        7. MDL-67814_Setup_Boost.jpg
          MDL-67814_Setup_Boost.jpg
          84 kB
        8. MDL-67814_Setup_Classic.jpg
          MDL-67814_Setup_Classic.jpg
          75 kB
        9. test_editor.php
          5 kB

            vmdef Victor Déniz Falcón
            vmdef Victor Déniz Falcón
            Ferran Recio Ferran Recio
            Adrian Greeve Adrian Greeve
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            2 Vote for this issue
            Watchers:
            11 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 weeks, 2 days, 3 hours, 6 minutes
                6w 2d 3h 6m

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