Fix peer grading rubric issue. Redo peer grading JS to scope locally

common/lib/xmodule/xmodule/css/combinedopenended/display.scss

@@ -419,6 +419,22 @@ div.result-container {
   }
 }
 
+div.rubric {
+    ul.rubric-list{
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      list-style: none;
+      li {
+        &.rubric-list-item {
+          margin-bottom: 0;
+          padding: 0;
+          border-radius: $baseline/4;
+         }
+      }
+    }
+}
+
 
 section.open-ended-child {
   @media print {
@@ -659,14 +675,13 @@ section.open-ended-child {
     margin-bottom: lh();
     margin-left: .75em;
     margin-left: .75rem;
-    list-style: disc outside none;
   }
 
     ul.rubric-list{
       margin: 0;
       padding: 0;
       list-style-type: none;
-
+      list-style: none;
       li {
         &.rubric-list-item {
           margin-bottom: 0;

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

@@ -3,10 +3,20 @@
 # Can (and should be) expanded upon when our problem list 
 # becomes more sophisticated
 class @PeerGrading
+
+  peer_grading_sel: '.peer-grading'
+  peer_grading_container_sel: '.peer-grading-container'
+  error_container_sel: '.error-container'
+  message_container_sel: '.message-container'
+  problem_button_sel: '.problem-button'
+  problem_list_sel: '.problem-list'
+  progress_bar_sel: '.progress-bar'
+
   constructor: (element) ->
-    @peer_grading_container = $('.peer-grading')
+    @el = element
+    @peer_grading_container = @$(@peer_grading_sel)
     @use_single_location = @peer_grading_container.data('use-single-location')
-    @peer_grading_outer_container = $('.peer-grading-container')
+    @peer_grading_outer_container = @$(@peer_grading_container_sel)
     @ajax_url = @peer_grading_container.data('ajax-url')
 
     if @use_single_location.toLowerCase() == "true"
@@ -14,23 +24,27 @@ class @PeerGrading
       @activate_problem()
     else
       #Otherwise, activate the panel view.
-      @error_container = $('.error-container')
+      @error_container = @$(@error_container_sel)
       @error_container.toggle(not @error_container.is(':empty'))
 
-      @message_container = $('.message-container')
+      @message_container = @$(@message_container_sel)
       @message_container.toggle(not @message_container.is(':empty'))
 
-      @problem_button = $('.problem-button')
+      @problem_button = @$(@problem_button_sel)
       @problem_button.click @show_results
 
-      @problem_list = $('.problem-list')
+      @problem_list = @$(@problem_list_sel)
       @construct_progress_bar()
 
+  # locally scoped jquery.
+  $: (selector) ->
+    $(selector, @el)
+
   construct_progress_bar: () =>
     problems = @problem_list.find('tr').next()
     problems.each( (index, element) =>
       problem = $(element)
-      progress_bar = problem.find('.progress-bar')
+      progress_bar = problem.find(@progress_bar_sel)
       bar_value = parseInt(problem.data('graded'))
       bar_max = parseInt(problem.data('required')) + bar_value
       progress_bar.progressbar({value: bar_value, max: bar_max})
@@ -43,10 +57,10 @@ class @PeerGrading
       if response.success
         @peer_grading_outer_container.after(response.html).remove()
         backend = new PeerGradingProblemBackend(@ajax_url, false)
-        new PeerGradingProblem(backend)
+        new PeerGradingProblem(backend, @el)
       else
         @gentle_alert response.error
 
   activate_problem: () =>
     backend = new PeerGradingProblemBackend(@ajax_url, false)
-    new PeerGradingProblem(backend)
+    new PeerGradingProblem(backend, @el)
\ No newline at end of file

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

@@ -158,11 +158,47 @@ class @PeerGradingProblemBackend
     return response
 
 class @PeerGradingProblem
-  constructor: (backend) ->
-    @prompt_wrapper = $('.prompt-wrapper')
+
+  prompt_wrapper_sel: '.prompt-wrapper'
+  peer_grading_container_sel: '.peer-grading-container'
+  submission_container_sel: '.submission-container'
+  prompt_container_sel: '.prompt-container'
+  rubric_container_sel: '.rubric-container'
+  flag_student_container_sel: '.flag-student-container'
+  answer_unknown_container_sel: '.answer-unknown-container'
+  calibration_panel_sel: '.calibration-panel'
+  grading_panel_sel: '.grading-panel'
+  content_panel_sel: '.content-panel'
+  grading_message_sel: '.grading-message'
+  question_header_sel: '.question-header'
+  flag_submission_confirmation_sel: '.flag-submission-confirmation'
+  flag_submission_confirmation_button_sel: '.flag-submission-confirmation-button'
+  flag_submission_removal_button_sel: '.flag-submission-removal-button'
+  grading_wrapper_sel: '.grading-wrapper'
+  calibration_feedback_sel: '.calibration-feedback'
+  interstitial_page_sel: '.interstitial-page'
+  calibration_interstitial_page_sel: '.calibration-interstitial-page'
+  error_container_sel: '.error-container'
+  feedback_area_sel: '.feedback-area'
+  score_selection_container_sel: '.score-selection-container'
+  rubric_selection_container_sel: '.rubric-selection-container'
+  submit_button_sel: '.submit-button'
+  action_button_sel: '.action-button'
+  calibration_feedback_button_sel: '.calibration-feedback-button'
+  interstitial_page_button_sel: '.interstitial-page-button'
+  calibration_interstitial_page_button_sel: '.calibration-interstitial-page-button'
+  flag_checkbox_sel: '.flag-checkbox'
+  answer_unknown_checkbox_sel: '.answer-unknown-checkbox'
+  calibration_text_sel: '.calibration-text'
+  grading_text_sel: '.grading-text'
+  calibration_feedback_wrapper_sel: '.calibration-feedback-wrapper'
+
+  constructor: (backend, el) ->
+    @el = el
+    @prompt_wrapper = $(@prompt_wrapper_sel)
     @backend = backend
     @is_ctrl = false
-    @el = $('.peer-grading-container')
+    @el = $(@peer_grading_container_sel)
 
     # get the location of the problem
     @location = $('.peer-grading').data('location')
@@ -172,51 +208,51 @@ class @PeerGradingProblem
       return
 
     # get the other elements we want to fill in
-    @submission_container = $('.submission-container')
-    @prompt_container = $('.prompt-container')
-    @rubric_container = $('.rubric-container')
-    @flag_student_container = $('.flag-student-container')
-    @answer_unknown_container = $('.answer-unknown-container')
-    @calibration_panel = $('.calibration-panel')
-    @grading_panel = $('.grading-panel')
-    @content_panel = $('.content-panel')
-    @grading_message = $('.grading-message')
+    @submission_container = @$(@submission_container_sel)
+    @prompt_container = @$(@prompt_container_sel)
+    @rubric_container = @$(@rubric_container_sel)
+    @flag_student_container = @$(@flag_student_container_sel)
+    @answer_unknown_container = @$(@answer_unknown_container_sel)
+    @calibration_panel = @$(@calibration_panel_sel)
+    @grading_panel = @$(@grading_panel_sel)
+    @content_panel = @$(@content_panel_sel)
+    @grading_message = @$(@grading_message_sel)
     @grading_message.hide()
-    @question_header = $('.question-header')
+    @question_header = @$(@question_header_sel)
     @question_header.click @collapse_question
-    @flag_submission_confirmation = $('.flag-submission-confirmation')
-    @flag_submission_confirmation_button = $('.flag-submission-confirmation-button')
-    @flag_submission_removal_button = $('.flag-submission-removal-button')
+    @flag_submission_confirmation = @$(@flag_submission_confirmation_sel)
+    @flag_submission_confirmation_button = @$(@flag_submission_confirmation_button_sel)
+    @flag_submission_removal_button = @$(@flag_submission_removal_button_sel)
 
     @flag_submission_confirmation_button.click @close_dialog_box
     @flag_submission_removal_button.click @remove_flag
 
-    @grading_wrapper =$('.grading-wrapper')
-    @calibration_feedback_panel = $('.calibration-feedback')
-    @interstitial_page = $('.interstitial-page')
+    @grading_wrapper = @$(@grading_wrapper_sel)
+    @calibration_feedback_panel = @$(@calibration_feedback_sel)
+    @interstitial_page = @$(@interstitial_page_sel)
     @interstitial_page.hide()
 
-    @calibration_interstitial_page = $('.calibration-interstitial-page')
+    @calibration_interstitial_page = @$(@calibration_interstitial_page_sel)
     @calibration_interstitial_page.hide()
 
-    @error_container = $('.error-container')
+    @error_container = @$(@error_container_sel)
 
     @submission_key_input = $("input[name='submission-key']")
-    @essay_id_input = $("input[name='essay-id']")
-    @feedback_area = $('.feedback-area')
+    @essay_id_input = @$("input[name='essay-id']")
+    @feedback_area = @$(@feedback_area_sel)
 
-    @score_selection_container = $('.score-selection-container')
-    @rubric_selection_container = $('.rubric-selection-container')
+    @score_selection_container = @$(@score_selection_container_sel)
+    @rubric_selection_container = @$(@rubric_selection_container_sel)
     @grade = null
     @calibration = null
 
-    @submit_button = $('.submit-button')
-    @action_button = $('.action-button')
-    @calibration_feedback_button = $('.calibration-feedback-button')
-    @interstitial_page_button = $('.interstitial-page-button')
-    @calibration_interstitial_page_button = $('.calibration-interstitial-page-button')
-    @flag_student_checkbox = $('.flag-checkbox')
-    @answer_unknown_checkbox = $('.answer-unknown-checkbox')
+    @submit_button = @$(@submit_button_sel)
+    @action_button = @$(@action_button_sel)
+    @calibration_feedback_button = @$(@calibration_feedback_button_sel)
+    @interstitial_page_button = @$(@interstitial_page_button_sel)
+    @calibration_interstitial_page_button = @$(@calibration_interstitial_page_button_sel)
+    @flag_student_checkbox = @$(@flag_checkbox_sel)
+    @answer_unknown_checkbox = @$(@answer_unknown_checkbox_sel)
 
     $(window).keydown @keydown_handler
     $(window).keyup @keyup_handler
@@ -251,6 +287,10 @@ class @PeerGradingProblem
 
     @is_calibrated_check()
 
+  # locally scoped jquery.
+  $: (selector) ->
+    $(selector, @el)
+
 
   ##########
   #
@@ -300,11 +340,11 @@ class @PeerGradingProblem
     @close_dialog_box()
 
   close_dialog_box: () =>
-    $( ".flag-submission-confirmation" ).dialog('close')
+    @$(@flag_submission_confirmation_sel).dialog('close')
 
   flag_box_checked: () =>
     if @flag_student_checkbox.is(':checked')
-      $( ".flag-submission-confirmation" ).dialog({ height: 400, width: 400 })
+      @$(@flag_submission_confirmation_sel).dialog({ height: 400, width: 400 })
 
   # called after we perform an is_student_calibrated check
   calibration_check_callback: (response) =>
@@ -399,10 +439,10 @@ class @PeerGradingProblem
       # Display the right text
       # both versions of the text are written into the template itself
       # we only need to show/hide the correct ones at the correct time
-      @calibration_panel.find('.calibration-text').show()
-      @grading_panel.find('.calibration-text').show()
-      @calibration_panel.find('.grading-text').hide()
-      @grading_panel.find('.grading-text').hide()
+      @calibration_panel.find(@calibration_text_sel).show()
+      @grading_panel.find(@calibration_text_sel).show()
+      @calibration_panel.find(@grading_text_sel).hide()
+      @grading_panel.find(@grading_text_sel).hide()
       @flag_student_container.hide()
       @answer_unknown_container.hide()
 
@@ -429,10 +469,10 @@ class @PeerGradingProblem
       # Display the correct text
       # both versions of the text are written into the template itself
       # we only need to show/hide the correct ones at the correct time
-      @calibration_panel.find('.calibration-text').hide()
-      @grading_panel.find('.calibration-text').hide()
-      @calibration_panel.find('.grading-text').show()
-      @grading_panel.find('.grading-text').show()
+      @calibration_panel.find(@calibration_text_sel).hide()
+      @grading_panel.find(@calibration_text_sel).hide()
+      @calibration_panel.find(@grading_text_sel).show()
+      @grading_panel.find(@grading_text_sel).show()
       @flag_student_container.show()
       @answer_unknown_container.show()
       @feedback_area.val("")
@@ -473,7 +513,7 @@ class @PeerGradingProblem
   render_calibration_feedback: (response) =>
     # display correct grade
     @calibration_feedback_panel.slideDown()
-    calibration_wrapper = $('.calibration-feedback-wrapper')
+    calibration_wrapper = @$(@calibration_feedback_wrapper_sel)
     calibration_wrapper.html("<p>The score you gave was: #{@grade}. The actual score is: #{response.actual_score}</p>")
 
     score = parseInt(@grade)
@@ -490,7 +530,7 @@ class @PeerGradingProblem
       calibration_wrapper.append("<div>Instructor Feedback: #{response.actual_feedback}</div>")
 
     # disable score selection and submission from the grading interface
-    $("input[name='score-selection']").attr('disabled', true)
+    @$("input[name='score-selection']").attr('disabled', true)
     @submit_button.hide()
     @calibration_feedback_button.show()
 
@@ -516,7 +556,7 @@ class @PeerGradingProblem
 
   setup_score_selection: (max_score) =>
     # And now hook up an event handler again
-    $("input[class='score-selection']").change @graded_callback
+    @$("input[class='score-selection']").change @graded_callback
 
   gentle_alert: (msg) =>
     @grading_message.fadeIn()