Moodle Assignment functionality to insert extra text in assignments

Question

Many universities have a Blue Card scheme enabling students with specific learning difficulties (SpLDs) to flag their work with a blue card, so the tutor will mark it with due consideration.

We needed a way of making it easier for students to flag their work with a blue card, and I have come up with the following script, which goes into the Additional HTML section in Site Administration in Moodle, and works with the Moodle Assignment functionality (see previous post for a blue card script that works with the Turnitin plugin).

First the student clicks the button to add the blue card, which inserts a comment with the words "Blue Card" in the submission comments field. When the form is submitted, the JavaScript looks for a comment in the grading table, and adds a flag in the status column to remind the tutor to review the comments. The tutor can then display the comment and see the words "Blue Card" (which are a link to the dyslexia marking guidelines).

Answer 1

/* MOODLE ASSIGNMENT BLUE CARD */

var MoodleAssignBlueCardButton =  '<input type="button" id="mabluecard" value="Flag with Blue Card" class="bluecard"/> <a href="http://www.brookes.ac.uk/students/wellbeing/dyslexia-spld/blue-marking-cards/"  target="_blank" title="What is the Blue Card scheme?">What\'s this?</a><br/>';

if (!document.getElementsByClassName('submissionstatustable')[0]) {
   /* do nothing */
} else {
    var assignTable = document.getElementsByClassName('submissionstatustable')[0];
    assignTable.insertAdjacentHTML('beforebegin', MoodleAssignBlueCardButton);
}

/* EVENT LISTENER FOR MOODLE ASSIGNMENT BLUE CARD BUTTON */
if (!document.getElementById('mabluecard')) {
   /* do nothing */
} else {
    document.getElementById("mabluecard").addEventListener('click', function () {  
        var commentbox = document.getElementsByClassName('comment-area')[0];
        var textarea = commentbox.getElementsByTagName('textarea')[0];
        if (!textarea.value) {
            textarea.value = ('<a href="http://www.brookes.ac.uk/students/wellbeing/dyslexia-spld/blue-marking-cards/" target="_blank" style="background-color: #99ccff">Blue Card</a>'); 
         } else if  (textarea.value == 'Add a comment...') {
               textarea.value = ('<a href="http://www.brookes.ac.uk/students/wellbeing/dyslexia-spld/blue-marking-cards/" target="_blank" style="background-color: #99ccff">Blue Card</a>'); 
       } else {
            textarea.value = ('<a href="http://www.brookes.ac.uk/students/wellbeing/dyslexia-spld/blue-marking-cards/" target="_blank" style="background-color: #99ccff">Blue Card</a>: ' + textarea.value);
         }
    /* save the comment */
    document.getElementsByClassName("comment-link")[0].click();
    var saveLink = document.getElementsByClassName("fd")[0].getElementsByTagName("a")[0];
     saveLink.click();
    });
}

/* flag the Blue Card submission in the Grading Table */
if (!document.getElementsByClassName('gradingtable')[0]) {
   /* do nothing */ 
} else {
    var table = document.getElementsByClassName('gradingtable')[0];
     var tbody = table.getElementsByTagName('tbody')[0];

     var comments = tbody.getElementsByClassName('c10');
         for (var i=0, len=comments.length; i<len; i++){
             if (comments[i].innerHTML.includes('Comments')){
              thisRow = comments[i].parentNode;
            thisRow.style.backgroundColor = '#ffffcc';
            statusCell = thisRow.getElementsByClassName("c5")[0];
             statusCell.innerHTML += ' <div style="background-color: #99bbff">Student has added comments, please review</div>';
            }
        }
    }

NB: code is supplied 'as is' without any commitment to it being fit for purpose and is also supplied without any commitment to maintenance or support.

(also posted on our team blog)

UPDATE: To get this to work in Internet Explorer 11, I had to make the following adjustments:

/* flag the Blue Card submission in the Grading Table */
if (!document.getElementsByClassName('gradingtable')[0]) {
   /* do nothing */ 
} else {
     var table = document.getElementsByClassName('gradingtable')[0];
     var tbody = table.getElementsByTagName('tbody')[0];
     var comments = tbody.getElementsByClassName('c10');
         for (var i=0, len=comments.length; i<len; i++){
             if (comments[i].innerText.search('Comments') > -1){
            thisRow = comments[i].parentNode; 
           alert('thisRow ' + thisRow);
            thisRow.style.backgroundColor = '#ffffcc';
            nameLink = thisRow.getElementsByTagName("a")[1]; 
            nameLink.insertAdjacentHTML('afterend', ' <div style="background-color: #99bbff">Student has added comments, please review</div>');
             }
        }
    }

It also requires the following CSS to make the "Add Blue Card" button blue:

.bluecard {
  background-color: rgba(0, 0, 255, 1) !important;
  color: #fff;
  padding: 6px;
  border-radius: 6px;
}

This is because the includes() method and the innerHTML() method do not work in IE.