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

[jasond]

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

[James]

 @jasond ​,

I'm not a JavaScript expert and spend a lot of time on Mozilla Developer Network looking up how to do things. I've had trouble when I split a line within a string. I think the JavaScript browser is inserting a semicolon to end a line. That causes a problem because it's not the end of a line of code, it's the embedded newline you're trying to put into HTML.

That was kind of confirmed when I brought your code into Eclipse, the editor I use, and it threw an "Unexpected Token ILLEGAL" error on your first line of the append.

I did a search and replace on \n and replaced it with \\n. That replaced all of the embedded newlines with the newline character. It made for one really, really long string, but it removed the error.

Another way to keep the formatting intact is to end each line with a backlash to indicate the line is continued. In this case, I did a search and replace for \n and replaced it with \\\n

Also, it doesn't appear that your if (matches) around the big append actually does anything. Nothing is executed unless there was a match and you haven't redefined match since then, so it won't get to the inside if (matches) unless if (matches) is true.

Once we get that past that problem, which may or may not be an issue depending on the browser, but it was for me in Eclipse using JSHint, we have the problem of visibility.

The problem with the code is that you're making the aside visible, but the aide is contained within the div#right-side-wrapper, which has display:none; The display:inline-block may or may not be needed for the aside, but you need to show the right-side-wrapper:

$('div#right-side-wrapper').show();

I did not need the display:inline-block on my aside once I turned on the other, but you may need it to be an inline block for some other reason.

Finally, I'm not sure if you're adding this to the global JavaScript or to a user script, but your user script metadata is incomplete so it shouldn't run at all and if it's within the global JavaScript, then the userscript stuff doesn't need to be there.

Hope that helps.

[jasond]

Hi James,

Thanks for the assistance! I forgot about the .show() method  in jQuery.

Here's the final working code:

// ==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 addNameRegex = new RegExp('/users/([0-9]+)/grades$');

var addNameMatches = addNameRegex.exec(document.location);

if (addNameMatches) {

  $('div#right-side-wrapper').show();

  $('#right-side').append('<h3>Grading Scheme</h3> <table border="0" class="ic-Table ic-Table--hover-row ic-Table--striped"> <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>');

   $.getJSON('/api/v1/users/' + addNameMatches[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);

    }

  });

}

Thank you so much for initial code base and I am super appreciative of your assistance with my modification!!!!

- Jason