Функция Moodle Assignment для вставки дополнительного текста в назначения

Question

Во многих университетах есть схема Blue Card, позволяющая студентам с особыми трудностями в обучении (SpLD) отмечать свою работу синей картой, поэтому преподаватель отметит ее с должным вниманием.

Нам нужен был способ облегчить студентам помечать их работу с помощью синей карточки, и я разработал следующий скрипт, который входит в раздел "Дополнительный HTML" в Администрировании сайта в Moodle и работает с функциональностью "Назначение Moodle" (см. предыдущий пост для скрипта синей карты, который работает с плагином Turnitin).

Сначала студент нажимает кнопку, чтобы добавить синюю карточку, которая вставляет комментарий со словами "Синяя карточка" в поле комментариев к отправке. Когда форма отправлена, JavaScript ищет комментарий в таблице оценок и добавляет флаг в столбце состояния, чтобы напомнить преподавателю о необходимости просмотра комментариев. Затем преподаватель может отобразить комментарий и увидеть слова "Синяя карта" (которые являются ссылкой на рекомендации по маркировке дислексии).

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>';
            }
        }
    }

Примечание: код предоставляется "как есть", без каких-либо обязательств по его пригодности для использования, а также без каких-либо обязательств по обслуживанию или поддержке.

( также размещено в блоге нашей команды)

ОБНОВЛЕНИЕ: чтобы заставить это работать в Internet Explorer 11, я должен был сделать следующие корректировки:

/* 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>');
             }
        }
    }

Также требуется следующий CSS, чтобы кнопка "Добавить синюю карту" была синей:

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

Это потому что includes() метод и innerHTML() метод не работает в IE.