Avoid the double navigation of Opigno(LMS/CMS) and H5P

Submitted by pepe_fr on Thu, 11/23/2017 - 17:09
Forums: 
Feature requests

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 goal and some users could be interested by the solution, we will share the strategy and code to the community.

User story:

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
}

UX:
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 ?

Technical solution:
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

We have also created a topic about this in the Opigno Community : https://www.opigno.org/en/forum/developing-opigno/avoid-double-navigatio... If there is some news there, we will add it here.

Attachments: 
Image icon Sélection_328.png
Content types: 
Course Presentation
Quiz (Question Set)
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
fnoks's picture

fnoks

Thu, 12/07/2017 - 14:41

Have you thought about using xAPI events to achieve this? You could e.g. hide the Opigno buttons until xAPI says "completed" ?

pepe_fr

Thu, 12/07/2017 - 16:35

Good idea, thanks a lot, we will study this possibility.

michaeljhtaggart

Wed, 03/15/2023 - 07:07 

<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>

michaeljhtaggart

Wed, 03/15/2023 - 07:08 

<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>