h5p / h5p-interactive-book

H5P Interactive Book

Interactive Book is an H5P-component, giving users a central knowledge base which utilizes the H5P Framework

Getting started

Grab all the modules:

npm install

Build project:

npm run build

h5p-interactive-book's Issues

Using interactive book with LMS

I think it makes great sense to make [Restart] optional, where you can change the behavior from the options panel. This will give us the power to use it with an LMS setting.

Because IB has the button to submit the score, I prefer it over the Course presentation where it just auto-submit scores when come to the last reporting page. The LMS I am using has its own option of the restart a quiz type based on the score, let's say if a user has a score of below 50, The LMS can be based on the score to offer the user to retake the quiz again.
Interactive Book right now also has the restart quiz/interaction button on by default, this would come in conflict with LMS. Because the user can just re-do the quiz if they don't like the score, defeating the IB's quiz taking/reporting purpose.

Video does not play in Firefox

I have an issue with interactive videos inside the interactive book. In firefox the interactive video does not play in non full screen mode. The only error get in firefox console: "No ajax path found"

any ideas?

Kathrin

position sticky require .h5p-interactive-book-main to have max-height set to screen height

The menu has sticky as position. However it doesn't work because it require the parent to have a fixed height.

To make the menu sticky :
→ the .h5p-interactive-book-main overflow property should be auto
→ the .h5p-interactive-book-main need it's max-height to be set to window.innerHeight (and to be updated upon resize)

How does versioning works ?

Hi,
How does versions works ?
I mean in this repo the version of all branches are on same 1.4.2
But in my moodle site it's on 1.3.5

there is a button(I assume it's for update) but it's greyed out and i can't update interactive book.
Any idea how to bump it to latest version ?

Focus shifts to .h5p-interactive-book-main when .h5p-interactive-book-navigation-chapter-button clicked

Hi,

I've found a minor issue when if you change to a different chapter in a book, it shifts the screen to the top of the main chapter navigation window.

This is in Moodle 3.8.9

I've included images below

I believe this may be due to the Moodle navbar.

Kind Regards,
Jeremy Virgo

Chrome only: interactive book plays audio in next chapter

I'm using an interactive book widget in Moodle 3.9 to play sections of a SCORM course by using iframe embedders to embed each section in a chapter of the interactive book.

But ON CHROME ONLY, when I load the first chapter, the audio/video for the second chapter loads and starts playing simultaneously with the first, causing distracting audio overlap.

Same goes for when I get to the third chapter. Audio from the fourth chapter starts playing simultaneously. Etc.

I looked at the code for the interactive book widget, where in the file pagecontent.js there is a two-line method "preloadChapter" whose function is to "Preload current chapter and the next one" according to the comment.

I deleted the second line of the method, thinking that only the current chapter would then be preloaded. But to my surprise, deleting the line had no effect.

.h5pignore missing elements

.h5pignore seems to be missing:
package-lock.json
LICENSE

Adding images to the menu,

Hello guys, just wondering how can I achieve adding images to the left menu, I would like to have the ability to upload images when I'm building the book and be reflected in the left menu.

h5p-interactive-book

h5p-interactive-book/semantics.json

Line 74 in 4d97960

"max": 50,

Improve authoring tool

When working with several pieces of nested content, especially with in the book, the authoring tool becomes very cumbersome due to the indentation of the content, leaving you with very little space in which to work. I really like the resulting content of the interactive book, but creating it is not a nice experience, even on a wide screen monitor. Would it not be better to use pop-out editors or modals instead of indenting?

Allow book content to use existing content

Enhancement

It would be incredibly useful if the interactive book (and other combined content types) allowed for the inclusion of existing content. This would allow course designers to modularise pieces of course content and reuse it elsewhere. For example, I want to be able to create question sets that I use in a larger quiz. It would be great if I could simply reuse the content later on in a course exam for summative evaluations.

Image hotspots not shown in fullscreen

To reproduce problem:

1. Open https://h5p.org/content-types/interactive-book
2. Click Read
3. Open in fullscreen
4. Navigate to blueberries
   Error: there is no hotspots image on the blueberris page.
   Now, if you exit fullscreen the image will be shown.

Adding Links between Pages of Interactive Books

Would it be possible to add bidirectional links between different pages?

Integration of Find Multiple Hotspots not possible

I just found out that I cannot integrate the content type "Find Multiple Hotspots" into Interactive Book. Is there any reason for this exclusion?

Can not change page when embed into iframe with sandbox attribute

Demo: https://demo.elibsystem.ru/node/38675/webfs/index.html

Application try change hash of location, that not allowed for iframe. Browser throws error and page not changing.

Reproduce:

1. open https://demo.elibsystem.ru/node/38675/webfs/index.html;
2. press "read";
3. go to next page in sidebar.

Problem code example:

<iframe src="https://demo.elibsystem.ru/h5p/embed/38674" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" allowfullscreen style="width: 100vw; height: 100vh; border: 0px;"></iframe>

Workaround: sandbox="allow-top-navigation"

Only show score only after submit.

If you want to use interactive book for a test. You don't want it to show score before you submit your answers.
So people can't change there answer until they get full score.

If it would only show score after submit:

• You still have to make sure the content you use insides interactive book does not show the answer. or don't allow you to retry.
• and people can cheat on a test in other ways.

But it would be usable for in a test.

I am thinking about making a merge request for this. But it would be nice to know if you think this feature is a good idee?

Navigation configuration

When including presentations in a Book, navigation can be confusing for the user.
There are 2 book navigation panes (top and bottom) and the presentation navigation in the middle.
I would be great if the visibility of the book navigation panels is configureable, so for example the bottom navigation could be hidden.

Copy past of "contentType":"Single Choice Set" keep same subContentId for the question

Hi,
I created two single questions and duplicated the first one.
We see that the questions have identical subContentIds.
You can see it in the h5p in the zip file or in the json part below.
The "subContentId":"00e2e13c-6645-4c43-90ee-5a7b7004f648"and "subContentId":"cd6d4ee0-6660-4b75-88b3-ef60f12280c0" are duplicated.
I get the info with xAPIevents and I can't link the results to the right question of the H5P.

{ "showCoverPage":false, "bookCover":{ }, "chapters":[ { "params":{ "content":[ { "content":{ "params":{ "choices":[ { "subContentId":"00e2e13c-6645-4c43-90ee-5a7b7004f648", "question":"<p><strong>Test 1<\/strong><\/p>\n\n<p>je l'ai mis en gras et j'ai fait un saut \u00e0 la ligne<\/p>\n", "answers":[ "<p>1<\/p>\n", "<p>2<\/p>\n" ] }, { "subContentId":"cd6d4ee0-6660-4b75-88b3-ef60f12280c0", "question":"<p>Test 2<\/p>\n", "answers":[ "<p>3<\/p>\n", "<p>4<\/p>\n" ] } ], "overallFeedback":[ { "from":0, "to":100 } ], "behaviour":{ "autoContinue":true, "timeoutCorrect":2000, "timeoutWrong":3000, "soundEffectsEnabled":true, "enableRetry":true, "enableSolutionsButton":true, "passPercentage":100 }, "l10n":{} }, "library":"H5P.SingleChoiceSet 1.11", "metadata":{ "contentType":"Single Choice Set", "license":"U", "title":"Test 1 Test2" }, "subContentId":"09239be2-c87d-4a86-bbc5-aa12ca00e199" }, "useSeparator":"auto" }, { "content":{ "params":{ "choices":[ { "subContentId":"4997e068-334f-4fc4-8397-628e926e7e59", "question":"<p>Test 3<\/p>\n", "answers":[ "<p>5<\/p>\n", "<p>6<\/p>\n", "<p>7<\/p>\n" ] }, { "subContentId":"ff125b6b-5231-4cbc-87d9-96fe8a1b69ba", "question":"<p>Test 4<\/p>\n", "answers":[ "<p>8<\/p>\n", "<p>9<\/p>\n", "<p>10<\/p>\n" ] } ], "overallFeedback":[], "behaviour":{}, "l10n":{} }, "library":"H5P.SingleChoiceSet 1.11", "metadata":{}, "subContentId":"cc47e9d1-80b4-4f32-b5ad-f50952c04ef2" }, "useSeparator":"auto" }, { "content":{ "params":{ "choices":[ { "subContentId":"00e2e13c-6645-4c43-90ee-5a7b7004f648", "question":"<p>Test 1 copi\u00e9 coll\u00e9<\/p>\n", "answers":[ "<p>1<\/p>\n", "<p>2<\/p>\n" ] }, { "subContentId":"cd6d4ee0-6660-4b75-88b3-ef60f12280c0", "question":"<p>Test 2 copi\u00e9 coll\u00e9<\/p>\n", "answers":[ "<p>3<\/p>\n", "<p>4<\/p>\n" ] } ], "overallFeedback":[], "behaviour":{}, "l10n":{ "nextButtonLabel":"Question suivante", "showSolutionButtonLabel":"Voir la solution", "retryButtonLabel":"Correction", "solutionViewTitle":"Recommencer", "correctText":"Correct !", "incorrectText":"Incorrect !", "muteButtonLabel":"Couper les retours sons", "closeButtonLabel":"Fermer", "slideOfTotal":"Diapositive :num sur :total", "scoreBarLabel":"Vous avez :num points sur un total de :total", "solutionListQuestionNumber":"Question :num", "a11yShowSolution":"Show the solution. The task will be marked with its correct solution.", "a11yRetry":"Retry the task. Reset all responses and start the task over again." } }, "library":"H5P.SingleChoiceSet 1.11", "metadata":{}, "subContentId":"714fa895-6950-4f4d-a806-b938f8fdbeef" }, "useSeparator":"auto" } ] }, "library":"H5P.Column 1.15", "subContentId":"c78cdf0d-309e-4d1f-86f4-87911495f7a2", "metadata":{} } ],

test-single-choice-set-70.zip

Interactive book embedded essay questions are not showed in detailed report.

Hello,

If you add essay question in interactive book -> student writes something -> it isn't displayed in detailed xAPI-report in Moodle even though if you just use essay-library as by itself the report/what student has written is shown.

Detailed report can be open from grades -> click the h5p-activity name

I created this here because you cannot report issues at https://github.com/h5p/h5p-interactive-book

Improving quiz aggregation functions

I love that I can use different types of question sets with the book to create a robust quiz with different question sets, all while drawing from a randomised bank. This extends the utility of the activity beyond a single use activity to a more useful formative learning tool. However, I wish I could weight different question banks so that some question types are worth more than others. I would not want a T/F question to be worth the same as an essay, but I am not sure there is a way to do this presently.

Perhaps this will be accommodated in the upcoming exam option?

text and image side-by-side

Will there be an option to put text and image together?
And is it possible to add "Exportable text area"?