Using JS to add content to Syllabus

[mjennings]

I was wondering if anyone could help me out with a .js  solution since that is not my strength and we have no programmers. All of our courses are required to uses the Syllabus as the course homepage. Currently we are embedding an iframe of a custom webpage (currently - UAB SON Slider)  on all of the courses homepages so that we can periodically update the page and it updates in all of our courses. This has worked of, but I have to make some compromises that I have never been happy with.

Today I was thinking that maybe this could be done with .js below the "Jump to Today" link similar to the way we are able to append the menu across the top of the old UI:

(function() {
  var menu = $('#menu');
  if (!menu.length) return;
  //Menu Item Support
  var stuResources = $('<li/>', {
  'class': 'menu-item',
  html: '<a class="menu-item-title" href="https://community.canvaslms.com/">Student Resources<span class="menu-item-title-icon"></span><i class="icon-mini-arrow-down"></i></a><div class="menu-item-drop"><table cellspacing="0"><tbody><tr><td class="menu-item-drop-column">'+
  //'<h2 id="test" >Resources</h2>
  '<ul class="menu-item-drop-column-list">'+
  //List items
  '<li><a href="http://www.uab.edu/students/one-stop" target="_blank"><span class="name ellipsis">UAB One Stop</span></a></li>'+
  '<li><a href="http://www.uab.edu/libraries/" target="_blank"><span class="name ellipsis">UAB Libraries</span></a></li>'+
  '<li><a href="http://www.uab.edu/students/academics/exceptions-to-academic-policy" target="_blank"><span class="name ellipsis">UAB Academic Policies</span></a></li>'+
  '<li><a href="http://www.uab.edu/students/academics/academic-calendar" target="_blank"><span class="name ellipsis">UAB Academic Calendar</span></a></li>'+
  '<li><a href="http://www.uab.edu/handbook/" target="_blank"><span class="name ellipsis">UAB Student Handbook</span></a></li>'+
  '<li><a href="http://www.uab.edu/students/services" target="_blank"><span class="name ellipsis">UAB Services Directory</span></a></li>'+
  '<li><a href="http://www.uab.edu/students/services/disability-support-services" target="_blank"><span class="name ellipsis">UAB Disability Services</span></a></li>'+
  '<li><a href="http://www.uab.edu/writingcenter/" target="_blank"><span class="name ellipsis">UAB Writing Center</span></a></li>'+
  '<li><a href="http://www.uab.edu/elearning/students/canvas-tutorials" target="_blank"><span class="name ellipsis">Canvas Student Tutorials</span></a></li>'+
  '<li><a href="http://www.uab.edu/elearning/how-online-learning-works" target="_blank"><span class="name ellipsis">Online Student Success</span></a></li>'+
  '<li><a href="http://www.uab.edu/careerservices/" target="_blank"><span class="name ellipsis">UAB Career & Professional Development</span></a></li>'+
  '<li><a href="http://www.uab.edu/elearning/academic-technology/student" target="_blank"><span class="name ellipsis">UAB Academic Technologies</span></a></li>'+
  //Ending
  '</ul></td></tr></tbody></table></div>'
  });
  men
menu.append(stuResources);
})

So I guess my question is this - is there a way to append the syllabus so that it will write some standard content within all of our courses? The slide we are using is created entirely out of HTML & CSS, so I would think I could add the CSS to our global CSS and add the HTML similar to above. I just don't know how to write the call to put it in the correct place.

I hope I have given enough of an idea of what I am trying to do. I am totally open to feed back on ideas or reasons that this  is a completely insane idea.

[kenneth_larsen]

Hi  @mjennings ​,

This is completely doable. Let me make sure I understand first. Every course in your instance will have the syllabus as the front page and every course will receive the same html inserted after the "Jump to Today" link. Is that correct?

[mjennings]

Yes that is what I am shooting for. Thanks.

Matthew

Sent from my iPhone. Please excuse the brevity, typos & lack of nuance.

[kenneth_larsen · Accepted solution]

This should do what you are looking for based on my understanding. This will add whatever html you decide to put within the beforeSyllabus variable. You can write out all the html that you would like, or you could use it to add an iframe like you were using before.

// Run the following on any home page that is set to the syllabus
if ($('#course_syllabus').length > 0 && $('#course_home_content').length > 0) {
    var beforeSyllabus = '<p>Whatever you want inserted before the syllabus content.</p>';
    $('#course_syllabus').before(beforeSyllabus);
}

I did some testing and I think that the two pieces we are looking for load with the page, but if you find that there are times it doesn't load, let me know and we can wrap it in a function that will check to make sure the necessary pieces exist before running the code.

[mjennings]

 @kenneth_larsen  - This is amazing. Thanks so much. Once again you are making my life much easier. I have a few styling issue that I am working out, but I think I can hammer those out this afternoon. You are amazing and a giver. Now we just need to figure out how to clone you.

[mjennings]

So as always, I found 1-2 courses that need to be exceptions to the rule (why does there ALWAYS have to be exceptions?!?!?). Is there a way to manually exclude based on the course ID similar to the way Kennethware can be limited by user or role? By my reasoning it would be something like:

arrayCourseID: [
'12345',
'67890',
]
if ($('#course_syllabus').length > 0 && $('#course_home_content').length > 0 && $('arrayCourseID').false) {  
    var beforeSyllabus = '<p>Whatever you want inserted before the syllabus content.</p>';  
    $('#course_syllabus').before(beforeSyllabus);  

Basically a way to write the code only on pages NOT in the array. Again, my JavaScript knowledge is pretty basic, but I think this should be doable, I am just not sure how to write it.

[kenneth_larsen]

The hardest thing about this type of programming is thinking through all of the exceptions. If you want to go the route of an array of exceptions, you can use the jQuery inArray() function​. You pass in the value you want to check against the array and the array you want to check and it will return the position in that array. If it is not in the array it will return -1. Since you don't want the code to apply to the listed courses, the example below uses === -1 to indicate the current course is not in the array.

var excludedCourses = [
  12345,
  67890
]
// Run the following on any home page that is set to the syllabus 
if ($('#course_syllabus').length > 0 && $('#course_home_content').length > 0 && $.inArray(ENV.COURSE_ID, excludedCourses) === -1) { 
    var beforeSyllabus = '<p>Whatever you want inserted before the syllabus content.</p>'; 
    $('#course_syllabus').before(beforeSyllabus); 
}

In USU Design Tools (KennethWare), there is a coursenum variable that is parsed from the url and returns the number as a string. Canvas also has some information stored under ENV and the COURSE_ID pulled from this context is an integer. That is why the course id's in the USU Design Tools are wrapped in '' while the example above is not. If you are using USU Design Tools and are running this after the code to initiate the coursenum variable, you could use the following:

var excludedCourses = [
  '12345',
  '67890'
]
// Run the following on any home page that is set to the syllabus 
if ($('#course_syllabus').length > 0 && $('#course_home_content').length > 0 && $.inArray(coursenum, excludedCourses) === -1) { 
    var beforeSyllabus = '<p>Whatever you want inserted before the syllabus content.</p>'; 
    $('#course_syllabus').before(beforeSyllabus); 
}

Either one should work.

[mjennings]

Thanks again!! The second option worked perfectly since we are using the USU Design Tools.