WYSIWYG functionality for Studio, Part 2:

- Add support for setting names and labels for vectors.
- Add support for defining expected result.

Add support for setting name and label of a vector.

Add WYSIWYG functionality for defining expected result.

vectordraw/public/css/vectordraw.css

@@ -86,7 +86,7 @@
     background-color: #f7f7f7;
 }
 
-.vectordraw_block .menu .vector-properties h3 {
+.vectordraw_block h3 {
     font-size: 16px;
     margin: 0 0 5px;
 }

vectordraw/public/css/vectordraw_edit.css

+.vectordraw_edit_block,
+.vectordraw_edit_block .jxgboard {
+    display: block;
+}
+
 .vectordraw_edit_block {
     border-top: 1px solid #e5e5e5;
     margin-left: 20px;
@@ -15,12 +20,37 @@
 }
 
 .vectordraw_edit_block .jxgboard {
-    float: none;
+    float: left;
     margin-bottom: 1em;
 }
 
 /* Menu */
 
+.vectordraw_edit_block .menu .controls .result-mode {
+    float: right;
+}
+
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-prop-name,
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-prop-tail,
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-prop-angle {
+    padding-right: 0px;
+}
+
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-select,
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-prop-label,
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-prop-length {
+    padding-right: 5px;
+}
+
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row select,
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row input {
+    height: 2em;
+}
+
+.vectordraw_edit_block .menu .vector-properties .vector-prop-list .row select {
+    padding: 0px;
+}
+
 .vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-remove {
     vertical-align: bottom;
 }
@@ -28,3 +58,44 @@
 .vectordraw_edit_block .menu .vector-properties .vector-prop-list .row .vector-remove button {
     float: right;
 }
+
+.vectordraw_edit_block h3 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.vectordraw_edit_block .checks {
+    display: none;
+    width: 220px;
+    float: right;
+    border-top: 2px solid #1f628d;
+    border-right: 2px solid #1f628d;
+    border-bottom: 2px solid #1f628d;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    padding-left: 10px;
+    background-color: #f7f7f7;
+    overflow: auto;
+}
+
+.vectordraw_edit_block .checks .check .row {
+    height: 2em;
+}
+
+.vectordraw_edit_block .checks .check span,
+.vectordraw_edit_block .checks .check input[type="text"] {
+    height: 1.5em;
+    margin-right: 12px;
+}
+
+.vectordraw_edit_block .checks .check input[type="checkbox"] {
+    height: 1.2em;
+    width: 20%;
+    min-width: 0px;
+    margin-top: 2px;
+}
+
+.vectordraw_edit_block .checks .check input {
+    float: right;
+    vertical-align: middle;
+}

vectordraw/public/js/studio_edit.js

@@ -91,6 +91,10 @@ function StudioEditableXBlockMixin(runtime, element) {
 
     return {
 
+        getContents: function(fieldName) {
+            return _.findWhere(fields, {name: fieldName}).val();
+        },
+
         save: function(data) {
             var values = {};
             var notSet = []; // List of field names that should be set to default values
@@ -107,9 +111,12 @@ function StudioEditableXBlockMixin(runtime, element) {
                     field.removeEditor();
                 }
             }
-            // If WYSIWYG editor was used, prefer its data over value of "vectors" field:
-            if (data.vectors) {
+            // If WYSIWYG editor was used,
+            // prefer its data over values of "Vectors" and "Expected result" fields:
+            if (!_.isEmpty(data)) {
                 values.vectors = JSON.stringify(data.vectors, undefined, 4);
+                values.expected_result_positions = data.expected_result_positions;
+                values.expected_result = JSON.stringify(data.expected_result, undefined, 4);
             }
 
             studio_submit({values: values, defaults: notSet});

vectordraw/vectordraw.py

@@ -178,7 +178,11 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
         display_name="Expected result",
         help=(
             "Defines vector properties for grading. "
-            "Vectors omitted from this setting are ignored when grading."
+            "Vectors omitted from this setting are ignored when grading. "
+            "Note that you can also use the WYSIWYG editor below to opt in and out of checks "
+            "for individual vectors. "
+            "If you use the WYSIWYG editor at all, any changes you make here "
+            "will be overwritten when saving."
         ),
         default="{}",
         multiline_editor=True,
@@ -206,6 +210,11 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
         enforce_type=True
     )
 
+    # Dictionary that keeps track of vector positions for correct answer;
+    # treated as an editable field but hidden from author in Studio
+    # since changes to it are implicit
+    expected_result_positions = Dict(scope=Scope.content)
+
     # User state
 
     # Dictionary containing vectors and points present on the board when user last clicked "Check",
@@ -234,6 +243,7 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
         'vectors',
         'points',
         'expected_result',
+        'expected_result_positions',
         'custom_checks'
     )
 
@@ -261,6 +271,7 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
             'vectors': self.get_vectors,
             'points': self.get_points,
             'expected_result': self.get_expected_result,
+            'expected_result_positions': self.expected_result_positions,
         }
 
     @property
@@ -406,6 +417,8 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
         context = {'fields': [], 'self': self}
         # Build a list of all the fields that can be edited:
         for field_name in self.editable_fields:
+            if field_name == "expected_result_positions":
+                continue
             field = self.fields[field_name]
             assert field.scope in (Scope.content, Scope.settings), (
                 "Only Scope.content or Scope.settings fields can be used with "