Issue #8 feat: evalution statemanagement multiple option

sunbird-content-plugins · Jul 25, 2018 · d387712 · d387712
1 parent fcea0ea
commit d387712
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 169 deletions.
diff --git a/editor/controllers/mcq-controller.js b/editor/controllers/mcq-controller.js
diff --git a/renderer/plugin.js b/renderer/plugin.js
diff --git a/renderer/styles/style.css b/renderer/styles/style.css
@@ -716,6 +716,7 @@ span.qc-option-txt-only {
   height: 200px;
   position: relative;
   padding: 0;
+  padding-bottom: 14%;
   border-radius: 5px;
 }
 
@@ -840,3 +841,6 @@ span.qc-option-txt-only {
   background-color: #65A0E6;
   height: 75%;
 }
+.qc-grid-option-container .selected{
+    background-color: #4a90e2;
+}
diff --git a/renderer/template/grid_template.js b/renderer/template/grid_template.js
@@ -5,7 +5,7 @@ MCQController.getGridTemplate = function () {
 <div class='qc-grid-option-outer-value'> \
 <div class='qc-grid-option-value'> \
   <div class='qc-grid-option-text-outer' id=<%=key%>  onclick=MCQController.pluginInstance.logTelemetryInteract(event);MCQController.checkOptioninGrid(<%=val.keyIndex%>);MCQController.pluginInstance.selectedvalue(event,<%=val.keyIndex%>) id='option'> \
-  <div class='mcq-selected-option'></div> \
+  <div class='mcq-selected-option' id='active<%=val.keyIndex%>'></div> \
       <div class='qc-grid-option-text'>\
               <% if(val.option.audio.length > 0 && val.option.image.length == 0){%> \
           <div class='qc-opt'>\
@@ -25,7 +25,7 @@ MCQController.getGridTemplate = function () {
       </div>\
             <div class='qc-option-grid-checkbox'> \
                                 <div class='grid-check-space'> \
-                                    <input type='radio' name='radio' value='pass' class='qc-option-input-checkbox'> \
+                                    <input type='checkbox' name='checkbox' value='pass' class='qc-option-input-checkbox'> \
                                 </div> \
                  <% if(val.option.audio.length>0 && val.option.image.length > 0){%> \
                <div>\
@@ -45,7 +45,7 @@ MCQController.getGridTemplate = function () {
 <div class='qc-grid-option-outer-value'> \
 <div class='qc-grid-option-value'> \
   <div class='qc-grid-option-text-outer mcq-option-value' id=<%=key%> onclick=MCQController.pluginInstance.logTelemetryInteract(event);MCQController.checkOptioninGrid(<%=val.keyIndex%>);MCQController.pluginInstance.selectedvalue(event,<%=val.keyIndex%>) id='option'> \
-  <div class='mcq-selected-option'></div> \
+  <div class='mcq-selected-option' id='active<%=val.keyIndex%>'></div> \
       <div class='qc-grid-option-text'>\
               <% if(val.option.audio.length > 0 && val.option.image.length == 0){%> \
           <div class='qc-opt'>\
@@ -65,7 +65,7 @@ MCQController.getGridTemplate = function () {
       </div>\
             <div class='qc-option-grid-checkbox'> \
                                 <div class='grid-check-space'> \
-                                    <input type='radio' name='radio' value='pass' class='qc-option-input-checkbox'> \
+                                    <input type='checkbox' name='checkbox' value='pass' class='qc-option-input-checkbox'> \
                                 </div> \
                  <% if(val.option.audio.length>0 && val.option.image.length > 0){%> \
                <div>\
@@ -80,8 +80,4 @@ MCQController.getGridTemplate = function () {
 </div> \
 <%}%>\
       </div>";
-};
-MCQController.checkOptioninGrid = function (index) {
-  $(".mcq-selected-option").removeClass("mcq-option-checked");
-  $('.mcq-selected-option').eq(index).addClass('mcq-option-checked');
 };
diff --git a/renderer/template/horizontal_template.js b/renderer/template/horizontal_template.js
@@ -1,6 +1,6 @@
 var MCQController = MCQController || {};
 MCQController.getHorizontalTemplate = function () {
-return "<div class='mcq-horizontal-container'><div class='q-container'>\
+ return "<div class='mcq-horizontal-container'><div class='q-container'>\
   <div class='question'>\
     <div class='q-media'>\
     <% if ( question.data.question.image){ %> \
@@ -31,8 +31,8 @@ return "<div class='mcq-horizontal-container'><div class='q-container'>\
 <div class='a-container'>\
   <div class='answers'>\
   <% _.each(question.data.options, function(val,key,index) { %> \
-    <div class='option' onclick=MCQController.pluginInstance.logTelemetryInteract(event);MCQController.pluginInstance.selectedvalue(event,<%= key %>)>\
-      <input type='radio' name='radio' style='display: none;'/>\
+    <div class='option' id='active<%= key %>' onclick=MCQController.pluginInstance.logTelemetryInteract(event);MCQController.pluginInstance.selectedvalue(event,<%= key %>)>\
+      <input type='checkbox' name='checkbox' style='display: none;'/>\
       <div class='a-media'>\
         <% if ( val.image){ %> \
           <div class='a-image'>\