Skip to content

E
edx-platform
Commit 210086fe by Brian Talbot
Options

studio - settings: grading revamp WIP

parent 1b679750
Showing with 131 additions and 91 deletions
cms/static/sass/_base.scss
...@@ -535,6 +535,10 @@ hr.divide { ...@@ -535,6 +535,10 @@ hr.divide {
@include text-sr(); @include text-sr();
} }
.fake-link {
cursor: pointer;
}
.non-list { .non-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
......
cms/templates/settings_graders.html
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="title">Grading</%block> <%block name="title">Grading</%block>
<%block name="bodyclass">is-signedin course settings</%block> <%block name="bodyclass">is-signedin course grading settings</%block>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%! <%!
from contentstore import utils from contentstore import utils
%> %>
<%block name="jsextra"> <%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script> <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
...@@ -22,102 +20,140 @@ from contentstore import utils ...@@ -22,102 +20,140 @@ from contentstore import utils
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).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({ var editor = new CMS.Views.Settings.Grading({
el: $('.settings-grading'), el: $('.settings-grading'),
model : new CMS.Models.Settings.CourseGradingPolicy(${course_details|n},{parse:true}) model : new CMS.Models.Settings.CourseGradingPolicy(${course_details|n},{parse:true})
}); });
editor.render(); editor.render();
}); });
</script> </script>
</%block> </%block>
<%block name="content"> <%block name="content">
<!-- --> <div class="wrapper-content wrapper">
<div class="main-wrapper"> <section class="content">
<div class="inner-wrapper"> <header>
<h1>Settings</h1> <span class="title-sub">Settings</span>
<article class="settings-overview"> <h1 class="title-1">Grading</h1>
<div class="settings-page-section main-column"> </header>
<section class="settings-grading is-shown"> <!-- <div class="introduction">
<h2 class="title">Grading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div> -->
<section class="settings-grading-range">
<header> <article class="content-primary" role="main">
<h3>Overall Grade Range</h3> <form id="settings_details" method="post" action="">
<span class="detail">Course grade ranges and their values</span> <section class="group-settings grade-range">
</header> <header>
<h2 class="title-2">Overall Grade Range</h2>
<div class="row"> <span class="tip">Your overall grading scale for student final grades</span>
</header>
<div class="grade-controls course-grading-range well">
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a> <ol class="list-input">
<div class="grade-slider"> <li class="field text is-not-editable" id="field-course-organization">
<div class="grade-bar"> <div class="grade-controls course-grading-range well">
<ol class="increments"> <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
<li class="increment-0">0</li> <div class="grade-slider">
<li class="increment-10">10</li> <div class="grade-bar">
<li class="increment-20">20</li> <ol class="increments">
<li class="increment-30">30</li> <li class="increment-0">0</li>
<li class="increment-40">40</li> <li class="increment-10">10</li>
<li class="increment-50">50</li> <li class="increment-20">20</li>
<li class="increment-60">60</li> <li class="increment-30">30</li>
<li class="increment-70">70</li> <li class="increment-40">40</li>
<li class="increment-80">80</li> <li class="increment-50">50</li>
<li class="increment-90">90</li> <li class="increment-60">60</li>
<li class="increment-100">100</li> <li class="increment-70">70</li>
</ol> <li class="increment-80">80</li>
<ol class="grades"> <li class="increment-90">90</li>
</ol> <li class="increment-100">100</li>
</div> </ol>
<ol class="grades">
</ol>
</div> </div>
</div> </div>
</div> </div>
</section> </li>
</ol>
<section class="settings-grading-general"> <span class="tip tip-stacked">Add different overall course grading scales and drag to set their cut-off points</span>
<header> </section>
<h3>General Grading</h3>
<span class="detail">Deadlines and Requirements</span> <hr class="divide" />
</header>
<section class="group-settings">
<div class="row row-col2"> <header>
<label for="course-grading-graceperiod">Grace Period on Deadline:</label> <h2 class="title-2">Grading Rules &amp; Policies</h2>
<span class="tip">Deadlines, requirements, and logistics around grading student work</span>
<div class="field"> </header>
<div class="input">
<input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes"> <ol class="list-input">
<span class="tip tip-inline">leeway on due dates</span> <li class="field text is-not-editable" id="field-course-organization">
</div> <label for="course-organization">Organization</label>
</div> <input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled" />
</div> </li>
</section>
<li class="field text is-not-editable" id="field-course-number">
<section class="setting-grading-assignment-types"> <label for="course-number">Course Number</label>
<header> <input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
<h3>Assignment Types</h3> </li>
</header>
<li class="field text is-not-editable" id="field-course-name">
<div class="row"> <label for="course-name">Course Name</label>
<div class="field enum"> <input type="text" class="long" id="course-name" value="[Course Name]" disabled="disabled" />
<ul class="input-list course-grading-assignment-list"> </li>
</ul> </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>
<a href="#" class="new-button new-course-grading-item add-grading-data"> </section>
<span class="plus-icon white"></span>New Assignment Type
</a> <hr class="divide" />
</div>
</div> <section class="group-settings">
</section> <header>
</section><!-- .settings-grading --> <h2 class="title-2">Assignment Types</h2>
<span class="tip">Categories and labels for any exercises that are gradable</span>
</div> </header>
</article>
</div> <ol class="list-input">
</div> <li class="field text is-not-editable" id="field-course-organization">
<footer></footer> <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>
</section>
</form>
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">How will these settings be used</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
<div class="bit">
<h3 class="title-3">Other Course Settings</h3>
<nav class="nav-related">
<ul>
<li class="nav-item"><a href="">Details &amp; Schedule</a></li>
<li class="nav-item"><a href="">Advanced Settings</a></li>
</ul>
</nav>
</div>
</aside>
</section>
</div>
</%block> </%block>
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