Avoid the double navigation of Opigno and H5P

Pepe
Thu, 11/23/2017 - 16:56
Forums
Developing Opigno
Hello, We are trying to avoid the double navigation of Opigno and H5P that some times happens, and we would like to share our ideas and we will be interested by the feedback of the community. If we reach this gaol and some users could be interested by the solution, we will share the strategy and code to the community. The situation: When we use some H5P activities that can embed slides (ie : Course Presentation, Image Slider, Quiz (Question set) and have 2 or more slides, we have a double navigation : The H5P navigation, and the Opigno navigation. The problem: Some users can be confused, and instead of using the H5P navigation, they will directly use the Opigno navigation, and they will miss the next slides of H5P contents. A) Some solutions: How to avoid this ? 1) The Hide totally Opigno navigation way: We can imagine that we will hide the Opigno navigation, and use only H5P navigation. H5P will have to get more navigation : the navigation to change to the next H5P activities, and the navigation to finish the lesson and to go to the next lesson. Pro : More intuitive ? Cons : More complicate ? Maybe not a good practice, as H5P is designed to be independent from the LMS/CMS. If we use also Opigno non H5P activities, the user will have a strange navigation experience. 2) The Hide when needed Opigno navigation: We can imagine that the Opigno navigation will be hidden only when needed : when we start a H5P activity with slides, hide the Opigno navigation until we reach the last slide, and make visible at this moment the Opigno navigation. Pro : more easy to do ? Good practice ? Cons : ? 3)The never use H5P activites with slides way: We can imagine to not use H5P activities with slides (ie : course Presentation with only 1 slide, Image slider with only 1 picture, Quiz with only 1 question and duplicate this activities). Pro : Only the navigation of Opigno, very kiss. Cons: It cost more time to the final user to see the contents (he will wait during the new page is displayed) and it cost more time to create and update the contents. 4)Other ways ? If you have other ideas, please share it :) A Synthesis) We investigate actually the second way. Do you think it's a good idea, some one have feedback about this ? If yes here more details and questions about this second way : B) How the "hide when needed Opigno navigation way" could work : We can imagine theses rules : IF the H5P activities = could have slides (= Course Presentation, Image Slider, Quiz (Question set) …) AND IF the H5P activities slides >= 2 → { Hide the Opigno navigation WHEN user display the last slide, display the Opigno Navigation } C) How to implement this for the Opigno administrator / teacher? If it's possible to realize the previous described way, we can imagine this : Generic settings : C1 In /admin/config/system/h5p : Add an option similar to Display buttons (download, embed and copyright) : Hide double navigation check box. Make possible to the user to choose one of these options : Controlled by author default is double navigation hidden Controlled by author default is double navigation displayed Double navigation is always displayed Double navigation is always hidden C2 AND / OR add the same that B1 but in the lesson settings Specific settings : C3 Opigno : In Opigno settings of the H5P activities, in H5P options(with display buttons settings) : Double navigation is hidden Double navigation is displayed OR C4 H5P settings of the activities : We could add the C3 options (Double navigation is hidden/displayed) in H5P content settings, but it seems that's not the best way because we have to update all the library where H5P navigation could be displayed, and as this impact the LMS navigation, it's maybe better to do it in the LMS ? C Synthesis) : It seems that the better options are B1 (generic settings in admin/config/system/h5)p AND B3 (specific navigation in Opigno) ? Some one have ideas about this ? D) How to code it ? We are thinking about this possibility, has described in B : D1) IF the H5P activities = could have slides (= Course Presentation, Image Slider, Quiz (Question set) …) D2) AND IF the H5P activities slides >= 2 → { D3) Hide the Opigno navigation D4) WHEN user display the last slide, display the Opigno Navigation } The coding question to solve are : D1) How to make that the js code will only be applied on the Course Presentation, Image Slider, Quiz (Question set) H5P activites ? D2) How to check if the number of slides is >= 2 ? D3) How to hide the Opigno navigation with javascript ? D4) How to display the navigation of Opigno when the user is on the last slide ? We are thinking about to use javascript and H5P.jquerry to do D1, D2, D3 and D4, creating a new module using hook_h5p_scripts_alter and creating a h5p-overrides.js Do you think that's a good direction ? Thanks for your attention, Best regards Pepe
Pepe
Thu, 11/23/2017 - 17:10

We have also created a topic

We have also created a topic about this in the H5P Community : https://h5p.org/node/146486 If there is some news there, we will add it here.
ironhead

In reply to by Pepe

Sun, 11/10/2019 - 15:31

Double Nav

Did you ever settle on a solution? I am exploring a similar scenario with Webform as an Activity Type - problem is the double navigation.
timotheonb
Mon, 11/11/2019 - 14:25

Could this be related?

Hi, I posted this (https://www.opigno.org/en/forum/support/most-h5p-content-does-not-render) on Friday. I was wondering if this subject may have something to do with my question there. Any help or some kind of light shining on this subject will help a lot! Thanks, Tim
ironhead
Tue, 11/12/2019 - 17:18

"Double Nav"

The issue is double navigation between content (h5p, webform, ... navigation) and activity (opigno navigation), not issues for rendering of h5p content. FWIW, as a user of 2.8, i do not have a problem with h5p rendering and don't see anything on Drupal opigno on this topic - does h5p render for you without opigno, i.e. add to content type and try it; might give you a clue. Meanwhile, within the context of this thread, I'm trying to piece together how the nav. was solved for h5p in the hope that I could the same with Webforms.
axel
Tue, 11/12/2019 - 17:45

Hi,

Hi,

I assume that you are refering to Opigno 1.x

In Opigno 2.x this has been improved and the navigation for the most common H5P contents (course presentation, question set) has been unified

ironhead
Tue, 11/12/2019 - 19:00

Hi

I am using 2.8 and my particular issue is not the unified navigation for H5P. My need is to use Webforms as an activity type and have unified navigation. The challenge I'm trying to address is that some users will use the webform navigation which takes them out of their training and to the webform, or conversely, instead of using the Webform navigation, they will directly use the Opigno navigation which will not complete the Webform content. Need a unified navigation/process. Use case example: Training - Sales Training; Activity - Performance Review (a webform). Objective - As a user, I want the webform/review to be part of the training, measured, badged, etc. Theory was that if this was tackled for H5P, maybe the same approach/solution would work for webforms. Or maybe this already works and I can't figure it out (ALWAYS a possibility...). Thx.
axel

In reply to by ironhead

Wed, 11/13/2019 - 16:37

OK I understand better now.

OK I understand better now.

For this you would have to implement a custom activity type in Opigno, and override the webform navigation (you can have a look at what we did for H5P to have an example how it might work).

timotheonb

In reply to by ironhead

Thu, 11/14/2019 - 20:38

Added Content Type -- to no avail in Opigno.

In Opigno, I cannot render certain H5P activities. I have tried your suggestion of creating a new content type. I tried uploading an activity that I can render on the H5P website. It does not render on my Opigno site. I have tried on a different Opigno installation (same server), but with the same result.
Profile picture for user michaeljhtaggart
michaeljhtaggart
Wed, 04/19/2023 - 17:44

Solution - Edit twig template file.

Step 1: Make sure to turn on your twig.config: debug: true. This can be found in your web/sites/default/default.services.yml. Step 2: Go to your in-course web page where you can view the activities, and find the suggested list for the page (For example: !-- FILE NAME SUGGESTIONS: * page--opigno-module--activity.html.twig * page--group--module--answer--47.html.twig x page--group--module--answer--%.html.twig * page--group--module--answer.html.twig * page--group--module--16.html.twig * page--group--module--%.html.twig * page--group--module.html.twig * page--group--10.html.twig * page--group--%.html.twig * page--group.html.twig * page.html.twig -->) Step 3: Create a new file name using one of the suggestions. (*** I added it to my subtheme: web/themes/MY_SUBTHEME/templates/page--group--module--answer--%.html.twig ) Step 4: Copy the layout of the original page ( You can find this right under FILE NAME SUGGESTIONS. Example of what this looks like: !-- BEGIN OUTPUT from 'themes/MY_SUBTHEME/templates/page/page--group--module--answer--%.html.twig' --> ***) Step 5: Add the following script tags at the bottom of this template: script src="https://code.jquery.com/jquery-3.6.0.min.js">/script> script> $(document).ready(function() { // Select the navigation element you want to hide const opignoNav = $('#edit-actions'); // Select the H5P quiz container element const h5pQuiz = $('.questionset'); // Check if the H5P quiz container element exists if (h5pQuiz.length > 0) { // Hide the Opigno navigation element opignoNav.hide(); // Listen for the H5P xAPI event when the quiz is completed H5P.externalDispatcher.on('xAPI', function(event) { if (event.data.statement.verb.display['en-US'] === 'completed') { // Show the Opigno navigation element opignoNav.show(); } }); } }); /script> script> // If the user wants to retry quiz, refresh page to hide navigation again $(document).on('click', '.qs-retrybutton', function() { location.reload(true); }); /script> Step 6: Make sure to correct the script tags. I omitted the opening carrots so you could see where I had the script tags.