MOBILE-1577 quiz: Handle all kind of essay questions

Author: dpalou

www/addons/qtype/essay/directive.js

@@ -30,26 +30,21 @@ angular.module('mm.addons.qtype_essay')
         templateUrl: 'addons/qtype/essay/template.html',
         link: function(scope) {
             var questionEl = $mmQuestionHelper.directiveInit(scope, $log),
-                question = scope.question,
                 textarea;
 
             if (questionEl) {
                 questionEl = questionEl[0] || questionEl; // Convert from jqLite to plain JS if needed.
 
                 // First search the textarea.
-                textarea = questionEl.querySelector('textarea[id*=answer_id]');
+                textarea = questionEl.querySelector('textarea[name*=_answer]');
+                scope.allowsAttachments = !!questionEl.querySelector('div[id*=filemanager]');
+                scope.isMonospaced = !!questionEl.querySelector('.qtype_essay_monospaced');
 
                 if (!textarea) {
-                    // Textarea not found, we're probably in review. Search the answer and the attachments.
-                    if (questionEl.querySelector('.qtype_essay_response')) {
-                        scope.answer = $mmUtil.getContentsOfElement(angular.element(questionEl), '.qtype_essay_response');
-                        scope.attachments = $mmQuestionHelper.getQuestionAttachmentsFromHtml(
-                                                $mmUtil.getContentsOfElement(angular.element(questionEl), '.attachments'));
-                    } else {
-                        // Answer not found. Abort.
-                        $log.warn('Aborting because couldn\'t find textarea or answer.', question.name);
-                        return $mmQuestionHelper.showDirectiveError(scope);
-                    }
+                    // Textarea not found, we might be in review. Search the answer and the attachments.
+                    scope.answer = $mmUtil.getContentsOfElement(angular.element(questionEl), '.qtype_essay_response');
+                    scope.attachments = $mmQuestionHelper.getQuestionAttachmentsFromHtml(
+                                            $mmUtil.getContentsOfElement(angular.element(questionEl), '.attachments'));
                 } else {
                     // Textarea found.
                     var input = questionEl.querySelector('input[type="hidden"][name*=answerformat]'),

www/addons/qtype/essay/template.html

@@ -5,10 +5,13 @@
     <label class="item item-input" ng-if="textarea">
 		<!-- "Format" hidden input -->
 		<input ng-if="formatInput" type="hidden" name="{{formatInput.name}}" value="{{formatInput.value}}" >
-        <textarea class="mm-question-textarea" placeholder="{{ 'mm.question.answer' | translate }}" name="{{textarea.name}}" aria-multiline="true">{{textarea.value}}</textarea>
+        <textarea class="mm-question-textarea" ng-class='{"mm-monospaced": isMonospaced}' placeholder="{{ 'mm.question.answer' | translate }}" name="{{textarea.name}}" aria-multiline="true">{{textarea.value}}</textarea>
     </label>
-    <div class="item item-text-wrap" ng-if="!textarea">
-    	<p><mm-format-text watch="true">{{answer}}</mm-format-text></p>
+    <div class="item item-text-wrap" ng-if="allowsAttachments">
+        <p class="mm-question-warning">{{ 'mm.question.errorattachmentsnotsupported' | translate }}</p>
+    </div>
+    <div class="item item-text-wrap" ng-if="!textarea && (answer || (!attachments.length && !allowsAttachments))">
+    	<p><mm-format-text watch="true" ng-class='{"mm-monospaced": isMonospaced}'>{{answer}}</mm-format-text></p>
     </div>
     <div class="item" ng-if="!textarea && attachments && attachments.length">
     	<mm-file ng-repeat="attachment in attachments" file="attachment" component="{{component}}" component-id="{{componentId}}"></mm-file>

www/core/components/question/lang/en.json

@@ -4,6 +4,7 @@
 	"certainty": "Certainty",
 	"complete": "Complete",
 	"correct": "Correct",
+	"errorattachmentsnotsupported": "The application doesn't support attaching files to answers yet.",
 	"errorquestionnotsupported": "This type of question isn't supported by the app in your site: {{$a}}.",
 	"feedback": "Feedback",
 	"howtodraganddrop": "Tap to select then tap to drop.",

www/core/components/question/scss/styles.scss

@@ -4,6 +4,7 @@ $mm-question-incorrect-color:       #b94a48 !default;
 $mm-question-state-correct-color:   #cfc !default;
 $mm-question-state-partial-color:   #ffa !default;
 $mm-question-state-incorrect-color: #fcc !default;
+$mm-question-warning-color:         #c00 !default;
 
 .mm-question-textarea {
   width: 100%;
@@ -97,3 +98,7 @@ li.mm-question-answer-incorrect,
     background-color: $mm-question-state-incorrect-color;
   }
 }
+
+.mm-question-warning, p.mm-question-warning, .item .mm-question-warning {
+  color: $mm-question-warning-color;
+}

www/core/components/question/services/helper.js

@@ -411,7 +411,7 @@ angular.module('mm.core.question')
      * @ngdoc method
      * @name $mmQuestionHelper#getQuestionAttachmentsFromHtml
      * @param  {String} html HTML code to search in.
-     * @return {[type]}      [description]
+     * @return {Object[]}    Attachments.
      */
     self.getQuestionAttachmentsFromHtml = function(html) {
         var el = angular.element('<div></div>'),
@@ -422,6 +422,9 @@ angular.module('mm.core.question')
         el.html(html);
         el = el[0];
 
+        // Remove the filemanager (area to attach files to a question).
+        $mmUtil.removeElement(el, 'div[id*=filemanager]');
+
         // Search the anchors.
         anchors = el.querySelectorAll('a');
         angular.forEach(anchors, function(anchor) {

www/core/scss/styles.scss

@@ -389,6 +389,10 @@ mm-timer {
   }
 }
 
+.mm-monospaced {
+  font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
+}
+
 /**
  * This CSS uses adjacent selectors instead of general sibling (~) selectors
  * for ion radio that are broken in iOS 9 UIWebView.