New Library: Bootstrap-inspired Cards

Forums: 

One of the things I'd like to do with h5p is create stylized "grouped content" that can be copied and used in other libraries like Course Presentations and Interactive Videos.

Currently, each content element is treated separatly, so if I was looking to copy/paste a group of content that includes shapes, links, text, images, etc., I would need to copy each element at a time.

One often repeated grouping of elements (or content layout) is Cards (Material Design and Bootstrap). Cards offer authors the ability to create easy-to-understand content layouts that can include images, headings, text, or buttons. Cards are a common way to present information and I find that they look good in course presentations.

Here is a card layout that I've created in a Course Presentation to illustrate my point: link

I hope you can agree, the card is visually appealing way to layout the content in that slide. The problems with creating a card this way:

  1. not possible to copy all elements that make up the card all at once.
  2. not easy to reposition, resize, or adjust the card and its content.
  3. card is not responsive
  4. takes a lot of time and effort to create a single card

Given this, I decided to try and create a new library that would allow me to create Cards in h5p. I have a very rudimentary library that I’d like to share for feedback, suggestions, and assistance: https://github.com/ymdahi/h5p-cardblock.

Editor interface:

Display:

Here are some examples of the library in action:

  There is still a lot of work to do:

  1. Make a single card copy-able (now possible with https://github.com/ymdahi/h5p-standard-card)
  2. Allow Card creation in Course Presentation and Interactive Video editors.
  3. Better responsiveness and content awareness (i.e height of certain elements).

Thanks for your time.

 

Summary: 
New library for creating cards

A couple of nice updates:

  • I've created a new library called h5p-standard-card: https://github.com/ymdahi/h5p-standard-card.
  • I've adopted the h5p-standard-card library in h5p-cardblock - this means that each card can have metadata and can also be copy/pasted in Card Block content types.
  • I've also added some logic for a better responsive experience when there is no image or button for the card.

A couple of things left to do:

  • Allow card creation in Course Presentation
  • Allow card creation in Interactive Video
  • xAPI statements for card interactions (i.e. button click)

 

BV52's picture

Hi ymdahi,

Thank you for sharing your work with the H5P Community! The Core Team is as usual very busy. I think at best they get to the full review in February.

Here is the review issue: https://h5ptechnology.atlassian.net/browse/HFP-2894

-BV

Thanks for the update @BV52, that's fine with me as it will give me some time to clean it up a bit.

This is a really nice and very useful new content type. Do you have any future plans to allow the cards to fill all of the available space when there are not enough to fill a row? 

@macscruffs Thanks, and no, I had not thought of that yet - that's a good suggestion. I may add in the ability for the author to select the number of columns to give them a bit more control. Also, when creating Cards inside a Video or Course Presentation, the author should be allowed to resize the card.

This would be a fantastic content type, especially for Moodle users.

The default theme in Moodle, Boost, is based on Bootstrap and currently you can make those card styles using the HTML code from the Bootstrap site. But it would make life so much easier if you could create them using H5P, rather than copying and pasting HTML code.

Well done.

@hkalant Thanks! I'm glad you think this may be useful. 

This is such a nice and useful content-type. Sadly the 2 provided demo-links are dead, but here is another live demo : https://h5psandbox.learnful.ca/node/9.

Great content ! Thanks !

Isabelle