448 lines
17 KiB
HTML
448 lines
17 KiB
HTML
<%inherit file="base.html" />
|
|
<%! from django.core.urlresolvers import reverse %>
|
|
<%block name="bodyclass">settings</%block>
|
|
<%block name="title">Settings</%block>
|
|
|
|
<%namespace name='static' file='static_content.html'/>
|
|
|
|
<%block name="jsextra">
|
|
<script type="text/javascript">
|
|
var $body;
|
|
var $gradeBar;
|
|
var $draggingBar;
|
|
var barOrigin;
|
|
var barWidth;
|
|
var gradeThresholds;
|
|
var GRADES = ['A', 'B', 'C', 'D', 'E'];
|
|
|
|
(function() {
|
|
$body = $('body');
|
|
$gradeBar = $('.grade-bar');
|
|
gradeThresholds = [100, 80, 70];
|
|
$('.settings-page-menu a').bind('click', showSettingsTab);
|
|
$body.on('mousedown', '.drag-bar', startDragBar);
|
|
$('.new-grade-button').bind('click', addNewGrade);
|
|
$body.on('click', '.remove-button', removeGrade);
|
|
})();
|
|
|
|
function addNewGrade(e) {
|
|
e.preventDefault();
|
|
var $newGradeBar = $('<li style="width: 10%;"><span class="letter-grade" contenteditable>' + GRADES[$('.grades li').length] + '</span><span class="range"></span><a href="#" class="drag-bar"></a><a href="#" class="remove-button">remove</a></li>');
|
|
$('.grades').append($newGradeBar);
|
|
}
|
|
|
|
function removeGrade(e) {
|
|
e.preventDefault();
|
|
var index = $(this).closest('li').index();
|
|
gradeThresholds.splice(index, 1);
|
|
$(this).closest('li').remove();
|
|
}
|
|
|
|
function showSettingsTab(e) {
|
|
e.preventDefault();
|
|
$('.settings-page-section > section').hide();
|
|
$('.settings-' + $(this).attr('data-section')).show();
|
|
$('.settings-page-menu .is-shown').removeClass('is-shown');
|
|
$(e.target).addClass('is-shown');
|
|
}
|
|
|
|
function startDragBar(e) {
|
|
e.preventDefault();
|
|
barOrigin = $gradeBar.offset().left;
|
|
barWidth = $gradeBar.width();
|
|
$draggingBar = $(e.target).closest('li').addClass('is-dragging');
|
|
$body.bind('mousemove', moveBar);
|
|
$body.bind('mouseup', stopDragBar);
|
|
}
|
|
|
|
function moveBar(e) {
|
|
var barIndex = $draggingBar.index();
|
|
var min = gradeThresholds[barIndex + 1] || 0;
|
|
var max = gradeThresholds[barIndex - 1] || 100;
|
|
var percentage = Math.min(Math.max((e.pageX - barOrigin) / barWidth * 100, min), max);
|
|
$draggingBar.css('width', percentage + '%');
|
|
gradeThresholds[$draggingBar.index()] = Math.round(percentage);
|
|
renderGradeRanges();
|
|
}
|
|
|
|
function stopDragBar(e) {
|
|
$draggingBar.removeClass('is-dragging');
|
|
$body.unbind('mousemove', moveBar);
|
|
$body.unbind('mouseup', stopDragBar);
|
|
}
|
|
|
|
function renderGradeRanges() {
|
|
$('.range').each(function(i) {
|
|
var min = gradeThresholds[i + 1] + 1 || 0;
|
|
var max = gradeThresholds[i];
|
|
$(this).text(min + '-' + max);
|
|
});
|
|
}
|
|
</script>
|
|
</%block>
|
|
|
|
<%block name="content">
|
|
<div class="main-wrapper">
|
|
<div class="inner-wrapper">
|
|
<h1>Settings</h1>
|
|
<article class="settings-overview">
|
|
<div class="sidebar">
|
|
<nav class="settings-page-menu">
|
|
<ul>
|
|
<li><a href="#" class="is-shown" data-section="details">Course Details</a></li>
|
|
<li><a href="#" data-section="staff">Staff</a></li>
|
|
<li><a href="#" data-section="grading">Grading</a></li>
|
|
<li><a href="#" data-section="handouts">Handouts</a></li>
|
|
<li><a href="#" data-section="problems">Problems</a></li>
|
|
<li><a href="#" data-section="discussions">Discussions</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-page-section main-column">
|
|
|
|
<section class="is-shown settings-details">
|
|
<h2>Course Details</h2>
|
|
|
|
<section class="settings-details-basic">
|
|
<header>
|
|
<h3>Basic Information</h3>
|
|
<span class="detail">The nuts and bolts of your class</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label>Course Name:</label>
|
|
<input type="text" class="long course-name-input">
|
|
</div>
|
|
<div class="row">
|
|
<label>Organization:</label>
|
|
<input type="text" class="long course-organization-input">
|
|
</div>
|
|
<div class="row">
|
|
<label>Course Number:</label>
|
|
<input type="text" class="short course-number-input">
|
|
<span class="tip tip-inline">e.g. 101x</span>
|
|
</div>
|
|
<div class="row">
|
|
<label>Course Description:</label>
|
|
<textarea class="long tall course-description-input"></textarea>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-details-dates">
|
|
<header>
|
|
<h3>Dates & Times</h3>
|
|
<span class="detail">The nuts and bolts of your class</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label>Classes Start Date:</label>
|
|
<input type="text" class="date course-start-date-input">
|
|
<span class="tip tip-inline">First day the class begins</span>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Classes End Date:</label>
|
|
<input type="text" class="date course-end-date-input">
|
|
<span class="tip tip-inline">Last day of class activty</span>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Milestone :</label>
|
|
|
|
<div class="field">
|
|
<ol class="input-list course-milestone-list">
|
|
<li class="element element-multi element-group course-milestone-list-element">
|
|
<div class="course-milestone-date">
|
|
<input type="text" class="course-milestone-date-input date hasDatepicker" placeholder="MM/DD/YYYY">
|
|
<span class="label-micro">Milestone Date</span>
|
|
</div>
|
|
|
|
<div class="course-milestone-name">
|
|
<input type="text" class="course-milestone-name-input">
|
|
<span class="label-micro">Milestone Name</span>
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-milestone-data"><span class="delete-icon"></span> Delete Milestone</a>
|
|
</li>
|
|
</ol>
|
|
|
|
<a href="#" class="new-item new-course-milestone-item add-milestone-data">
|
|
<span class="plus-icon"></span>New Class Milestone
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-details-marketing">
|
|
<header>
|
|
<h3>Introducing Your Course</h3>
|
|
<span class="detail">Information for perspective students</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label>Course Overview:</label>
|
|
<textarea class="long tall course-overview"></textarea>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Course Statement:</label>
|
|
<textarea class="long course-shortdescription"></textarea>
|
|
<span class="tip tip-stacked">Used to introduce your class to perspective students</span>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Introduction Video:</label>
|
|
<input type="file" class="course-video">
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-details-requirements">
|
|
<header>
|
|
<h3>Requirements</h3>
|
|
<span class="detail">Expectations of the students taking this course</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label>Prerequisites</label>
|
|
<textarea class="long tall course-prerequisites"></textarea>
|
|
</div>
|
|
|
|
<div class="row optional">
|
|
<label>Prerequisites Links</label>
|
|
|
|
<div class="field">
|
|
|
|
<ol class="input-list course-prerequisites-list">
|
|
<li class="element element-group course-prerequisites-list-element">
|
|
<div class="course-milestone-date">
|
|
<input type="text" class="long course-prerequisites-links">
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-prerequisite-data"><span class="delete-icon"></span> Delete Link</a>
|
|
</li>
|
|
</ol>
|
|
|
|
<a href="#" class="new-item new-course-prerequisites-links-item add-links-data">
|
|
<span class="plus-icon"></span>New Link
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Requirements:</label>
|
|
<textarea class="long tall course-requirements"></textarea>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Hours of Effort per Week:</label>
|
|
<input type="text" class="course-effort short">
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label>Textbooks:</label>
|
|
|
|
<div class="field">
|
|
<ol class="input-list course-textbook-list">
|
|
<li class="element element-stacked element-group course-textbook-list-element">
|
|
<div class="course-textbook-name">
|
|
<input type="text" class="long course-textbook-name-input">
|
|
<span class="label-micro">Textbook Name</span>
|
|
</div>
|
|
|
|
<div class="course-textbook-url">
|
|
<input type="text" class="long course-textbook-url-input">
|
|
<span class="label-micro">Textbook URL</span>
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-textbook-data"><span class="delete-icon"></span> Delete Textbook</a>
|
|
</li>
|
|
</ol>
|
|
|
|
<a href="#" class="new-item new-course-textbook-item add-textbook-data">
|
|
<span class="plus-icon"></span>New Textbook
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-details-more">
|
|
<header>
|
|
<h3>More Information</h3>
|
|
<span class="detail">Other helpful information about the course</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label><abbr title="Frequently Asked Questions">FAQs</abbr></label>
|
|
|
|
<div class="field">
|
|
<ol class="input-list course-faq-list">
|
|
<li class="element element-stacked element-group course-faq-list-element">
|
|
<div class="course-faq-question">
|
|
<input type="text" class="long course-faq-question-input">
|
|
<span class="label-micro">Question</span>
|
|
</div>
|
|
|
|
<div class="course-faq-answer">
|
|
<textarea class="long tall course-faq-answer-input"></textarea>
|
|
<span class="label-micro">Answer</span>
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-faq-data"><span class="delete-icon"></span> Delete Question & Answer</a>
|
|
</li>
|
|
</ol>
|
|
|
|
<a href="#" class="new-item new-course-faq-item add-faq-data">
|
|
<span class="plus-icon"></span>New Question & Answer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="settings-staff">
|
|
<h2>Course Staff</h2>
|
|
|
|
<section class="settings-staff-faculty">
|
|
<header>
|
|
<h3>Faculty</h3>
|
|
</header>
|
|
|
|
<ol class="input-list">
|
|
<li class="element element-group course-staff-faculty-element">
|
|
<div class="row">
|
|
<label>Faculty First Name:</label>
|
|
<input type="text" class="long course-faculty-firstname-input">
|
|
</div>
|
|
<div class="row">
|
|
<label>Faculty Last Name:</label>
|
|
<input type="text" class="long course-faculty-lastname-input">
|
|
</div>
|
|
<div class="row">
|
|
<label>Faculty Photo:</label>
|
|
<input type="file" class="long course-faculty-photo-input">
|
|
<span class="tip tip-stacked">This photo will appear on your course's info page</span>
|
|
</div>
|
|
<div class="row">
|
|
<label>Faculty Bio:</label>
|
|
<textarea class="long tall course-faculty-bio-input"></textarea>
|
|
<span class="tip tip-stacked">A brief description of your education, experience, and expertise</span>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<a href="#" class="new-item new-course-faculty-item add-faculty-data">
|
|
<span class="plus-icon"></span>New Faculty Member
|
|
</a>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="settings-grading">
|
|
<h2>Grading</h2>
|
|
<section>
|
|
<label class="ranges">Grade Ranges:</label>
|
|
<div class="grade-controls">
|
|
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
|
|
<div class="grade-slider">
|
|
<div class="grade-bar">
|
|
<ol class="increments">
|
|
<li class="increment-0">0</li>
|
|
<li class="increment-10">10</li>
|
|
<li class="increment-20">20</li>
|
|
<li class="increment-30">30</li>
|
|
<li class="increment-40">40</li>
|
|
<li class="increment-50">50</li>
|
|
<li class="increment-60">60</li>
|
|
<li class="increment-70">70</li>
|
|
<li class="increment-80">80</li>
|
|
<li class="increment-90">90</li>
|
|
<li class="increment-100">100</li>
|
|
</ol>
|
|
<ol class="grades">
|
|
<li class="bar-a" style="width: 100%;">
|
|
<span class="letter-grade" contenteditable>A</span>
|
|
<span class="range">81-100</span>
|
|
<a href="#" class="remove-button">remove</a>
|
|
</li>
|
|
<li class="bar-b" style="width: 80%;">
|
|
<span class="letter-grade" contenteditable>B</span>
|
|
<span class="range">71-80</span>
|
|
<a href="#" class="drag-bar"></a>
|
|
<a href="#" class="remove-button">remove</a>
|
|
</li>
|
|
<li class="bar-c" style="width: 70%;">
|
|
<span class="letter-grade" contenteditable>C</span>
|
|
<span class="range">0-70</span>
|
|
<a href="#" class="drag-bar"></a>
|
|
<a href="#" class="remove-button">remove</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="row">
|
|
<label>Grace Period:</label>
|
|
<input type="text" class="grace-period">
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3>Homework</h3>
|
|
<div class="row">
|
|
<label>Minimum Count:</label>
|
|
<input type="text" class="minimum-count-input short">
|
|
</div>
|
|
<div class="row">
|
|
<label>Drop Count:</label>
|
|
<input type="text" class="drop-count-input short">
|
|
</div>
|
|
<div class="row">
|
|
<label>Weight:</label>
|
|
<input type="text" class="weight-input short">
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3>Lab</h3>
|
|
<div class="row">
|
|
<label>Minimum Count:</label>
|
|
<input type="text" class="minimum-count-input short">
|
|
</div>
|
|
<div class="row">
|
|
<label>Drop Count:</label>
|
|
<input type="text" class="drop-count-input short">
|
|
</div>
|
|
<div class="row">
|
|
<label>Weight:</label>
|
|
<input type="text" class="weight-input short">
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="settings-handouts">
|
|
<h2>Handouts & Guides</h2>
|
|
|
|
<div class="row">
|
|
<label>Syllabus: </label>
|
|
<input type="file" class="course-handouts-syllabus">
|
|
<span class="tip">PDF formatted file</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-problems">
|
|
<h2>Problems</h2>
|
|
<div class="row">
|
|
<input type="checkbox" id="randomize-problems"><label for="randomize-problems" class="check-label">Randomize Problems</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-discussions">
|
|
<h2>Discussions</h2>
|
|
|
|
</section>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</%block>
|