Change (Library) Default Settings in Wordpress

Submitted by michaelwilliamautin on Mon, 02/19/2018 - 18:46
Forums: 
Content creation

Hello,

I would like to change the default settings for multichoice content.

I believe to have found the correct location in the multichoice.js file.
e.g.

 behaviour: {
enableRetry: true,

But if I change any of the values from true to false nothing changes.
 or e.g.
 type: 'multi', I changed from 'auto'

but it still loads to Automatic.

Also I would like to have the "Display toolbar below content" unchecked by default.

Best, Michael

Content types: 
Multiple Choice
thomasmars's picture

thomasmars

Thu, 02/22/2018 - 14:26

Hi Michael,
Semantics are not read from file every time, so just changing semantics in the file will not change it for content. For the plugin to read from file you would have to enable developer mode, this is strongly recommended against in a production environment, as these changes would be overwritten every time the library was updated among other things. 

The recommended way of changing this, so that it will be compatible with new versions of the library is to implement a hook for the Multilpe Choice semantics. You can read more about that in the hooks / actions part of the wordpress customization guide.

Best regards, Thomas

michaelwilliamautin

Tue, 02/27/2018 - 12:57

Perfect that was what I needed :) 

michaelwilliamautin

Wed, 02/28/2018 - 10:40

Hi again Thomas, regretably it does not quite work as expected.

To be on the safe side I installed wordpress clean and also H5P.

I then installed the mod plugin from here to test. https://github.com/h5p/h5pmods-wordpress-plugin

My understanding would be that with the alter parameters of the multichoice each question should be prepoulated with <p>Generated at ' . time() . '.</p>

but that is not happening.

Also I noticed that the multichoice.js file has this set "    question: "No question text provided" but when I add a new question it is just blank.

Best Michael 





 

icc's picture

icc

Wed, 02/28/2018 - 13:19

You can get the Display toolbar below content always unchecked through the H5P Settings page.

For changing the defaults in the editor you want the h5pmods_alter_semantics() function.
To alter the content you want h5pmods_alter_parameters() function.

I just tested the h5pmods plugin and it appears to work fine. If you're unsure if the code/plugin is running try adding the following line to the function:

print "I'm running!"; exit;

michaelwilliamautin

Wed, 02/28/2018 - 14:26

Hi icc,

I can confirm that the plugin work thanks for the clarification on semantics and parameters.

I am afraid that I would need more detailed help because this faar exceed my abilities.

The only thing I am rather sure about is this line

if ($name === 'H5P.MultiChoice') {

But how I then address the correct fields no idea.

I attached an image of the three changes I would need.

Best, Michael


Attachments: 
Image icon Screen Shot 2018-02-28 at 14.23.17.png
otacke's picture

otacke

Sat, 03/03/2018 - 13:03

Hi Michael!

This function should do what you require. Please take some time to understand how this works. And please note that this will not change the values in existing content, but just replace the default values for new content.

function h5pmods_alter_semantics(&$semantics, $library_name) {
  /*
   * Check if the library name matches the content type that should be changed.
   * You don't have to do anything to InteractiveVideo, for example.
   */
  if ($library_name === 'H5P.MultiChoice') {
    /*
     * You are now basically crawling through the semantics.json file hierarchy.
     * There are other ways to do this, but this should suffice for now.
     * $semantics contains all fields of the top hierarchy, and you're
     * looking for the one that is named 'behaviour'. So, you can loop
     * over all the fields of $semantics and can look at each of them individually.
     * The one that you're currently looking at will be $semantic_field.
     * You take the next one, and the next one, ..., until you arrive at the one
     * that has the correct name.
     */
    foreach ($semantics as $semantic_field) {
      if ($semantic_field->name === 'behaviour') {
        /*
         * $semantic_field is now the one we need, and we can dig deeper.
         * For clarity, you could now define a variable that will hold all the
         * fields for behaviour settings.
         */
        $behaviour_fields = $semantic_field->fields;
        /*
         * You can now loop over the fields within the behaviour branch and
         * intervene if you are at the right one. There are other ways to do this,
         * but I think this is the easiest to understand while being "future proof".
         */
        foreach ($behaviour_fields as $behaviour_field) {
          // Is the current field the type field? Then change the default value.
          if ($behaviour_field->name === 'type') {
            $behaviour_field->default = 'multi';
          }
          // Is the current field the singlePoint field? Then change the default value.
          if ($behaviour_field->name === 'singlePoint') {
            $behaviour_field->default = TRUE;
          }
          // Is the current field the field for the required input? Then change the default value.
          if ($behaviour_field->name === 'showSolutionsRequiresInput') {
            $behaviour_field->default = FALSE;
          }
        }
      }
    }
  }
}
// If you are using WordPress, you must uncomment the following line of code in order to make everything work.
//add_action('h5p_alter_library_semantics', 'h5pmods_alter_semantics', 10, 2);

 

Best,

Oliver

michaelwilliamautin

Mon, 03/05/2018 - 10:31

Hi Oliver, thank you very much :) Especially for the detiled explanation. No I can make further changes if necessary.

For completeness and others maybe you could update your code and add: 

add_action('h5p_alter_library_semantics', 'h5pmods_alter_semantics', 10, 4);

at the end. For many it may be obvious but it trough me off at first.

Michael

otacke's picture

otacke

Mon, 03/05/2018 - 19:09

Hi Michael!

Well, I'm not replacing the hints in the documentation ;-) I added a comment and a line. In fact you can replace the 4 by a 2 in this case - just in case that you want to dig deeper ...

Best,

Oliver

tki

Wed, 03/07/2018 - 17:57

Hi Oliver,

Thank you very much for such a detailed explanation. I was able to add some modifications to MultipleChoice, but I'm struggling with modifications in Column. I've followed steps and check several times everything, but my changes are not applied. 

if ($library_name === 'H5P.Column') {
foreach ($semantics as $semantic_field) {
 if ($semantic_field->name === 'content') {
 $content_fields = $semantic_field->fields;
  foreach ($content_fields as $content_field) {
      if ($content_field->name === 'useSeparator') {      
	      $content_field->default = 'disabled';
          }
  }
  }
}
}

 Could you please let me know what is wrong in this code? I'm trying to make the separator disabled by default in Column. 

Thanks!

otacke's picture

otacke

Wed, 03/07/2018 - 19:13

Hi tki!

Your code has actually two flaws which you will notice if you inspect the semantics file of H5P.Columns a little closer. At the upper level, it doesn't have an attribute called 'fields' that you're trying to read with '$semantic_field->fields'. If you changed that to 'field', it would still would not word because then you're at the level of the group, but not of it's items. I guess this function will explain it better:

function h5pmods_alter_semantics(&$semantics, $library_name) {
  /*
   * Check if the library name matches the content type that should be changed.
   * We don't have to do anything to InteractiveVideo, for example.
   */
  if ($library_name === 'H5P.Column') {
    /*
     * You need to have a look at semantics.json for H5P Column, so that you
     * know the structure for the editor:
     * https://github.com/h5p/h5p-column/blob/master/semantics.json
     * You can break it down to:
     *
     * $semantics
     * \__name: content (type: list), ..., further detailed at field
     *    \__name: content (type: group), ..., further detailed at $behaviour_fields
     *       \__name: content (type: library), ...
     *       \__name: useSeparator (type: select), ..., default: 'auto'
     *
     * This is the abstract hierarchy.
     * Excursus: In reality, the list could have multiple elements (the
     * different column contents). Then the 'tree' could look like this:
     *
     * $semantics
     * \__list_item_1
     *    \__group_item_1 (visually grouped in a box in the editor)
     *       \__library_1 (e.g. Image)
     *       \__separator_1 (e.g. enabled)
     * \__list_item_2
     *    \__group_item 2 (visually grouped in a box in the editor)
     *       \__library_2 (e.g. Fill in the Blanks)
     *       \__separator_2 (e.g. disabled)
     */
    foreach($semantics as $semantic_field) {
      // On the upper level of 'list', search for an item named 'content'
      if ($semantic_field->name === 'content') {
        /* You can now see in the upper schematics, that we can directly
         * dive deeper. A list item has an attribute called 'field'
         * (singular,sic!) that always contains exactly one group item.
         * Since it's only one, you don't have to loop over anything.
         * You can jump right over the 'field' :-)
         * The group can contain more elements, that's why the attribute that
         * holds them is called 'fields' (plural). Well, and since it can
         * have multiple items, you need to loop over them until you find
         * the one called 'useSeparator'.
         */
        $group_items = $semantic_field->field->fields;

        foreach($group_items as $group_item) {
          if ($group_item->name === 'useSeparator') {
            $group_item->default = 'disabled';
          }
        }
      }
    }
  }
}

Best,
Oliver

tki

Wed, 03/07/2018 - 20:32

Thanks Otacke for such a quick reply! I understand now much better the structure of semantics.json . However, when I'm appliyng your code, WP stops working. I found 1 missing closing } at the end, but it didn’t help.

function h5pmods_alter_semantics(&$semantics, $library_name) {
  /*
   * Check if the library name matches the content type that should be changed.
   * We don't have to do anything to InteractiveVideo, for example.
   */
  if ($library_name === 'H5P.Column') {

    /*
     * You need to have a look at semantics.json for H5P Column, so that you
     * know the structure for the editor:
     * https://github.com/h5p/h5p-column/blob/master/semantics.json
     * You can break it down to:
     *
     * $semantics
     * \__name: content (type: list), ..., further detailed at field
     *    \__name: content (type: group), ..., further detailed at $behaviour_fields
     *       \__name: content (type: library), ...
     *       \__name: useSeparator (type: select), ..., default: 'auto'
     *
     * This is the abstract hierarchy.
     * Excursus: In reality, the list could have multiple elements (the
     * different column contents). Then the 'tree' could look like this:
     *
     * $semantics
     * \__list_item_1
     *    \__group_item_1 (visually grouped in a box in the editor)
     *       \__library_1 (e.g. Image)
     *       \__separator_1 (e.g. enabled)
     * \__list_item_2
     *    \__group_item 2 (visually grouped in a box in the editor)
     *       \__library_2 (e.g. Fill in the Blanks)
     *       \__separator_2 (e.g. disabled)
     */
    foreach($semantics as $semantic_field) {
      // On the upper level of 'list', search for an item named 'content'
      if ($semantic_field->name === 'content') {
        /* You can now see in the upper schematics, that we can directly
         * dive deeper. A list item has an attribute called 'field'
         * (singular,sic!) that always contains exactly one group item.
         * Since it's only one, you don't have to loop over anything.
         * You can jump right over the 'field' :-)
         * The group can contain more elements, that's why the attribute that
         * holds them is called 'fields' (plural). Well, and since it can
         * have multiple items, you need to loop over them until you find
         * the one called 'useSeparator'.
         */
        $group_items = $semantic_field->field->fields;

        foreach($group_items as $group_item) {
          if ($group_item->name === 'useSeparator') {
            $group_item->default = 'disabled';
          }
        }
      }
    }
  }
/*added one missing }*/
}

add_action('h5p_alter_library_semantics', 'h5pmods_alter_semantics', 10, 2);
otacke's picture

otacke

Wed, 03/07/2018 - 20:54

You will probably have to check the php error log then. It's working well here.

tki

Wed, 03/07/2018 - 21:03

Thanks! I'll try to check it out!

tki

Wed, 03/07/2018 - 21:58

I found all my problems. Now, I can see the changes applied in Column, however it only works in English version of WP, when I'm switching back to French, these changes won't apply (see pics attached). Is there a way to bypass translation? Thank you!

Attachments: 
Image icon column-english.PNG
Image icon column-french.PNG
otacke's picture

otacke

Wed, 03/07/2018 - 22:36

Hi tki!

Great that you figured it out!

The translation issue sounds strange, but I have tried it myself and I can reproduce it. I don't think it should stop the overrides from working, and this might be a bug. I'll leave a note to a colleague who knows the inner workings of altering semantics better than I do.

Best,
Oliver

tki

Wed, 03/07/2018 - 23:44

Thanks for confirming that! I’ve tried to apply this code (from: https://github.com/h5p/h5pmods-wordpress-plugin/blob/master/h5pmods.php):

function h5pmods_alter_semantics(&$semantics, $name, $majorVersion, $minorVersion) {
  if ($name === 'H5P.Collage' && $majorVersion < 1) {
    // Find correct field
    for ($i = 0, $l = count($semantics); $i < $l; $i++) {
      $field = $semantics[$i];
      if ($field->name === 'collage') {
        // Found our field, change label
        $field->label = 'Altered Label';
        return;
      }
    }
  }
}
add_action('h5p_alter_library_semantics', 'h5pmods_alter_semantics', 10, 4);

 and I have the same results, I can see the changed label only in English version, it's not applied in French.

otacke's picture

otacke

Thu, 03/08/2018 - 00:09

Hi tki!

Yup. I had already checked labels, too, in order to check the magnitude of that issue.

Best

Oliver 

otacke's picture

otacke

Thu, 03/08/2018 - 09:53

Hi itk!

I have created a ticket in our issue tracker system. You can track the progress there.

Best,
Oliver

michaelwilliamautin

Thu, 03/08/2018 - 13:58

Just need to comment so I can save the unsubscribe.

tki

Thu, 03/08/2018 - 19:12

Thank you Otacke! You rock! 

otacke's picture

otacke

Thu, 03/08/2018 - 21:31

:-)

cpeterson

Sat, 03/10/2018 - 12:52

Hello ladies and gents., 

I installed the H5Pmods plugin and my wordpress installation vomited it bachup. Please see error and if anyone can help, it would be hughly appreciated.

Fatal error: Cannot redeclare h5pmods_alter_styles() (previously declared in /homepages/43/d724625128/htdocs/clickandbuilds/WordPress/MyCMS3/wp-content/plugins/h5pmods-wordpress-plugin-master/h5pmods.php:116) in /homepages/43/d724625128/htdocs/clickandbuilds/WordPress/MyCMS3/wp-content/plugins/h5pmods-wordpress-plugin-master/h5pmods.php on line 132

 

Best regards,

Crawford

otacke's picture

otacke

Sat, 03/10/2018 - 13:28

Hi Crawford!

Since the error messages that you posted don't match with the latest original code of the plugin that I found on github, I guess you changed the code yourself or git the plugin code frome somewhere else?

The error messages tell you, that on line 132, you seem to have something like function h5pmods_alter_styles(...) {...}, but also the same thing on line 116. You cannot have functions with the same name here. You should e.g. rename the second one, but I guess you could also put it's contents in the first one if you want to alter the CSS in both.

cpeterson

Mon, 03/12/2018 - 18:47

Hi Otacke,

Thanks for responding. No, I did not change the code. My programming skills copy/paste or install ... design. LOL

Thank you for the update link. I'll go get it now and try it out.

Crawford

cpeterson

Sat, 03/17/2018 - 13:45

Hi,

Is there a layman's instructional guide for setting up the h5pmods plugin? 

I installed the plugin without errors. I also made, what I thought to be correct, edits to the h5pmods.php and created a blank "custom-h5p-stying.css" file in the h5pmods-wordpress-plugin-master folder

 

function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {

  $styles[] = (object) array(

    // Path can be relative to wp-content/uploads/h5p or absolute.

    'path' => 'https://efiusnet.com/wp-content/plugins/h5pmods-wordpress-plugin-master/...',

    'version' => '?ver=1.3.7' // Cache buster

  );

}

add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

I found this CSS online. Is there a way to modify this to remove the download button in the audio controller.

video::-internal-media-controls-download-button { display:none;} video::-webkit-media-controls-enclosure { overflow:hidden;} video::-webkit-media-controls-panel { width: calc(100%+30px);/* Adjust as needed */}

icc's picture

icc

Thu, 03/22/2018 - 16:44

This might be a bit tricky the first time you do it, but once you understand how it works it should be easy to make these kinds of changes.

You should open the browser's console(Ctrl+Shift+J) and verify that the custom css file is loading(Network tab and filter on CSS). 
Be aware that the browser may cache files so your changes won't show up, to avoid this you can check the Disable cache box in the Network tab, or settings for other browsers.

You can add a test rule like this to see if the .css file is actually working:

body {
  background: pink !important;
  color: blue !important;
  font-size: 30px  !important;
}

To disable the download button I think you are on the correct track:
https://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video/41136470#41136470