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

Add the option to personalize H5P styles

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_310_STABLE
    • MDL-69087-master
    • Hide

      Setup

      1. Download the theme h5pmod to your local Moodle instance running the following command from the Moodle root folder: 

        git clone https://github.com/sarjona/h5pmods-moodle-plugin.git theme/h5pmod

      2. Login as admin.
      3. Run the upgrade process, to install the h5pmod theme.
      4. Access to "Site administration / Appearance / Themes / Theme selector" and choose "H5PMod" as Default theme.
      5. Go to the Content bank.
      6. Upload the attached H5P files to the content bank (interactive-video.h5p and multiple-choice.h5p).

       

      Testing scenario 1: Interactive video - h5p_alter_styles and h5p_alter_scripts (player and editor)

      1. Open the browser console.
      2. Access to the "Interactive video" H5P entry from the content bank. 
      3. Confirm the H5P slider bar is red.
      4. Confirm the playbackRate control button (near the slider), is now green.
      5. Confirm the following text appears in the JS console: "Hello, this is custom.js!".
      6. Go to the first interactive point ("Multiple choice quiz") and open it.
      7. Confirm the "Check" button background is pink (look at the attached interactive_video_view.png).
      8. Click the "Edit" button, to access to the H5P editor.
      9. Confirm the following text appears in the JS console: "Hello, this is customEditor.js!".
      10. Confirm some of the headings, such as "Title" or "Add a video" has pink background  (look at the attached interactive_video_edit.png).

       

      Testing scenario 2: Multiple choice - h5p_alter_semantics (editor) and h5p_alter_filtered_parameters (player)

      1. Open the browser console.
      2. Access to the "Multiple choice" H5P entry from the content bank. 
      3. Confirm the "Generated at xxxxxxxxxxx"  text is displayed below the statement ("What color does the blackcurrant berry actually have?").  Look at the attached multiple_choice_view.png.
      4. Click the "Edit" button, to access to the H5P editor.
      5. Confirm there is no any "Image" field between the Title and the Question (look at the attached multiple_choice_edit.png).

       

      Testing scenario 3: Boost theme

      1. Access to "Site administration / Appearance / Themes / Theme selector" and choose "Boost" as Default theme.
      2. Open the browser console.
      3. Access to the "Interactive video" H5P entry from the content bank. 
      4. Confirm the H5P slider bar is not red anymore.
      5. Confirm the playbackRate control button (near the slider), is not green anymore.
      6. Confirm the following text doesn't appear in the JS console: "Hello, this is custom.js!".
      7. Go to the first interactive point ("Multiple choice quiz") and open it.
      8. Confirm the "Check" button background is blue.
      9. Click the "Edit" button, to access to the H5P editor.
      10. Confirm the following text doesn't appear in the JS console: "Hello, this is customEditor.js!".
      11. Confirm the headings, such as "Title" or "Add a video", are not pink anymore.
      12. Access to the "Multiple choice" H5P entry from the content bank. 
      13. Confirm the "Generated at xxxxxxxxxxx"  text is not displayed anymore.
      14. Click the "Edit" button, to access to the H5P editor.
      15. Confirm there is an "Image" field between the Title and the Question.

       

      Show
      Setup Download the theme h5pmod to your local Moodle instance running the following command from the Moodle root folder: git clone https://github.com/sarjona/h5pmods-moodle-plugin.git theme/h5pmod Login as admin. Run the upgrade process, to install the h5pmod theme. Access to "Site administration / Appearance / Themes / Theme selector" and choose "H5PMod" as Default theme. Go to the Content bank. Upload the attached H5P files to the content bank (interactive-video.h5p and multiple-choice.h5p).   Testing scenario 1: Interactive video - h5p_alter_styles and h5p_alter_scripts (player and editor) Open the browser console. Access to the "Interactive video" H5P entry from the content bank.  Confirm  the H5P slider bar is red. Confirm the playbackRate control button (near the slider), is now green. Confirm the following text appears in the JS console: "Hello, this is custom.js!". Go to the first interactive point ("Multiple choice quiz") and open it. Confirm the "Check" button background is pink (look at the attached interactive_video_view.png). Click the "Edit" button, to access to the H5P editor. Confirm the following text appears in the JS console: "Hello, this is customEditor.js!". Confirm some of the headings, such as "Title" or "Add a video" has pink background  (look at the attached interactive_video_edit.png).   Testing scenario 2: Multiple choice - h5p_alter_semantics (editor) and h5p_alter_filtered_parameters (player) Open the browser console. Access to the "Multiple choice" H5P entry from the content bank.  Confirm the "Generated at xxxxxxxxxxx"  text is displayed below the statement ("What color does the blackcurrant berry actually have?").  Look at the attached multiple_choice_view.png. Click the "Edit" button, to access to the H5P editor. Confirm there is no any "Image" field between the Title and the Question (look at the attached multiple_choice_edit.png).   Testing scenario 3: Boost theme Access to "Site administration / Appearance / Themes / Theme selector" and choose "Boost" as Default theme. Open the browser console. Access to the "Interactive video" H5P entry from the content bank.  Confirm  the H5P slider bar is not red anymore. Confirm the playbackRate control button (near the slider), is not green anymore. Confirm the following text doesn't appear in the JS console: "Hello, this is custom.js!". Go to the first interactive point ("Multiple choice quiz") and open it. Confirm the "Check" button background is blue. Click the "Edit" button, to access to the H5P editor. Confirm the following text doesn't appear in the JS console: "Hello, this is customEditor.js!". Confirm  the headings, such as "Title" or "Add a video", are not pink anymore. Access to the "Multiple choice" H5P entry from the content bank.  Confirm the "Generated at xxxxxxxxxxx"  text is not displayed anymore. Click the "Edit" button, to access to the H5P editor. Confirm there is an "Image" field between the Title and the Question.  
    • Moppies Kanban

      When H5P has been added to Moodle 3.9 it has neglected to include the 'hvp_alter_styles' (https://h5p.org/documentation/for-developers/visual-changes and https://h5p.org/node/285646 and https://h5p.org/moodle-customization) functionality that comes with the contributed module (https://moodle.org/plugins/mod_hvp).

      This makes it impossible (as you can't use - or at least I've tried - JS to inject custom styles into an 'iframe' within an 'iframe').

      So I'm marking this a 'regressional bug' as the core functionality does less than the contributed version.

      So, mod_hvp has in 'classes/view_assets.php':

      whereas 'h5p/classes/player.php' has:

       

       

      Therefore a theme cannot override anything i.e. 'mod_hvp's renderer and add additional styles so that its not a mix of Moodle and H5P styles.

       

        1. Annotation 2020-06-18 113831.png
          Annotation 2020-06-18 113831.png
          28 kB
        2. Annotation 2020-06-18 113846.png
          Annotation 2020-06-18 113846.png
          15 kB
        3. interactive_video_edit.png
          interactive_video_edit.png
          55 kB
        4. interactive_video_view.png
          interactive_video_view.png
          409 kB
        5. interactive-video.h5p
          2.84 MB
        6. MDL-69087.jpg
          MDL-69087.jpg
          65 kB
        7. MDL-69087 (2).jpg
          MDL-69087 (2).jpg
          43 kB
        8. MDL-69087 (3).jpg
          MDL-69087 (3).jpg
          71 kB
        9. multiple_choice_edit.png
          multiple_choice_edit.png
          27 kB
        10. multiple_choice_view.png
          multiple_choice_view.png
          20 kB
        11. multiple-choice.h5p
          720 kB

            sarjona Sara Arjona (@sarjona)
            gb2048 Gareth J Barnard
            Ferran Recio Ferran Recio
            Victor Déniz Falcón Victor Déniz Falcón
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            45 Vote for this issue
            Watchers:
            29 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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