How can I improve my embedded interactions on my website?

Submitted by debbie leance on Wed, 10/25/2017 - 21:58

Forums:

General discussion

I would like to delete this initial block, see proceeding comments following this thread. Thank you. (10/28)

debbie leance

Sun, 10/29/2017 - 01:32

Permalink

any issues in responsiveness on iphones?

Hi, I have been embedding some interactions on my website, and the embedded content is not loading very well when I check it on my phone. The rest of my site is responsive and I am able to make modifications for my mobile view of my site, but the interactions are coming out strange.

1- my drag and drop: I modify the size of the interaction for the mobile version, as I would for other content. However, the "box" can shrink or enlarge, but the content within I believe is staying the same size. This leaves user unable to view the whole drag and drop on their screen, only segments. I'm not sure how to proceed.

2- my "Image HotSpot" is not loading well either. It actually does load, but there is quite a delay in the image to appear after the directions (a delay as in a minute or two). I'm wondering if you have any tips for me here?

I practiced your sample interactions directly on h5p.org on my phone, and I did not find similar issues. I'm guessing it's going to have to do with the css on my particular site. Any suggestions for me?

Any suggestions for me?

otacke

Sun, 10/29/2017 - 08:54

Permalink

Hi Debbie!For issue #1 make

Hi Debbie!

For issue #1 make sure that when you're embedding an interaction you're including the link to the tiny javascript file that's presented if you click on embed. It's needed to tell the embedding iframe to resize.

Issue #2 to me sounds like using very high resolution images or a slow network connection - or even both. Have you tried reducing the images' resolution?

debbie leance

Sun, 10/29/2017 - 14:53

Permalink

Great suggestions

Thanks so much Oliver!

So, I adjusted the ratio and embedded the new embed code and javascript to follow. It's better now! Thanks!

Issue #2: My image is loading better, I had a very big photo so I resized it and lowered resolution a bit. However, I notice that (aside from the photo resolution), it either scenario if you click on the wrong spot, it does not give you the option to "try again". My settings are normal to allow for this, and on my main website I get the option to "try again" if I click in wrong spot, but on my cell phone if I click wrong, I'm just stuck and can't get off of that screen. Any suggestions?

Attachments: