Module ID's using javascript

[lalit_parashar]

Hi, 

Can some one please help me with fetching the module id's and their start date using javascript?  I would like to use this data for activating and deactivating some links in canvas course. 

I'm using the below code to fetch data but its providing me only course id. 

if (/^\/courses\/\d+.*/.test(window.location.pathname)) {
$.getJSON(`/api/v1/courses/${ENV.COURSE_ID}`, function(r) {

      setInterval(function(){
            var start = new Date(r.start_at);
            var today = new Date();

         if(start <= today){

            console.log("Hello");
         }
}, 100);

})

}

[robotcars]

Hi  @lalit_parashar ‌,

The endpoint you are using is just the course, which would include the course start_date.

The endpoint for modules is Modules - Canvas LMS REST API Documentation 

Modules don't have a start date and end date, but do have:

due_at, unlock_at, lock_at, and published, prerequisites and some others

Limiting the scope of the block to the pathname you want is awesome. Do you want it to run on every course page, or would modules and pages limit the code to run on pages with content links?

Is the setInterval there for your debugging or because you're waiting for the response?

If you use Fetch API - Web APIs | MDN instead of jQuery, you have the benefit of Promise - JavaScript | MDN, this means that your code can continue while the response is delivered and once delivered the code can use the response. Which means you don't have to code an arbitrary interval which may perform differently for users. This also avoid's jQuery which has some benefits too.

Maybe a bit more than you asked for, but all together...

(function () { // iife for scope

  // limit to course routes, including course home page, modules and pages are ?optional
  if (/^\/courses\/\d+(\/modules|pages)?/.test(window.location.pathname)) {

    // fetch modules
    fetch(`/api/v1/courses/${ENV.COURSE_ID}/modules`, {
        'headers': {
          'accept': 'application/json',
        }
      })
      // parse response body as json
      .then(res => res.json())
      // do something with the response
      .then(modules => activateLinks(modules))

    // something to do
    // const activateLinks = function(modules) {
    const activateLinks = modules => {
      console.log(modules)
    }
  }

})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[lalit_parashar]

Hi, Robert, 

This is really very helpful. 

I'm new with the coding and would really appreciate, if you can guide me to  fetch the unlock date for the modules. if the module is unlocked, then I would like to update some content on my home page or other pages dynamically. 

Please let me if this is possible. Thanks in advance and really admire your coding skills.  

[robotcars]

You're welcome Lalit.

We can do this, my only question is whether you're an instructor or canvas admin? There is no way to add JavaScript at the course level, it requires access to the Canvas Themes feature as all JavaScript customizations have to be imported there. This means JavaScript takes effect at the Instance or Sub Account level for all pages/courses affected by the code below it.

How do I manage themes for an account? 

How do I upload custom JavaScript and CSS files to an account? 

If this is something you have access we can try to work out your solution.

const activateLinks = modules => {
  for (let i in modules) {
    let module_unlock_at = modules[i].unlock_at
    console.log(module_unlocked_at);
  }
}‍‍‍‍‍‍‍‍‍‍‍‍

[lalit_parashar]

Hi, Robert, 

Thanks again for quick response. 

I have been given an admin access to try out CSS and JavaScript with canvas. I have created some design using CSS, where weeks have lock and unlock icons in the design. I would like to update the icons automatically when a module is unlocked. 

That's is one of the reason I have posted my query on Canvas community to seek some help. 

[robotcars]

Great! That's why the Community is here!

Can you give me an idea of where those icons are going, maybe with screenshots... and possibly provide the icon image you are using? What pages would you want the code to run on, or where will the lock icons be placed within the design?

What happens if the week doesn't have an unlock_at time set yet?

[lalit_parashar]

Hi, Robert, 

Below is the screenshot of the design and icons. We have used font awesome for icons. I would like the code to run in all the courses. 

in this design the Unlock date is kept as static text for the time being. 

This design will be used in individual modules too for letting the student know the progress. the next week will only get active when next module is unlocked. 

We haven't thought of a condition where there is no unlock_at time. 

I really appreciate the help you are providing. 

[robotcars]

You're basically mimicking the /modules page in a content page?

Can you provide that HTML block for 1 or 2 of these containers with each status (arrow, padlock)?

These are going on the course homepage? Anywhere else? What is the course home page set to? Syllabus, page?

Are you using module prerequisites besides unlock_at?

[lalit_parashar]

Here is the HTML block for the design 

<div class="week-wrap">
<div class="week">
<h2>Week <span class="badge">1</span></h2>
</div>
<div class="content-wrap bx-shadow">
<div class="content-week">
<div class="week-header">Aliquam velit ex, tempor nec metus a, dignissim fringilla tellus.</div>
<p>Aliquam velit ex, tempor nec metus a, dignissim fringilla tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque placerat, sem efficitur vestibulum molestie, purus nisi maximus elit, scelerisque finibus dolor turpis sed neque.</p>
<span class="unlock hidden">Unlock: 02/16/20</span></div>
<div class="lock"><span class="icon-arrow-right"> </span></div>
</div>
</div>

<div class="week-wrap">
<div class="week">
<h2>Week <span class="badge">2</span></h2>
</div>
<div class="content-wrap bx-shadow">
<div class="content-week">
<div class="week-header">Aliquam velit ex, tempor nec metus a, dignissim fringilla tellus.</div>
<p>Aliquam velit ex, tempor nec metus a, dignissim fringilla tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque placerat, sem efficitur vestibulum molestie, purus nisi maximus elit, scelerisque finibus dolor turpis sed neque.</p>
<span class="unlock">Unlock: 02/16/20</span></div>
<div id="week_2" class="lock"><span class="icon-lock"> </span></div>
</div>
</div>

We have developed a custom CSS to design this. 

These are going on the course homepage? Anywhere else?

[Right now we are using these in the course homepage. We might use these inside modules in future.]

What is the course home page set to? Syllabus, page?

[Course home page is set to a syllabus page.]

Are you using module prerequisites besides unlock_at?

[As I'm new to canvas, I'm not sure about module prerequisites, that's why thought of trying to achieve this using unlock_at. I thought it will be easy to fetch the module unlock_at and then compare the same with today's date nd change the icon accordingly.]

[robotcars]

This looks pretty good, thanks for providing those pieces.

In fact, we've basically done it here How can I embed a dynamically generated "semester week number" on the home page of a course? 

My afternoon is booked to work on a new project with one of our schools. I will settle into this in the morning or later today.

Take a look at module prereq's. Maybe determine if there are any other requirements/constraints, or if you'll find a complete solution in the default Canvas features.

How do I add prerequisites to a module?  

Using Prerequisites and Requirements 

[robotcars]

Can I get the CSS everything in week-wrap?

[robotcars]

Also, what kind of assumptions are you making converting Modules to Weeks, Is week 1 module 1?

Should I add ID's or Class names to the HTML to identify module-1,2,3 or just assume the first week-wrap is module 1?

document.querySelectorAll('.week-wrap')‍‍

[robotcars]

I don't have the CSS to test the full experience but here's what I have so far. It depends on the assumption that the weeks match the modules... However I have some code in there, that spits out errors if a module doesn't have an unlock date, or the weeks (html) and the modules don't match up. You said you wanted to activateLinks, but which element in the block is a link? The whole block or just a child?

Please test this out, and play with various scenarios of unlock date on modules, what happens when weeks and modules aren't aligned, and where today is before and after unlock date.

(function () { // iife for scope
  'use strict';

  // limit to course routes, including course home page, modules and pages ?optional
  // /^\/courses\/\d+(?:\/(?:modules|pages|assignments\/syllabus)(?:\/.+)?)?$/
  // limit to course home page, course syllabus
  if (/^\/courses\/\d+(?:\/(?:assignments\/syllabus)(?:\/.+)?)?$/.test(window.location.pathname)) {

    // return/exit if we don't see the proper html
    const weeks = document.querySelectorAll('.week-wrap');
    if (weeks.length == 0) return;

    // course_id for various routes - these aren't consistent, get one
    const course_id = (typeof ENV.COURSE === 'undefined') ? ENV.COURSE_ID || window.location.pathname.match(/\d+/)[0] : ENV.COURSE.id;

    // fetch modules
    fetch(`/api/v1/courses/${course_id}/modules`, {
        'headers': {
          'accept': 'application/json',
        }
      })
      // parse response body as json
      .then(res => res.json())
      // do something with the response
      .then(modules => activateLinks(modules));

    // something to do
    const activateLinks = modules => {

      let unlock_modules = modules.filter(m => m.unlock_at != null),
        format_date = {}, // { year: 'numeric', month: 'long', day: 'numeric' };
        today = new Date();

      // log some errors to the console
      modules.forEach(m => {
        if (m.unlock_at == null) console.log(`MODULE: ${m.name}, does not have an unlock date.`)
      })
      if (weeks.length != modules.length || weeks.length != unlock_modules.length) {
        console.log('week and module counts do not match')
      }

      Object.keys(unlock_modules).forEach(i => {
        let unlock_at = new Date(unlock_modules[i].unlock_at),
          unlock_at_formatted = unlock_at.toLocaleDateString('en-US', format_date),
          _sel = `.week-wrap:nth-child(${+i + +1})`;

        // if the module is unlocked today or before
        if (unlock_at <= today) {
          // switch the icon
          document.querySelector(`${_sel} span[class^=icon`).className = 'icon-unlock'
          // hide the date unlocked span
          document.querySelector(`${_sel} span.unlock`).className += ' hidden'

        } else {
          // update the span
          // weeks[i].childNodes[3].children[0].children[2].textContent = `Unlock: ${unlock_at_formatted}`
          document.querySelector(`${_sel} span.unlock`).textContent = `Unlock: ${unlock_at_formatted}`
        }
      });
    };
  }

})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[lalit_parashar]

Hi, Robert, 

Thank you for your help!!. 

I have written my version of code based on the help provided by you. Can you please validate the same. Below is the code snippet for the same. 

(function() { // iife for scope

// limit to course routes, including course home page, modules and pages are ?optional
if (/^\/courses\/\d+(\/modules|pages)?/.test(window.location.pathname)) {
var today = "";
// fetch modules
fetch(`/api/v1/courses/${ENV.COURSE_ID}/modules`, {
'headers': {
'accept': 'application/json',
}
})
// parse response body as json
.then(res => res.json())
// do something with the response
.then(modules => activateLinks(modules))

// something to do
// const activateLinks = function(modules) {
const activateLinks = modules => {
for (var i in modules) {
today = ""
today = new Date()
var module_unlock_at = modules[i].unlock_at
var moduleDate = Date.parse(modules[i].unlock_at);
var currentDate = Date.parse(today);

function convert(str) {
var date = new Date(str),
mnth = ("0" + (date.getMonth() + 1)).slice(-2),
day = ("0" + date.getDate()).slice(-2);
return [mnth, day, date.getFullYear().toString().substr(-2)].join("/");
}

$("#cbs-wrapper").find(".week-wrap").each(function(j, elem) {
if (moduleDate == null) {
$(elem).find(".unlock").text("Unlock: " + convert(moduleDate))
}
})

$("#cbs-wrapper").find(".week-wrap").each(function(j, elem) {
if ($(elem).find(".badge").text() == modules[i].position && moduleDate == null) {
$(elem).find(".unlock").text("Unlock: Not set")
}
})

if (moduleDate != null) {
if (Date.parse(modules[i].unlock_at).getTime() < Date.parse(today).getTime()) {
$("#cbs-wrapper").find(".week-wrap").each(function(j, elem) {
if ($(elem).find(".badge").text() == modules[i].position) {
$(elem).find(".lock").children("span").removeClass("icon-lock").addClass("icon-arrow-right")
$(elem).find(".unlock").hide()
}

})
}

}

}
}
}
})();

[robotcars]

 @lalit_parashar 

Were you able to get this working?

[lalit_parashar]

Yes, Robert. 

Thank you for providing your valuable help. 

[Renee_Carney]

carroll-ccsd 

This was a great answer you gave! Thanks for being so helpful to your fellow community members, especially in these difficult times. Please check your direct messages for a small token of our appreciation. :0)

Thanks again for all that you do and keep up the good work!