Save work

cms/static/js/speed-editor.js

@@ -13,7 +13,9 @@ var commandDown;
 (function() {
   $body.on('click', '.editor-bar a', onEditorButton);
   $body.on('click', '.cheatsheet-toggle', toggleCheatsheet);
+// NOTE: we are showing metadata in the standard way, not in an "Advanced" section below.
   $body.on('click', '.problem-settings-button', toggleProblemSettings);
+// NOTE: not doing keybindings at this time.
   $(document).bind('keyup', onKeyboard);
 })();
 
@@ -21,7 +23,7 @@ function initProblemEditors($editor, $prev) {
   $currentEditor = $editor;
   simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
     lineWrapping: true,
-//    TODO: I left out the extra keys for now.
+//    NOTE: keybindings have been left out at this point. Needs further work.
       extraKeys: {
       'Ctrl-N': newUnit,
       'Ctrl-H': makeHeader,
@@ -44,13 +46,15 @@ function initProblemEditors($editor, $prev) {
 
   currentEditor = simpleEditor;
 
+// NOTE: I left out setting the background color. Does not appear necessary.
   $(simpleEditor.getWrapperElement()).css('background', '#fff');
   $(xmlEditor.getWrapperElement()).css({
     'background': '#fff'
   }).hide();
 
-//    TODO: is this necessary??
+// NOTE: I left this out, doesn't seem to be necessary.
   $(simpleEditor.getWrapperElement()).bind('click', setFocus);
+// NOTE: we are not supporting preview at this time.
   $preview = $prev.find('.problem');
 }
 

cms/templates/widgets/problem-edit.html

@@ -25,4 +25,60 @@
         %endif
         <textarea class="xml-box" rows="8" cols="40">${data | h}</textarea>
     </div>
-</section>    
+</section>
+
+<script type="text/template" id="simple-editor-cheatsheet">
+    <article class="simple-editor-cheatsheet">
+        <div class="cheatsheet-wrapper">
+            <div class="row">
+                <h6>Multiple Choice</h6>
+                <div class="col sample">
+                    <img src="/static/img/choice-example.png" />
+                </div>
+                <div class="col">
+            <pre><code>( ) red
+                ( ) green
+                (x) blue</code></pre>
+                </div>
+            </div>
+            <div class="row">
+                <h6>Multiple Check</h6>
+                <div class="col sample">
+                    <img src="/static/img/multi-example.png" />
+                </div>
+                <div class="col">
+            <pre><code>[ ] earth
+                [ ] wind
+                [x] water</code></pre>
+                </div>
+            </div>
+            <div class="row">
+                <h6>String Response</h6>
+                <div class="col sample">
+                    <img src="/static/img/string-example.png" />
+                </div>
+                <div class="col">
+                    <pre><code>= dog</code></pre>
+                </div>
+            </div>
+            <div class="row">
+                <h6>Numerical Response</h6>
+                <div class="col sample">
+                    <img src="/static/img/number-example.png" />
+                </div>
+                <div class="col">
+                    <pre><code>= 3.14 +- 2%</code></pre>
+                </div>
+            </div>
+            <div class="row">
+                <h6>Option Response</h6>
+                <div class="col sample">
+                    <img src="/static/img/select-example.png" />
+                </div>
+                <div class="col">
+                    <pre><code>[[wrong, (right)]]</code></pre>
+                </div>
+            </div>
+        </div>
+    </article>
+</script>

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

@@ -8,6 +8,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   constructor: (element) ->
     $body.on('click', '.editor-tabs .tab', @changeEditor)
     $body.on('click', '.editor-bar a', @onToolbarButton);
+    $body.on('click', '.cheatsheet-toggle', @toggleCheatsheet);
 
     @xml_editor = CodeMirror.fromTextArea($(".xml-box", element)[0], {
     mode: "xml"
@@ -51,6 +52,15 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
       @markdown_editor.replaceSelection(revisedSelection)
       @markdown_editor.focus()
 
+  toggleCheatsheet: (e) =>
+    e.preventDefault();
+
+#    TODO: don't base off of current_editor
+    if !$(@current_editor.getWrapperElement()).find('.simple-editor-cheatsheet')[0]
+      @cheatsheet = $($('#simple-editor-cheatsheet').html())
+      $(@current_editor.getWrapperElement()).append(@cheatsheet)
+
+    setTimeout (=> @cheatsheet.toggleClass('shown')), 10
 
   setCurrentEditor: (editor) ->
     $(@current_editor.getWrapperElement()).hide()
@@ -61,6 +71,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
   save: ->
     $body.off('click', '.editor-tabs .tab', @changeEditor)
     $body.off('click', '.editor-bar a', @onToolbarButton);
+    $body.off('click', '.cheatsheet-toggle', @toggleCheatsheet);
     data: @xml_editor.getValue()
 
   @insertMultipleChoice: (selectedText) ->
@@ -111,6 +122,21 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
     else
       return template
 
+# We may wish to add insertHeader and insertVideo. Here is Tom's code.
+# function makeHeader() {
+#  var selection = simpleEditor.getSelection();
+#  var revisedSelection = selection + '\n';
+#  for(var i = 0; i < selection.length; i++) {
+#revisedSelection += '=';
+#  }
+#  simpleEditor.replaceSelection(revisedSelection);
+#}
+#
+#function makeVideo() {
+#var selection = simpleEditor.getSelection();
+#simpleEditor.replaceSelection('{{video ' + selection + '}}');
+#}
+#
   @markdownToXml: (markdown)->
     toXml = `function(markdown) {
       var xml = markdown;