Skip to content

E
edx-ora2
Commit 421ad263 by gradyward Committed by Will Daly
Options

A first pass at the HTML. I didn't remove the previous text box to allow me to… 

A first pass at the HTML.  I didn't remove the previous text box to allow me to still have all of the JS work properly, and the page render.  FRONT --> BACK Lets go!
parent 061a4d93
Showing with 390 additions and 7 deletions
openassessment/templates/openassessmentblock/oa_edit.html
......@@ -17,7 +17,126 @@
</div>
<div id="oa_rubric_editor_wrapper" class="oa_editor_content_wrapper">
<textarea id="openassessment_rubric_editor"></textarea>
<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."%}
</p>
</div>
<ul id="openassessment_criterion_list" >
<li class="openassessment_criterion" id="openassessment_criterion_1">
<div class="openassessment_criterion_header" id="openassessment_criterion_header_1">
<input class="openassessment_display_criterion>" id="openassessment_display_criterion_1" type="checkbox" checked="1">
<label class="openassessment_criterion_header_title" for="openassessment_display_criterion_1">
{% trans "Criterion C-C-C"%}
</label>
<div class="openassessment_rubric_remove_button" id="openassessment_criterion_1_remove">
<h2>{% trans "Remove" %}</h2>
</div>
</div>
<div class="openassessment_criterion_body" id="openassessment_criterion_body_1">
<div class="openassessment_line_input">
<label for="openassessment_criterion_1_name" class="openassessment_criterion_name_label">
{% trans "Criterion Name"%}
</label>
<input id="openassessment_criterion_1_name" class="openassessment_criterion_name" type="text">
</div>
<div class="openassessment_line_input">
<label for="openassessment_criterion_1_prompt" class="openassessment_criterion_prompt_label">
{% trans "Criterion Prompt"%}
</label>
<textarea id="openassessment_criterion_1_prompt" class="openassessment_criterion_prompt"></textarea>
</div>
<ul id="openassessment_criterion_1_options" class="openassessment_criterion_option_list">
<li id=openassessment_criterion_1_option_1 class="openassessment_criterion_option">
<div class="openassessment_option_header">
<span class="openassessment_option_header_title">
{% trans "Option O-O-O" %}
</span>
<div class="openassessment_rubric_remove_button" id="openassessment_criterion_1_option_1_remove">
<h2>{% trans "Remove" %}</h2>
</div>
</div>
<div class="openasssessment_line_input openassessment_criterion_option_point_wrapper">
<label for="openassessment_criterion_1_option_1_points" class="openassessment_criterion_option_points_label">
{% trans "Option Points"%}
</label>
<input id="openassessment_criterion_1_option_1_points" class="openassessment_criterion_option_points" type="number">
</div>
<div class="openasssessment_line_input openassessment_criterion_option_name_wrapper">
<label for="openassessment_criterion_1_option_1_name" class="openassessment_criterion_option_name_label">
{% trans "Option Name"%}
</label>
<input id="openassessment_criterion_1_option_1_name" class="openassessment_criterion_option_name" type="text">
</div>
<div class="openasssessment_line_input openassessment_criterion_option_explanation_wrapper">
<label for="openassessment_criterion_1_option_1_explanation" class="openassessment_criterion_option_explanation_label">
{% trans "Option Explanation"%}
</label>
<textarea id="openassessment_criterion_1_option_1_explanation" class="openassessment_criterion_option_explanation"></textarea>
</div>
</li>
</ul>
<div id="openassessment_criterion_1_add_option" class="openassessment_criterion_add_option openassessment_option_header">
<h2>{% trans "Add Another Option"%}</h2>
</div>
<hr>
<div id="openassessment_criterion_1_feedback_wrapper" class="openassessment_criterion_feedback_wrapper">
<div class="openassessment_criterion_feedback_header">
<span class="openassessment_criterion_feedback_header_open">{% trans "Criterion Feedback" %}</span>
<span class="openassessment_criterion_feedback_header_closed">{% trans "Add Criterion Feedback" %}</span>
<div class="openassessment_rubric_remove_button openassessment_feedback_remove_button" id="openassessment_criterion_1_feedback_remove">
<h2>{% trans "Remove" %}</h2>
</div>
</div>
<div class="openassessment_line_input openassessment_criterion_feedback_direction">
<label for="openassessment_criterion_feedback">
{% trans "Feedback Direction" %}
</label>
<textarea id="openassessment_criterion_feedback" class="openassessment_criterion_feedback"></textarea>
</div>
</div>
</div>
</li>
</ul>
<div id="openassessment_rubric_add_criterion">
<h2>
{% trans "Add Another Criterion"%}
</h2>
</div>
<div id="openassessment_rubric_feedback_wrapper">
<div id="openassessment_rubric_feedback_header">
<span>
{% trans "Rubric Feedback" %}
</span>
<div class="openassessment_rubric_remove_button" id="openassessment_rubric_direction_remove">
<h2>{% trans "Remove" %}</h2>
</div>
</div>
<div class="openassessment_line_input">
<label for="openassessment_rubric_feedback">
{% trans "Feedback Direction" %}
</label>
<textarea id="openassessment_rubric_feedback"></textarea>
</div>
</div>
<div id="openassessment_make_invisible">
<textarea id="openassessment_rubric_editor"></textarea>
</div>
</div>
<div id="oa_settings_editor_wrapper" class="oa_editor_content_wrapper">
......@@ -57,7 +176,6 @@
<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>
<label for="student_training_examples">{% trans "Student Training Responses" %}</label>
<textarea id="student_training_examples"></textarea>
</div>
</div>
......@@ -75,11 +193,11 @@
{% trans "Specify the following values for the peer assessment step. The numeric grading requirements must be given a value." %}
</p>
<div class="openassessment_indent_line_input">
<label for="peer_assessment_must_grade">{% trans "Each student must assess X peer responses" %}</label>
<label for="peer_assessment_must_grade" class="openassessment_peer_fixed_width">{% trans "Each student must assess X peer responses" %}</label>
<input id="peer_assessment_must_grade" class="openassessment_number_field" type="text">
</div>
<div class="openassessment_indent_line_input">
<label for="peer_assessment_graded_by"> {% trans "Each response must be assessed by at least X students" %}</label>
<label for="peer_assessment_graded_by" class="openassessment_peer_fixed_width"> {% trans "Each response must be assessed by at least X students" %}</label>
<input id="peer_assessment_graded_by" class="openassessment_number_field" type="text">
</div>
<div class="openassessment_due_date_editor">
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -182,7 +182,7 @@
.openassessment_editor_content_and_tabs {
width: 100%;
height: 370px;
height: 373px;
}
#openassessment_editor_header{
......@@ -207,7 +207,9 @@
.oa_editor_content_wrapper {
height: 100%;
width: 100%;
padding: ($baseline-v/4) ($baseline-h/4);
border-radius: 4px;
border: 1px solid $edx-gray-d3;
background-color: #f5f5f5;
}
#openassessment_prompt_editor {
......@@ -215,11 +217,14 @@
height: 100%;
resize: none;
border: none;
border-radius: 4px;
padding: 10px;
}
#openassessment_rubric_editor {
width: 100%;
height: 100%;
display: none;
}
#oa_basic_settings_editor {
......@@ -238,7 +243,7 @@
}
#openassessment_step_select_description{
margin: 10px 0;
padding: 10px;
}
.openassessment_assessment_module_settings_editor{
......@@ -252,6 +257,11 @@
}
#oa_settings_editor_wrapper {
padding: 0 10px;
overflow-y: scroll;
}
#oa_rubric_editor_wrapper{
overflow-y: scroll;
}
......@@ -272,6 +282,11 @@
width: 25px;
}
.openassessment_peer_fixed_width{
width: 45%;
display: inline-block;
}
.openassessment_description_closed{
@extend .openassessment_description;
}
......@@ -357,9 +372,259 @@
clear: both;
}
#oa_rubric_editor_wrapper{
#openassessment_rubric_instructions{
background-color: $edx-gray-l2;
border-bottom: 1px solid $edx-gray-d3;
padding: 10px;
}
.openassessment_criterion {
border: 1px dashed $edx-gray-l3;
margin: 5px;
padding-bottom: 10px;
.openassessment_criterion_header {
margin: 10px;
padding: 5px;
border-bottom: 1px solid $edx-gray-d3;
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before {
font-family: "FontAwesome";
display: inline-block;
margin-right: ($baseline-h/4);
width: auto;
height: auto;
content: "\f054";
}
input[type="checkbox"]:checked + label:before {
content: "\f078";
}
.openassessment_criterion_header_title {
font-size: 125%;
text-transform: uppercase;
}
.openassessment_criterion_header_remove {
@extend .openassessment_rubric_remove_button
}
}
.openassessment_criterion_add_option {
h2:before {
font-family: FontAwesome;
content: "\f067";
display: inline-block;
margin: 0 5px;
}
background-color: $edx-gray-d1;
padding: 5px;
margin: 0px 10px 10px 10px;
border-radius: 3px;
}
.openassessment_criterion_feedback_wrapper{
.openassessment_criterion_feedback_header {
background-color: $edx-gray-l2;
padding: 5px;
margin: 10px;
border-radius: 3px;
.openassessment_criterion_feedback_header_closed:before{
font-family: "FontAwesome";
display: inline-block;
margin-right: 10px;
margin-left: 5px;
width: auto;
height: auto;
content: "\f067";
}
}
.openassessment_criterion_feedback_direction{
label{
margin-left: 15px;
}
}
}
}
.openassessment_criterion_option{
padding: 5px;
.openassessment_option_header{
background-color: $edx-gray-l2;
padding: 5px;
margin: 5px 5px 8px 5px;
border-radius: 3px;
.openassessment_option_header_remove{
@extend .openassessment_rubric_remove_button
}
}
.openassessment_criterion_option_point_wrapper{
width: 30%;
float: left;
padding: 0 10px;
label{
width: 62.5%
}
input{
width: 40px;
@extend .openassessment_input_styling
}
}
.openassessment_criterion_option_name_wrapper{
width: 70%;
float: right;
label{
width: 40%;
padding-right: 10px;
}
input{
width: 60%;
}
}
.openassessment_criterion_option_explanation_wrapper{
padding: 15px 5px 0px 5px;
width: 100%;
display: inline-block;
label{
width: 30%;
text-align: left;
padding-left:15px;
}
textarea{
@extend .openassessment_large_text_input;
width: 70%;
float: right;
}
}
}
.openassessment_line_input{
padding: 10px;
overflow: auto;
label{
width: 30%;
text-align: left;
}
input{
width:70%;
min-width: auto;
float: right;
}
textarea{
width:70%;
float:right;
@extend .openassessment_large_text_input
}
}
.openassessment_large_text_input{
height: 70px;
width: 70%;
@extend .openassessment_input_styling;
}
.openassessment_input_styling{
resize: none;
box-sizing: border-box;
border: 1px solid #b2b2b2;
border-radius: 2px;
padding: 6px 8px 8px;
background-color: #f2f2f2;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #4c4c4c;
outline: 0;
}
.openassessment_rubric_remove_button{
h2:after{
font-family: FontAwesome;
content: "\f00d";
display: inline-block;
color: inherit;
margin: 0 5px;
}
h2{
text-transform: uppercase;
font-size: 80%;
float: right;
display: inline-block;
}
margin: 0 5px;
float: right;
}
#openassessment_rubric_feedback_wrapper{
padding: 0 10px;
#openassessment_rubric_feedback_header{
margin-top: 10px;
border-bottom: 1px solid $edx-gray-d3;
font-size: 125%;
padding: 10px;
padding-right: 20px;
}
}
#openassessment_rubric_add_criterion{
font-size: 125%;
h2:before{
font-family: "FontAwesome";
display: inline-block;
margin-left: 5px;
margin-right: 10px;
width: auto;
height: auto;
content: "\f067";
}
background-color: $edx-gray-d1;
padding: 10px;
margin: 10px, 0;
}
}
hr{
background-color: transparent;
color: $edx-gray-d3;
height: 1px;
border: 0px;
clear: both;
}
}
#openassessment_make_invisible{
display: none;
}
.modal-content {
height: 470px !important;
background-color: #e5e5e5;
}
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