567 lines
24 KiB
HTML
567 lines
24 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'];
|
|
|
|
$(" :input, textarea").focus(function() {
|
|
$("label[for='" + this.id + "']").addClass("is-focused");
|
|
}).blur(function() {
|
|
$("label").removeClass("is-focused");
|
|
});
|
|
|
|
(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="faculty">Faculty</a></li>
|
|
<li><a href="#" data-section="grading">Grading</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="settings-details is-shown">
|
|
<h2 class="title">Course Details</h2>
|
|
|
|
<section class="settings-details-basic">
|
|
<header>
|
|
<h3>Basic Information</h3>
|
|
<span class="detail">The nuts and bolts of your course</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label for="course-name-input">Course Name:</label>
|
|
<div class="field">
|
|
<input type="text" class="long" id="course-name-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-organization-input">Organization:</label>
|
|
<div class="field">
|
|
<input type="text" class="long" id="course-organization-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-number-input">Course Number:</label>
|
|
<div class="field">
|
|
<div class="input">
|
|
<input type="text" class="short" id="course-number-input">
|
|
<span class="tip tip-inline">e.g. 101x</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- settings-details-basic -->
|
|
|
|
<hr class="divide" />
|
|
|
|
<section class="settings-details-schedule">
|
|
<header>
|
|
<h3>Course Schedule</h3>
|
|
<span class="detail">Important steps and segments of your your course</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label for="course-start-date-input">Course Start Date:</label>
|
|
<div class="field">
|
|
<div class="input">
|
|
<input type="text" class="date" id="course-start-date-input">
|
|
<span class="tip tip-inline">First day the class begins</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-end-date-input">Course End Date:</label>
|
|
<div class="field">
|
|
<div class="input">
|
|
<input type="text" class="date" id="course-end-date-input">
|
|
<span class="tip tip-inline">Last day the class begins</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h4 class="label">Milestones:</h4>
|
|
|
|
<div class="field enum">
|
|
<ul class="input-list course-milestone-list">
|
|
<li class="input input-existing multi multi-inline course-milestone-list-item">
|
|
<div class="group">
|
|
<label for="course-milestone-1-date-input">Milestone Date</label>
|
|
<input type="text" id="course-milestone-1-date-input" class="course-milestone-date-input date hasDatepicker" placeholder="MM/DD/YYYY">
|
|
</div>
|
|
|
|
<div class="group">
|
|
<label for="course-milestone-1-name-input">Milestone Name</label>
|
|
<input type="text" class="course-milestone-name-input" id="course-milestone-1-name-input">
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-milestone-data"><span class="delete-icon"></span> Delete Milestone</a>
|
|
</li>
|
|
|
|
<li class="input multi multi-inline course-milestone-list-item">
|
|
<div class="group">
|
|
<label for="course-milestone-2-date-input">Milestone Date</label>
|
|
<input type="text" class="course-milestone-date-input date hasDatepicker" id="course-milestone-2-date-input" placeholder="MM/DD/YYYY">
|
|
</div>
|
|
|
|
<div class="group">
|
|
<label for="course-milestone-2-name-input">Milestone Name</label>
|
|
<input type="text" class="course-milestone-name-input" id="course-milestone-2-name-input">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="#" class="new-item new-course-milestone-item add-milestone-data">
|
|
<span class="plus-icon"></span>New Course Milestone
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-syllabus-input">Course Syllabus</label>
|
|
<div class="field">
|
|
<div class="input input-existing">
|
|
<div class=" current current-course-syllabus">
|
|
</div>
|
|
|
|
<a href="#" class="replace-item replace-course-syllabus add-syllabus-data" id="course-syllabus">
|
|
<span class="upload-icon"></span>Replace Syllabus
|
|
</a>
|
|
<span class="tip tip-inline">PDF formatting preferred</span>
|
|
</div>
|
|
|
|
<div class="input">
|
|
<a href="#" class="new-item new-course-syllabus add-syllabus-data" id="course-syllabus-input">
|
|
<span class="upload-icon"></span>Upload Syllabus
|
|
</a>
|
|
<span class="tip tip-inline">PDF formatting preferred</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- .settings-details-schedule -->
|
|
|
|
<hr class="divide" />
|
|
|
|
<section class="setting-details-marketing">
|
|
<header>
|
|
<h3>Introducing Your Course</h3>
|
|
<span class="detail">Information for perspective students</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<label for="course-overview">Course Overview:</label>
|
|
<div class="field">
|
|
<textarea class="long tall" input="course-overview"></textarea>
|
|
<span class="tip tip-stacked">Detailed summary of concepts and lessons covered</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-shortdescription">Course Statement:</label>
|
|
<div class="field">
|
|
<textarea class="long" id="course-shortdescription"></textarea>
|
|
<span class="tip tip-stacked">1-2 sentences used to introduce your class to perspective students</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-introduction-video">Introduction Video:</label>
|
|
<div class="field">
|
|
<div class="input input-existing">
|
|
<div class=" current current-course-introduction-video">
|
|
|
|
</div>
|
|
|
|
<a href="#" class="replace-item replace-course-introduction-video add-video-data" id="course-introduction-video">
|
|
<span class="upload-icon"></span>Replace Video
|
|
</a>
|
|
<span class="tip tip-inline">Video restrictions go here</span>
|
|
</div>
|
|
|
|
<div class="input">
|
|
<a href="#" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video">
|
|
<span class="upload-icon"></span>Upload Video
|
|
</a>
|
|
<span class="tip tip-inline">Video restrictions go here</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- .settings-details-marketing -->
|
|
|
|
<hr class="divide" />
|
|
|
|
<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 for="course-requirements">Requirements:</label>
|
|
<div class="field">
|
|
<textarea class="long tall" id="course-requirements"></textarea>
|
|
<span class="tip tip-stacked">Supplies, software, and set-up that students will need</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-effort">Hours of Effort per Week:</label>
|
|
<div class="field">
|
|
<input type="text" class="short" id="course-effort">
|
|
<span class="tip tip-inline">Time students should spend on all course work</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h4 class="label">Textbooks:</h4>
|
|
|
|
<div class="field enum">
|
|
<ul class="input-list course-textbooks-list">
|
|
<li class="input input-existing multi multi-stacked course-textbooks-list-item">
|
|
<div class="group">
|
|
<label for="course-textbooks-1-name-input">Textbook Name</label>
|
|
<input type="text" class="course-textbooks-name-input" id="course-textbooks-1-name-input" placeholder="">
|
|
</div>
|
|
|
|
<div class="group optional">
|
|
<label for="course-textbooks-1-link-input">Textbook Link</label>
|
|
<input type="text" class="course-textbooks-link-input" id="course-textbooks-1-link-input">
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-textbooks-data"><span class="delete-icon"></span> Delete Textbook</a>
|
|
</li>
|
|
|
|
<li class="input multi multi-stacked course-textbooks-list-item">
|
|
<div class="group">
|
|
<label for="course-textbooks-2-name-input">Textbook Name</label>
|
|
<input type="text" class="course-textbooks-name-input" id="course-textbooks-2-name-input">
|
|
</div>
|
|
|
|
<div class="group optional">
|
|
<label for="course-textbooks-2-link-input">Textbook Link</label>
|
|
<input type="text" class="course-textbooks-link-input" id="course-textbooks-2-link-input">
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="#" class="new-item new-course-textbooks-item add-textbooks-data">
|
|
<span class="plus-icon"></span>New Textbook
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h4 class="label">Prerequisites:</h4>
|
|
|
|
<div class="field enum">
|
|
<ul class="input-list course-prerequisites-list">
|
|
<li class="input input-existing multi multi-stacked course-prerequisites-list-item">
|
|
<div class="group">
|
|
<label for="course-prerequisites-1-name-input">Prerequisite</label>
|
|
<input type="text" class="course-prerequisites-name-input" id="course-prerequisites-1-name-input">
|
|
</div>
|
|
|
|
<div class="group">
|
|
<label for="course-prerequisites-1-link-input">Prerequisite Link</label>
|
|
<input type="text" class="course-prerequisites-link-input" id="course-prerequisites-1-link-input">
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-prerequisite-data"><span class="delete-icon"></span> Delete Prerequisite</a>
|
|
</li>
|
|
|
|
<li class="input multi multi-stacked course-prerequisites-list-item">
|
|
<div class="group">
|
|
<label for="course-prerequisites-2-name-input">Prerequisite</label>
|
|
<input type="text" class="course-prerequisites-name-input" id="course-prerequisites-2-name-input">
|
|
</div>
|
|
|
|
<div class="group">
|
|
<label for="course-prerequisites-2-link-input">Prerequisite Link</label>
|
|
<input type="text" class="course-prerequisites-link-input" id="course-prerequisites-2-link-input">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="#" class="new-item new-course-prerequisite-item add-prerequisite-data">
|
|
<span class="plus-icon"></span>New Prerequisite
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="divide" />
|
|
|
|
<section class="settings-details-more">
|
|
<header>
|
|
<h3>More Information</h3>
|
|
<span class="detail">Other helpful information about the course</span>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<h4 class="label">FAQs:</h4>
|
|
|
|
<div class="field enum">
|
|
<ul class="input-list course-faq-list">
|
|
<li class="input multi multi-stacked course-faq-list-item">
|
|
<div class="group">
|
|
<label for="course-faq-1-question-input">Question</label>
|
|
<input type="text" class="long course-faq-question-input" id="course-faq-1-question-input">
|
|
</div>
|
|
|
|
<div class="group optional">
|
|
<label for="course-faq-1-answer-input">Answer</label>
|
|
<textarea class="long tall course-faq-answer-input" id="course-faq-1-answer-input"></textarea>
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-faq-data"><span class="delete-icon"></span> Delete Question & Answer</a>
|
|
</li>
|
|
|
|
<li class="input multi multi-stacked course-faq-list-item">
|
|
<div class="group">
|
|
<label for="course-faq-2-question-input">Question</label>
|
|
<input type="text" class="long course-faq-question-input" id="course-faq-2-question-input">
|
|
</div>
|
|
|
|
<div class="group optional">
|
|
<label for="course-faq-2-answer-input">Answer</label>
|
|
<textarea class="long tall course-faq-answer-input" id="course-faq-2-answer-input"></textarea>
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-faq-data"><span class="delete-icon"></span> Delete Question & Answer</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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><!-- .settings-details -->
|
|
|
|
<section class="settings-faculty">
|
|
<h2 class="title">Faculty</h2>
|
|
|
|
<section class="settings-faculty-members">
|
|
<header>
|
|
<h3>Faculty Members</h3>
|
|
<span class="detail">Individuals instructing and help with this course</span>
|
|
</header>
|
|
|
|
<div class="field enum">
|
|
<ul class="input-list course-faculty-list">
|
|
<li class="input input-existing multi course-faculty-list-item">
|
|
<div class="row">
|
|
<label for="course-faculty-firstname-input">Faculty First Name:</label>
|
|
<div class="field">
|
|
<input type="text" class="long" id="course-faculty-firstname-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-faculty-lastname-input">Faculty Last Name:</label>
|
|
<div class="field">
|
|
<input type="text" class="long" id="course-faculty-lastname-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-faculty-photo-input">Faculty Photo</label>
|
|
<div class="field">
|
|
<div class="input">
|
|
<a href="#" class="new-item new-faculty-photo add-faculty-photo-data" id="course-faculty-photo-input">
|
|
<span class="upload-icon"></span>Upload Faculty Photo
|
|
</a>
|
|
<span class="tip tip-inline">Max size: 30KB</span>
|
|
</div>
|
|
|
|
<div class="input input-existing">
|
|
<div class=" current current-course-syllabus">
|
|
|
|
</div>
|
|
|
|
<a href="#" class="replace-item replace-faculty-photo add-faculty-photo-data" id="course-faculty-photo-input">
|
|
<span class="upload-icon"></span>Upload Faculty Photo
|
|
</a>
|
|
<span class="tip tip-inline">Max size: 30KB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-faculty-bio-input">Faculty Bio:</label>
|
|
<div class="field">
|
|
<textarea class="long tall" id="course-faculty-bio-input"></textarea>
|
|
<span class="tip tip-stacked">A brief description of your education, experience, and expertise</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#" class="remove-item remove-faculty-data"><span class="delete-icon"></span> Delete Faculty Member</a>
|
|
</li>
|
|
|
|
<li class="input multi course-faculty-list-item">
|
|
<div class="row">
|
|
<label for="course-faculty-firstname-input">Faculty First Name:</label>
|
|
<div class="field">
|
|
<input type="text" class="long" id="course-faculty-firstname-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-faculty-lastname-input">Faculty Last Name:</label>
|
|
<div class="field">
|
|
<input type="text" class="long" id="course-faculty-lastname-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-faculty-photo-input">Faculty Photo</label>
|
|
<div class="field">
|
|
<div class="input">
|
|
<a href="#" class="new-item new-faculty-photo add-faculty-photo-data" id="course-faculty-photo-input">
|
|
<span class="upload-icon"></span>Upload Faculty Photo
|
|
</a>
|
|
<span class="tip tip-inline">Max size: 30KB</span>
|
|
</div>
|
|
|
|
<div class="input input-existing">
|
|
<div class=" current current-course-faculty-photo">
|
|
|
|
</div>
|
|
|
|
<a href="#" class="replace-item replace-faculty-photo add-faculty-photo-data" id="course-faculty-photo-input">
|
|
<span class="upload-icon"></span>Upload Faculty Photo
|
|
</a>
|
|
<span class="tip tip-inline">Max size: 30KB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="course-faculty-bio-input">Faculty Bio:</label>
|
|
<div class="field">
|
|
<textarea class="long tall" id="course-faculty-bio-input"></textarea>
|
|
<span class="tip tip-stacked">A brief description of your education, experience, and expertise</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="#" class="new-item new-course-faculty-item add-faculty-data">
|
|
<span class="plus-icon"></span>New Faculty Member
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</section><!-- .settings-staff -->
|
|
|
|
<section class="settings-grading">
|
|
<h2 class="title">Grading</h2>
|
|
|
|
</section><!-- .settings-grading -->
|
|
|
|
<section class="settings-problems">
|
|
<h2 class="title">Problems</h2>
|
|
|
|
</section><!-- .settings-problems -->
|
|
|
|
<section class="settings-discussions">
|
|
<h2 class="title">Discussions</h2>
|
|
|
|
</section><!-- .settings-discussions -->
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</%block>
|