Change the position of button in Question set library
Submitted by jatin12nov on Tue, 07/18/2023 - 23:11
Forums:
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.
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.
Navigation
Connect with H5P
About
H5P is a registered trademark of H5P Group
Privacy policy |
Copyright ©
2024
otacke
Wed, 07/19/2023 - 12:15
Permalink
What exactly have you tried?
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.
$('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);
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.
// 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});
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?
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:
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
Thanks
get it.
Just the order: 5 on next button fixed the problem.
jatin12nov
Wed, 07/19/2023 - 21:50
Permalink
change button order
Basically I want to change the from:
buttonOrder : (6) ['show-solution', 'check-answer', 'try-again', 'finish', 'next', 'prev']
to this:
buttonOrder : (6) ['show-solution', 'check-answer', 'try-again', 'finish', 'prev', 'next']