Example Course Materials

I make my own slides and review guides so students have a clearer path through the course. The textbook materials are useful, but they can be broader than what we need for a specific class meeting or exam. My versions narrow the focus, keep the order close to how I teach the topic, and give students a cleaner study tool.

The lecture slides are posted before class so students can follow along, add notes, and come back to the examples later. The review guide is shared closer to an exam and is meant to help students connect the main ideas, definitions, graphs, and practice questions. The review sample shows one exam unit. The slide sample shows a section that can stretch or shrink depending on the class pace.

Canvas Countdown Embed

I wanted a simple countdown for an online course, but most options were either too busy or did not work cleanly inside Canvas. Canvas strips or blocks many kinds of JavaScript when it is pasted directly into a page, so the countdown needs to live in a separate HTML file. That file can then be hosted on a website and placed in Canvas with an iframe.

The important line is <base target="_parent">. It stops Canvas from duplicating the navigation UI by telling Canvas that it's a child not a parent. The rest of the file is small: one empty countdown element, a target date, a short timer function, and a little CSS. The result should be readable on desktop and mobile.

To reuse it, change the date in targetDate, update the colors or font size if needed, host the file, and embed that hosted page in Canvas. I tested the view in both the web and mobile version of Canvas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Course countdown</title>
  <base target="_parent">
  <style>
    body {
      margin: 0;
      text-align: center;
      overflow: hidden;
      font-family: "Lato Extended", sans-serif;
    }

    #countdown {
      color: #cc0000;
      font-size: 2.2rem;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div id="countdown"></div>

  <script>
    var targetDate = new Date("2026-05-09T16:30:00-05:00");
    var countdown = document.getElementById("countdown");

    function updateCountdown() {
      var diff = targetDate - new Date();

      if (diff <= 0) {
        countdown.textContent = "Time's up!";
        clearInterval(timer);
        return;
      }

      var days = Math.floor(diff / (1000 * 60 * 60 * 24));
      var hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      var minutes = Math.floor((diff / (1000 * 60)) % 60);
      var seconds = Math.floor((diff / 1000) % 60);

      countdown.textContent = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
    }

    updateCountdown();
    var timer = setInterval(updateCountdown, 1000);
  </script>
</body>
</html>