Add support for exercise descriptions.

vectordraw/static/css/vectordraw.css

@@ -4,6 +4,10 @@
     display: inline-block;
 }
 
+.vectordraw_block .vectordraw-description {
+    margin-bottom: 1.5em;
+}
+
 .vectordraw_block .jxgboard {
     float: left;
     border: 2px solid #1f628d;

vectordraw/static/html/vectordraw.html

 <div class="vectordraw_block">
 
+  <h2>{{ self.display_name }}</h2>
+
+  {% if self.description %}
+    <div class="vectordraw-description">
+      {{ self.description|safe }}
+    </div>
+  {% endif %}
+
   <div id="vectordraw" />
 
 </div>

vectordraw/vectordraw.py

@@ -35,6 +35,15 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.content
     )
 
+    description = String(
+        display_name="Description",
+        help="Exercise description displayed above vector drawing box",
+        default="",
+        multiline_editor="html",
+        resettable_editor=False,
+        scope=Scope.content
+    )
+
     width = Integer(
         display_name="Width",
         help="The width of the board in pixels",
@@ -172,6 +181,7 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
 
     editable_fields = (
         'display_name',
+        'description',
         'width',
         'height',
         'bounding_box_size',
@@ -217,6 +227,7 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
         The primary view of the VectorDrawXBlock, shown to students
         when viewing courses.
         """
+        context['self'] = self
         fragment = Fragment()
         fragment.add_content(loader.render_template('static/html/vectordraw.html', context))
         fragment.add_css(self.resource_string('static/css/vectordraw.css'))