H5P Content embedded with iframe not showing in LearnDash Quiz Question

Submitted by yanp on Fri, 05/08/2020 - 08:04
Forums: 
Bugs in content types

 

 

Normal 0 false false false EN-US X-NONE X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0in; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} Could you please to explain me what should be fixed?

I will explain the problem according provided template:

  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

Thank you very much!!

 

1. Detailed steps to reproduce the bug (exactly how and when did it happen)

Localization the problem: LearnDash Quiz Questions in the description of the question.

Trying to embed H5P Find Image Hotspot questions into LearnDash Question. Tried shortcode (look likes as [h5p id="xxx"]) and <iframe>s. Successfully works in Topics, Posts, Quiz (description area). Not working in Question. It shows “Task descriptions” and “Reused” / “Embed” buttons under it. If I will re-size window – the content will show.

By default, I see the problem with the <div class="image-hotspot-question" style="height: 0px;"> and inside

<img class="hotspot-image" src=…………………../images/backgroundImage-5eae2700d883d.png style="width: 0px; height: 0px;"

 

2. Platform and version number. E.g. Drupal, Wordpress, Moodle.

WordPress - Version 5.3.2 running Boss Child Theme.

LearnDash - Version 3.1.3

H5P - Version 1.15.0

 

3. Mobile or Desktop

Tested in both. Most tests on Desktop (PC, Windows 7)

 

4. Browser: Chrome, Firefox, Safari etc

Tested in all three and IE.

 

5. H5P plugin version

Version 1.15.0

 

6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.

Find the Hotspot (1.8.6)

https://learnly.org/quizzes/yan-test/

7. Any browser console errors

No errors.

Attachments: 
Image icon Before re-size.jpg
Image icon After re-size.jpg
otacke's picture

otacke

Fri, 05/08/2020 - 14:59

Hi!

That's the same problem as described in https://h5p.org/node/205916 with the same explanation and solution.

Cheers,
Oliver

yanp

Sat, 05/09/2020 - 06:23

Hello Oliver,

Thank you for quick response!

Unfortunately, this solution did not working in our case. I tried to embed Javascript . In addition, I tried to install "Header and Footer" plugin and add in plugin. Tried added to body and to footer. Unsuccess. I used extremaly simple Javascript:

<script type="text/javascript">

 

window.dispatchEvent(new Event('resize'));

 

</script>

Can you give other solution or point where I can look?

Thank you very much,

Yan

otacke's picture

otacke

Sat, 05/09/2020 - 17:30

Hi Yan!

That function that you use would have to triggered by LearnDash when it changes tabs/popups/etc. or whatever provides those.

If you only call it once, when loading the page, it won't have an effect later on, of course.

Alternatively, you could try something rather stupid and resource hungry (but probably effective) such as

function triggerH5PResize() {
  window.dispatchEvent(new Event('resize'));
  setTimeout(triggerH5PResize, 500);
}

triggerH5PResize();

Please try to understand what you are doing before copying and pasting code.

Also please note that this solution will not work on IE11.

Best,

Oliver 

yanp

Wed, 05/13/2020 - 05:40

Hello Oliver,

Thank you for quick response! Sorry for delay with response!

I am not a programmer, I am a content manager with some coding knowledge, and I was waiting for a response from our freelance programmer about his attempt to use your solution. Unfortunately this does not work. In our case, we have a very nested structure for site and quiz questions. Even the WordPress Bakery Visual Editor works everywhere on the site, but does not work inside quiz questions ...

May be you have another solution?

Thank you very much!!

Yan

 

 

 

otacke's picture

otacke

Wed, 05/13/2020 - 22:10

Hi Yan!

If that's not working, then there must be some other issue in general. Your freelance developer should be able to check that very easily without the need to install anything by triggering the resize manually in the dev console, and so could you be resizing the browser window itself when H5P content should appear. If it doesn't, then there's some other problem and it's out of my power to guess what.

Best,

Oliver