How can I embed a dynamically generated "semester week number" on the home page of a course?

[Landmark_Coll]

This will be my first foray into adding custom JS and CSS into Canvas. I do have admin access and also have access to web server space outside of Canvas.  I've seen this done on the New England Tech Canvas site.   @James  &  @lbouthillier , my contact at Instructure recommended I tag you in this question.  Any help would be greatly appreciated.

[robotcars]

No problem! I usually end up learning a bit about things whenever you prod.

I eventually catch these things in testing. Now, if I too was a bit more focused while working on these little snippets, we'd be better off. :smileygrin:

// off topic

But then during MySQL import testing...

:squirrel:

The last packet successfully received from the server was 2,700,081 milliseconds ago.  The last packet sent successfully to the server was 2,700,079 milliseconds ago.

?!?!?!

and I'm somewhere else

[James]

I chase squirrels all the time. Our Differential Equations book used the Greek letter nu, but it looks a lot like their italic v. I actually took the PDF, zoomed in really close, took a screen shot of one, and overlaid it on the other to convince everyone (maybe myself) they were different letters.

They look different here, but one was in chapter 2 and the other was in chapter 6 so we hadn't seen them in a while.

[robotcars]

Well... honestly, I thought it would have faster performance than a capture group and condition.

var test = Array(1000).join().split(',').map(function(){ return 'Week '+this.i++; },{i:1});
var week = 10;

// capture group
console.time();
Object.keys(test).forEach(i => {
	var cg = test[i].match(/Week (\d+)/)
	if(cg[1] == week) {
		console.log(test[i]);
	}
});
console.timeEnd();
// 1.3671875ms
// 0.931884765625ms
// 0.76806640625ms
// ~ 1.0223ms

// search
console.time();
Object.keys(test).forEach(i => {
	var re = new RegExp(`Week ${week}$`, 'g');
	if (test[i].search(re) > -1) {
		console.log(test[i]);
	}
});
console.timeEnd();
// 49.344970703125ms
// 37.203125ms
// 90.416015625ms
// ~ 58.988‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However, in testing... I found that with includes() and indexOf() we end of up a very sloppy match on Week 1[1..9]

// includes
console.time();
Object.keys(test).forEach(i => {
	//if (test[i].includes(`Week ${week}`) == true) {
	if (test[i].indexOf(`Week ${week}`) != -1) {
		console.log(test[i]);
	}
});
console.timeEnd();
// Week 10
// Week 100
// Week 101
// Week 102
// Week 103
// Week 104
// Week 105
// Week 106
// Week 107
// Week 108
// Week 109
// Week 1000
// 1.780029296875ms‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

// indexOf
console.time();
Object.keys(test).forEach(i => {
	//if (test[i].indexOf(`Week ${week}`) == true) {
	if (test[i].indexOf(`Week ${week}`) != -1) {
		console.log(test[i]);
	}
});
console.timeEnd();
// Week 10
// Week 100
// Week 101
// ...
// 1.64697265625ms‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So bad choice. Good eye. 

Updated#comment-143979

[James]

I usually pick flexibility over speed. Requiring the user to consistently name something and never deviate may be asking a bit much.

[James]

When I originally suggested the regexp, I thought you were just trying to find all of the links that matched the pattern, not checking for a specific one. Now that I've finished my last final (yay!) I looked at your timing message again.

What if you modified your match? I moved the regex compilation outside the loop so it only has to do it once. You can probably use the same thing with a match, I just know more about regexps than string matches, so I didn't.

var test = Array(1000).join().split(',').map(function(){ return 'Week '+this.i++; },{i:1});
var week = 10;
console.time();
var regex = new RegExp('Week\\s+' + week + '\\b'); 
Object.keys(test).forEach(i => {
     if (regex.test(test[i])) {
          console.log(test[i]);
     }
});
console.timeEnd();
// 0.47998046875ms
// 0.358154296875ms
// 0.4921875ms‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This looks for Week followed by one or more spaces followed by the week number you're trying to find followed by a word boundary.

Also, got a crazy idea. You may have already discussed this, but you know I'm not reading everything with great detail. Sorry if you've already talked about it.

In addition to changing the formatting on the link to highlight it, how about making the Week 10 be a hyperlink itself that takes you to that page? Then they can always click at the top and be taken to the right week.

Edited: In new RegExp(), you have to escape the backslash. I had \s+ instead of \\s+ so I fixed it. It worked in my testing because I actually had a space instead of a \s+. I used \s+ in case someone added multiple spaces after the week to try and get them to line up "properly" in other places (so that Week 2 comes before Week 10).

[robotcars]

Yey!

I'm liking the mixed solution and the word boundary flag, haven't used that before. As well as the time performance.

Love the anchor link idea!

Or... what about pulling the href of the matched link scan and making it a link to the top week link and not an anchor link to the week's link.

I will test and tinker tomorrow, looks promising.

Rewriting our sis import.

[James]

Or... what about pulling the href of the matched link scan and making it a link to the top week link and not an anchor link to the week's link.

I got confused reading this. 

At first it sounds like you're saying make the link at the top go to the link at the bottom rather than the page that the link at the bottom goes to. Normally we're on the same page and that is so far from what I'm thinking that I must be misunderstanding you. But if I am reading that right, then no. That would be an intrapage jump and may not function properly. Plus, it's an extra click that most people won't notice. They'll just get the same page back and it may not jump at all, depending on how much is visible.

A second read makes it sound like you're saying the same thing I was saying and I was focusing too much on the a couple of words:  "a link to the top week link" instead of as "the link on the top week link". When I said "takes you to that page," I meant duplicating the hyperlink from the body at the top so that they go to the same place (the page that has the details for the current week).That cuts down a click and lets people jump to the current week quickly.

[robotcars]

Something weird is happening. I can't see these replies in the thread, only in my inbox...

And the response these replies are going to isn't even available in my inbox... so I can't confirm if I misunderstood you or I confused it in my interpretation.

...you were editing the post.

I thought you were suggesting, making the 'Week 10' text we append at the top a link to the Week 10 link in the links list... a page link to the link...

I thought I was upping the ante and suggesting to use the href from the week link we highlight, to make the link at the top go to Week 10.

I think we're on the same page.

[James]

I went in to fix a typo in the regex (you need to escape the \ in new RegExp() so it should have been \\s+ instead of \s+) and it got caught up in moderation. It sounds like we're talking the same thing and that my original communication wasn't clear enough.

[robotcars]

It's clear enough, if I take time to slow down. Too much context switching today.

Thanks for regex update.

[Landmark_Coll]

Gentlemen,

Sorry I haven't had a moment to chime in recently. I'm still very grateful for all of this work. I like the idea of being able to click "Week 14" either at the top of the page or among the unordered list below and being linked to the Week 14 page from either hyperlink.

I'm not sure I understand fix based on a "word boundary."  Does this mean that Week 1 will be differentiated from Week 11 based on the fact that there is a space after the one?  If so, how would that fly if the hyperlink text string was simply "Week 1" with no characters following?

[James]

It still works even if there is nothing after the "Week 1".  The description is for JavaScript is 

Matches a word boundary. This is the position where a word character is not followed or preceded by another word-character, such as between a letter and a space. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero.

An example they give is 

/oon\b/ matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;

A word character is 

\w Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to [A-Za-z0-9_]. For example, /\w/ matches "a" in "apple", "5" in "$5.28", and "3" in "3D".

Note that not followed by a word character is different from followed by a non-word character \W. The second requires the presence of a character while the first requires the absence of a character.

[robotcars]

 @Landmark_Coll 

This one uses James boundary regex, and makes the course-week-count a link.

<h2>Week <a id="course-week-count" href="#">#</a> of Let's do some JavaScript</h2>

(function () {
  if (/^\/courses\/\d+(\/pages\/.*)?$/.test(window.location.pathname) && ENV.WIKI_PAGE.front_page && typeof (ENV.WIKI_PAGE) !== 'undefined') {

    const isoDate = ds => {
        let d = ds.toISOString().split(/\D/);
        return new Date(d[0], --d[1], d[2]);
      },
      dateDiff = (a, b) => Math.round((isoDate(b) - isoDate(a)) / 8.64e7),
      setWeek = ds => {
        let start = new Date(ds),
          today = new Date(),
          day = today.toString().split(/\s/),
          showtoday = `${day[0]}, ${day[1]} ${day[2]}, ${day[3]}`,
          wk = Math.floor(dateDiff(start, today) / 7 + 1),
          week = start.getMonth() <= 1 && wk >= 8 ? wk - 1 : wk,
          links = document.querySelectorAll('.course-week-links a'),
          cwc = document.getElementById('course-week-count');

        cwc.textContent = week;
        document.getElementById('showtoday').textContent = showtoday;
        var regex = new RegExp('Week\\s+' + week + '\\b');
        Object.keys(links).forEach(i => {
          if (regex.test(links[i].textContent)) {
            cwc.href = links[i].href;
            return links[i].style.cssText = "background: yellow; font-weight: bold; padding: 1.5px";
            //return links[i].style.backgroundColor = 'yellow';
            //return links[i].classList.add('active-week');
          }
        });
      }
    fetch(`/api/v1/courses/${ENV.COURSE_ID}`, {
        'headers': {
          'accept': 'application/json',
          'content-type': 'application/json'
        }
      })
      .then(response => response.text())
      .then(r => setWeek(JSON.parse(r).start_at));
  }
})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[James]

I hate to be cliche, but I think you might have an unfulfilled promise here. I'm still trying to create a page that makes it through all of the conditions that have to be met for this to run, so I haven't verified this, but I've had issues with promises unless I resolve or reject them. The .then() works best ("I object your honor. Subjective!") a promise to be returned, yet you're returning a setting of a CSS style. Why? Also returning from within a loop means that you don't actually return anything if it's not found. I'll try to get back to you on this, but today was the first day of finals so I have three classes worth of finals to grade and this is something that will distract me because it's more fun.

As I stumble towards getting a page that matches, the point I'm currently to is getting an 'Cannot set property 'textContent' of null' error on your line 22. As an error, it aborts everything after that, which is bad if this is going in the global custom JavaScript file.

In the meantime ...

I would avoid using 

<h2>Week <a id="course-week-count" href="#">#</a> of Let's do some JavaScript</h2>

If it doesn't work, then people are left with a hashtag reference that goes no where. I don't remember where (accessibility or JavaScript), but I was reading something in the last week that said that was discouraged. This isn't the one I had seen, but Google Says Do Not Use Hashtags In URLs. I wouldn't have a href in there at all, but add it once we know there is a match. When you do match, I'd make "Week #" the link rather than just the #.

I'm also wondering if we should check the page for links before we make the fetch call.

The fetch command has JSON as a promise. Instead of doing JSON.parse(), you could do something like this (untested since I'm still working on getting a page that meets the requirements).

fetch(url,init).then(res => res.json()).then(json => setWeek(json.start_at));

I would also look at the end_at value and stop processing after that date.

[robotcars]

The #anchor article you linked to states

Now, Gary was specifically talking about using hashtags where the # calls new content to load. If you are just using them as basic web anchors to scroll down the page or to a location in the page but that content has already been loaded on first load - then it is fine. But if you programmed your site to load new content based on what comes up after the # sign in the URL, then you are in trouble.

John confirmed basic anchors are fine, i.e. a href="#anchor" is fine.

Which more specifically refers to #! and # content loading in older single page application designs.

But you stated 'this isn't the one', so I think we're OK. You're concern is still a high priority, and I agree. Which is why I like working through these things publicly... when we're solving issues as a community.

Outlining the scope of requirements here is a bit more than 'answering'  @Landmark_Coll  question. He has stated that he is populating course home pages externally and importing them. comment#143969

So the end result is likely something he might still have to work into his final process. So I've been mostly focused on trying to check off the feature requirements.

With that said:

The initial Week # anchor, should probably be a link an invisible anchor above the list of week links... so the user gets somewhere when clicking it... if the code fails... or as you suggested.

Next:

I'm still getting acquainted to the Fetch API... so your experience is appreciated...

Fetch returns a promise, and then returns a promise... are you wanting to resolve/reject based on setWeek, or the fact that Fetch returns a promise even if the request fails?

This, is better.

fetch(url,init).then(res => res.json()).then(json => setWeek(json.start_at));

Line 22 is resolved by adding line 33/34 below. Same with...

I'm also wondering if we should check the page for links before we make the fetch call.

Good call.

I would also look at the end_at value and stop processing after that date.

Also good call, but not implemented in code below.

Now I'm not sure if we care to return anything. If we switch to a for loop and return (closing the the iteration) we stop with the first match... if we don't the user could potentially have 2 sets of links, top and bottom of the page... this comes back to implementation.

I'll leave the previous example untouched as we're discussing the code now, not features.

(function () {
  if (/^\/courses\/\d+(\/pages\/.*)?$/.test(window.location.pathname) && ENV.WIKI_PAGE.front_page && typeof (ENV.WIKI_PAGE) !== 'undefined') {

    const isoDate = ds => {
        let d = ds.toISOString().split(/\D/);
        return new Date(d[0], --d[1], d[2]);
      },
      dateDiff = (a, b) => Math.round((isoDate(b) - isoDate(a)) / 8.64e7),
      setWeek = ds => {
        let start = new Date(ds),
          today = new Date(),
          day = today.toString().split(/\s/),
          showtoday = `${day[0]}, ${day[1]} ${day[2]}, ${day[3]}`,
          wk = Math.floor(dateDiff(start, today) / 7 + 1),
          week = start.getMonth() <= 1 && wk >= 8 ? wk - 1 : wk,
          links = document.querySelectorAll('.course-week-links a'),
          hit = false,
          cg;

        document.getElementById('course-week-count').textContent = week;
        document.getElementById('showtoday').textContent = showtoday;
        Object.keys(links).forEach(i => {
          cg = links[i].textContent.match(/Week (\d+)/);
          if (cg != null && cg[1] == week) {
            links[i].style.cssText = "background: yellow; font-weight: bold; padding: 1.5px";
            hit = true;
            //return links[i].style.backgroundColor = 'yellow';
            //return links[i].classList.add('active-week');
          }
        });
        return hit;
      }
    if (!document.getElementById('course-week-count'))
      return false;
    fetch(`/api/v1/courses/${ENV.COURSE_ID}`, {
        'headers': {
          'accept': 'application/json',
          'content-type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(json => setWeek(json.start_at))
  }
})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[James]

Glad to see you're using the fetch() instead of XHR. It's so much easier to understand and it's full of promise.

In line 26, it would be better to send the proper headers with the fetch() rather than strip the while(1);.

The second argument to fetch() is an options, you could use (sorry, I'm in the inbox and don't have access to the syntax highlighter)

{ 'headers' : { 'accept' : 'application/json', 'content-type' : 'application/json' } }

According to the spec, it probably doesn't need content-type on a GET statement, but I still include it with all my calls.

[robotcars]

Thanks! Still trying to understand and balance the options of both XHR and Fetch. I seem to be switching depending on the use case. 

[James]

carroll-ccsd and  @Landmark_Coll ,

I'm starting back over at the top level to break the deep indentation

So, I created a course with these pages. I tried to do various combinations of spellings and spacings. What you cannot see is that Week 2 has about 5 spaces between the week and the 2 and that's why Canvas put it first.

I'm click-phobic. I would rather spend a couple of hours writing code that will save me some repetitive clicks. I scraped the Page index page and wrote an unordered list of what would be added to the page if a person went through and manually added the Week* pages. It writes it to the console. I then copied and pasted it into the HTML editor on the Course Home Page.

This made my Course Home Page look like this.

Interesting, the <Lodash> got cut off, so the page name and URL stops with "and". 

Now I'm ready to do some discussion.

Going back to Robert's code from May 10 ...

The return() inside the Object.keys(links).forEach() doesn't break out of the forEach(). forEach() goes through all iterations. The return returns from the function that is called by the forEach(): 3 things you didn't know about the forEach loop in JS.

Is there a reason why we need to add a class to every link that we want to consider? Is there a time that /^Week \d+\b/ would not be a link to a page for that week? By looking inside the div.user-content, we should be able to make sure that it's just the stuff the user has put on the page.

Going back to Michael's statements about automatic vs manual and Spring Break beginning April 26 ...

As I was looking at the code generated by Canvas for the page index and trying to figure out how to extract the information so I could save adding 16 pages to a content page, I had an epiphany. Or at least I think I did.

There is a way to encode information into a web page that won't get stripped by the Canvas HTML Whitelist. That's by using the data-* attributes.

We could add a header to the start of the page and then add data-start, data-end, and data-skip. For example it might look like this:

<div data-start="2019-01-14" data-end="2019-05-18" data-skip="8" id="week_count"></div>‍‍‍‍‍

If you did the start and end, you wouldn't have to make the extra API call. That doesn't take very long, so you may just want to still make the API call to get the start and finish dates and just put the skip in there for spring courses. On the other hand, if you're having trouble getting mobile to recognize it, it may be able to recognize the data attributes. I have not tested this, so it still may not work.

If I was doing a lot of this, I would still automate it, but it might be by running a script that iterates through the list of candidate courses, fetches the front page, checks for the existence of that header, adds and saves the page if it's missing or needs updated.

Edit: After sleeping on it, maybe it's not such an epiphany. It may be easier to hard-code the calendar weeks of spring break for the next several years into the custom JavaScript directly as an object. Aside from this project, the use of the data- attributes may help with some of the mobile questions Robert and I have tossed around in the past.

Going back to the original question ...

I finally looked at the New England Tech (NEIT) Canvas site that you mentioned.

They're modifying the global navigation menu rather than trying to navigate content on specific pages. Did we decide that was not the way we wanted to go? It looks like Robert jumped in with something at the top of the page, rather than on the side in the navigation menu and it just progressed from there (sorry if I missed the discussion, this is getting to be a long thread)

That would have it available on every page for every student and you wouldn't need to do any customization to the individual courses. You wouldn't have to customize the front page of each course. You wouldn't be able to jump directly to the same place with a link in the "this is week 10" line at the top, but it also wouldn't take up space at the top.

Of course, that would only work if your entire institution was on the same schedule. That would never work for us as we have different length courses that start and stop at different times.

I also noticed when I looked at the JavaScript that NEIT was using and it appears that they do some similar things with content pages, similar to what Robert is so I may be missing what you were talking about. I don't see it on their course home page, but it looks like it should be doing something. Also, they have a script that pulls the week number from a text file on a server they maintain, rather than trying to figure it out through Canvas. It also looks like they're using it to handle some kind of featured content based on the week number.

I've got other ideas on the code and I still think there's some promise-related issues to work through. It may not matter in the web, but I know that Node was hanging and not exiting the program when I don't get it right. I'm using the fetch library for node, which is supposed to mimic what happens in the browser. There are some other issues, like the forEach() that keep executing, even after finding a match.

[robotcars]

Didn't lose interest here, just playing code golf while migrating our task server. I'll get back here hopefully next week.

You've raised some good points and I always appreciate the tips and collaboration.

Let's be clear that sharing prototype code as we make progress is not an indication that it is complete for someone to run off and add it to production. This is a discussion, not a product release, no 'correct answer' yet. Getting the POC down as we scope feature requirements is important but not often part of a public discussion. I'd hope people thoroughly read these discussions and make sure they are aware of the status and maintain diligence before implementing. Even pinging the discussion if you find this a year+ later and want to use it.

[Landmark_Coll]

Hello Robert & James,

I remain grateful for all the thought and effort.

For our particular needs here, I like displaying the week number at the top of the body rather than in the global nav at the left.

I cannot envision a time that /^Week \d+\b/ would not be a link to a page for that week. I like not having to class tag each link.

I do like the automated lookup of the course start date, but as I said earlier I could easily work with the hard coding if the automation came at the cost of stability.

Thanks again!

[James]

Agreed that the discussion is important to have. There are people who have no programming skills, but will stumble across this in the future and attempt to use it without taking the time to understand the conditions that have to be satisfied to make sure it works.

[robotcars]

The things I've seen in global files are scary... some of the things in my global file scare me.

It's very hard to make a one size fits all solution when we're dealing with features of content. This is far different than hacking around mutations and existing UI elements where we can kind of see every condition or work through them as we code. This scenario has a lot of conditions that aren't met until  @Landmark_Coll  determines his final template, which may be a combination of what works in JS and what's he chooses to manage in his HTML parsing and importing from a CSV file. I tried to tackle what happens when the user get's involved and throws a wrench in, but we kind of established that shouldn't happen in his environment. But Michael (doing searches and showing stack articles),  shows me that scratching at an idea together gets him get closer to achieving his feature... not so much that we're going to publish an 'answer' or even a 'solution' for anyone else to use.

However, the discussion here, the breakdown, and the thought process is probably more useful and informative to others than what we're producing. Most importantly, which you've mentioned before is the culture of people sharing their code here and refusing assistance. Code review is extremely helpful, and no matter how much I know about something, someone is going to know more, someone is going to have experience with something I haven't tried yet.

I really like your data attribute idea, for Michael's use case, since he's loading the HTML, this could be far better than an API call.

[Landmark_Coll]

Gentlemen,

I'm now into my second semester using the JS code that was hashed out here with your considerable efforts. The end result has been very well received. You have my gratitude.

I do have one more request for the gurus. The part of the code that "fetches" the course's start date is here:

fetch("/api/v1/courses/".concat(ENV.COURSE_ID), {
'headers': {
'accept': 'application/json',
'content-type': 'application/json'
}
}).then(function (response) {
return response.text();
}).then(function (r) {
return setWeek(JSON.parse(r).start_at);
});

What I've learned is that the start date of the course is only found if it's explicitly entered in the course's settings page. What I'd like is to grab the start date from the Canvas Term Calendar unless there's an overriding entry on the course's settings page.

As always, any help is greatly appreciated.

[robotcars]

Essentially, the request needs to have include[]=term added as a request parameter, but I can't format it for FetchAPI. Little rushed for time today and annoyed I can't figure that out.

Courses - Canvas LMS REST API Documentation 

I've tried JSON.stringify, objects, and arrays, strings,and nothing returns the term object unless I have it in the URI.

The body is supposed to match the content-type, but include[]=term is not a JS thing, it's more like a jQuery param.

Maybe  @James ‌ has done this?

But we should pass the body: and not append that parameter to the URI. Here's a bad example.

fetch(`/api/v1/courses/${ENV.COURSE_ID}?include[]=term`, {
    'headers': {
      'accept': 'application/json',
      'content-type': 'application/json',
      //'body': ...
    }
  })
  .then(res => res.json())
  .then(json => console.log(json.term.start_at))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[James]

GET (and most PUT) statements should URIencode the query parameters. So adding include[]=term or include%5B%5D=term in the URL is how you need to do it. I have found that it will work with [], even if the spec calls for encoding it. POST and some PUT can use the JSON string.

The content-type doesn't do any good for a GET (the accept does). In fact, Advanced Rest Client (I don't use Postman) has recently (I updated it earlier this year for the first time in several months) started throwing warnings if you try to include content-type with a GET:

If you don't want to manually construct the querystring, you can use URLSearchParams.toString(). The examples on URLSearchParams() are better for how to invoke it.

For example, this will log to the console the way it should be done. You can modify it work with the query itself. Note that it does not include the ?

var queryParams = new URLSearchParams({'include[]' : ['term']});
console.log(queryParams.toString());‍‍       // include%5B%5D=term‍‍‍‍‍‍‍

[robotcars]

Thank you James! It seemed odd to me to use that in the URI, but I wasn't finding the documentation, or I was glossing over it.

 @Landmark_Coll ‌, using either my example or  @James  comments are you able to get this working?

fetch(`/api/v1/courses/${ENV.COURSE_ID}?include[]=term`, {
    'headers': {
      'accept': 'application/json',
    }
  })
  .then(res => res.json())
  .then(json => console.log(json.term.start_at))‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Landmark_Coll]

Sadly. I did not get it working yet. But I've learned a few things along the way. I think my Javascript is all good here:

fetch("/api/v1/courses/".concat(ENV.COURSE_ID,"?include%5B%5D=term"), {
 'headers': {
 'accept': 'application/json',
 }
 }).then(function (response) {
 return response.text();
 }).then(function (r) {
 return setWeek(JSON.parse(r).term.start_at);
 });

My problem is that the API call is not returning the expected answer. Here is my Term Calendar:

Here is I get via Canvas Live API...

{
"id": 2588,
"name": "MAT1321 Statistics",
"account_id": 112,
"uuid": "GqQWbSibS7TM2lGAzx2WKPiaz9dGpddMNqeCLNNV",
"start_at": null,
"grading_standard_id": null,
"is_public": false,
"created_at": "2019-09-29T17:54:28Z",
"course_code": "MAT1321",
"default_view": "wiki",
"root_account_id": 1,
"enrollment_term_id": 129,
"license": "private",
"grade_passback_setting": null,
"end_at": null,
"public_syllabus": false,
"public_syllabus_to_auth": false,
"storage_quota_mb": 500,
"is_public_to_auth_users": false,
"hide_final_grades": false,
"term": {
"id": 129,
"name": "2020 - Spring (Online Dual Enrolled)",
"start_at": null,
"end_at": "2020-05-30T00:00:00Z",
"created_at": "2019-11-21T19:37:22Z",
"workflow_state": "active",
"grading_period_group_id": null,
"sis_term_id": "2020.SPRING.ONLINE",
"sis_import_id": 4583
},
"apply_assignment_group_weights": false,
"calendar": {
"ics": "https://landmark.instructure.com/feeds/calendars/course_GqQWbSibS7TM2lGAzx2WKPiaz9dGpddMNqeCLNNV.ics"
},
"time_zone": "America/New_York",
"blueprint": false,
"sis_course_id": "MAT1321",
"sis_import_id": null,
"integration_id": null,
"enrollments": [
{
"type": "designer",
"role": "DesignerEnrollment",
"role_id": 6,
"user_id": 3206,
"enrollment_state": "active",
"limit_privileges_to_course_section": false
}
],
"workflow_state": "unpublished",
"restrict_enrollments_to_course_dates": false,
"overridden_course_visibility": ""
}

So it seems like it's not returning the start date properly. I'm perplexed.

I suppose that once that's resolved, I'll need to tweak the Javascript to use the course's own start date instead of the term's start date if the course has its own start date.

[James]

 @Landmark_Coll  

The term dates are scoped to the user making the call. If you call it as a teacher or admin, then you're getting the "teachers can access from whenever" date of null rather than the students date of January 27 at 7pm.

[Landmark_Coll]

I guess that makes sense, but it's highly non-optimal in this scenario. The idea is to display "We are in Week X" on the home page. Ultimately, that message is for the students, but it will be disconcerting for the teacher to see the number of weeks since 1/1/1970. Is there any way to override the scope?

[Landmark_Coll]

 @James ‌ and Robert,

I've discovered what I think is a solution. If I issue this API call...

https://landmark.instructure.com:443/api/v1/accounts/1/terms/129

...I get the proper start_date for the term.

So can I impose on either of you to adapt my code to do the following?

• Make this call:

  fetch(`/api/v1/courses/${ENV.COURSE_ID}`, {

• Store start_date into variable1
• If start_date is NULL...
  • Store the enrollment_term_id into variable2
  • Make this call:

    fetch(`/api/v1/accounts/1/terms/$variable2`, {

  • Save start_date into variable1
• Adjust the following line to return variable1...

  return setWeek(JSON.parse(r).term.start_at);

So very much appreciated.

[robotcars]

HI Michael,

I'm spending the day updating and migrating my Canvas Themes workflow to my new desktop. I will take a look at this next week.

[James]

 @Landmark_Coll  

No, I can't help you use that API because it's not a solution; it won't do what you want it to do. It only works for people with an admin token and you cannot put that into JavaScript called by the user.

See the note at the top of the Enrollment Terms API documentation (emphasis mine).

API for viewing enrollment terms. For all actions, the specified account must be a root account and the caller must have permission to manage the account (when called on non-root accounts, the error will be indicate the appropriate root account).

[Landmark_Coll]

Ouch. Good catch. It seems I might be stuck manually entering the start dates in each course or else hard-coding the date in the Javascript. Disappointing.

Thanks for reviewing my idea.

[Landmark_Coll]

Gentlemen,

If I could impose on you once again, I'm working on an enhancement to this project which will put a progress bar on certain pages showing how far along students are in the course based on the current week and the total number of weeks in the course. Up until now, all of our courses have been 14 weeks long. Now that will be changing. What I need is to pull the 'end_at' date along with the 'start_at' date using the fetch command.

I'm not quite grasping what's going on with the promise responses in the current code.

Can I ask for some guidance adding a "de" (date end) variable to the current "ds" variable near line 23?

Here is my current script...

"use strict";

window.addEventListener('load', function () {

function getUrlVars(url) {
var vars = {};
var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
vars[key] = value;
});
return vars;
}

if ((/^\/courses\/\d+(\/pages\/.*)?$/.test(window.location.pathname) || /^\/courses\/\d+(\/wiki)?$/.test(window.location.pathname)) && typeof ENV.WIKI_PAGE !== 'undefined') {
var isoDate = function isoDate(ds) {
var d = ds.toISOString().split(/\D/);
return new Date(d[0], --d[1], d[2]);
},
dateDiff = function dateDiff(a, b) {
return Math.round((isoDate(b) - isoDate(a)) / 8.64e7);
},
setWeek = function setWeek(ds) {
var start = new Date(ds),
today = new Date(),
day = today.toString().split(/\s/),
showtoday = "".concat(day[0], ", ").concat(day[1], " ").concat(day[2], ", ").concat(day[3]),
wk = Math.floor(dateDiff(start, today) / 7 + 1),
week = start.getMonth() <= 1 && wk >= 8 ? wk - 1 : wk,
sb = start.getMonth() <= 1 && wk == 8 ? 1 : 0,
links = document.querySelectorAll('.course-week-links'),
cwc = document.getElementById('course-week-count'),
st = document.getElementById('showtoday'),
toExtract = window.location.href,
course,
toplink,
php = 'lecture',
pageweek = 1,
weekday = 0,
navlink = document.getElementById('nav'),
args = '&test';
course = toExtract.match('courses/(.*)')[1];
if (toExtract.includes('pages')) course = toExtract.match('courses/(.*)\/pages')[1];
if (toExtract.includes('/wiki')) course = toExtract.match('courses/(.*)\/wiki')[1];
if (toExtract.includes('week')) pageweek = parseInt(toExtract.match('week-(.*)')[1], 10);
if (toExtract.includes('weekend') || toExtract.includes('looking')) {
php = 'suggested';
weekday = 6;
}
if (toExtract.includes('objectives')) php = 'objectives';
if (toExtract.includes('suggested')) php = 'suggested';
if (toExtract.includes('monday')) {
php = 'suggested';
weekday = 1;
}
if (toExtract.includes('tuesday')) {
php = 'suggested';
weekday = 2;
}
if (toExtract.includes('wednesday')) {
php = 'suggested';
weekday = 3;
}
if (toExtract.includes('thursday')) {
php = 'suggested';
weekday = 4;
}
if (toExtract.includes('friday')) {
php = 'suggested';
weekday = 5;
}
var regexr = new RegExp('lessons-week-' + pageweek + '-');
var regexr2 = new RegExp('readings-week-' + pageweek + '-');
if (toExtract.includes('lessons') && !regexr.test(toExtract)) php = 'lessons';
if (toExtract.includes('readings') && !regexr2.test(toExtract)) php = 'lessons';
if (toExtract.includes('assignments') || toExtract.includes('activities')) php = 'assignments';
if (navlink !== null) navlink.src = 'https://etop.landmark.edu/timeline/' + php + '.php?week=' + pageweek + '&course=' + course + '&day=' + weekday;
if (cwc !== null) cwc.textContent = 'Week ' + week;
if (sb == 1) {
cwc.textContent = 'Spring Break';
}
// if (cwc !== null && week > 15) cwc.textContent = "a week outside of this course's calendar";

if (document.getElementById('top') !== null) {
toplink = document.getElementById('top').src;
if (toplink.includes('glossary')) args = args + '&glossary';
if (toplink.includes('wiki')) args = args + '&wiki';
if (toplink.includes('master')) args = args + '&master';
if (toplink.includes('syl=')) args = args + '&syl=' + getUrlVars(toplink)["syl"];
if (toplink.includes('calendar')) args = args + '&calendar=' + getUrlVars(toplink)["calendar"];
if (toplink !== null) document.getElementById('top').src = 'https://etop.landmark.edu/syllabi/syllabus.php?week=' + week + '&course=' + course + args;
}

if (st !== null) st.textContent = showtoday;
var regex = new RegExp('Week\\s+' + week + '\\b');
Object.keys(links).forEach(function (i) {
if (regex.test(links[i].textContent) && sb !== 1) {
cwc.style.background = null;
links[i].style.background = null;
cwc.href = links[i].href;
cwc.className += " highlight";
return links[i].className += " highlight";
//return links[i].classList.add('active-week');
}
});
};

fetch("/api/v1/courses/".concat(ENV.COURSE_ID,"?include%5B%5D=term"), {
'headers': {
'accept': 'application/json',
}
}).then(function (response) {
return response.text();
}).then(function (r) {
return setWeek(JSON.parse(r).start_at);
});

}
}, false);

[robotcars]

Hi Michael,

You asked about adding a parameter to setWeek and dealing with the fetch call.

Here's your call. All that was necessary here was to directly convert the response to json instead of text, and then access r's json properties.

fetch("/api/v1/courses/".concat(ENV.COURSE_ID, "?include%5B%5D=term"), {
    'headers': {
      'accept': 'application/json',
    }
  }).then(function (response) {
    return response.json()
  })
  .then(function (r) {
    console.log(r.term.start_at, r.term.end_at)
  })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This can be cleaned up a bit and shorthanded for easier reading, like so...

// template literal here for interpolation, cleans up the string, without concat
fetch(`/api/v1/courses/${ENV.COURSE_ID}?include[]=term`, {
    'headers': {
      'accept': 'application/json',
    }
  })
  // using an arrow function here, shorthand without having to use return in function
  // we also go directly to json, for ease, and not to parse the text to json
  .then(r => r.json())
  // r is now json, ready to be passed to another method
  .then(r => console.log(r.term.start_at, r.term.end_at));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ // test, then remove this

// pass params to setWeek
//.then(r => setWeek(r.term.start_at, r.term.end_at))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍; // use this‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The last commented .then(), is our next step. Note, that you don't have to return setWeek, you can just pass your params to setWeek(ds,de)

Does that help you get working on setWeek changes?

[Landmark_Coll]

Hi Robert,

Thank you kindly for your help. Using your suggested code, I got the end date, but the start date was coming up as null. However, this worked:

fetch("/api/v1/courses/".concat(ENV.COURSE_ID, "?include%5B%5D=term"), {
    'headers': {
      'accept': 'application/json',
    }
    }).then(function (response) {
      return response.text();
    }).then(function (r) {
      return setWeek(JSON.parse(r).start_at,JSON.parse(r).end_at);
    });

On another topic, how do you get line numbers to show when posting code in this forum?

[James]

 @Landmark_Coll  

On another topic, how do you get line numbers to show when posting code in this forum?

1. Make sure you're not replying from the Inbox as the option is not there when you do.
2. Click on the horizontal three dots to expand the toolbar
3. Click on More
4. Choose Syntax Highlighter
5. Once there, you can select the language and paste your code.

If you ever need to edit it, click on the source code first to get a little button at the top that looks like {;}

One issue that Robert and I have both ran into is that when you have a lot of code in your post relative to the amount of other stuff in your post, then it will probably get put into moderation and require a community manager or Canvas Coach to release it. Coaches have different areas they can see, so when I contact my favorite one to ask "Can you release my code?" she often says she can't see it. Eventually, someone comes around and releases it, usually within a day. I just wanted to give a heads up not to freak out about it when it happens.

[Landmark_Coll]

Thanks!‍

[robotcars]

Hmmm... the only way I can replicate null is if start_at is null, not set.

Ie... I tested a course where the term doesn't have a start date.

How's progress?

[Landmark_Coll]

Hi Robert,

I haven't gone back to tinker since it's working now with the return.text() code I posted a few days back. I've also long since given up on reliance on the Term Calendar for start and end dates since the results vary based on the user's role in the class. It's simply a prerequisite that start and end dates are manually entered in each course settings page. I'm content the way it is, but if you have something better to try, I'm game to try it.

Thanks.