Add workbench scenario.

vectordraw/static/html/vectordraw.html

@@ -9,7 +9,7 @@
   {% endif %}
 
   <div id="vectordraw">
-    <div class="jxgboard" style="width: {{ self.width }}px; height: {{ self.height }}px;" />
+    <div class="jxgboard" style="width: {{ self.width }}px; height: {{ self.height }}px;"></div>
     <div class="menu">
       <div class="controls">
         <select>
@@ -18,7 +18,6 @@
               {{ vector.description }}
             </option>
           {% endfor %}
-
           {% for point in self.get_points %}
             {% if not point.fixed %}
               <option value="point-{{ forloop.counter0 }}">

vectordraw/templates/xml/box_incline.xml

+<vertical_demo>
+  <vectordraw url_name="vectordraw_example"
+              description="&lt;p&gt;A box remains stationary on an inclined plane at an angle of 20 degrees with respect to the x-axis. Draw all appropriate vectors that define the force diagram for this system.&lt;/p&gt;&lt;p&gt;&lt;em&gt;Be sure that the &quot;tail&quot; of each vector starts at the center of mass of the box.&lt;/em&gt;&lt;/p&gt;"
+              width="550"
+              height="450"
+              bounding_box_size="8"
+              background_url="https://github.com/open-craft/jsinput-vectordraw/raw/master/Notes_and_Examples/2_boxIncline_multiVector/box_on_incline.png"
+              background_width="20"
+              vectors="[{&quot;name&quot;:&quot;N&quot;,&quot;description&quot;:&quot;Normal force - N&quot;,&quot;tail&quot;:[2,2],&quot;length&quot;:4,&quot;angle&quot;:45,&quot;render&quot;:true},{&quot;name&quot;:&quot;f&quot;,&quot;description&quot;:&quot;Friction - f&quot;,&quot;coords&quot;:[[-2,-5],[-1,-3]],&quot;render&quot;:false},{&quot;name&quot;:&quot;g&quot;,&quot;description&quot;:&quot;Gravity - g&quot;,&quot;tail&quot;:[0,1.5],&quot;length&quot;:5,&quot;angle&quot;:-75,&quot;render&quot;:false}]"
+              points="[{&quot;name&quot;:&quot;cm&quot;,&quot;coords&quot;:[-0.6,0.4],&quot;fixed&quot;:false,&quot;description&quot;:&quot;A simple point&quot;}]"
+              expected_result="{&quot;N&quot;:{&quot;angle&quot;:110,&quot;angle_tolerance&quot;:2,&quot;tail&quot;:[-0.6,0.4],&quot;tail_tolerance&quot;:0.5},&quot;g&quot;:{&quot;angle&quot;:270,&quot;angle_tolerance&quot;:2,&quot;tail&quot;:[-0.6,0.4],&quot;tail_tolerance&quot;:0.5},&quot;f&quot;:{&quot;angle&quot;:20,&quot;angle_tolerance&quot;:2,&quot;tail&quot;:[-0.6,0.4],&quot;tail_tolerance&quot;:0.5}}"
+              />
+</vertical_demo>

vectordraw/vectordraw.py

@@ -10,6 +10,12 @@ from xblock.fragment import Fragment
 from xblockutils.resources import ResourceLoader
 from xblockutils.studio_editable import StudioEditableXBlockMixin
 
+try:
+    # Used to detect if we're in the workbench so we can add Underscore.js
+    from workbench.runtime import WorkbenchRuntime
+except ImportError:
+    WorkbenchRuntime = False  # pylint: disable=invalid-name
+
 from .grader import Grader
 
 
@@ -301,6 +307,11 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
             "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
         )
         fragment.add_css(loader.load_unicode('static/css/vectordraw.css'))
+        # Workbench doesn't have Underscore.js, so add it:
+        if WorkbenchRuntime and isinstance(self.runtime, WorkbenchRuntime):
+            fragment.add_javascript_url(
+                "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
+            )
         fragment.add_javascript_url(
             "//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.98/jsxgraphcore.js"
         )
@@ -368,17 +379,9 @@ class VectorDrawXBlock(StudioEditableXBlockMixin, XBlock):
             "result": result,
         }
 
-    # TO-DO: change this to create the scenarios you'd like to see in the
-    # workbench while developing your XBlock.
     @staticmethod
     def workbench_scenarios():
-        """A canned scenario for display in the workbench."""
-        return [
-            ("VectorDrawXBlock",
-             """<vertical_demo>
-                <vectordraw/>
-                <vectordraw/>
-                <vectordraw/>
-                </vertical_demo>
-             """),
-        ]
+        """
+        Canned scenarios for display in the workbench.
+        """
+        return loader.load_scenarios_from_path('templates/xml')