diff --git a/editor/controllers/mtf-controller.js b/editor/controllers/mtf-controller.js index 0f1427b..f2bfc47 100644 --- a/editor/controllers/mtf-controller.js +++ b/editor/controllers/mtf-controller.js @@ -43,6 +43,7 @@ angular.module('mtfApp', []).controller('mtfQuestionFormController', ['$scope', 'text': '', 'image': '', 'audio': '', + 'audioName': '', 'hint': '', 'index': 2 }, { @@ -222,8 +223,9 @@ angular.module('mtfApp', []).controller('mtfQuestionFormController', ['$scope', /** * invokes the asset browser to pick an image to add to either the question or the options - * @param {string} id if `q` then it is image for question, else for options - * @param {string} type if `id` is not `q` but an index, then it can be either 'LHS' or 'RHS' + * @param {string} type if `q` for Question, `LHS` for LHS option, `RHS` for RHS option + * @param {string} index if `type` is not `q`, then it denotes the index of either 'LHS' or 'RHS' option + * @param {string} mediaType `image` or `audio` */ $scope.addMedia = function (type, index, mediaType) { var mediaObject = { @@ -244,14 +246,17 @@ angular.module('mtfApp', []).controller('mtfQuestionFormController', ['$scope', if (type == 'q') { telemetryObject.target.id = 'questionunit-mtf-add-' + data.assetMedia.type; $scope.mtfFormData.question[data.assetMedia.type] = org.ekstep.contenteditor.mediaManager.getMediaOriginURL(data.assetMedia.src); - $scope.questionMedia[data.assetMedia.type] = media; + data.assetMedia.type == 'audio' ? $scope.mtfFormData.question.audioName = data.assetMedia.name : + $scope.questionMedia[data.assetMedia.type] = media; } else if (type == 'LHS') { telemetryObject.target.id = 'questionunit-mtf-lhs-add-' + data.assetMedia.type; $scope.mtfFormData.option.optionsLHS[index][data.assetMedia.type] = org.ekstep.contenteditor.mediaManager.getMediaOriginURL(data.assetMedia.src); + data.assetMedia.type == 'audio' ? $scope.mtfFormData.option.optionsLHS[index].audioName = data.assetMedia.name : ''; $scope.optionsMedia[data.assetMedia.type][index] = media; } else if (type == 'RHS') { telemetryObject.target.id = 'questionunit-mtf-rhs-add-' + data.assetMedia.type; $scope.mtfFormData.option.optionsRHS[index][data.assetMedia.type] = org.ekstep.contenteditor.mediaManager.getMediaOriginURL(data.assetMedia.src); + data.assetMedia.type == 'audio' ? $scope.mtfFormData.option.optionsRHS[index].audioName = data.assetMedia.name : ''; $scope.optionsMedia[data.assetMedia.type][index] = media; } $scope.generateTelemetry(telemetryObject) @@ -259,6 +264,12 @@ angular.module('mtfApp', []).controller('mtfQuestionFormController', ['$scope', questionServices.invokeAssetBrowser(mediaObject); } + /** + * Deletes the selected media from the question element (question, LHS or RHS options) + * @param {string} type + * @param {Integer} index + * @param {string} mediaType + */ $scope.deleteMedia = function (type, index, mediaType) { var telemetryObject = { type: 'TOUCH', id: 'button', target: { id: '', ver: '', type: 'button' } }; if (type == 'q') { @@ -283,6 +294,10 @@ angular.module('mtfApp', []).controller('mtfQuestionFormController', ['$scope', qtype: 'mtf' } + /** + * Helper function to generate telemetry event + * @param {Object} data telemetry data + */ $scope.generateTelemetry = function (data) { data.plugin = data.plugin || { "id": $scope.mtfPluginInstance.id, diff --git a/editor/styles/style.css b/editor/styles/style.css index be05e31..4e1d558 100644 --- a/editor/styles/style.css +++ b/editor/styles/style.css @@ -201,4 +201,43 @@ td.mtf-pair-td{ td.mtf-pair-destractor-td{ border-left: 0px none !important; border-right: 0px none; +} + +/* options */ + +.mtf-options .selected-media-container { + margin-left:2%; +} + +.mtf-options .selected-image-container { + float: left; + margin-right: 2%; + width: 46%; +} + +.mtf-options .selected-audio-container { + float: left; + margin-right: 2%; + width: 46%; +} + +.mtf-options .imgWidth{ + width:100%; +} + +.mtf-options .auto-play-container { + text-align: right; +} + +.mtf-options .audio-container { + width: 80%; +} + +.mtf-options .selected-audio { + max-width: 100%; + display:none; +} + +.mtf-options .delete-media-container { + width: 20%; } \ No newline at end of file diff --git a/renderer/js/mtftemplate.js b/renderer/js/mtftemplate.js index 8bc438f..e692a5c 100644 --- a/renderer/js/mtftemplate.js +++ b/renderer/js/mtftemplate.js @@ -20,7 +20,7 @@ MTFController.getQuestionContent = function () { return "
\
\ <% if(question.data.question.image){ %> \ - \ + \ <%}else{ %> \ <% } %> \
\ @@ -48,7 +48,7 @@ MTFController.getHorizontalLayout = function () {
\
\
\ -

);\">\ +

);\">\ \<%= val.text %>\ <% if(val.audio){ %> \ \ @@ -79,7 +79,7 @@ MTFController.getHorizontalLayout = function () {

\
\
<% if(MTFController.selAns[key].selText < 1){ %>\ -

');\">\ +

');\">\ <%= val.text %>\ <% if(val.audio){ %> \ \ @@ -107,7 +107,7 @@ MTFController.getVerticalLayout = function () {

\
\
\ -

);\">\ +

);\">\ \<%= val.text %>\ <% if(val.audio){ %> \ \ @@ -138,7 +138,7 @@ MTFController.getVerticalLayout = function () {

\
\
<% if(MTFController.selAns[key].selText < 1){ %>\ -

');\">\ +

');\">\ <% if(val.audio){ %> \ \ ' onclick=MTFController.pluginInstance.playAudio({src:'<%= val.audio %>'}) \>\ @@ -159,14 +159,7 @@ MTFController.getVerticalLayout = function () { * image will be shown in popup * @memberof org.ekstep.questionunit.mtf.mtftemplate */ -MTFController.showImageModel = function (event, imageSrcType) { - var eventData; - if (imageSrcType == "background-image") { - eventData = event.target.style.backgroundImage.slice(4, -1).replace(/"/g, ""); - if (!eventData) return false; //when there is no image option - } else { - eventData = event.target.src; - } +MTFController.showImageModel = function (event, imageSrc) { var modelTemplate = "