Click To Reveal H5P library - Custom!

Submitted by supriyarajgopal on Tue, 07/26/2016 - 15:04
Forums: 
Feature requests

Hello everyone,

I wish to contribute this custom content type I created called 'Click To Reveal'.

It is heavily borrowed from the already existing Dialog Cards library (many thanks to its author!)

!Note: The latest code can be found in https://github.com/supriyarajgopal-spi/H5P.ClickToReveal 

Description:

  This content type allows users to upload thumbnail images along with their corresponding enlarged images and some text accompanying it.

  Whenever a thumbnail image is clicked, its corresponding enlarged image and the text is shown.

  The CSS is identical to Dialogcards content type with minor changes.

  TODO: Handle responsiveness and show a carousel when more thumbnail images are added (similar to an image gallery).

Please note that translations are not yet supported and this content type also lacks theming.

Anybody who can take this up further is most welcome!


Regards,

Supriya Rajgopal

H5P file: 
Binary Data H5P.ClickToReveal-1.0.h5p
Attachments: 
Package icon H5P.ClickToReveal-1.0.zip
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
icc's picture

icc

Wed, 07/27/2016 - 13:35

We will have to review it before posting it to the Example and Downloads page. If you could provide a good example content, a description and possible a logo image to use that would be great!

supriyarajgopal

Wed, 07/27/2016 - 14:03

Hi icc,

I will be glad to participate as much as possible. How do I provide an example content?Should I export my sample content? If yes, how and where? Can I place the description in the Readme.md file? I looked up in https://h5p.org/contributing but didn't get any specific steps to follow.

Please advise.

Regards,

Supriya Rajgopal

icc's picture

icc

Wed, 07/27/2016 - 14:15

You can just upload the example .h5p to this forum. You can place the description in the readme or include it in the forum.

supriyarajgopal

Mon, 08/01/2016 - 14:03

Hi icc,

I have updated the .h5p file with content.json and README.md with the description.

Also find attached here the sample content in .json format.

Attachments: 
Binary Data content.json
thomasmars's picture

thomasmars

Thu, 08/18/2016 - 15:10

I've had a look at the content type and think the concept is really cool! I can imagine some pretty neat use-cases once it has been polished.

I have suggested some issues for improvement:

  1. The thumbnails should have some limitation on their size set on their container
  2. Tip and other unused semantics should be removed
  3. Consider making the card a popup that would only show when clicking a thumbnail
  4. Make thumbnails have a set height and center them
  5. If there are more thumbnails than available width create a carousel

Do you have a public repository on GitHub where this is shared ? That would make it a lot easier for developers and creatives to contribute, give feedback and suggest issues to help the content type reach its potential! :)

- Thomas

supriyarajgopal

Wed, 08/24/2016 - 14:18

Hi Thomas,

Thank you so much for taking the time to review this. I am running short of time to work on this but whenever I do, I will surely update the changes suggested.

Regards,

Supriya Rajgopal

supriyarajgopal

Thu, 09/01/2016 - 14:19

Hi,

I was trying to extend the functionality of this plugin. I wish to add Media support i.e when the thumbnail image is clicked, the enlarged item could be either an image or a video. Right now, it is only an image.

I borrowed the code from H5P MultipleChoice.

I added field of type 'media' in semantics.json.

In my custom .js file, I am calling self.setVideo(card.media) to load the player but this keeps throwing errors like self.setVideo() is not a function. setVideo() is defined in H5P.Question 1.2's question.js file

Could you please help?

This ClickToReveal library doesn't have preLoadedDependency on Question. Even if I add it as a dependency in library.json, no change in result :(

Any help is appreciated.

thomasmars's picture

thomasmars

Fri, 09/02/2016 - 09:22

If you want to add the video using H5P.Question you have to inherit from it since it is a superclass. This can be done as for instance Blanks does it, by added preloadedDependencies and inherit from it inside your class constructor. However, Question's setVideo will create a separate section for the video. I don't think this is what you want. I would rather process the video using H5P.newRunnable to create a H5P.Video, which you can add to any container you want. Similar to how Question does it inside the setVideo function

supriyarajgopal

Fri, 09/02/2016 - 09:28

Well, I used the way Blanks does it (inheriting Question superclass) because it gives me a Media field where I can add either an image or a video. This is how I want but..you are right, I don't really want ClickToReveal to be a subClass of Question. 

Can I achieve Media support (image or video option while uploading) using the suggestion you have provided?

Thanks in advance!

supriyarajgopal

Fri, 09/02/2016 - 09:29

By the way, this is what I have so far:

questionObject = new Question('clicktoreveal');

questionObject.contentId = self.contentId;

        questionObject.setVideo(card.media);

No errors are thrown but nothing is playing either :(

thomasmars's picture

thomasmars

Fri, 09/02/2016 - 10:38

The media group in editor is determined from the semantics, you can see how this is done in Blanks.

It is possible to achieve media support through my suggestion, since it is essentially what setVideo does, but with more freedom for you.

You should check what card.media is to make sure it has the correct parameters.

supriyarajgopal

Fri, 09/02/2016 - 13:45

Hey Thomas,

Thank you so much for your guidance. I could create a video using newRunnable() as suggested by you.

I had problems in showing it in the currently being viewed card but I fixed it too. I was not wrapping it to the right container.

Many thanks! What would I do without you?? ;)

Regards,

Supriya Rajgopal

thomasmars's picture

thomasmars

Mon, 09/05/2016 - 09:28

Hehe, glad it worked out. Looking forward to seeing how it turns out :)

supriyarajgopal

Mon, 09/05/2016 - 12:25

Yes, I shall upload the latest version of ClickToReveal here.

supriyarajgopal

Wed, 09/07/2016 - 11:31

Hello,

I have placed the latest code in my GitHub repository https://github.com/supriyarajgopal-spi/H5P.ClickToReveal .

Please feel free to update/contribute!

Thanks in advance,

Regards,

Supriya Rajgopal

thomasmars's picture

thomasmars

Thu, 09/08/2016 - 09:48

Looks promising :)