moodle-mod_hvp/reporting/scripts/iv-open-ended-question.js

document.addEventListener("DOMContentLoaded", function() {
  var container = document.getElementById("gradable-container");
  var questions = [];
  var questionElements = container.querySelectorAll('.h5p-iv-open-ended-reporting-container');
  var inputs = [];
  var maxScores = {};
  var index = 0;
  var currentQuestion = questionElements[0];

  // Translatable labels
  var IVOpenEndedQuestionTitle;
  var scoreLabel;
  var scoreDelimiter;
  var questionsRemainingLabel;
  var submitButtonLabel;

  // Render each of the question containers
  for (var i = 0; i < questionElements.length; i++) {
    IVOpenEndedQuestionTitle = questionElements[i].getAttribute('data-report-iv-open-ended-question-title');
    scoreLabel = questionElements[i].getAttribute('data-report-score-label');
    scoreDelimiter = questionElements[i].getAttribute('data-report-score-delimiter');
    questionsRemainingLabel = questionElements[i].getAttribute('data-report-questions-remaining-label');
    submitButtonLabel = questionElements[i].getAttribute('data-report-submit-button-label');

    // Add the title to an existing div in the the header
    addTitle(i);

    // Add other elements to the header
    var header = document.getElementById('h5p-iv-open-ended-reporting-header-' + i);

    var gradeInputWrapper = document.createElement('div');
    gradeInputWrapper.classList.add('h5p-iv-open-ended-reporting-grade-input-wrapper');

    var inputDiv = createInputDiv(questionElements[i], i);
    gradeInputWrapper.append(inputDiv);

    var submitButtonWrapper = createSubmitButtonWrapper(i);
    gradeInputWrapper.append(submitButtonWrapper);

    header.append(gradeInputWrapper);

    // Add the header to the question container
    questionElements[i].prepend(header);

    // Keep track of the elements created and general data for later use
    questions[i] = {};
    questions[i] = {
      'element': questionElements[i],
      'inputDiv': inputDiv,
      'submitButton': submitButtonWrapper,
      'gradebookContainer': questionElements[i].querySelectorAll('.h5p-iv-open-ended-reporting-scores')[0]
    };
  }

  updateMainGradeBookContainer();

  /**
   * Add a title
   *
   * @param {number} index
   * @return {null}
   */
  function addTitle(index) {
    var titleCounter = document.createElement('div');
    titleCounter.classList.add('h5p-iv-open-ended-title-counter');
    titleCounter.innerHTML = IVOpenEndedQuestionTitle + ' ' + '<span>' + (index + 1) + ' ' + scoreDelimiter + ' ' + questionElements.length + '</span>';

    var titleWrapper = document.getElementById('h5p-iv-open-ended-reporting-title-wrapper-' + index);
    titleWrapper.prepend(titleCounter);
  }

  /**
   * Create submit button wrapper
   * @param {number} index
   * @return {HTMLElement}
   */
  function createSubmitButtonWrapper(index) {
    var submitButtonWrapper = document.createElement('div');
    submitButtonWrapper.classList.add('h5p-iv-open-ended-reporting-submit-button-wrapper');

    var submitButton = document.createElement('button');
    submitButton.classList.add('h5p-iv-open-ended-reporting-submit-button');
    submitButton.id = 'h5p-iv-open-ended-reporting-submit-button-' + index;
    submitButton.innerHTML = submitButtonLabel;

    submitButtonWrapper.append(submitButton);
    return submitButtonWrapper;
  }

  /**
   * Create input wrapper
   * @param {HTMLElement} wrapper
   * @param {number} index
   * @return {HTMLElement}
   */
  function createInputDiv(wrapper, index) {
    var inputDiv = document.createElement('div');
    inputDiv.classList.add('h5p-iv-open-ended-input-div');

    var scoreText = document.createElement('span');
    scoreText.innerHTML = scoreLabel + ': ';
    inputDiv.append(scoreText);

    var input = document.createElement('input');
    input.setAttribute('type', 'number');
    input.id = 'h5p-grade-input-' + index;
    input.subcontentID = wrapper.getAttribute('data-report-id');
    input.scaleFactor = wrapper.getAttribute('data-report-scale');
    input.maxScore = wrapper.getAttribute('data-report-max');
    inputDiv.append(input);

    var maxScoreText = document.createElement('span');
    maxScoreText.id = 'h5p-max-score-text-' + index;
    inputDiv.append(maxScoreText);

    inputs.push(input);
    return inputDiv;
  }

  // Add logic to the inputs
  inputs.forEach(function(input, index) {
    // Populate the inputs with existing questionElements
    populateInputDiv(input.subcontentID, index);

    input.addEventListener('focus', function() {
      var submitButton = document.getElementById('h5p-iv-open-ended-reporting-submit-button-' + index);
      submitButton.disabled = false;
    });

    // Validate on blur
    input.addEventListener('blur', function() {
      if (this.value == '' || parseInt(this.value) < 0) {
        this.value = 0;
      }

      if (parseInt(this.value) > parseInt(maxScores[index])) {
        this.value = maxScores[index];
      }
    });

    // Add logic for the corresponding submit button
    var submitButton = document.getElementById('h5p-iv-open-ended-reporting-submit-button-' + index);
    submitButton.addEventListener('click', function() {

      // Validate on submit again since blur doesn't always work
      if (this.value == '' || parseInt(this.value) < 0) {
        this.value = 0;
      }

      if (parseInt(this.value) > parseInt(maxScores[index])) {
        this.value = maxScores[index];
      }

      H5P.jQuery.post(data_for_page.setSubContentEndpoint, {
        subcontent_id: input.subcontentID,
        score: input.value,
        maxScore: input.maxScore
      }, function(response) {
        renderAfterSubmit(input, index, response.data.totalUngraded)
      });
    });
  });

  /**
   * rerenders elements with new data
   * @param {HTMLElement} input
   * @param {number} index
   * @param {number} totalUngraded
   */
  function renderAfterSubmit(input, index, totalUngraded) {
    hideInputs(index);

    // Update the gradebook score for this question and for the main content type
    updateGradeBookContainer(index, input.value, input.scaleFactor);
    updateMainGradeBookContainer();
    updateQuestionCounter(totalUngraded);
  }

  /**
   * hide inputs
   *
   * @param {number} index
   */
  function hideInputs(index) {
    questions[index].submitButton.classList.add('h5p-iv-open-ended-reporting-hidden');
    questions[index].inputDiv.classList.add('h5p-iv-open-ended-reporting-hidden');
  }


  /**
   * Updates the gradebook scores for a particular question
   *
   * @param {number} index
   * @param {number} inputValue
   * @param  {float} scaleFactor
   */
  function updateGradeBookContainer(index, inputValue, scaleFactor) {
    var scoreContainer = document.getElementById('h5p-iv-open-ended-reporting-score-' + index);
    scoreContainer.classList.remove('h5p-iv-open-ended-reporting-hidden');

    var scaledScoreElement = scoreContainer.querySelectorAll('.h5p-reporting-scaled-score')[0];
    scaledScoreElement.innerHTML = Math.round((scaleFactor * inputValue) * 100 + Number.EPSILON) / 100;

    var rawScoreElement = scoreContainer.querySelectorAll('.h5p-reporting-raw-score')[0];
    rawScoreElement.innerHTML = inputValue;
  }


  /**
   * Updates the values of the main gradebook container for the containing content type
   */
  function updateMainGradeBookContainer() {
    // Only look within the same report
    var thisReport = findAncestor(container, '.h5p-reporting-main-container');
    var thisReportView = findAncestor(container, '.h5p-report-view');
    var rawScores = thisReport.querySelectorAll('.h5p-reporting-raw-score');
    rawScores = Array.prototype.slice.call(rawScores).map(function(rawScoreElement) {
      return parseInt(rawScoreElement.innerHTML);
    });
    var rawScore = rawScores.reduce(function(a,b) {
      return a + b;
    });
    var mainRawScoreElement = thisReport.querySelectorAll('.h5p-reporting-main-score-raw-score')[0];
    mainRawScoreElement.innerHTML = rawScore;

    // Update the gradebook score
    var scaledScores = thisReportView.querySelectorAll('.h5p-reporting-scaled-score');
    scaledScores = Array.prototype.slice.call(scaledScores).map(function(scaledScoreElement) {
      return parseFloat(scaledScoreElement.innerHTML);
    });

    var scaledScore = scaledScores.reduce(function(a,b) {
      return a + b;
    });

    var scaledScoreElement = thisReport.querySelectorAll('.h5p-reporting-main-score-scaled-score')[0];
    scaledScoreElement.innerHTML = Number((scaledScore).toFixed(2));
  }


  /**
   * Renders the input div
   *
   * @param {number} subcontentID
   * @param {number} index
   */
  function populateInputDiv(subcontentID, index) {
    H5P.jQuery.get(data_for_page.getSubContentEndpoint, {subcontent_id : subcontentID}, function(response) {
      var loadedInput = document.getElementById('h5p-grade-input-' + index);
      loadedInput.value = response.data.score;

      var loadedMaxScore = document.getElementById('h5p-max-score-text-' + index);
      loadedMaxScore.innerHTML = scoreDelimiter + ' ' + response.data.maxScore;
      maxScores[index] = response.data.maxScore;

      // Disable buttons if the content type hasn't been graded yet
      if (response.data.score === null) {
        var submitButton = document.getElementById('h5p-iv-open-ended-reporting-submit-button-' + index);
        submitButton.disabled = true;
      }
      else {
        // Hide input div and show grade container if it already has been graded
        hideInputs(index);
        updateGradeBookContainer(index, loadedInput.value, loadedInput.scaleFactor);
      }

      updateQuestionCounter(response.data.totalUngraded);
    });
  }


  /**
   * Updates the remanining question counter
   *
   * @param {number} totalUngraded
   */
  function updateQuestionCounter(totalUngraded) {
    if (totalUngraded > 0) {
      container.querySelectorAll('.h5p-iv-open-ended-reporting-question-counter').forEach(function(questionCounter) {
        questionCounter.innerHTML = '<span>' + totalUngraded + ' ' + questionsRemainingLabel + '</span>';
      });
    } else {
      container.querySelectorAll('.h5p-iv-open-ended-reporting-question-counter').forEach(function(questionCounter) {
        questionCounter.innerHTML = '<span>All questions have been graded</span>';
        questionCounter.classList.add('reporting-completed');
      });
    }
  }

  // Initialize buttons
  container.querySelectorAll('.h5p-iv-open-ended-previous').forEach(function(button, index) {
    button.addEventListener("click", showPreviousQuestion);

    // Disable the first previous button
    if (index === 0) {
      button.disabled = true;
    }
  });

  container.querySelectorAll('.h5p-iv-open-ended-next').forEach(function(button, index) {
    button.addEventListener("click", showNextQuestion);

    // Disable the last next button
    if (index === container.querySelectorAll('.h5p-iv-open-ended-next').length - 1) {
      button.disabled = true;
    }
  });

  // Add logic to the 'Change grade' button to show the input again
  container.querySelectorAll('.h5p-iv-open-ended-reporting-change-grade').forEach(function(button) {
    var index = button.getAttribute('data-report-id');
    button.addEventListener('click', function() {
      questions[index].inputDiv.classList.remove('h5p-iv-open-ended-reporting-hidden');
      questions[index].submitButton.classList.remove('h5p-iv-open-ended-reporting-hidden');
      questions[index].gradebookContainer.classList.add('h5p-iv-open-ended-reporting-hidden');
    });
  });

  /**
   * showPreviousQuestion
   */
  function showPreviousQuestion() {
    // If we are on the first question don't do anything
    if (index === 0) {
      return;
    }
    currentQuestion.classList.add('h5p-iv-open-ended-reporting-hidden');

    index -= 1;
    currentQuestion = questionElements[index];
    currentQuestion.classList.remove('h5p-iv-open-ended-reporting-hidden');
  }

  /**
   * showNextQuestion
   */
  function showNextQuestion() {
    if (index == questionElements.length - 1) {
      return;
    }
    currentQuestion.classList.add('h5p-iv-open-ended-reporting-hidden');

    index += 1;
    currentQuestion = questionElements[index];
    currentQuestion.classList.remove('h5p-iv-open-ended-reporting-hidden');
  }

  /**
   * Finds an ancestor that matches a selector
   *
   * @param  {type} el
   * @param  {type} sel
   * @return {HTMLElement} element to be returned
   */
  function findAncestor (el, sel) {
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
    return el;
  }
});