Add popup when flag box is checked

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

@@ -184,6 +184,7 @@ class @PeerGradingProblem
     @grading_message.hide()
     @question_header = $('.question-header')
     @question_header.click @collapse_question
+    @flag_submission_confirmation = $('.flag-submission-confirmation')
 
     @grading_wrapper =$('.grading-wrapper')
     @calibration_feedback_panel = $('.calibration-feedback')
@@ -235,9 +236,13 @@ class @PeerGradingProblem
       @calibration_interstitial_page.hide()
       @is_calibrated_check()
 
+    @flag_student_checkbox.click =>
+      @flag_box_checked()
+
     @calibration_feedback_button.hide()
     @calibration_feedback_panel.hide()
     @error_container.hide()
+    @flag_submission_confirmation.hide()
 
     @is_calibrated_check()
 
@@ -285,6 +290,10 @@ class @PeerGradingProblem
   #
   ##########
 
+  flag_box_checked: () =>
+    if @flag_student_checkbox.is(':checked')
+      $( ".flag-submission-confirmation" ).dialog()
+
   # called after we perform an is_student_calibrated check
   calibration_check_callback: (response) =>
     if response.success

lms/templates/peer_grading/peer_grading_problem.html

@@ -43,8 +43,8 @@
           <p>Please include some written feedback as well.</p>
           <textarea name="feedback" placeholder="Feedback for student"
                     class="feedback-area" cols="70" ></textarea>
-          <div class="flag-student-container"> <input type="checkbox" class="flag-checkbox" value="student_is_flagged"> Flag this submission for review by course staff (use if the submission contains inappropriate content) </div>
-          <div class="answer-unknown-container"> <input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown"> I do not know how to grade this question </div>
+          <div class="flag-student-container"> This submission has explicit or pornographic content : <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"></div>
         </div>
           
 
@@ -82,6 +82,14 @@
         <input type="button" class="calibration-interstitial-page-button" value="Start learning to grade" name="calibration-interstitial-page-button" />
     </section>
 
-    <input type="button" value="Go Back" class="action-button" name="back" />
+    <!-- Flag submission confirmation dialog -->
+    <section class="flag-submission-confirmation">
+        <h4> Are you sure that you want to flag this submission?</h4>
+        <br/>
+        Please only flag explicit or pornographic content.
+    </section>
+
+
+        <input type="button" value="Go Back" class="action-button" name="back" />
     </div>
 </section>