Skip to content

E
edx-platform
Commit 0aea85a4 by Brian Talbot
Options

studio - checklists: moved content to yaml file, cleaned up new checklists… 

studio - checklists: moved content to yaml file, cleaned up new checklists production view, added in page-level nav, and collapse/expand indicators
parent 56437404
Showing with 245 additions and 636 deletions
cms/static/sass/_checklists.scss
......@@ -60,11 +60,19 @@ body.course.checklists {
margin: 0 flex-gutter() 0 0;
float: left;
.ui-toggle-expansion {
@include font-size(14);
display: inline-block;
vertical-align: middle;
margin-right: $baseline;
color: $gray-l4;
}
.icon-confirm {
@include font-size(20);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
margin-right: ($baseline/2);
color: $gray-l4;
}
......@@ -73,6 +81,10 @@ body.course.checklists {
&:hover {
color: $blue;
.ui-toggle-expansion {
color: $blue;
}
}
}
}
......@@ -143,6 +155,14 @@ body.course.checklists {
header {
@include box-shadow(none);
.checklist-title {
.ui-toggle-expansion {
@include transform(rotate(-90deg));
@include transform-origin(50% 50%);
}
}
}
.list-tasks {
......
cms/templates/checklists.html
<%inherit file="base.html" />
<%block name="title">Course Checklists</%block>
<%block name="bodyclass">is-signedin course uxdesign checklists</%block>
<%block name="bodyclass">is-signedin course checklists</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Tasks &amp; Checklists</h1>
</div>
</header>
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Tasks &amp; Checklists</h1>
</div>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<div class="introduction">
<p class="copy">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<a href="" class="demo-checklistviz">Test Checklist Progress Visualization</a></p>
</div>
<article class="content-primary" role="main">
<form id="course-checklists" class="course-checklists" method="post" action="">
<h2 class="title title-3 sr">Current Checklists</h2>
<section class="content">
<div class="introduction">
<p class="copy">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
% for checklist in checklists:
<section class="course-checklist" id=${'course-checklist' + str(loop.index)}>
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>${checklist['short_description']}</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
% for item in checklist['items']:
<li class="task">
<label for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
<article class="content-primary" role="main">
<form id="course-checklists" class="course-checklists" method="post" action="">
<h2 class="title title-3 sr">Current Checklists</h2>
% for checklist in checklists:
<section class="course-checklist" id=${'course-checklist' + str(loop.index)}>
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2" title="Collapse/Expand this Checklist">
<i class="ss-icon ss-symbolicons-standard icon-arrow ui-toggle-expansion">&#x25BE;</i>
<i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>${checklist['short_description']}</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
% for item in checklist['items']:
<li class="task">
<label for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
<input type="checkbox" class="task-input" name=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
value=${item['is_checked']}>
<div class="task-details">
<h4 class="task-name title title-3">${item['short_description']}</h4>
<p class="task-description">${item['long_description']}</p>
</div>
</label>
% if item['action_text'] is not '' and item['action_url'] is not '':
<ul class="list-actions task-actions">
<li>
<a href=${item['action_url']} class="action action-primary">${item['action_text']}</a>
</li>
</ul>
% endif
</li>
% endfor
</ul>
</section>
% endfor
<section class="course-checklist" id="course-checklist1">
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Getting Started with Studio</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist1-task1">
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist1-task2">
<input type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Set Your Course's Important Dates</h4>
<p class="task-description">Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist1-task3">
<input type="checkbox" class="task-input" name="course-checklist1-task3" id="course-checklist1-task3" value="course-checklist1-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Draft Your Course's Grading Policy</h4>
<p class="task-description">Regardless of whether you have all your course assignments written, you can immediately get started setting up assignment types and a grade computation scheme.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Grading Settings</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist1-task4">
<input type="checkbox" class="task-input" name="course-checklist1-task4" id="course-checklist1-task4" value="course-checklist1-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Explore the other Studio Checklists</h4>
<p class="task-description">They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.</p>
</div>
</label>
</li>
</ul>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<section class="course-checklist" id="course-checklist2">
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Draft a Rough Course Outline</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">7</span></span>
</header>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist2-task1">
<input type="checkbox" class="task-input" name="course-checklist2-task1" id="course-checklist2-task1" value="course-checklist2-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Create your first Section and Subsection</h4>
<p class="task-description">Walk through the mechanics of building your course's first section and subsection through your course outline to start.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task2">
<input type="checkbox" class="task-input" name="course-checklist2-task2" id="course-checklist2-task2" value="course-checklist2-task2 complete">
id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
value=${item['is_checked']}>
<div class="task-details">
<h4 class="task-name title title-3">Set your 1st Section's Release Date</h4>
<p class="task-description">Sections are released sequentially to students, and you have complete control over they are released to students.</p>
<h4 class="task-name title title-3">${item['short_description']}</h4>
<p class="task-description">${item['long_description']}</p>
</div>
</label>
</label>
<ul class="list-actions task-actions">
% if item['action_text'] is not '' and item['action_url'] is not '':
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
<a href=${item['action_url']} class="action action-primary">${item['action_text']}</a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist2-task3">
<input type="checkbox" class="task-input" name="course-checklist2-task3" id="course-checklist2-task3" value="course-checklist2-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Designate a Subsection as Graded</h4>
<p class="task-description">Assignment types are defined in your grading settings but can be quickly associated with sections using your course outline.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task4">
<input type="checkbox" class="task-input" name="course-checklist2-task4" id="course-checklist2-task4" value="course-checklist2-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Reordering Course Content</h4>
<p class="task-description">From the Course Outline, you can easily reorder your course content based on the progression you'd like students to walk through.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task5">
<input type="checkbox" class="task-input" name="course-checklist2-task5" id="course-checklist2-task5" value="course-checklist2-task5 complete">
<div class="task-details">
<h4 class="task-name title title-3">Renaming Course Sections</h4>
<p class="task-description">Learn how to rename Sections by clicking on its name from the Course Outline; this should open the editing mode.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task6">
<input type="checkbox" class="task-input" name="course-checklist2-task6" id="course-checklist2-task6" value="course-checklist2-task6 complete">
<div class="task-details">
<h4 class="task-name title title-3">Deleting Course Content</h4>
<p class="task-description">Try out deleting on a section, subsection, or unit you don't need anymore. Be careful though, anything inside the course content you delete is also removed.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task7">
<input type="checkbox" class="task-input" name="course-checklist2-task7" id="course-checklist2-task7" value="course-checklist2-task7 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add an Instructor-Only Section to Your Outline</h4>
<p class="task-description">Some course authors find creating a section for unsorted, in-progress work useful. To do this, create a section and set the release date to the distant future.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
</ul>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<section class="course-checklist" id="course-checklist3">
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Explore edX's Support Tools</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist3-task1">
<input type="checkbox" class="task-input" name="course-checklist3-task1" id="course-checklist3-task1" value="course-checklist3-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Explore the Studio Help Forum</h4>
<p class="task-description">Access the Studio Help forum from the menu that appears when you click your user name in the top right corner of Studio.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Visit edX Studio Help</a>
</li>
</ul>
</li>
<li class="task is-completed">
<label for="course-checklist3-task2">
<input type="checkbox" class="task-input" name="course-checklist3-task2" id="course-checklist3-task2" value="course-checklist3-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Enroll in edX101</h4>
<p class="task-description">Register for edX101, edX's primer for course creation.</p>
</div>
</label>
</ul>
% endif
</li>
% endfor
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Register for edX101</a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist3-task3">
<input type="checkbox" class="task-input" name="course-checklist3-task3" id="course-checklist3-task3" value="course-checklist3-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Download the Studio Documentation</h4>
<p class="task-description">View the searchable Studio documentation to find answers to your questions or information about how to do specific tasks. Once you download the PDF, you can view it offline.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Download Documentation</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist3-task4">
<input type="checkbox" class="task-input" name="course-checklist3-task4" id="course-checklist3-task4" value="course-checklist3-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Explore the other Studio Checklists</h4>
<p class="task-description">They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.</p>
</div>
</label>
</li>
</ul>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<section class="course-checklist" id="course-checklist4">
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Draft your Course Introduction</h3>
</header>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist4-task1">
<input type="checkbox" class="task-input" name="course-checklist4-task1" id="course-checklist4-task1" value="course-checklist4-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Drafting a Course Description</h4>
<p class="task-description">Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist4-task2">
<input type="checkbox" class="task-input" name="course-checklist4-task2" id="course-checklist4-task2" value="course-checklist4-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Adding Staff Bios</h4>
<p class="task-description">Showing prospective students who will be their instructor is helpful, so we recommend including staff bios in the Course introduction page.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist4-task3">
<input type="checkbox" class="task-input" name="course-checklist4-task3" id="course-checklist4-task3" value="course-checklist4-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course FAQs</h4>
<p class="task-description">Students often have questions about courses, and including a short list of frequently asked questions up front often reduces the number of students who are confused.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist4-task4">
<input type="checkbox" class="task-input" name="course-checklist4-task4" id="course-checklist4-task4" value="course-checklist4-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Prerequisites</h4>
<p class="task-description">Before a student jumps into a course without the necessary preparation, we'd like them to understand the prerequisites that will make them more likely to succeed.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
</ul>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<hr class="divider" />
<h2 class="title title-3 sr">Completed Checklists</h2>
<section class="course-checklist is-completed" id="course-checklist5">
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Completed Checklist Example</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">3</span>/<span class="status-amount">3</span></span>
</header>
<ul class="list list-tasks">
<li class="task is-completed">
<label for="course-checklist5-task1">
<input checked type="checkbox" class="task-input" name="course-checklist5-task1" id="course-checklist5-task1" value="course-checklist5-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li>
<li class="task is-completed">
<label for="course-checklist5-task2">
<input checked type="checkbox" class="task-input" name="course-checklist5-task2" id="course-checklist5-task2" value="course-checklist5-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li>
<li class="task is-completed">
<label for="course-checklist5-task3">
<input checked type="checkbox" class="task-input" name="course-checklist5-task3" id="course-checklist5-task3" value="course-checklist5-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together. Grant your collaborators permission to edit your course so you can work together. Grant your collaborators permission to edit your course so you can work together. Grant your collaborators permission to edit your course so you can work together.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li>
</ul>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<hr class="divider" />
</form>
</article>
</ul>
</section>
% endfor
</form>
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title title-3">What are Checklists?</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. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</div>
<div class="bit">
<h3 class="title title-3">Current Checklists</h3>
</div>
<div class="bit">
<h3 class="title title-3">Studio Checklists</h3>
<nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="#course-checklist1">Getting Started with Studio</a>
</li>
<li class="nav-item">
<a href="#course-checklist2">Draft a Rough Course Outline</a>
</li>
<li class="nav-item">
<a href="#course-checklist3">Explore edX's Support Tools</a>
</li>
<li class="nav-item">
<a href="#course-checklist4">Draft your Course Introduction</a>
</li>
</ol>
</nav>
</div>
<div class="bit">
<h3 class="title title-3">Completed Checklists</h3>
<nav class="nav-page checklists-completed">
<ol>
<li class="nav-item">
<a href="#course-checklist1">Getting Started with Studio</a>
</li>
</ol>
<ol>
% for checklist in checklists:
<li class="nav-item">
<a href="${'#course-checklist' + str(loop.index)}">${checklist['short_description']}</a>
</li>
% endfor
</ol>
</nav>
</div>
</aside>
</section>
</div>
</aside>
</section>
</div>
</%block>
<%block name="view_alerts">
<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">Your policy changes have been saved.</h2>
<p>Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.</p>
</div>
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<a href="#" rel="view" class="action action-alert-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close alert</span>
</a>
<div class="copy">
<h2 class="title title-3">Your policy changes have been saved.</h2>
<p>Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.</p>
</div>
<a href="#" rel="view" class="action action-alert-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close alert</span>
</a>
</div>
</div>
</%block>
......@@ -598,56 +113,55 @@
// checklists - prototype/basic js
$(document).ready(function() {
$('.course-checklist .checklist-title').each(function(e){
$(this).addClass('is-selectable').attr('title','Collapse/Expand this Checklist').bind('click', toggleChecklist);
});
$('.course-checklist .task label').each(function(e){
$(this).bind('click', toggleTask);
});
// demo/proof of concept for visual progress
$('.demo-checklistviz').click(function(e){
(e).preventDefault();
$('#course-checklist1 .viz-checklist-status .viz-checklist-status-value').css('width','25%');
});
function toggleChecklist(e) {
(e).preventDefault();
$(this).closest('.course-checklist').toggleClass('is-collapsed');
}
function toggleTask(e) {
(e).preventDefault();
var $taskInput = $(this).find('.task-input');
if ($taskInput.attr('checked')) {
$taskInput.removeAttr('checked');
console.log('removing check');
}
else {
$taskInput.attr('checked', 'checked');
console.log('adding check');
}
$(this).closest('.task').toggleClass('is-completed');
}
// in-progress update checklist progress (based on checkbox check/uncheck events)
function updateChecklistProgress() {
var $statusCount = $(this).closest('.course-checklist').find('.status-count');
var $statusAmount = $(this).closest('.course-checklist').find('.status-amount');
if ($(this).attr('checked')) {
console.log('adding');
}
else {
console.log('subtracting');
}
}
$('.course-checklist .checklist-title').each(function(e){
$(this).addClass('is-selectable').bind('click', toggleChecklist);
});
$('.course-checklist .task label').each(function(e){
$(this).bind('click', toggleTask);
});
// demo/proof of concept for visual progress
$('.demo-checklistviz').click(function(e){
(e).preventDefault();
$('#course-checklist1 .viz-checklist-status .viz-checklist-status-value').css('width','25%');
});
function toggleChecklist(e) {
(e).preventDefault();
$(this).closest('.course-checklist').toggleClass('is-collapsed');
}
function toggleTask(e) {
(e).preventDefault();
var $taskInput = $(this).find('.task-input');
if ($taskInput.attr('checked')) {
$taskInput.removeAttr('checked');
console.log('removing check');
}
else {
$taskInput.attr('checked', 'checked');
console.log('adding check');
}
$(this).closest('.task').toggleClass('is-completed');
}
// in-progress update checklist progress (based on checkbox check/uncheck events)
function updateChecklistProgress() {
var $statusCount = $(this).closest('.course-checklist').find('.status-count');
var $statusAmount = $(this).closest('.course-checklist').find('.status-amount');
if ($(this).attr('checked')) {
console.log('adding');
}
else {
console.log('subtracting');
}
}
});
</script>
</%block>
\ No newline at end of file
common/lib/xmodule/xmodule/templates/course/empty.yaml
......@@ -3,30 +3,104 @@ metadata:
display_name: Empty
start: 2020-10-10T10:00
checklists: [
{"short_description" : "Getting Started With Studio",
"items" : [{"short_description": "Add Course Team Members",
"long_description": "Grant your collaborators permission to edit your course so you can work together.",
"is_checked": false,
"action_url": "/manage_users/",
"action_text": "Edit Course Team"},
{"short_description": "Drink Whiskey",
"long_description": "Team-building activity.",
"is_checked": false,
"action_url": "/drink_alcohol",
"action_text": "Drink"}],
"completed" : false},
{"short_description" : "Launching Your Course",
"items" : [{"short_description": "Add Content",
"long_description": "Create videos and problems.",
"is_checked": false,
"action_url": "",
"action_text": ""},
{"short_description": "View Course as a Student",
"long_description": "Create a student account and view your course.",
"is_checked": false,
"action_url": "",
"action_text": ""}],
"completed" : false}
{"short_description" : "Getting Started With Studio",
"items" : [{"short_description": "Add Course Team Members",
"long_description": "Grant your collaborators permission to edit your course so you can work together.",
"is_checked": false,
"action_url": "/manage_users/",
"action_text": "Edit Course Team"},
{"short_description": "Set Important Dates for Your Course",
"long_description": "Establish your course's student enrollment and launch dates on the Schedule and Details Settings page.",
"is_checked": false,
"action_url": "/settings-details/",
"action_text": "Edit Course Details &amp; Schedule"},
{"short_description": "Draft Your Course's Grading Policy",
"long_description": "Regardless of whether you have all your course assignments written, you can immediately get started setting up assignment types and a grade computation scheme.",
"is_checked": false,
"action_url": "/settings-grading/",
"action_text": "Edit Grading Settings"},
{"short_description": "Explore the other Studio Checklists",
"long_description": "They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.",
"is_checked": false,
"action_url": "",
"action_text": ""}],
"completed" : false},
{"short_description" : "Draft a Rough Course Outline",
"items" : [{"short_description": "Create your first Section and Subsection",
"long_description": "Walk through the mechanics of building your course's first section and subsection through your course outline to start.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"},
{"short_description": "Set your first Section's Release Date",
"long_description": "Sections are released sequentially to students, and you have complete control over they are released to students.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"},
{"short_description": "Designate a Subsection as Graded",
"long_description": "Assignment types are defined in your grading settings but can be quickly associated with sections using your course outline.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"},
{"short_description": "Reordering Course Content",
"long_description": "From the Course Outline, you can easily reorder your course content based on the progression you'd like students to walk through.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"},
{"short_description": "Renaming Course Sections",
"long_description": "Learn how to rename Sections by clicking on its name from the Course Outline; this should open the editing mode.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"},
{"short_description": "Deleting Course Content",
"long_description": "Try out deleting on a section, subsection, or unit you don't need anymore. Be careful though, anything inside the course content you delete is also removed.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"},
{"short_description": "Add an Instructor-Only Section to Your Outline",
"long_description": "Some course authors find creating a section for unsorted, in-progress work useful. To do this, create a section and set the release date to the distant future.",
"is_checked": false,
"action_url": "/course/",
"action_text": "Edit in Course Outline"}],
"completed" : false},
{"short_description" : "Explore edX's Support Tools",
"items" : [{"short_description": "Explore the Studio Help Forum",
"long_description": "Access the Studio Help forum from the menu that appears when you click your user name in the top right corner of Studio.",
"is_checked": false,
"action_url": "http://help.edge.edx.org/",
"action_text": "Visit Studio Help"},
{"short_description": "Enroll in edX101",
"long_description": "Register for edX101, edX's primer for course creation.",
"is_checked": false,
"action_url": "/",
"action_text": "Register for edX 101"},
{"short_description": "Download the Studio Documentation",
"long_description": "View the searchable Studio documentation to find answers to your questions or information about how to do specific tasks. Once you download the PDF, you can view it offline.",
"is_checked": false,
"action_url": "/",
"action_text": "Download Documentation"}],
"completed" : false},
{"short_description" : "Draft your Course Introduction",
"items" : [{"short_description": "Drafting a Course Description",
"long_description": "Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.",
"is_checked": false,
"action_url": "/settings-details/",
"action_text": "Edit Course Details &amp; Schedule"},
{"short_description": "Adding Staff Bios",
"long_description": "Showing prospective students who will be their instructor is helpful, so we recommend including staff bios in the Course introduction page.",
"is_checked": false,
"action_url": "/settings-details/",
"action_text": "Edit Course Details &amp; Schedule"},
{"short_description": "Add Course FAQs",
"long_description": "Students often have questions about courses, and including a short list of frequently asked questions up front often reduces the number of students who are confused.",
"is_checked": false,
"action_url": "/settings-details/",
"action_text": "Edit Course Details &amp; Schedule"},
{"short_description": "Add Course Prerequisites",
"long_description": "Before a student jumps into a course without the necessary preparation, we'd like them to understand the prerequisites that will make them more likely to succeed.",
"is_checked": false,
"action_url": "/settings-details/",
"action_text": "Edit Course Details &amp; Schedule"}],
"completed" : false}
]
data: { 'textbooks' : [ ], 'wiki_slug' : null }
children: []
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