IE11 doesn't support string literals

[otacke]

You're using string literals. Those are not supported by IE11 cmp. https://kangax.github.io/compat-table/es6/

Since H5P still strives to support that old browser, you might want to use common string concatenation or switch to a babel-based build chain like all the latest H5P content types.

h5p-cardblock/scripts/cardblock.js

Line 32 in 23c666e

var cardMedia = `<div class="card-media"><img class="card-image" src="${H5P.getPath(this.options.cards[i].params.cardImage.path, this.id)}"></div>`;

[ymdahi]

Replaced string literals with string concatenation :(

h5p-cardblock/scripts/cardblock.js

Lines 34 to 35 in 59722ae

	var cardMedia = $('<div class="card-media"><img class="card-image" src="'
	+ H5P.getPath(currentCard.params.cardImage.path, this.id) +'"></div>');

[otacke]

@ymdahi I also like the ES6 features, but as long as there are many users who rely on IE11 (and there still are too many), H5P will support that browser. If you want to use ES6, go for Babel. Your content type is tiny, so you could put it into the boilerplate template at https://github.com/h5p/h5p-boilerplate quickly, I guess.

[ymdahi]

Cool, I'll make sure to use the boilerplate next time.

[otacke]

Note that there's the master branch for this simple type of content type - and a separate branch for question type content types that may require the usual check/show solution button, xAPI statements, etc.

[ymdahi]

Definitely useful - I've started transferring to the boilerplate.

Question: @otacke if I want to enable CardBlock creation within the Interactive Video or Course Presentation content types, where do I need to make changes to enable that? What would be my next steps to get a cardblock in a slide or on a video?

Note that in this content type, I am using the h5p-standard-card library (https://github.com/ymdahi/h5p-standard-card). I assume that I will need to expand on h5p-standard-card and include it in other libraries that I want to create cards in?

[otacke]

@ymdahi

In general, it's enough to add your content type (just one line of code) to the semantics file of the compound content type, e.g. https://github.com/h5p/h5p-column/blob/master/semantics.json#L14-L52 for column. Done. You'd just have to make sure that it resizes correctly and that you're not using some hard id somewhere that would cause trouble if you have multiple instances of your content type within a column.

The next level would be QuestionSet. Adding your content type to the list of options is done the same way, but QuestionSet requires your content to follow the Question Type contract (basically implementing an interface). That's necessary to provide Question Set with functions to retrieve the score, to display the solution to your content type, etc.

Then there are those content types that have a custom editor such as Interactive Video and Course Presentation. Again, adding the content type to the list of options is done by putting it into the list of libraries, e.g. https://github.com/h5p/h5p-interactive-video/blob/master/semantics.json#L264-L280. However, you will also have to provide the content type with an icon. H5P editors will just construct a class name from your content type's machine name (most of the time, fingers crossed), so you just have to add a proper classname with the styling of your button. For example, you will find lots of content type related classnames in https://github.com/h5p/h5p-editor-interactive-video/blob/master/styles/interactive-video-editor.css

[ymdahi]

Many thanks! I'll be giving this a shot later today. Excited to see how cards will work on those content types.

[ymdahi]

It's hard to believe that nearly a year has passed. I'd like to get back into this so I'll start retracing my steps and relearning as I go. I'd like to try some more challenging content types, maybe a video recorder (e.g. student uploads/records video) or maybe a 3D model viewer. Anyway, going to try and find a bit more time for this stuff :)

[otacke]

@ymdahi Glad you're on it again!

A 3D model viewer is something that I've built basically, although in the editor just for preview, not in the view. https://www.olivertacke.de/labs/2020/08/02/arrrrrr-ar/ I am lacking free time currently, but that's something I'll create as a spin-off, too :-)

A video recorder would be highly appreciated, I believe! Not sure how big the leap from this content type would be though. Maybe something intermediate first?

[ymdahi]

Open to suggestion for intermediate content types and happy to help where I can.

I've continued with this cardblock content type for the time being - attempting to try and get this content type to work within a Course Pres.

[otacke]

@ymdahi It is not difficult to put new content types into Course Presentation (add them to semantics of CP, add the library depenency in CP Editor, add an icon symbol to the CSS of CP Editor). At some point, the toolbar will be too full however - but that will be addressed by the H5P core team. They'll rework how subcontents are added in general.

Instead of creating a new content type, it might be useful to improve existing content types - there are many feature requests. You can learn a lot about how H5P works by trying to fix bugs and adding features.

Or:

• jigsaw puzzle
• a blend of "Drag and Drop" and "Fill in the Blanks" where, as an author, you can define a background image and arrange blanks on top that need to be filled
• whatever learningapps.org or quizlet have but H5P hasn't :-)

[ymdahi]

Thank mate, this has been very helpful. I'll continue with this content type, and check out the issue queues to see if there is anywhere I can contribute.

Also - I've created a new issue related to getting this content type to work in a CP: #9. Your help would be greatly appreciated.