WP or Frame messing with item display
Hello everyone,
Seeking some guidance, I'm creating an instructional interactive book on my website for my small community. I made one page with the following sections: text (meant to contain information in plain text), image hotspots (a quick right vs wrong statement across 4 hotspots), question set (contains 3 questions with explanations on wrong answers, based on the earlier content).
While I see everything correctly in edit mode, the following issues come up when I view the page:
- the title of the image hotspot does not appear, as well as the header for each hotspot (i just see a + sign i can click)
- the title of the question set as well as the number of each question (or explanation on what to do for the drag-n-drop) does not appear either
I've tried troubleshooting and playing with iframes to no avail, I'm running Wordpress 6.9 with h5p plugin. Happy to provide screenshots or additional information as needed, appreciate all the support in advance!
Best,
L
otacke
Mon, 12/15/2025 - 22:45
Permalink
The best you can do is check
The best you can do is check your browser's development console and to report error messages that may be listed plus to share (access to) your file. Cmp. https://snordian.de/2024/02/17/how-can-i-craft-an-effective-bug-report-f...
longinus
Tue, 12/16/2025 - 07:11
Permalink
Thank you for your guidance
Thank you for your guidance thus far.
I've uploaded the h5p file to h5p.com and the moodle sandbox, I get the same result as described in my first post.
The browser inspector shows 3 warnings:
downloadable font: Glyph bbox was incorrect (glyph ids 5 6 14 16 18) (font-family: "h5p-book" style:normal weight:400 stretch:100 src index:1) source: https://consent.cedargardens.me/wp-content/uploads/h5p//libraries/H5P.In... downloadable font: Glyph bbox was incorrect (glyph ids 48 70 77 96 97 98 99 102 103 104 105 127 134 135 138 154 174 177 179 181 193 199 200 232 233 287 288 289 290 294 296 299 305 306 307 324 325 334 336 338 341 344 345 346 347 348 349 354 362 364 366 367 368 369 372 373 376 381 382 385 386 429 446 451 459 460 473 475 479 480 498 520 523 526 529 531 532 533 535 536 553 554 561 583 589 594 595 600 601 609 611 614 617 618 631 633) (font-family: "H5PFontAwesome4" style:normal weight:400 stretch:100 src index:1) source: https://consent.cedargardens.me/wp-content/uploads/h5p//libraries/FontAw... downloadable font: Glyph bbox was incorrect (glyph ids 14 18 20 25 28 29 30 32 33 39 45 46 48 49 50 52 72 73 76 78 81 83 88 90 92) (font-family: "h5p" style:normal weight:400 stretch:100 src index:1) source: https://consent.cedargardens.me/wp-content/plugins/h5p/h5p-php-library/f...
I have attempted to override the fonts with a custom CSS but it failed, also uploading the file here for further assistance if possible.
longinus
Tue, 12/16/2025 - 07:01
Permalink
Hello otacke,Thank you for
Hello otacke,
Thank you for your message.
I've uploaded the h5p file to h5p.com as well as the moodle sandbox and see the same issues as described in my first post.
I also found the following 3 warnings in the browser console, I am not an experience developer and not sure if a font issue can cause this:
downloadable font: Glyph bbox was incorrect (glyph ids 5 6 14 16 18) (font-family: "h5p-book" style:normal weight:400 stretch:100 src index:1) source: https://consent.cedargardens.me/wp-content/uploads/h5p//libraries/H5P.InteractiveBook-1.11/dist/3fbecededfe43dabfbb2.ttf?a3wrpr downloadable font: Glyph bbox was incorrect (glyph ids 48 70 77 96 97 98 99 102 103 104 105 127 134 135 138 154 174 177 179 181 193 199 200 232 233 287 288 289 290 294 296 299 305 306 307 324 325 334 336 338 341 344 345 346 347 348 349 354 362 364 366 367 368 369 372 373 376 381 382 385 386 429 446 451 459 460 473 475 479 480 498 520 523 526 529 531 532 533 535 536 553 554 561 583 589 594 595 600 601 609 611 614 617 618 631 633) (font-family: "H5PFontAwesome4" style:normal weight:400 stretch:100 src index:1) source: https://consent.cedargardens.me/wp-content/uploads/h5p//libraries/FontAwesome-4.5/fontawesome-webfont.woff2?v=4.5.0 downloadable font: Glyph bbox was incorrect (glyph ids 14 18 20 25 28 29 30 32 33 39 45 46 48 49 50 52 72 73 76 78 81 83 88 90 92) (font-family: "h5p" style:normal weight:400 stretch:100 src index:1) source: https://consent.cedargardens.me/wp-content/plugins/h5p/h5p-php-library/fonts/h5p-core-30.ttf?h1atjlI have tried forcing different fonts using a custom CSS, it didn't work. Appreciate any feedback!
BV52
Tue, 12/16/2025 - 16:26
Permalink
Hi longinus,The title of the
Hi longinus,
The title of the contents will not appear in Interactive Book. What you can do is add a "text" above the content which can act as its title.
The header for the hotspot is used by screenreaders and it also shows once you click on the hotspot. The Hotspot content was designed not to show any text until you click on the "+".
The number of questions in Question set can be shown by changing the "Progress Indicator" to "Textual" instead of "Dots". Based on the title of the questions in Question set there is an order to how the questions should appear. If this is the case you need to make sure that "Randomize Question" is unchecked.
For the instructions in Drag and Drop, the best place to add this is within the content itself by adding a "text" object but not checking any of the "Select drop zones" choices.
Additionally, I noticed that in your Drag and Drop content, the draggables you only chose one of the "Select drop zones". I assume the one chosen is the correct answer. What this will do is you can only drop that item in that drop zone. I suggest placing a check on all the drop zones. Lastly, you will need to edit each drop zone and place a check on the correct answer. You can also check this simple video on how to create a D&D with multiple drop zones and draggables.
I partially edited your content to show how you can add the title as well as the instructions. I did not edit the the drag and drop completely since I do not know which are the correct answers.
https://bv-demo.h5p.com/content/1292773398603464349
As for the message in the developer console I have no idea what this means but I'm sure that this is not causing you the trouble.
-BV