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

jasond
Community Contributor

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