Bringing the upload page up to spec

openassessment/templates/openassessmentblock/edit/ai/oa_edit_ai_example.html

@@ -6,7 +6,7 @@
             Example Name
             <input type="text" value="{{ example.label }}">
         </label>
-        <h2 class="openassessment_ai_example_total_score">Total Score: 26 / 30</h2>
+        <h2 class="openassessment_ai_example_total_score">Total Score: -- / --</h2>
     </div>
     <div class="openassessment_ai_example_essay_wrapper">
         <textarea class="openassessment_ai_example_essay">{{ example.answer }}</textarea>
@@ -16,8 +16,8 @@
         <div class="openassessment_ai_example_scored_rubric_criterion" data-criterion=="{{ criterion.name }}">
             <label> {{ criterion.label }}
                 <select value="{{ criterion.option_selected }}" data-criterion="{{ criterion.name }}">
+                    <option value="">Not Selected</option>
                     {% for option in criterion.options %}
-                        <option value="">Not Selected</option>
                         <option class="openassessment_ai_example_criterion_option" data-criterion="{{ criterion.name }}" value="{{ option.name }}"
                         {% if option.name == criterion.option_selected %} selected {% endif %}>
                             {{ option.label }} - {{ option.points }} points

openassessment/templates/openassessmentblock/edit/ai/oa_edit_ai_example_menu_item.html

 {% load i18n %}
 {% spaceless %}
-<li class="openassessment_ai_example_menu_item is--faded" data-example="{{ example.name }}">
+<li class="openassessment_ai_example_menu_item openassessment_ai_menu_single_visibility is--faded" data-example="{{ example.name }}">
     <h2 class="openassessment_ai_example_menu_item_name">{{ example.label }}</h2>
     <div class="openassessment_ai_example_remove_button">
         <h2>Remove</h2>

openassessment/templates/openassessmentblock/edit/ai/oa_edit_example_based_assessment_tab.html

@@ -5,7 +5,7 @@
     <div id="openassessment_ai_editor_normal_editing">
         <div id="openassessment_ai_editor_instructions">
             <p>
-                Fill in the examples below. Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.
+                Example Based Assessment requires that course authors provide a number of graded responses to use as examples to base future assessments on. Use the menu on the left to navigate through the examples that you have made for this purpose, or use one of our upload features.
             </p>
         </div>
 
@@ -13,12 +13,12 @@
             <div id="openassessment_ai_menu_wrapper">
                 <div id="openassessment_ai_menu_header">
                     <div id="openassessment_ai_editor_upload_buttons">
-                        <div id="openassessment_ai_editor_upload_csv" class="openassessment_ai_editor_upload_button">
-                            Upload CSV
-                        </div>
-                        <div id="openassessment_ai_editor_upload_xml" class="openassessment_ai_editor_upload_button">
+                        <div id="openassessment_ai_editor_upload_xml" class="openassessment_ai_editor_upload_button openassessment_ai_menu_single_visibility is--faded">
                             Upload XML
                         </div>
+                        <div id="openassessment_ai_editor_upload_csv" class="openassessment_ai_editor_upload_button openassessment_ai_menu_single_visibility is--faded">
+                            Grade Real
+                        </div>
                     </div>
                     <div id="openassessment_ai_menu_title">
                         <h2>Examples</h2>
@@ -40,31 +40,30 @@
                         {% include 'openassessmentblock/edit/ai/oa_edit_ai_example.html' with example=example %}
                     {% endfor %}
                     <li id="openassessment_ai_editor_import_xml" class="is--hidden openassessment_ai_editor_single_visibility">
-                        <h2 id="openassessment_ai_editor_upload_header"> Upload from XML file </h2>
+                        <h1 id="openassessment_ai_editor_upload_header"> Upload from XML file </h1>
                         <div id="openassessment_ai_editor_upload_instructions">
-                            <p>Upload your file using this selector. Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.</p>
+                            <p>Upload your file using the selector below.  Note that the file must be a plain text file (.txt), which is formatted according to the XML specifications for ORA examples.  For more information on that specification, or to see how to download that specification from an existing course, see the documentation. </p>
                         </div>
                         <div id="openassessment_ai_editor_upload_file_upload">
                             <label>Upload XML File
                                 <input type="file">
                             </label>
                         </div>
-                        <ol class="openassessment_ai_editor_file_status">
-                            <li class="openassessment_ai_editor_file_status_importing">Import File</li>
-                            <li class="openassessment_ai_editor_file_status_importing">Parse File</li>
-                            <li class="openassessment_ai_editor_file_status_importing">Verify Rubric</li>
-                            <li class="openassessment_ai_editor_file_status_importing">Ready for Import</li>
-                        </ol>
                         <textarea id="ai_training_examples">{{ assessments.example_based_assessment.examples }}</textarea>
                         <div id="openassessment_ai_editor_upload_warning">
-                            <p>Upload your file using this selector. Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.  Lorem ipsum dolce decorum est.</p>
+                            <p>Warning!  Danger!  If you upload your XML here, it will overwrite the existing definitions!  Make sure that your Rubric is properly assembled before pressing confirm!  It is recommended that you save your work before you upload any Examples for AI Assessment!</p>
                         </div>
-                        <div id="openassessment_ai_editor_sub_modal_buttons">
-                            <div id="openassessment_ai_editor_sub_modal_save">Confirm</div>
-                            <div id="openassessment_ai_editor_sub_modal_cancel">Cancel</div>
+                        <div id="openassessment_ai_editor_upload_action_buttons">
+                            <div id="openassessment_ai_editor_upload_save">Confirm</div>
+                            <div id="openassessment_ai_editor_upload_cancel">Cancel</div>
                         </div>
                     </li>
 
+                    <li id="openassessment_ai_editor_import_csv" class="is--hidden openassessment_ai_editor_single_visibility">
+                        <h1>Just Kidding</h1>
+                        <p> No Support for basing Example Based Grading off of real student submissions. <bold>YET!</bold></p>
+                    </li>
+
                     <li id="openassessment_ai_example_editor_background" class="openassessment_ai_editor_single_visibility">
                         <h1>No Example Selected</h1>
                         <p>Select an example at the side to edit it in this space. Alternatively, you can create new training examples or import them from an XML document.</p>

openassessment/templates/openassessmentblock/edit/oa_edit.html

@@ -7,7 +7,7 @@
         <div id="openassessment_editor_header">
             <h6 id="oa_editor_window_title" class="title modal_window_title" >{% trans "Open Response Assessment" %}</h6>
             <ul class="editor_modes action_list action_modes editor_tabs">
-                <li id="oa_editor_tab_ai" class="view-button oa_editor_tab {% if not assessments.example_based_assessment %} is--hidden{% endif %}"><a href="#oa_ai_editor_wrapper">{% trans "AI" %}</a></li>
+                <li id="oa_editor_tab_ai" class="view-button oa_editor_tab {% if not assessments.example_based_assessment %} is--hidden{% endif %}"><a href="#oa_ai_editor_wrapper">{% trans "Examples" %}</a></li>
                 <li class="view-button oa_editor_tab"><a href="#oa_settings_editor_wrapper">{% trans "Settings" %}</a></li>
                 <li class="view-button oa_editor_tab"><a href="#oa_rubric_editor_wrapper">{% trans "Rubric" %}</a></li>
                 <li class="view-button oa_editor_tab"><a href="#oa_prompt_editor_wrapper">{% trans "Prompt" %}</a></li>

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

@@ -611,7 +611,7 @@ OpenAssessment.TrainingExample.prototype = {
 };
 
 OpenAssessment.AIExample = function(element){
-    this.element = element;
+    this.element = $(element).addClass('is--hidden');
     this.labelSel = $('.openassessment_ai_example_label_field', this.element).find('input').first();
     this.answer = $('.openassessment_ai_example_essay', this.element).first();
     this.criteria = $(".openassessment_ai_example_criterion_option", this.element);
@@ -731,7 +731,7 @@ OpenAssessment.AIExampleMenuItem.prototype = {
             );
             OpenAssessment.ItemUtilities.addClassToAllButOne(
                 $(view.element).closest('#openassessment_ai_editor_menu_and_editor'),
-                '.openassessment_ai_example_menu_item',
+                '.openassessment_ai_menu_single_visibility',
                 '.openassessment_ai_example_menu_item[data-example="' + exampleName + '"]',
                 'is--faded'
             );
@@ -739,7 +739,13 @@ OpenAssessment.AIExampleMenuItem.prototype = {
     },
 
     removeHandler: function() {
-        $('.openassessment_ai_example[data-example="'+ $(this.element).attr('data-example') +'"]').remove();
+        var pairedExample = $('.openassessment_ai_example[data-example="'+ $(this.element).attr('data-example') +'"]');
+        var lastExample = $('.openassessment_ai_example', $(pairedExample).parent()).length == 1;
+        var currentlySelected = ! $(pairedExample).hasClass('is--hidden');
+        if (lastExample || currentlySelected){
+            $('#openassessment_ai_example_editor_background', $(pairedExample).parent()).removeClass('is--hidden');
+        }
+        $(pairedExample).remove();
     },
 
     getFieldValues: function () {},

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

@@ -24,6 +24,37 @@ OpenAssessment.EditAIView = function(element) {
         }
     );
     this.exampleMenuContainer.addEventListeners();
+
+    $("#openassessment_ai_editor_upload_xml", this.element).click(function() {
+        OpenAssessment.ItemUtilities.addClassToAllButOne(
+            $(this).closest("#openassessment_ai_editor_menu_and_editor"),
+            '.openassessment_ai_editor_single_visibility',
+            '#openassessment_ai_editor_import_xml',
+            'is--hidden'
+        );
+        OpenAssessment.ItemUtilities.addClassToAllButOne(
+            $(this).closest("#openassessment_ai_editor_menu_and_editor"),
+            '.openassessment_ai_menu_single_visibility',
+            '#openassessment_ai_editor_upload_xml',
+            'is--faded'
+        );
+    });
+
+    $("#openassessment_ai_editor_upload_csv", this.element).click(function() {
+        OpenAssessment.ItemUtilities.addClassToAllButOne(
+            $(this).closest("#openassessment_ai_editor_menu_and_editor"),
+            '.openassessment_ai_editor_single_visibility',
+            '#openassessment_ai_editor_import_csv',
+            'is--hidden'
+        );
+        OpenAssessment.ItemUtilities.addClassToAllButOne(
+            $(this).closest("#openassessment_ai_editor_menu_and_editor"),
+            '.openassessment_ai_menu_single_visibility',
+            '#openassessment_ai_editor_upload_csv',
+            'is--faded'
+        );
+    });
+
 };
 
 

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

@@ -552,6 +552,7 @@ OpenAssessment.EditExampleBasedAssessmentView = function(element) {
     $("#include_ai_assessment", this.element).click(function() {
         $('#oa_editor_tab_ai').toggleClass('is--hidden');
     });
+
 };
 
 OpenAssessment.EditExampleBasedAssessmentView.prototype = {
@@ -608,7 +609,7 @@ OpenAssessment.EditExampleBasedAssessmentView.prototype = {
 
     **/
     exampleDefinitions: function(xml) {
-        var sel = $("#ai_training_examples", this.element);
+        var sel = $("#ai_training_examples");
         return OpenAssessment.Fields.stringField(sel, xml);
     },
 

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -379,17 +379,6 @@
     height: 40px;
   }
 
-  #ai_training_examples{
-    margin: 5px 20px 10px 10px;
-    height: 300px;
-    width: Calc(100% - 20px);
-    resize: none;
-    font: inherit;
-    line-height: 110%;
-    font-size: 80%;
-    padding: 5px 10px;
-  }
-
   .openassessment_assessment_module_settings_editor{
     padding: 0 15px 0 0;
     margin: 10px;
@@ -1194,8 +1183,6 @@
     border-bottom: 1px solid #838486;
 
     .openassessment_ai_editor_upload_button{
-      background-color: white;
-      color: #009fe6;
       display: inline-block;
       padding: 3px 0;
       border-radius: 5px;
@@ -1207,6 +1194,12 @@
       cursor: pointer;
     }
 
+    .openassessment_ai_editor_upload_button.is--faded{
+      background-color: white;
+      color: #009fe6;
+    }
+
+    .openassessment_ai_editor_upload_button,
     .openassessment_ai_editor_upload_button:hover{
       color: white;
       background-color: #009fe6
@@ -1362,35 +1355,79 @@
       height: 100%;
       width: 100%;
       padding: 10px;
-      #openassessment_ai_editor_sub_modal_instructions{
-        font-size: 80%;
+      #openassessment_ai_editor_upload_header{
+        margin: 0 10px;
+      }
 
+      #openassessment_ai_editor_upload_instructions{
+        font-size: 80%;
+        margin: 10px;
       }
-      #openassessment_ai_editor_file_upload{
-        text-align: center
+      #openassessment_ai_editor_upload_file_upload{
+        text-align: center;
+        margin: 10px;
         input{
           padding-left: 40px;
         }
       }
-      #openassessment_ai_editor_file_status{
-        padding-left: 35%;
-        padding-top: 20px;
-        li:before{
-          font-family: FontAwesome;
-          content: '\f021';
-          display: inline-block;
-        }
+
+      #ai_training_examples{
+        margin: 5px 20px 10px 10px;
+        height: Calc(100% - 325px);
+        width: Calc(100% - 20px);
+        resize: none;
+        font: inherit;
+        line-height: 150%;
+        font-size: 80%;
+        padding: 5px 10px;
+      }
+
+      #openassessment_ai_editor_upload_warning p{
+        border: 1px solid grey;
+        padding: 5px;
+        margin: 10px;
+        padding-left: 35px;
+        font-size: 80%;
+      }
+
+      #openassessment_ai_editor_upload_warning:before{
+        font-family: FontAwesome;
+        content: "\f071";
+        display: inline-block;
+        color: #626364;
+        float: left;
+        height: 0;
+        width: 0;
+        padding-left: 20px;
+        padding-top: 7.5px;
       }
-      #openassessment_ai_editor_sub_modal_buttons{
+
+      #openassessment_ai_editor_upload_action_buttons{
+        position: absolute;
+        bottom: 8px;
+
         div{
           display: inline-block;
           padding: 5px 10px;
           border-radius: 5px;
           margin: 10px;
+          color: #009FE6;
+        }
+
+        #openassessment_ai_editor_upload_save{
+          background-color: #009FE6;
+          color: white;
+          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,0 1px 1px rgba(0, 0, 0, 0.15);
         }
       }
     }
 
+    #openassessment_ai_editor_import_csv{
+      text-align: center;
+      padding: 20%;
+      height: 100%;
+    }
+
     #openassessment_ai_examples{
       height: 100%;
       width: 100%;
@@ -1416,6 +1453,7 @@
         display: inline-block;
         float: right;
         padding: 3px 5% 10px 0;
+        width: 30%;
       }
     }
     .openassessment_ai_example_essay_wrapper{