AnsweredAssumed Answered

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

Question asked by Jason Diehl on Sep 28, 2016
Latest reply on Sep 28, 2016 by James Jones

Hello Canvas Devs!

 

I'm working on an update to James Jones 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

Outcomes