Display issues in Quiz (Question Set)

I have created a question set, and placed it on a page.  

When I first load the page, there is a lot of whitespace under the first question before the rest of my content can be seen.  I am using a Mac, and have the same results for both Chrome and Safari.  Here is an image - I can't even capture the bottom of the H5P box in my screenshot.

question with whitespace

If I resize the page, then the whitespace disappears.

If I move to the next question in the set, the whitespace disappears.

If I move back to the first question from the next, the whitespace disappears.

Here is what is looks like without the whitespace.

Image - no Whitespace

Has anyone had this issue, and is there anything I can do to make this whitespace go away?

Stacy

 

 

Content types: 
icc's picture

Are you using the iframe embed code or a shortcode? 

The space most likely has to do with the resizing of the H5P. For some reason the container isn't bouncing back – this may have to due with the initial height setting of the container. Are you using some sort of accordion library? If so it may need some adapting, e.g. listening for a resize event to fix the issue. Are you able to share a link to this page? 

Hello! I have the same problem can you help me?Step by step?

THANKSSS

BV52's picture

Hi BLUEBOOK,

Please check my answer here.

-BV

tim's picture

Hi Stacy,

thanks for reporting this bug. I think it may have to do with the object that contains the Question Set. Is it a H5P accordion or is it something specific to the site you are using?

 

Tim,

Thank you for the reply - I am using the accordian tool that is part of the Academy LMS Theme for WordPress.  I will experiment with some different accordians, and with the H5P accodion in the same situaion to see if this fixes the issue.  I will post when I have tried a couple of different configurations.  

Stacy

Hello Tim, 

I have been having the same issues using Divi and placing the question set into a Toggle and Accordion.  

Stacy

tim's picture

Hi Stacy, could I ask what Divi is?

 

Hi Tim - yes, so sorry for not giving enough information...

I have used 2 different tools to create toggles/accordions and placed the H5P Question Sets in these toggles.  I use a shortcode on one, and a front-end authoring called Divi on the other.   I am having the same rendering issue in both.  You can check them out on these pages...

On this page - http://testing.edbookslearning.com/lesson/lesson-1-what-is-literature/ - if you open up the CHECK YOUR KNOWLEDGE toggle, you can see the large white space below the question when it first loads, it will go away when you click through to the next qeustion. This page is built through Divi Builder.

The same on this page - https://demo.edbookslearning.com/lesson/module-1-introduction-to-literat... - again in the Check Your Knowledge section.  This page is also in WordPress, but using a different theme to build and create the toggles.  

Thank you again for looking into this.  Please let me know if you have any more questions. 

Stacy

 

tim's picture

Hi Stacy, just before I create a ticket for this to be investigated further, could you tell me which theme you're using for Wordpress so I can try and recreate the error?

Thanks,

Tim

Tim,

For this instance -  http://testing.edbookslearning.com/lesson/lesson-1-what-is-literature/  -

For this instance - https://demo.edbookslearning.com/lesson/module-1-introduction-to-literat...

Thank you again for looking into this, and please let me know if you need anything else. 

Stacy

tim's picture

Hi Stacy, I've created a ticket for it and you can follow its progress here:
https://h5ptechnology.atlassian.net/browse/HFP-1374

Dear all we are very new and not expert technician . Could you help us with the h5p step by step? the problem is that the course presentation is blank( a white rectangle) and not visualized. many thanks for your great help!

BV52's picture

Hi BLUEBOOK,

In order to give your bug report the best chance of getting answered, please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem

-BV

Dear BV52 here all the information I collected :)

1.It happens on PC: the H5P course presentation is not visualized,I have a white rectangle instead of the H5P course presentation. The H5P course presentation is included in an accordion.

2. Wordpress version: 5.7

3. The problem is on desktop not on mobile phone

4. Chrome, Safari , Firefox

5.H5P versione 1.15.0

6. I copied the url generated "offending" the page  https://veritage.eu/the-veritage-learners-kit/#acc-085s504-0

7 and 8 Where do I have to look for?

9. I uploaded the image

Many thanks for your prompt answer!!

Noemi- Bluebook

Dear BV52 here all the information I collected :)

1.It happens on PC: the H5P course presentation is not visualized,I have a white rectangle instead of the H5P course presentation. The H5P course presentation is included in an accordion.

2. Wordpress version: 5.7

3. The problem is on desktop not on mobile phone

4. Chrome, Safari , Firefox

5.H5P versione 1.15.0

6. I copied the url generated "offending" the page  https://veritage.eu/the-veritage-learners-kit/#acc-085s504-0

7 and 8 Where do I have to look for?

9. I uploaded the image

Many thanks for your prompt answer!!

Noemi- Bluebook

BV52's picture

Hi Noemi,

Would you mind checking the content. It is possible that you are using the wrong shortcode. Attached is the error that I am seeing on my end.

-BV

Attachments: