Merge pull request #1268 from MITx/feature/cas/speed-editor

menu bar for heading and explanation

cms/static/sass/_unit.scss

@@ -282,6 +282,11 @@
   .xmodule_display {
     padding: 40px 20px 20px;
     overflow-x: auto;
+
+    h1 {
+      float: none;
+      margin-left: 0;
+    }
   }
 
   .wrapper-component-editor {

cms/templates/widgets/problem-edit.html

@@ -4,6 +4,8 @@
         %if markdown != '' or data == '<problem>\n</problem>\n':
         <div class="editor-bar">
             <ul class="format-buttons">
+                <li><a href="#" class="header-button" data-tooltip="Header"><span
+                        class="problem-editor-icon header"></span></a></li>
                 <li><a href="#" class="multiple-choice-button" data-tooltip="Multiple Choice"><span
                         class="problem-editor-icon multiple-choice"></span></a></li>
                 <li><a href="#" class="checks-button" data-tooltip="Check Multiple"><span
@@ -14,9 +16,11 @@
                         class="problem-editor-icon number"></span></a></li>
                 <li><a href="#" class="dropdown-button" data-tooltip="Option Response"><span
                         class="problem-editor-icon dropdown"></span></a></li>
+                <li><a href="#" class="explanation-button" data-tooltip="Explanation"><span
+                        class="problem-editor-icon explanation"></span></a></li>
             </ul>
             <ul class="editor-tabs">
-                <li><a href="#" class="xml-tab tab" data-tab="xml">Use Advanced Editor</a></li>
+                <li><a href="#" class="xml-tab advanced-toggle" data-tab="xml">Advanced Editor</a></li>
                 <li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
             </ul>
         </div>
@@ -31,7 +35,7 @@
         <div class="cheatsheet-wrapper">
             <div class="row">
                 <h6>Header</h6>
-                <div class="col sample">
+                <div class="col sample header">
                     <img src="/static/img/header-example.png" />
                 </div>
                 <div class="col">
@@ -42,7 +46,7 @@
             </div>
             <div class="row">
                 <h6>Multiple Choice</h6>
-                <div class="col sample">
+                <div class="col sample multiple-choice">
                     <img src="/static/img/choice-example.png" />
                 </div>
                 <div class="col">
@@ -53,7 +57,7 @@
             </div>
             <div class="row">
                 <h6>Check Multiple</h6>
-                <div class="col sample">
+                <div class="col sample check-multiple">
                     <img src="/static/img/multi-example.png" />
                 </div>
                 <div class="col">
@@ -64,7 +68,7 @@
             </div>
             <div class="row">
                 <h6>String Response</h6>
-                <div class="col sample">
+                <div class="col sample string-response">
                     <img src="/static/img/string-example.png" />
                 </div>
                 <div class="col">
@@ -73,7 +77,7 @@
             </div>
             <div class="row">
                 <h6>Numerical Response</h6>
-                <div class="col sample">
+                <div class="col sample numerical-response">
                     <img src="/static/img/number-example.png" />
                 </div>
                 <div class="col">
@@ -82,7 +86,7 @@
             </div>
             <div class="row">
                 <h6>Option Response</h6>
-                <div class="col sample">
+                <div class="col sample option-reponse">
                     <img src="/static/img/select-example.png" />
                 </div>
                 <div class="col">
@@ -91,14 +95,11 @@
             </div>
             <div class="row">
                 <h6>Explanation</h6>
-                <div class="col sample">
+                <div class="col sample explanation">
                     <img src="/static/img/explanation-example.png" />
                 </div>
                 <div class="col">
-<pre><code>[explanation]
-A short explanation of the answer.
-[explanation]
-</code></pre>
+                    <pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
                 </div>
             </div>
         </div>

common/lib/xmodule/xmodule/css/problem/edit.scss

@@ -28,20 +28,24 @@
       float: left;
     }
 
-    .tab {
-      height: 24px;
-      padding: 7px 20px 3px;
-      border: 1px solid #a5aaaf;
-      border-radius: 3px 3px 0 0;
-      @include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
-      background-color: #e5ecf3;
-      font-size: 13px;
-      color: #3c3c3c;
-      box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
+    .advanced-toggle {
+      @include white-button;
+      height: auto;
+      margin-top: -1px;
+      padding: 3px 9px;
+      font-size: 12px;
 
       &.current {
-        background: #fff;
-        border-bottom-color: #fff;
+        border: 1px solid $lightGrey !important;
+        border-radius: 3px !important;
+        background: $lightGrey !important;
+        color: $darkGrey !important;
+        pointer-events: none;
+        cursor: none;
+        
+        &:hover {
+          box-shadow: 0 0 0 0 !important;
+        }
       }
     }
 
@@ -49,7 +53,7 @@
       width: 21px;
       height: 21px;
       padding: 0;
-      margin: 3px 5px 0 16px;
+      margin: 0 5px 0 15px;
       border-radius: 22px;
       border: 1px solid #a5aaaf;
       background: #e5ecf3;
@@ -67,13 +71,15 @@
   left: 100%;
   width: 0;
   border-radius: 0 3px 3px 0;
-  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px);
+  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
   background-color: #fff;
   overflow: hidden;
   @include transition(width .3s);
 
   &.shown {
     width: 300px;
+    height: 100%;
+    overflow-y: scroll;
   }
 
   .cheatsheet-wrapper {
@@ -127,6 +133,11 @@
   background: url(../img/problem-editor-icons.png) no-repeat;
 }
 
+.problem-editor-icon.header {
+  width: 18px;
+  background-position: -265px 0;
+}
+
 .problem-editor-icon.multiple-choice {
   background-position: 0 0;
 }
@@ -150,4 +161,9 @@
   background-position: -220px 0;
 }
 
+.problem-editor-icon.explanation {
+  width: 17px;
+  background-position: -307px 0;
+}
+
 

common/lib/xmodule/xmodule/js/spec/problem/edit_spec.coffee

@@ -70,6 +70,22 @@ describe 'MarkdownEditingDescriptor', ->
       revisedSelection = MarkdownEditingDescriptor.insertSelect('my text')
       expect(revisedSelection).toEqual('[[my text]]')
 
+  describe 'insertHeader', ->
+    it 'inserts the template if selection is empty', ->
+      revisedSelection = MarkdownEditingDescriptor.insertHeader('')
+      expect(revisedSelection).toEqual(MarkdownEditingDescriptor.headerTemplate)
+    it 'wraps existing text', ->
+      revisedSelection = MarkdownEditingDescriptor.insertHeader('my text')
+      expect(revisedSelection).toEqual('my text\n====\n')
+
+  describe 'insertExplanation', ->
+    it 'inserts the template if selection is empty', ->
+      revisedSelection = MarkdownEditingDescriptor.insertExplanation('')
+      expect(revisedSelection).toEqual(MarkdownEditingDescriptor.explanationTemplate)
+    it 'wraps existing text', ->
+      revisedSelection = MarkdownEditingDescriptor.insertExplanation('my text')
+      expect(revisedSelection).toEqual('[explanation]\nmy text\n[explanation]')
+
   describe 'markdownToXml', ->
     it 'converts raw text to paragraph', ->
       data = MarkdownEditingDescriptor.markdownToXml('foo')

common/lib/xmodule/xmodule/js/src/problem/edit.coffee

@@ -1,9 +1,12 @@
 class @MarkdownEditingDescriptor extends XModule.Descriptor
+  # TODO really, these templates should come from or also feed the cheatsheet
   @multipleChoiceTemplate : "( ) incorrect\n( ) incorrect\n(x) correct\n"
   @checkboxChoiceTemplate: "[x] correct\n[ ] incorrect\n[x] correct\n"
   @stringInputTemplate: "= answer\n"
   @numberInputTemplate: "= answer +- x%\n"
   @selectTemplate: "[[incorrect, (correct), incorrect]]\n"
+  @headerTemplate: "Header\n=====\n"
+  @explanationTemplate: "[explanation]\nShort explanation\n[explanation]\n"
 
   constructor: (element) ->
     @element = element
@@ -59,7 +62,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   ###
   confirmConversionToXml: ->
     # TODO: use something besides a JavaScript confirm dialog?
-    return confirm("If you convert to the XML source representation, which is used by the Advanced Editor, you cannot go back to using the Simple Editor.\n\nProceed with conversion to XML?")
+    return confirm("If you use the Advanced Editor, this problem will be converted to XML and you will not be able to return to the Simple Editor Interface.\n\nProceed to the Advanced Editor and convert this problem to XML?")
 
   ###
   Event listener for toolbar buttons (only possible when markdown editor is visible).
@@ -74,6 +77,8 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
       when "number-button" then revisedSelection = MarkdownEditingDescriptor.insertNumberInput(selection)
       when "checks-button" then revisedSelection = MarkdownEditingDescriptor.insertCheckboxChoice(selection)
       when "dropdown-button" then revisedSelection = MarkdownEditingDescriptor.insertSelect(selection)
+      when "header-button" then revisedSelection = MarkdownEditingDescriptor.insertHeader(selection)
+      when "explanation-button" then revisedSelection = MarkdownEditingDescriptor.insertExplanation(selection)
       else # ignore click
 
     if revisedSelection != null
@@ -158,6 +163,12 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   @insertSelect: (selectedText) ->
     return MarkdownEditingDescriptor.insertGenericInput(selectedText, '[[', ']]', MarkdownEditingDescriptor.selectTemplate)
 
+  @insertHeader: (selectedText) ->
+    return MarkdownEditingDescriptor.insertGenericInput(selectedText, '', '\n====\n', MarkdownEditingDescriptor.headerTemplate)
+
+  @insertExplanation: (selectedText) ->
+    return MarkdownEditingDescriptor.insertGenericInput(selectedText, '[explanation]\n', '\n[explanation]', MarkdownEditingDescriptor.explanationTemplate)
+
   @insertGenericInput: (selectedText, lineStart, lineEnd, template) ->
     if selectedText.length > 0
       # TODO: should this insert a newline afterwards?

common/lib/xmodule/xmodule/templates/problem/multiplechoice.yaml

@@ -29,10 +29,10 @@ metadata:
             ( ) The Beatles
             
             
-       [Explanation]
+       [explanation]
        The release of the iPod allowed consumers to carry their entire music library with them in a 
        format that did not rely on fragile and energy-intensive spinning disks.
-       [Explanation]
+       [explanation]
        "
 data: |
    <problem>

common/lib/xmodule/xmodule/templates/problem/numericalresponse.yaml

@@ -28,7 +28,7 @@ metadata:
        = 5
        
 
-       [Explanation]
+       [explanation]
        Pi, or the the ratio between a circle's circumference to its diameter, is an irrational number 
        known to extreme precision. It is value is approximately equal to 3.14.
                
@@ -37,7 +37,7 @@ metadata:
        can use any estimation technique that you like.
        
        If you look at your hand, you can count that you have five fingers.
-       [Explanation]
+       [explanation]
        "
 
 data: |

common/lib/xmodule/xmodule/templates/problem/optionresponse.yaml

@@ -17,12 +17,12 @@ metadata:
         [[(Multiple Choice), String Response, Numerical Response, External Response, Image Response]]
 
 
-        [Explanation]
+        [explanation]
         Multiple Choice also allows students to select from a variety of pre-written responses, although the 
         format makes it easier for students to read very long response options. Optionresponse also differs 
         slightly because students are more likely to think of an answer and then search for it rather than 
         relying purely on recognition to answer the question.
-        [Explanation]
+        [explanation]
         "
 data: |
   <problem>

common/lib/xmodule/xmodule/templates/problem/string_response.yaml

@@ -19,10 +19,10 @@ metadata:
         = Michigan
         
 
-        [Explanation]
+        [explanation]
         Lansing is the capital of Michigan, although it is not Michgan's largest city, 
         or even the seat of the county in which it resides.
-        [Explanation]
+        [explanation]
         "
 data: |
     <problem showanswer="always">