diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/QuizCreator.js --- a/src/widgets/QuizCreator.js Sun Nov 12 22:07:33 2017 +0100 +++ b/src/widgets/QuizCreator.js Wed Sep 04 17:32:50 2024 +0200 @@ -1,306 +1,360 @@ /* TODO: Add Social Network Sharing */ +import quizCreatorStyles from "./QuizCreator.module.css"; -IriSP.Widgets.QuizCreator = function(player, config) { - var _this = this; - IriSP.Widgets.Widget.call(this, player, config); -}; - -IriSP.Widgets.QuizCreator.prototype = new IriSP.Widgets.Widget(); +const QuizCreator = function (ns) { + return class extends ns.Widgets.Widget { + constructor(player, config) { + super(player, config); + var _this = this; + } -IriSP.Widgets.QuizCreator.prototype.defaults = { - creator_name : "", - tags : false, - tag_titles : false, - pause_on_write : true, - annotation_type: "Quiz", - api_serializer: "ldt_annotate", - api_endpoint_template: "", - api_method: "POST" -}; + static defaults = { + creator_name: "", + tags: false, + tag_titles: false, + pause_on_write: true, + annotation_type: "Quiz", + api_serializer: "ldt_annotate", + api_endpoint_template: "", + api_method: "POST", + }; -IriSP.Widgets.QuizCreator.prototype.messages = { - en: { - }, - fr: { - } -}; + static messages = { + en: {}, + fr: {}, + }; -IriSP.Widgets.QuizCreator.prototype.template = - '
' - + '
' - + '
' - + '
' - + '
' - + '

Type de question ' - + '' - + ' à ' - + '

' - + '
' - + '
' - + '
' - + ' ' - + '
' - + '
'; + static template = + '
' + + '
' + + '
' + + '
' + + "
" + + "

Type de question " + + '" + + ' à ' + + '

' + + "
" + + "
" + + '
' + + ' ' + + "
" + + "
"; -/* Hide and clear the interface is case of someone skipped or answer the current question in the Quiz panel*/ -IriSP.Widgets.QuizCreator.prototype.skip = function() { - this.$.find(".Ldt-QuizCreator-Time").val(""); - this.$.find(".Ldt-QuizCreator-Question-Area").val(""); - this.$.find(".Ldt-QuizCreator-Resource-Area").val(""); - this.$.find(".Ldt-QuizCreator-Questions-Block").html(""); - this.current_annotation = undefined; -}; + /* Hide and clear the interface is case of someone skipped or answer the current question in the Quiz panel*/ + skip() { + this.$.find(".Ldt-QuizCreator-Time").val(""); + this.$.find(".Ldt-QuizCreator-Question-Area").val(""); + this.$.find(".Ldt-QuizCreator-Resource-Area").val(""); + this.$.find(".Ldt-QuizCreator-Questions-Block").html(""); + this.current_annotation = undefined; + } + + nbAnswers() { + var numItems = this.$.find(".Ldt-QuizCreator-Questions-Answer").length; + return numItems; + } -IriSP.Widgets.QuizCreator.prototype.nbAnswers = function(){ - var numItems = this.$.find('.Ldt-QuizCreator-Questions-Answer').length; - return numItems; -}; + draw() { + var _this = this; -IriSP.Widgets.QuizCreator.prototype.draw = function() { - var _this = this; + this.onMediaEvent("timeupdate", function (_time) { + _this.setBegin(_time); + }); - this.onMediaEvent("timeupdate", function(_time) { - _this.setBegin(_time); - }); + this.onMdpEvent("QuizCreator.show", function () { + _this.setBegin(_this.media.currentTime); + }); - this.onMdpEvent("QuizCreator.show", function() { - _this.setBegin(_this.media.currentTime); - }); + this.onMdpEvent("QuizCreator.create", function () { + _this.skip(); + _this.setBegin(_this.media.currentTime); + }); - this.onMdpEvent("QuizCreator.create", function() { - _this.skip(); - _this.setBegin(_this.media.currentTime); - }); + this.onMdpEvent("QuizCreator.skip", function () { + _this.skip(); + }); - this.onMdpEvent("QuizCreator.skip", function() { - _this.skip(); - }); - - this.onMdpEvent("QuizCreator.edit", function (_annotation) { - _this.skip(); + this.onMdpEvent("QuizCreator.edit", function (_annotation) { + _this.skip(); _this.addQuestion(_annotation); - }); + }); - this.$.on("click", ".Ldt-QuizCreator-Remove", function() { + this.$.on("click", ".Ldt-QuizCreator-Remove", function () { $(this).parents(".Ldt-QuizCreator-Questions-Answer").remove(); - }); + }); - this.begin = new IriSP.Model.Time(); - this.end = this.source.getDuration(); - this.answers = []; + this.begin = new ns.Model.Time(); + this.end = this.source.getDuration(); + this.answers = []; - this.renderTemplate(); + this.renderTemplate(); - /* Quiz creator */ + /* Quiz creator */ + + this.question = new ns.Widgets.UniqueChoiceQuestion(); - this.question = new IriSP.Widgets.UniqueChoiceQuestion(); - - this.$.find(".Ldt-QuizCreator-Question-Type").bind("change", this.functionWrapper("onQuestionTypeChange")); - this.$.find(".Ldt-QuizCreator-Question-Add").bind("click", this.functionWrapper("onQuestionAdd")); - this.$.find(".Ldt-QuizCreator-Question-Save").bind("click", this.functionWrapper("onSave")); + this.$.find(".Ldt-QuizCreator-Question-Type").bind( + "change", + this.functionWrapper("onQuestionTypeChange") + ); + this.$.find(".Ldt-QuizCreator-Question-Add").bind( + "click", + this.functionWrapper("onQuestionAdd") + ); + this.$.find(".Ldt-QuizCreator-Question-Save").bind( + "click", + this.functionWrapper("onSave") + ); - this.$.find(".Ldt-QuizCreator-Time").keyup(function() { - var str = _this.$.find(".Ldt-QuizCreator-Time").val(); - _this.begin = IriSP.timestamp2ms(str); - _this.end = _this.begin + 1000; - }); + this.$.find(".Ldt-QuizCreator-Time").keyup(function () { + var str = _this.$.find(".Ldt-QuizCreator-Time").val(); + _this.begin = ns.timestamp2ms(str); + _this.end = _this.begin + 1000; + }); - this.onMediaEvent("timeupdate", function(_time) { + this.onMediaEvent("timeupdate", function (_time) { // Do not update timecode if description is not empty if (_this.getDescription()) { - _this.setBegin(_time); - }; - }); -}; + _this.setBegin(_time); + } + }); + } -IriSP.Widgets.QuizCreator.prototype.getDescription = function() { - return this.$.find(".Ldt-QuizCreator-Question-Area").val().trim(); -}; - -IriSP.Widgets.QuizCreator.prototype.addQuestion = function(annotation, number) { - var _this = this; + getDescription() { + return this.$.find(".Ldt-QuizCreator-Question-Area").val().trim(); + } - if (annotation.content.data.type == "multiple_choice") { - this.question = new IriSP.Widgets.MultipleChoiceQuestion(annotation); - } - else if (annotation.content.data.type == "unique_choice") { - this.question = new IriSP.Widgets.UniqueChoiceQuestion(annotation); - } + addQuestion(annotation, number) { + var _this = this; - var answers = annotation.content.data.answers; + if (annotation.content.data.type == "multiple_choice") { + this.question = new ns.Widgets.MultipleChoiceQuestion(annotation); + } else if (annotation.content.data.type == "unique_choice") { + this.question = new ns.Widgets.UniqueChoiceQuestion(annotation); + } - this.answers = []; + var answers = annotation.content.data.answers; + this.answers = []; - this.$.find(".Ldt-QuizCreator-Time").val(annotation.begin); - this.$.find(".Ldt-QuizCreator-Question-Area").val(annotation.content.data.question); - this.$.find(".Ldt-QuizCreator-Resource-Area").val(annotation.content.data.resource); - this.$.find(".Ldt-QuizCreator-Questions-Block").html(''); - answers.forEach( function (ans) { + this.$.find(".Ldt-QuizCreator-Time").val(annotation.begin); + this.$.find(".Ldt-QuizCreator-Question-Area").val( + annotation.content.data.question + ); + this.$.find(".Ldt-QuizCreator-Resource-Area").val( + annotation.content.data.resource + ); + this.$.find(".Ldt-QuizCreator-Questions-Block").html(""); + answers.forEach(function (ans) { _this.onQuestionAdd(null, ans); - }); - _this.current_annotation = annotation; -}; + }); + _this.current_annotation = annotation; + } -IriSP.Widgets.QuizCreator.prototype.onQuestionTypeChange = function(e) { - - var _field = this.$.find(".Ldt-QuizCreator-Question-Type"); - var _contents = _field.val(); + onQuestionTypeChange(e) { + var _field = this.$.find(".Ldt-QuizCreator-Question-Type"); + var _contents = _field.val(); - var _this = this; - switch(_contents) { - case "unique_choice": - this.question = new IriSP.Widgets.UniqueChoiceQuestion(); - break; + var _this = this; + switch (_contents) { + case "unique_choice": + this.question = new ns.Widgets.UniqueChoiceQuestion(); + break; - case "multiple_choice": - this.question = new IriSP.Widgets.MultipleChoiceQuestion(); - break; - } + case "multiple_choice": + this.question = new ns.Widgets.MultipleChoiceQuestion(); + break; + } - var output = ""; + var output = ""; - _this.$.find(".Ldt-QuizCreator-Questions-Block").html(output); + _this.$.find(".Ldt-QuizCreator-Questions-Block").html(output); - this.pauseOnWrite(); -}; + this.pauseOnWrite(); + } -// Either e !== undefined, then it has been called by the interface and answer === undefined, generate an empty form. -// Or e === null && answer !== undefined, an existing answer is provided. -IriSP.Widgets.QuizCreator.prototype.onQuestionAdd = function(e, answer) { - var output = '
' - + 'Réponse
'+ this.question.renderFullTemplate(answer, this.nbAnswers()) +'

' - + '
' - + '
' - + 'Commentaire
' - + '
' - + '
 
' - + '
'; - this.$.find(".Ldt-QuizCreator-Questions-Block").append(output); - this.$.find(".Ldt-QuizCreator-Answer-Content").last().focus(); + // Either e !== undefined, then it has been called by the interface and answer === undefined, generate an empty form. + // Or e === null && answer !== undefined, an existing answer is provided. + onQuestionAdd(e, answer) { + var output = + '
' + + 'Réponse
' + + this.question.renderFullTemplate(answer, this.nbAnswers()) + + "

" + + '
' + + '
" + + 'Commentaire
" + + "
" + + '
 
' + + "
"; + this.$.find(".Ldt-QuizCreator-Questions-Block").append(output); + this.$.find(".Ldt-QuizCreator-Answer-Content").last().focus(); - this.pauseOnWrite(); -}; - -IriSP.Widgets.QuizCreator.prototype.pauseOnWrite = function() { - if (this.pause_on_write && !this.media.getPaused()) { - this.media.pause(); + this.pauseOnWrite(); } -}; -IriSP.Widgets.QuizCreator.prototype.setBegin = function (t) { - this.begin = new IriSP.Model.Time(t || 0); - this.end = this.begin + 500; - this.$.find(".Ldt-QuizCreator-Time").val(this.begin.toString()); -}; - -IriSP.Widgets.QuizCreator.prototype.get_local_annotation = function (ident) { - return this.player.getLocalAnnotation(ident); -}; + pauseOnWrite() { + if (this.pause_on_write && !this.media.getPaused()) { + this.media.pause(); + } + } -IriSP.Widgets.QuizCreator.prototype.save_local_annotations = function() { - this.player.saveLocalAnnotations(); - // Merge modifications into widget source - this.source.merge(this.player.localSource); -}; + setBegin(t) { + this.begin = new ns.Model.Time(t || 0); + this.end = this.begin + 500; + this.$.find(".Ldt-QuizCreator-Time").val(this.begin.toString()); + } + + get_local_annotation(ident) { + return this.player.getLocalAnnotation(ident); + } -IriSP.Widgets.QuizCreator.prototype.delete_local_annotation = function(ident) { - this.source.getAnnotations().removeId(ident); - this.player.deleteLocalAnnotation(ident); - this.current_annotation = undefined; - this.refresh(true); -}; + save_local_annotations() { + this.player.saveLocalAnnotations(); + // Merge modifications into widget source + this.source.merge(this.player.localSource); + } -IriSP.Widgets.QuizCreator.prototype.show = function() { - this.$.find(".Ldt-QuizCreator-Question-Area").focus(); -}; + delete_local_annotation(ident) { + this.source.getAnnotations().removeId(ident); + this.player.deleteLocalAnnotation(ident); + this.current_annotation = undefined; + this.refresh(true); + } -IriSP.Widgets.QuizCreator.prototype.hide = function() { - this.$.find(".Ldt-QuizCreator-Questions-Block").html(""); - this.$.find(".Ldt-QuizCreator-Question-Area").val(""); - this.$.find(".Ldt-QuizCreator-Resource-Area").val(""); - this.$.find(".Ldt-QuizCreator-Time").val(""); -}; + show() { + this.$.find(".Ldt-QuizCreator-Question-Area").focus(); + } + + hide() { + this.$.find(".Ldt-QuizCreator-Questions-Block").html(""); + this.$.find(".Ldt-QuizCreator-Question-Area").val(""); + this.$.find(".Ldt-QuizCreator-Resource-Area").val(""); + this.$.find(".Ldt-QuizCreator-Time").val(""); + } -/* Save a local annotation */ -IriSP.Widgets.QuizCreator.prototype.onSave = function(event, should_publish) { - // Either the annotation already exists (then we overwrite its - // content) or it must be created. - var is_created = false; + /* Save a local annotation */ + onSave(event, should_publish) { + // Either the annotation already exists (then we overwrite its + // content) or it must be created. + var is_created = false; - if (this.nbAnswers() <= 0) { - alert("Vous devez spécifier au moins une réponse à votre question !"); - return false; - }; - // Check that there is at least 1 valid answer - if (! this.$.find(".quiz-question-edition:checked").length) { + if (this.nbAnswers() <= 0) { + alert("Vous devez spécifier au moins une réponse à votre question !"); + return false; + } + // Check that there is at least 1 valid answer + if (!this.$.find(".quiz-question-edition:checked").length) { alert("Vous n'avez pas indiqué de bonne réponse."); return false; - }; - var _annotation; - if (this.current_annotation) { + } + var _annotation; + if (this.current_annotation) { is_created = false; _annotation = this.current_annotation; - } else { + } else { is_created = true; - var _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */ - _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, this.player.localSource)); /* Si le Type d'Annotation n'existe pas, il est créé à la volée */ + var _annotationTypes = this.source + .getAnnotationTypes() + .searchByTitle( + this.annotation_type, + true + ) /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */, + _annotationType = _annotationTypes.length + ? _annotationTypes[0] + : new ns.Model.AnnotationType( + false, + this.player.localSource + ); /* Si le Type d'Annotation n'existe pas, il est créé à la volée */ /* Si nous avons dû générer un ID d'annotationType à la volée... */ if (!_annotationTypes.length) { - /* Il ne faudra pas envoyer l'ID généré au serveur */ - _annotationType.dont_send_id = true; - /* Il faut inclure le titre dans le type d'annotation */ - _annotationType.title = this.annotation_type; + /* Il ne faudra pas envoyer l'ID généré au serveur */ + _annotationType.dont_send_id = true; + /* Il faut inclure le titre dans le type d'annotation */ + _annotationType.title = this.annotation_type; } - _annotation = new IriSP.Model.Annotation(false, this.player.localSource); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */ + _annotation = new ns.Model.Annotation( + false, + this.player.localSource + ); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */ // Initialize some fields in case of creation _annotation.created = new Date(); /* Date de création de l'annotation */ _annotation.creator = this.creator_name; - _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */ + _annotation.setAnnotationType( + _annotationType.id + ); /* Id du type d'annotation */ this.player.localSource.getMedias().push(this.source.currentMedia); - _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */ - } + _annotation.setMedia( + this.source.currentMedia.id + ); /* Id du média annoté */ + } - /* - * Nous remplissons les données de l'annotation - * */ - _annotation.setBeginEnd(this.begin, this.end); - _annotation.modified = new Date(); /* Date de modification de l'annotation */ - _annotation.contributor = this.creator_name; - _annotation.description = this.getDescription(); - _annotation.title = _annotation.description; - _annotation.content = {}; - _annotation.content.data = {}; - _annotation.content.data.type = this.$.find(".Ldt-QuizCreator-Question-Type").val(); - _annotation.content.data.question = _annotation.description; - _annotation.content.data.resource = this.$.find(".Ldt-QuizCreator-Resource-Area").val(); - _annotation.content.data.answers = $.makeArray($(".Ldt-QuizCreator-Questions-Answer") - .map(function (ans) - { - return { - content: $(this).find(".Ldt-QuizCreator-Answer-Content").val(), - feedback: $(this).find(".Ldt-QuizCreator-Answer-Feedback").val(), - correct: $(this).find(".Ldt-Quiz-Question-Check").is(':checked') - }; - })); - this.current_annotation = _annotation; - if (is_created) { + /* + * Nous remplissons les données de l'annotation + * */ + _annotation.setBeginEnd(this.begin, this.end); + _annotation.modified = + new Date(); /* Date de modification de l'annotation */ + _annotation.contributor = this.creator_name; + _annotation.description = this.getDescription(); + _annotation.title = _annotation.description; + _annotation.content = {}; + _annotation.content.data = {}; + _annotation.content.data.type = this.$.find( + ".Ldt-QuizCreator-Question-Type" + ).val(); + _annotation.content.data.question = _annotation.description; + _annotation.content.data.resource = this.$.find( + ".Ldt-QuizCreator-Resource-Area" + ).val(); + _annotation.content.data.answers = $.makeArray( + $(".Ldt-QuizCreator-Questions-Answer").map(function (ans) { + return { + content: $(this).find(".Ldt-QuizCreator-Answer-Content").val(), + feedback: $(this).find(".Ldt-QuizCreator-Answer-Feedback").val(), + correct: $(this).find(".Ldt-Quiz-Question-Check").is(":checked"), + }; + }) + ); + this.current_annotation = _annotation; + if (is_created) { // Add the annotation to the localSource this.player.addLocalAnnotation(_annotation); // Update also the remote source - this.source.merge([ _annotation ]); + this.source.merge([_annotation]); this.player.trigger("Annotation.create", _annotation); - } else { + } else { // Update the annotation this.player.saveLocalAnnotations(); this.player.trigger("Annotation.update", _annotation); - }; - this.player.trigger("AnnotationsList.update"); /* On force le rafraîchissement des widgets AnnotationsList */ - this.player.trigger("Quiz.refresh"); /* On force le rafraîchissement des widgets Quiz */ + } + this.player.trigger( + "AnnotationsList.update" + ); /* On force le rafraîchissement des widgets AnnotationsList */ + this.player.trigger( + "Quiz.refresh" + ); /* On force le rafraîchissement des widgets Quiz */ + } + }; }; + +export { QuizCreator, quizCreatorStyles };