WYSISYG editor for prompts (in studio) - backward compatibility added

openassessment/templates/openassessmentblock/edit/oa_edit_prompt.html

@@ -16,7 +16,7 @@
         <ul class="list-input settings-list">
             <li class="field comp-setting-entry openassessment_prompt_description_wrapper">
                 <div class="wrapper-comp-settings">
-                    <textarea class="openassessment_prompt_description setting-input" maxlength="10000">{{ prompt_description }}</textarea>
+                    <textarea class="openassessment_prompt_description setting-input" maxlength="10000" data-type="{{ prompts_type }}">{{ prompt_description }}</textarea>
                 </div>
             </li>
         </ul>

openassessment/templates/openassessmentblock/edit/oa_edit_prompts.html

@@ -13,7 +13,7 @@
 
     <ul id="openassessment_prompts_list">
         {% for prompt in prompts %}
-            {% include "openassessmentblock/edit/oa_edit_prompt.html" with prompt_uuid=prompt.uuid prompt_description=prompt.description %}
+            {% include "openassessmentblock/edit/oa_edit_prompt.html" with prompt_uuid=prompt.uuid prompt_description=prompt.description prompts_type=prompts_type %}
         {% endfor %}
     </ul>
 

openassessment/xblock/openassessmentblock.py

@@ -179,7 +179,7 @@ class OpenAssessmentBlock(MessageMixin,
     prompts_type = String(
         default='text',
         scope=Scope.content,
-        help="The type of prompt (available options: 'text', 'html')."
+        help="The type of prompt (possible options: 'text', 'html')."
     )
 
     rubric_criteria = List(

openassessment/xblock/static/js/src/studio/oa_container_item.js

@@ -100,8 +100,15 @@ OpenAssessment.Prompt.prototype = {
         var elId = $(el).find('textarea').attr('id');
         if (!elId) {
             /* jshint undef:false */
+            var textarea = $(el).find('textarea');
+            var text = $(textarea).val();
+            var type = $(textarea).data('type');
+            if (text && (type === 'text')) {
+                text = _.escape(text).replace(/(?:\r\n|\r|\n)/g, '<br />');
+                $(textarea).val(text);
+            }
             var newElId = Date.now() + '-textarea-' + (Math.random() * 100);
-            $(el).find('textarea').attr('id', newElId).tinymce(tinymceCfg());
+            $(textarea).attr('id', newElId).tinymce(tinymceCfg());
         }
         return $(el);
     },

openassessment/xblock/static/js/src/studio/oa_edit_assessment.js

@@ -368,7 +368,7 @@ OpenAssessment.EditSelfAssessmentView.prototype = {
     clearValidationErrors: function() {
         this.startDatetimeControl.clearValidationErrors();
         this.dueDatetimeControl.clearValidationErrors();
-    },
+    }
 };
 
 /**

openassessment/xblock/static/js/src/studio/oa_edit_prompts.js

@@ -52,9 +52,16 @@ OpenAssessment.EditPromptsView.prototype = {
         return prompts;
     },
 
+    /**
+     Get available prompts mode. In case if tinyMCE is enabled is is "html" mode
+     Otherwise it is 'text' mode.
+
+     Returns:
+     string: "html" or "text"
+     **/
     promptsType: function() {
         var firstPrompt = this.promptsContainer.getItem(0);
-        return (firstPrompt && firstPrompt.tinyMCEEnabled) ? 'html': 'text';
+        return (firstPrompt && firstPrompt.tinyMCEEnabled) ? 'html' : 'text';
     },
 
     /**