WIP: Alert funcitonality for Rubric/Settings crossvalidation

openassessment/templates/openassessmentblock/edit/oa_edit_rubric.html

@@ -9,6 +9,14 @@
         {% include "openassessmentblock/edit/oa_edit_option.html" with option_name="" option_label="" option_points=1 option_explanation="" %}
     </div>
 
+    <div id="openassessment_rubric_validation_alert" class="is--hidden">
+        <i class="openassessment_alert_icon"></i>
+        <div class="openassessment_alert_header">
+            <h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>
+            <p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix areas highlighted in red." %}</p>
+        </div>
+    </div>
+
     <div id="openassessment_rubric_instructions">
         <p class = openassessment_description>
             {% trans "For open response problems, assessment is rubric-based.  Rubric criterion have point breakdowns and explanations to help students with peer and self assessment steps. For more information on how to build your rubric, see our online help documentation."%}

openassessment/xblock/static/js/src/studio/oa_edit_rubric.js

@@ -12,6 +12,7 @@ OpenAssessment.EditRubricView = function(element) {
             containerItemClass: "openassessment_criterion",
         }
     );
+    this.alert = new OpenAssessment.ValidationAlert($('#openassessment_rubric_validation_alert', this.element));
 };
 
 OpenAssessment.EditRubricView.prototype = {
@@ -108,4 +109,54 @@ OpenAssessment.EditRubricView.prototype = {
     getCriterionItem: function(index) {
         return this.criteriaContainer.getItem(index);
     }
-};
+};
\ No newline at end of file
+
+/**
+A class which controls the validation alert which we place at the top of the rubric page after
+changes are made which will propagate to the settings section.
+
+Args:
+    element (element): The element that specifies the div that the validation consists of.
+
+Returns:
+    Openassessment.ValidationAlert
+ */
+OpenAssessment.ValidationAlert = function (element) {
+    this.element = element;
+    this.visible = false;
+    this.title = $(".openassessment_alert_title", this.element);
+    this.message = $(".openassessment_alert_message", this.element);
+};
+
+OpenAssessment.ValidationAlert.prototype = {
+
+    /**
+    Hides the alert.
+    **/
+    hide: function () {
+        this.visible = false;
+        this.element.addClass('is--hidden');
+    },
+
+    /**
+    Displays the alert.
+    **/
+    show : function () {
+        this.visible = true;
+        this.element.removeClass('is--hidden');
+    },
+
+    /**
+    Sets the message of the alert.
+    How will this work with internationalization?
+
+    Args:
+        newTitle (str): the new title that the message will have
+        newMessage (str): the new text that the message's body will contain
+    **/
+    setMessage: function (newTitle, newMessage){
+        this.title.text(newTitle);
+        this.message.text(newMessage);
+    }
+};
+