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 c

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.