Markup and CSS fixes, poll form scoping.

poll/poll.py

@@ -150,7 +150,9 @@ class PollBlock(XBlock):
             # Mustache is treating an empty string as true.
             'feedback': process_markdown(self.feedback) or False,
             'js_template': js_template,
-            'any_img': self.any_image()
+            'any_img': self.any_image(),
+            # The SDK doesn't set url_name.
+            'url_name': getattr(self, 'url_name', ''),
         })
 
         if self.choice:
@@ -218,7 +220,7 @@ class PollBlock(XBlock):
             key.strip().replace('answer-', '')
             for key in data.get('poll_order', [])
         ]
-        print poll_order
+
         # Aggressively clean/sanity check answers list.
         answers = {}
         for key, value in data.items():

poll/public/css/poll.css

@@ -16,7 +16,7 @@
 }
 
 .poll-result-input-container input {
-    margin-right: .5em;
+    margin: 0 .5em 0 0;
 }
 
 .percentage-gauge-container {

poll/public/handlebars/results.handlebars

@@ -30,7 +30,7 @@
        {{/last}}
     {{/each}}
     </ul>
-    <input type="submit" name="poll-submit" onclick="return false;" value="Submit" disabled>
+    <input class="input-main" type="button" name="poll-submit" value="Submit" disabled>
     <div class="poll-footnote">Results gathered from {{total}} respondent(s).</div>
     {{#if feedback}}
         <hr />

poll/public/html/poll.html

@@ -9,21 +9,21 @@
       <ul class="poll-answers">
       {% for key, value in answers %}
           <li class="poll-answer">
-              <input type="radio" name="choice" id="answer-{{key}}" value="{{key}}" />
+              <input type="radio" name="choice" id="{{url_name}}-answer-{{key}}" value="{{key}}" />
               {% if value.img %}
               <div class="poll-image">
-                  <label for="answer-{{key}}" class="poll-image-label">
+                  <label for="{{url_name}}-answer-{{key}}" class="poll-image-label">
                       {% if value.img %}
                       <img src="{{value.img}}" />
                       {% endif %}
                   </label>
               </div>
               {% endif %}
-              <label class="poll-answer" for="answer-{{key}}">{{value.label}}</label>
+              <label class="poll-answer" for="{{url_name}}-answer-{{key}}">{{value.label}}</label>
           </li>
       {% endfor %}
       </ul>
-      <input type="submit" name="poll-submit" onclick="return false;" value="Submit" disabled>
-</form>
+      <input class="input-main" type="button" name="poll-submit" value="Submit" disabled />
+  </form>
 {% endif %}
 </div>
\ No newline at end of file

poll/public/js/poll.js

@@ -4,22 +4,20 @@ function PollBlock(runtime, element) {
     var voteUrl = runtime.handlerUrl(element, 'vote');
     var tallyURL = runtime.handlerUrl(element, 'get_results');
 
-    var submit = $('input[type=submit]', element);
+    var submit = $('input[type=button]', element);
     var resultsTemplate = Handlebars.compile($("#results", element).html());
     function getResults(data) {
         if (! data['success']) {
             alert(data['errors'].join('\n'));
         }
         $.ajax({
-            // Semantically, this would be better as GET, but I can use helper
+            // Semantically, this would be better as GET, but we can use helper
             // functions with POST.
             type: "POST",
             url: tallyURL,
             data: JSON.stringify({}),
             success: function (data) {
-                $(element).fadeOut(300);
                 $('div.poll-block', element).html(resultsTemplate(data));
-                $(element).fadeIn(300);
             }
         })
     }
@@ -28,7 +26,7 @@ function PollBlock(runtime, element) {
         var radios = $('input[name=choice]:checked', element);
         submit.click(function (event) {
             // Refresh.
-            radios = $(radios.selector);
+            radios = $(radios.selector, element);
             var choice = radios.val();
             $.ajax({
                 type: "POST",

tests/integration/test_defaults.py

@@ -8,6 +8,9 @@ from .base_test import PollBaseTest
 
 
 class TestDefaults(PollBaseTest):
+    """
+    Tests to run against the default poll.
+    """
     def test_default_poll(self):
         """
         Verifies that a default poll loads, that it can be voted on, and that

tests/integration/test_layout.py

+"""
+Test to make sure the layout for results is sane when taking images into
+account.
+"""
+from tests.integration.base_test import PollBaseTest
+import time
+
+
+class TestLayout(PollBaseTest):
+    """
+    Do tests to verify that the layout of elements makes sense depeneding on
+    the number of images.
+    """
+
+    def test_all_images(self):
+        """
+        Verify img tags are created for answers when they're all set.
+        """
+        self.go_to_page('All Pictures')
+        pics = self.browser.find_elements_by_css_selector('.poll-image')
+        self.assertEqual(len(pics), 4)
+
+        # Pics should be within labels.
+        pics[0].find_element_by_css_selector('img').click()
+        self.browser.find_element_by_css_selector('input[name=poll-submit]').click()
+
+        time.sleep(1)
+
+        self.assertEqual(len(self.browser.find_elements_by_css_selector('.poll-image')), 4)
+
+    def test_one_image(self):
+        """
+        Verify layout is sane when only one answer has an image.
+        """
+        self.go_to_page('One Picture')
+        pics = self.browser.find_elements_by_css_selector('.poll-image')
+        # On the polling page, there should only be one pics div.
+        self.assertEqual(len(pics), 1)
+
+        pics[0].find_element_by_css_selector('img').click()
+
+        self.browser.find_element_by_css_selector('input[name=poll-submit]').click()
+
+        time.sleep(1)
+        # ...But on the results page, we need four, for table layout.
+        self.assertEqual(len(self.browser.find_elements_by_css_selector('.poll-image')), 4)
\ No newline at end of file

tests/integration/test_markdown.py

@@ -5,7 +5,13 @@ from .base_test import PollBaseTest
 
 
 class MarkdownTestCase(PollBaseTest):
+    """
+    Tests for the Markdown functionality.
+    """
     def test_question_markdown(self):
+        """
+        Ensure Markdown is parsed for questions.
+        """
         self.go_to_page("Markdown")
         self.assertEqual(
             self.browser.find_element_by_css_selector('.poll-question-container').text,
@@ -21,6 +27,9 @@ We shall find out if markdown is respected.
 "I have not yet begun to code.\"""")
 
     def test_feedback_markdown(self):
+        """
+        Ensure Markdown is parsed for feedback.
+        """
         self.go_to_page("Markdown")
         self.browser.find_element_by_css_selector('input[type=radio]').click()
         self.browser.find_element_by_css_selector('input[name="poll-submit"]').click()

tests/integration/test_poll_functions.py

@@ -3,6 +3,7 @@ Tests a realistic, configured Poll to make sure that everything works as it
 should.
 """
 from selenium.common.exceptions import NoSuchElementException
+import time
 from .base_test import PollBaseTest
 
 
@@ -44,6 +45,10 @@ class TestPollFunctions(PollBaseTest):
 
         self.browser.find_element_by_css_selector('input[name=poll-submit]').click()
 
+        # Not a good way to wait here, since all the elements we care about
+        # tracking don't exist yet.
+        time.sleep(1)
+
         self.assertTrue(self.browser.find_element_by_css_selector('.poll-feedback').text,
                         "Thank you\nfor being a valued student.")
 
@@ -64,10 +69,11 @@ class TestPollFunctions(PollBaseTest):
         answer_elements[1].click()
 
         self.browser.find_element_by_css_selector('input[name=poll-submit]').click()
-        submit_button = self.browser.find_element_by_css_selector('input[name=poll-submit]')
 
+        time.sleep(1)
+
+        submit_button = self.browser.find_element_by_css_selector('input[name=poll-submit]')
         self.assertFalse(submit_button.is_enabled())
 
         self.go_to_page('Poll Functions')
-
         self.assertFalse(self.browser.find_element_by_css_selector('input[name=poll-submit]').is_enabled())
\ No newline at end of file

tests/integration/xml/all_pictures.xml

+<vertical_demo>
+    <poll tally="{'red': 20, 'fennec': 29, 'kit': 15, 'arctic' : 35}"
+          question="## What is your favorite kind of fox?"
+          answers="[['red', {'label': 'Red Fox', 'img': '../img/red_fox.png'}], ['fennec', {'label': 'Fennec Fox', 'img': '../img/fennec_fox.png'}], ['kit', {'label': 'Kit Fox', 'img': '../img/kit_fox.png'}], ['arctic', {'label': 'Arctic fox', 'img': '../img/arctic_fox.png'}]]" />
+</vertical_demo>
\ No newline at end of file

tests/integration/xml/layout.xml

-<vertical_demo>
-    <poll tally="{'long': 20, 'short': 29, 'not_saying': 15, 'longer' : 35}"
-          question="## How long have you been studying with us?"
-          answers="[['long', {'label': 'A very long time', 'img': None}], ['short', {'label': 'Not very long', 'img': None}], ['not_saying', {'label': 'I shall not say', 'img': None}], ['longer', {'label': 'Longer than you', 'img': None}]]"
-          feedback="### Thank you&#10;&#10;for being a valued student."/>
-</vertical_demo>
\ No newline at end of file

tests/integration/xml/one_picture.xml

 <vertical_demo>
     <poll tally="{'red': 20, 'fennec': 29, 'kit': 15, 'arctic' : 35}"
           question="## What is your favorite kind of fox?"
-          answers="[['red', {'label': 'Red Fox', 'img': '../img/red_fox.png'}], ['fennec', {'label': 'Fennec Fox', 'img': '../img/fennec_fox.png'}], ['kit', {'label': 'Kit Fox', 'img': '../img/kit_fox.png'}], ['arctic', {'label': 'Arctic fox', 'img': '../img/arctic_fox.png'}]]" />
+          answers="[['red', {'label': 'Red Fox', 'img': None}], ['fennec', {'label': 'Fennec Fox', 'img': '../img/fennec_fox.png'}], ['kit', {'label': 'Kit Fox', 'img': None}], ['arctic', {'label': 'Arctic fox', 'img': None}]]" />
 </vertical_demo>
\ No newline at end of file

tests/integration/xml/poll_functions.xml

 <vertical_demo>
     <poll tally="{'long': 20, 'short': 29, 'not_saying': 15, 'longer' : 35}"
           question="## How long have you been studying with us?"
-          answers="[['long', 'A very long time'], ['short', 'Not very long'], ['not_saying', 'I shall not say'], ['longer', 'Longer than you']]"
+          answers="[['long', {'label': 'A very long time', 'img': None}], ['short', {'label': 'Not very long', 'img': None}], ['not_saying', {'label': 'I shall not say', 'img': None}], ['longer', {'label': 'Longer than you', 'img': None}]]"
           feedback="### Thank you&#10;&#10;for being a valued student."/>
 </vertical_demo>
\ No newline at end of file