Change the position of button in Question set library

Submitted by jatin12nov on Tue, 07/18/2023 - 23:11

Forums:

Developers

I want to Change the position of button in Question set library but unable to do it via the custom JS.

I am using Drupal 9.

otacke

Wed, 07/19/2023 - 12:15

Permalink

What exactly have you tried?

jatin12nov

Wed, 07/19/2023 - 20:45

Permalink

I am tring to clone and then

I am tring to clone and then append but the binding get removed.

Custom.js

$('div.h5p-question-buttons').each(function (i, obj) {// // console.log($(obj).find("a.h5p-question-next").length);// // console.log($(obj).find("a.h5p-question-prev").length);if ($(obj).find("a.h5p-question-next").length > 0) {if ($(obj).find("a.h5p-question-prev").length > 0) {// console.log($(obj).find("a.h5p-question-next"));var nxtButton = $(obj).find("a.h5p-question-next").clone(true, true);var prvButton = $(obj).find("a.h5p-question-prev").clone(true, true);
$(obj).find("a.h5p-question-next").css("display", "none");$(obj).find("a.h5p-question-prev").css("display", "none");
$(obj).append(prvButton);$(obj).append(nxtButton);

I just need a previous button berfore the next question button. currently it is next and previous.

I can change the position in library after taking the github fork by just replacing the code:

// Add finish buttonquestion.addButton('finish', params.texts.finishButton,moveQuestion.bind(this, 1), false);
// Add previous buttonquestion.addButton('prev', '', moveQuestion.bind(this, -1),!(questionInstances[0] === question || params.disableBackwardsNavigation), {href: '#', // Use href since this is a navigation button'aria-label': params.texts.prevButton});
// Add next buttonquestion.addButton('next', '', moveQuestion.bind(this, 1),!params.disableBackwardsNavigation || !!question.getAnswerGiven(), {href: '#', // Use href since this is a navigation button'aria-label': params.texts.nextButton});

jatin12nov

Wed, 07/19/2023 - 20:52

Permalink

This is what I am trying to do.

In the custom JS I am tring to remove the button after cloning them and then adding them again.

However, In h5p questionset library it is just about the changing the position of code:

add previous button before the next button but idk how to compile and use that in updated code in drupal as library.

otacke

Wed, 07/19/2023 - 22:24

Permalink

If I understand you correctly

If I understand you correctly, you want to change the order of the previous/next buttons for each question? Like that?

[...document.querySelectorAll('.h5p-question-buttons')]
  .forEach((buttonsWrapper) => {
    const prevButton = buttonsWrapper.querySelector('.h5p-question-prev');
    const nextButton = buttonsWrapper.querySelector('.h5p-question-next');

    if (prevButton && nextButton) {
      buttonsWrapper.insertBefore(prevButton, nextButton);
    }  
  });

There's no need to clone the buttons, and you should unlearn jQuery as it will be removed from H5P at some point.

Depending on what you're trying achieve, it may be simpler to do this via CSS by adding something like this:

.questionset .h5p-question-buttons {
  display: flex;
  flex-wrap: nowrap;  
  float: right;
  justify-content: end;
}
.questionset .h5p-question-buttons .h5p-question-check-answer {
  margin-right: auto;
}

The other issue: You should not simply patch H5P libraries unless you want to do it every time the original gets an update. But if you want to, you need to put H5P into development mode temporarily before installing a library with the same version number. There's an option in the Drupal 7 plugin, not sure if a development mode option is included in the plugin for Drupal 8/9.

jatin12nov

Wed, 07/19/2023 - 22:41

Permalink