Add Studio view. Remerge student view from instructor view. Build out icon sets, etc.

makeicons/pages.py

 # -*- coding: utf-8 -*-
+"""
+This file is just the bok_choy pages file for our icons. bok_choy
+is a test framework, so we follow this split into pages/icon, although
+it is a little artifical in this case.
+"""
 from bok_choy.page_object import PageObject
 
+
 class IconsPage(PageObject):
     """
-    GitHub's search page
+    We render our icons from HTML using bok_choy. bok_choy prefers
+    working from a real web URL, and this is a page for the URL of the
+    HTML file on github at the time of development
+    (`pmitros/ux-revamp` branch). If we continue developing, this URL
+    may need to change to `master` or otherwise. This should move from
+    pmitros/ux-revamp branch to master at some point
     """
 
-    url = 'https://rawgit.com/pmitros/RateXBlock/pmitros/ux-revamp/makeicons/raw_icons.html'
+    url = '''
+       https://rawgit.com/pmitros/RateXBlock/pmitros/ux-revamp/makeicons/raw_icons.html
+    '''.strip()
 
     def is_browser_on_page(self):
+        '''
+        Check whether we have the fifth selected numeric icon. This is
+        towards the bottom of the page.
+        '''
         return self.q(css='#snum5').is_present()

makeicons/test_icons.py

@@ -26,8 +26,8 @@ class TestIcons(WebAppTest):
         for i in range(5):
             for icon in ["face", "num"]:
                 for style in "ais":
-                    self.assertScreenshot("#"+style+icon+str(i+1), style+icon+str(i+1))
+                    self.assertScreenshot("#"+style+icon+str(i+1),
+                                          style+icon+str(i+1))
 
 if __name__ == '__main__':
     unittest.main()
-    

rate/static/html/rate.html

@@ -9,7 +9,7 @@
       <label class="rate_header" for="rate_freeform_textarea">{freeform_prompt}</label>
     </div>
     <div class="rate_freeform_input">
-      <textarea id="rate_freeform_textarea" class="rate_freeform_area" rows="6" cols="50">{self.user_freeform}</textarea>
+      <textarea id="rate_freeform_textarea" class="rate_freeform_area" rows="6" cols="45" placeholder="{placeholder}">{self.user_freeform}</textarea>
       <div class="rate_thank_you" aria-live=polite>{response}</div>
     </div>
     <button type="submit" class="rate_submit_feedback"> Submit Feedback </button>

rate/static/html/scale_item.html

-<div style="display:inline-block; text-align:center; padding:0px 10px 0px 10px;">
-  <label title="{scale_text}">
+<div class="rate_likert_rating">
+  <label title="{scale_text}" class="rate_likert_label">
     <input id="radio_{idx}" name="rate_scale" class="rate_radio" type="radio" {active}/>
-    <img src="{ina_icon}"/>
+    <span class="rate_icon rate_icon_inactive">
+      <img src="{ina_icon}" alt="{unicode_icon}"/>
+    </span>
+    <span class="rate_icon rate_icon_active">
+      <img src="{act_icon}" alt="{unicode_icon}"/>
+    </span>
     <br/>
     <span>{scale_text}</span>
   </label>

rate/static/html/studio_view.html

@@ -2,21 +2,15 @@
   <p> This XBlock allows you to collect student feedback on pieces of
     the course. This may be helpful either for course improvement, or
     to give students a chance to reflect on what they have done.</p>
-  <p>Please note that the text feedback needs to be analyzed as part
-    of the <a href="https://edx.readthedocs.org/en/latest/">edX
-    research dumps</a>. For now, we do not provide any kind of visual
-    analytics associated with this block. We do display numbers of
-    students giving specific feedback.</p>
-  <p>We do recommend matrix sampling. This can be done by using the
-  <a href="http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/content_experiments/content_experiments_configure.html">randomized
-  control trials framework</a>.</p>
-  <p> We suggest asking specific questions which provide students
-  clear guidance. For the Likert prompt, it is helpful to be very
-  specific: Was this assignment easy to understand? Was the length
-  appropriate? For the freeform response, you should provide students
-  clear guidance on what kind of feedback you would like.</p>
-  <ul class="list-input settings-list">
+  
+  <p> Prior to using this block, we recommend reading about best
+    practices in the edX documentation. In particular, we do recommend
+    asking for structured, specific feedback, and we advise using this
+    in conjunction with
+    the <a href="http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/content_experiments/content_experiments_configure.html">RCT
+    framework</a> for matrix sampling.</p>
 
+  <ul class="list-input settings-list">
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting">
         <label class="label setting-label" for="freeform">Freeform prompt</label>
@@ -27,12 +21,71 @@
 
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="placeholder">Freeform placeholder</label>
+        <input class="input setting-input" name="placeholder" id="placeholder" value="{placeholder}" type="text" />
+      </div>
+      <span class="tip setting-help">This is shown as grayed out text before the student has answered.</span>
+    </li>
+
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="icon_set">Likert icon set</label>
+	<select name="icon_set">
+	  <option value="face">Faces (happy-to-sad)</option>
+	  <option value="midface">Faces (sad-to-happy-to-sad)</option>
+	  <option value="num">Numeric</option></select>
+      </div>
+      <span class="tip setting-help">We can either show happy/sad faces, or numbers 1-5.</span>
+    </li>
+
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
         <label class="label setting-label" for="likert">Likert prompt</label>
         <input class="input setting-input" name="likert" id="likert" value="{likert}" type="text" />
       </div>
       <span class="tip setting-help">Example: Please rate your overall experience with this section.</span>
     </li>
 
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="likert0">Likert option 1</label>
+        <input class="input setting-input" name="likert0" id="likert0" value="{likert0}" type="text" />
+      </div>
+      <span class="tip setting-help">Example: Excellent!</span>
+    </li>
+
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="likert1">Likert option 2</label>
+        <input class="input setting-input" name="likert1" id="likert1" value="{likert1}" type="text" />
+      </div>
+      <span class="tip setting-help">Example: Good</span>
+    </li>
+
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="likert2">Likert option 3</label>
+        <input class="input setting-input" name="likert2" id="likert2" value="{likert2}" type="text" />
+      </div>
+      <span class="tip setting-help">Example: Average</span>
+    </li>
+
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="likert3">Likert option 4</label>
+        <input class="input setting-input" name="likert3" id="likert3" value="{likert3}" type="text" />
+      </div>
+      <span class="tip setting-help">Example: Fair</span>
+    </li>
+
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="likert4">Likert option 5</label>
+        <input class="input setting-input" name="likert4" id="likert4" value="{likert4}" type="text" />
+      </div>
+      <span class="tip setting-help">Example: Poor</span>
+    </li>
+
   <div class="xblock-actions">
     <ul>
       <li class="action-item">

rate/static/js/src/studio.js

@@ -2,8 +2,15 @@ function RateBlock(runtime, element) {
   $(element).find('.save-button').bind('click', function() {
     var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
     var data = {
-      likert: $(element).find('input[name=likert]').val(),
-      freeform: $(element).find('input[name=freeform]').val()
+	likert: $(element).find('input[name=likert]').val(),
+	likert0: $(element).find('input[name=likert0]').val(),
+	likert1: $(element).find('input[name=likert1]').val(),
+	likert2: $(element).find('input[name=likert2]').val(),
+	likert3: $(element).find('input[name=likert3]').val(),
+	likert4: $(element).find('input[name=likert4]').val(),
+	freeform: $(element).find('input[name=freeform]').val(),
+	placeholder: $(element).find('input[name=placeholder]').val(),
+	icon_set: $(element).find('select[name=icon_set]').val()
     };
     runtime.notify('save', {state: 'start'});
     $.post(handlerUrl, JSON.stringify(data)).done(function(response) {

ratetests/test_rate.py

@@ -78,7 +78,7 @@ class TestRate(XBlockTestCase):
         self.submit_feedback('rate_0',
                              {'freeform': 'Worked well', 'vote': 3},
                              {'freeform': 'Worked well', 'vote': 3,
-                              'response': vote_str, 'success': True})
+                              'response': feedback_str, 'success': True})
         self.submit_feedback('rate_0',
                              {'vote': 4},
                              {'freeform': 'Worked well', 'vote': 4,

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, roots):
 setup(
     name='rate-xblock',
     version='0.0',
-    description='rate XBlock',   # TODO: write a better description.
+    description='XBlock for providing feedback on course content',
     packages=[
         'rate',
         'ratetests'