Button in a Personality Quiz?

Hi Yannick,This is possible

Hi Yannick,

This is possible by making changes to the code. A good place to start is this documentation.

-BV52

Thu, 03/01/2018 - 09:07

Thanks for your response.

Thanks for your response. Which documentation do you mean?

BV52

Thu, 03/01/2018 - 09:10

Sorry about that. Here's the

Sorry about that. Here's the link :-)

-BV52

Thu, 03/01/2018 - 16:38

I've tried adding these

I've tried adding these instructions: https://h5p.org/adding-text-editor-buttons but i still can't see a WYSIWYG editor or the ability to add a button... Any way you can help me out perhaps?

Thu, 03/01/2018 - 17:05

Hi!Thanks for reaching out.

Hi!

Thanks for reaching out. It's hard to tell what went wrong if there's no way to see the code that you have actually used. Could you provide it here or somewhere else, e.g. pastebin?

This warning should not be necessary in this case, but remember not to post code containing sensitive information (such as credentials).

Best,

Oliver

Thu, 03/01/2018 - 17:17

Hi Oliver, Thanks for the

Hi Oliver,

Thanks for the rpely. I added this: https://pastebin.com/ARMJWDBa in a wordpress plugin called: My custom functions. I'm a huge noob when it comes to php.

Thu, 03/01/2018 - 20:38

Hi!We're all noobs with

Hi!

We're all noobs with something, and I'm not good with PHP either. No need to worry.

It doesn't work in your case, because you were following a guide to adding editor buttons to a field that already has the WYSIWYG editor. The description of the personalities. Hasn't. I created a script for you that will give you the WYSIWYG editor for this particular field, but I do not think that it will give you the ability to add more than plain text to the description without changing some code in the personality quiz.

Best,

Oliver

Fri, 03/02/2018 - 09:06

Thanks it did add the WYSIWYG

Thanks it did add the WYSIWYG editor! :-)

How would it be possible to edit the code in the personality quiz? To add more the ability to add options to the field.

Fri, 03/02/2018 - 09:24

Hi!A good start would be to

Hi!

A good start would be to have a look at the developer documentation. You will have to edit the file called "personalityQuiz.js", and depending on your scenario and setup, there will be different ways that should be covered in the documentation.

If you completed that, you could also change the file semantics.json directly (so you will not need the PHP hook script) and create a pull request for your changes at https://github.com/LumeniaAS/h5p-personality-quiz. This way, your changes could become "official" for everyone.

Best,

Oliver

Thu, 03/08/2018 - 15:02

Hi Oliver, I've been trying

Hi Oliver,

I've been trying but i can't get it to work. Would you maybe be interested in doing it for me if i would pay you? :-)

Yannick

Sat, 03/10/2018 - 14:35

Hi Yannick!I was wrong. I

Hi Yannick!

I was wrong. I learn something new about H5P every day. You just need to also explicitly allow the HTML tags that you need. The following script as part of the wordpress plugin should do the trick and allow you to also add links to the personality description. No need to change the code of the content type itself.

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 Multiple Choice Quizzes, for example.
   */
  if ($library_name === 'H5P.PersonalityQuiz') {
    /*
     * We 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 'personalities'. 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 === 'personalities') {
        /*
         * $semantic_field is now the one we need, and we can dig deeper.
         * Looking at the semantics.json file, you can see that the next
         * hierarchy level is "inside" the key 'field', and then the next
         * one that you need is "inside" the key 'fields'. You could now even
         * go directly to the one field that you want, but maybe a fields
         * get's added, and that would screw up this script.
         * You don't really need the next step, but this might be easier to
         * grasp. You could now store all the information about a personality
         * (name, description and image) in another variable.
         */
        $personality_fields = $semantic_field->field->fields;
        /*
         * As before, you can loop over all of these until you find the one
         * that is of interest -- it has the name 'description'.
         */
        foreach ($personality_fields as $personality_field) {
          if ($personality_field->name === "description") {
            /*
             * Now you are at the right spot! $personality_field now
             * contains the field and all its properties that you want to
             * change.
             * You cannot magically create a button here, but you could, e.g.
             * change the widget type. In semantics.json it says:
             *     "widget": "textarea"
             * That's how you tell the editor of H5P that it should create
             * a plain box where you can type into plain text. But H5P also
             * has these fancy editor boxes with lot's of buttons right?!
             * That's what's called the HTML-widget, and you can simply
             * change this by setting this ...
             */
            $personality_field->widget = 'html';
            /*
             * Now you also have to add the specific HTML tags that should
             * be allowed in the textfield. Please note that the range of
             * buttons that the editor in H5P offers to includes styled
             * elements is limited.
             */
            if (!isset($personality_field->tags)) {
              $personality_field->tags = array();
            }
            $personality_field->tags = array_merge($personality_field->tags, array(
              'strong',
              'em',
              'u',
              'a',
              'ul',
              'ol'
            ));
            /*
             * Now you have overridden semantics.
             */
          }
        }
      }
    }
  }
}

// You'll not need something like the next line, if you're not using WordPress
add_action('h5p_alter_library_semantics', 'h5pmods_alter_semantics', 10, 2);

Tue, 03/20/2018 - 14:19

Oh sorry! I missed your reply

Oh sorry! I missed your reply. Thanks so much.

I got it working and i also begin to understand it. :-)

Tue, 03/20/2018 - 15:05

Great! Then be both learned

Great! Then be both learned something new :-)

Realia

Wed, 08/12/2020 - 14:01

Thank you so much Oliver for

Thank you so much Oliver for the comments in this code : it is really "cristal-clearly" explained and has helped me a lot to get the logic of this "hack". Thanks again !

Thu, 03/08/2018 - 21:36

It's probably a few lines of

It's probably a few lines of code -- not worth more than a cup of coffee ;-) The first one's on the house. Let me have a look at it this weekend.

BlueSpark

Thu, 04/02/2020 - 16:04