Tightened up tests, added image support, question reordering.

poll/poll.py

@@ -19,13 +19,15 @@ class PollBlock(XBlock):
     far of the poll to the user when finished.
     """
     question = String(default='What is your favorite color?')
+    # This will be converted into an OrderedDict.
+    # Key, (Label, Image path)
     answers = List(
-        default=(('Red', 'Red'), ('Blue', 'Blue'), ('Green', 'Green'),
-                 ('Other', 'Other')),
+        default=(('R', {'label': 'Red', 'img': None}), ('B', {'label': 'Blue', 'img': None}),
+                 ('G', {'label': 'Green', 'img': None}), ('O', {'label': 'Other', 'img': None})),
         scope=Scope.settings, help="The question on this poll."
     )
     feedback = String(default='', help="Text to display after the user votes.")
-    tally = Dict(default={'Red': 0, 'Blue': 0, 'Green': 0, 'Other': 0},
+    tally = Dict(default={'R': 0, 'B': 0, 'G': 0, 'O': 0},
                  scope=Scope.user_state_summary,
                  help="Total tally of answers from students.")
     choice = String(scope=Scope.user_state, help="The student's answer")
@@ -45,6 +47,34 @@ class PollBlock(XBlock):
             'total': total, 'feedback': process_markdown(self.feedback),
         }
 
+    def get_tally(self):
+        """
+        Grabs the Tally and cleans it up, if necessary. Scoping prevents us from
+        modifying this in the studio and in the LMS the way we want to without
+        undesirable side effects. So we just clean it up on first access within
+        the LMS, in case the studio has made changes to the answers.
+        """
+        tally = self.tally
+        answers = OrderedDict(self.answers)
+        for key in answers.keys():
+            if key not in tally:
+                tally[key] = 0
+
+        for key in tally.keys():
+            if key not in answers:
+                del tally[key]
+
+        return tally
+
+    def any_image(self):
+        """
+        Find out if any answer has an image, since it affects layout.
+        """
+        for value in dict(self.answers).values():
+            if value['img']:
+                return True
+        return False
+
     def tally_detail(self):
         """
         Tally all results.
@@ -53,14 +83,18 @@ class PollBlock(XBlock):
         answers = OrderedDict(self.answers)
         choice = self.get_choice()
         total = 0
+        source_tally = self.get_tally()
+        any_img = self.any_image()
         for key, value in answers.items():
             tally.append({
-                'count': int(self.tally.get(key, 0)),
-                'answer': value,
+                'count': int(source_tally[key]),
+                'answer': value['label'],
+                'img': value['img'],
                 'key': key,
                 'top': False,
                 'choice': False,
                 'last': False,
+                'any_img': any_img,
             })
             total += tally[-1]['count']
 
@@ -70,6 +104,8 @@ class PollBlock(XBlock):
                 answer['percent'] = int(percent * 100)
                 if answer['key'] == choice:
                     answer['choice'] = True
+                if answer['img']:
+                    any_img = True
             except ZeroDivisionError:
                 answer['percent'] = 0
 
@@ -114,6 +150,7 @@ 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()
         })
 
         if self.choice:
@@ -134,8 +171,8 @@ class PollBlock(XBlock):
 
     @XBlock.json_handler
     def load_answers(self, data, suffix=''):
-        return {'answers': [{'key': key, 'text': answer}
-                            for key, answer in self.answers
+        return {'answers': [{'key': key, 'text': value['label'], 'img': value['img']}
+                            for key, value in self.answers
         ]}
 
     def studio_view(self, context=None):
@@ -177,22 +214,40 @@ class PollBlock(XBlock):
 
         # Need this meta information, otherwise the questions will be
         # shuffled by Python's dictionary data type.
-        poll_order = [key.strip().replace('answer-', '')
-                      for key in data.get('poll_order', [])
+        poll_order = [
+            key.strip().replace('answer-', '')
+            for key in data.get('poll_order', [])
         ]
+        print poll_order
         # Aggressively clean/sanity check answers list.
-        answers = []
+        answers = {}
         for key, value in data.items():
-            if not key.startswith('answer-'):
+            img = False
+            text = False
+            if key.startswith('answer-'):
+                text = 'label'
+            if key.startswith('img-answer-'):
+                img = 'img'
+            if not (text or img):
                 continue
-            key = key.replace('answer-', '')
+            key = key.replace('answer-', '').replace('img-', '')
             if not key or key.isspace():
                 continue
             value = value.strip()[:250]
             if not value or value.isspace():
                 continue
+            update_dict = {img or text: value}
+            if key in answers:
+                answers[key].update(update_dict)
+                continue
             if key in poll_order:
-                answers.append((key, value))
+                answers[key] = update_dict
+
+        for value in answers.values():
+            if 'label' not in value:
+                value['label'] = None
+            if 'img' not in value:
+                value['img'] = None
 
         if not len(answers) > 1:
             result['errors'].append(
@@ -203,23 +258,15 @@ class PollBlock(XBlock):
             return result
 
         # Need to sort the answers.
-        answers.sort(key=lambda x: poll_order.index(x[0]), reverse=True)
+        answers = list(answers.items())
+        answers.sort(key=lambda x: poll_order.index(x[0]))
 
         self.answers = answers
         self.question = question
         self.feedback = feedback
 
-        tally = self.tally
-
-        answers = OrderedDict(answers)
-        # Update tracking schema.
-        for key, value in answers.items():
-            if key not in tally:
-                tally[key] = 0
-
-        for key, value in tally.items():
-            if key not in answers:
-                del tally[key]
+        # Tally will not be updated until the next attempt to use it, per
+        # scoping limitations.
 
         return result
 
@@ -244,13 +291,16 @@ class PollBlock(XBlock):
             result['errors'].append('No key "{choice}" in answers table.'.format(choice=choice))
             return result
 
+        tally = self.get_tally()
         self.choice = choice
-        running_total = self.tally.get(choice, 0)
-        self.tally[choice] = running_total + 1
+        running_total = tally.get(choice, 0)
+        tally[choice] = running_total + 1
         # Let the LMS know the user has answered the poll.
         self.runtime.publish(self, 'progress', {})
         result['success'] = True
 
+        self.tally = tally
+
         return result
 
     # TO-DO: change this to create the scenarios you'd like to see in the

poll/public/css/poll.css

@@ -6,14 +6,19 @@
 .percentage-gauge {
     display: inline-block;
     background-color: #e5ebee;
+    position: relative;
+    z-index: 1;
 }
 
 .poll-result-input-container {
     display: table-cell;
-    padding-right: .2em;
     vertical-align: middle;
 }
 
+.poll-result-input-container input {
+    margin-right: .5em;
+}
+
 .percentage-gauge-container {
     display: table-cell;
     width: 100%;
@@ -29,7 +34,11 @@ ul.poll-answers, ul.poll-answers-results {
 li.poll-answer {
     display: block;
     border-bottom-width: .5em;
+    vertical-align: middle;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
+
 li.poll-spacer {
     height: .25em;
 }
@@ -44,9 +53,31 @@ li.poll-result {
     padding-bottom: .2em;
 }
 
-.poll-answer-text {
+.poll-answer-label {
     margin-left: .2em;
     font-weight: bold;
+    display: inline-block;
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
+.poll-image {
+    width: 25%;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.poll-image {
+    margin-left: .5em;
+}
+
+li.poll-result .poll-image {
+    display: table-cell;
+    margin-left: 0;
+}
+
+.poll-image img{
+    width: 100%;
 }
 
 .poll-percent-container {

poll/public/css/poll_edit.css

@@ -2,6 +2,7 @@
 
 .poll-delete-answer {
     float: right;
+    margin-top: 1em;
 }
 #poll-question-editor-container, #poll-feedback-editor-container{
     width: 100%;
@@ -14,7 +15,7 @@
     color: #4C4C4C;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
-    box-shadow: 0px 0px 9px #555 inset;
+    box-shadow: 0 0 9px #555 inset;
     border: 1px solid #B2B2B2;
     border-radius: 3px;
     padding: 10px;
@@ -23,4 +24,22 @@
 label.poll-label {
     font-weight: bold;
     font-size: 16pt;
+}
+
+.poll-move-up {
+    opacity: .5;
+}
+
+.poll-move-down {
+    opacity: .5;
+}
+
+.poll-move-down:hover, .poll-move-up:hover {
+    opacity: 1;
+    transition: opacity .4s;
+    cursor: pointer
+}
+
+.poll-move {
+    float: right;
 }
\ No newline at end of file

poll/public/handlebars/results.handlebars

@@ -6,9 +6,18 @@
             <div class="poll-result-input-container">
               <input id="answer-{{key}}" type="radio" disabled {{#if choice}}checked="True"{{/if}} />
             </div>
+            {{#if any_img}}
+                <div class="poll-image">
+                    <label for="answer-{{key}}" class="poll-image-label">
+                        {{#if img}}
+                          <img src="{{img}}" />
+                        {{/if}}
+                    </label>
+                </div>
+            {{/if}}
             <div class="percentage-gauge-container">
               <div class="percentage-gauge" style="width:{{percent}}%;">
-                  <label class="poll-answer-text" for="answer-{{key}}">{{answer}}</label>
+                  <label class="poll-answer-label" for="answer-{{key}}">{{answer}}</label>
               </div>
             </div>
             <div class="poll-percent-container">

poll/public/handlebars/studio.handlebars

@@ -3,9 +3,15 @@
 <li class="field comp-setting-entry is-set">
     <div class="wrapper-comp-setting">
         <label class="label setting-label" for="answer-{{key}}">Answer</label>
-        <input class="input setting-input" name="answer-{{key}}" id="answer-{{key}}" value="{{text}}" type="text" />
+        <input class="input setting-input" name="answer-{{key}}" id="answer-{{key}}" value="{{text}}" type="text" /><br />
+        <label class="label setting-label" for="img-answer-{{key}}">Image URL</label>
+        <input class="input setting-input" name="img-answer-{{key}}" id="img-answer-{{key}}" value="{{img}}" type="text" />
+        <div class="poll-move">
+            <div class="poll-move-up">&#9650;</div>
+            <div class="poll-move-down">&#9660;</div>
+        </div>
     </div>
-    <span class="tip setting-help">Enter an answer for the user to select.</span>
+    <span class="tip setting-help">Enter an answer for the user to select. An answer must have an image URL or text, and can have both.</span>
     <a href="#" class="button action-button poll-delete-answer" onclick="return false;">Delete</a>
 </li>
 {{/each}}

poll/public/html/poll.html

@@ -7,10 +7,19 @@
           {{question|safe}}
       </div>
       <ul class="poll-answers">
-      {% for key, answer in answers %}
+      {% for key, value in answers %}
           <li class="poll-answer">
-              <input type="radio" name="choice" id="answer-{{key}}" value="{{key}}">
-              <label class="poll-answer" for="answer-{{key}}">{{answer}}</label>
+              <input type="radio" name="choice" id="answer-{{key}}" value="{{key}}" />
+              {% if value.img %}
+              <div class="poll-image">
+                  <label for="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>
           </li>
       {% endfor %}
       </ul>

poll/public/html/poll_edit.html

@@ -34,7 +34,7 @@
     <div class="xblock-actions">
         <ul>
             <li class="action-item" id="poll-add-answer">
-                <a href="#" class="button action-button" onclick="return false;">Add Question</a>
+                <a href="#" class="button action-button" onclick="return false;">Add Answer</a>
             </li>
             <li class="action-item">
                 <input type="submit" class="button action-primary save-button" value="Save" onclick="return false;" />

poll/public/js/poll.js

@@ -17,7 +17,9 @@ function PollBlock(runtime, element) {
             url: tallyURL,
             data: JSON.stringify({}),
             success: function (data) {
+                $(element).fadeOut(300);
                 $('div.poll-block', element).html(resultsTemplate(data));
+                $(element).fadeIn(300);
             }
         })
     }
@@ -28,7 +30,6 @@ function PollBlock(runtime, element) {
             // Refresh.
             radios = $(radios.selector);
             var choice = radios.val();
-            console.log(choice);
             $.ajax({
                 type: "POST",
                 url: voteUrl,

poll/public/js/poll_edit.js

@@ -15,21 +15,46 @@ function PollEditBlock(runtime, element) {
         })
     }
 
-    function empowerDeletes() {
-        $('.poll-delete-answer', element).click(function () {
+    function empowerDeletes(scope) {
+        $('.poll-delete-answer', scope).click(function () {
             $(this).parent().remove();
         });
     }
 
+    // Above this point are other settings.
+    var starting_point = 3;
+    function empowerArrows(scope) {
+        $('.poll-move-up', scope).click(function () {
+            var tag = $(this).parent().parent().parent();
+            if (tag.index() <= starting_point){
+                return;
+            }
+            tag.prev().before(tag);
+            tag.fadeOut(250).fadeIn(250);
+        });
+        $('.poll-move-down', scope).click(function () {
+            var tag = $(this).parent().parent().parent();
+            if ((tag.index() >= (tag.parent().children().length - 1))) {
+                return;
+            }
+            tag.next().after(tag);
+            tag.parent().parent().parent().scrollTop(tag.offset().top);
+            tag.fadeOut(250).fadeIn(250);
+        });
+    }
+
     function displayAnswers(data) {
         pollLineItems.append(answerTemplate(data));
-        empowerDeletes();
+        empowerDeletes(element);
+        empowerArrows(element);
     }
 
     $('#poll-add-answer', element).click(function () {
         pollLineItems.append(answerTemplate({'answers': [{'key': generateUUID(), 'text': ''}]}));
-        empowerDeletes();
-        pollLineItems.last().scrollTop();
+        var new_answer = $(pollLineItems.children().last());
+        empowerDeletes(new_answer);
+        empowerArrows(new_answer);
+        new_answer.fadeOut(250).fadeIn(250);
     });
 
     $(element).find('.cancel-button', element).bind('click', function() {
@@ -42,7 +67,7 @@ function PollEditBlock(runtime, element) {
         var poll_order = [];
         $('#poll-form input', element).each(function(i) {
             data[this.name] = this.value;
-            if (this.name.indexOf('answer-') >= 0){
+            if (this.name.indexOf('answer-') == 0){
                 poll_order.push(this.name);
             }
         });

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'}]]" />
+</vertical_demo>
\ No newline at end of file