CSS for results should match specification.

poll/poll.py

@@ -8,7 +8,7 @@ from markdown import markdown
 import pkg_resources
 
 from xblock.core import XBlock
-from xblock.fields import Scope, List, String, Dict, UserScope, BlockScope
+from xblock.fields import Scope, List, String, Dict
 from xblock.fragment import Fragment
 
 
@@ -17,6 +17,7 @@ class PollBlock(XBlock):
     Poll XBlock. Allows a teacher to poll users, and presents the results so
     far of the poll to the user when finished.
     """
+    title = String(default='Poll')
     question = String(default='What is your favorite color?')
     answers = List(
         default=(('Red', 'Red'), ('Blue', 'Blue'), ('Green', 'Green'),
@@ -102,6 +103,7 @@ class PollBlock(XBlock):
             # Offset so choices will always be True.
             'answers': self.answers,
             'question': markdown(clean(self.question)),
+            'title': self.title,
             'js_template': js_template,
         })
 
@@ -133,6 +135,7 @@ class PollBlock(XBlock):
         js_template = self.resource_string('/public/handlebars/studio.handlebars')
         context.update({
             'question': clean(self.question),
+            'title': self.title,
             'js_template': js_template
         })
         context = Context(context)
@@ -152,6 +155,11 @@ class PollBlock(XBlock):
     def studio_submit(self, data, suffix=''):
         # I wonder if there's something for live validation feedback already.
         result = {'success': True, 'errors': []}
+        if 'title' not in data or not data['title']:
+            # This can be blank, if it needs to be.
+            title = ''
+        else:
+            title = data['title'][:200]
         if 'question' not in data or not data['question']:
             result['errors'].append("You must specify a question.")
             result['success'] = False
@@ -174,6 +182,7 @@ class PollBlock(XBlock):
                 continue
             if key in poll_order:
                 answers.append((key, value))
+        self.title = title
 
         if not len(answers) > 1:
             result['errors'].append(

poll/public/css/poll.css

 .poll-answer {
     margin-left: 1em;
     font-weight: bold;
+    display: inline-block;
 }
 .percentage-gauge {
     display: inline-block;
@@ -21,11 +22,18 @@
 }
 
 ul.poll-answers, ul.poll-answers-results {
-    list-style-type: none;
-    display: table;
+    list-style-type: none !important;
     max-width: 80%;
 }
 
+li.poll-answer {
+    display: block;
+}
+
+ul.poll-answers-results {
+    display: table;
+}
+
 li.poll-result {
     width: 100%;
     display: table-row;

poll/public/html/poll.html

@@ -3,13 +3,13 @@
 {# If no form is present, the Javascript will load the results instead. #}
 {% if not choice %}
   <form>
-      <h2>Poll</h2>
+      <h2>{{ title }}</h2>
       {{question|safe}}
       <ul class="poll-answers">
       {% for key, answer in answers %}
           <li class="poll-answer">
-              <input type="radio" name="choice" id="answer-{{number}}" value="{{key}}">
-              <label class="poll-answer" for="answer-{{number}}">{{answer}}</label>
+              <input type="radio" name="choice" id="answer-{{key}}" value="{{key}}">
+              <label class="poll-answer" for="answer-{{key}}">{{answer}}</label>
           </li>
       {% endfor %}
       </ul>

poll/public/html/poll_edit.html

@@ -3,6 +3,13 @@
     <form id="poll-form">
     <ul class="list-input settings-list" id="poll-line-items">
         <li class="field comp-setting-entry is-set">
+            <div class="wrapper-comp-setting">
+                <label class="label setting-label" for="poll-title">Title</label>
+                <input class="input setting-input" name="title" id="poll-title" value="{{title}}" type="text" />
+            </div>
+            <span class="tip setting-help">Enter a title to act as the header for this Poll.</span>
+        </li>
+        <li class="field comp-setting-entry is-set">
           <h2><label for="question-editor">Question/Prompt</label></h2>
           <a href="//daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Syntax</a> is supported.
           <div id="question-editor-container">

poll/public/js/poll_edit.js

@@ -32,11 +32,11 @@ function PollEditBlock(runtime, element) {
         pollLineItems.last().scrollTop();
     });
 
-    $(element).find('.cancel-button').bind('click', function() {
+    $(element).find('.cancel-button', element).bind('click', function() {
         runtime.notify('cancel', {});
     });
 
-    $(element).find('.save-button').bind('click', function() {
+    $(element).find('.save-button', element).bind('click', function() {
         var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
         var data = {};
         var poll_order = [];
@@ -46,7 +46,8 @@ function PollEditBlock(runtime, element) {
                 poll_order.push(this.name);
             }
         });
-        data['question'] = $('#question-editor').val();
+        data['title'] = $('#poll-title', element).val();
+        data['question'] = $('#question-editor', element).val();
         data['poll_order'] = poll_order;
         function check_return(data) {
             if (data['success']) {