Skip to content

E
edx-ora2
Commit 5e7d1e68 by gradyward
Options

Adding in templates for rendering of Student Training Examples.

parent 86a5d3be
Showing with 208 additions and 6 deletions
openassessment/templates/openassessmentblock/edit/oa_edit_training.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="openassessment_assessment_module_settings_editor" id="oa_student_training_editor"> <div class="openassessment_assessment_module_settings_editor" id="oa_student_training_editor">
<div class = "openassessment_inclusion_wrapper"> <div class = "openassessment_inclusion_wrapper">
<input type="checkbox" id="include_student_training" <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> <label for="include_student_training">{% trans "Step: Student Training" %}</label>
</div> </div>
<div class = "openassessment_assessment_module_editor"> <div class = "openassessment_assessment_module_editor">
...@@ -16,7 +16,56 @@ ...@@ -16,7 +16,56 @@
<p class="openassessment_description"> <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." %} {% 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> </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> </div>
</div> </div>
......
openassessment/xblock/static/css/openassessment.css
...@@ -2384,7 +2384,7 @@ hr.divider, ...@@ -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 { #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; height: 70px;
width: 70%; } 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; resize: none;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
...@@ -2396,16 +2396,16 @@ hr.divider, ...@@ -2396,16 +2396,16 @@ hr.divider,
font-size: 11px; font-size: 11px;
color: #4c4c4c; color: #4c4c4c;
outline: 0; } 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; margin: 0 5px;
float: right; } 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; font-family: FontAwesome;
content: "\f00d"; content: "\f00d";
display: inline-block; display: inline-block;
color: inherit; color: inherit;
margin: 0 5px; } 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; text-transform: uppercase;
font-size: 80%; font-size: 80%;
float: right; float: right;
...@@ -2452,6 +2452,66 @@ hr.divider, ...@@ -2452,6 +2452,66 @@ hr.divider,
height: 470px !important; height: 470px !important;
background-color: #e5e5e5; } 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 { .openassessment .self-assessment__display__header, .openassessment .peer-assessment__display__header, .openassessment .step__header {
margin-bottom: 0 !important; margin-bottom: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -668,3 +668,96 @@ ...@@ -668,3 +668,96 @@
background-color: #e5e5e5; 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;
}
}
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment