otacke/h5p-agamotto

Present a sequence of images and explanations in an interactive way

Hi, I'm Oliver ()!

I'm an IT freelancer who loves H5P!

• 💝 Loves contributing to open source projects and Open Educational Resources.
• 🏦 For a living, helps others to better use H5P at SNORDIAN.
• 🥺 Gets sad when people pretend or believe they cannot do something.
• 🎙️ Co-hosts a podcast about teaching and learning with digital media called BldgAltEntf.
• 🏃‍♂️ (Re)-Started running and hopefully will keep running this time 😄. Track and nudge me!

🔧 Technologies and tools

h5p-agamotto's Issues

Fullscreen mode

See https://h5p.org/node/152958 for request.

Bug with Audio

Using h5p-agamotto latest version 1.6.3 in an interactive book. If an audio element is added to an image description, then the audio plays automatically when navigating to the page just before the agamotto content!
Steps to reproduce (on a dev site)
1.- Have latest h5p-agamotto version 1.6 installed on your dev site
2.- h5p-column create a new branch, e.g. testing_audio and, in semantics, change "H5P.Agamotto 1.5" to "H5P.Agamotto 1.6"
3.- Create an H5P Interactive Book
4.- Create page 1 with only a Text content in it
5.- Create page 2 with a Multiple Choice question in it
6.- Create page 3 with an Agamotto content in it with 3 images with an Audio component for each.
7.- Save and run the H5P Interactive Book
8.- Page 1 : read the text
9.- Navigate to page 2 (with the MCQ question) : the Audio content of the last image in your Agamotto content (on page 3) is automatically started!
10.- If you continue to navigate, to the end of the IB, then check the Restart button, navigating to page 2 does not play the agamotto Audio... When you arrive on page 3, the Audio player button is in the ON state but nothing plays... You have to click it to OFF, then to ON again for the audio to play.

Implement suggestions from Pål

1. Some
2. Lower camel case
3. Font family
4. Overlapping labels

Event Dispatching in IE not working

Surprise! There's the one browser that dislikes something ... It seems that dispatching of custom events has to be handled differently in order to work with the Internet Explorer.

Check performance problems

Something seems to feast on the CPU when sliding

Usable in Column

Beautiful contribution to h5p. Are there any plans to incorporate this into Column? Would be nice to add questions etc. underneath agamotto.

Thanks

Allow HTML tags MARK and ABBR be used in image descriptions.

Hello Oliver,
I'm using your great feature for the setup of a training course, and would need a few specific features useful in this context.

Would it please be possible to allow for additional HTML tags in Agamotto image descriptions? I would need the tags mark to highlight words (e.g. <mark>highlighted text</mark>) and abbr/title to add a tooltip (e.g. <abbr title="tooltip text">text with tooltip</abbr>).

While I can currently copy/paste such formatted text into the description edit field:

once it is saved and displayed the formatting currently gets lost:

Or maybe you could point me please to alternative approaches to achieve this?
Thanks in advance for your help.

Slider on Firefox not properly aligned

(optionally) snap to closest slider position

fix IE 11 slider

Find a fix for the range sider not moving with IE11 or replace it by a custom slider alltogether.

Layout distortion after orientation change

It seems that on iOS devices, the layout (may) get distorted after switching from portrait orientation to landscape orientation.

Check resizing

There seems to be an issue with resizing. Check if I have had this issue before and if I fixed it in the experimental branch.

Select start image

As an author I want to be able to select an image to starting from.

https://h5p.org/node/530775

Add xAPI statements

It might be useful to trigger xAPI statements, compare this thread on Twitter.

Spinner for slow connections

If you have a slow connection, it's not clear whether there's a problem or if the images are still being loaded. Could be resolved by using a spinner.

Change dot color

H5P Interactive video will get new dot colors for the seekbar. Match that.

Links don't open

Links can be opened using the right mouse button and context sensitive menus but not using a simple click with the left mouse button.

Agamatto doesn't work with Internet explorer 11

Please see

#49

larger margin between slider and description

Setting for background color

As an author, I want to be able to select the default background color that's used for transparent images (right now it's black only).

[question] How to hide title?

How can the title above the images be hidden or not displayed at all like in this Example
Tested with 1.5.2 and 1.6.4 in Moodle 3.11.16. Title is constrained to be not empty (Editor) and an empty Headings field will cause the title to be displayed(?). In short: Something always seems to be displayed. I would be grateful if you could shed some light on this. Maybe it's intended to be not empty, that's ok for me. I just want to make sure I didn't miss anything.

Thanks and greetings
Jörg

Use VerticalTabs widget for images in semantics

Disable slider until all images are loaded

If you have many images or a slow connection, you can possibly move the slider before all images are loaded, so they won't be shown.

1. Disable the slider until all images are loaded
2. Show some kind of loading animation (above first image) until all images are loaded

Agamatto doesn't work with Internet Explorer 11

Hello,

mod_hvp 1.20, Agamatto Agamotto (1.4.3) doesn't work at all with Internet Explorer 11, it just displays blank picture. Here is attached the example h5p used.

jarin-agamatto-5-11-2019-478.zip

Input validation

Input parameters should be validated, e.g.

• images missing (they can be set as mandatory in H5P, but this doesn't seem to be checked right now)
• more than 100 images (unlikely, but the slider range would have to be adjusted)

layout depending on mobile device orientation

When using the content type on a mobile device, the layout will be screwed up when changing the orientation of the device.

Possible issue with HTMLCanvasElement.toDataURL()

Cmp. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Cmp. https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception

Improve WAI-ARIA

I'll have to have a look at WAI-ARIA and improve handling:

• keyboard control
• ALT tags
• ...

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency sass to v1.77.6

Detected dependencies

github-actions

.github/workflows/reuse-h5p-build.yml

• otacke/github-action-h5p-build v1

npm

package.json

• detect-browser ^5.3.0
• @babel/cli ^7.24.7
• @babel/core ^7.24.7
• @babel/preset-env ^7.24.7
• babel-loader ^9.1.3
• css-loader ^7.1.2
• mini-css-extract-plugin ^2.9.0
• regenerator-runtime ^0.14.1
• sass ^1.77.5
• sass-loader ^14.2.1
• stylelint ^16.6.1
• stylelint-config-recommended ^14.0.0
• stylelint-config-recommended-scss ^14.0.0
• webpack ^5.92.0
• webpack-cli ^5.1.4

---

• Check this box to trigger a request for Renovate to run again on this repository

Possible issue with resizing and labels

Check if adding labels might in some cases screw the resizing

Optional next/previous buttons

"Have you considered optional next/previous buttons? I think in some cases where the reader wants to read a lot of text per image a next button could be good?"

Tidy up the code a little bit

• method definitions

Keyup is invoked more than once in slider.js.

Keyup is invoked more than once in slider.js.

Scaling on iPhone (mobile devices)

"I did test it on iPhone and it seems to work except if you go from portrait to landscape the scrollbar is almost completely hidden and you can't navigate anymore :/"

Add toogle option for transparency

https://h5p.org/node/143423

Style the slider

Use CSS to make the slider a little nicer (and hopefully identical on all browsers).

MathJax in description: Swapping between rendered eqn and latex code

Hi,
I've made a strange observation: when using Mathjax latex code in the image description, the display continuously swaps between the rendered eqn and the MathJax latex code. Same when using (...) inline delimiters.
Can anyone confirm the behavior?
Thx Jörg

Agamotto (1.5.2):

Leaving 'Description Text' blank returns error

When the description text is left blank, the user receives, "Uncaught TypeError: Cannot read property 'getCurrentDescriptionText' of undefined". This leads to display issues.

Optional ticks

Optional ticks might be nice, e.g. as dots as in interactive video or as slim vertical bars (shorter as those in interactive video).

Links not working if they contain strong tag (and maybe others)

Links are not clickable if they contain text that's surrounded by other tags, e.g. <strong>.

Refactoring

This content type might need some refactoring, e.g.

• have a content class between the main class and the slider, images, etc.
• have a separate audio class
• turn the images class into an image class
• make slider DOM use flexbox
• use callbacks (or events) to communicate from component to main

Links in Image Description texts not available

Hi Oliver,
Just found out that links in the Image Description texts are sometimes not available (i.e. not clickable). My guess is that comes from those texts being displayed or hidden through an opacity value, rather than hidden through a display: none value.
The current setting means that the display of the description texts follows the same fade-in/fade-out as the images. I'm not sure there is an advantage in this setting, which superimposes the texts making them illegible anyway. If you could give up the opacity feature and make those texts use the display:none value when not needed, then the links could work again.
Thanks!

UX improvement

Some people seem to confuse Agamotto with Interactive Video. Think about a way to improve that.

Resize description container, too.

I seem to have had a reason not to resize the description but to add scrollbars if the container's height doesn't suffice for the text.

// The descriptions will get a scroll bar via CSS if necessary, no resize needed

However, this might be changed -- if requested.

Add labels for ticks

Ticks might bear optional labels, cmp. https://h5p.org/node/103835