Skip to content

E
edx-platform
Commit ed159972 by Brian Talbot
Options

studio - settings: grading revamp WIP

parent 210086fe
Showing with 367 additions and 109 deletions
cms/static/client_templates/course_grade_policy.html
<li class="input input-existing multi course-grading-assignment-list-item">
<div class="row row-col2">
<label for="course-grading-assignment-name">Assignment Type Name:</label>
<div class="field">
<div class="input course-grading-assignment-name">
<input type="text" class="long"
id="course-grading-assignment-name" value="<%= model.get('type') %>">
<span class="tip tip-stacked">e.g. Homework, Labs, Midterm Exams, Final Exam</span>
</div>
</div>
</div>
<div class="row row-col2">
<label for="course-grading-shortname">Abbreviation:</label>
<div class="field">
<div class="input course-grading-shortname">
<input type="text" class="short"
id="course-grading-assignment-shortname"
value="<%= model.get('short_label') %>">
<span class="tip tip-inline">e.g. HW, Midterm, Final</span>
</div>
</div>
</div>
<div class="row row-col2">
<label for="course-grading-gradeweight">Weight of Total
Grade:</label>
<div class="field">
<div class="input course-grading-gradeweight">
<input type="text" class="short"
id="course-grading-assignment-gradeweight"
value = "<%= model.get('weight') %>">
<span class="tip tip-inline">e.g. 25%</span>
</div>
</div>
</div>
<div class="row row-col2">
<label for="course-grading-assignment-totalassignments">Total
Number:</label>
<div class="field">
<div class="input course-grading-totalassignments">
<input type="text" class="short"
id="course-grading-assignment-totalassignments"
value = "<%= model.get('min_count') %>">
<span class="tip tip-inline">total exercises assigned</span>
</div>
</div>
</div>
<div class="row row-col2">
<label for="course-grading-assignment-droppable">Number of
Droppable:</label>
<div class="field">
<div class="input course-grading-droppable">
<input type="text" class="short"
id="course-grading-assignment-droppable"
value = "<%= model.get('drop_count') %>">
<span class="tip tip-inline">total exercises that won't be graded</span>
</div>
</div>
</div>
<a href="#" class="delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
<li class="field-group course-grading-assignment-list-item">
<div class="field text" id="field-course-grading-assignment-name">
<label for="course-grading-assignment-name">Assignment Type Name</label>
<input type="text" class="long" id="course-grading-assignment-name" value="<%= model.get('type') %>" />
<span class="tip tip-stacked">e.g. Homework, Midterm Exams</span>
</div>
<div class="field text" id="field-course-grading-assignment-shortname">
<label for="course-grading-shortname">Abbreviation:</label>
<input type="text" class="short" id="course-grading-assignment-shortname" value="<%= model.get('short_label') %>" />
<span class="tip tip-inline">e.g. HW, Midterm</span>
</div>
<div class="field text" id="field-course-grading-assignment-gradeweight">
<label for="course-grading-gradeweight">Weight of Total Grade</label>
<input type="text" class="short" id="course-grading-assignment-gradeweight" value = "<%= model.get('weight') %>" />
<span class="tip tip-inline">e.g. 25%</span>
</div>
<div class="field text" id="field-course-grading-assignment-totalassignments">
<label for="course-grading-gradeweight">Total
Number</label>
<input type="text" class="short" id="course-grading-assignment-totalassignments" value = "<%= model.get('min_count') %>" />
<span class="tip tip-inline">total exercises assigned</span>
</div>
<div class="field text" id="field-course-grading-assignment-droppable">
<label for="course-grading-gradeweight">Number of
Droppable</label>
<input type="text" class="short" id="course-grading-assignment-droppable" value = "<%= model.get('drop_count') %>" />
<span class="tip tip-inline">total exercises that won't be graded</span>
</div>
<div class="actions">
<a href="#" class="delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete Assignment Type</a>
</div>
</li>
cms/static/sass/_settings.scss
......@@ -44,7 +44,7 @@ body.course.settings {
}
// UI hints/tips
// UI hints/tips/messages
.tip {
@include font-size(13);
display: block;
......@@ -52,6 +52,24 @@ body.course.settings {
color: $gray-l3;
}
.message-error {
@include font-size(13);
display: block;
margin-top: ($baseline/4);
margin-bottom: ($baseline/2);
color: $red;
}
// buttons
.remove-item {
@include white-button;
@include font-size(13);
}
.new-button {
@include font-size(13);
}
// form basics
.list-input {
margin: 0;
......@@ -103,6 +121,10 @@ body.course.settings {
&.short {
}
&.error {
border-color: $red;
}
}
textarea.long {
......@@ -133,11 +155,6 @@ body.course.settings {
.actions {
margin: ($baseline/4) 0 0 0;
.remove-item {
@include white-button;
@include font-size(13);
}
}
}
......@@ -152,6 +169,14 @@ body.course.settings {
opacity: 0.25;
}
}
// field with error
.field.error {
input, textarea {
border-color: $red;
}
}
// specific fields - basic
&.basic {
......@@ -208,7 +233,16 @@ body.course.settings {
width: flex-grid(3, 9);
margin-bottom: ($baseline/4);
margin-right: flex-gutter();
}
.field.time {
position: relative;
.tip {
position: absolute;
top: 0;
right: 0;
}
}
}
}
......@@ -237,6 +271,263 @@ body.course.settings {
width: flex-grid(3, 9);
}
}
// specific fields - grading range (artifact styling)
&.grade-range {
margin-bottom: ($baseline*3);
.grade-controls {
@include clearfix;
width: flex-grid(9,9);
}
.new-grade-button {
@include box-sizing(border-box);
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
width: flex-grid(1,9);
height: ($baseline*2);
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: flex-gutter();
border-radius: 20px;
border: 1px solid $darkGrey;
background-color: #d1dae3;
color: #6d788b;
.plus-icon {
position: absolute;
top: 50%;
left: 50%;
margin-left: -6px;
margin-top: -6px;
}
}
.grade-slider {
@include box-sizing(border-box);
width: flex-grid(8,9);
display: inline-block;
vertical-align: middle;
.grade-bar {
position: relative;
width: 100%;
height: ($baseline*2.5);
background: $lightGrey;
.increments {
position: relative;
li {
position: absolute;
top: 52px;
width: 30px;
margin-left: -15px;
font-size: 9px;
text-align: center;
&.increment-0 {
left: 0;
}
&.increment-10 {
left: 10%;
}
&.increment-20 {
left: 20%;
}
&.increment-30 {
left: 30%;
}
&.increment-40 {
left: 40%;
}
&.increment-50 {
left: 50%;
}
&.increment-60 {
left: 60%;
}
&.increment-70 {
left: 70%;
}
&.increment-80 {
left: 80%;
}
&.increment-90 {
left: 90%;
}
&.increment-100 {
left: 100%;
}
}
}
.grade-specific-bar {
height: 50px !important;
}
.grades {
position: relative;
li {
position: absolute;
top: 0;
height: 50px;
text-align: right;
@include border-radius(2px);
&:hover,
&.is-dragging {
.remove-button {
display: block;
}
}
&.is-dragging {
}
.remove-button {
display: none;
position: absolute;
top: -17px;
right: 1px;
height: 17px;
font-size: 10px;
}
&:nth-child(1) {
background: #4fe696;
}
&:nth-child(2) {
background: #ffdf7e;
}
&:nth-child(3) {
background: #ffb657;
}
&:nth-child(4) {
background: #ef54a1;
}
&:nth-child(5),
&.bar-fail {
background: #fb336c;
}
.letter-grade {
display: block;
margin: 10px 15px 0 0;
font-size: 16px;
font-weight: 700;
line-height: 14px;
}
.range {
display: block;
margin-right: 15px;
font-size: 10px;
line-height: 12px;
}
.drag-bar {
position: absolute;
top: 0;
right: -1px;
height: 50px;
width: 2px;
background-color: #fff;
@include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
cursor: ew-resize;
@include transition(none);
&:hover {
width: 6px;
right: -2px;
}
}
}
}
}
}
}
// specific fields - grading rules
&.grade-rules {
#field-course-grading-graceperiod {
width: flex-grid(3, 9);
}
}
&.assignment-types {
.list-input {
margin-bottom: ($baseline*1.5);
&:last-child {
margin-bottom: 0;
}
}
.field-group {
@include clearfix();
width: flex-grid(9, 9);
margin-bottom: ($baseline*1.5);
border-bottom: 1px solid $gray-l5;
padding-bottom: ($baseline*1.5);
&:last-child {
border: none;
padding-bottom: 0;
}
.field {
display: inline-block;
vertical-align: top;
width: flex-grid(3, 6);
margin-bottom: ($baseline/2);
margin-right: flex-gutter();
}
#field-course-grading-assignment-shortname,
#field-course-grading-assignment-totalassignments,
#field-course-grading-assignment-gradeweight,
#field-course-grading-assignment-droppable {
width: flex-grid(2, 6);
}
}
.actions {
float: left;
width: flex-grid(9, 9);
.delete-button {
margin: 0;
}
}
> .actions {
margin-top: $baseline;
border-top: 1px solid $gray-l5;
padding-top: $baseline;
}
}
}
.content-supplementary {
......
cms/templates/settings.html
......@@ -28,7 +28,7 @@ from contentstore import utils
}).blur(function() {
$("label").removeClass("is-focused");
});
var editor = new CMS.Views.Settings.Details({
el: $('.settings-details'),
model: new CMS.Models.Settings.CourseDetails(${course_details|n},{parse:true})
......@@ -53,7 +53,7 @@ from contentstore import utils
</div> -->
<article class="content-primary" role="main">
<form id="settings_details" method="post" action="">
<form id="settings_details" class="settings-details" method="post" action="">
<section class="group-settings basic">
<header>
<h2 class="title-2">Basic Information</h2>
......@@ -176,7 +176,7 @@ from contentstore import utils
</div>
<div class="input">
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off" />
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" />
<span class="tip tip-stacked">Enter your YouTube video's ID (along with any restriction parameters)</span>
</div>
</li>
......@@ -220,4 +220,4 @@ from contentstore import utils
</aside>
</section>
</div>
</%block>
</%block>
\ No newline at end of file
cms/templates/settings_graders.html
......@@ -26,11 +26,6 @@ from contentstore import utils
}).blur(function() {
$("label").removeClass("is-focused");
});
var editor = new CMS.Views.Settings.Details({
el: $('.settings-details'),
model: new CMS.Models.Settings.CourseDetails(${course_details|n},{parse:true})
});
var editor = new CMS.Views.Settings.Grading({
el: $('.settings-grading'),
......@@ -56,7 +51,7 @@ from contentstore import utils
</div> -->
<article class="content-primary" role="main">
<form id="settings_details" method="post" action="">
<form id="settings_details" class="settings-grading" method="post" action="">
<section class="group-settings grade-range">
<header>
<h2 class="title-2">Overall Grade Range</h2>
......@@ -64,7 +59,7 @@ from contentstore import utils
</header>
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<li class="field" id="field-course-grading-range">
<div class="grade-controls course-grading-range well">
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
<div class="grade-slider">
......@@ -89,51 +84,54 @@ from contentstore import utils
</div>
</li>
</ol>
<span class="tip tip-stacked">Add different overall course grading scales and drag to set their cut-off points</span>
</section>
<hr class="divide" />
<section class="group-settings">
<section class="group-settings grade-rules">
<header>
<h2 class="title-2">Grading Rules &amp; Policies</h2>
<span class="tip">Deadlines, requirements, and logistics around grading student work</span>
</header>
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<label for="course-organization">Organization</label>
<input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled" />
</li>
<li class="field text is-not-editable" id="field-course-number">
<label for="course-number">Course Number</label>
<input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
</li>
<li class="field text is-not-editable" id="field-course-name">
<label for="course-name">Course Name</label>
<input type="text" class="long" id="course-name" value="[Course Name]" disabled="disabled" />
<li class="field text" id="field-course-grading-graceperiod">
<label for="course-grading-graceperiod">Grace Period on Deadline:</label>
<input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes">
<span class="tip tip-inline">Leeway on due dates</span>
</li>
</ol>
<span class="tip tip-stacked">These are used in <a href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>
</section>
<hr class="divide" />
<section class="group-settings">
<section class="group-settings assignment-types">
<header>
<h2 class="title-2">Assignment Types</h2>
<span class="tip">Categories and labels for any exercises that are gradable</span>
</header>
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<label for="course-organization">Organization</label>
<input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled" />
</li>
</ol>
<span class="tip tip-stacked">These are used in <a href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>
<ol class="list-input course-grading-assignment-list enum">
<li class="field-group field-group-course-start" id="course-start">
<div class="field date" id="field-course-start-date">
<label for="course-start-date">Course Start Date</label>
<input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">First day the course begins</span>
</div>
<div class="field time" id="field-course-start-time">
<label for="course-start-time">Course Start Time</label>
<input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
</ol>
<div class="actions">
<a href="#" class="new-button new-course-grading-item add-grading-data">
<span class="plus-icon white"></span>New Assignment Type
</a>
</div>
</section>
</form>
</article>
......
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