Instructor transcript update

Author: EadinWang

feedback-loader.js

@@ -14,7 +14,7 @@
     <div class="header-left">
       <button id="menu-toggle" class="menu-toggle">☰</button>
 
-      <a href="#" class="brand" aria-label="OLI Torus Launchpad (home)">
+      <a href="/" class="brand" aria-label="OLI Torus Launchpad (home)">
   <img src="assets/images/logo.png" alt="" class="brand-logo" aria-hidden="true" />
   <span class="brand-oli">OLI</span>
   <span class="brand-torus">Torus</span>
@@ -33,13 +33,12 @@
           <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
         </svg>
       </a>
-<button
-  class="feedback-btn"
-  aria-label="Feedback"
-  onclick="openFeedback()">
+<a href="https://forms.gle/3ta7TqVyWjRdgTmx9" 
+   target="_blank" 
+   class="feedback-btn" 
+   aria-label="Feedback">
   <img src="assets/images/feedback.png" alt="Feedback" class="feedback-icon" />
-</button>
-
+</a>
 
       <button class="home-btn" aria-label="Home" data-page="pages/introduction/logging-in.html">
   <img src="assets/images/home.png" alt="Home" class="home-icon" />
@@ -254,15 +253,9 @@
     </main>
   </div>
 
- <script src="main.js"></script>
-<script src="feedback-loader.js" defer></script>
-
-<div id="feedbackOverlay" hidden></div>
-<div id="feedbackModal" hidden></div>
-
-<div id="searchOverlay" hidden></div>
-<div id="searchModal" hidden></div>
-<script src="search-wrapper-loader.js" defer></script>
-
+  <script src="main.js"></script>
+  <div id="searchOverlay" hidden></div>
+  <div id="searchModal" hidden></div>
+  <script src="search-wrapper-loader.js" defer></script>
 </body>
 </html>

feedback.js

@@ -4,40 +4,29 @@ console.log('main.js loaded');
 
 
 (function () {
-  // --- DOM helpers ---
+  // --- small DOM helpers ---
   const $all = (sel, root = document) => Array.from(root.querySelectorAll(sel));
   const $ = (sel, root = document) => root.querySelector(sel);
 
-
+  // =============================================================
 // Load welcome page by default on first visit
+// =============================================================
 window.addEventListener("DOMContentLoaded", () => {
   const content = document.querySelector(".content");
-  if (!content) return;
-
-  const params = new URLSearchParams(window.location.search);
-  const pageFromUrl = params.get("page");
-
-  if (pageFromUrl) {
-    loadPage(pageFromUrl);
-
-    const li = document.querySelector(`.submenu li[data-page="${pageFromUrl}"]`);
-    if (li) {
-      document
-        .querySelectorAll(".submenu li.selected")
-        .forEach(el => el.classList.remove("selected"));
-      li.classList.add("selected");
-    }
-
-    return;
+  if (content) {
+    fetch("pages/introduction/welcome.html")
+      .then(r => r.text())
+      .then(html => {
+        content.innerHTML = html;
+        // Optionally highlight the matching menu item
+        const li = document.querySelector('.submenu li[data-page="pages/welcome.html"]');
+        if (li) {
+          document.querySelectorAll(".submenu li.selected").forEach(el => el.classList.remove("selected"));
+          li.classList.add("selected");
+        }
+      })
+      .catch(err => console.error("Error loading welcome page:", err));
   }
-
-  // fallback only when no ?page=
-  fetch("pages/introduction/welcome.html")
-    .then(r => r.text())
-    .then(html => {
-      content.innerHTML = html;
-    })
-    .catch(err => console.error("Error loading welcome page:", err));
 });
 
 
@@ -60,18 +49,14 @@ window.addEventListener("DOMContentLoaded", () => {
 document.addEventListener('click', function (event) {
   const target = event.target.closest('[data-page]');
   if (!target) return;
-  if (target.querySelector('a[href]')) return;
   setActiveMenuItem(target);
 
   // Prevent full page reload
   event.preventDefault();
 
   const page = target.getAttribute('data-page');
   if (!page) return;
-
- history.pushState({ page }, '', `?page=${encodeURIComponent(page)}`);
-
-
+  
   // Load the HTML into the main content area
   fetch(page)
     .then(response => response.text())
@@ -206,7 +191,6 @@ document.addEventListener('click', function (event) {
   const homeBtn = document.querySelector('.home-btn');
   if (homeBtn) {
     homeBtn.addEventListener('click', () => {
-      selectMenuItem(homeBtn);
       const li = document.querySelector(`.submenu li[data-page="${HOME_TARGET_PAGE}"]`);
       if (!li) return console.warn('Home target not found:', HOME_TARGET_PAGE);
 
@@ -334,4 +318,5 @@ document.addEventListener('click', (e) => {
   setTimeout(() => li.classList.remove('spotlight'), 1100);
 });
 
+
 })();

index.html

@@ -3,22 +3,50 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
   <link rel="stylesheet" href="./style.css" />
   <link rel="icon" href="data:,">
+
+  <style>
+    .enhanced-video {
+      padding: 24px 0 32px;   
+      margin-bottom: 32px;      
+      border-radius: 12px;
+    }
+
+    .title-bar {
+      font-size: 1.3rem;
+      font-weight: 600;
+      padding: 12px 20px;
+      margin-bottom: 16px;
+    }
+  </style>
 </head>
+
 <body>
 
-  <div class="video-container">
+  <div class="video-container enhanced-video">
+
+    <div class="title-bar">
+      Create a New Project
+    </div>
+
     <video
       controls
       preload="metadata"
       playsinline
-      style="width:100%;height:auto;display:block;background:#000;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);"
-      >
-      <!-- UPDATE THIS: video file -->
+      style="
+        width:100%;
+        height:auto;
+        display:block;
+        background:#000;
+        border-radius:12px;
+        border:1px solid var(--border);
+        box-shadow:var(--shadow);
+      "
+    >
       <source src="./assets/videos/set-up-your-course/create-a-new-project.mp4" type="video/mp4" />
 
-      <!-- UPDATE THIS: captions file -->
       <track
         src="./assets/captions/set-up-your-course/create-a-new-project.vtt"
         kind="subtitles"
@@ -30,17 +58,6 @@
       Your browser does not support the video tag.
     </video>
 
-    <!-- UPDATE THIS: video title -->
-    <div class="title-bar">
-  <span class="video-title">Create a New Project</span>
-
-  <span class="version-badge">
-    (Placeholder)This video applies to Torus <strong>0.32.3</strong> and newer <!-- UPDATE THIS: version number -->
-  </span>
-</div>
-
-    </div>
-
   </div>
 
 </body>