Add tests.

problem_builder/public/js/plot.js

@@ -171,7 +171,7 @@ function PlotBlock(runtime, element) {
             }
         } else {
             overlayInfo.show();
-            if (!overlayInfo.isEmpty() && !plotInfo.is(':visible')) {
+            if (!overlayInfo.isEmpty() && !plotInfo.isVisible()) {
                 plotInfo.show();
             }
         }

problem_builder/templates/html/plot.html

@@ -48,14 +48,14 @@
       {% for overlay in self.overlay_data %}
         <div class="plot-overlay plot-overlay-{{ overlay.position }}">
           {% if overlay.description or overlay.citation %}
-            <p style="color: {{ overlay.point_color }};">{{ overlay.plot_label }}</p>
+            <p class="overlay-plot-label" style="color: {{ overlay.point_color }};">{{ overlay.plot_label }}</p>
             {% if overlay.description %}
-              <p>
+              <p class="overlay-description">
                 <strong>Description:</strong> {{ overlay.description }}
               </p>
             {% endif %}
             {% if overlay.citation %}
-              <p>
+              <p class="overlay-citation">
                 <strong>Source:</strong> {{ overlay.citation }}
               </p>
             {% endif %}

problem_builder/tests/integration/xml_templates/step_builder_plot_overlays.xml

+<step-builder url_name="step-builder" display_name="Step Builder">
+
+  <sb-step display_name="First step">
+    <pb-rating name="rating_1_1"
+               low="Disagree"
+               high="Agree"
+               question="How much do you agree?"
+               correct_choices='["1", "2", "3", "4","5"]'>
+    </pb-rating>
+    <pb-rating name="rating_1_2"
+               low="Not important"
+               high="Very important"
+               question="How important do you think this is?"
+               correct_choices='["1", "2", "3", "4","5"]'>
+    </pb-rating>
+  </sb-step>
+
+  <sb-step display_name="Second step">
+    <pb-rating name="rating_2_1"
+               low="Disagree"
+               high="Agree"
+               question="How much do you agree?"
+               correct_choices='["1", "2", "3", "4","5"]'>
+    </pb-rating>
+    <pb-rating name="rating_2_2"
+               low="Not important"
+               high="Very important"
+               question="How important do you think this is?"
+               correct_choices='["1", "2", "3", "4","5"]'>
+    </pb-rating>
+  </sb-step>
+
+  <sb-step display_name="Last step">
+    <sb-plot plot_label="Custom plot label"
+             point_color_default="orange"
+             point_color_average="purple"
+             q1_label="Custom Q1 label"
+             q2_label="Custom Q2 label"
+             q3_label="Custom Q3 label"
+             q4_label="Custom Q4 label"
+             claims="2 + 2 = 5, rating_1_1, rating_1_2&#10;The answer to everything is 42, rating_2_1, rating_2_2">
+      <sb-plot-overlay plot_label="Teacher"
+                       point_color="coral"
+                       claim_data="2, 3&#10;4, 2">
+      </sb-plot-overlay>
+      <sb-plot-overlay plot_label="Researchers"
+                       point_color="cornflowerblue"
+                       description="Responses of leading researchers in the field"
+                       claim_data="4, 4&#10;1, 5">
+      </sb-plot-overlay>
+      <sb-plot-overlay plot_label="Sheldon Cooper"
+                       point_color="rgb(128, 128, 0)"
+                       citation="The Big Bang Theory"
+                       claim_data="3, 5&#10;2, 4">
+      </sb-plot-overlay>
+      <sb-plot-overlay plot_label="Yoda"
+                       point_color="#dc143c"
+                       description="Powerful you have become, the dark side I sense in you."
+                       citation="Star Wars"
+                       claim_data="1, 2&#10;3, 3">
+      </sb-plot-overlay>
+    </sb-plot>
+  </sb-step>
+
+  <sb-review-step></sb-review-step>
+
+</step-builder>