Found this content helpful? Log in or sign up to leave a like!

Advancing a Canvancement Tool - Adding a student's name to their Grades Page

jasond
Community Contributor
‎09-28-2016 06:26 PM

Hello Canvas Devs!

I'm working on an update to  @James ​ awesome Canvancement script Add a student's name to their Grades page​ and I ran into a snag.The jQuery function adds appended code into the HTML, but the content isn't visible within the browser.

Here's the jQuery code:

if (matches) {
  $("aside#right-side").css("display", "inline-block").append('<div id="GradeWidget-grades-note">
  <h3>Grading Notes</h3>
<p>The total grade is not necessarily a predictor of an end of term grade, rather it is a snapshot of current progress. For example, prior to large assignments (test, projects, papers) being graded, smaller assignments heavily influence the overall grade. 
<strong>Students and parents are urged to speak with your Teacher if you have questions.</strong>
</p>
<ul id="GradeWidget-grades-notes-list"><li><img alt="Complete" class="graded_icon" src="/images/pass.png"> Assignment is turned in.</li>
<li>"-" Assignment has not been logged or is missing. </li>
<li><img alt="Text_entry" class="submission_icon" src="/images/file.png?1348285576"> A digital file was submitted and grades are pending.</li>
  </ul>
  <h3>Grading Scheme</h3>
  <table border="0">
    <tbody>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Range</th>
        <th scope="col"> </th>
      </tr>
      <tr>
        <td>A</td>
        <td>100%</td>
        <td>to 92.5%</td>
      </tr>
      <tr>
        <td>A-</td>
        <td>&lt; 92.5%</td>
        <td>to 89.5%</td>
      </tr>
      <tr>
        <td>B+</td>
        <td>&lt; 89.5%</td>
        <td>to 86.5%</td>
      </tr>
      <tr>
        <td>B</td>
        <td>&lt; 86.5%</td>
        <td>to 82.5%</td>
      </tr>
      <tr>
        <td>B-</td>
        <td>&lt; 82.5%</td>
        <td>to 79.5%</td>
      </tr>
      <tr>
        <td>C+</td>
        <td>&lt; 79.5%</td>
        <td>to 76.5%</td>
      </tr>
      <tr>
        <td>C</td>
        <td>&lt; 76.5%</td>
        <td>to 72.5%</td>
      </tr>
      <tr>
        <td>C-</td>
        <td>&lt; 72.5%</td>
        <td>to 69.5%</td>
      </tr>
      <tr>
        <td>D+</td>
        <td>&lt; 69.5%</td>
        <td>to 66.5%</td>
      </tr>
      <tr>
        <td>D</td>
        <td>&lt; 66.5%</td>
        <td>to 62.5%</td>
      </tr>
      <tr>
        <td>D-</td>
        <td>&lt; 62.5%</td>
        <td>to 59.5%</td>
      </tr>
      <tr>
        <td>F</td>
        <td>&lt; 59.5%</td>
        <td>to 0%</td>
      </tr>
    </tbody>
  </table>
</div>');
  }

Here's the whole block for contex:

// ==UserScript==
// @name        Add Name to Grades page
//  Adapted from James Jones' Canvancement Tools
//  Canvancement Tools can be found at https://github.com/jamesjonesmath/canvancement/
// ==/UserScript==
var includeSisId = true;
var nameOrder = [
  'short_name',
  'name',
  'sortable_name'
];
var regex = new RegExp('/users/([0-9]+)/grades$');
var matches = regex.exec(document.location);
if (matches) {
  $.getJSON('/api/v1/users/' + matches[1], function (data) {
    var name;
    for (var i = 0; i < nameOrder.length; i++) {
      var key = nameOrder[i];
      if (typeof data[key] !== 'undefined' && data[key]) {
        name = data[key];
        break;
      }
    }
    if (includeSisId && typeof data.sis_user_id !== 'undefined' && data.sis_user_id) {
      name += ' (' + data.sis_user_id + ')';
    }
    console.log(name);
    if (typeof name !== 'undefined') {
      $('h2:contains("Courses ")').text(name);
    }
  if (matches) {
  $("aside#right-side").css("display", "inline-block").append('<div id="GradeWidget-grades-note">
  <h3>Grading Notes</h3>
<p>The total grade is not necessarily a predictor of an end of term grade, rather it is a snapshot of current progress. For example, prior to large assignments (test, projects, papers) being graded, smaller assignments heavily influence the overall grade. 
<strong>Students and parents are urged to speak with your Teacher if you have questions.</strong>
</p>
<ul id="GradeWidget-grades-notes-list"><li><img alt="Complete" class="graded_icon" src="/images/pass.png"> Assignment is turned in.</li>
<li>"-" Assignment has not been logged or is missing. </li>
<li><img alt="Text_entry" class="submission_icon" src="/images/file.png?1348285576"> A digital file was submitted and grades are pending.</li>
  </ul>
  <h3>Grading Scheme</h3>
  <table border="0">
    <tbody>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Range</th>
        <th scope="col"> </th>
      </tr>
      <tr>
        <td>A</td>
        <td>100%</td>
        <td>to 92.5%</td>
      </tr>
      <tr>
        <td>A-</td>
        <td>&lt; 92.5%</td>
        <td>to 89.5%</td>
      </tr>
      <tr>
        <td>B+</td>
        <td>&lt; 89.5%</td>
        <td>to 86.5%</td>
      </tr>
      <tr>
        <td>B</td>
        <td>&lt; 86.5%</td>
        <td>to 82.5%</td>
      </tr>
      <tr>
        <td>B-</td>
        <td>&lt; 82.5%</td>
        <td>to 79.5%</td>
      </tr>
      <tr>
        <td>C+</td>
        <td>&lt; 79.5%</td>
        <td>to 76.5%</td>
      </tr>
      <tr>
        <td>C</td>
        <td>&lt; 76.5%</td>
        <td>to 72.5%</td>
      </tr>
      <tr>
        <td>C-</td>
        <td>&lt; 72.5%</td>
        <td>to 69.5%</td>
      </tr>
      <tr>
        <td>D+</td>
        <td>&lt; 69.5%</td>
        <td>to 66.5%</td>
      </tr>
      <tr>
        <td>D</td>
        <td>&lt; 66.5%</td>
        <td>to 62.5%</td>
      </tr>
      <tr>
        <td>D-</td>
        <td>&lt; 62.5%</td>
        <td>to 59.5%</td>
      </tr>
      <tr>
        <td>F</td>
        <td>&lt; 59.5%</td>
        <td>to 0%</td>
      </tr>
    </tbody>
  </table>
</div>');
  }
  });
}

Any suggestions on getting this code to be visible would be deeply appreciated!

Thank you,

Jason