Issue #8 feat: option add ckeditor and validation

sunbird-content-plugins · Jul 27, 2018 · 95decbb · 95decbb
1 parent 89528aa
commit 95decbb
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 9 deletions.
diff --git a/editor/controllers/mcq-controller.js b/editor/controllers/mcq-controller.js
diff --git a/editor/styles/style.css b/editor/styles/style.css
@@ -186,3 +186,20 @@ i.large.icon.delete-icon{
 .ck-error{
   border: 1px solid red;
 }
+.cke_float {
+  z-index: 9999999 !important;
+}
+
+.option-text {
+  margin: 0 20px 0 20px;
+  border-bottom: 1px #eee solid;
+  cursor: text;
+}
+
+.option-text::before {
+  content: 'Enter answer';
+  color: #aaa;
+  text-align: center;
+  position: relative;
+  display: block;
+}
diff --git a/editor/templates/horizontal_template.html b/editor/templates/horizontal_template.html
@@ -61,17 +61,14 @@
                             </span>
             </div>
             <div ng-repeat="(key, value) in mcqFormData.options" class="outer-segment">
-              <div class="ui segments inner-segment" ng-class="{cardBorder: focused, 'has-errorCard': submitted && mcqForm['options_' + $index].$error.required}" id="eachCard">
+              <div class="ui segments inner-segment option-box" ng-class="{cardBorder: focused, 'has-errorCard': submitted && mcqForm['options_' + $index].$error.required}" id="option-box-{{$index}}">
                 <div class="ui segment">
                   <div class="ui grid">
-                    <div class="eleven wide column">
-                      <div class="form-group segment textBoxDiv">
-                        <input type="text" class="form-control textbox" ng-class="{'has-success':mcqForm['options_' + $index].$valid, 'has-error': submitted && mcqForm['options_' + $index].$error.required}" placeholder="Enter answer" name="options_{{$index}}" ng-model="mcqFormData.options[key].text" maxlength="1000" ng-init="focused = false" ng-focus="focused = true;generateTelemetry({type: 'TOUCH', id: 'input', target: {id: 'questionunit-mcq-answer', ver: '', type: 'input'}})" ng-blur="focused = false" ng-required="!(mcqFormData.options[key].text.length || mcqFormData.options[key].image.length || mcqFormData.options[key].audio.length)"/>
+                    <div class="one column row">
+                      <div class="form-group one column row">
+                        <div ng-click="optionEditable($event)" class="form-control option-text" id="options_{{$index}}" name="options_{{$index}}">{{mcqFormData.options[key].text}}</div>
                       </div>
                     </div>
-                    <div class="one wide column text-len">
-                      <span class="maxLengthText">{{value.text.length}}<span class="length-divider">/</span>1000</span>
-                    </div>
                     <div class="four column row">
                       <div class="two wide column" ng-if="mcqFormData.options[key].image.length > 0">
                         <img src="{{mcqFormData.options[key].image}}" class="imgWidth" ng-click="addImage(key)"/>