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

H5P editor integration

    XMLWordPrintable

    Details

    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-67814-master

      Description

      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)

        Attachments

        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

          Issue Links

            Activity

              People

              Assignee:
              vmdef Víctor Déniz Falcón
              Reporter:
              vmdef Víctor Déniz Falcón
              Peer reviewer:
              Ferran Recio
              Integrator:
              Adrian Greeve
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona)
              Votes:
              2 Vote for this issue
              Watchers:
              11 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  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