Adding in templates for rendering of Student Training Examples.

openassessment/templates/openassessmentblock/edit/oa_edit_training.html

@@ -3,7 +3,7 @@
 <div class="openassessment_assessment_module_settings_editor" id="oa_student_training_editor">
     <div class = "openassessment_inclusion_wrapper">
         <input type="checkbox" id="include_student_training"
-                {% if assessments.student_training %} checked="true" {% endif %}>
+                {% if assessments.student_training %} checked="true" {% endif %} >
         <label for="include_student_training">{% trans "Step: Student Training" %}</label>
     </div>
     <div class = "openassessment_assessment_module_editor">
@@ -16,7 +16,56 @@
             <p class="openassessment_description">
                 {% trans "Enter one or more sample responses that you've created, together with the scores you would give those responses. Be sure to format the responses and scores according to the placeholder text below." %}
             </p>
-            <textarea id="student_training_examples">{{ assessments.student_training.examples }}</textarea>
+            <ol>
+                <li class="openassessment_training_example is-collapsible">
+
+                    <div class="openassessment_training_example_header view-outline">
+                        <a class="action expand-collapse collapse">
+                            <i class="icon-caret-down ui-toggle-expansion"></i>
+                        </a>
+                        <h6 class="openassessment_training_example_header_title">
+                            {% blocktrans %} Scored Response {% endblocktrans %}
+                        </h6>
+                        <div class="openassessment_training_example_remove">
+                            <h2>{% trans "Remove" %}</h2>
+                        </div>
+                    </div>
+
+                    <div class="openassessment_training_example_body">
+                        <div class="openassessment_training_example_scored_rubric wrapper-comp-settings">
+                            <h2>{% trans "Scored Rubric" %}</h2>
+                            <ol class="openassessment_training_example_criteria_selections list-input settings-list">
+
+                                {% for criterion in criteria %}
+                                <li class="field comp-setting-entry">
+                                    <div class="wrapper-comp-setting">
+                                        <label class="openassessment_training_example_criterion_name setting-label">
+                                            <h2>{{criterion.name}}</h2>
+                                        </label>
+                                        <select class="openassessment_training_example_criterion_option setting-input">
+                                            <option value="Not Scored">{% trans "Not Scored" %}</option>
+                                            {% for option in criterion.options %}
+                                                <option value={{option.name}}>{{option.name}} - {{option.points}} {% trans "points" %}</option>
+                                            {% endfor %}
+                                        </select>
+                                    </div>
+                                </li>
+                                {% endfor %}
+                            </ol>
+                        </div>
+                        <div class="openassessment_training_example_essay_wrapper">
+                            <h2>
+                                {% trans "Response" %}
+                            </h2>
+                            <textarea class="openassessment_training_example_essay"></textarea>
+                        </div>
+                    </div>
+                </li>
+            </ol>
+            <div>
+                <h2 class='openassessment_add_training_example'>{% trans "Add Scored Response" %}</h2>
+            </div>
+
         </div>
     </div>
 </div>

openassessment/xblock/static/css/openassessment.css

@@ -2384,7 +2384,7 @@ hr.divider,
   #openassessment-editor #oa_rubric_editor_wrapper .openassessment_large_text_input, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper textarea, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_line_input textarea {
     height: 70px;
     width: 70%; }
-  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_input_styling, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_large_text_input, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper textarea, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_line_input textarea {
+  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_input_styling, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_large_text_input, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper textarea, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_line_input textarea, #openassessment-editor #oa_rubric_editor_wrapper #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_essay_wrapper textarea, #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_essay_wrapper #openassessment-editor #oa_rubric_editor_wrapper textarea {
     resize: none;
     box-sizing: border-box;
     border: 1px solid #b2b2b2;
@@ -2396,16 +2396,16 @@ hr.divider,
     font-size: 11px;
     color: #4c4c4c;
     outline: 0; }
-  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_rubric_remove_button, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_remove, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header .openassessment_option_header_remove {
+  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_rubric_remove_button, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_remove, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header .openassessment_option_header_remove, #openassessment-editor #oa_rubric_editor_wrapper #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header .openassessment_training_example_remove, #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header #openassessment-editor #oa_rubric_editor_wrapper .openassessment_training_example_remove {
     margin: 0 5px;
     float: right; }
-    #openassessment-editor #oa_rubric_editor_wrapper .openassessment_rubric_remove_button h2:after, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_remove h2:after, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header .openassessment_option_header_remove h2:after {
+    #openassessment-editor #oa_rubric_editor_wrapper .openassessment_rubric_remove_button h2:after, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_remove h2:after, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header .openassessment_option_header_remove h2:after, #openassessment-editor #oa_rubric_editor_wrapper #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header .openassessment_training_example_remove h2:after, #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header #openassessment-editor #oa_rubric_editor_wrapper .openassessment_training_example_remove h2:after {
       font-family: FontAwesome;
       content: "\f00d";
       display: inline-block;
       color: inherit;
       margin: 0 5px; }
-    #openassessment-editor #oa_rubric_editor_wrapper .openassessment_rubric_remove_button h2, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_remove h2, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header .openassessment_option_header_remove h2 {
+    #openassessment-editor #oa_rubric_editor_wrapper .openassessment_rubric_remove_button h2, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_remove h2, #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header .openassessment_option_header_remove h2, #openassessment-editor #oa_rubric_editor_wrapper #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header .openassessment_training_example_remove h2, #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header #openassessment-editor #oa_rubric_editor_wrapper .openassessment_training_example_remove h2 {
       text-transform: uppercase;
       font-size: 80%;
       float: right;
@@ -2452,6 +2452,66 @@ hr.divider,
   height: 470px !important;
   background-color: #e5e5e5; }
 
+#student_training_settings_editor .openassessment_training_example .openassessment_training_example_header {
+  margin: 10px;
+  padding: 5px;
+  border-bottom: 1px solid #414243;
+  overflow: auto; }
+  #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header .action.expand-collapse {
+    float: left; }
+    #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header .action.expand-collapse .ui-toggle-expansion .icon-caret-down:before {
+      color: #414243; }
+  #student_training_settings_editor .openassessment_training_example .openassessment_training_example_header .openassessment_training_example_header_title {
+    text-transform: uppercase;
+    width: 50%;
+    display: inline-block;
+    float: left; }
+#student_training_settings_editor .openassessment_training_example .openassessment_training_example_body {
+  padding: 0 15px; }
+  #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_essay_wrapper {
+    width: 60%; }
+    #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_essay_wrapper textarea {
+      margin: 5px 15px 0 10px;
+      width: Calc(100% - 25px); }
+  #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_scored_rubric {
+    width: 40%;
+    display: inline-block;
+    float: right; }
+    #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_scored_rubric .openassessment_training_example_criteria_selections .comp-setting-entry {
+      margin: 0;
+      padding: 7.5px 5px; }
+      #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body .openassessment_training_example_scored_rubric .openassessment_training_example_criteria_selections .comp-setting-entry select {
+        width: 60%;
+        float: right; }
+#student_training_settings_editor .openassessment_training_example .openassessment_add_training_example {
+  color: #009fe6;
+  margin-left: 10px; }
+  #student_training_settings_editor .openassessment_training_example .openassessment_add_training_example :before {
+    font-family: "FontAwesome";
+    display: inline-block;
+    margin-left: 5px;
+    margin-right: 10px;
+    width: auto;
+    height: auto;
+    content: "\f067"; }
+#student_training_settings_editor .openassessment_training_example.collapsed .openassessment_training_example_body {
+  display: none; }
+#student_training_settings_editor .openassessment_training_example.collapsed .openassessment_training_example_header .action.expand-collapse {
+  float: left; }
+  #student_training_settings_editor .openassessment_training_example.collapsed .openassessment_training_example_header .action.expand-collapse .ui-toggle-expansion {
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    transform-origin: 50% 50%; }
+    #student_training_settings_editor .openassessment_training_example.collapsed .openassessment_training_example_header .action.expand-collapse .ui-toggle-expansion .icon-caret-down:before {
+      color: #009fe6; }
+
 .openassessment .self-assessment__display__header, .openassessment .peer-assessment__display__header, .openassessment .step__header {
   margin-bottom: 0 !important;
   border-radius: 0 !important;

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

@@ -668,3 +668,96 @@
   background-color: #e5e5e5;
 }
 
+
+#student_training_settings_editor{
+
+  .openassessment_training_example{
+    .openassessment_training_example_header{
+      margin: 10px;
+      padding: 5px;
+      border-bottom: 1px solid $edx-gray-d3;
+      overflow: auto;
+      .action.expand-collapse {
+        float: left;
+        .ui-toggle-expansion {
+          .icon-caret-down:before{
+            color: $edx-gray-d3;
+          }
+        }
+      }
+      .openassessment_training_example_header_title {
+        text-transform: uppercase;
+        width: 50%;
+        display: inline-block;
+        float: left;
+      }
+
+      .openassessment_training_example_remove {
+        @extend .openassessment_rubric_remove_button;
+      }
+
+    }
+
+    .openassessment_training_example_body {
+      padding: 0 15px;
+      .openassessment_training_example_essay_wrapper {
+        width: 60%;
+        textarea {
+          @extend .openassessment_input_styling;
+          margin: 5px 15px 0 10px;
+          width: Calc(100% - 25px);
+        }
+      }
+
+      .openassessment_training_example_scored_rubric {
+        width: 40%;
+        display: inline-block;
+        float: right;
+        .openassessment_training_example_criteria_selections {
+          .comp-setting-entry {
+            margin: 0;
+            padding: 7.5px 5px;
+            select {
+              width: 60%;
+              float: right;
+
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .openassessment_add_training_example{
+    :before{
+      font-family: "FontAwesome";
+      display: inline-block;
+      margin-left: 5px;
+      margin-right: 10px;
+      width: auto;
+      height: auto;
+      content: "\f067";
+    }
+    color: #009fe6;
+    margin-left: 10px;
+  }
+  .openassessment_training_example.collapsed{
+    .openassessment_training_example_body{
+      display: none;
+    }
+    .openassessment_training_example_header{
+      .action.expand-collapse {
+        float: left;
+        .ui-toggle-expansion {
+          @include transform(rotate(-90deg));
+          @include transform-origin(50% 50%);
+          .icon-caret-down:before{
+            color: #009fe6;
+          }
+        }
+      }
+    }
+  }
+
+}
+