Making H5P Content

Question

Can someone explain what exactly prototype is and how I can get access to a value typed into the input fields? (for example InputSwapFirst). I am trying to generate some code to teach people the Quick-Sort algorithm using H5p.

var H5P = H5P || {};
 
H5P.QuickSort = (function ($) {

  function C(options, id) {
    // Extend defaults with provided options
    this.options = $.extend(true, {}, {
        toSort: '42'
    }, options);
    // Keep provided id.
    this.id = id;
    this.list = this.options.toSort.split(',').map(x =>+x);
    this.list = quickSort(this.list, 0, this.list.length - 1);
  }; 


   * @param {jQuery} $container
   
  C.prototype.attach = function ($container) {

    $container.addClass("QuickSort");

    $container.append('<div class="greeting-text">' + this.options.toSort+testM()+ '</div>');
    $container.append('<div class="greeting-text">' + this.list+ '</div>');

    $container.append('<button id="ButtonSwap" class="inputSwap" type="button" id="swapBtn" onclick="testM()">Swap</button>');
    $container.append('<label id="InputSwapLeftBracket" class="inputSwap" for="swap">(</label> ');
    $container.append('<input id="InputSwapFirst" class="inputSwap" type="text"/>');
    $container.append('<label id="InputSwapComma" class="inputSwap" for="partition">,</label> ');
    $container.append('<input id="InputSwapSecond" class="inputSwap" type="text"/>'); 
    $container.append('<label id="InputSwapRightBracket" class="inputSwap" for="partition">)</label> ');

    $container.append('<button id="ButtonPart" class="inputPart" type="button" id="partBtn">Partitioniere</button>');
    $container.append('<label id="InputPartLeftBracket" class="inputPart" for="partition">(</label> ');
    $container.append('<input id="InputPartFirst" class="inputPart" type="text"/>');
    $container.append('<label id="InputPartComma" class="inputPart" for="partition">,</label> ');
    $container.append('<input id="InputPartSecond" class="inputPart" type="text"/>'); 
    $container.append('<label id="InputPartRightBracket" class="inputPart" for="partition">)</label> ');

};
 
  return C;
})(H5P.jQuery);

Answer 1

Prototype

The "prototype" is a (or the) concept of JavaScript. You can think of it as a property that all JavaScript objects have, that's publicly accessible and that descendents of that object can inherit. I think that https://dev.to/sigfualt/looking-at-the-prototype-1jnb is a good introduction - but I think hardly anyone would write code this way nowadays. However, it's still good to know about the concept, of course.

Retrieving value from input field

In your code above, you use jQuery to append children objects. You'd have to get hold of your InputSwapFirst element, and there are several ways. If for some reason you don't want to store your jQuery element / HTMLElements, then you'd use a query like:

// plain JavaScript, gives you the HTMLElement from DOM
const foo = document.querySelector('#InputSwapFirst');

or

// jQuery, gives you the jQuery object for the HTMLElement
const $foo = $('#InputSwapFirst');

or

// jQuery, gives you the HTMLElement just like the plain JavaScript query above
const $foo = $('#InputSwapFirst').get(0);

You could, however, create that element and store it in a variable (here foo and $foo) before adding it to the DOM - retrieving elements from DOM tends to get messy. It doesn't really matter if you use plain JavaScript or jQuery.

You can then simply access the value property of the text input field, here printing it to the console:

// Plain JavaScript
const foo = document.querySelector('#InputSwapFirst'); // Assuming that field can in fact be found - could also return null!
console.log(foo.value);

or

// jQuery
const $foo = $('#InputSwapFirst');
console.log($foo.val());

or even

// jQuery using its chaining capabilities and not storing the variable
console.log($('#InputSwapFirst').val());

Further advice

If you want to stick with jQuery, do so - it has its perks. But I think it has lost quite some traction and there's a ticket to remove all jQuery dependencies from H5P core https://h5ptechnology.atlassian.net/browse/HFP-874 and from content types.

The Mozilla Developer Network is a great resource about HTML, the DOM and using both with JavaScript - for instance on the input element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

It may feel a little intimidating first, but you may want to have a look at the H5P boilerplate template at https://github.com/h5p/h5p-boilerplate. Its master branch hold a complete basic example for simple content types as the one that you outline above, and one branch for question type content types at https://github.com/h5p/h5p-boilerplate/tree/question-type