The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December.
Read our blog post for more info about this change.
More than one way to skin a cat...
You can do that... simply set a counter on an external html file and bring it into each course, that works. The displayed text probably won't include any course details, just a common string.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body></body>
<script>
var start = new Date('2019-04-01'); <!-- set this every semester -->
var today = new Date();
var weeks = Math.round((today-start)/ 604800000);
var x = document.createElement('p');
var t = document.createTextNode(`Welcome to week ${weeks}!`);
x.appendChild(t);
document.body.appendChild(x);
</script>
</html>If you want something a little more robust, built into Canvas...
Doing this using the global JavaScript themes, the code will be loaded at the bottom of the page, this means anything we modify on the page will be done after the page is fully rendered. For most users, this will happen in milliseconds and will go unnoticed.
We might also need to know if the page we are on is the course home page, this is done easiest by calling the local ENV.WIKI_PAGE.front_page true|false. Externally, we'd have to make a separate API call. But this depends on my previous question, will you be targeting an element on the page to update, or will you just add a new HTML block to the top of any page course home page.
Adding content to the content area can be problematic. The page title is not visible on the course home page unless you view it from pages. So having a target is probably best. If you have an existing element on the page that could take the Week # before or after works too.
If you're into trying the out the Developer Tools Console, you could try experimenting and decide what works best for your situation.
// for prototyping purposes only, please avoid using jquery in production
if (/^\/courses\/\d+.*/.test(window.location.pathname) && ENV.WIKI_PAGE.front_page) {
$.getJSON(`/api/v1/courses/${ENV.COURSE_ID}`, function(r) {
var start = new Date(r.start_at);
var today = new Date();
var weeks = Math.round((today-start)/ 604800000);
//$('.show-content').prepend(`<b>Week ${weeks}</b>`);
//$('.page-title').after(`<b>Week ${weeks}</b>`);
$('#course-week-count').html(`<b>${weeks}</b>`);
})
}Your iframe solution will be a full width block, you'd have to style the content of the page in the HTML and set borders to make it look seamless. Modifying the page with JS, you can update the value within the template and it can be designed into your page.
Happy to help with either option, which direction do you like best?
Hi Robert,
Indeed. I decided to show today's date on the page as well. Here's a screenshot of what I've got so far...
You'll notice I've got the Week Number and today's date up at the top, and I've also added JS to highlight the hyperlink to this week's page. We will always use wiki_pages.front_page as the home page. I don't envision needing any conditional formatting or text on any other course content.
Too many off-stage moving parts for this magic show, people are watching. 
Does this work for you?
Line 17, give each UL that holds week links a class of course-week-links, this limits the scope of the DOM search
Line 24, will go through an undefined amount of links, and complete on match.
(function () {
if (/^\/courses\/\d+.*/.test(window.location.pathname) && ENV.WIKI_PAGE.front_page) {
const parseISODate = ds => {
var d = ds.toISOString().split(/\D/);
return new Date(d[0], --d[1], d[2]);
},
dateDiff = (d0, d1) => Math.round((d1 - d0) / 8.64e7);
$.getJSON(`/api/v1/courses/${ENV.COURSE_ID}`, function (r) {
let start = new Date(r.start_at),
start_m = start.getMonth(),
today = new Date(),
split = today.toString().split(/\s/),
showtoday = `${split[0]}, ${split[1]} ${split[2]}, ${split[3]}`,
links = document.querySelectorAll('.course-week-links a');
var week = Math.floor(dateDiff(parseISODate(start), parseISODate(today)) / 7 + 1),
week = start_m <= 1 && week >= 8 ? week - 1 : week;
$('#course-week-count').html(`${week}`);
$('#showtoday').html(`${showtoday}`);
Object.keys(links).forEach(function (i) {
if (links[i].textContent == `Week ${week}`) {
return links[i].style.backgroundColor = 'yellow';
}
});
console.log(week);
console.log(showtoday);
})
}
})();About the same, but not so dependent on your backstage pyrotechnics.
Others can edit if their links don't exist or have different values, and the solution can help more than 1.
The first line is greedy and likely to throw an uncaught TypeError (or some similar fatal error that may keep the rest of whatever is in the global custom javascript from running.
Since you're running on just the front page, don't put .* at the end. That makes it run on every page that starts off courses/\d+ not just the front one.
The ENV.WIKI_PAGE.front_page isn't defined if you're not on a page, which will happen once you move off the front page.
Change line 1 to line 2
if (/^\/courses\/\d+.*/.test(window.location.pathname) && ENV.WIKI_PAGE.front_page) {
if (/^\/courses\/\d+\/?$/.test(window.location.pathname) && typeof(ENV.WIKI_PAGE) !== 'undefined' && ENV.WIKI_PAGE.front_page) {
Robert and James are the magicians here. I'm just the volunteer from the audience. 
I used indexOf() because we're not dealing with regular expressions.
I updated the code in #comment-143979
Community help
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.