85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
H5P.Question.Explainer = (function ($) {
|
|
/**
|
|
* Constructor
|
|
*
|
|
* @class
|
|
* @param {string} title
|
|
* @param {array} explanations
|
|
*/
|
|
function Explainer(title, explanations) {
|
|
var self = this;
|
|
|
|
/**
|
|
* Create the DOM structure
|
|
*/
|
|
var createHTML = function () {
|
|
self.$explanation = $('<div>', {
|
|
'class': 'h5p-question-explanation-container'
|
|
});
|
|
|
|
// Add title:
|
|
$('<div>', {
|
|
'class': 'h5p-question-explanation-title',
|
|
role: 'heading',
|
|
html: title,
|
|
appendTo: self.$explanation
|
|
});
|
|
|
|
var $explanationList = $('<ul>', {
|
|
'class': 'h5p-question-explanation-list',
|
|
appendTo: self.$explanation
|
|
});
|
|
|
|
for (var i = 0; i < explanations.length; i++) {
|
|
var feedback = explanations[i];
|
|
var $explanationItem = $('<li>', {
|
|
'class': 'h5p-question-explanation-item',
|
|
appendTo: $explanationList
|
|
});
|
|
|
|
var $content = $('<div>', {
|
|
'class': 'h5p-question-explanation-status'
|
|
});
|
|
|
|
if (feedback.correct) {
|
|
$('<span>', {
|
|
'class': 'h5p-question-explanation-correct',
|
|
html: feedback.correct,
|
|
appendTo: $content
|
|
});
|
|
}
|
|
if (feedback.wrong) {
|
|
$('<span>', {
|
|
'class': 'h5p-question-explanation-wrong',
|
|
html: feedback.wrong,
|
|
appendTo: $content
|
|
});
|
|
}
|
|
$content.appendTo($explanationItem);
|
|
|
|
if (feedback.text) {
|
|
$('<div>', {
|
|
'class': 'h5p-question-explanation-text',
|
|
html: feedback.text,
|
|
appendTo: $explanationItem
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
createHTML();
|
|
|
|
/**
|
|
* Return the container HTMLElement
|
|
*
|
|
* @return {HTMLElement}
|
|
*/
|
|
self.getElement = function () {
|
|
return self.$explanation;
|
|
};
|
|
}
|
|
|
|
return Explainer;
|
|
|
|
})(H5P.jQuery);
|