Second batch of ORA UI fixes:

- Change wording when done with peer grading ("evals" -> "assessments")
- Added ICE legend item for comment syntax
- Added conditionals to display human readable 'grader_type' to alleviate confusion
- Rename 'Show/Hide Prompt' to 'Show/Hide Question'
- Reworded grading flags
- Make ICE grading container larger to more easily allow users to read and edit larger texts
- Adjusted lots of text and word choices to make them more user friendly
- Disable previous arrow on first grader feedback and next arrow on last grader feedback
- hide ORA instructions and ICE legend when calibrating so students don't feel like they need to write feedback

Changes after comments:

- Renamed instructions element and fixed casing issue
- Renamed legend class to ice-legend
- Changing condition from != to >= to not only fix incorrect one but also catch possible weirdness
- Grammar fix in a message
- Removing grader_type conditional in HTMl to give way to the one in python
- Moving ice feedback area height styling to CSS file

More changes:

- Update ICE version
- Modifying test to reflect code change
- Adding ICE undo feature

common/lib/xmodule/xmodule/js/fixtures/rubric.html

@@ -38,7 +38,7 @@
     <div class="visibility-control visibility-control-prompt">
         <div class="inner">
         </div>
-        <a href="" class="question-header">Show Prompt</a>
+        <a href="" class="question-header">Show Question</a>
     </div>
     <div class="problem-container">
         <div class="item">

common/lib/xmodule/xmodule/js/src/combinedopenended/display.coffee

@@ -576,12 +576,12 @@ class @CombinedOpenEnded
   collapse_question: (event) =>
     @prompt_container.slideToggle()
     @prompt_container.toggleClass('open')
-    if @question_header.text() == "Hide Prompt"
-      new_text = "Show Prompt"
+    if @question_header.text() == "Hide Question"
+      new_text = "Show Question"
       Logger.log 'oe_hide_question', {location: @location}
     else
       Logger.log 'oe_show_question', {location: @location}
-      new_text = "Hide Prompt"
+      new_text = "Hide Question"
     @question_header.text(new_text)
     return false
 
@@ -621,13 +621,13 @@ class @CombinedOpenEnded
     if @prompt_container.is(":hidden")==true
       @prompt_container.slideToggle()
       @prompt_container.toggleClass('open')
-      @question_header.text("Hide Prompt")
+      @question_header.text("Hide Question")
 
   prompt_hide: () =>
     if @prompt_container.is(":visible")==true
       @prompt_container.slideToggle()
       @prompt_container.toggleClass('open')
-      @question_header.text("Show Prompt")
+      @question_header.text("Show Question")
 
   log_feedback_click: (event) ->
     link_text = @$(event.target).html()

common/lib/xmodule/xmodule/js/src/peergrading/peer_grading_problem.coffee

@@ -179,7 +179,9 @@ class @PeerGradingProblem
   interstitial_page_sel: '.interstitial-page'
   calibration_interstitial_page_sel: '.calibration-interstitial-page'
   error_container_sel: '.error-container'
+  peer_grading_instructions_sel: '.peer-grading-instructions'
   feedback_area_sel: '.feedback-area'
+  ice_legend_sel: '.ice-legend'
   score_selection_container_sel: '.score-selection-container'
   rubric_selection_container_sel: '.rubric-selection-container'
   submit_button_sel: '.submit-button'
@@ -239,7 +241,9 @@ class @PeerGradingProblem
 
     @submission_key_input = $("input[name='submission-key']")
     @essay_id_input = @$("input[name='essay-id']")
+    @peer_grading_instructions = @$(@peer_grading_instructions_sel)
     @feedback_area = @$(@feedback_area_sel)
+    @ice_legend = @$(@ice_legend_sel)
 
     @score_selection_container = @$(@score_selection_container_sel)
     @rubric_selection_container = @$(@rubric_selection_container_sel)
@@ -396,7 +400,7 @@ class @PeerGradingProblem
       @grading_message.fadeIn()
       message = "<p>Successfully saved your feedback. Fetching the next essay."
       if response.required_done
-        message = message + " You have done the required number of peer evals but may continue grading if you like."
+        message = message + " You have done the required number of peer assessments but may continue grading if you like."
       message = message + "</p>"
       @grading_message.html(message)
     else
@@ -459,9 +463,11 @@ class @PeerGradingProblem
       @grading_panel.find(@grading_text_sel).hide()
       @flag_student_container.hide()
       @answer_unknown_container.hide()
+      @peer_grading_instructions.hide()
       @feedback_area.attr('disabled', true)
-      feedback_text = "Once you are done with training and are grading real student essays, you will be asked to share feedback with them in addition to grading their rubric."
+      feedback_text = "Once you are done learning to grade, and are grading your peers' work, you will be asked to share written feedback with them in addition to scoring them."
       if @tracking_changes()
+        @ice_legend.hide()
         @feedback_area.attr('contenteditable', false)
         @feedback_area.text(feedback_text)
       else
@@ -498,7 +504,9 @@ class @PeerGradingProblem
       @grading_panel.find(@grading_text_sel).show()
       @flag_student_container.show()
       @answer_unknown_container.show()
+      @peer_grading_instructions.show()
       if @tracking_changes()
+        @ice_legend.show()
         @feedback_area.html(@make_paragraphs(response.student_response))
         @change_tracker.rebindTracker()
       else
@@ -598,12 +606,12 @@ class @PeerGradingProblem
   collapse_question: (event) =>
     @prompt_container.slideToggle()
     @prompt_container.toggleClass('open')
-    if @question_header.text() == "Hide Prompt"
-      new_text = "Show Prompt"
+    if @question_header.text() == "Hide Question"
+      new_text = "Show Question"
       Logger.log 'oe_hide_question', {location: @location}
     else
       Logger.log 'oe_show_question', {location: @location}
-      new_text = "Hide Prompt"
+      new_text = "Hide Question"
     @question_header.text(new_text)
     return false
 

common/lib/xmodule/xmodule/js/src/peergrading/track_changes.coffee

 class @TrackChanges
   reset_button_sel: '.reset-changes'
+  undo_button_sel: '.undo-change'
+  tracked_elements_sel: 'span.del, span.ins'
   tracked_feedback_sel: '.feedback-area.track-changes'
   submit_button_sel: '.submit-button'
   tracker: null
@@ -7,9 +9,13 @@ class @TrackChanges
   constructor: (element) ->
     @el = element
     @reset_button = @$(@reset_button_sel)
+    @undo_button = @$(@undo_button_sel)
     @submit_button = @$(@submit_button_sel)
+    @tracked_elements = @$(@tracked_elements_sel)
     @tracked_feedback = @$(@tracked_feedback_sel)
+    
     @reset_button.click @reset_changes
+    @undo_button.click @undo_change
     @submit_button.click @stop_tracking_on_submit
 
 
@@ -42,6 +48,15 @@ class @TrackChanges
   reset_changes: (event) =>
     event.preventDefault()
     @tracker.rejectAll()
+  
+  undo_change: (event) =>
+    event.preventDefault()
+    keyToUndo = 0
+    @tracked_elements.each ->
+      key = parseInt(@attr('data-cid'))
+      if key > keyToUndo
+        keyToUndo = key
+    ICEtracker.rejectChange('[data-cid="'+ keyToUndo + '"]')
 
   stop_tracking_on_submit: () =>
-    @tracker.stopTracking()
+    @tracker.stopTracking()
\ No newline at end of file

lms/djangoapps/open_ended_grading/tests.py

@@ -351,7 +351,7 @@ class TestPanel(ModuleStoreTestCase, LoginEnrollmentTestCase):
         """
         request = Mock(user=self.user)
         response = views.student_problem_list(request, self.course.id)
-        self.assertRegexpMatches(response.content, "Here are a list of open ended problems for this course.")
+        self.assertRegexpMatches(response.content, "Here is a list of open ended problems for this course.")
 
 @override_settings(MODULESTORE=TEST_DATA_MIXED_MODULESTORE)
 class TestPeerGradingFound(ModuleStoreTestCase):

lms/static/sass/course/_staff_grading.scss

@@ -10,7 +10,7 @@ div.peer-grading{
     div.feedback-area.track-changes {
         position: relative;
         margin: 0px;
-        height: 150px;
+        height: 400px;
         border: 1px solid lightgray;
         padding: 5px;
         resize: vertical;

lms/templates/combinedopenended/combined_open_ended.html

@@ -30,7 +30,7 @@
             <div class="visibility-control visibility-control-prompt">
                 <div class="inner">
                 </div>
-                <a href="" class="section-header section-header-prompt question-header">${_("Hide Prompt")}</a>
+                <a href="" class="section-header section-header-prompt question-header">${_("Hide Question")}</a>
             </div>
             <div class="problem-container">
             % for item in items:
@@ -39,7 +39,7 @@
             </div>
             <div class="oe-tools response-tools">
                 <span class="oe-tools-label"></span>
-                <input type="button" value="${_('Try Again')}" class="reset-button" name="reset"/>
+                <input type="button" value="${_('New Submission')}" class="reset-button" name="reset"/>
             </div>
         </div>
 

lms/templates/combinedopenended/combined_open_ended_results.html

 <%! from django.utils.translation import ugettext as _ %>
+% num_results = len(results)
 % for (i,result) in enumerate(results):
     % if 'task_name' in result and 'result' in result:
         <div class="combined-rubric-container"
@@ -17,12 +18,20 @@
                 <button class="rubric-collapse" href="#">${_("Toggle Full Rubric")}</button>
                 <span class="oe-tools-scores">
                     <span class="oe-tools-scores-label"></span>
-                    % if len(results)>1:
-                        <button href="#" alt="Previous" class="rubric-button rubric-previous-button"><i class="icon-chevron-left"></i></button>
+                    % if num_results>1:
+                        <button href="#" alt="Previous" class="rubric-button rubric-previous-button"
+                            % if i == 0:
+                                disabled="true"
+                            % endif
+                        ><i class="icon-chevron-left"></i></button>
                     % endif 
                     ${result['task_name']} from grader ${i+1}
-                    % if len(results)>1:
-                        <button href="#" alt="Next" class="rubric-button rubric-next-button"><i class="icon-chevron-right"></i></button>
+                    % if num_results>1:
+                        <button href="#" alt="Next" class="rubric-button rubric-next-button"
+                            % if (i+1) >= num_results:
+                                disabled="true"
+                            % endif
+                        ><i class="icon-chevron-right"></i></button>
                     % endif
                 </span>
             </div>

lms/templates/open_ended_problems/open_ended_problems.html

@@ -17,38 +17,38 @@
         <div class="error-container">${error_text}</div>
         <h1>${_("Open Ended Problems")}</h1>
         <h2>${_("Instructions")}</h2>
-        <p>${_("Here are a list of open ended problems for this course.")}</p>
+        <p>${_("Here is a list of open ended problems for this course.")}</p>
         % if success:
-        % if len(problem_list) == 0:
-        <div class="message-container">
-          ${_("You have not attempted any open ended problems yet.")}
-        </div>
-        %else:
-        <table class="problem-list">
-            <tr>
-                <th>${_("Problem Name")}</th>
-                <th>${_("Status")}</th>
-                <th>${_("Grader Type")}</th>
-                <th>${_("ETA")}</th>
-            </tr>
-            %for problem in problem_list:
-            <tr>
-                <td>
-                    <a href="${problem['actual_url']}">${problem['problem_name']}</a>
-                </td>
-                <td>
-                    ${problem['state']}
-                </td>
-                <td>
-                    ${problem['grader_type']}
-                </td>
-                <td>
-                    ${problem['eta_string']}
-                </td>
-            </tr>
-            %endfor
-        </table>
-        %endif
+            % if len(problem_list) == 0:
+                <div class="message-container">
+                  ${_("You have not attempted any open ended problems yet.")}
+                </div>
+            %else:
+                <table class="problem-list">
+                    <tr>
+                        <th>${_("Problem Name")}</th>
+                        <th>${_("Status")}</th>
+                        <th>${_("Grader Type")}</th>
+                        <th>${_("ETA")}</th>
+                    </tr>
+                    %for problem in problem_list:
+                    <tr>
+                        <td>
+                            <a href="${problem['actual_url']}">${problem['problem_name']}</a>
+                        </td>
+                        <td>
+                            ${problem['state']}
+                        </td>
+                        <td>
+                            ${problem['grader_type']}
+                        </td>
+                        <td>
+                            ${problem['eta_string']}
+                        </td>
+                    </tr>
+                    %endfor
+                </table>
+            %endif
         %endif
     </div>
 </section>

lms/templates/peer_grading/peer_grading_problem.html

@@ -17,7 +17,7 @@
                 <div class="visibility-control visibility-control-prompt">
                     <div class="inner">
                     </div>
-                    <a href="" class="section-header section-header-prompt question-header">${_('Hide Prompt')}</a>
+                    <a href="" class="section-header section-header-prompt question-header">${_('Hide Question')}</a>
                 </div>
                 <div class="prompt-information-container">
                     <section>
@@ -41,28 +41,35 @@
                     <div class="evaluation">
                         <p class="rubric-selection-container"></p>
                         <p class="score-selection-container"></p>
+                        <hr />
+                        <div class="answer-unknown-container">
+                            <input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown">
+                            ${_("I am unsure about the scores I have given above: ")}
+                        </div>
+                        <br />
                         <h3>${_("Written Feedback")}</h3>
                         % if track_changes:
-                            <p>${_("Please edit your peer's submission below.")}</p>
-                            <p class="legend">
+                            <p class="peer-grading-instructions">${_("Please edit your peer's submission and give them written comments below.")}</p>
+                            <p class="ice-legend">
                                 <span class="ins">${_("This is an insertion.")}</span>&nbsp;
                                 <span class="del">${_("This is a deletion.")}</span>&nbsp;
+                                <span class="ins">${_("[This is a comment.]")}</span>&nbsp;
                                 <span class="ice-controls">
                                     <a href="#" class="reset-changes"><i class="icon-refresh"></i> Reset Changes</a>
+                                    <a href="#" class="undo-change"><i class="icon-undo"></i> Undo Change</a>
                                 </span>
                             </p>
                             <div name="feedback" class="feedback-area track-changes" contenteditable="true"></div>
                         % else:
-                            <p>${_("Please include some written feedback as well.")}</p>
+                            <p class="ora-instructions">${_("Please include some written feedback as well.")}</p>
                             <textarea name="feedback" placeholder="Feedback for student" class="feedback-area" cols="70" ></textarea>
                         % endif
-                        <div class="flag-student-container"> ${_("This submission has explicit or offensive content : ")}
+                        <div class="flag-student-container">
                             <input type="checkbox" class="flag-checkbox" value="student_is_flagged"> 
-                        </div>
-                        <div class="answer-unknown-container"> ${_("I do not know how to grade this question : ")}
-                            <input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown">
+                            ${_("This submission has explicit, offensive, or (I suspect) plagiarized content: ")}
                         </div>
                     </div>
+                    <hr />
                     <div class="submission">
                         <input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
                     </div>
@@ -97,7 +104,7 @@
         <section class="flag-submission-confirmation">
             <h4>${_("Are you sure that you want to flag this submission?")}</h4>
             <p>
-            ${_("You are about to flag a submission. You should only flag a submission that contains explicit or offensive content. If the submission is not addressed to the question or is incorrect, you should give it a score of zero and accompanying feedback instead of flagging it.")}
+            ${_("You are about to flag a submission. You should only flag a submission that contains explicit, offensive, or  (suspected) plagiarized content. If the submission is not addressed to the question or is incorrect, you should give it a score of zero and accompanying feedback instead of flagging it.")}
             </p>
             <div>
                 <input type="button" class="flag-submission-removal-button" value="${_("Remove Flag")}" name="calibration-interstitial-page-button" />