diff --git a/cms/envs/common.py b/cms/envs/common.py
index f036200ac3..48032fdde3 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -722,7 +722,7 @@ base_vendor_js = [
     'edx-ui-toolkit/js/utils/html-utils.js',
 
     # Load Bootstrap and supporting libraries
-    'common/js/vendor/tether.js',
+    'common/js/vendor/popper.js',
     'common/js/vendor/bootstrap.js',
 
     # Finally load RequireJS
diff --git a/cms/static/sass/bootstrap/_base.scss b/cms/static/sass/bootstrap/_base.scss
index 95c50d513d..7f4e1efd05 100644
--- a/cms/static/sass/bootstrap/_base.scss
+++ b/cms/static/sass/bootstrap/_base.scss
@@ -9,3 +9,7 @@
 .is-hidden {
   display: none;
 }
+
+.sr {
+  @include sr-only();
+}
diff --git a/cms/static/sass/bootstrap/_components.scss b/cms/static/sass/bootstrap/_components.scss
index 618b9b7b68..5a80e4c80a 100644
--- a/cms/static/sass/bootstrap/_components.scss
+++ b/cms/static/sass/bootstrap/_components.scss
@@ -4,7 +4,7 @@
 // Skip nav
 .nav-skip,
 .transcript-skip {
-  font-size: 14px;
+  font-size: $font-size-base;
   line-height: 14px;
   display: inline-block;
   position: absolute;
@@ -12,7 +12,7 @@
   top: -($baseline*30);
   overflow: hidden;
   background: $white;
-  border-bottom: 1px solid $gray-lightest;
+  border-bottom: 1px solid $gray-500;
   padding: ($baseline*0.75) ($baseline/2);
 
   &:focus,
@@ -47,7 +47,7 @@
   @include clearfix();
   position: relative;
   margin: ($baseline*2) 0 0 0;
-  border-top: 1px solid $gray-light;
+  border-top: 1px solid $gray-500;
   width: 100%;
 
   .wrapper-inner {
@@ -70,17 +70,17 @@
     .cta-show-sock {
       @extend %ui-btn-pill;
       @extend %t-action4;
-      background: $gray-lightest;
+      background: theme-color("light");
       padding: ($baseline/2) $baseline;
-      color: $gray-light;
+      color: theme-color("dark");
 
       .icon {
         margin-right: $baseline/4;
       }
 
       &:hover {
-        background: $brand-primary;
-        color: $white;
+        background: theme-color("primary");
+        color: theme-color("inverse");
       }
     }
   }
@@ -93,7 +93,7 @@
     width: flex-grid(12);
     margin: 0 auto;
     padding: ($baseline*2) 0;
-    color: $gray-light;
+    color: $gray-500;
 
     // support body
     header {
@@ -184,11 +184,11 @@
 
   // case: sock content is shown
   &.is-shown {
-    border-color: $gray-dark;
+    border-color: theme-color("primary");
 
     .list-cta .cta-show-sock {
-      background: $gray-dark;
-      border-color: $gray-dark;
+      background: theme-color("primary");
+      border-color: theme-color("primary");
       color: $white;
     }
   }
diff --git a/cms/static/sass/bootstrap/_footer.scss b/cms/static/sass/bootstrap/_footer.scss
index bcbbd57cb6..d7da5bf8e0 100644
--- a/cms/static/sass/bootstrap/_footer.scss
+++ b/cms/static/sass/bootstrap/_footer.scss
@@ -18,7 +18,7 @@
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
-    color: $gray-light;
+    color: $gray-500;
 
     .footer-content-primary {
       @include clearfix();
diff --git a/cms/static/sass/bootstrap/_header.scss b/cms/static/sass/bootstrap/_header.scss
index adac9cf019..1d140e8ff0 100644
--- a/cms/static/sass/bootstrap/_header.scss
+++ b/cms/static/sass/bootstrap/_header.scss
@@ -46,6 +46,7 @@
   .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
     display: inline-block;
     vertical-align: middle;
+    margin-bottom: 0;
   }
 
   .user-language-selector {
@@ -78,7 +79,7 @@
     }
 
     .nav-item a {
-      color: $gray;
+      color: color("gray");
 
       &:hover {
         color: $link-hover-color;
@@ -90,16 +91,8 @@
   .nav-dd {
 
     .title {
-      @extend %t-action2;
-      @extend %ui-btn-dd-nav-primary;
-
-      .label, .fa-caret-down {
-
-      }
-
-      .label {
-
-      }
+      padding: $baseline/2 $baseline/2;
+      font-size: $font-size-lg;
 
       .fa-caret-down {
         opacity: 0.25;
@@ -144,11 +137,11 @@
   // specific elements - course name/info
   .info-course {
     margin-right: flex-gutter();
-    border-right: 1px solid $gray-lighter;
+    border-right: 1px solid $gray-300;
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
     .course-org, .course-number {
-      font-size: 12px;
+      font-size: $font-size-sm;
       line-height: 12px;
       display: inline-block;
       vertical-align: middle;
@@ -157,7 +150,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       opacity: 1.0;
-      color: $gray-dark;
+      color: theme-color("primary");
     }
 
     .course-org {
@@ -177,7 +170,7 @@
     // entire link
     .course-link {
       display: block;
-      color: $gray-dark;
+      color: theme-color("primary");
 
       &:hover {
         color: $link-hover-color;
@@ -406,7 +399,7 @@
     box-shadow: 0 1px 1px $shadow-l1;
     position: relative;
     width: 100%;
-    border: 1px solid $gray-light;
+    border: 1px solid $gray-500;
     padding: ($baseline/2) ($baseline*0.75);
     background: $white;
 
@@ -429,7 +422,7 @@
 
     &:before {
       border-color: rgba(178, 178, 178, 0);
-      border-bottom-color: $gray-light;
+      border-bottom-color: $gray-500;
       border-width: 11px;
     }
 
@@ -438,7 +431,7 @@
       @extend %t-regular;
       display: block;
       margin: 0 0 ($baseline/4) 0;
-      border-bottom: 1px solid $gray-lighter;
+      border-bottom: 1px solid $gray-300;
       padding: 0 0($baseline/4) 0;
 
       &:last-child {
@@ -447,11 +440,18 @@
         padding-bottom: 0;
       }
 
+      h3 {
+        font-size: $font-size-lg;
+      }
+
       a {
         display: block;
+        color: $body-color;
+        font-size: $font-size-lg;
+        font-weight: 600;
 
         &:hover, &:active {
-          color: $brand-primary;
+          color: theme-color("primary");
         }
       }
     }
@@ -483,6 +483,10 @@
   // CASE: right-hand side arrow/dd
   &.ui-right {
 
+    > ol {
+      margin-bottom: 0;
+    }
+
     .wrapper-nav-sub {
       left: none;
       right: 0;
@@ -503,66 +507,3 @@
     }
   }
 }
-
-// ====================
-
-// STATE: active/current nav states
-
-.nav-item.is-current,
-body.howitworks .nav-not-signedin-hiw,
-
-// dashboard
-body.dashboard .nav-account-dashboard,
-
-// course content
-body.course.view-outline .nav-course-courseware .title,
-body.course.view-updates .nav-course-courseware .title,
-body.course.view-static-pages .nav-course-courseware .title,
-body.course.view-uploads .nav-course-courseware .title,
-body.course.view-textbooks .nav-course-courseware .title,
-body.course.view-video-uploads .nav-course-courseware .title,
-
-body.course.view-outline .nav-course-courseware-outline,
-body.course.view-updates .nav-course-courseware-updates,
-body.course.view-static-pages .nav-course-courseware-pages,
-body.course.view-uploads .nav-course-courseware-uploads,
-body.course.view-textbooks .nav-course-courseware-textbooks,
-body.course.view-video-uploads .nav-course-courseware-videos,
-
-// course settings
-body.course.schedule .nav-course-settings .title,
-body.course.grading .nav-course-settings .title,
-body.course.view-team .nav-course-settings .title,
-body.course.view-group-configurations .nav-course-settings .title,
-body.course.advanced .nav-course-settings .title,
-body.course.view-certificates .nav-course-settings .title,
-
-body.course.schedule .nav-course-settings-schedule,
-body.course.grading .nav-course-settings-grading,
-body.course.view-team .nav-course-settings-team,
-body.course.view-group-configurations .nav-course-settings-group-configurations,
-body.course.advanced .nav-course-settings-advanced,
-body.course.view-certificates .nav-course-settings-certificates,
-
-// course tools
-body.course.view-import .nav-course-tools .title,
-body.course.view-export .nav-course-tools .title,
-body.course.view-export-git .nav-course-tools .title,
-
-body.course.view-import .nav-course-tools-import,
-body.course.view-export .nav-course-tools-export,
-body.course.view-export-git .nav-course-tools-export-git,
-
-// content library settings
-body.course.view-team .nav-library-settings .title,
-
-body.course.view-team .nav-library-settings-team
-
-{
-  color: $brand-primary;
-
-  a {
-    color: $brand-primary;
-    pointer-events: none;
-  }
-}
diff --git a/cms/static/sass/bootstrap/_layouts.scss b/cms/static/sass/bootstrap/_layouts.scss
index debb3548d5..23dde7f9bf 100644
--- a/cms/static/sass/bootstrap/_layouts.scss
+++ b/cms/static/sass/bootstrap/_layouts.scss
@@ -15,8 +15,8 @@
     .nav-item {
       &.active, &:hover{
         .nav-link {
-          border-bottom-color: $brand-primary;
-          color: $brand-primary;
+          border-bottom-color: theme-color("primary");
+          color: theme-color("primary");
         }
       }
 
@@ -26,7 +26,7 @@
         border-width: 0 0 $baseline/5 0;
         border-bottom-color: transparent;
 
-        @media (max-width: map-get($grid-breakpoints, md)) {
+        @include media-breakpoint-down(md) {
           border: none;
           text-align: left;
           padding: 0 0 $baseline/2 0;
@@ -36,11 +36,11 @@
   }
 
   .main-container {
-    border: 1px solid $inverse-color;
+    border: 1px solid $border-color;
     background-color: $body-bg;
 
     .page-header {
-      border-bottom: 1px solid $inverse-color;
+      border-bottom: 1px solid $border-color;
       padding: 20px;
     }
 
@@ -78,16 +78,22 @@
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto $baseline auto;
-    color: $gray-dark;
+    color: $body-color;
   }
 
   .mast {
-    border-bottom: 1px solid $gray-light;
+    border-bottom: 1px solid $border-color;
     padding-bottom: ($baseline/2);
 
     // layout without actions
     .page-header {
-      width: flex-grid(12);
+      display: flex;
+      flex-direction: column;
+
+      .subtitle {
+        font-size: $font-size-base;
+        margin-bottom: $baseline/4;
+      }
     }
 
     // layout with actions
@@ -162,30 +168,30 @@
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
-        color: $gray-dark;
+        color: $body-color;
 
         &.navigation-current {
           @extend %ui-disabled;
-          color: $gray;
+          color: color("gray");
           max-width: 250px;
 
           &:before {
-            color: $gray;
+            color: color("gray");
           }
         }
       }
 
       .navigation-link:hover {
-        color: $brand-primary;
+        color: theme-color("primary");
       }
 
       .navigation-item:before {
         content: " / ";
         margin: ($baseline/4);
-        color: $gray;
+        color: color("gray");
 
         &:hover {
-          color: $gray;
+          color: color("gray");
         }
       }
 
@@ -201,7 +207,7 @@
 
     .page-header-sub {
       @extend %t-title4;
-      color: $gray;
+      color: color("gray");
       font-weight: 300;
     }
 
@@ -210,7 +216,7 @@
       float: left;
       width: flex-grid(12,12);
       margin-top: ($baseline/2);
-      border-top: 1px solid $gray-lighter;
+      border-top: 1px solid $border-color;
       padding-top: ($baseline/2);
       font-weight: 600;
     }
@@ -224,30 +230,37 @@
 
 // layout - basic page content
 .wrapper-content {
-  margin: 0;
-  padding: 0 $baseline;
-  position: relative;
+  @include make-container();
+  @include make-container-max-widths();
 }
 
+// Specify a two column layout for content
 .content {
-  @include clearfix();
-  @extend %t-copy-base;
-  max-width: $studio-max-width;
-  width: flex-grid(12);
-  margin: 0 auto;
-  color: $gray-dark;
+  @include make-row();
+
+  @media (min-width: 576px) {
+    .content-primary {
+      flex: 0 0 66.67%;
+      max-width: 66.67%;
+    }
+
+    .content-supplementary {
+      flex: 0 0 25%;
+      max-width: 25%;
+    }
+  }
 
   header {
     position: relative;
     margin-bottom: $baseline;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-300;
     padding-bottom: ($baseline/2);
 
     .title-sub {
       @extend %t-copy-sub1;
       display: block;
       margin: 0;
-      color: $gray-light;
+      color: $gray-500;
     }
 
     .title-1 {
@@ -255,31 +268,17 @@
       @extend %t-strong;
       margin: 0;
       padding: 0;
-      color: $gray-dark;
+      color: theme-color("primary");
     }
   }
 }
 
-// 3/4 - 1/4 two col layout
-%two-col-1 {
-  .content-primary {
-    float: left;
-    margin-right: flex-gutter();
-    width: flex-grid(9,12);
-    box-shadow: none;
-    border: 0;
-    background-color: $white;
-  }
-
-  .content-supplementary {
-    float: left;
-    width: flex-grid(3,12);
-  }
-}
-
-
 // layout - primary content
 .content-primary {
+  border: 1px solid theme-color("dark");
+  background-color: theme-color("inverse");
+  padding: $baseline ($baseline*1.5);
+  margin-right: $baseline;
 
   .title-1 {
     @extend %t-title3;
@@ -310,7 +309,7 @@
       float: right;
       margin-top: ($baseline/2);
       text-align: right;
-      color: $gray-dark;
+      color: theme-color("primary");
     }
   }
 }
diff --git a/cms/static/sass/bootstrap/_navigation.scss b/cms/static/sass/bootstrap/_navigation.scss
index a45ae4c008..20bf307d00 100644
--- a/cms/static/sass/bootstrap/_navigation.scss
+++ b/cms/static/sass/bootstrap/_navigation.scss
@@ -1,11 +1,11 @@
 // Local overrides for bootstrap navigation bar theming
 .navigation-container {
-  border-bottom: 2px solid $brand-primary;
+  border-bottom: 2px solid theme-color("primary");
   text-decoration: none;
   background-color: $header-bg;
 
   &.slim {
-    border-bottom: 1px solid $inverse-color;
+    border-bottom: 1px solid $border-color;
     box-shadow: 0 1px 5px 0 $black-t0;
   }
 
@@ -35,7 +35,7 @@
       list-style: none;
 
       .nav-link {
-        color: $brand-primary;
+        color: theme-color("primary");
       }
 
       .user-image-frame {
@@ -48,13 +48,13 @@
         display: none;
       }
 
-      @media (max-width: map-get($grid-breakpoints,md)) {
+      @include media-breakpoint-down(md) {
         &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
           display: initial;
           margin: $baseline/4 $baseline/2;
 
           a {
-            color: $brand-primary;
+            color: theme-color("primary");
             padding: 0;
             text-decoration: none;
 
@@ -74,10 +74,10 @@
     }
 
     .navbar-right .nav-item {
-      @media (min-width: map-get($grid-breakpoints,md)) {
+      @include media-breakpoint-down(md) {
         .nav-link {
           text-transform: none;
-          color: $brand-inverse;
+          color: $gray-900;
           font-weight: $font-weight-bold;
           cursor: pointer;
         }
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 5cba0a4051..cbe419c9e4 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -1,3 +1,5 @@
+## xss-lint: disable=mako-missing-default
+
 ## coding=utf-8
 
 ## Pages currently use v1 styling by default. Once the Pattern Library
@@ -102,7 +104,7 @@ from openedx.core.djangolib.markup import HTML
       </div>
 
       <main id="main" aria-label="Content" tabindex="-1">
-        <div id="content" class="content">
+        <div id="content">
         <%block name="content"></%block>
         </div>
       </main>
diff --git a/cms/templates/ux/reference/bootstrap/course-settings.html b/cms/templates/ux/reference/bootstrap/course-settings.html
new file mode 100644
index 0000000000..00ca774f2e
--- /dev/null
+++ b/cms/templates/ux/reference/bootstrap/course-settings.html
@@ -0,0 +1,14 @@
+## mako
+
+<%page expression_filter="h"/>
+
+## Override the default styles_version to use Bootstrap
+<%! main_css = "css/bootstrap/studio-main.css" %>
+
+<%inherit file="/base.html" />
+<%block name="title">Bootstrap Test Page</%block>
+<%block name="bodyclass">bootstrap-test</%block>
+
+<%block name="content">
+<%include file="../fragments/course-settings.html"/>
+</%block>
diff --git a/cms/templates/ux/reference/bootstrap/test.html b/cms/templates/ux/reference/bootstrap/test.html
deleted file mode 100644
index bf68ae86a4..0000000000
--- a/cms/templates/ux/reference/bootstrap/test.html
+++ /dev/null
@@ -1,397 +0,0 @@
-## mako
-
-<%page expression_filter="h"/>
-
-## Override the default styles_version to use Bootstrap
-<%! main_css = "css/bootstrap/studio-main.css" %>
-
-<%inherit file="/base.html" />
-<%block name="title">Bootstrap Test Page</%block>
-<%block name="bodyclass">bootstrap-test</%block>
-
-<%block name="content">
-<div class="wrapper-mast wrapper">
-    <header class="mast has-actions has-subtitle">
-        <h1 class="page-header">
-            <small class="subtitle">Content</small>
-            <span class="sr">&gt; </span>Course Outline
-        </h1>
-
-        <nav class="nav-actions" aria-label="Page Actions">
-            <h3 class="sr">Page Actions</h3>
-            <ul>
-                <li class="nav-item">
-                    <a href="#" class="button button-new" data-category="chapter" data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-default-name="Section" title="Click to add a new section">
-                        <span class="icon fa fa-plus" aria-hidden="true"></span>New Section
-                    </a>
-                </li>
-                    <li class="nav-item">
-                        <a href="/course/course-v1:AndyA+AA101+1/search_reindex" class="button button-reindex" data-category="reindex" title="Reindex current course">
-                            <span class="icon-arrow-right" aria-hidden="true"></span>Reindex
-                        </a>
-                    </li>
-                <li class="nav-item">
-                    <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
-                        <span class="collapse-all"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">Collapse All Sections</span></span>
-                        <span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <span class="label">Expand All Sections</span></span>
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a href="//localhost:8000/courses/course-v1:AndyA+AA101+1/jump_to/block-v1:AndyA+AA101+1+type@course+block@course" rel="external" class="button view-button view-live-button" title="Click to open the courseware in the LMS in a new tab" target="_blank">View Live</a>
-                </li>
-            </ul>
-        </nav>
-    </header>
-</div>
-
-<div class="wrapper-content wrapper">
-    <section class="content">
-        <article class="content-primary" role="main">
-            <div class="course-status">
-                <div class="status-release">
-                    <h2 class="status-release-label">Course Start Date:</h2>
-                    <p class="status-release-value">Jan 01, 2015 at 00:00 UTC</p>
-
-                    <ul class="status-actions">
-                      <li class="action-item action-edit">
-                        <a href="/settings/details/course-v1:AndyA+AA101+1" class="edit-button action-button" data-tooltip="Edit Start Date">
-                            <span class="icon fa fa-pencil" aria-hidden="true"></span>
-                            <span class="action-button-text sr">Edit Start Date</span>
-                        </a>
-                      </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="wrapper-dnd" lang="en">
-
-                <h2 class="sr">Course Outline</h2>
-                <article class="outline outline-complex outline-course" data-locator="block-v1:AndyA+AA101+1+type@course+block@course" data-course-key="course-v1:AndyA+AA101+1">
-
-
-
-
-        <div class="outline-content course-content">
-            <ol class="list-sections is-sortable">
-                <li class="ui-splint ui-splint-indicator">
-                    <span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-                </li>
-            <li class="outline-item outline-section is-live is-draggable is-collapsible " data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-locator="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" style="position: relative;">
-
-    <span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-
-    <div class="section-header">
-
-            <h3 class="section-header-details expand-collapse collapse ui-toggle-expansion" title="Collapse/Expand this section">
-                <span class="icon fa fa-caret-down" aria-hidden="true"></span>
-
-
-                    <span class="wrapper-section-title wrapper-xblock-field incontext-editor is-editable" data-field="display_name" data-field-display-name="Display Name">
-                        <span class="section-title item-title xblock-field-value incontext-editor-value">Section</span>
-
-    <div class="incontext-editor-action-wrapper">
-    <a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="Edit the name">
-        <span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> Edit</span>
-    </a>
-</div>
-
-<div class="xblock-string-field-editor incontext-editor-form">
-  <form>
-
-    <label><span class="sr">Edit Display Name (required)</span>
-      <input type="text" value="Section" class="xblock-field-input incontext-editor-input" data-metadata-name="display_name" title="Edit the name">
-    </label>
-    <button class="sr action action-primary" name="submit" type="submit">Save</button>
-    <button class="sr action action-secondary" name="cancel" type="button">Cancel</button>
-  </form>
-</div>
-
-</span>
-
-            </h3>
-
-        <div class="section-header-actions">
-            <ul class="actions-list">
-
-                    <li class="action-item action-publish">
-                        <a href="#" data-tooltip="Publish" class="publish-button action-button">
-                            <span class="icon fa fa-upload" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Publish</span>
-                        </a>
-                    </li>
-
-
-                    <li class="action-item action-configure">
-                        <a href="#" data-tooltip="Configure" class="configure-button action-button">
-                            <span class="icon fa fa-gear" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Configure</span>
-                        </a>
-                    </li>
-
-
-                    <li class="action-item action-duplicate">
-                        <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                            <span class="icon fa fa-copy" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Duplicate</span>
-                        </a>
-                    </li>
-
-
-                    <li class="action-item action-delete">
-                        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                            <span class="icon fa fa-trash-o" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Delete</span>
-                        </a>
-                    </li>
-
-
-                <li class="action-item action-drag">
-                    <span data-tooltip="Drag to reorder" class="drag-handle section-drag-handle action">
-                        <span class="sr">Drag to reorder</span>
-                    </span>
-                </li>
-
-            </ul>
-        </div>
-    </div>
-    <div class="section-status">
-
-
-              <div class="status-release">
-                <p>
-                    <span class="sr status-release-label">Release Status:</span>
-                    <span class="status-release-value">
-
-
-                                <span class="icon fa fa-check" aria-hidden="true"></span>
-                                Released:
-
-
-                                Jan 01, 2015 at 00:00 UTC
-
-
-                    </span>
-                </p>
-              </div>
-
-
-            <div class="status-hide-after-due">
-                <p>
-
-                </p>
-            </div>
-
-
-    </div>
-
-
-
-
-        <div class="outline-content section-content">
-            <ol class="list-subsections is-sortable">
-                <li class="ui-splint ui-splint-indicator">
-                    <span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-                </li>
-            <li class="outline-item outline-subsection is-live is-draggable is-collapsible is-collapsed" data-parent="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" data-locator="block-v1:AndyA+AA101+1+type@sequential+block@dc1b2b84c9be4646a404f6425792eb90" style="position: relative;">
-
-    <span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-
-    <div class="subsection-header">
-
-            <h3 class="subsection-header-details expand-collapse expand ui-toggle-expansion" title="Collapse/Expand this subsection">
-                <span class="icon fa fa-caret-down" aria-hidden="true"></span>
-
-
-                    <span class="wrapper-subsection-title wrapper-xblock-field incontext-editor is-editable" data-field="display_name" data-field-display-name="Display Name">
-                        <span class="subsection-title item-title xblock-field-value incontext-editor-value">Subsection</span>
-
-    <div class="incontext-editor-action-wrapper">
-    <a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="Edit the name">
-        <span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> Edit</span>
-    </a>
-</div>
-
-<div class="xblock-string-field-editor incontext-editor-form">
-  <form>
-
-    <label><span class="sr">Edit Display Name (required)</span>
-      <input type="text" value="Subsection" class="xblock-field-input incontext-editor-input" data-metadata-name="display_name" title="Edit the name">
-    </label>
-    <button class="sr action action-primary" name="submit" type="submit">Save</button>
-    <button class="sr action action-secondary" name="cancel" type="button">Cancel</button>
-  </form>
-</div>
-
-</span>
-
-            </h3>
-
-        <div class="subsection-header-actions">
-            <ul class="actions-list">
-
-                    <li class="action-item action-publish">
-                        <a href="#" data-tooltip="Publish" class="publish-button action-button">
-                            <span class="icon fa fa-upload" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Publish</span>
-                        </a>
-                    </li>
-
-
-                    <li class="action-item action-configure">
-                        <a href="#" data-tooltip="Configure" class="configure-button action-button">
-                            <span class="icon fa fa-gear" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Configure</span>
-                        </a>
-                    </li>
-
-
-                    <li class="action-item action-duplicate">
-                        <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                            <span class="icon fa fa-copy" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Duplicate</span>
-                        </a>
-                    </li>
-
-
-                    <li class="action-item action-delete">
-                        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                            <span class="icon fa fa-trash-o" aria-hidden="true"></span>
-                            <span class="sr action-button-text">Delete</span>
-                        </a>
-                    </li>
-
-
-                <li class="action-item action-drag">
-                    <span data-tooltip="Drag to reorder" class="drag-handle subsection-drag-handle action">
-                        <span class="sr">Drag to reorder</span>
-                    </span>
-                </li>
-
-            </ul>
-        </div>
-    </div>
-    <div class="subsection-status">
-
-
-              <div class="status-release">
-                <p>
-                    <span class="sr status-release-label">Release Status:</span>
-                    <span class="status-release-value">
-
-
-                                <span class="icon fa fa-check" aria-hidden="true"></span>
-                                Released:
-
-
-                                Jan 01, 2015 at 00:00 UTC
-
-
-                    </span>
-                </p>
-              </div>
-
-
-            <div class="status-hide-after-due">
-                <p>
-
-                </p>
-            </div>
-
-
-    </div>
-
-
-
-
-        <div class="outline-content subsection-content">
-            <ol class="list-units is-sortable">
-                <li class="ui-splint ui-splint-indicator">
-                    <span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-                </li>
-            </ol>
-
-
-
-                <div class="add-unit add-item">
-                    <a href="#" class="button button-new" data-category="vertical" data-parent="block-v1:AndyA+AA101+1+type@sequential+block@dc1b2b84c9be4646a404f6425792eb90" data-default-name="Unit" title="Click to add a new Unit">
-                        <span class="icon fa fa-plus" aria-hidden="true"></span>New Unit
-                    </a>
-                </div>
-
-
-        </div>
-
-
-
-    <span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-</li></ol>
-
-
-
-                <div class="add-subsection add-item">
-                    <a href="#" class="button button-new" data-category="sequential" data-parent="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" data-default-name="Subsection" title="Click to add a new Subsection">
-                        <span class="icon fa fa-plus" aria-hidden="true"></span>New Subsection
-                    </a>
-                </div>
-
-
-        </div>
-
-
-
-    <span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
-</li></ol>
-
-
-
-                <div class="add-section add-item">
-                    <a href="#" class="button button-new" data-category="chapter" data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-default-name="Section" title="Click to add a new Section">
-                        <span class="icon fa fa-plus" aria-hidden="true"></span>New Section
-                    </a>
-                </div>
-
-
-        </div>
-
-
-
-
-</article>
-            </div>
-            <div class="ui-loading is-hidden">
-                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
-            </div>
-        </article>
-        <aside class="content-supplementary" role="complementary">
-            <div class="bit">
-                <h3 class="title-3">Creating your course organization</h3>
-                <p>You add sections, subsections, and units directly in the outline.</p>
-                <p>Create a section, then add subsections and units. Open a unit to add course components.</p>
-            </div>
-            <div class="bit">
-                <h3 class="title-3">Reorganizing your course</h3>
-                <p>Drag sections, subsections, and units to new locations in the outline.</p>
-                <div class="external-help">
-                    <a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_outline.html" target="_blank" class="button external-help-button">Learn more about the course outline</a>
-                </div>
-            </div>
-            <div class="bit">
-                <h3 class="title-3">Setting release dates and grading policies</h3>
-                <p>Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.</p>
-                <div class="external-help">
-                    <a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/grading/index.html" target="_blank" class="button external-help-button">Learn more about grading policy settings</a>
-                </div>
-            </div>
-            <div class="bit">
-                <h3 class="title-3">Changing the content learners see</h3>
-                <p>To publish draft content, select the Publish icon for a section, subsection, or unit.</p>
-                <p>To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate <strong>Hide</strong> option. Grades for hidden sections, subsections, and units are not included in grade calculations.</p>
-                <p>To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select <strong>Hide content after due date</strong>. Grades for the subsection remain included in grade calculations.</p>
-                <div class="external-help">
-                    <a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/controlling_content_visibility.html" target="_blank" class="button external-help-button">Learn more about content visibility settings</a>
-                </div>
-            </div>
-
-        </aside>
-    </section>
-</div>
-</%block>
diff --git a/cms/templates/ux/reference/fragments/course-settings.html b/cms/templates/ux/reference/fragments/course-settings.html
new file mode 100644
index 0000000000..593ec77ced
--- /dev/null
+++ b/cms/templates/ux/reference/fragments/course-settings.html
@@ -0,0 +1,527 @@
+<script>
+    ## xss-lint: disable=mako-missing-default
+</script>
+<div class="wrapper-mast wrapper">
+  <header class="mast has-subtitle">
+    <h1 class="page-header">
+      <small class="subtitle">Settings</small>
+      <span class="sr">&gt; </span>Schedule &amp; Details
+    </h1>
+  </header>
+</div>
+
+<div class="wrapper-content wrapper">
+  <div class="content">
+    <div class="content-primary">
+      <form id="settings_details" class="settings-details" method="post" action="">
+        <div class="group-settings basic">
+          <header>
+            <h2 class="title-2">Basic Information</h2>
+            <span class="tip">The nuts and bolts of your course</span>
+          </header>
+
+          <ol class="list-input">
+            <li class="field text is-not-editable" id="field-course-organization">
+              <label for="course-organization">Organization</label>
+              <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-organization" readonly="">
+            </li>
+
+            <li class="field text is-not-editable" id="field-course-number">
+              <label for="course-number">Course Number</label>
+              <input title="This field is disabled: this information cannot be changed." type="text" class="short" id="course-number" readonly="">
+            </li>
+
+            <li class="field text is-not-editable" id="field-course-name">
+              <label for="course-name">Course Run</label>
+              <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" readonly="">
+            </li>
+          </ol>
+
+          <div class="note note-promotion note-promotion-courseURL has-actions">
+            <h3 class="title">Course Summary Page <span class="tip">(for student enrollment and access)</span></h3>
+            <div class="copy">
+
+              <p><a class="link-courseURL" rel="external" href="http://localhost:8000/courses/course-v1:AndyA+AA101+1/about" title="This link will open in a new browser window/tab" target="_blank">http://localhost:8000/courses/course-v1:AndyA+AA101+1/about</a></p>
+            </div>
+
+            <ul class="list-actions">
+              <li class="action-item">
+
+                <a title="Send a note to students via email" href="mailto:someone@domain.com?Subject=Enroll%20in%20AndyA%27s%20Test%20Course&amp;body=The%20course%20%22AndyA%27s%20Test%20Course%22%2C%20provided%20by%20Your%20Platform%20Name%20Here%2C%20is%20open%20for%20enrollment.%20Please%20navigate%20to%20this%20course%20at%20http%3A//localhost%3A8000/courses/course-v1%3AAndyA%2BAA101%2B1/about%20to%20enroll." class="action action-primary">
+                    <span class="icon fa fa-envelope-o icon-inline" aria-hidden="true"></span>Invite your students</a>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+        <hr class="divide">
+
+
+        <div class="group-settings schedule">
+          <header>
+            <h2 class="title-2">Course Schedule</h2>
+            <span class="tip">Dates that control when your course can be viewed</span>
+          </header>
+
+          <ol class="list-input">
+            <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 hasDatepicker" 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 ui-timepicker-input" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off">
+                <span class="tip tip-stacked timezone">(UTC)</span>
+              </div>
+            </li>
+
+            <li class="field-group field-group-course-end" id="course-end">
+              <div class="field date" id="field-course-end-date">
+                <label for="course-end-date">Course End Date</label>
+                <input type="text" class="end-date date end hasDatepicker" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
+                <span class="tip tip-stacked">Last day your course is active</span>
+              </div>
+
+              <div class="field time" id="field-course-end-time">
+                <label for="course-end-time">Course End Time</label>
+                <input type="text" class="time end ui-timepicker-input" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off">
+                <span class="tip tip-stacked timezone">(UTC)</span>
+              </div>
+            </li>
+          </ol>
+
+
+          <ol class="list-input">
+            <li class="field-group field-group-enrollment-start" id="enrollment-start">
+              <div class="field date" id="field-enrollment-start-date">
+                <label for="course-enrollment-start-date">Enrollment Start Date</label>
+                <input type="text" class="start-date date start hasDatepicker" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
+                <span class="tip tip-stacked">First day students can enroll</span>
+              </div>
+
+              <div class="field time" id="field-enrollment-start-time">
+                <label for="course-enrollment-start-time">Enrollment Start Time</label>
+                <input type="text" class="time start ui-timepicker-input" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off">
+                <span class="tip tip-stacked timezone">(UTC)</span>
+              </div>
+            </li>
+
+            <li class="field-group field-group-enrollment-end" id="enrollment-end">
+              <div class="field date " id="field-enrollment-end-date">
+                <label for="course-enrollment-end-date">Enrollment End Date</label>
+                <input type="text" class="end-date date end hasDatepicker" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
+                <span class="tip tip-stacked">
+                  Last day students can enroll.
+                </span>
+              </div>
+
+              <div class="field time " id="field-enrollment-end-time">
+                <label for="course-enrollment-end-time">Enrollment End Time</label>
+                <input type="text" class="time end ui-timepicker-input" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off">
+                <span class="tip tip-stacked timezone">(UTC)</span>
+              </div>
+            </li>
+          </ol>
+
+        </div>
+
+        <div class="group-settings course_details">
+          <header>
+            <h2 class="title-2">Course Details</h2>
+            <span class="tip">Provide useful information about your course</span>
+          </header>
+          <ol class="list-input">
+            <li class="field" id="field-course-language">
+              <label for="course-language">Course Language</label>
+              <select id="course-language">
+                <option value="" selected=""> - </option>
+                  <option value="aa">Afar</option>
+                  <option value="ab">Abkhazian</option>
+                  <option value="af">Afrikaans</option>
+                  <option value="ak">Akan</option>
+                  <option value="sq">Albanian</option>
+                  <option value="am">Amharic</option>
+                  <option value="ar">Arabic</option>
+                  <option value="an">Aragonese</option>
+                  <option value="hy">Armenian</option>
+                  <option value="as">Assamese</option>
+                  <option value="av">Avaric</option>
+                  <option value="ae">Avestan</option>
+                  <option value="ay">Aymara</option>
+                  <option value="az">Azerbaijani</option>
+                  <option value="ba">Bashkir</option>
+                  <option value="bm">Bambara</option>
+                  <option value="eu">Basque</option>
+                  <option value="be">Belarusian</option>
+                  <option value="bn">Bengali</option>
+                  <option value="bh">Bihari languages</option>
+                  <option value="bi">Bislama</option>
+                  <option value="bs">Bosnian</option>
+                  <option value="br">Breton</option>
+                  <option value="bg">Bulgarian</option>
+                  <option value="my">Burmese</option>
+                  <option value="ca">Catalan</option>
+                  <option value="ch">Chamorro</option>
+                  <option value="ce">Chechen</option>
+                  <option value="zh">Chinese</option>
+                  <option value="zh_HANS">Simplified Chinese</option>
+                  <option value="zh_HANT">Traditional Chinese</option>
+                  <option value="cu">Church Slavic</option>
+                  <option value="cv">Chuvash</option>
+                  <option value="kw">Cornish</option>
+                  <option value="co">Corsican</option>
+                  <option value="cr">Cree</option>
+                  <option value="cs">Czech</option>
+                  <option value="da">Danish</option>
+                  <option value="dv">Divehi</option>
+                  <option value="nl">Dutch</option>
+                  <option value="dz">Dzongkha</option>
+                  <option value="en">English</option>
+                  <option value="eo">Esperanto</option>
+                  <option value="et">Estonian</option>
+                  <option value="ee">Ewe</option>
+                  <option value="fo">Faroese</option>
+                  <option value="fj">Fijian</option>
+                  <option value="fi">Finnish</option>
+                  <option value="fr">French</option>
+                  <option value="fy">Western Frisian</option>
+                  <option value="ff">Fulah</option>
+                  <option value="ka">Georgian</option>
+                  <option value="de">German</option>
+                  <option value="gd">Gaelic</option>
+                  <option value="ga">Irish</option>
+                  <option value="gl">Galician</option>
+                  <option value="gv">Manx</option>
+                  <option value="el">Greek</option>
+                  <option value="gn">Guarani</option>
+                  <option value="gu">Gujarati</option>
+                  <option value="ht">Haitian</option>
+                  <option value="ha">Hausa</option>
+                  <option value="he">Hebrew</option>
+                  <option value="hz">Herero</option>
+                  <option value="hi">Hindi</option>
+                  <option value="ho">Hiri Motu</option>
+                  <option value="hr">Croatian</option>
+                  <option value="hu">Hungarian</option>
+                  <option value="ig">Igbo</option>
+                  <option value="is">Icelandic</option>
+                  <option value="io">Ido</option>
+                  <option value="ii">Sichuan Yi</option>
+                  <option value="iu">Inuktitut</option>
+                  <option value="ie">Interlingue</option>
+                  <option value="ia">Interlingua</option>
+                  <option value="id">Indonesian</option>
+                  <option value="ik">Inupiaq</option>
+                  <option value="it">Italian</option>
+                  <option value="jv">Javanese</option>
+                  <option value="ja">Japanese</option>
+                  <option value="kl">Kalaallisut</option>
+                  <option value="kn">Kannada</option>
+                  <option value="ks">Kashmiri</option>
+                  <option value="kr">Kanuri</option>
+                  <option value="kk">Kazakh</option>
+                  <option value="km">Central Khmer</option>
+                  <option value="ki">Kikuyu</option>
+                  <option value="rw">Kinyarwanda</option>
+                  <option value="ky">Kirghiz</option>
+                  <option value="kv">Komi</option>
+                  <option value="kg">Kongo</option>
+                  <option value="ko">Korean</option>
+                  <option value="kj">Kuanyama</option>
+                  <option value="ku">Kurdish</option>
+                  <option value="lo">Lao</option>
+                  <option value="la">Latin</option>
+                  <option value="lv">Latvian</option>
+                  <option value="li">Limburgan</option>
+                  <option value="ln">Lingala</option>
+                  <option value="lt">Lithuanian</option>
+                  <option value="lb">Luxembourgish</option>
+                  <option value="lu">Luba-Katanga</option>
+                  <option value="lg">Ganda</option>
+                  <option value="mk">Macedonian</option>
+                  <option value="mh">Marshallese</option>
+                  <option value="ml">Malayalam</option>
+                  <option value="mi">Maori</option>
+                  <option value="mr">Marathi</option>
+                  <option value="ms">Malay</option>
+                  <option value="mg">Malagasy</option>
+                  <option value="mt">Maltese</option>
+                  <option value="mn">Mongolian</option>
+                  <option value="na">Nauru</option>
+                  <option value="nv">Navajo</option>
+                  <option value="nr">Ndebele, South</option>
+                  <option value="nd">Ndebele, North</option>
+                  <option value="ng">Ndonga</option>
+                  <option value="ne">Nepali</option>
+                  <option value="nn">Norwegian Nynorsk</option>
+                  <option value="nb">Bokmål, Norwegian</option>
+                  <option value="no">Norwegian</option>
+                  <option value="ny">Chichewa</option>
+                  <option value="oc">Occitan</option>
+                  <option value="oj">Ojibwa</option>
+                  <option value="or">Oriya</option>
+                  <option value="om">Oromo</option>
+                  <option value="os">Ossetian</option>
+                  <option value="pa">Panjabi</option>
+                  <option value="fa">Persian</option>
+                  <option value="pi">Pali</option>
+                  <option value="pl">Polish</option>
+                  <option value="pt">Portuguese</option>
+                  <option value="ps">Pushto</option>
+                  <option value="qu">Quechua</option>
+                  <option value="rm">Romansh</option>
+                  <option value="ro">Romanian</option>
+                  <option value="rn">Rundi</option>
+                  <option value="ru">Russian</option>
+                  <option value="sg">Sango</option>
+                  <option value="sa">Sanskrit</option>
+                  <option value="si">Sinhala</option>
+                  <option value="sk">Slovak</option>
+                  <option value="sl">Slovenian</option>
+                  <option value="se">Northern Sami</option>
+                  <option value="sm">Samoan</option>
+                  <option value="sn">Shona</option>
+                  <option value="sd">Sindhi</option>
+                  <option value="so">Somali</option>
+                  <option value="st">Sotho, Southern</option>
+                  <option value="es">Spanish</option>
+                  <option value="sc">Sardinian</option>
+                  <option value="sr">Serbian</option>
+                  <option value="ss">Swati</option>
+                  <option value="su">Sundanese</option>
+                  <option value="sw">Swahili</option>
+                  <option value="sv">Swedish</option>
+                  <option value="ty">Tahitian</option>
+                  <option value="ta">Tamil</option>
+                  <option value="tt">Tatar</option>
+                  <option value="te">Telugu</option>
+                  <option value="tg">Tajik</option>
+                  <option value="tl">Tagalog</option>
+                  <option value="th">Thai</option>
+                  <option value="bo">Tibetan</option>
+                  <option value="ti">Tigrinya</option>
+                  <option value="to">Tonga (Tonga Islands)</option>
+                  <option value="tn">Tswana</option>
+                  <option value="ts">Tsonga</option>
+                  <option value="tk">Turkmen</option>
+                  <option value="tr">Turkish</option>
+                  <option value="tw">Twi</option>
+                  <option value="ug">Uighur</option>
+                  <option value="uk">Ukrainian</option>
+                  <option value="ur">Urdu</option>
+                  <option value="uz">Uzbek</option>
+                  <option value="ve">Venda</option>
+                  <option value="vi">Vietnamese</option>
+                  <option value="vo">Volapük</option>
+                  <option value="cy">Welsh</option>
+                  <option value="wa">Walloon</option>
+                  <option value="wo">Wolof</option>
+                  <option value="xh">Xhosa</option>
+                  <option value="yi">Yiddish</option>
+                  <option value="yo">Yoruba</option>
+                  <option value="za">Zhuang</option>
+                  <option value="zu">Zulu</option>
+              </select>
+              <span class="tip tip-stacked">Identify the course language here. This is used to assist users find courses that are taught in a specific language. It is also used to localize the 'From:' field in bulk emails.</span>
+            </li>
+          </ol>
+        </div>
+
+        <hr class="divide">
+            <div class="group-settings marketing">
+              <header>
+                <h2 class="title-2">Introducing Your Course</h2>
+                <span class="tip">Information for prospective students</span>
+              </header>
+              <ol class="list-input">
+
+
+                <li class="field text" id="field-course-short-description">
+                  <label for="course-short-description">Course Short Description</label>
+                  <textarea class="text" id="course-short-description"></textarea>
+                  <span class="tip tip-stacked">Appears on the course catalog page when students roll over the course name. Limit to ~150 characters</span>
+                </li>
+
+                <li class="field text" id="field-course-overview">
+                  <label for="course-overview">Course Overview</label>
+                  <textarea class="tinymce text-editor" id="course-overview" style="display: none;"></textarea><div class="CodeMirror cm-s-default CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 8px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" id="course-overview-cm-textarea" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none; font-size: 4px;"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 29px;"><div style="height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar" style="display: block; bottom: 0px;"><div style="width: 1px; height: 1108px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 29px; min-height: 1108px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><div style="width: 50px; height: 50px; overflow-x: scroll;"></div></div><div style="position: relative; z-index: 1; display: none;"></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">1</div></div><pre><span class="cm-tag">&lt;section</span> <span class="cm-attribute">class</span>=<span class="cm-string">"about"</span><span class="cm-tag">&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">2</div></div><pre>  <span class="cm-tag">&lt;h2&gt;</span>About This Course<span class="cm-tag">&lt;/h2&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">3</div></div><pre>  <span class="cm-tag">&lt;p&gt;</span>Include your long course description here. The long course description should contain 150-400 words.<span class="cm-tag">&lt;/p&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">4</div></div><pre>&nbsp;</pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">5</div></div><pre>  <span class="cm-tag">&lt;p&gt;</span>This is paragraph 2 of the long course description. Add more paragraphs as needed. Make sure to enclose them in paragraph tags.<span class="cm-tag">&lt;/p&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">6</div></div><pre><span class="cm-tag">&lt;/section&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">7</div></div><pre>&nbsp;</pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">8</div></div><pre><span class="cm-tag">&lt;section</span> <span class="cm-attribute">class</span>=<span class="cm-string">"prerequisites"</span><span class="cm-tag">&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">9</div></div><pre>  <span class="cm-tag">&lt;h2&gt;</span>Requirements<span class="cm-tag">&lt;/h2&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">10</div></div><pre>  <span class="cm-tag">&lt;p&gt;</span>Add information about the skills and knowledge students need to take this course.<span class="cm-tag">&lt;/p&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">11</div></div><pre><span class="cm-tag">&lt;/section&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">12</div></div><pre>&nbsp;</pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">13</div></div><pre><span class="cm-tag">&lt;section</span> <span class="cm-attribute">class</span>=<span class="cm-string">"course-staff"</span><span class="cm-tag">&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">14</div></div><pre>  <span class="cm-tag">&lt;h2&gt;</span>Course Staff<span class="cm-tag">&lt;/h2&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">15</div></div><pre>  <span class="cm-tag">&lt;article</span> <span class="cm-attribute">class</span>=<span class="cm-string">"teacher"</span><span class="cm-tag">&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">16</div></div><pre> &nbsp;  <span class="cm-tag">&lt;div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"teacher-image"</span><span class="cm-tag">&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">17</div></div><pre> &nbsp; &nbsp;  <span class="cm-tag">&lt;img</span> <span class="cm-attribute">src</span>=<span class="cm-string">"/static/images/placeholder-faculty.png"</span> <span class="cm-attribute">align</span>=<span class="cm-string">"left"</span> <span class="cm-attribute">style</span>=<span class="cm-string">"margin:0 20 px 0"</span> <span class="cm-attribute">alt</span>=<span class="cm-string">"Course Staff Image #1"</span><span class="cm-tag">&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">18</div></div><pre> &nbsp;  <span class="cm-tag">&lt;/div&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">19</div></div><pre>&nbsp;</pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">20</div></div><pre> &nbsp;  <span class="cm-tag">&lt;h3&gt;</span>Staff Member #1<span class="cm-tag">&lt;/h3&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">21</div></div><pre> &nbsp;  <span class="cm-tag">&lt;p&gt;</span>Biography of instructor/staff member #1<span class="cm-tag">&lt;/p&gt;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">22</div></div><pre>  <span class="cm-tag">&lt;/article&gt;</span></pre></div></div><div class="CodeMirror-cursor" style="left: 4px; top: 3px; height: 14px;">&nbsp;</div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;">&nbsp;</div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 1108px;"></div><div class="CodeMirror-gutters" style="height: 1108px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div></div></div>
+                  <label class="sr" for="course-overview-cm-textarea">
+                    HTML Code Editor
+                  </label>
+                  <span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a class="link-courseURL" rel="external" href="http://localhost:8000/courses/course-v1:AndyA+AA101+1/about" title="This link will open in a new browser window/tab" target="_blank">your course summary page</a> (formatted in HTML)</span>
+                </li>
+
+                <li class="field image" id="field-course-image">
+                  <label for="course-image-url">Course Card Image</label>
+                  <div class="current current-course-image">
+                    <span class="wrapper-course-image">
+                      <img class="course-image" id="course-image" src="/asset-v1:AndyA+AA101+1+type@asset+block@images_course_image.jpg" alt="Course Card Image" style="display: none;">
+                    </span>
+
+                    <span class="msg msg-help">
+                    You can manage this image along with all of your other <a href="/assets/course-v1:AndyA+AA101+1/">files and uploads</a>
+                    </span>
+
+                  </div>
+
+                  <div class="wrapper-input">
+                    <div class="input">
+                      <input type="text" dir="ltr" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off">
+                      <span class="tip tip-stacked">Please provide a valid path and name to your course image (Note: only JPEG or PNG format supported)</span>
+                    </div>
+                    <button type="button" class="action action-upload-image" id="upload-course-image">Upload Course Card Image</button>
+                  </div>
+                </li>
+
+
+                <li class="field video" id="field-course-introduction-video">
+                  <label for="course-introduction-video">Course Introduction Video</label>
+                  <div class="input input-existing">
+                    <div class="current current-course-introduction-video">
+                      <iframe width="618" height="350" title="Course Introduction Video" src="" frameborder="0" allowfullscreen=""></iframe>
+                    </div>
+                    <div class="actions">
+                      <a href="#" class="remove-item remove-course-introduction-video remove-video-data" style="display: none;"><span class="delete-icon"></span>Delete Current Video</a>
+                    </div>
+                  </div>
+
+                  <div class="input">
+                    <input type="text" dir="ltr" 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>
+              </ol>
+            </div>
+
+
+            <hr class="divide">
+
+            <div class="group-settings requirements">
+              <header>
+                <h2 class="title-2">Requirements</h2>
+                <span class="tip">Expectations of the students taking this course</span>
+              </header>
+
+              <ol class="list-input">
+                <li class="field text" id="field-course-effort">
+                  <label for="course-effort">Hours of Effort per Week</label>
+                  <input type="text" class="short time" id="course-effort" placeholder="HH:MM">
+                  <span class="tip tip-inline">Time spent on all course work</span>
+                </li>
+                <li>
+                    <h3 id="heading-entrance-exam">Entrance Exam</h3>
+                    <div class="show-data">
+                        <div class="heading">
+                            <input type="checkbox" id="entrance-exam-enabled">
+                            <label for="entrance-exam-enabled">Require students to pass an exam before beginning the course.</label>
+                        </div>
+                         <div class="div-grade-requirements" hidden="hidden" style="display: none;">
+                          <p><span class="tip tip-inline">
+                            You can now view and author your course entrance exam from the <a href="/course/course-v1:AndyA+AA101+1">Course Outline</a>.</span></p>
+                          <p></p><h3>Grade Requirements</h3><p></p>
+                          <p></p><div><input type="text" id="entrance-exam-minimum-score-pct" aria-describedby="min-score-format"><span id="min-score-format" class="tip tip-inline"> %</span></div><p></p>
+                          <p><span class="tip tip-inline">The score student must meet in order to successfully complete the entrance exam. </span></p>
+                        </div>
+                    </div>
+                </li>
+              </ol>
+            </div>
+
+
+            <hr class="divide">
+
+            <div class="group-settings license">
+              <header>
+                <h2 class="title-2">Course Content License</h2>
+                <span class="tip">Select the default license for course content</span>
+              </header>
+
+              <ol class="list-input">
+                <li class="field text" id="field-course-license">
+                  <div id="course-license-selector"><div class="wrapper-license">
+    <h3 class="label setting-label">
+        License Type
+    </h3>
+    <ul class="license-types">
+
+
+            <li class="license-type" data-license="all-rights-reserved">
+                <button name="license-all-rights-reserved" class="action license-button " aria-pressed="false" data-tooltip="You reserve all rights for your work">
+                    All Rights Reserved
+                </button>
+                <p class="tip">
+
+                        &nbsp;
+
+                </p>
+            </li>
+
+            <li class="license-type" data-license="creative-commons">
+                <button name="license-creative-commons" class="action license-button " aria-pressed="false" data-tooltip="You waive some rights for your work, such that others can use it too">
+                    Creative Commons
+                </button>
+                <p class="tip">
+
+                        <a href="https://creativecommons.org/about" target="_blank">
+                            Learn more about Creative Commons
+                        </a>
+
+                </p>
+            </li>
+
+    </ul>
+
+
+
+
+
+    <div class="wrapper-license-preview">
+        <h4 class="label setting-label">
+            License Display
+        </h4>
+        <p class="tip">
+            The following message will be displayed at the bottom of the courseware pages within your course:
+        </p>
+        <div class="license-preview">
+
+
+
+
+            © <span class="license-text">All Rights Reserved</span>
+
+
+    </div>
+
+</div>
+</div></div>
+                </li>
+              </ol>
+            </div>
+      </form>
+    </div>
+    <div class="content-supplementary" role="complementary">
+     <div class="bit">
+        <h3 class="title-3">How are these settings used?</h3>
+        <p>Your course's schedule determines when students can enroll in and begin a course.</p>
+
+        <p>Other information from this page appears on the About page for your course. This information includes the course overview, course image, introduction video, and estimated time requirements. Students use About pages to choose new courses to take.</p>
+     </div>
+
+     <div class="bit">
+
+        <h3 class="title-3">Other Course Settings</h3>
+        <nav class="nav-related" aria-label="Other Course Settings">
+          <ul>
+            <li class="nav-item"><a href="/settings/grading/course-v1:AndyA+AA101+1">Grading</a></li>
+            <li class="nav-item"><a href="/course_team/course-v1:AndyA+AA101+1">Course Team</a></li>
+            <li class="nav-item"><a href="/group_configurations/course-v1:AndyA+AA101+1">Group Configurations</a></li>
+            <li class="nav-item"><a href="/settings/advanced/course-v1:AndyA+AA101+1">Advanced Settings</a></li>
+          </ul>
+        </nav>
+     </div>
+    </div>
+  </div>
+</div>
diff --git a/cms/templates/ux/reference/index.html b/cms/templates/ux/reference/index.html
index 022cdc33cb..78985c6050 100644
--- a/cms/templates/ux/reference/index.html
+++ b/cms/templates/ux/reference/index.html
@@ -9,17 +9,25 @@
 <%block name="bodyclass">ux-reference</%block>
 
 <%block name="content">
-<div class="main-wrapper">
-    <div class="inner-wrapper">
-        <div class="main-column">
-            <article class="window unit-body">
-                <h2>UX Style Reference</h2>
+<div class="wrapper-content wrapper">
+    <div class="content">
+        <div class="content-primary">
+            <h2>UX Style Reference</h2>
 
-                <ul>
-                    <a href="bootstrap/test.html">Bootstrap Test Page</a>
-                    <a href="pattern-library/test.html">Pattern Library Test Page</a>
-                </ul>
-            </article>
+            <h3>v1-style Pages</h3>
+            <ul>
+                <li><a href="v1/course-settings.html">Course settings page</a></li>
+            </ul>
+
+            <h3>Pattern Library</h3>
+            <ul>
+                <li><a href="pattern-library/test.html">Test page</a></li>
+            </ul>
+
+            <h3>Bootstrap</h3>
+            <ul>
+                <li><a href="bootstrap/course-settings.html">Course settings page</a></li>
+            </ul>
         </div>
     </div>
 </div>
diff --git a/cms/templates/ux/reference/v1/course-settings.html b/cms/templates/ux/reference/v1/course-settings.html
new file mode 100644
index 0000000000..3736aaf38a
--- /dev/null
+++ b/cms/templates/ux/reference/v1/course-settings.html
@@ -0,0 +1,11 @@
+## mako
+
+<%page expression_filter="h"/>
+
+<%inherit file="/base.html" />
+<%block name="title">Studio Test Page</%block>
+<%block name="bodyclass">view-settings</%block>
+
+<%block name="content">
+<%include file="../fragments/course-settings.html"/>
+</%block>
diff --git a/cms/urls.py b/cms/urls.py
index b804a13620..a2bf135fc2 100644
--- a/cms/urls.py
+++ b/cms/urls.py
@@ -212,6 +212,12 @@ if 'debug_toolbar' in settings.INSTALLED_APPS:
         url(r'^__debug__/', include(debug_toolbar.urls)),
     )
 
+# UX reference templates
+urlpatterns += patterns(
+    '',
+    url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
+)
+
 # Custom error pages
 # These are used by Django to render these error codes. Do not remove.
 # pylint: disable=invalid-name
diff --git a/cms/urls_dev.py b/cms/urls_dev.py
index 42c53bd25a..cb31fc8b47 100644
--- a/cms/urls_dev.py
+++ b/cms/urls_dev.py
@@ -7,5 +7,4 @@ from django.conf.urls import url
 
 urlpatterns = (
     url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'),
-    url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
 )
diff --git a/lms/envs/common.py b/lms/envs/common.py
index 4c39c9e810..6be154250b 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1644,13 +1644,6 @@ PIPELINE_JS = {
         'source_filenames': main_vendor_js,
         'output_filename': 'js/lms-main_vendor.js',
     },
-    'lms_bootstrap': {
-        'source_filenames': [
-            'common/js/vendor/tether.js',
-            'common/js/vendor/bootstrap.js',
-        ],
-        'output_filename': 'js/lms-bootstrap.js',
-    },
     'module-descriptor-js': {
         'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'),
         'output_filename': 'js/lms-module-descriptors.js',
diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss
index 65ac35420b..ef5dc816ad 100644
--- a/lms/static/sass/_build-lms-v2.scss
+++ b/lms/static/sass/_build-lms-v2.scss
@@ -2,7 +2,6 @@
 // LMS: Shared Build Compile
 // Version 2 - introduces the Pattern Library
 
-
 // Configuration
 @import 'config';
 @import 'base/variables';
diff --git a/lms/static/sass/bootstrap/_components.scss b/lms/static/sass/bootstrap/_components.scss
index 3957b06a25..d1216d3c69 100644
--- a/lms/static/sass/bootstrap/_components.scss
+++ b/lms/static/sass/bootstrap/_components.scss
@@ -3,7 +3,7 @@
 
 // Page banner
 .page-banner {
-  max-width: $lms-max-width;
+  max-width: map-get($container-max-widths, xl);
   margin: 0 auto;
 
   .user-messages {
diff --git a/lms/static/sass/bootstrap/_footer.scss b/lms/static/sass/bootstrap/_footer.scss
index 2efbc43d81..9708352bee 100644
--- a/lms/static/sass/bootstrap/_footer.scss
+++ b/lms/static/sass/bootstrap/_footer.scss
@@ -2,15 +2,15 @@
 // ====================
 
 .wrapper-footer {
-  box-shadow: 0 -1px 5px 0 $black-t0;
+  box-shadow: 0 -1px 5px 0 $gray-900;
   border-top: 1px solid $navbar-light-disabled-color;
-  background-color: $footer-bg;
+  background-color: $body-bg;
   margin-top: $baseline/2;
   padding: $baseline;
   font-family: $font-family-sans-serif;
 
   footer {
-    max-width: $lms-max-width;
+    max-width: map-get($container-max-widths, xl);
     margin: 0 auto;
 
     .site-nav {
@@ -22,10 +22,10 @@
         .nav-link {
           text-decoration: none;
           padding: 0;
-          color: $brand-inverse;
+          color: $gray-900;
 
           &:hover {
-            color: $brand-primary;
+            color: theme-color("primary");
           }
         }
       }
@@ -54,8 +54,8 @@
 
     .copyright {
       margin-top: $baseline;
-      font-size: $font-size-xs;
-      color: $gray-dark;
+      font-size: $font-size-sm;
+      color: theme-color("primary");
     }
 
     .footer-about-openedx {
diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss
index 660140e439..a8b6fa1f4e 100644
--- a/lms/static/sass/bootstrap/_layouts.scss
+++ b/lms/static/sass/bootstrap/_layouts.scss
@@ -9,8 +9,8 @@
         .nav-item {
             &.active, &:hover{
                 .nav-link {
-                    border-bottom-color: $brand-primary;
-                    color: $brand-primary;
+                    border-bottom-color: theme-color("primary");
+                    color: theme-color("primary");
                 }
             }
 
@@ -20,7 +20,7 @@
                 border-width: 0 0 $baseline/5 0;
                 border-bottom-color: transparent;
 
-                @media (max-width: map-get($grid-breakpoints, md)) {
+                @include media-breakpoint-down(md) {
                     border: none;
                     text-align: left;
                     padding: 0 0 $baseline/2 0;
@@ -30,11 +30,11 @@
     }
 
     .main-container {
-        border: 1px solid $inverse-color;
+        border: 1px solid $border-color;
         background-color: $body-bg;
 
         .page-header {
-            border-bottom: 1px solid $inverse-color;
+            border-bottom: 1px solid $border-color;
             padding: 20px;
         }
 
@@ -44,6 +44,6 @@
     }
 
     &.container-fluid {
-        max-width: $lms-max-width;
+        max-width: map-get($container-max-widths, xl);
     }
 }
diff --git a/lms/static/sass/bootstrap/_navigation.scss b/lms/static/sass/bootstrap/_navigation.scss
index 055d8d0eca..7e139633c7 100644
--- a/lms/static/sass/bootstrap/_navigation.scss
+++ b/lms/static/sass/bootstrap/_navigation.scss
@@ -1,12 +1,12 @@
 // Local overrides for bootstrap navigation bar theming
 .navigation-container {
-  border-bottom: 1px solid $brand-primary;
+  border-bottom: 1px solid theme-color("primary");
   text-decoration: none;
-  background-color: $header-bg;
+  background-color: $body-bg;
 
   &.slim {
-    border-bottom: 1px solid $inverse-color;
-    box-shadow: 0 1px 5px 0 $black-t0;
+    border-bottom: 1px solid $border-color;
+    box-shadow: 0 1px 5px 0 $gray-900;
   }
 
   .navbar {
@@ -35,7 +35,7 @@
       list-style: none;
 
       .nav-link {
-        color: $brand-primary;
+        color: theme-color("primary");
       }
 
       .user-image-frame {
@@ -48,13 +48,13 @@
         display: none;
       }
 
-      @media (max-width: map-get($grid-breakpoints,md)) {
+      @include media-breakpoint-down(md) {
         &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
           display: initial;
           margin: $baseline/4 $baseline/2;
 
           a {
-            color: $brand-primary;
+            color: theme-color("primary");
             padding: 0;
             text-decoration: none;
 
@@ -74,10 +74,10 @@
     }
 
     .navbar-right .nav-item {
-      @media (min-width: map-get($grid-breakpoints,md)) {
+      @include media-breakpoint-down(md) {
         .nav-link {
           text-transform: none;
-          color: $brand-inverse;
+          color: $gray-900;
           font-weight: $font-weight-bold;
           cursor: pointer;
         }
diff --git a/lms/static/sass/bootstrap/_variables.scss b/lms/static/sass/bootstrap/_variables.scss
index 043f6343d9..308ac9406d 100644
--- a/lms/static/sass/bootstrap/_variables.scss
+++ b/lms/static/sass/bootstrap/_variables.scss
@@ -11,61 +11,3 @@
 // #UNITS
 // ----------------------------
 $baseline: 20px !default;
-
-// ----------------------------
-// #GRID
-// ----------------------------
-$lms-max-width: 1180px !default;
-
-// ----------------------------
-// #COLORS
-// ----------------------------
-
-$lms-gray: palette(grayscale, base) !default;
-$lms-background-color: palette(grayscale, x-back) !default;
-$lms-container-background-color: $white !default;
-$lms-border-color: palette(grayscale, back) !default;
-$lms-label-color: palette(grayscale, black) !default;
-$lms-active-color: palette(primary, base) !default;
-$lms-preview-menu-color: #c8c8c8 !default;
-$success-color: palette(success, accent) !default;
-$success-color-hover: palette(success, text) !default;
-
-$button-bg-hover-color: $white !default;
-
-$white-transparent: rgba(255, 255, 255, 0) !default;
-$white-opacity-40: rgba(255, 255, 255, 0.4) !default;
-$white-opacity-60: rgba(255, 255, 255, 0.6) !default;
-$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
-$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
-
-$black:     rgb(0,0,0) !default;
-$black-t0:  rgba($black, 0.125) !default;
-$black-t1:  rgba($black, 0.25) !default;
-$black-t2:  rgba($black, 0.5) !default;
-$black-t3:  rgba($black, 0.75) !default;
-
-$light-grey-transparent: rgba(200,200,200, 0) !default;
-$light-grey-solid: rgba(200,200,200, 1) !default;
-
-$header-bg: $white !default;
-$footer-bg: $white !default;
-
-// ----------------------------
-// #TYPOGRAPHY
-// ----------------------------
-$font-light: 300 !default;
-$font-regular: 400 !default;
-$font-semibold: 600 !default;
-$font-bold: 700 !default;
-
-// ----------------------------
-// #ICONS
-// ----------------------------
-// Icons
-$lms-dark-icon-color: $white !default;
-$lms-dark-icon-background-color: palette(grayscale, black) !default;
-
-$site-status-color: rgb(182,37,103) !default;
-
-$shadow-l1: rgba(0,0,0,0.1) !default;
diff --git a/lms/static/sass/bootstrap/lms-main.scss b/lms/static/sass/bootstrap/lms-main.scss
index 4f89e9c064..0c20be06f0 100644
--- a/lms/static/sass/bootstrap/lms-main.scss
+++ b/lms/static/sass/bootstrap/lms-main.scss
@@ -5,6 +5,7 @@
 // Bootstrap theme
 @import 'bootstrap/theme';
 @import 'bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/mixins';
 
 // Variables
 @import 'variables';
diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss
index 35378afe8f..d6d77ecf03 100644
--- a/lms/static/sass/features/_learner-profile.scss
+++ b/lms/static/sass/features/_learner-profile.scss
@@ -140,7 +140,7 @@
                 height: $profile-image-dimension;
                 border-radius: ($profile-image-dimension/2);
                 overflow: hidden;
-                border: 3px solid $gray-lightest;
+                border: 3px solid $gray-l6;
                 margin-top: $baseline*-0.75;
                 background: $white;
             }
@@ -223,7 +223,7 @@
 
     .wrapper-profile {
         min-height: 200px;
-        background-color: $gray-lightest;
+        background-color: $gray-l6;
 
         .ui-loading-indicator {
             margin-top: 100px;
@@ -379,7 +379,7 @@
 
                         &:not(:last-child) {
                             padding-bottom: $baseline/4;
-                            border-bottom: 1px solid $gray-lighter;
+                            border-bottom: 1px solid $border-color;
 
                             &:hover.mode-placeholder {
                                 padding-bottom: $baseline/5;
@@ -464,6 +464,7 @@
             display: inline-block;
             margin-top: 0;
             margin-bottom: ($baseline/4);
+            color: $gray-d3;
             width: 100%;
             font: $font-semibold 1.4em/1.4em $sans-serif;
         }
diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss
index d637e93d60..ecff6d7c64 100644
--- a/lms/static/sass/partials/base/_variables.scss
+++ b/lms/static/sass/partials/base/_variables.scss
@@ -223,10 +223,6 @@ $success-color-hover: rgb(0, 129, 0) !default;
 // ----------------------------
 // #COLORS- Bootstrap-style
 // ----------------------------
-$gray-dark: #4e5455 !default;
-$gray-lighter: #eceeef !default;
-$gray-lightest: #f7f7f9 !default;
-
 $state-success-text: $black !default;
 $state-success-bg: #dff0d8 !default;
 $state-success-border: darken($state-success-bg, 5%) !default;
@@ -248,7 +244,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default;
 // ----------------------------
 
 // logo colors
-$audit-mode-color: $gray-dark !default;
+$audit-mode-color: rgb(74,74,74) !default;
 $honor-mode-color: $uxpl-blue-base !default;
 $verified-mode-color: $uxpl-green-base !default;
 $micromasters-color: #005585 !default;
diff --git a/lms/templates/footer.html b/lms/templates/footer.html
index 7efef21e67..10ea5268bf 100644
--- a/lms/templates/footer.html
+++ b/lms/templates/footer.html
@@ -14,7 +14,7 @@
     <footer>
       <div class="row">
         <div class="col-md-9">
-          <nav class="navbar site-nav navbar-toggleable-sm navbar-light" aria-label="${_('About')}">
+          <nav class="navbar site-nav navbar-expand-sm navbar-light" aria-label="${_('About')}">
             <ul class="navbar-nav">
               % for item_num, link in enumerate(footer['navigation_links'], start=1):
                 <li class="nav-item">
@@ -27,7 +27,7 @@
           ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
           <p class="copyright">${footer['copyright']} ${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}</p>
 
-          <nav class="navbar legal-nav navbar-toggleable-sm navbar-light" aria-label="${_('Legal')}">
+          <nav class="navbar legal-nav navbar-expand-sm navbar-light" aria-label="${_('Legal')}">
             <ul class="navbar-nav">
               % for item_num, link in enumerate(footer['legal_links'], start=1):
                 <li class="nav-item">
diff --git a/lms/templates/main.html b/lms/templates/main.html
index de5e62a941..7bc555dda9 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -1,3 +1,5 @@
+## xss-lint: disable=mako-missing-default
+
 ## coding=utf-8
 
 ## This is the main Mako template that all page templates should include.
@@ -63,7 +65,7 @@ from pipeline_mako import render_require_js_path_overrides
   <link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
 
   <%static:css group='style-vendor'/>
-  % if uses_bootstrap:
+  % if uses_bootstrap or '/' in self.attr.main_css:
     <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
   % else:
     <%static:css group='${self.attr.main_css}'/>
@@ -77,12 +79,14 @@ from pipeline_mako import render_require_js_path_overrides
     <%static:js group='application'/>
   % endif
 
-  % if uses_bootstrap:
-    <%static:js group='lms_bootstrap'/>
-  % endif
-
   <%static:webpack entry="commons"/>
 
+  % if uses_bootstrap:
+    ## xss-lint: disable=mako-invalid-js-filter
+    <script type="text/javascript" src="${static.url('common/js/vendor/popper.js')}"></script>
+    <script type="text/javascript" src="${static.url('common/js/vendor/bootstrap.js')}"></script>
+  % endif
+
   <script>
     window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
     (function (require) {
diff --git a/lms/templates/navigation/navigation.html b/lms/templates/navigation/navigation.html
index 5db3fc03ac..2f1972b527 100644
--- a/lms/templates/navigation/navigation.html
+++ b/lms/templates/navigation/navigation.html
@@ -51,11 +51,11 @@ site_status_msg = get_site_status_msg(course_id)
 
 % if uses_bootstrap:
   <header class="navigation-container header-global ${"slim" if course else ""}">
-    <nav class="navbar navbar-toggleable-sm navbar-light">
+    <nav class="navbar navbar-expand-lg navbar-light">
+      <%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
       <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
       % if user.is_authenticated():
         <%include file="bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/>
       % else:
diff --git a/lms/templates/ux/reference/bootstrap/course-skeleton.html b/lms/templates/ux/reference/bootstrap/course-skeleton.html
index ff31a6368a..4230356d0e 100644
--- a/lms/templates/ux/reference/bootstrap/course-skeleton.html
+++ b/lms/templates/ux/reference/bootstrap/course-skeleton.html
@@ -11,7 +11,7 @@
 <%block name="bodyclass">course-skeleton</%block>
 
 <%block name="content">
-<nav class="navbar course-tabs pb-0 navbar-toggleable-sm navbar-light">
+<nav class="navbar course-tabs pb-0 navbar-expand-lg navbar-light">
     <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
             <a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
diff --git a/lms/templates/ux/reference/bootstrap/unit-page.html b/lms/templates/ux/reference/bootstrap/unit-page.html
new file mode 100644
index 0000000000..313198034e
--- /dev/null
+++ b/lms/templates/ux/reference/bootstrap/unit-page.html
@@ -0,0 +1,38 @@
+## mako
+
+## Override the default styles_version to use Bootstrap
+<%! main_css = "css/bootstrap/lms-main.css" %>
+
+<%page expression_filter="h"/>
+
+<%namespace name='static' file='/static_content.html'/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Course Skeleton</%block>
+
+<%block name="bodyclass">view-in-course view-courseware courseware</%block>
+
+<%block name="headextra">
+<%static:css group='style-course-vendor'/>
+<%static:css group='style-course'/>
+</%block>
+
+<%block name="content">
+<nav class="navbar course-tabs pb-0 navbar-expand-lg navbar-light">
+    <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+            <a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Discussion</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Wiki</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Progress</a>
+        </li>
+    </ul>
+</nav>
+<%include file="../fragments/unit-fragment.html"/>
+</%block>
diff --git a/lms/templates/ux/reference/fragments/unit-fragment.html b/lms/templates/ux/reference/fragments/unit-fragment.html
new file mode 100644
index 0000000000..9b5847a043
--- /dev/null
+++ b/lms/templates/ux/reference/fragments/unit-fragment.html
@@ -0,0 +1,908 @@
+## mako
+<script>
+    ## xss-lint: disable=mako-missing-default
+</script>
+
+<section class="main-container">
+<div class="course-wrapper" role="presentation">
+<header class="page-header has-secondary">
+    <div class="page-header-main">
+        <nav aria-label="Course" class="sr-is-focusable" tabindex="-1">
+            <div class="has-breadcrumbs">
+                <div class="breadcrumbs">
+                                    <span class="nav-item nav-item-course">
+                                        <a href="/courses/course-v1:edX+DemoX+Demo_Course/course/">Course</a>
+                                    </span>
+                    <span class="icon fa fa-angle-right" aria-hidden="true"></span>
+                    <span class="nav-item nav-item-chapter">
+                                        <a href="/courses/course-v1:edX+DemoX+Demo_Course/course/#block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b">Introduction</a>
+                                    </span>
+                    <span class="icon fa fa-angle-right" aria-hidden="true"></span>
+                    <span class="nav-item nav-item-section">
+                                        <a href="/courses/course-v1:edX+DemoX+Demo_Course/course/#block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction">Demo Course Overview</a>
+                                    </span>
+                    <span class="icon fa fa-angle-right" aria-hidden="true"></span>
+                    <span class="nav-item nav-item-sequence">Introduction: Video and Sequences</span>
+                </div>
+            </div>
+        </nav>
+    </div>
+</header>
+<main id="main" tabindex="-1" aria-label="Content">
+
+<div class="xblock xblock-student_view xblock-student_view-sequential xmodule_display xmodule_SequenceModule xblock-initialized" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="sequential" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction" data-type="Sequence" data-course-id="course-v1:edX+DemoX+Demo_Course">
+
+
+
+
+<div id="sequence_edx_introduction" class="sequence" data-id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction" data-position="1" data-ajax-url="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction/handler/xmodule_handler" data-next-url="/courses/course-v1:edX+DemoX+Demo_Course/courseware/interactive_demonstrations/19a30717eff543078a5d94ae9d6c18a5/?child=first" data-prev-url="None">
+<div class="sequence-nav">
+    <button class="sequence-nav-button button-previous disabled" aria-hidden="true" disabled="disabled">
+        <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
+        <span>Previous</span>
+    </button>
+    <nav class="sequence-list-wrapper" aria-label="Sequence">
+        <ol id="sequence-list" role="tablist">
+            <li>
+                <button class="seq_video nav-item tab active" role="tab" tabindex="0" aria-selected="true" aria-expanded="true" aria-controls="seq_content" data-index="0" data-id="block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-element="1" data-page-title="Introduction: Video and Sequences" data-path="Introduction > Demo Course Overview > Introduction: Video and Sequences" id="tab_0">
+                    <span class="icon fa seq_video" aria-hidden="true"></span>
+                    <span class="fa fa-fw fa-bookmark bookmark-icon is-hidden" aria-hidden="true"></span>
+                    <div class="sequence-tooltip sr"><span class="sr">video&nbsp;</span>Introduction: Video and Sequences<span class="sr bookmark-icon-sr">&nbsp;</span></div>
+                </button>
+            </li>
+        </ol>
+    </nav>
+    <button class="sequence-nav-button button-next" aria-hidden="true">
+        <span>Next</span>
+        <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
+    </button>
+</div>
+
+<div class="sr-is-focusable" tabindex="-1"></div>
+
+<div id="seq_contents_0" aria-labelledby="tab_0" aria-hidden="true" class="seq_contents tex2jax_ignore asciimath2jax_ignore">
+
+
+&lt;div class="wrap-instructor-info studio-view"&gt;
+&lt;a class="instructor-info-action" href="//localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc"&gt;View Unit in Studio&lt;/a&gt;
+&lt;/div&gt;
+&lt;div class="xblock xblock-student_view xblock-student_view-vertical" data-runtime-class="LmsRuntime" data-init="VerticalStudentView" data-course-id="course-v1:edX+DemoX+Demo_Course" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-block-type="vertical"&gt;
+
+
+&lt;h2 class="hd hd-2 unit-title"&gt;Introduction: Video and Sequences&lt;/h2&gt;
+
+
+
+
+
+&lt;div class="bookmark-button-wrapper"&gt;
+&lt;button class="btn btn-link bookmark-button "
+aria-pressed="false"
+data-bookmark-id="AndyA,block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc"
+data-bookmarks-api-url="/api/bookmarks/v1/bookmarks/"&gt;
+&lt;span class="bookmark-text"&gt;Bookmark this page&lt;/span&gt;
+&lt;/button&gt;
+&lt;/div&gt;
+
+
+&lt;div class="vert-mod"&gt;
+&lt;div class="vert vert-0" data-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4"&gt;
+
+
+
+&lt;div class="xblock xblock-student_view xblock-student_view-html xmodule_display xmodule_HtmlModule" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="html" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-type="HTMLModule" data-course-id="course-v1:edX+DemoX+Demo_Course"&gt;
+&lt;script type="json/xblock-args" class="xblock-json-init-args"&gt;
+{"xmodule-type": "HTMLModule"}
+&lt;/script&gt;
+&lt;p&gt;&lt;strong&gt;Welcome to the edX Demo Course Introduction.&lt;/strong&gt;&amp;nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an "intro" video that shows you how it all works.&amp;nbsp;&lt;/p&gt;
+&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &amp;nbsp;Just for fun, we'll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.&lt;/p&gt;
+&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;Watch the overview video (below), then click on "Example Week One" in the left hand navigation to get started.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class="wrap-instructor-info"&gt;
+&lt;a class="instructor-info-action" href="#030e35c4756a4ddc8d40b95fbbfff4d4_debug" id="030e35c4756a4ddc8d40b95fbbfff4d4_trig"&gt;Staff Debug Info&lt;/a&gt;
+
+&lt;/div&gt;
+
+&lt;div aria-hidden="true" role="dialog" tabindex="-1" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa-modal" class="modal xqa-modal"&gt;
+&lt;div class="inner-wrapper"&gt;
+&lt;header&gt;
+&lt;h2&gt;Your Platform Name Here Content Quality Assessment&lt;/h2&gt;
+&lt;/header&gt;
+
+&lt;form id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_form" class="xqa_form"&gt;
+&lt;label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry"&gt;Comment&lt;/label&gt;
+&lt;input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry" type="text" placeholder="comment"&gt;
+&lt;label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag"&gt;Tag&lt;/label&gt;
+&lt;span style="color:black;vertical-align: -10pt"&gt;Optional tag (eg "done" or "broken"):&amp;nbsp;       &lt;/span&gt;
+&lt;input id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline"&gt;
+&lt;div class="submit"&gt;
+&lt;button name="submit" type="submit"&gt;Add comment&lt;/button&gt;
+&lt;/div&gt;
+&lt;hr&gt;
+&lt;div id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_log_data"&gt;&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_debug" &gt;
+&lt;div class="inner-wrapper"&gt;
+&lt;header&gt;
+&lt;h2&gt;Staff Debug&lt;/h2&gt;
+&lt;/header&gt;
+
+&lt;hr /&gt;
+&lt;div class="staff_actions"&gt;
+&lt;h3&gt;Actions&lt;/h3&gt;
+&lt;div&gt;
+&lt;label for="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4"&gt;Username:&lt;/label&gt;
+&lt;input type="text" tabindex="0" id="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4" placeholder="AndyA"/&gt;
+&lt;/div&gt;
+&lt;div data-location="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-location-name="030e35c4756a4ddc8d40b95fbbfff4d4"&gt;
+[
+&lt;button type="button" class="btn-link staff-debug-sdelete"&gt;Delete Learner's State&lt;/button&gt;
+]
+&lt;/div&gt;
+&lt;div id="result_030e35c4756a4ddc8d40b95fbbfff4d4"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="staff_info" style="display:block"&gt;
+is_released = &lt;font color='red'&gt;Yes!&lt;/font&gt;
+location = block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4
+
+&lt;table summary="Module Fields"&gt;
+&lt;tr&gt;&lt;th&gt;Module Fields&lt;/th&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;visible_to_staff_only&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;graded&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_token_secret&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;giturl&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;source_file&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;course_edit_method&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Studio&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;default_tab&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;in_entrance_exam&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;showanswer&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;attempted&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;display_name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Blank HTML Page&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;video_speed_optimizations&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;graceperiod&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;5:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;format&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;due&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;start&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;1970-01-01 05:00:00+00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;editor&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;visual&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;video_bumper&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;max_attempts&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;parent&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;tags&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;matlab_api_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;xqa_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;qaijS3UatK020Wc0sfCtFe0V6jpB4d64&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_storage_url&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;http://your_annotation_storage.com&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;use_latex_compiler&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;days_early_for_beta&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;show_correctness&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;always&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;source_code&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;data&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Welcome to the edX Demo Course Introduction.&amp;lt;/strong&amp;gt;&amp;amp;nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an &amp;#34;intro&amp;#34; video that shows you how it all works.&amp;amp;nbsp;&amp;lt;/p&amp;gt;
+&amp;lt;p style=&amp;#34;margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: &amp;#39;Open Sans&amp;#39;, Verdana, Geneva, sans-serif;&amp;#34;&amp;gt;You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &amp;amp;nbsp;Just for fun, we&amp;#39;ll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.&amp;lt;/p&amp;gt;
+&amp;lt;p style=&amp;#34;margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: &amp;#39;Open Sans&amp;#39;, Verdana, Geneva, sans-serif;&amp;#34;&amp;gt;Watch the overview video (below), then click on &amp;#34;Example Week One&amp;#34; in the left hand navigation to get started.&amp;lt;/p&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;static_asset_path&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;hide_from_toc&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;group_access&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;rerandomize&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;never&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;user_partitions&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;chrome&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes_visibility&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;show_reset_button&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;self_paced&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+&lt;table&gt;
+&lt;tr&gt;&lt;th&gt;XML attributes&lt;/th&gt;&lt;/tr&gt;
+&lt;/table&gt;
+category = HtmlModuleWithMixins
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_history"&gt;
+&lt;div class="inner-wrapper"&gt;
+&lt;header&gt;
+&lt;h2&gt;Submission History Viewer&lt;/h2&gt;
+&lt;/header&gt;
+&lt;form id="030e35c4756a4ddc8d40b95fbbfff4d4_history_form"&gt;
+&lt;label for="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username"&gt;User:&lt;/label&gt;
+&lt;input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username" type="text" placeholder=""/&gt;
+&lt;input type="hidden" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_location" value="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4"/&gt;
+&lt;div class="submit"&gt;
+&lt;button name="submit" type="submit"&gt;View History&lt;/button&gt;
+&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;div id="030e35c4756a4ddc8d40b95fbbfff4d4_history_text" class="staff_info" style="display:block"&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div id="030e35c4756a4ddc8d40b95fbbfff4d4_setup"&gt;&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+// assumes courseware.html's loaded this method.
+$(function () {
+setup_debug('030e35c4756a4ddc8d40b95fbbfff4d4',
+null,
+{
+'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
+'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
+'category': 'HtmlModuleWithMixins',
+'user': 'AndyA'
+}
+);
+});
+&lt;/script&gt;
+
+&lt;/div&gt;
+&lt;div class="vert vert-1" data-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd"&gt;
+
+
+
+&lt;div class="xblock xblock-student_view xblock-student_view-video xmodule_display xmodule_VideoModule" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="video" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-type="Video" data-course-id="course-v1:edX+DemoX+Demo_Course"&gt;
+&lt;script type="json/xblock-args" class="xblock-json-init-args"&gt;
+{"xmodule-type": "Video"}
+&lt;/script&gt;
+
+
+
+&lt;h3 class="hd hd-2"&gt;Welcome!&lt;/h3&gt;
+
+&lt;div
+id="video_0b9e39477cf34507a7a48f74be381fdd"
+class="video closed"
+data-metadata='{&amp;#34;savedVideoPosition&amp;#34;: 0.0, &amp;#34;ytMetadataUrl&amp;#34;: &amp;#34;https://www.googleapis.com/youtube/v3/videos/&amp;#34;, &amp;#34;sources&amp;#34;: [&amp;#34;https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4&amp;#34;], &amp;#34;speed&amp;#34;: null, &amp;#34;generalSpeed&amp;#34;: 1.0, &amp;#34;end&amp;#34;: 0.0, &amp;#34;sub&amp;#34;: &amp;#34;name_of_file&amp;#34;, &amp;#34;ytTestTimeout&amp;#34;: 1500, &amp;#34;transcriptLanguages&amp;#34;: {&amp;#34;en&amp;#34;: &amp;#34;English&amp;#34;}, &amp;#34;start&amp;#34;: 0.0, &amp;#34;ytKey&amp;#34;: &amp;#34;PUT_YOUR_API_KEY_HERE&amp;#34;, &amp;#34;poster&amp;#34;: null, &amp;#34;recordedYoutubeIsAvailable&amp;#34;: true, &amp;#34;ytApiUrl&amp;#34;: &amp;#34;https://www.youtube.com/iframe_api&amp;#34;, &amp;#34;saveStateUrl&amp;#34;: &amp;#34;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/xmodule_handler/save_user_state&amp;#34;, &amp;#34;transcriptAvailableTranslationsUrl&amp;#34;: &amp;#34;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/available_translations&amp;#34;, &amp;#34;transcriptLanguage&amp;#34;: &amp;#34;en&amp;#34;, &amp;#34;showCaptions&amp;#34;: &amp;#34;true&amp;#34;, &amp;#34;autohideHtml5&amp;#34;: false, &amp;#34;streams&amp;#34;: &amp;#34;1.00:b7xgknqkQk8&amp;#34;, &amp;#34;transcriptTranslationUrl&amp;#34;: &amp;#34;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/translation/__lang__&amp;#34;, &amp;#34;captionDataDir&amp;#34;: null, &amp;#34;autoplay&amp;#34;: false}'
+data-bumper-metadata='null'
+data-poster='null'
+tabindex="-1"
+&gt;
+&lt;div class="focus_grabber first"&gt;&lt;/div&gt;
+
+&lt;div class="tc-wrapper"&gt;
+&lt;div class="video-wrapper"&gt;
+&lt;span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"&gt;&lt;/span&gt;
+&lt;span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"&gt;&lt;/span&gt;
+&lt;div class="video-player-pre"&gt;&lt;/div&gt;
+&lt;div class="video-player"&gt;
+&lt;div id="0b9e39477cf34507a7a48f74be381fdd"&gt;&lt;/div&gt;
+&lt;h4 class="hd hd-4 video-error is-hidden"&gt;No playable video sources found.&lt;/h4&gt;
+&lt;h4 class="hd hd-4 video-hls-error is-hidden"&gt;
+Your browser does not support this video format. Try using a different browser.
+&lt;/h4&gt;
+&lt;/div&gt;
+&lt;div class="video-player-post"&gt;&lt;/div&gt;
+&lt;div class="closed-captions"&gt;&lt;/div&gt;
+&lt;div class="video-controls is-hidden"&gt;
+&lt;div&gt;
+&lt;div class="vcr"&gt;&lt;div class="vidtime"&gt;0:00 / 0:00&lt;/div&gt;&lt;/div&gt;
+&lt;div class="secondary-controls"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="focus_grabber last"&gt;&lt;/div&gt;
+
+&lt;h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd"&gt;Downloads and transcripts&lt;/h3&gt;
+&lt;div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd"&gt;
+&lt;div class="wrapper-download-video"&gt;
+&lt;h4 class="hd hd-5"&gt;Video&lt;/h4&gt;
+&lt;a class="btn-link video-sources video-download-button" href="https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4"&gt;
+Download video file
+&lt;/a&gt;
+&lt;/div&gt;
+&lt;div class="wrapper-download-transcripts"&gt;
+&lt;h4 class="hd hd-5"&gt;Transcripts&lt;/h4&gt;
+&lt;ul class="list-download-transcripts"&gt;
+&lt;li class="transcript-option"&gt;
+
+&lt;a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="srt"&gt;Download SubRip (.srt) file&lt;/a&gt;
+&lt;/li&gt;
+&lt;li class="transcript-option"&gt;
+
+&lt;a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="txt"&gt;Download Text (.txt) file&lt;/a&gt;
+&lt;/li&gt;
+&lt;/ul&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="wrap-instructor-info"&gt;
+&lt;a class="instructor-info-action" href="#0b9e39477cf34507a7a48f74be381fdd_debug" id="0b9e39477cf34507a7a48f74be381fdd_trig"&gt;Staff Debug Info&lt;/a&gt;
+
+&lt;/div&gt;
+
+&lt;div aria-hidden="true" role="dialog" tabindex="-1" id="0b9e39477cf34507a7a48f74be381fdd_xqa-modal" class="modal xqa-modal"&gt;
+&lt;div class="inner-wrapper"&gt;
+&lt;header&gt;
+&lt;h2&gt;Your Platform Name Here Content Quality Assessment&lt;/h2&gt;
+&lt;/header&gt;
+
+&lt;form id="0b9e39477cf34507a7a48f74be381fdd_xqa_form" class="xqa_form"&gt;
+&lt;label for="0b9e39477cf34507a7a48f74be381fdd_xqa_entry"&gt;Comment&lt;/label&gt;
+&lt;input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_xqa_entry" type="text" placeholder="comment"&gt;
+&lt;label for="0b9e39477cf34507a7a48f74be381fdd_xqa_tag"&gt;Tag&lt;/label&gt;
+&lt;span style="color:black;vertical-align: -10pt"&gt;Optional tag (eg "done" or "broken"):&amp;nbsp;       &lt;/span&gt;
+&lt;input id="0b9e39477cf34507a7a48f74be381fdd_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline"&gt;
+&lt;div class="submit"&gt;
+&lt;button name="submit" type="submit"&gt;Add comment&lt;/button&gt;
+&lt;/div&gt;
+&lt;hr&gt;
+&lt;div id="0b9e39477cf34507a7a48f74be381fdd_xqa_log_data"&gt;&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="0b9e39477cf34507a7a48f74be381fdd_debug" &gt;
+&lt;div class="inner-wrapper"&gt;
+&lt;header&gt;
+&lt;h2&gt;Staff Debug&lt;/h2&gt;
+&lt;/header&gt;
+
+&lt;hr /&gt;
+&lt;div class="staff_actions"&gt;
+&lt;h3&gt;Actions&lt;/h3&gt;
+&lt;div&gt;
+&lt;label for="sd_fu_0b9e39477cf34507a7a48f74be381fdd"&gt;Username:&lt;/label&gt;
+&lt;input type="text" tabindex="0" id="sd_fu_0b9e39477cf34507a7a48f74be381fdd" placeholder="AndyA"/&gt;
+&lt;/div&gt;
+&lt;div data-location="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-location-name="0b9e39477cf34507a7a48f74be381fdd"&gt;
+[
+&lt;button type="button" class="btn-link staff-debug-sdelete"&gt;Delete Learner's State&lt;/button&gt;
+]
+&lt;/div&gt;
+&lt;div id="result_0b9e39477cf34507a7a48f74be381fdd"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="staff_info" style="display:block"&gt;
+is_released = &lt;font color='red'&gt;Yes!&lt;/font&gt;
+location = block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd
+
+&lt;table summary="Module Fields"&gt;
+&lt;tr&gt;&lt;th&gt;Module Fields&lt;/th&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;transcript_language&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;en&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;group_access&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;graded&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_token_secret&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_1_25&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;transcript_download_format&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;srt&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;giturl&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;show_captions&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;source_file&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;handout&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;course_edit_method&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Studio&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;default_tab&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;bumper_do_not_show_again&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;in_entrance_exam&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;showanswer&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;attempted&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;display_name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Welcome!&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;sub&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;name_of_file&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;video_speed_optimizations&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;graceperiod&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;5:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;speed&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;format&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;due&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;edx_video_id&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;start&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;1970-01-01 05:00:00+00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_1_0&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;b7xgknqkQk8&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;only_on_web&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_1_5&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;days_early_for_beta&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;start_time&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;0:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;visible_to_staff_only&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;download_video&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;parent&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;tags&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;matlab_api_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;xqa_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;qaijS3UatK020Wc0sfCtFe0V6jpB4d64&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_is_available&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;html5_sources&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[u&amp;#39;https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4&amp;#39;]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;global_speed&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;1.0&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_storage_url&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;http://your_annotation_storage.com&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;track&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;use_latex_compiler&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;video_bumper&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;show_correctness&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;always&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_0_75&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;static_asset_path&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;hide_from_toc&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;bumper_last_view_date&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;show_reset_button&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;license&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;rerandomize&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;never&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;user_partitions&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;chrome&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;download_track&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes_visibility&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;source&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;transcripts&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;max_attempts&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;saved_video_position&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;0:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;self_paced&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td style="width:25%"&gt;end_time&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;0:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+&lt;table&gt;
+&lt;tr&gt;&lt;th&gt;XML attributes&lt;/th&gt;&lt;/tr&gt;
+&lt;/table&gt;
+category = VideoModuleWithMixins
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="0b9e39477cf34507a7a48f74be381fdd_history"&gt;
+&lt;div class="inner-wrapper"&gt;
+&lt;header&gt;
+&lt;h2&gt;Submission History Viewer&lt;/h2&gt;
+&lt;/header&gt;
+&lt;form id="0b9e39477cf34507a7a48f74be381fdd_history_form"&gt;
+&lt;label for="0b9e39477cf34507a7a48f74be381fdd_history_student_username"&gt;User:&lt;/label&gt;
+&lt;input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_history_student_username" type="text" placeholder=""/&gt;
+&lt;input type="hidden" id="0b9e39477cf34507a7a48f74be381fdd_history_location" value="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd"/&gt;
+&lt;div class="submit"&gt;
+&lt;button name="submit" type="submit"&gt;View History&lt;/button&gt;
+&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;div id="0b9e39477cf34507a7a48f74be381fdd_history_text" class="staff_info" style="display:block"&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div id="0b9e39477cf34507a7a48f74be381fdd_setup"&gt;&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+// assumes courseware.html's loaded this method.
+$(function () {
+setup_debug('0b9e39477cf34507a7a48f74be381fdd',
+null,
+{
+'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd',
+'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
+'category': 'VideoModuleWithMixins',
+'user': 'AndyA'
+}
+);
+});
+&lt;/script&gt;
+
+&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/div&gt;
+
+</div>
+<div id="seq_content" role="tabpanel" aria-labelledby="tab_0">
+
+
+<div class="wrap-instructor-info studio-view">
+    <a class="instructor-info-action" href="//localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc">View Unit in Studio</a>
+</div>
+<div class="xblock xblock-student_view xblock-student_view-vertical xblock-initialized" data-runtime-class="LmsRuntime" data-init="VerticalStudentView" data-course-id="course-v1:edX+DemoX+Demo_Course" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-block-type="vertical">
+
+
+    <h2 class="hd hd-2 unit-title">Introduction: Video and Sequences</h2>
+
+
+
+
+
+    <div class="bookmark-button-wrapper">
+        <button class="btn btn-link bookmark-button" aria-pressed="false" data-bookmark-id="AndyA,block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-bookmarks-api-url="/api/bookmarks/v1/bookmarks/">
+            <span class="bookmark-text">Bookmark this page</span>
+        </button>
+    </div>
+
+
+    <div class="vert-mod">
+        <div class="vert vert-0" data-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4">
+
+
+
+            <div class="xblock xblock-student_view xblock-student_view-html xmodule_display xmodule_HtmlModule xblock-initialized" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="html" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-type="HTMLModule" data-course-id="course-v1:edX+DemoX+Demo_Course">
+
+                <p><strong>Welcome to the edX Demo Course Introduction.</strong>&nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an "intro" video that shows you how it all works.&nbsp;</p>
+                <p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;">You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &nbsp;Just for fun, we'll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.</p>
+                <p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;">Watch the overview video (below), then click on "Example Week One" in the left hand navigation to get started.</p>
+            </div>
+
+            <div class="wrap-instructor-info">
+                <a class="instructor-info-action" href="#030e35c4756a4ddc8d40b95fbbfff4d4_debug" id="030e35c4756a4ddc8d40b95fbbfff4d4_trig">Staff Debug Info</a>
+
+            </div>
+
+            <div aria-hidden="true" role="dialog" tabindex="-1" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa-modal" class="modal xqa-modal">
+                <div class="inner-wrapper">
+                    <header>
+                        <h2>Your Platform Name Here Content Quality Assessment</h2>
+                    </header>
+
+                    <form id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_form" class="xqa_form">
+                        <label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry">Comment</label>
+                        <input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry" type="text" placeholder="comment">
+                        <label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag">Tag</label>
+                        <span style="color:black;vertical-align: -10pt">Optional tag (eg "done" or "broken"):&nbsp;       </span>
+                        <input id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline">
+                        <div class="submit">
+                            <button name="submit" type="submit">Add comment</button>
+                        </div>
+                        <hr>
+                        <div id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_log_data"></div>
+                    </form>
+
+                </div>
+            </div>
+
+            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_debug">
+                <div class="inner-wrapper">
+                    <header>
+                        <h2>Staff Debug</h2>
+                    </header>
+
+                    <hr>
+                    <div class="staff_actions">
+                        <h3>Actions</h3>
+                        <div>
+                            <label for="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4">Username:</label>
+                            <input type="text" tabindex="0" id="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4" placeholder="AndyA">
+                        </div>
+                        <div data-location="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-location-name="030e35c4756a4ddc8d40b95fbbfff4d4">
+                            [
+                            <button type="button" class="btn-link staff-debug-sdelete">Delete Learner's State</button>
+                            ]
+                        </div>
+                        <div id="result_030e35c4756a4ddc8d40b95fbbfff4d4"></div>
+                    </div>
+
+                    <div class="staff_info" style="display:block">
+                        is_released = <font color="red">Yes!</font>
+                        location = block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4
+
+                        <table summary="Module Fields">
+                            <tbody><tr><th>Module Fields</th></tr>
+                            <tr><td style="width:25%">visible_to_staff_only</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">graded</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">annotation_token_secret</td><td><pre style="display:inline-block; margin: 0;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</pre></td></tr>
+                            <tr><td style="width:25%">giturl</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">edxnotes</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">source_file</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">course_edit_method</td><td><pre style="display:inline-block; margin: 0;">Studio</pre></td></tr>
+                            <tr><td style="width:25%">default_tab</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">in_entrance_exam</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">showanswer</td><td><pre style="display:inline-block; margin: 0;">attempted</pre></td></tr>
+                            <tr><td style="width:25%">display_name</td><td><pre style="display:inline-block; margin: 0;">Blank HTML Page</pre></td></tr>
+                            <tr><td style="width:25%">video_speed_optimizations</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">graceperiod</td><td><pre style="display:inline-block; margin: 0;">5:00:00</pre></td></tr>
+                            <tr><td style="width:25%">format</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">due</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">start</td><td><pre style="display:inline-block; margin: 0;">1970-01-01 05:00:00+00:00</pre></td></tr>
+                            <tr><td style="width:25%">editor</td><td><pre style="display:inline-block; margin: 0;">visual</pre></td></tr>
+                            <tr><td style="width:25%">video_bumper</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
+                            <tr><td style="width:25%">max_attempts</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">parent</td><td><pre style="display:inline-block; margin: 0;">block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc</pre></td></tr>
+                            <tr><td style="width:25%">tags</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
+                            <tr><td style="width:25%">matlab_api_key</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">xqa_key</td><td><pre style="display:inline-block; margin: 0;">qaijS3UatK020Wc0sfCtFe0V6jpB4d64</pre></td></tr>
+                            <tr><td style="width:25%">annotation_storage_url</td><td><pre style="display:inline-block; margin: 0;">http://your_annotation_storage.com</pre></td></tr>
+                            <tr><td style="width:25%">use_latex_compiler</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">days_early_for_beta</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">show_correctness</td><td><pre style="display:inline-block; margin: 0;">always</pre></td></tr>
+                            <tr><td style="width:25%">source_code</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">data</td><td><pre style="display:inline-block; margin: 0;">&lt;p&gt;&lt;strong&gt;Welcome to the edX Demo Course Introduction.&lt;/strong&gt;&amp;nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an "intro" video that shows you how it all works.&amp;nbsp;&lt;/p&gt;
+&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &amp;nbsp;Just for fun, we'll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.&lt;/p&gt;
+&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;Watch the overview video (below), then click on "Example Week One" in the left hand navigation to get started.&lt;/p&gt;</pre></td></tr>
+                            <tr><td style="width:25%">static_asset_path</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">name</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">hide_from_toc</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">group_access</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
+                            <tr><td style="width:25%">rerandomize</td><td><pre style="display:inline-block; margin: 0;">never</pre></td></tr>
+                            <tr><td style="width:25%">user_partitions</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
+                            <tr><td style="width:25%">chrome</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">edxnotes_visibility</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">show_reset_button</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">self_paced</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            </tbody></table>
+                        <table>
+                            <tbody><tr><th>XML attributes</th></tr>
+                            </tbody></table>
+                        category = HtmlModuleWithMixins
+                    </div>
+                </div>
+            </div>
+
+            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_history">
+                <div class="inner-wrapper">
+                    <header>
+                        <h2>Submission History Viewer</h2>
+                    </header>
+                    <form id="030e35c4756a4ddc8d40b95fbbfff4d4_history_form">
+                        <label for="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username">User:</label>
+                        <input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username" type="text" placeholder="">
+                        <input type="hidden" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_location" value="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4">
+                        <div class="submit">
+                            <button name="submit" type="submit">View History</button>
+                        </div>
+                    </form>
+
+                    <div id="030e35c4756a4ddc8d40b95fbbfff4d4_history_text" class="staff_info" style="display:block">
+                    </div>
+                </div>
+            </div>
+
+            <div id="030e35c4756a4ddc8d40b95fbbfff4d4_setup"></div>
+
+            <script type="text/javascript">
+                // assumes courseware.html's loaded this method.
+                $(function () {
+                    setup_debug('030e35c4756a4ddc8d40b95fbbfff4d4',
+                        null,
+                        {
+                            'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
+                            'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
+                            'category': 'HtmlModuleWithMixins',
+                            'user': 'AndyA'
+                        }
+                    );
+                });
+            </script>
+
+        </div>
+        <div class="vert vert-1" data-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd">
+
+
+
+            <div class="xblock xblock-student_view xblock-student_view-video xmodule_display xmodule_VideoModule xblock-initialized" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="video" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-type="Video" data-course-id="course-v1:edX+DemoX+Demo_Course">
+
+
+
+
+                <h3 class="hd hd-2">Welcome!</h3>
+
+                <div id="video_0b9e39477cf34507a7a48f74be381fdd" class="video closed is-captions-rendered is-initialized" data-metadata="{&quot;savedVideoPosition&quot;: 0.0, &quot;ytMetadataUrl&quot;: &quot;https://www.googleapis.com/youtube/v3/videos/&quot;, &quot;sources&quot;: [&quot;https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4&quot;], &quot;speed&quot;: null, &quot;generalSpeed&quot;: 1.0, &quot;end&quot;: 0.0, &quot;sub&quot;: &quot;name_of_file&quot;, &quot;ytTestTimeout&quot;: 1500, &quot;transcriptLanguages&quot;: {&quot;en&quot;: &quot;English&quot;}, &quot;start&quot;: 0.0, &quot;ytKey&quot;: &quot;PUT_YOUR_API_KEY_HERE&quot;, &quot;poster&quot;: null, &quot;recordedYoutubeIsAvailable&quot;: true, &quot;ytApiUrl&quot;: &quot;https://www.youtube.com/iframe_api&quot;, &quot;saveStateUrl&quot;: &quot;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/xmodule_handler/save_user_state&quot;, &quot;transcriptAvailableTranslationsUrl&quot;: &quot;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/available_translations&quot;, &quot;transcriptLanguage&quot;: &quot;en&quot;, &quot;showCaptions&quot;: &quot;true&quot;, &quot;autohideHtml5&quot;: false, &quot;streams&quot;: &quot;1.00:b7xgknqkQk8&quot;, &quot;transcriptTranslationUrl&quot;: &quot;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/translation/__lang__&quot;, &quot;captionDataDir&quot;: null, &quot;autoplay&quot;: false}" data-bumper-metadata="null" data-poster="null" tabindex="-1">
+                    <div class="focus_grabber first" tabindex="-1"></div>
+
+                    <div class="tc-wrapper">
+                        <div class="video-wrapper">
+                            <span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
+                            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
+                            <div class="video-player-pre"></div>
+                            <div class="video-player">
+                                <iframe id="0b9e39477cf34507a7a48f74be381fdd" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/b7xgknqkQk8?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;cc_load_policy=0&amp;html5=1&amp;origin=http%3A%2F%2Flocalhost%3A8000&amp;widgetid=1" tabindex="-1" style="height: 641.25px; width: 1140px; top: 19.875px; left: 0px;"></iframe>
+                                <h4 class="hd hd-4 video-error is-hidden">No playable video sources found.</h4>
+                                <h4 class="hd hd-4 video-hls-error is-hidden">
+                                    Your browser does not support this video format. Try using a different browser.
+                                </h4>
+                            </div>
+                            <div class="video-player-post"></div>
+                            <div class="closed-captions" style="display: none;"></div>
+                            <div class="video-controls"><div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" role="application" title="Video position. Press space to toggle playback" aria-disabled="false" tabindex="-1"><div class="ui-slider-handle progress-handle ui-state-default ui-corner-all" role="slider" aria-disabled="false" aria-valuetext="0 seconds" aria-valuemax="0" aria-valuemin="0" aria-valuenow="0" tabindex="0" aria-label="Video position. Press space to toggle playback"></div><div class="ui-slider-range ui-widget-header ui-slider-range-min"></div></div>
+                                <div>
+                                    <div class="vcr"><button class="control video_control play" aria-disabled="false" title="Play"><span class="icon fa fa-play" aria-hidden="true"></span></button><div class="vidtime">0:00 / 0:00</div></div>
+                                    <div class="secondary-controls"><div class="speeds menu-container" role="application"><p class="sr instructions" id="speed-instructions-0b9e39477cf34507a7a48f74be381fdd">Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.</p><button class="control speed-button" aria-disabled="false" aria-expanded="false" title="Video speed: 1.0x" aria-describedby="speed-instructions-0b9e39477cf34507a7a48f74be381fdd"><span><span class="icon fa fa-caret-right" aria-hidden="true"></span></span><span class="label" aria-hidden="true">Speed</span><span class="value">1.0x</span></button><ol class="video-speeds menu"><li data-speed="2.0"><button class="control speed-option" tabindex="-1" aria-pressed="false">2.0x</button></li><li data-speed="1.50"><button class="control speed-option" tabindex="-1" aria-pressed="false">1.50x</button></li><li data-speed="1.25"><button class="control speed-option" tabindex="-1" aria-pressed="false">1.25x</button></li><li data-speed="1.0" class="is-active"><button class="control speed-option" tabindex="-1" aria-pressed="true">1.0x</button></li><li data-speed="0.75"><button class="control speed-option" tabindex="-1" aria-pressed="false">0.75x</button></li><li data-speed="0.50"><button class="control speed-option" tabindex="-1" aria-pressed="false">0.50x</button></li></ol></div><div class="volume" role="application"><p class="sr instructions" id="volume-instructions-0b9e39477cf34507a7a48f74be381fdd">Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.</p><button class="control" aria-disabled="false" "="" aria-expanded="false" title="Adjust video volume" aria-describedby="volume-instructions-0b9e39477cf34507a7a48f74be381fdd"><span class="icon fa fa-volume-up" aria-hidden="true"></span></button><div class="sr video-live-region" aria-hidden="false" aria-live="polite">Maximum Volume.</div><div class="volume-slider-container" aria-hidden="true" title="Adjust video volume"><div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="Volume" aria-disabled="false"><div class="ui-slider-handle volume-handle ui-state-default ui-corner-all" tabindex="-1" style="bottom: 100%;"></div><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div></div></div></div><button class="control quality-control is-hidden" aria-disabled="false" title="High Definition"><span class="icon icon-hd" aria-hidden="true">HD</span><span class="sr text-translation">High Definition</span>&nbsp;<span class="sr control-text">off</span></button><button class="control add-fullscreen" aria-disabled="false" title="Fill browser"><span class="icon fa fa-arrows-alt" aria-hidden="true"></span></button><div class="grouped-controls"><button class="control toggle-captions" aria-disabled="false" title="Turn on closed captioning"><span class="icon fa fa-cc" aria-hidden="true"></span></button><button class="control toggle-transcript" aria-disabled="false" title="Turn on transcripts"><span class="icon fa fa-quote-left" aria-hidden="true"></span></button></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="subtitles" role="region" id="transcript-0b9e39477cf34507a7a48f74be381fdd" aria-label="Activating a link in this group will skip to the corresponding point in the video." style="max-height: 639.5px;"><h3 id="transcript-label-0b9e39477cf34507a7a48f74be381fdd" class="transcript-title sr">Video transcript</h3><ol id="transcript-captions-0b9e39477cf34507a7a48f74be381fdd" class="subtitles-menu" lang="en"><li class="spacing" style="height: 340.5px;"><a href="#transcript-end-0b9e39477cf34507a7a48f74be381fdd" id="transcript-start-0b9e39477cf34507a7a48f74be381fdd" class="transcript-start" lang="en">Start of transcript. Skip to the end.</a></li><li><span role="link" data-index="0" data-start="0" tabindex="0"></span></li><li><span role="link" data-index="1" data-start="650" tabindex="0">ERIC: Hi, and welcome to the edX demonstration course.</span></li><li><span role="link" data-index="2" data-start="3920" tabindex="0">I'm Eric, and I'm here to help you get a better understanding of how fun and</span></li><li><span role="link" data-index="3" data-start="7450" tabindex="0">easy it is to take an edX course.</span></li><li><span role="link" data-index="4" data-start="10080" tabindex="0">So, let's get started.</span></li><li><span role="link" data-index="5" data-start="11700" tabindex="0">Let me show you how all the parts work together.</span></li><li><span role="link" data-index="6" data-start="13950" tabindex="0">If at any time you want to skip this video and get a firsthand experience</span></li><li><span role="link" data-index="7" data-start="18000" tabindex="0">of the demonstration course, all you have to do is click</span></li><li><span role="link" data-index="8" data-start="21020" tabindex="0">week one to the left.</span></li><li><span role="link" data-index="9" data-start="22710" tabindex="0">Don't worry, I won't be offended.</span></li><li><span role="link" data-index="10" data-start="25050" tabindex="0">Let's first look along the top of the page.</span></li><li><span role="link" data-index="11" data-start="27730" tabindex="0">This area's called the navigation bar.</span></li><li><span role="link" data-index="12" data-start="29990" tabindex="0">Click on Courseware to interact with your course.</span></li><li><span role="link" data-index="13" data-start="32950" tabindex="0">Course Info contains course announcements and updates from the</span></li><li><span role="link" data-index="14" data-start="36190" tabindex="0">course staff.</span></li><li><span role="link" data-index="15" data-start="37390" tabindex="0">If your course has digital textbooks, this is where you'll find them.</span></li><li><span role="link" data-index="16" data-start="41130" tabindex="0">Discussion is where you can communicate with the fellow students</span></li><li><span role="link" data-index="17" data-start="43720" tabindex="0">on topics and projects, and even occasionally with the course staff.</span></li><li><span role="link" data-index="18" data-start="47380" tabindex="0">When available, the course Wiki acts as a knowledge base for your course.</span></li><li><span role="link" data-index="19" data-start="51430" tabindex="0">It's a helpful resource.</span></li><li><span role="link" data-index="20" data-start="53000" tabindex="0">Clicking on Progress will reveal how well you're doing in</span></li><li><span role="link" data-index="21" data-start="55980" tabindex="0">your studies and exams.</span></li><li><span role="link" data-index="22" data-start="57790" tabindex="0">When you take the demo course, we'll provide you with a simple progress</span></li><li><span role="link" data-index="23" data-start="61000" tabindex="0">report matching your results.</span></li><li><span role="link" data-index="24" data-start="64590" tabindex="0">Let's look at the left column now.</span></li><li><span role="link" data-index="25" data-start="66440" tabindex="0">The left side of the Courseware screen contains a course navigation bar</span></li><li><span role="link" data-index="26" data-start="69710" tabindex="0">starting from the top down.</span></li><li><span role="link" data-index="27" data-start="71790" tabindex="0">Many courses start with an overview of edX and an introduction to the course.</span></li><li><span role="link" data-index="28" data-start="76110" tabindex="0">Below the overview are segments of the course, which are released as the</span></li><li><span role="link" data-index="29" data-start="79570" tabindex="0">course progresses.</span></li><li><span role="link" data-index="30" data-start="81080" tabindex="0">Typically, an edX course is delivered in week by week segments, and have</span></li><li><span role="link" data-index="31" data-start="84950" tabindex="0">lessons and homeworks you need to complete.</span></li><li><span role="link" data-index="32" data-start="87580" tabindex="0">Many courses are 10 to 12 weeks long.</span></li><li><span role="link" data-index="33" data-start="90270" tabindex="0">We made this demonstration course three weeks for simplicity.</span></li><li><span role="link" data-index="34" data-start="94920" tabindex="0">Let's now look at the learning sequence.</span></li><li><span role="link" data-index="35" data-start="97070" tabindex="0">Each item in the left column reveals a corresponding learning sequence.</span></li><li><span role="link" data-index="36" data-start="100920" tabindex="0">Work your way from left to right.</span></li><li><span role="link" data-index="37" data-start="103600" tabindex="0">Learning sequences can contain lectures, exercises, and interactive</span></li><li><span role="link" data-index="38" data-start="107200" tabindex="0">lessons that you can complete on your own schedule.</span></li><li><span role="link" data-index="39" data-start="111090" tabindex="0">Next, let's discover what makes edX fun and unique, its interactivity.</span></li><li><span role="link" data-index="40" data-start="116760" tabindex="0">edX prides itself on its interactive lessons, which can include</span></li><li><span role="link" data-index="41" data-start="120410" tabindex="0">demonstrations, visualizations, and virtual environments.</span></li><li><span role="link" data-index="42" data-start="124600" tabindex="0">You can try out some in the demo course.</span></li><li><span role="link" data-index="43" data-start="127190" tabindex="0">Interactive lessons are often graded and contribute to your final grade.</span></li><li><span role="link" data-index="44" data-start="131590" tabindex="0">While the edX platform also supports more traditional question formats like</span></li><li><span role="link" data-index="45" data-start="135480" tabindex="0">multiple choice, our classes also test your understanding by allowing you to</span></li><li><span role="link" data-index="46" data-start="139985" tabindex="0">use labs and simulators, and even asking you to write an essay.</span></li><li><span role="link" data-index="47" data-start="143930" tabindex="0">Example of these graded interactions are in the demo course.</span></li><li><span role="link" data-index="48" data-start="147400" tabindex="0">You can see how the questions the course uses for gauging your learning</span></li><li><span role="link" data-index="49" data-start="150640" tabindex="0">process can even be auto graded, or detailed feedback given in real time.</span></li><li><span role="link" data-index="50" data-start="155620" tabindex="0">So while an edX course might be rigorous, the tools and visualizations</span></li><li><span role="link" data-index="51" data-start="159350" tabindex="0">are really fun and truly interactive.</span></li><li><span role="link" data-index="52" data-start="162280" tabindex="0">Finally, there are many ways successful students like to you</span></li><li><span role="link" data-index="53" data-start="165560" tabindex="0">interact to get the most out of a course.</span></li><li><span role="link" data-index="54" data-start="167740" tabindex="0">Beyond the discussion forums, you can meet and engage with fellow classmates</span></li><li><span role="link" data-index="55" data-start="171560" tabindex="0">through a local meet up-- which we highly recommend--</span></li><li><span role="link" data-index="56" data-start="174050" tabindex="0">a Google Hangout, or even invite students to join you via Twitter,</span></li><li><span role="link" data-index="57" data-start="177830" tabindex="0">Facebook, or other social networks.</span></li><li><span role="link" data-index="58" data-start="179820" tabindex="0">It's a proven fact that if you engage with others while taking a course,</span></li><li><span role="link" data-index="59" data-start="182970" tabindex="0">you're more likely to succeed.</span></li><li><span role="link" data-index="60" data-start="184990" tabindex="0">Now that you've seen how easy it is to take an edX course, experience this</span></li><li><span role="link" data-index="61" data-start="188110" tabindex="0">demonstration course.</span></li><li><span role="link" data-index="62" data-start="189070" tabindex="0">Firsthand all you have to do is click on week one to the left and you can</span></li><li><span role="link" data-index="63" data-start="192980" tabindex="0">get started.</span></li><li><span role="link" data-index="64" data-start="194230" tabindex="0"></span></li><li class="spacing" style="height: 340.5px;"><a href="#transcript-start-0b9e39477cf34507a7a48f74be381fdd" id="transcript-end-0b9e39477cf34507a7a48f74be381fdd" class="transcript-end" lang="en">End of transcript. Skip to the start.</a></li></ol></div></div>
+
+                    <div class="focus_grabber last" tabindex="-1"></div>
+
+                    <h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd">Downloads and transcripts</h3>
+                    <div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd">
+                        <div class="wrapper-download-video">
+                            <h4 class="hd hd-5">Video</h4>
+                            <a class="btn-link video-sources video-download-button" href="https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4">
+                                Download video file
+                            </a>
+                        </div>
+                        <div class="wrapper-download-transcripts">
+                            <h4 class="hd hd-5">Transcripts</h4>
+                            <ul class="list-download-transcripts">
+                                <li class="transcript-option">
+
+                                    <a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="srt">Download SubRip (.srt) file</a>
+                                </li>
+                                <li class="transcript-option">
+
+                                    <a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="txt">Download Text (.txt) file</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="wrap-instructor-info">
+                <a class="instructor-info-action" href="#0b9e39477cf34507a7a48f74be381fdd_debug" id="0b9e39477cf34507a7a48f74be381fdd_trig">Staff Debug Info</a>
+
+            </div>
+
+            <div aria-hidden="true" role="dialog" tabindex="-1" id="0b9e39477cf34507a7a48f74be381fdd_xqa-modal" class="modal xqa-modal">
+                <div class="inner-wrapper">
+                    <header>
+                        <h2>Your Platform Name Here Content Quality Assessment</h2>
+                    </header>
+
+                    <form id="0b9e39477cf34507a7a48f74be381fdd_xqa_form" class="xqa_form">
+                        <label for="0b9e39477cf34507a7a48f74be381fdd_xqa_entry">Comment</label>
+                        <input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_xqa_entry" type="text" placeholder="comment">
+                        <label for="0b9e39477cf34507a7a48f74be381fdd_xqa_tag">Tag</label>
+                        <span style="color:black;vertical-align: -10pt">Optional tag (eg "done" or "broken"):&nbsp;       </span>
+                        <input id="0b9e39477cf34507a7a48f74be381fdd_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline">
+                        <div class="submit">
+                            <button name="submit" type="submit">Add comment</button>
+                        </div>
+                        <hr>
+                        <div id="0b9e39477cf34507a7a48f74be381fdd_xqa_log_data"></div>
+                    </form>
+
+                </div>
+            </div>
+
+            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="0b9e39477cf34507a7a48f74be381fdd_debug">
+                <div class="inner-wrapper">
+                    <header>
+                        <h2>Staff Debug</h2>
+                    </header>
+
+                    <hr>
+                    <div class="staff_actions">
+                        <h3>Actions</h3>
+                        <div>
+                            <label for="sd_fu_0b9e39477cf34507a7a48f74be381fdd">Username:</label>
+                            <input type="text" tabindex="0" id="sd_fu_0b9e39477cf34507a7a48f74be381fdd" placeholder="AndyA">
+                        </div>
+                        <div data-location="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-location-name="0b9e39477cf34507a7a48f74be381fdd">
+                            [
+                            <button type="button" class="btn-link staff-debug-sdelete">Delete Learner's State</button>
+                            ]
+                        </div>
+                        <div id="result_0b9e39477cf34507a7a48f74be381fdd"></div>
+                    </div>
+
+                    <div class="staff_info" style="display:block">
+                        is_released = <font color="red">Yes!</font>
+                        location = block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd
+
+                        <table summary="Module Fields">
+                            <tbody><tr><th>Module Fields</th></tr>
+                            <tr><td style="width:25%">transcript_language</td><td><pre style="display:inline-block; margin: 0;">en</pre></td></tr>
+                            <tr><td style="width:25%">group_access</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
+                            <tr><td style="width:25%">graded</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">annotation_token_secret</td><td><pre style="display:inline-block; margin: 0;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</pre></td></tr>
+                            <tr><td style="width:25%">youtube_id_1_25</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">transcript_download_format</td><td><pre style="display:inline-block; margin: 0;">srt</pre></td></tr>
+                            <tr><td style="width:25%">giturl</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">edxnotes</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">show_captions</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">source_file</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">handout</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">course_edit_method</td><td><pre style="display:inline-block; margin: 0;">Studio</pre></td></tr>
+                            <tr><td style="width:25%">default_tab</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">bumper_do_not_show_again</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">in_entrance_exam</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">showanswer</td><td><pre style="display:inline-block; margin: 0;">attempted</pre></td></tr>
+                            <tr><td style="width:25%">display_name</td><td><pre style="display:inline-block; margin: 0;">Welcome!</pre></td></tr>
+                            <tr><td style="width:25%">sub</td><td><pre style="display:inline-block; margin: 0;">name_of_file</pre></td></tr>
+                            <tr><td style="width:25%">video_speed_optimizations</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">graceperiod</td><td><pre style="display:inline-block; margin: 0;">5:00:00</pre></td></tr>
+                            <tr><td style="width:25%">speed</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">format</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">due</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">edx_video_id</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">start</td><td><pre style="display:inline-block; margin: 0;">1970-01-01 05:00:00+00:00</pre></td></tr>
+                            <tr><td style="width:25%">youtube_id_1_0</td><td><pre style="display:inline-block; margin: 0;">b7xgknqkQk8</pre></td></tr>
+                            <tr><td style="width:25%">only_on_web</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">youtube_id_1_5</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">days_early_for_beta</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">start_time</td><td><pre style="display:inline-block; margin: 0;">0:00:00</pre></td></tr>
+                            <tr><td style="width:25%">visible_to_staff_only</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">download_video</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">parent</td><td><pre style="display:inline-block; margin: 0;">block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc</pre></td></tr>
+                            <tr><td style="width:25%">tags</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
+                            <tr><td style="width:25%">matlab_api_key</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">xqa_key</td><td><pre style="display:inline-block; margin: 0;">qaijS3UatK020Wc0sfCtFe0V6jpB4d64</pre></td></tr>
+                            <tr><td style="width:25%">youtube_is_available</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">html5_sources</td><td><pre style="display:inline-block; margin: 0;">[u'https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4']</pre></td></tr>
+                            <tr><td style="width:25%">global_speed</td><td><pre style="display:inline-block; margin: 0;">1.0</pre></td></tr>
+                            <tr><td style="width:25%">annotation_storage_url</td><td><pre style="display:inline-block; margin: 0;">http://your_annotation_storage.com</pre></td></tr>
+                            <tr><td style="width:25%">track</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">use_latex_compiler</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">video_bumper</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
+                            <tr><td style="width:25%">show_correctness</td><td><pre style="display:inline-block; margin: 0;">always</pre></td></tr>
+                            <tr><td style="width:25%">youtube_id_0_75</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">static_asset_path</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">hide_from_toc</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">bumper_last_view_date</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">show_reset_button</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">name</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">license</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">rerandomize</td><td><pre style="display:inline-block; margin: 0;">never</pre></td></tr>
+                            <tr><td style="width:25%">user_partitions</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
+                            <tr><td style="width:25%">chrome</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">download_track</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">edxnotes_visibility</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
+                            <tr><td style="width:25%">source</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
+                            <tr><td style="width:25%">transcripts</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
+                            <tr><td style="width:25%">max_attempts</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
+                            <tr><td style="width:25%">saved_video_position</td><td><pre style="display:inline-block; margin: 0;">0:00:00</pre></td></tr>
+                            <tr><td style="width:25%">self_paced</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
+                            <tr><td style="width:25%">end_time</td><td><pre style="display:inline-block; margin: 0;">0:00:00</pre></td></tr>
+                            </tbody></table>
+                        <table>
+                            <tbody><tr><th>XML attributes</th></tr>
+                            </tbody></table>
+                        category = VideoModuleWithMixins
+                    </div>
+                </div>
+            </div>
+
+            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="0b9e39477cf34507a7a48f74be381fdd_history">
+                <div class="inner-wrapper">
+                    <header>
+                        <h2>Submission History Viewer</h2>
+                    </header>
+                    <form id="0b9e39477cf34507a7a48f74be381fdd_history_form">
+                        <label for="0b9e39477cf34507a7a48f74be381fdd_history_student_username">User:</label>
+                        <input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_history_student_username" type="text" placeholder="">
+                        <input type="hidden" id="0b9e39477cf34507a7a48f74be381fdd_history_location" value="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd">
+                        <div class="submit">
+                            <button name="submit" type="submit">View History</button>
+                        </div>
+                    </form>
+
+                    <div id="0b9e39477cf34507a7a48f74be381fdd_history_text" class="staff_info" style="display:block">
+                    </div>
+                </div>
+            </div>
+
+            <div id="0b9e39477cf34507a7a48f74be381fdd_setup"></div>
+
+            <script type="text/javascript">
+                // assumes courseware.html's loaded this method.
+                $(function () {
+                    setup_debug('0b9e39477cf34507a7a48f74be381fdd',
+                        null,
+                        {
+                            'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd',
+                            'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
+                            'category': 'VideoModuleWithMixins',
+                            'user': 'AndyA'
+                        }
+                    );
+                });
+            </script>
+
+        </div>
+    </div>
+
+</div>
+
+</div>
+
+<nav class="sequence-bottom" aria-label="Section">
+    <button class="sequence-nav-button button-previous disabled" disabled="disabled">
+        <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
+        <span>Previous</span>
+    </button>
+    <button class="sequence-nav-button button-next">
+        <span>Next</span>
+        <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
+    </button>
+</nav>
+</div>
+
+</div>
+
+</main>
+</div>
+</section>
diff --git a/lms/templates/ux/reference/index.html b/lms/templates/ux/reference/index.html
index 1dd042c83c..c546031f24 100644
--- a/lms/templates/ux/reference/index.html
+++ b/lms/templates/ux/reference/index.html
@@ -23,16 +23,19 @@
                     <h3>v1-style LMS Pages</h3>
                     <ul>
                         <li><a href="v1/course-skeleton.html">Course skeleton page</a></li>
+                        <li><a href="v1/unit-page.html">Unit page</a></li>
                     </ul>
 
                     <h3>Pattern Library</h3>
                     <ul>
                         <li><a href="pattern-library/course-skeleton.html">Course skeleton page</a></li>
+                        <li><a href="pattern-library/unit-page.html">Unit page</a></li>
                     </ul>
 
                     <h3>Bootstrap</h3>
                     <ul>
                         <li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li>
+                        <li><a href="bootstrap/unit-page.html">Unit page</a></li>
                     </ul>
                 </section>
             </article>
diff --git a/lms/templates/ux/reference/pattern-library/unit-page.html b/lms/templates/ux/reference/pattern-library/unit-page.html
new file mode 100644
index 0000000000..08094fde4d
--- /dev/null
+++ b/lms/templates/ux/reference/pattern-library/unit-page.html
@@ -0,0 +1,46 @@
+## mako
+
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
+<%page expression_filter="h"/>
+
+<%namespace name='static' file='/static_content.html'/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Course Skeleton</%block>
+
+<%block name="bodyclass">view-in-course view-courseware courseware</%block>
+
+<%block name="headextra">
+<%static:css group='style-course-vendor'/>
+<%static:css group='style-course'/>
+</%block>
+
+<%block name="content">
+<nav class="wrapper-course-material">
+    <div class="course-material">
+        <ol class="tabs course-tabs">
+            <li class="tab">
+                <a href="index.html">
+                    Home
+                </a>
+            </li>
+
+            <li class="tab">
+                <a href="#">
+                    Course
+                </a>
+            </li>
+
+            <li class="tab">
+                <a href="#" class="active">
+                    Skeleton
+                    <span class="sr-only">, current location</span>
+                </a>
+            </li>
+        </ol>
+    </div>
+</nav>
+<%include file="../fragments/unit-fragment.html"/>
+</%block>
diff --git a/lms/templates/ux/reference/v1/course-skeleton.html b/lms/templates/ux/reference/v1/course-skeleton.html
index f19081dbe3..71b847a2b1 100644
--- a/lms/templates/ux/reference/v1/course-skeleton.html
+++ b/lms/templates/ux/reference/v1/course-skeleton.html
@@ -40,906 +40,62 @@
     </div>
 </nav>
 <section class="container">
-<div class="course-wrapper" role="presentation">
-<header class="page-header has-secondary">
-    <div class="page-header-main">
-        <nav aria-label="Course" class="sr-is-focusable" tabindex="-1">
-            <div class="has-breadcrumbs">
-                <div class="breadcrumbs">
-                                    <span class="nav-item nav-item-course">
-                                        <a href="/courses/course-v1:edX+DemoX+Demo_Course/course/">Course</a>
-                                    </span>
-                    <span class="icon fa fa-angle-right" aria-hidden="true"></span>
-                    <span class="nav-item nav-item-chapter">
-                                        <a href="/courses/course-v1:edX+DemoX+Demo_Course/course/#block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b">Introduction</a>
-                                    </span>
-                    <span class="icon fa fa-angle-right" aria-hidden="true"></span>
-                    <span class="nav-item nav-item-section">
-                                        <a href="/courses/course-v1:edX+DemoX+Demo_Course/course/#block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction">Demo Course Overview</a>
-                                    </span>
-                    <span class="icon fa fa-angle-right" aria-hidden="true"></span>
-                    <span class="nav-item nav-item-sequence">Introduction: Video and Sequences</span>
-                </div>
-            </div>
-        </nav>
-    </div>
-</header>
-<main id="main" tabindex="-1" aria-label="Content">
-
-<div class="xblock xblock-student_view xblock-student_view-sequential xmodule_display xmodule_SequenceModule xblock-initialized" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="sequential" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction" data-type="Sequence" data-course-id="course-v1:edX+DemoX+Demo_Course">
-
-
-
-
-<div id="sequence_edx_introduction" class="sequence" data-id="block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction" data-position="1" data-ajax-url="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction/handler/xmodule_handler" data-next-url="/courses/course-v1:edX+DemoX+Demo_Course/courseware/interactive_demonstrations/19a30717eff543078a5d94ae9d6c18a5/?child=first" data-prev-url="None">
-<div class="sequence-nav">
-    <button class="sequence-nav-button button-previous disabled" aria-hidden="true" disabled="disabled">
-        <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
-        <span>Previous</span>
-    </button>
-    <nav class="sequence-list-wrapper" aria-label="Sequence">
-        <ol id="sequence-list" role="tablist">
-            <li>
-                <button class="seq_video nav-item tab active" role="tab" tabindex="0" aria-selected="true" aria-expanded="true" aria-controls="seq_content" data-index="0" data-id="block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-element="1" data-page-title="Introduction: Video and Sequences" data-path="Introduction > Demo Course Overview > Introduction: Video and Sequences" id="tab_0">
-                    <span class="icon fa seq_video" aria-hidden="true"></span>
-                    <span class="fa fa-fw fa-bookmark bookmark-icon is-hidden" aria-hidden="true"></span>
-                    <div class="sequence-tooltip sr"><span class="sr">video&nbsp;</span>Introduction: Video and Sequences<span class="sr bookmark-icon-sr">&nbsp;</span></div>
-                </button>
-            </li>
-        </ol>
-    </nav>
-    <button class="sequence-nav-button button-next" aria-hidden="true">
-        <span>Next</span>
-        <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
-    </button>
-</div>
-
-<div class="sr-is-focusable" tabindex="-1"></div>
-
-<div id="seq_contents_0" aria-labelledby="tab_0" aria-hidden="true" class="seq_contents tex2jax_ignore asciimath2jax_ignore">
-
-
-&lt;div class="wrap-instructor-info studio-view"&gt;
-&lt;a class="instructor-info-action" href="//localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc"&gt;View Unit in Studio&lt;/a&gt;
-&lt;/div&gt;
-&lt;div class="xblock xblock-student_view xblock-student_view-vertical" data-runtime-class="LmsRuntime" data-init="VerticalStudentView" data-course-id="course-v1:edX+DemoX+Demo_Course" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-block-type="vertical"&gt;
-
-
-&lt;h2 class="hd hd-2 unit-title"&gt;Introduction: Video and Sequences&lt;/h2&gt;
-
-
-
-
-
-&lt;div class="bookmark-button-wrapper"&gt;
-&lt;button class="btn btn-link bookmark-button "
-aria-pressed="false"
-data-bookmark-id="AndyA,block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc"
-data-bookmarks-api-url="/api/bookmarks/v1/bookmarks/"&gt;
-&lt;span class="bookmark-text"&gt;Bookmark this page&lt;/span&gt;
-&lt;/button&gt;
-&lt;/div&gt;
-
-
-&lt;div class="vert-mod"&gt;
-&lt;div class="vert vert-0" data-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4"&gt;
-
-
-
-&lt;div class="xblock xblock-student_view xblock-student_view-html xmodule_display xmodule_HtmlModule" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="html" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-type="HTMLModule" data-course-id="course-v1:edX+DemoX+Demo_Course"&gt;
-&lt;script type="json/xblock-args" class="xblock-json-init-args"&gt;
-{"xmodule-type": "HTMLModule"}
-&lt;/script&gt;
-&lt;p&gt;&lt;strong&gt;Welcome to the edX Demo Course Introduction.&lt;/strong&gt;&amp;nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an "intro" video that shows you how it all works.&amp;nbsp;&lt;/p&gt;
-&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &amp;nbsp;Just for fun, we'll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.&lt;/p&gt;
-&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;Watch the overview video (below), then click on "Example Week One" in the left hand navigation to get started.&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;div class="wrap-instructor-info"&gt;
-&lt;a class="instructor-info-action" href="#030e35c4756a4ddc8d40b95fbbfff4d4_debug" id="030e35c4756a4ddc8d40b95fbbfff4d4_trig"&gt;Staff Debug Info&lt;/a&gt;
-
-&lt;/div&gt;
-
-&lt;div aria-hidden="true" role="dialog" tabindex="-1" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa-modal" class="modal xqa-modal"&gt;
-&lt;div class="inner-wrapper"&gt;
-&lt;header&gt;
-&lt;h2&gt;Your Platform Name Here Content Quality Assessment&lt;/h2&gt;
-&lt;/header&gt;
-
-&lt;form id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_form" class="xqa_form"&gt;
-&lt;label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry"&gt;Comment&lt;/label&gt;
-&lt;input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry" type="text" placeholder="comment"&gt;
-&lt;label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag"&gt;Tag&lt;/label&gt;
-&lt;span style="color:black;vertical-align: -10pt"&gt;Optional tag (eg "done" or "broken"):&amp;nbsp;       &lt;/span&gt;
-&lt;input id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline"&gt;
-&lt;div class="submit"&gt;
-&lt;button name="submit" type="submit"&gt;Add comment&lt;/button&gt;
-&lt;/div&gt;
-&lt;hr&gt;
-&lt;div id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_log_data"&gt;&lt;/div&gt;
-&lt;/form&gt;
-
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_debug" &gt;
-&lt;div class="inner-wrapper"&gt;
-&lt;header&gt;
-&lt;h2&gt;Staff Debug&lt;/h2&gt;
-&lt;/header&gt;
-
-&lt;hr /&gt;
-&lt;div class="staff_actions"&gt;
-&lt;h3&gt;Actions&lt;/h3&gt;
-&lt;div&gt;
-&lt;label for="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4"&gt;Username:&lt;/label&gt;
-&lt;input type="text" tabindex="0" id="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4" placeholder="AndyA"/&gt;
-&lt;/div&gt;
-&lt;div data-location="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-location-name="030e35c4756a4ddc8d40b95fbbfff4d4"&gt;
-[
-&lt;button type="button" class="btn-link staff-debug-sdelete"&gt;Delete Learner's State&lt;/button&gt;
-]
-&lt;/div&gt;
-&lt;div id="result_030e35c4756a4ddc8d40b95fbbfff4d4"&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="staff_info" style="display:block"&gt;
-is_released = &lt;font color='red'&gt;Yes!&lt;/font&gt;
-location = block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4
-
-&lt;table summary="Module Fields"&gt;
-&lt;tr&gt;&lt;th&gt;Module Fields&lt;/th&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;visible_to_staff_only&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;graded&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_token_secret&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;giturl&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;source_file&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;course_edit_method&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Studio&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;default_tab&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;in_entrance_exam&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;showanswer&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;attempted&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;display_name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Blank HTML Page&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;video_speed_optimizations&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;graceperiod&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;5:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;format&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;due&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;start&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;1970-01-01 05:00:00+00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;editor&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;visual&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;video_bumper&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;max_attempts&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;parent&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;tags&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;matlab_api_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;xqa_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;qaijS3UatK020Wc0sfCtFe0V6jpB4d64&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_storage_url&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;http://your_annotation_storage.com&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;use_latex_compiler&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;days_early_for_beta&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;show_correctness&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;always&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;source_code&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;data&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Welcome to the edX Demo Course Introduction.&amp;lt;/strong&amp;gt;&amp;amp;nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an &amp;#34;intro&amp;#34; video that shows you how it all works.&amp;amp;nbsp;&amp;lt;/p&amp;gt;
-&amp;lt;p style=&amp;#34;margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: &amp;#39;Open Sans&amp;#39;, Verdana, Geneva, sans-serif;&amp;#34;&amp;gt;You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &amp;amp;nbsp;Just for fun, we&amp;#39;ll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.&amp;lt;/p&amp;gt;
-&amp;lt;p style=&amp;#34;margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: &amp;#39;Open Sans&amp;#39;, Verdana, Geneva, sans-serif;&amp;#34;&amp;gt;Watch the overview video (below), then click on &amp;#34;Example Week One&amp;#34; in the left hand navigation to get started.&amp;lt;/p&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;static_asset_path&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;hide_from_toc&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;group_access&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;rerandomize&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;never&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;user_partitions&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;chrome&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes_visibility&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;show_reset_button&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;self_paced&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-&lt;table&gt;
-&lt;tr&gt;&lt;th&gt;XML attributes&lt;/th&gt;&lt;/tr&gt;
-&lt;/table&gt;
-category = HtmlModuleWithMixins
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_history"&gt;
-&lt;div class="inner-wrapper"&gt;
-&lt;header&gt;
-&lt;h2&gt;Submission History Viewer&lt;/h2&gt;
-&lt;/header&gt;
-&lt;form id="030e35c4756a4ddc8d40b95fbbfff4d4_history_form"&gt;
-&lt;label for="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username"&gt;User:&lt;/label&gt;
-&lt;input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username" type="text" placeholder=""/&gt;
-&lt;input type="hidden" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_location" value="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4"/&gt;
-&lt;div class="submit"&gt;
-&lt;button name="submit" type="submit"&gt;View History&lt;/button&gt;
-&lt;/div&gt;
-&lt;/form&gt;
-
-&lt;div id="030e35c4756a4ddc8d40b95fbbfff4d4_history_text" class="staff_info" style="display:block"&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div id="030e35c4756a4ddc8d40b95fbbfff4d4_setup"&gt;&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-// assumes courseware.html's loaded this method.
-$(function () {
-setup_debug('030e35c4756a4ddc8d40b95fbbfff4d4',
-null,
-{
-'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
-'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
-'category': 'HtmlModuleWithMixins',
-'user': 'AndyA'
-}
-);
-});
-&lt;/script&gt;
-
-&lt;/div&gt;
-&lt;div class="vert vert-1" data-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd"&gt;
-
-
-
-&lt;div class="xblock xblock-student_view xblock-student_view-video xmodule_display xmodule_VideoModule" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="video" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-type="Video" data-course-id="course-v1:edX+DemoX+Demo_Course"&gt;
-&lt;script type="json/xblock-args" class="xblock-json-init-args"&gt;
-{"xmodule-type": "Video"}
-&lt;/script&gt;
-
-
-
-&lt;h3 class="hd hd-2"&gt;Welcome!&lt;/h3&gt;
-
-&lt;div
-id="video_0b9e39477cf34507a7a48f74be381fdd"
-class="video closed"
-data-metadata='{&amp;#34;savedVideoPosition&amp;#34;: 0.0, &amp;#34;ytMetadataUrl&amp;#34;: &amp;#34;https://www.googleapis.com/youtube/v3/videos/&amp;#34;, &amp;#34;sources&amp;#34;: [&amp;#34;https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4&amp;#34;], &amp;#34;speed&amp;#34;: null, &amp;#34;generalSpeed&amp;#34;: 1.0, &amp;#34;end&amp;#34;: 0.0, &amp;#34;sub&amp;#34;: &amp;#34;name_of_file&amp;#34;, &amp;#34;ytTestTimeout&amp;#34;: 1500, &amp;#34;transcriptLanguages&amp;#34;: {&amp;#34;en&amp;#34;: &amp;#34;English&amp;#34;}, &amp;#34;start&amp;#34;: 0.0, &amp;#34;ytKey&amp;#34;: &amp;#34;PUT_YOUR_API_KEY_HERE&amp;#34;, &amp;#34;poster&amp;#34;: null, &amp;#34;recordedYoutubeIsAvailable&amp;#34;: true, &amp;#34;ytApiUrl&amp;#34;: &amp;#34;https://www.youtube.com/iframe_api&amp;#34;, &amp;#34;saveStateUrl&amp;#34;: &amp;#34;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/xmodule_handler/save_user_state&amp;#34;, &amp;#34;transcriptAvailableTranslationsUrl&amp;#34;: &amp;#34;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/available_translations&amp;#34;, &amp;#34;transcriptLanguage&amp;#34;: &amp;#34;en&amp;#34;, &amp;#34;showCaptions&amp;#34;: &amp;#34;true&amp;#34;, &amp;#34;autohideHtml5&amp;#34;: false, &amp;#34;streams&amp;#34;: &amp;#34;1.00:b7xgknqkQk8&amp;#34;, &amp;#34;transcriptTranslationUrl&amp;#34;: &amp;#34;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/translation/__lang__&amp;#34;, &amp;#34;captionDataDir&amp;#34;: null, &amp;#34;autoplay&amp;#34;: false}'
-data-bumper-metadata='null'
-data-poster='null'
-tabindex="-1"
-&gt;
-&lt;div class="focus_grabber first"&gt;&lt;/div&gt;
-
-&lt;div class="tc-wrapper"&gt;
-&lt;div class="video-wrapper"&gt;
-&lt;span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"&gt;&lt;/span&gt;
-&lt;span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"&gt;&lt;/span&gt;
-&lt;div class="video-player-pre"&gt;&lt;/div&gt;
-&lt;div class="video-player"&gt;
-&lt;div id="0b9e39477cf34507a7a48f74be381fdd"&gt;&lt;/div&gt;
-&lt;h4 class="hd hd-4 video-error is-hidden"&gt;No playable video sources found.&lt;/h4&gt;
-&lt;h4 class="hd hd-4 video-hls-error is-hidden"&gt;
-Your browser does not support this video format. Try using a different browser.
-&lt;/h4&gt;
-&lt;/div&gt;
-&lt;div class="video-player-post"&gt;&lt;/div&gt;
-&lt;div class="closed-captions"&gt;&lt;/div&gt;
-&lt;div class="video-controls is-hidden"&gt;
-&lt;div&gt;
-&lt;div class="vcr"&gt;&lt;div class="vidtime"&gt;0:00 / 0:00&lt;/div&gt;&lt;/div&gt;
-&lt;div class="secondary-controls"&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="focus_grabber last"&gt;&lt;/div&gt;
-
-&lt;h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd"&gt;Downloads and transcripts&lt;/h3&gt;
-&lt;div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd"&gt;
-&lt;div class="wrapper-download-video"&gt;
-&lt;h4 class="hd hd-5"&gt;Video&lt;/h4&gt;
-&lt;a class="btn-link video-sources video-download-button" href="https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4"&gt;
-Download video file
-&lt;/a&gt;
-&lt;/div&gt;
-&lt;div class="wrapper-download-transcripts"&gt;
-&lt;h4 class="hd hd-5"&gt;Transcripts&lt;/h4&gt;
-&lt;ul class="list-download-transcripts"&gt;
-&lt;li class="transcript-option"&gt;
-
-&lt;a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="srt"&gt;Download SubRip (.srt) file&lt;/a&gt;
-&lt;/li&gt;
-&lt;li class="transcript-option"&gt;
-
-&lt;a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="txt"&gt;Download Text (.txt) file&lt;/a&gt;
-&lt;/li&gt;
-&lt;/ul&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;/div&gt;
-
-&lt;div class="wrap-instructor-info"&gt;
-&lt;a class="instructor-info-action" href="#0b9e39477cf34507a7a48f74be381fdd_debug" id="0b9e39477cf34507a7a48f74be381fdd_trig"&gt;Staff Debug Info&lt;/a&gt;
-
-&lt;/div&gt;
-
-&lt;div aria-hidden="true" role="dialog" tabindex="-1" id="0b9e39477cf34507a7a48f74be381fdd_xqa-modal" class="modal xqa-modal"&gt;
-&lt;div class="inner-wrapper"&gt;
-&lt;header&gt;
-&lt;h2&gt;Your Platform Name Here Content Quality Assessment&lt;/h2&gt;
-&lt;/header&gt;
-
-&lt;form id="0b9e39477cf34507a7a48f74be381fdd_xqa_form" class="xqa_form"&gt;
-&lt;label for="0b9e39477cf34507a7a48f74be381fdd_xqa_entry"&gt;Comment&lt;/label&gt;
-&lt;input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_xqa_entry" type="text" placeholder="comment"&gt;
-&lt;label for="0b9e39477cf34507a7a48f74be381fdd_xqa_tag"&gt;Tag&lt;/label&gt;
-&lt;span style="color:black;vertical-align: -10pt"&gt;Optional tag (eg "done" or "broken"):&amp;nbsp;       &lt;/span&gt;
-&lt;input id="0b9e39477cf34507a7a48f74be381fdd_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline"&gt;
-&lt;div class="submit"&gt;
-&lt;button name="submit" type="submit"&gt;Add comment&lt;/button&gt;
-&lt;/div&gt;
-&lt;hr&gt;
-&lt;div id="0b9e39477cf34507a7a48f74be381fdd_xqa_log_data"&gt;&lt;/div&gt;
-&lt;/form&gt;
-
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="0b9e39477cf34507a7a48f74be381fdd_debug" &gt;
-&lt;div class="inner-wrapper"&gt;
-&lt;header&gt;
-&lt;h2&gt;Staff Debug&lt;/h2&gt;
-&lt;/header&gt;
-
-&lt;hr /&gt;
-&lt;div class="staff_actions"&gt;
-&lt;h3&gt;Actions&lt;/h3&gt;
-&lt;div&gt;
-&lt;label for="sd_fu_0b9e39477cf34507a7a48f74be381fdd"&gt;Username:&lt;/label&gt;
-&lt;input type="text" tabindex="0" id="sd_fu_0b9e39477cf34507a7a48f74be381fdd" placeholder="AndyA"/&gt;
-&lt;/div&gt;
-&lt;div data-location="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-location-name="0b9e39477cf34507a7a48f74be381fdd"&gt;
-[
-&lt;button type="button" class="btn-link staff-debug-sdelete"&gt;Delete Learner's State&lt;/button&gt;
-]
-&lt;/div&gt;
-&lt;div id="result_0b9e39477cf34507a7a48f74be381fdd"&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="staff_info" style="display:block"&gt;
-is_released = &lt;font color='red'&gt;Yes!&lt;/font&gt;
-location = block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd
-
-&lt;table summary="Module Fields"&gt;
-&lt;tr&gt;&lt;th&gt;Module Fields&lt;/th&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;transcript_language&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;en&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;group_access&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;graded&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_token_secret&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_1_25&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;transcript_download_format&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;srt&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;giturl&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;show_captions&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;source_file&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;handout&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;course_edit_method&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Studio&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;default_tab&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;bumper_do_not_show_again&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;in_entrance_exam&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;showanswer&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;attempted&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;display_name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;Welcome!&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;sub&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;name_of_file&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;video_speed_optimizations&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;graceperiod&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;5:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;speed&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;format&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;due&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;edx_video_id&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;start&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;1970-01-01 05:00:00+00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_1_0&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;b7xgknqkQk8&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;only_on_web&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_1_5&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;days_early_for_beta&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;start_time&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;0:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;visible_to_staff_only&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;download_video&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;parent&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;tags&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;matlab_api_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;xqa_key&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;qaijS3UatK020Wc0sfCtFe0V6jpB4d64&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_is_available&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;html5_sources&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[u&amp;#39;https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4&amp;#39;]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;global_speed&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;1.0&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;annotation_storage_url&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;http://your_annotation_storage.com&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;track&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;use_latex_compiler&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;video_bumper&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;show_correctness&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;always&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;youtube_id_0_75&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;static_asset_path&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;hide_from_toc&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;bumper_last_view_date&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;show_reset_button&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;name&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;license&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;rerandomize&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;never&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;user_partitions&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;[]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;chrome&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;download_track&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;edxnotes_visibility&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;True&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;source&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;transcripts&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;{}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;max_attempts&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;None&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;saved_video_position&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;0:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;self_paced&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;False&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td style="width:25%"&gt;end_time&lt;/td&gt;&lt;td&gt;&lt;pre style="display:inline-block; margin: 0;"&gt;0:00:00&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-&lt;table&gt;
-&lt;tr&gt;&lt;th&gt;XML attributes&lt;/th&gt;&lt;/tr&gt;
-&lt;/table&gt;
-category = VideoModuleWithMixins
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="0b9e39477cf34507a7a48f74be381fdd_history"&gt;
-&lt;div class="inner-wrapper"&gt;
-&lt;header&gt;
-&lt;h2&gt;Submission History Viewer&lt;/h2&gt;
-&lt;/header&gt;
-&lt;form id="0b9e39477cf34507a7a48f74be381fdd_history_form"&gt;
-&lt;label for="0b9e39477cf34507a7a48f74be381fdd_history_student_username"&gt;User:&lt;/label&gt;
-&lt;input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_history_student_username" type="text" placeholder=""/&gt;
-&lt;input type="hidden" id="0b9e39477cf34507a7a48f74be381fdd_history_location" value="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd"/&gt;
-&lt;div class="submit"&gt;
-&lt;button name="submit" type="submit"&gt;View History&lt;/button&gt;
-&lt;/div&gt;
-&lt;/form&gt;
-
-&lt;div id="0b9e39477cf34507a7a48f74be381fdd_history_text" class="staff_info" style="display:block"&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div id="0b9e39477cf34507a7a48f74be381fdd_setup"&gt;&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-// assumes courseware.html's loaded this method.
-$(function () {
-setup_debug('0b9e39477cf34507a7a48f74be381fdd',
-null,
-{
-'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd',
-'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
-'category': 'VideoModuleWithMixins',
-'user': 'AndyA'
-}
-);
-});
-&lt;/script&gt;
-
-&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;/div&gt;
-
-</div>
-<div id="seq_content" role="tabpanel" aria-labelledby="tab_0">
-
-
-<div class="wrap-instructor-info studio-view">
-    <a class="instructor-info-action" href="//localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc">View Unit in Studio</a>
-</div>
-<div class="xblock xblock-student_view xblock-student_view-vertical xblock-initialized" data-runtime-class="LmsRuntime" data-init="VerticalStudentView" data-course-id="course-v1:edX+DemoX+Demo_Course" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-block-type="vertical">
-
-
-    <h2 class="hd hd-2 unit-title">Introduction: Video and Sequences</h2>
-
-
-
-
-
-    <div class="bookmark-button-wrapper">
-        <button class="btn btn-link bookmark-button" aria-pressed="false" data-bookmark-id="AndyA,block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc" data-bookmarks-api-url="/api/bookmarks/v1/bookmarks/">
-            <span class="bookmark-text">Bookmark this page</span>
-        </button>
-    </div>
-
-
-    <div class="vert-mod">
-        <div class="vert vert-0" data-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4">
-
-
-
-            <div class="xblock xblock-student_view xblock-student_view-html xmodule_display xmodule_HtmlModule xblock-initialized" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="html" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-type="HTMLModule" data-course-id="course-v1:edX+DemoX+Demo_Course">
-
-                <p><strong>Welcome to the edX Demo Course Introduction.</strong>&nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an "intro" video that shows you how it all works.&nbsp;</p>
-                <p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;">You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &nbsp;Just for fun, we'll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.</p>
-                <p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;">Watch the overview video (below), then click on "Example Week One" in the left hand navigation to get started.</p>
-            </div>
-
-            <div class="wrap-instructor-info">
-                <a class="instructor-info-action" href="#030e35c4756a4ddc8d40b95fbbfff4d4_debug" id="030e35c4756a4ddc8d40b95fbbfff4d4_trig">Staff Debug Info</a>
-
-            </div>
-
-            <div aria-hidden="true" role="dialog" tabindex="-1" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa-modal" class="modal xqa-modal">
-                <div class="inner-wrapper">
-                    <header>
-                        <h2>Your Platform Name Here Content Quality Assessment</h2>
-                    </header>
-
-                    <form id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_form" class="xqa_form">
-                        <label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry">Comment</label>
-                        <input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_entry" type="text" placeholder="comment">
-                        <label for="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag">Tag</label>
-                        <span style="color:black;vertical-align: -10pt">Optional tag (eg "done" or "broken"):&nbsp;       </span>
-                        <input id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline">
-                        <div class="submit">
-                            <button name="submit" type="submit">Add comment</button>
-                        </div>
-                        <hr>
-                        <div id="030e35c4756a4ddc8d40b95fbbfff4d4_xqa_log_data"></div>
-                    </form>
-
-                </div>
-            </div>
-
-            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_debug">
-                <div class="inner-wrapper">
-                    <header>
-                        <h2>Staff Debug</h2>
-                    </header>
-
-                    <hr>
-                    <div class="staff_actions">
-                        <h3>Actions</h3>
-                        <div>
-                            <label for="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4">Username:</label>
-                            <input type="text" tabindex="0" id="sd_fu_030e35c4756a4ddc8d40b95fbbfff4d4" placeholder="AndyA">
-                        </div>
-                        <div data-location="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4" data-location-name="030e35c4756a4ddc8d40b95fbbfff4d4">
-                            [
-                            <button type="button" class="btn-link staff-debug-sdelete">Delete Learner's State</button>
-                            ]
-                        </div>
-                        <div id="result_030e35c4756a4ddc8d40b95fbbfff4d4"></div>
-                    </div>
-
-                    <div class="staff_info" style="display:block">
-                        is_released = <font color="red">Yes!</font>
-                        location = block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4
-
-                        <table summary="Module Fields">
-                            <tbody><tr><th>Module Fields</th></tr>
-                            <tr><td style="width:25%">visible_to_staff_only</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">graded</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">annotation_token_secret</td><td><pre style="display:inline-block; margin: 0;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</pre></td></tr>
-                            <tr><td style="width:25%">giturl</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">edxnotes</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">source_file</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">course_edit_method</td><td><pre style="display:inline-block; margin: 0;">Studio</pre></td></tr>
-                            <tr><td style="width:25%">default_tab</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">in_entrance_exam</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">showanswer</td><td><pre style="display:inline-block; margin: 0;">attempted</pre></td></tr>
-                            <tr><td style="width:25%">display_name</td><td><pre style="display:inline-block; margin: 0;">Blank HTML Page</pre></td></tr>
-                            <tr><td style="width:25%">video_speed_optimizations</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">graceperiod</td><td><pre style="display:inline-block; margin: 0;">5:00:00</pre></td></tr>
-                            <tr><td style="width:25%">format</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">due</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">start</td><td><pre style="display:inline-block; margin: 0;">1970-01-01 05:00:00+00:00</pre></td></tr>
-                            <tr><td style="width:25%">editor</td><td><pre style="display:inline-block; margin: 0;">visual</pre></td></tr>
-                            <tr><td style="width:25%">video_bumper</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
-                            <tr><td style="width:25%">max_attempts</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">parent</td><td><pre style="display:inline-block; margin: 0;">block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc</pre></td></tr>
-                            <tr><td style="width:25%">tags</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
-                            <tr><td style="width:25%">matlab_api_key</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">xqa_key</td><td><pre style="display:inline-block; margin: 0;">qaijS3UatK020Wc0sfCtFe0V6jpB4d64</pre></td></tr>
-                            <tr><td style="width:25%">annotation_storage_url</td><td><pre style="display:inline-block; margin: 0;">http://your_annotation_storage.com</pre></td></tr>
-                            <tr><td style="width:25%">use_latex_compiler</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">days_early_for_beta</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">show_correctness</td><td><pre style="display:inline-block; margin: 0;">always</pre></td></tr>
-                            <tr><td style="width:25%">source_code</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">data</td><td><pre style="display:inline-block; margin: 0;">&lt;p&gt;&lt;strong&gt;Welcome to the edX Demo Course Introduction.&lt;/strong&gt;&amp;nbsp;This is where you can explore how to take an edX course (like this one). Most courses have an "intro" video that shows you how it all works.&amp;nbsp;&lt;/p&gt;
-&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;You can watch the introduction video (below) or scroll though the course studies and assignments using the toolbar (above). &amp;nbsp;Just for fun, we'll keep track of your work in this demo course, and show you your progress in the toolbar just like in a real course.&lt;/p&gt;
-&lt;p style="margin-right: 0px; font-size: 16px; margin-left: 0px; font-family: 'Open Sans', Verdana, Geneva, sans-serif;"&gt;Watch the overview video (below), then click on "Example Week One" in the left hand navigation to get started.&lt;/p&gt;</pre></td></tr>
-                            <tr><td style="width:25%">static_asset_path</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">name</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">hide_from_toc</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">group_access</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
-                            <tr><td style="width:25%">rerandomize</td><td><pre style="display:inline-block; margin: 0;">never</pre></td></tr>
-                            <tr><td style="width:25%">user_partitions</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
-                            <tr><td style="width:25%">chrome</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">edxnotes_visibility</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">show_reset_button</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">self_paced</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            </tbody></table>
-                        <table>
-                            <tbody><tr><th>XML attributes</th></tr>
-                            </tbody></table>
-                        category = HtmlModuleWithMixins
-                    </div>
-                </div>
-            </div>
-
-            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="030e35c4756a4ddc8d40b95fbbfff4d4_history">
-                <div class="inner-wrapper">
-                    <header>
-                        <h2>Submission History Viewer</h2>
-                    </header>
-                    <form id="030e35c4756a4ddc8d40b95fbbfff4d4_history_form">
-                        <label for="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username">User:</label>
-                        <input tabindex="0" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_student_username" type="text" placeholder="">
-                        <input type="hidden" id="030e35c4756a4ddc8d40b95fbbfff4d4_history_location" value="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4">
-                        <div class="submit">
-                            <button name="submit" type="submit">View History</button>
-                        </div>
-                    </form>
-
-                    <div id="030e35c4756a4ddc8d40b95fbbfff4d4_history_text" class="staff_info" style="display:block">
-                    </div>
-                </div>
-            </div>
-
-            <div id="030e35c4756a4ddc8d40b95fbbfff4d4_setup"></div>
-
-            <script type="text/javascript">
-                // assumes courseware.html's loaded this method.
-                $(function () {
-                    setup_debug('030e35c4756a4ddc8d40b95fbbfff4d4',
-                        null,
-                        {
-                            'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
-                            'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
-                            'category': 'HtmlModuleWithMixins',
-                            'user': 'AndyA'
-                        }
-                    );
-                });
-            </script>
-
+    <header class="page-header has-secondary">
+        <div class="page-header-main">
+            <div class="sr-is-focusable" tabindex="-1"></div>
+            <h2 class="hd hd-2 page-title">Skeleton Page</h2>
+            <p class="page-description">This demonstrates the pieces available to a courseware page.</p>
         </div>
-        <div class="vert vert-1" data-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd">
-
-
-
-            <div class="xblock xblock-student_view xblock-student_view-video xmodule_display xmodule_VideoModule xblock-initialized" data-runtime-class="LmsRuntime" data-init="XBlockToXModuleShim" data-block-type="video" data-request-token="cd3bba7c68a511e7826c08002779ca96" data-runtime-version="1" data-usage-id="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-type="Video" data-course-id="course-v1:edX+DemoX+Demo_Course">
-
-
-
-
-                <h3 class="hd hd-2">Welcome!</h3>
-
-                <div id="video_0b9e39477cf34507a7a48f74be381fdd" class="video closed is-captions-rendered is-initialized" data-metadata="{&quot;savedVideoPosition&quot;: 0.0, &quot;ytMetadataUrl&quot;: &quot;https://www.googleapis.com/youtube/v3/videos/&quot;, &quot;sources&quot;: [&quot;https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4&quot;], &quot;speed&quot;: null, &quot;generalSpeed&quot;: 1.0, &quot;end&quot;: 0.0, &quot;sub&quot;: &quot;name_of_file&quot;, &quot;ytTestTimeout&quot;: 1500, &quot;transcriptLanguages&quot;: {&quot;en&quot;: &quot;English&quot;}, &quot;start&quot;: 0.0, &quot;ytKey&quot;: &quot;PUT_YOUR_API_KEY_HERE&quot;, &quot;poster&quot;: null, &quot;recordedYoutubeIsAvailable&quot;: true, &quot;ytApiUrl&quot;: &quot;https://www.youtube.com/iframe_api&quot;, &quot;saveStateUrl&quot;: &quot;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/xmodule_handler/save_user_state&quot;, &quot;transcriptAvailableTranslationsUrl&quot;: &quot;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/available_translations&quot;, &quot;transcriptLanguage&quot;: &quot;en&quot;, &quot;showCaptions&quot;: &quot;true&quot;, &quot;autohideHtml5&quot;: false, &quot;streams&quot;: &quot;1.00:b7xgknqkQk8&quot;, &quot;transcriptTranslationUrl&quot;: &quot;/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/translation/__lang__&quot;, &quot;captionDataDir&quot;: null, &quot;autoplay&quot;: false}" data-bumper-metadata="null" data-poster="null" tabindex="-1">
-                    <div class="focus_grabber first" tabindex="-1"></div>
-
-                    <div class="tc-wrapper">
-                        <div class="video-wrapper">
-                            <span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
-                            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
-                            <div class="video-player-pre"></div>
-                            <div class="video-player">
-                                <iframe id="0b9e39477cf34507a7a48f74be381fdd" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/b7xgknqkQk8?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;cc_load_policy=0&amp;html5=1&amp;origin=http%3A%2F%2Flocalhost%3A8000&amp;widgetid=1" tabindex="-1" style="height: 641.25px; width: 1140px; top: 19.875px; left: 0px;"></iframe>
-                                <h4 class="hd hd-4 video-error is-hidden">No playable video sources found.</h4>
-                                <h4 class="hd hd-4 video-hls-error is-hidden">
-                                    Your browser does not support this video format. Try using a different browser.
-                                </h4>
-                            </div>
-                            <div class="video-player-post"></div>
-                            <div class="closed-captions" style="display: none;"></div>
-                            <div class="video-controls"><div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" role="application" title="Video position. Press space to toggle playback" aria-disabled="false" tabindex="-1"><div class="ui-slider-handle progress-handle ui-state-default ui-corner-all" role="slider" aria-disabled="false" aria-valuetext="0 seconds" aria-valuemax="0" aria-valuemin="0" aria-valuenow="0" tabindex="0" aria-label="Video position. Press space to toggle playback"></div><div class="ui-slider-range ui-widget-header ui-slider-range-min"></div></div>
-                                <div>
-                                    <div class="vcr"><button class="control video_control play" aria-disabled="false" title="Play"><span class="icon fa fa-play" aria-hidden="true"></span></button><div class="vidtime">0:00 / 0:00</div></div>
-                                    <div class="secondary-controls"><div class="speeds menu-container" role="application"><p class="sr instructions" id="speed-instructions-0b9e39477cf34507a7a48f74be381fdd">Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.</p><button class="control speed-button" aria-disabled="false" aria-expanded="false" title="Video speed: 1.0x" aria-describedby="speed-instructions-0b9e39477cf34507a7a48f74be381fdd"><span><span class="icon fa fa-caret-right" aria-hidden="true"></span></span><span class="label" aria-hidden="true">Speed</span><span class="value">1.0x</span></button><ol class="video-speeds menu"><li data-speed="2.0"><button class="control speed-option" tabindex="-1" aria-pressed="false">2.0x</button></li><li data-speed="1.50"><button class="control speed-option" tabindex="-1" aria-pressed="false">1.50x</button></li><li data-speed="1.25"><button class="control speed-option" tabindex="-1" aria-pressed="false">1.25x</button></li><li data-speed="1.0" class="is-active"><button class="control speed-option" tabindex="-1" aria-pressed="true">1.0x</button></li><li data-speed="0.75"><button class="control speed-option" tabindex="-1" aria-pressed="false">0.75x</button></li><li data-speed="0.50"><button class="control speed-option" tabindex="-1" aria-pressed="false">0.50x</button></li></ol></div><div class="volume" role="application"><p class="sr instructions" id="volume-instructions-0b9e39477cf34507a7a48f74be381fdd">Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.</p><button class="control" aria-disabled="false" "="" aria-expanded="false" title="Adjust video volume" aria-describedby="volume-instructions-0b9e39477cf34507a7a48f74be381fdd"><span class="icon fa fa-volume-up" aria-hidden="true"></span></button><div class="sr video-live-region" aria-hidden="false" aria-live="polite">Maximum Volume.</div><div class="volume-slider-container" aria-hidden="true" title="Adjust video volume"><div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="Volume" aria-disabled="false"><div class="ui-slider-handle volume-handle ui-state-default ui-corner-all" tabindex="-1" style="bottom: 100%;"></div><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div></div></div></div><button class="control quality-control is-hidden" aria-disabled="false" title="High Definition"><span class="icon icon-hd" aria-hidden="true">HD</span><span class="sr text-translation">High Definition</span>&nbsp;<span class="sr control-text">off</span></button><button class="control add-fullscreen" aria-disabled="false" title="Fill browser"><span class="icon fa fa-arrows-alt" aria-hidden="true"></span></button><div class="grouped-controls"><button class="control toggle-captions" aria-disabled="false" title="Turn on closed captioning"><span class="icon fa fa-cc" aria-hidden="true"></span></button><button class="control toggle-transcript" aria-disabled="false" title="Turn on transcripts"><span class="icon fa fa-quote-left" aria-hidden="true"></span></button></div></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="subtitles" role="region" id="transcript-0b9e39477cf34507a7a48f74be381fdd" aria-label="Activating a link in this group will skip to the corresponding point in the video." style="max-height: 639.5px;"><h3 id="transcript-label-0b9e39477cf34507a7a48f74be381fdd" class="transcript-title sr">Video transcript</h3><ol id="transcript-captions-0b9e39477cf34507a7a48f74be381fdd" class="subtitles-menu" lang="en"><li class="spacing" style="height: 340.5px;"><a href="#transcript-end-0b9e39477cf34507a7a48f74be381fdd" id="transcript-start-0b9e39477cf34507a7a48f74be381fdd" class="transcript-start" lang="en">Start of transcript. Skip to the end.</a></li><li><span role="link" data-index="0" data-start="0" tabindex="0"></span></li><li><span role="link" data-index="1" data-start="650" tabindex="0">ERIC: Hi, and welcome to the edX demonstration course.</span></li><li><span role="link" data-index="2" data-start="3920" tabindex="0">I'm Eric, and I'm here to help you get a better understanding of how fun and</span></li><li><span role="link" data-index="3" data-start="7450" tabindex="0">easy it is to take an edX course.</span></li><li><span role="link" data-index="4" data-start="10080" tabindex="0">So, let's get started.</span></li><li><span role="link" data-index="5" data-start="11700" tabindex="0">Let me show you how all the parts work together.</span></li><li><span role="link" data-index="6" data-start="13950" tabindex="0">If at any time you want to skip this video and get a firsthand experience</span></li><li><span role="link" data-index="7" data-start="18000" tabindex="0">of the demonstration course, all you have to do is click</span></li><li><span role="link" data-index="8" data-start="21020" tabindex="0">week one to the left.</span></li><li><span role="link" data-index="9" data-start="22710" tabindex="0">Don't worry, I won't be offended.</span></li><li><span role="link" data-index="10" data-start="25050" tabindex="0">Let's first look along the top of the page.</span></li><li><span role="link" data-index="11" data-start="27730" tabindex="0">This area's called the navigation bar.</span></li><li><span role="link" data-index="12" data-start="29990" tabindex="0">Click on Courseware to interact with your course.</span></li><li><span role="link" data-index="13" data-start="32950" tabindex="0">Course Info contains course announcements and updates from the</span></li><li><span role="link" data-index="14" data-start="36190" tabindex="0">course staff.</span></li><li><span role="link" data-index="15" data-start="37390" tabindex="0">If your course has digital textbooks, this is where you'll find them.</span></li><li><span role="link" data-index="16" data-start="41130" tabindex="0">Discussion is where you can communicate with the fellow students</span></li><li><span role="link" data-index="17" data-start="43720" tabindex="0">on topics and projects, and even occasionally with the course staff.</span></li><li><span role="link" data-index="18" data-start="47380" tabindex="0">When available, the course Wiki acts as a knowledge base for your course.</span></li><li><span role="link" data-index="19" data-start="51430" tabindex="0">It's a helpful resource.</span></li><li><span role="link" data-index="20" data-start="53000" tabindex="0">Clicking on Progress will reveal how well you're doing in</span></li><li><span role="link" data-index="21" data-start="55980" tabindex="0">your studies and exams.</span></li><li><span role="link" data-index="22" data-start="57790" tabindex="0">When you take the demo course, we'll provide you with a simple progress</span></li><li><span role="link" data-index="23" data-start="61000" tabindex="0">report matching your results.</span></li><li><span role="link" data-index="24" data-start="64590" tabindex="0">Let's look at the left column now.</span></li><li><span role="link" data-index="25" data-start="66440" tabindex="0">The left side of the Courseware screen contains a course navigation bar</span></li><li><span role="link" data-index="26" data-start="69710" tabindex="0">starting from the top down.</span></li><li><span role="link" data-index="27" data-start="71790" tabindex="0">Many courses start with an overview of edX and an introduction to the course.</span></li><li><span role="link" data-index="28" data-start="76110" tabindex="0">Below the overview are segments of the course, which are released as the</span></li><li><span role="link" data-index="29" data-start="79570" tabindex="0">course progresses.</span></li><li><span role="link" data-index="30" data-start="81080" tabindex="0">Typically, an edX course is delivered in week by week segments, and have</span></li><li><span role="link" data-index="31" data-start="84950" tabindex="0">lessons and homeworks you need to complete.</span></li><li><span role="link" data-index="32" data-start="87580" tabindex="0">Many courses are 10 to 12 weeks long.</span></li><li><span role="link" data-index="33" data-start="90270" tabindex="0">We made this demonstration course three weeks for simplicity.</span></li><li><span role="link" data-index="34" data-start="94920" tabindex="0">Let's now look at the learning sequence.</span></li><li><span role="link" data-index="35" data-start="97070" tabindex="0">Each item in the left column reveals a corresponding learning sequence.</span></li><li><span role="link" data-index="36" data-start="100920" tabindex="0">Work your way from left to right.</span></li><li><span role="link" data-index="37" data-start="103600" tabindex="0">Learning sequences can contain lectures, exercises, and interactive</span></li><li><span role="link" data-index="38" data-start="107200" tabindex="0">lessons that you can complete on your own schedule.</span></li><li><span role="link" data-index="39" data-start="111090" tabindex="0">Next, let's discover what makes edX fun and unique, its interactivity.</span></li><li><span role="link" data-index="40" data-start="116760" tabindex="0">edX prides itself on its interactive lessons, which can include</span></li><li><span role="link" data-index="41" data-start="120410" tabindex="0">demonstrations, visualizations, and virtual environments.</span></li><li><span role="link" data-index="42" data-start="124600" tabindex="0">You can try out some in the demo course.</span></li><li><span role="link" data-index="43" data-start="127190" tabindex="0">Interactive lessons are often graded and contribute to your final grade.</span></li><li><span role="link" data-index="44" data-start="131590" tabindex="0">While the edX platform also supports more traditional question formats like</span></li><li><span role="link" data-index="45" data-start="135480" tabindex="0">multiple choice, our classes also test your understanding by allowing you to</span></li><li><span role="link" data-index="46" data-start="139985" tabindex="0">use labs and simulators, and even asking you to write an essay.</span></li><li><span role="link" data-index="47" data-start="143930" tabindex="0">Example of these graded interactions are in the demo course.</span></li><li><span role="link" data-index="48" data-start="147400" tabindex="0">You can see how the questions the course uses for gauging your learning</span></li><li><span role="link" data-index="49" data-start="150640" tabindex="0">process can even be auto graded, or detailed feedback given in real time.</span></li><li><span role="link" data-index="50" data-start="155620" tabindex="0">So while an edX course might be rigorous, the tools and visualizations</span></li><li><span role="link" data-index="51" data-start="159350" tabindex="0">are really fun and truly interactive.</span></li><li><span role="link" data-index="52" data-start="162280" tabindex="0">Finally, there are many ways successful students like to you</span></li><li><span role="link" data-index="53" data-start="165560" tabindex="0">interact to get the most out of a course.</span></li><li><span role="link" data-index="54" data-start="167740" tabindex="0">Beyond the discussion forums, you can meet and engage with fellow classmates</span></li><li><span role="link" data-index="55" data-start="171560" tabindex="0">through a local meet up-- which we highly recommend--</span></li><li><span role="link" data-index="56" data-start="174050" tabindex="0">a Google Hangout, or even invite students to join you via Twitter,</span></li><li><span role="link" data-index="57" data-start="177830" tabindex="0">Facebook, or other social networks.</span></li><li><span role="link" data-index="58" data-start="179820" tabindex="0">It's a proven fact that if you engage with others while taking a course,</span></li><li><span role="link" data-index="59" data-start="182970" tabindex="0">you're more likely to succeed.</span></li><li><span role="link" data-index="60" data-start="184990" tabindex="0">Now that you've seen how easy it is to take an edX course, experience this</span></li><li><span role="link" data-index="61" data-start="188110" tabindex="0">demonstration course.</span></li><li><span role="link" data-index="62" data-start="189070" tabindex="0">Firsthand all you have to do is click on week one to the left and you can</span></li><li><span role="link" data-index="63" data-start="192980" tabindex="0">get started.</span></li><li><span role="link" data-index="64" data-start="194230" tabindex="0"></span></li><li class="spacing" style="height: 340.5px;"><a href="#transcript-start-0b9e39477cf34507a7a48f74be381fdd" id="transcript-end-0b9e39477cf34507a7a48f74be381fdd" class="transcript-end" lang="en">End of transcript. Skip to the start.</a></li></ol></div></div>
-
-                    <div class="focus_grabber last" tabindex="-1"></div>
-
-                    <h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd">Downloads and transcripts</h3>
-                    <div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_0b9e39477cf34507a7a48f74be381fdd">
-                        <div class="wrapper-download-video">
-                            <h4 class="hd hd-5">Video</h4>
-                            <a class="btn-link video-sources video-download-button" href="https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4">
-                                Download video file
-                            </a>
-                        </div>
-                        <div class="wrapper-download-transcripts">
-                            <h4 class="hd hd-5">Transcripts</h4>
-                            <ul class="list-download-transcripts">
-                                <li class="transcript-option">
-
-                                    <a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="srt">Download SubRip (.srt) file</a>
-                                </li>
-                                <li class="transcript-option">
-
-                                    <a class="btn btn-link" href="/courses/course-v1:edX+DemoX+Demo_Course/xblock/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd/handler/transcript/download" data-value="txt">Download Text (.txt) file</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="wrap-instructor-info">
-                <a class="instructor-info-action" href="#0b9e39477cf34507a7a48f74be381fdd_debug" id="0b9e39477cf34507a7a48f74be381fdd_trig">Staff Debug Info</a>
-
-            </div>
-
-            <div aria-hidden="true" role="dialog" tabindex="-1" id="0b9e39477cf34507a7a48f74be381fdd_xqa-modal" class="modal xqa-modal">
-                <div class="inner-wrapper">
-                    <header>
-                        <h2>Your Platform Name Here Content Quality Assessment</h2>
-                    </header>
-
-                    <form id="0b9e39477cf34507a7a48f74be381fdd_xqa_form" class="xqa_form">
-                        <label for="0b9e39477cf34507a7a48f74be381fdd_xqa_entry">Comment</label>
-                        <input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_xqa_entry" type="text" placeholder="comment">
-                        <label for="0b9e39477cf34507a7a48f74be381fdd_xqa_tag">Tag</label>
-                        <span style="color:black;vertical-align: -10pt">Optional tag (eg "done" or "broken"):&nbsp;       </span>
-                        <input id="0b9e39477cf34507a7a48f74be381fdd_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline">
-                        <div class="submit">
-                            <button name="submit" type="submit">Add comment</button>
-                        </div>
-                        <hr>
-                        <div id="0b9e39477cf34507a7a48f74be381fdd_xqa_log_data"></div>
+        <div class="page-header-secondary">
+            <div class="form-actions">
+                <button class="btn btn-small">Click Me!</button>
+                ## TODO: note that this search component markup is provisional
+                ##  - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
+                ##  - update the Pattern Library's markup to match
+                <div class="page-header-search">
+                    <form class="search-form" role="search">
+                        <label class="field-label sr-only" for="search" id="search-hint">Search all the things</label>
+                        <input
+                            class="field-input input-text search-input"
+                            type="search"
+                            name="search"
+                            id="search"
+                            placeholder="Search all the things"
+                        />
+                        <button type="button" class="action action-clear" aria-label="Clear search">
+                            <span class="icon fa fa-times-circle" aria-hidden="true"></span>
+                        </button>
+                        <button class="btn btn-small search-button" type="button">Search</button>
                     </form>
-
                 </div>
             </div>
+        </div>
+    </header>
+    <div class="page-content">
+        <div class="layout layout-1t2t">
+            <aside class="layout-col layout-col-a" role="complementary" aria-label="Navigation">
+                <h3>Sidebar</h3>
+                <ul>
+                    <li>Item one</li>
+                    <li>Item two</li>
+                    <li>Item three</li>
+                </ul>
+            </aside>
 
-            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="0b9e39477cf34507a7a48f74be381fdd_debug">
-                <div class="inner-wrapper">
-                    <header>
-                        <h2>Staff Debug</h2>
-                    </header>
-
-                    <hr>
-                    <div class="staff_actions">
-                        <h3>Actions</h3>
-                        <div>
-                            <label for="sd_fu_0b9e39477cf34507a7a48f74be381fdd">Username:</label>
-                            <input type="text" tabindex="0" id="sd_fu_0b9e39477cf34507a7a48f74be381fdd" placeholder="AndyA">
-                        </div>
-                        <div data-location="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd" data-location-name="0b9e39477cf34507a7a48f74be381fdd">
-                            [
-                            <button type="button" class="btn-link staff-debug-sdelete">Delete Learner's State</button>
-                            ]
-                        </div>
-                        <div id="result_0b9e39477cf34507a7a48f74be381fdd"></div>
-                    </div>
-
-                    <div class="staff_info" style="display:block">
-                        is_released = <font color="red">Yes!</font>
-                        location = block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd
-
-                        <table summary="Module Fields">
-                            <tbody><tr><th>Module Fields</th></tr>
-                            <tr><td style="width:25%">transcript_language</td><td><pre style="display:inline-block; margin: 0;">en</pre></td></tr>
-                            <tr><td style="width:25%">group_access</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
-                            <tr><td style="width:25%">graded</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">annotation_token_secret</td><td><pre style="display:inline-block; margin: 0;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</pre></td></tr>
-                            <tr><td style="width:25%">youtube_id_1_25</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">transcript_download_format</td><td><pre style="display:inline-block; margin: 0;">srt</pre></td></tr>
-                            <tr><td style="width:25%">giturl</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">edxnotes</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">show_captions</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">source_file</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">handout</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">course_edit_method</td><td><pre style="display:inline-block; margin: 0;">Studio</pre></td></tr>
-                            <tr><td style="width:25%">default_tab</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">bumper_do_not_show_again</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">in_entrance_exam</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">showanswer</td><td><pre style="display:inline-block; margin: 0;">attempted</pre></td></tr>
-                            <tr><td style="width:25%">display_name</td><td><pre style="display:inline-block; margin: 0;">Welcome!</pre></td></tr>
-                            <tr><td style="width:25%">sub</td><td><pre style="display:inline-block; margin: 0;">name_of_file</pre></td></tr>
-                            <tr><td style="width:25%">video_speed_optimizations</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">graceperiod</td><td><pre style="display:inline-block; margin: 0;">5:00:00</pre></td></tr>
-                            <tr><td style="width:25%">speed</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">format</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">due</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">edx_video_id</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">start</td><td><pre style="display:inline-block; margin: 0;">1970-01-01 05:00:00+00:00</pre></td></tr>
-                            <tr><td style="width:25%">youtube_id_1_0</td><td><pre style="display:inline-block; margin: 0;">b7xgknqkQk8</pre></td></tr>
-                            <tr><td style="width:25%">only_on_web</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">youtube_id_1_5</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">days_early_for_beta</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">start_time</td><td><pre style="display:inline-block; margin: 0;">0:00:00</pre></td></tr>
-                            <tr><td style="width:25%">visible_to_staff_only</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">download_video</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">parent</td><td><pre style="display:inline-block; margin: 0;">block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc</pre></td></tr>
-                            <tr><td style="width:25%">tags</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
-                            <tr><td style="width:25%">matlab_api_key</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">xqa_key</td><td><pre style="display:inline-block; margin: 0;">qaijS3UatK020Wc0sfCtFe0V6jpB4d64</pre></td></tr>
-                            <tr><td style="width:25%">youtube_is_available</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">html5_sources</td><td><pre style="display:inline-block; margin: 0;">[u'https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4']</pre></td></tr>
-                            <tr><td style="width:25%">global_speed</td><td><pre style="display:inline-block; margin: 0;">1.0</pre></td></tr>
-                            <tr><td style="width:25%">annotation_storage_url</td><td><pre style="display:inline-block; margin: 0;">http://your_annotation_storage.com</pre></td></tr>
-                            <tr><td style="width:25%">track</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">use_latex_compiler</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">video_bumper</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
-                            <tr><td style="width:25%">show_correctness</td><td><pre style="display:inline-block; margin: 0;">always</pre></td></tr>
-                            <tr><td style="width:25%">youtube_id_0_75</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">static_asset_path</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">hide_from_toc</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">bumper_last_view_date</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">show_reset_button</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">name</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">license</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">rerandomize</td><td><pre style="display:inline-block; margin: 0;">never</pre></td></tr>
-                            <tr><td style="width:25%">user_partitions</td><td><pre style="display:inline-block; margin: 0;">[]</pre></td></tr>
-                            <tr><td style="width:25%">chrome</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">download_track</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">edxnotes_visibility</td><td><pre style="display:inline-block; margin: 0;">True</pre></td></tr>
-                            <tr><td style="width:25%">source</td><td><pre style="display:inline-block; margin: 0;"></pre></td></tr>
-                            <tr><td style="width:25%">transcripts</td><td><pre style="display:inline-block; margin: 0;">{}</pre></td></tr>
-                            <tr><td style="width:25%">max_attempts</td><td><pre style="display:inline-block; margin: 0;">None</pre></td></tr>
-                            <tr><td style="width:25%">saved_video_position</td><td><pre style="display:inline-block; margin: 0;">0:00:00</pre></td></tr>
-                            <tr><td style="width:25%">self_paced</td><td><pre style="display:inline-block; margin: 0;">False</pre></td></tr>
-                            <tr><td style="width:25%">end_time</td><td><pre style="display:inline-block; margin: 0;">0:00:00</pre></td></tr>
-                            </tbody></table>
-                        <table>
-                            <tbody><tr><th>XML attributes</th></tr>
-                            </tbody></table>
-                        category = VideoModuleWithMixins
-                    </div>
-                </div>
-            </div>
-
-            <div aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="0b9e39477cf34507a7a48f74be381fdd_history">
-                <div class="inner-wrapper">
-                    <header>
-                        <h2>Submission History Viewer</h2>
-                    </header>
-                    <form id="0b9e39477cf34507a7a48f74be381fdd_history_form">
-                        <label for="0b9e39477cf34507a7a48f74be381fdd_history_student_username">User:</label>
-                        <input tabindex="0" id="0b9e39477cf34507a7a48f74be381fdd_history_student_username" type="text" placeholder="">
-                        <input type="hidden" id="0b9e39477cf34507a7a48f74be381fdd_history_location" value="block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd">
-                        <div class="submit">
-                            <button name="submit" type="submit">View History</button>
-                        </div>
-                    </form>
-
-                    <div id="0b9e39477cf34507a7a48f74be381fdd_history_text" class="staff_info" style="display:block">
-                    </div>
-                </div>
-            </div>
-
-            <div id="0b9e39477cf34507a7a48f74be381fdd_setup"></div>
-
-            <script type="text/javascript">
-                // assumes courseware.html's loaded this method.
-                $(function () {
-                    setup_debug('0b9e39477cf34507a7a48f74be381fdd',
-                        null,
-                        {
-                            'location': 'block\u002Dv1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd',
-                            'xqa_key': 'qaijS3UatK020Wc0sfCtFe0V6jpB4d64',
-                            'category': 'VideoModuleWithMixins',
-                            'user': 'AndyA'
-                        }
-                    );
-                });
-            </script>
-
+            <main id="main" aria-label="Content" tabindex="-1" class="layout-col layout-col-b">
+                <article tabindex="-1" aria-label="Main Content">
+                    <h3>Main content goes here.</h3>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare,
+                        augue urna fermentum ex, vitae dignissim magna est sit amet diam. Nunc sodales dolor finibus
+                        pulvinar placerat. Suspendisse vitae tellus auctor, sodales erat ac, venenatis quam. Etiam
+                        purus est, consequat nec erat vel, bibendum volutpat ex. Fusce vitae consectetur ante.
+                        Suspendisse elit mauris, iaculis sed diam eu, efficitur tempor dui. Praesent tristique nunc
+                        quam, in tincidunt ligula accumsan et. Etiam augue sem, commodo ac ipsum vel, fringilla dapibus
+                        lacus. Sed facilisis euismod felis, non malesuada massa scelerisque sed. Etiam et placerat
+                        lorem. Nullam quis tincidunt sapien.</p>
+                </article>
+            </main>
         </div>
     </div>
-
-</div>
-
-</div>
-
-<nav class="sequence-bottom" aria-label="Section">
-    <button class="sequence-nav-button button-previous disabled" disabled="disabled">
-        <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
-        <span>Previous</span>
-    </button>
-    <button class="sequence-nav-button button-next">
-        <span>Next</span>
-        <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
-    </button>
-</nav>
-</div>
-
-</div>
-
-</main>
-</div>
 </section>
 </%block>
diff --git a/lms/templates/ux/reference/v1/unit-page.html b/lms/templates/ux/reference/v1/unit-page.html
new file mode 100644
index 0000000000..969d81b104
--- /dev/null
+++ b/lms/templates/ux/reference/v1/unit-page.html
@@ -0,0 +1,43 @@
+## mako
+
+<%page expression_filter="h"/>
+
+<%namespace name='static' file='/static_content.html'/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Course Skeleton</%block>
+
+<%block name="bodyclass">view-in-course view-courseware courseware</%block>
+
+<%block name="headextra">
+<%static:css group='style-course-vendor'/>
+<%static:css group='style-course'/>
+</%block>
+
+<%block name="content">
+<nav class="wrapper-course-material">
+    <div class="course-material">
+        <ol class="tabs course-tabs">
+            <li class="tab">
+                <a href="index.html">
+                    Home
+                </a>
+            </li>
+
+            <li class="tab">
+                <a href="#">
+                    Course
+                </a>
+            </li>
+
+            <li class="tab">
+                <a href="#" class="active">
+                    Skeleton
+                    <span class="sr-only">, current location</span>
+                </a>
+            </li>
+        </ol>
+    </div>
+</nav>
+<%include file="../fragments/unit-fragment.html"/>
+</%block>
diff --git a/lms/urls.py b/lms/urls.py
index 05e0707b27..3fe00f255f 100644
--- a/lms/urls.py
+++ b/lms/urls.py
@@ -998,10 +998,8 @@ if settings.DEBUG:
         settings.PROFILE_IMAGE_BACKEND['options']['base_url'],
         document_root=settings.PROFILE_IMAGE_BACKEND['options']['location']
     )
-    # TODO: re-enable this after removing the URL below
-    # urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template')
 
-# TODO: DO NOT MERGE
+# UX reference templates
 urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
 
 if 'debug_toolbar' in settings.INSTALLED_APPS:
diff --git a/openedx/core/djangoapps/debug/views.py b/openedx/core/djangoapps/debug/views.py
index b0ac1f8acb..aa6ec5f6ad 100644
--- a/openedx/core/djangoapps/debug/views.py
+++ b/openedx/core/djangoapps/debug/views.py
@@ -28,7 +28,6 @@ def show_reference_template(request, template):
         uses_bootstrap = not uses_pattern_library and not is_v1
         context = {
             'request': request,
-            'disable_courseware_js': not is_v1,
             'uses_pattern_library': uses_pattern_library,
             'uses_bootstrap': uses_bootstrap,
         }
diff --git a/package.json b/package.json
index 46f8207ee5..dfdc402be7 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "backbone.paginator": "~2.0.3",
     "coffee-loader": "^0.7.3",
     "coffee-script": "1.6.1",
-    "edx-bootstrap": "~0.1.7",
+    "edx-bootstrap": "^0.2.1",
     "edx-pattern-library": "0.18.1",
     "edx-ui-toolkit": "1.5.2",
     "exports-loader": "^0.6.4",
@@ -22,6 +22,7 @@
     "moment": "^2.15.1",
     "moment-timezone": "~0.5.5",
     "picturefill": "~3.0.2",
+    "popper.js": "~1.12.5",
     "prop-types": "^15.5.10",
     "raw-loader": "^0.5.1",
     "react": "^15.5.4",
diff --git a/pavelib/assets.py b/pavelib/assets.py
index d610e63e29..5f8b7dbd71 100644
--- a/pavelib/assets.py
+++ b/pavelib/assets.py
@@ -59,8 +59,8 @@ NPM_INSTALLED_LIBRARIES = [
     'moment-timezone/builds/moment-timezone-with-data.js',
     'moment/min/moment-with-locales.js',
     'picturefill/dist/picturefill.js',
+    'popper.js/dist/umd/popper.js',
     'requirejs/require.js',
-    'tether/dist/js/tether.js',
     'underscore.string/dist/underscore.string.js',
     'underscore/underscore.js',
 ]
@@ -73,7 +73,7 @@ NPM_INSTALLED_DEVELOPER_LIBRARIES = [
 ]
 
 # Directory to install static vendor files
-NPM_VENDOR_DIRECTORY = path("common/static/common/js/vendor")
+NPM_VENDOR_DIRECTORY = path('common/static/common/js/vendor')
 
 # system specific lookup path additions, add sass dirs if one system depends on the sass files for other systems
 SASS_LOOKUP_DEPENDENCIES = {
@@ -81,7 +81,10 @@ SASS_LOOKUP_DEPENDENCIES = {
 }
 
 # Collectstatic log directory setting
-COLLECTSTATIC_LOG_DIR_ARG = "collect_log_dir"
+COLLECTSTATIC_LOG_DIR_ARG = 'collect_log_dir'
+
+# Webpack command
+WEBPACK_COMMAND = 'STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack {options}'
 
 
 def get_sass_directories(system, theme_dir=None):
@@ -707,25 +710,37 @@ def execute_compile_sass(args):
         )
 
 
-def execute_webpack(prod, settings=None):
-    sh(
-        cmd(
-            "NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
-            .format(
-                node_env="production" if prod else "development",
-                static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
-                static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
-            )
-        )
+@task
+@cmdopts([
+    ('settings=', 's', "Django settings (defaults to devstack)"),
+    ('watch', 'w', "Watch file system and rebuild on change (defaults to off)"),
+])
+@timed
+def webpack(options):
+    """
+    Run a Webpack build.
+    """
+    settings = getattr(options, 'settings', Env.DEVSTACK_SETTINGS)
+    environment = 'NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms}'.format(
+        node_env="production" if settings != Env.DEVSTACK_SETTINGS else "development",
+        static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
+        static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings),
     )
+    sh(cmd('{environment} $(npm bin)/webpack'.format(environment=environment)))
 
 
 def execute_webpack_watch(settings=None):
+    """
+    Run the Webpack file system watcher.
+    """
+    # We only want Webpack to re-run on changes to its own entry points,
+    # not all JS files, so we use its own watcher instead of subclassing
+    # from Watchdog like the other watchers do.
     run_background_process(
-        "STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack --watch --watch-poll=200"
-        .format(
+        'STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack {options}'.format(
+            options='--watch --watch-poll=200',
             static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
-            static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
+            static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings),
         )
     )
 
@@ -797,13 +812,12 @@ def watch_assets(options):
     print("Starting asset watcher...")
     observer.start()
 
-    # We only want Webpack to re-run on changes to its own entry points, not all JS files, so we use its own watcher
-    # instead of subclassing from Watchdog like the other watchers do
+    # Run the Webpack file system watcher too
     execute_webpack_watch(settings=Env.DEVSTACK_SETTINGS)
 
     if not getattr(options, 'background', False):
         # when running as a separate process, the main thread needs to loop
-        # in order to allow for shutdown by contrl-c
+        # in order to allow for shutdown by control-c
         try:
             while True:
                 observer.join(2)
@@ -861,7 +875,9 @@ def update_assets(args):
     process_xmodule_assets()
     process_npm_assets()
     compile_coffeescript()
-    execute_webpack(prod=(args.settings != Env.DEVSTACK_SETTINGS), settings=args.settings)
+
+    # Build Webpack
+    call_task('pavelib.assets.webpack', options={'settings': args.settings})
 
     # Compile sass for themes and system
     execute_compile_sass(args)
diff --git a/themes/edx.org/lms/templates/header.html b/themes/edx.org/lms/templates/header.html
index e2a601ef12..2f2b2873e9 100644
--- a/themes/edx.org/lms/templates/header.html
+++ b/themes/edx.org/lms/templates/header.html
@@ -53,10 +53,7 @@ site_status_msg = get_site_status_msg(course_id)
 % endif
 
 % if uses_bootstrap:
-  <nav class="navbar navbar-toggleable-md navbar-light" aria-label="${_('Main')}">
-    <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+  <nav class="navbar navbar-expand-lg navbar-light" aria-label="${_('Main')}">
     <h1 class="hd logo-header">
       <div class="logo">
         <a class="navbar-brand" href="${marketing_link('ROOT')}" itemprop="url">
@@ -71,6 +68,9 @@ site_status_msg = get_site_status_msg(course_id)
         </div>
       % endif
     </h1>
+    <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
     % if user.is_authenticated():
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         % if not course or disable_courseware_header:
diff --git a/themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss b/themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss
index 30d2c1a98f..3c857145f1 100644
--- a/themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss
+++ b/themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss
@@ -3,11 +3,25 @@
 // Theme colors
 //
 // Note: define colors needed by your theme first
-$red: #d9534f;
-$brand-primary: $red;
+
+// Define the primary red color
+$red: #d9534f !default;
 
 // Theme fonts
 $font-family-sans-serif: cursive;
 
-// Initialize the Open edX bootstrap theme
+// Initialize the Open edX Bootstrap theme
 @import 'edx-bootstrap/sass/open-edx/theme';
+
+// Override the theme to use red as primary
+$theme-colors: ();
+$theme-colors: map-merge((
+  primary: $red,
+  secondary: $gray-600,
+  success: $green,
+  info: $cyan,
+  warning: $yellow,
+  danger: $red,
+  light: $gray-100,
+  dark: $gray-800
+), $theme-colors);
diff --git a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
index 7fb5406954..3c857145f1 100644
--- a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
+++ b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
@@ -3,11 +3,25 @@
 // Theme colors
 //
 // Note: define colors needed by your theme first
+
+// Define the primary red color
 $red: #d9534f !default;
-$brand-primary: $red;
 
 // Theme fonts
 $font-family-sans-serif: cursive;
 
-// Initialize the Open edX bootstrap theme
+// Initialize the Open edX Bootstrap theme
 @import 'edx-bootstrap/sass/open-edx/theme';
+
+// Override the theme to use red as primary
+$theme-colors: ();
+$theme-colors: map-merge((
+  primary: $red,
+  secondary: $gray-600,
+  success: $green,
+  info: $cyan,
+  warning: $yellow,
+  danger: $red,
+  light: $gray-100,
+  dark: $gray-800
+), $theme-colors);
diff --git a/webpack.config.js b/webpack.config.js
index 54de44325f..4c5fc62047 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,15 +18,18 @@ var wpconfig = {
     context: __dirname,
 
     entry: {
+        // Studio
+        Import: './cms/static/js/features/import/factories/import.js',
+        StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
+
+        // Features
         CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js',
         CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
         CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
         CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',
-        LatestUpdate: './openedx/features/course_experience/static/course_experience/js/LatestUpdate.js',
-        WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js',
         Enrollment: './openedx/features/course_experience/static/course_experience/js/Enrollment.js',
-        Import: './cms/static/js/features/import/factories/import.js',
-        StudioIndex: './cms/static/js/features_jsx/studio/index.jsx'
+        LatestUpdate: './openedx/features/course_experience/static/course_experience/js/LatestUpdate.js',
+        WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js'
     },
 
     output: {