adaptiveContent.html

<script type="text/javascript">
  /**
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for
 * additional information regarding copyright ownership.

 * The Apereo Foundation licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except in
 * compliance with the License. You may obtain a copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
    };

    this.createDiagram = function(data, identifier, showall_only, interaction) {
        var importData = data;
        var numSubmits = importData.length;
        var latest_ts = "";
        var mean_all = [];
        var mean = [];
        var latest = null;
        var objlabel = null;
        var classnames = [];
        var classtitles = [];
        var numUserSubmits = 0;
        var xertelo = interaction.getAttribute('xertelo');
        var textSize = Math.round(interaction.getAttribute("labelFontSize"));

        if (textSize == null || textSize == 0) textSize = 12;

        // We assume the data contains identical data sets
        // TODO: Check this
        if (numSubmits == 0) {
            return;
        }

        if (showall_only === "true")
        {
            showall_only = true;
        }
        if (showall_only === "false")
        {
            showall_only = false;
        }
        importData.forEach(function(obj)
        {
            if (objlabel == null) {
                objlabel = obj.graph.label;
            }

            for (var i = 0; i < obj.graph.classvalues.length; i++) {
                if (mean_all[i] == null) {
                    mean_all[i] = obj.graph.classvalues[i];
                }
                else
                {
                    mean_all[i] += obj.graph.classvalues[i];
                }

        if (classnames[i] == null) {
          classnames[i] = x_GetTrackingTextFromHTML(obj.graph.classnames[i], obj.graph.classnames[i]);
        }
        if (classtitles[i] == null) {
          if (
            typeof obj.graph.classtitles != "undefined" &&
            typeof obj.graph.classtitles[i] != "undefined" &&
            obj.graph.classtitles[i] != ""
          ) {
            classtitles[i] = x_GetTrackingTextFromHTML(obj.graph.classtitles[i], obj.graph.classtitles[i]);
          } else {
            classtitles[i] = classnames[i];
          }
        }
      }

      // Check what method is used for identification.
      var matchactor = false;
      switch (studentidmode) {
        case 0:
        case 2:
          if (obj.actor.mbox == userEMail) {
            matchactor = true;
          }
          break;
        case 1:
          if (obj.actor.mbox_sha1sum == mboxsha1) {
            matchactor = true;
          }
          break;
        case 3:
          if (obj.actor.account != undefined &&
              obj.actor.account.name == groupname) {
            matchactor = true;
          }
          break;
      }
      if (!matchactor &&
        xertelo == x_TemplateId &&
        obj.context != undefined &&
        obj.context.extensions != undefined &&
        obj.context.extensions["http://xerte.org.uk/sessionId"] != undefined &&
        obj.context.extensions["http://xerte.org.uk/sessionId"] ==
          state.sessionId) {
        matchactor = true;
      }

      if (matchactor) {
        if (obj.timestamp > latest_ts) {
          latest_ts = obj.timestamp;
          latest = obj;
        }

        for (var i = 0; i < obj.graph.classvalues.length; i++) {
          if (mean[i] == null) {
            mean[i] = obj.graph.classvalues[i];
          } else {
            mean[i] += obj.graph.classvalues[i];
          }
        }

        numUserSubmits++;
      }
    });

    for (var x = 0; x < mean_all.length; x++) {
      if (mean_all[x] != null) {
        mean_all[x] = Math.round((mean_all[x] * 10) / numSubmits) / 10;
      }
      if (mean[x] != null) {
        mean[x] = Math.round((mean[x] * 10) / numUserSubmits) / 10;
      }
    }

    function hexToRgb(hex, opa) {
      var bigint = parseInt(hex, 16);
      var r = (bigint >> 16) & 255;
      var g = (bigint >> 8) & 255;
      var b = bigint & 255;

      return "rgba(" + r + ", " + g + ", " + b + ", " + opa + ")";
    }

    var ctx = $('#' + identifier + ' .graph-container canvas');
    var bgColourIn = "0xff0000";
    if (interaction.getAttribute("colour") != null) {
      bgColourIn = interaction.getAttribute("colour");
    }
    var bgColour = hexToRgb(bgColourIn.substr(bgColourIn.length - 6), 0.5);
    var lnColour = hexToRgb(bgColourIn.substr(bgColourIn.length - 6), 1);

    var pavgbgColourIn = "0x0000ff";
    if (interaction.getAttribute("colourPersonalAvg") != null) {
      pavgbgColourIn = interaction.getAttribute("colourPersonalAvg");
    }
    var pavgbgColour = hexToRgb(
      pavgbgColourIn.substr(pavgbgColourIn.length - 6),
      0.5
    );
    var pavglnColour = hexToRgb(
      pavgbgColourIn.substr(pavgbgColourIn.length - 6),
      1
    );

    var avgbgColourIn = "0x00ff00";
    if (interaction.getAttribute("colourAvg") != null) {
      avgbgColourIn = interaction.getAttribute("colourAvg");
    }
    var avgbgColour = hexToRgb(
      avgbgColourIn.substr(avgbgColourIn.length - 6),
      0.5
    );
    var avglnColour = hexToRgb(
      avgbgColourIn.substr(avgbgColourIn.length - 6),
      1
    );

    var avgAllLabelText = interaction.getAttribute("avgAllLabelText");
    if (avgAllLabelText == undefined) {
      avgAllLabelText = "Avg. of all attempts";
    }

    var personalLabelText = interaction.getAttribute("personalLabelText");
    if (personalLabelText == undefined) {
      personalLabelText = "Your last attempt";
    }

    var personalAvgLabelText = interaction.getAttribute("personalAvgLabelText");
    if (personalAvgLabelText == undefined) {
      personalAvgLabelText = "Avg. of your attempts";
    }

    var groupAverageLabelText = interaction.getAttribute("groupAverageLabelText");
    if (groupAverageLabelText == undefined) {
        groupAverageLabelText = "Group Average";
    }

    var datasets = [];
    if (showall_only || latest == null) {
      // Only show mean_all
      datasets = [
        {
          label: avgAllLabelText,
          data: mean_all,
          backgroundColor: avgbgColour,
          borderColor: avglnColour,
        },
      ];
    } else {
      datasets = [
        {
          label: personalLabelText,
          data: latest.graph.classvalues,
          backgroundColor: bgColour,
          borderColor: lnColour,
        },
      ];
      if (numUserSubmits > 1) {
        datasets.push({
          label: personalAvgLabelText,
          data: mean,
          backgroundColor: pavgbgColour,
          borderColor: pavglnColour,
        });
      }
      datasets.push({
        label: avgAllLabelText,
        data: mean_all,
        backgroundColor: avgbgColour,
        borderColor: avglnColour,
      });
    }

    if (interaction.getAttribute('opinionGraphType') == 'radar' || interaction.getAttribute('opinionGraphType') == null) {
      // Show mean_all and latest
      var myRadarChart = new Chart(ctx, {
        type: "radar",
        data: {
          labels: classtitles,
          datasets: datasets,
        },
        options: {
          scales: {
            r: {
              beginAtZero: true,
              max: 100,
              pointLabels: {
                  font: {
                      size: textSize
                  },
              },
              ticks: {
                  font: {
                      size: textSize - 4
                  },
              }
            },
          },
          legend: {
            labels: {
              font: {
                  size: textSize
              },
            },
          },
          responsive: true,
          maintainAspectRatio: false,
        },
      });
    } else if (interaction.getAttribute('opinionGraphType') == 'hor_bar_comb_marks_avg') {
      let passingGrade = x_params.trackingPassed;
      if (passingGrade == null) {
        passingGrade = "55";
      } else {
        if (passingGrade.indexOf("%") >= 0) {
          passingGrade = parseInt(passingGrade) + "";
        } else if (
          parsefloat(passingGrade) >= 0 &&
          parsefloat(passingGrade) <= 1
        ) {
          passingGrade = parseFloat(passingGrade) * 100.0 + "";
        }
      }
      let ctx = "#" + identifier + "-graph";

      let labelCounter = 0;
      let data = [];
      if (datasets.length < 2)
      {
          var insufficientDataText = interaction.getAttribute("insufficientDataText");
          if (insufficientDataText == undefined) {
              insufficientDataText = "There is insufficient data for this graph";
          }
          $(ctx).parent().append('<p><em>' + insufficientDataText + '</em></p>');
      }
      else {
          const avgDataSet = datasets.length - 1;

          datasets[0].data.forEach((val, key) => {
              data.push({
                  x: classtitles[key],
                  y: Math.round(val, 2),
                  goals: [
                      {
                          name: groupAverageLabelText,
                          value: datasets[avgDataSet].data[key],
                          strokeWidth: 5,
                          strokeColor: "#775DD0",
                      },
                  ],
              });
              labelCounter += 1;
          });
          let colors = [
              "#FF6384",
              "#4BC0C0",
              "#FFCD56",
              "#C9CBCF",
              "#36A2EB",
              "#B284BE",
          ];
          if (interaction.getAttribute('graphColorScale') != null && interaction.getAttribute('graphColorScale') != "") {
              colors = interaction.getAttribute('graphColorScale').split(",");
          }
          var options = {
              series: [
                  {
                      data,
                  },
              ],
              chart: {
                  toolbar: {
                      show: false,
                  },
                  height: 350,
                  type: "bar",
              },
              plotOptions: {
                  bar: {
                      horizontal: true,
                      distributed: true,
                  },
              },
              colors: colors,
              dataLabels: {
                  formatter: function (val, opt) {
                      const goals =
                          opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
                              .goals;

                      if (goals && goals.length) {
                          return `${val}%`;
                      }
                      return val;
                  },
                  style: {
                      fontSize: textSize + 'px',
                  }
              },
              legend: {
                  show: true,
                  showForSingleSeries: true,
                  customLegendItems: [groupAverageLabelText],
                  markers: {
                      fillColors: ["#775DD0"],
                  },
                  style: {
                      fontSize: textSize + 'px',
                  }
              },
              xaxis: {
                  position: 'bottom',
                  labels: {
                      offsetY: 1,
                      style: {
                          fontSize: textSize + 'px',
                      },
                  },
              },
              yaxis: {
                  labels: {
                      style: {
                          fontSize: textSize + 'px',
                      },
                  },
              },
          };
          var chart = new ApexCharts(
              document.querySelector(`${ctx}`),
              options
          );
          chart.render();
          $(ctx + ' svg text').css('font-size', textSize + 'px');
      }
    }
  };

  function hasToRetrieveAll(interaction) {
    var dashboardMode = x_currentPageXML.getAttribute("dashboardMode");
    if (dashboardMode == undefined) {
      dashboardMode = "false";
    }
    if (dashboardMode == "true") {
      return true;
    } else {
      if (
        (interaction.getAttribute("interactionType") !== "open" &&
            (interaction.getAttribute("interactionType") !== "opinion"
             || interaction.getAttribute("opinionClass") == undefined))
      ) {
        if (interaction.getAttribute("graph") === "true") {
          return (
            interaction.getAttribute("graphType") === "bar_answers" ||
            interaction.getAttribute("graphType") === "bar_marks" ||
            interaction.getAttribute("graphType") === "line_average_marks" ||
            interaction.getAttribute("graphType") === "bar_marks_score"
          );
        } else {
          return false;
        }
      } else {
        return true;
      }
    }
  }

  function escapeUrl(url, type, interactionIndex) {
    return (
      url.replace(/[^A-Za-z0-9]/g, "_") + "_" + type + "_" + interactionIndex
    );
  }

    function matchActor(statement, xertelo)
    {
        switch (studentidmode) {
            case 0:
            case 2:
                if (statement.actor.mbox == 'mailto:' + username) {
                    return true;
                }
                break;
            case 1:
                if (statement.actor.mbox_sha1sum == mboxsha1) {
                    return true;
                }
                break;
            case 3:
                if (statement.actor.account != undefined
                            && statement.actor.account.name == groupname) {
                    return true;
                }
                break;
        }
        if (xertelo != undefined && xertelo == x_TemplateId
            && statement.context != undefined
            && statement.context.extensions != undefined
            && statement.context.extensions['http://xerte.org.uk/sessionId'] != undefined
            && statement.context.extensions['http://xerte.org.uk/sessionId'] == state.sessionId)
        {
            return true;
        }
        return false;
    }

  function filterOwnStatements(data, xertelo) {
    var statements = [];
    for (var i = 0; i < data.length; i++) {
      if (matchActor(data[i], xertelo)) {
        statements.push(data[i]);
      }
    }
    return statements;
  }

  function queryStatements(endpoint, mode, query, interactionIndex, handler) {
    search = mode + "=" + JSON.stringify(query);

    var statements = [];
    url = endpoint + "?first=1000&" + search;
    requestJSON(url, function (data) {
      statements = data.edges.map(function (s) {
        return s.node.statement;
      });
      requestMoreStatement(url, data, statements, interactionIndex, handler);
    });
  }

  function requestMoreStatement(
    endpoint,
    data,
    statements,
    interactionIndex,
    doneHandler
  ) {
    if (data.pageInfo.hasNextPage) {
      requestJSON(
        endpoint + "&first=1000&after=" + data.pageInfo.endCursor,
        function (res) {
          statements = statements.concat(
            res.edges.map(function (s) {
              return s.node.statement;
            })
          );
          requestMoreStatement(
            endpoint,
            res,
            statements,
            interactionIndex,
            doneHandler
          );
        }
      );
    } else {
      doneHandler(statements, interactionIndex);
    }
  }

  function requestJSON(url, handler) {
    $.ajax({
      type: "GET",
      url: url,
      success: handler,
      beforeSend: function (xhr) {
        xhr.setRequestHeader(
          "Authorization",
          "Basic " + toBase64(lrsUsername + ":" + lrsPassword)
        );
      },
    });
  }

  function verifyInteraction(interaction) {
    errors = [];
    if (interaction.getAttribute("interactionType") == "score") {
      for (var ci = 0; ci < interaction.children.length; ci++) {
        c = interaction.children[ci];
        if (!c.hasAttribute("conScoreBetween")) {
          errors.push("No score between given.");
        } else {
          values = c.getAttribute("conScoreBetween").split(",");
          if (values.length != 2) {
            errors.push("Invalid pattern for score between.");
          }
        }
      }
    }
    if (interaction.getAttribute("interactionType") == "answer") {
      for (var ci = 0; ci < interaction.children.length; ci++) {
        c = interaction.children[ci];
        if (!c.hasAttribute("conScoreAnswer")) {
          errors.push("No answer given.");
        }
      }
    }
    return errors;
  }

  function getUrl(xerteurl, xertelo, xertelabel, opinionClass) {
    var url = xerteurl + xertelo;
    if (xertelabel != undefined && xertelabel != "") {
      url += "/" + xertelabel.replace(/ /g, "_");
    }
    if (opinionClass != undefined && opinionClass != "") {
      url += "/" + opinionClass.replace(/ /g, "_");
    }
    return url;
  }

  function getGroupingLabel(statement) {
    // statements DO have context.contextActivities.grouping[0].id defined (see above)
    // Check context.contextActivities.grouping[0].definition.name['en-US']
    if (
      statement.context.contextActivities.grouping[0].definition != undefined &&
      statement.context.contextActivities.grouping[0].definition.name !=
        undefined &&
      statement.context.contextActivities.grouping[0].definition.name[
        "en-US"
      ] != undefined
    ) {
      return statement.context.contextActivities.grouping[0].definition.name[
        "en-US"
      ];
    } else {
      let id = statement.context.contextActivities.grouping[0].id;
      let pos = id.lastIndexOf("/");
      let group = id.substr(pos + 1);
      return group.replace(/_/g, " ");
    }
  }

  function filterRelevantStatements(statements, type) {
      if (type == "all") {return statements}
      var groupedData = {};
      statements.forEach(function(statement, i) {
          var participant = {
              'attemptkeys' : [],
              'attempts': [],
          };

          if (statement.actor.mbox != undefined) {
              var key = statement.actor.mbox.substr(7).trim();
              if (groupedData[key] == undefined) {
                  participant['key'] = key;
                  groupedData[key] = participant;
              }
          } else if (statement.actor.mbox_sha1sum != undefined) {
              var key = statement.actor.mbox_sha1sum;
              if (groupedData[key] == undefined) {
                  participant['key'] = key;
                  groupedData[key] = participant;
              }
          } else {
              // Key is group, session_id (if group is available), otherwise just session
              var group = (statement.actor.group != undefined ? statement.actor.group.name : 'global');
              if (statement.context != undefined &&
                  statement.context.extensions != undefined &&
                  statement.context.extensions['http://xerte.org.uk/sessionId'] != undefined) {
                  var key = statement.context.extensions['http://xerte.org.uk/sessionId'];
                  if (key == undefined) {
                      key = statement.context.extensions[site_url + "sessionId"];
                  }
                  if (key != undefined) {
                      key = group + ' ' + key;
                      if (groupedData[key] == undefined) {
                          participant['key'] = key;
                          groupedData[key] = participant;
                      }
                  }
              }
          }
          if (key != undefined) {
              if (statement.context != undefined &&
                  statement.context.extensions != undefined &&
                  statement.context.extensions['http://xerte.org.uk/sessionId'] != undefined) {
                  var attemptkey = statement.context.extensions['http://xerte.org.uk/sessionId'];
                  if (groupedData[key]['attempts'][attemptkey] == undefined) {
                      groupedData[key]['attempts'].push(statement)
                      groupedData[key]['attemptkeys'].push(
                          {
                              key: attemptkey,
                          }
                      );
                  }
              }
          }
      });
      var statements = [];
      for (var user in groupedData) {
          if (type == "first") {
              statements.push(groupedData[user].attempts[0])
          } else if (type == "last") {
              statements.push(groupedData[user].attempts[groupedData[user].attempts.length - 1])
          } else if (type == 'best'){
              //todo check if correct
              var bestAttempt = null;
              for (var attempt in groupedData[user].attempts){
                  if (bestAttempt != null) {
                      if (bestAttempt.result.score.raw < groupedData[user].attempts[attempt].result.score.raw) {
                          bestAttempt = groupedData[user].attempts[attempt]
                      }
                  } else {
                      bestAttempt = groupedData[user].attempts[attempt]
                  }
              }
              statements.push(bestAttempt)
          }
      }
      debugger
      return statements
  }

  function getStatements(
    xerteurl,
    xertelo,
    xertelabel,
    verb,
    opinionClass,
    type,
    retrieveAll,
    interactionIndex,
    group,
    filter_context_id,
    fullWidth,
    handler,
    secondHandler
  ) {
    var url;
    var q = {}
    if (type != "grouping" && type != "opinionclasses") {
      url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
    } else {
      url = getUrl(xerteurl, xertelo);
      xertelabel = xertelabel.replace(/ /g, "_");
    }

    var startDate = x_currentPageXML.getAttribute("startDate");
    if (startDate == undefined) {
      startDate = "";
    }
    var endDate = x_currentPageXML.getAttribute("endDate");
    if (endDate == undefined) {
      endDate = "";
    }

    if (!retrieveAll) {
      /*
            switch(studentidmode) {
                case 0:
                case 2:
                    q['statement.actor.mbox'] = 'mailto:' + username;
                    break;
                case 1:
                    q['statement.actor.mbox_sha1summbox'] = mboxsha1;
                    break;
                case 3:
                    q['statement.actor.objectType'] = 'Group';
                    q['statement.actor.account.name'] = groupname;
                    break;
            }
            */
      if (typeof actor != "undefined") {
        //actor.account.homePage = xerteurl + xertelo;
        q["agent"] = JSON.stringify(actor);
      }
    }

    /*
        q['statement.object.id'] = url;
        q['statement.verb.id'] = 'http://adlnet.gov/expapi/verbs/scored';
         */
    q["activity"] = url;
    if (type == "grouping" || type == "groupings" || type == "opinionclasses") {
      q["related_activities"] = true;
    }
    q["verb"] = verb;
    if (group != "") {
      q["group"] = group;
    }
    if (filter_context_id) {
      q["lti_context_id"] = (typeof lti_context_id != "undefined" ? lti_context_id : "");
    }
    if (startDate != "") {
      var date = moment(startDate).toISOString();
      q["since"] = date;
    }
    if (endDate != "") {
      var date = moment(endDate).add(1, "days").toISOString();
      q["until"] = date;
    }
      let current_users = interaction.getAttribute("contextUsersFilter")
      if (current_users == 'true') {
          q["filter_current_users"] = current_users;
      } else {
          q["filter_current_users"] = 'false';
      }
      //debugger
    /*
        queryStatements(
            lrsEndpoint + '/api/connection/statement',
            'filter',
            q,
            interactionIndex,
            function(data, interactionIndex) {
                if (data.length > 0) {
                    url = data[0].object.id;
                    interaction = $(x_currentPageXML).children()[interactionIndex];
                    if (data.length >= 1 && filterOwnStatements(data).length >= 1) {
                        handler(data, interaction, url, type, interactionIndex);
                    }
                    else {
                        div = $(
                            '#' +
                            escapeUrl(url, type, interactionIndex)
                        );
                        div.append('No data found');
                    }
                }
            }
        );
        */
    XTGetStatements(q, false, function (data, search) {
      if (data.length > 0) {
        if (search != undefined && typeof search["activity"] != "undefined") {
          url = search["activity"];
        } else {
          url = data[0].object.id;
        }
        interaction = $(x_currentPageXML).children()[interactionIndex];
        if (
          data.length >= 1 &&
          (retrieveAll || filterOwnStatements(data, xertelo).length >= 1)
        ) {
          if (opinionClass != undefined && opinionClass != "") {
            // Just filter out the items with the following structure
            //"object": {
            //"definition": {
            //    "name": {
            //        "en": "VR(class=Docent)"
            //     }
            //   }
            //  }
            var statements = [];
            for (var i = 0; i < data.length; i++) {
              if (
                data[i].object.definition != undefined &&
                data[i].object.definition.name != undefined &&
                data[i].object.definition.name.en != undefined &&
                data[i].object.definition.name.en.indexOf("(class=") != -1
              ) {
                statements.push(data[i]);
              }
            }
            handler(
              statements,
              interaction,
              url,
              type,
              interactionIndex,
              fullWidth
            );
          } else if (type == "grouping") {
            // Filter out the itmes with the following structure
            // Also interactive level should be interactivity
            // context: {
            //   contextActivities: {
            //      grouping: [{
            //          id: baseUrl() + this.grouping.replace(/[\/ ]/g, "_"),
            //          objectType: "Activity"
            //      }]
            // }
            var statements = [];
            for (var i = 0; i < data.length; i++) {
              if (
                data[i].context != undefined &&
                data[i].context.extensions != undefined &&
                data[i].context.extensions[
                  "http://xerte.org.uk/learningObjectLevel"
                ] != undefined &&
                data[i].context.extensions[
                  "http://xerte.org.uk/learningObjectLevel"
                ] == "interactivity" &&
                data[i].context.contextActivities != undefined &&
                data[i].context.contextActivities.grouping != undefined &&
                data[i].context.contextActivities.grouping[0] != undefined &&
                data[i].context.contextActivities.grouping[0].id != undefined &&
                data[i].context.contextActivities.grouping[0].id.indexOf(
                  xertelabel
                ) != -1
              ) {
                statements.push(data[i]);
              }
            }
            handler(
              statements,
              interaction,
              url,
              type,
              interactionIndex,
              fullWidth
            );
          } else if (type == "groupings") {
            var statements = [];
            let groupingStatements = [];

            for (var i = 0; i < data.length; i++) {
              if (
                data[i].context != undefined &&
                data[i].context.extensions != undefined &&
                data[i].context.extensions[
                  "http://xerte.org.uk/learningObjectLevel"
                ] != undefined &&
                data[i].context.extensions[
                  "http://xerte.org.uk/learningObjectLevel"
                ] == "interactivity" &&
                data[i].context.contextActivities != undefined &&
                data[i].context.contextActivities.grouping != undefined &&
                data[i].context.contextActivities.grouping[0] != undefined &&
                data[i].context.contextActivities.grouping[0].id != undefined
              ) {
                statements.push(data[i]);
              }
            }
            let groups = [];
            statements.forEach((x) => groups.push(getGroupingLabel(x)));
            let uniqueGroups = groups.filter((v, i, a) => a.indexOf(v) === i);

            for (let uniqueGroup in uniqueGroups) {
              var statementsGroup = [];
              xertelabel = uniqueGroups[uniqueGroup].replace(/ /g, "_");
              for (var i = 0; i < statements.length; i++) {
                if (
                  statements[
                    i
                  ].context.contextActivities.grouping[0].id.indexOf(
                    xertelabel
                  ) != -1
                ) {
                  statementsGroup.push(statements[i]);
                }
              }
              groupingStatements = groupingStatements.concat(
                handler(statementsGroup)
              );
            }
            let uniqueStatements = [];
            let visitedGroups = [];
            if (adaptiveContent.dashboardMode == "true") {
              uniqueStatements = groupingStatements;
            } else {
              for (let groupingStatement in groupingStatements) {
                let group = getGroupingLabel(
                  groupingStatements[groupingStatement]
                );
                if (!visitedGroups.includes(group)) {
                  uniqueStatements.push(groupingStatements[groupingStatement]);
                  visitedGroups.push(group);
                }
              }
            }
            adaptiveContent.drawScore(
              uniqueStatements.reverse(),
              interaction,
              url,
              type,
              interactionIndex,
              fullWidth
            );
          } else if (type == "opinionclasses") {
            var statements = [];
            let groupingStatements = [];

            for (var i = 0; i < data.length; i++) {
              if (
                  data[i].context != undefined &&
                  data[i].context.extensions != undefined &&
                  data[i].context.extensions["http://xerte.org.uk/learningObjectLevel"] != undefined &&
                  data[i].context.extensions["http://xerte.org.uk/learningObjectLevel"] == "interactivity" &&
                  data[i].context.extensions["http://xerte.org.uk/opinionClass"] != undefined &&
                  data[i].context.contextActivities != undefined &&
                  data[i].object.id.indexOf(url + '/' + xertelabel) != -1
              ) {
                statements.push(data[i]);
              }
            }
            let groups = [];
            statements.forEach((x) =>
              groups.push(
                x.context.extensions["http://xerte.org.uk/opinionClass"]
              )
            );
            let uniqueGroups = groups.filter((v, i, a) => a.indexOf(v) === i);
            for (let uniqueGroup in uniqueGroups) {
              var statementsGroup = [];
              xertelabel = uniqueGroups[uniqueGroup].replace(/ /g, "_");
              for (var i = 0; i < statements.length; i++) {
                if (
                  statements[i].context.extensions[
                    "http://xerte.org.uk/opinionClass"
                  ] == xertelabel ||
                  statements[i].context.extensions[
                    "http://xerte.org.uk/opinionClass"
                  ] == uniqueGroups[uniqueGroup]
                ) {
                  statementsGroup.push(statements[i]);
                }
              }
              if (x_currentPageXML.getAttribute("displayMode") !== 'Listed') {
                groupingStatements = groupingStatements.concat(
                  handler(statementsGroup)
                );
              } else {
                groupingStatements = groupingStatements.concat(
                  adaptiveContent.drawGroupedScores(statementsGroup)
                );
              }
            }
            if (x_currentPageXML.getAttribute("displayMode") === 'Listed') {
              handler(groupingStatements, interaction, url, type, interactionIndex, fullWidth)
            }
            let uniqueStatements = [];
            let visitedGroups = [];
            if (adaptiveContent.dashboardMode == "true") {
              uniqueStatements = groupingStatements;
            } else {
              for (let groupingStatement in groupingStatements) {
                let group =
                  groupingStatements[groupingStatement].context.extensions[
                    "http://xerte.org.uk/opinionClass"
                  ];
                if (!visitedGroups.includes(group)) {
                  uniqueStatements.push(groupingStatements[groupingStatement]);
                  visitedGroups.push(group);
                }
              }
            }
            adaptiveContent.drawScore(
              uniqueStatements.reverse(),
              interaction,
              url,
              type,
              interactionIndex,
              fullWidth
            );
          } else {
            handler(data, interaction, url, type, interactionIndex, fullWidth);
          }
        } else {
          div = $("#" + escapeUrl(url, type, interactionIndex));
          div.append("No data found");
        }
      } else {
        handler(data, interaction, url, type, interactionIndex, fullWidth);
      }
    });
  }

  // pageChanged & sizeChanged functions are needed in every model file
  // other functions for model should also be in here to avoid conflicts.
  var adaptiveContent = new (function () {
    var xerteurl = "";
    var xertelo = "";
    var xertelabel = "";
    var xertegrouping = "";
    var name = "";
    var interactionType = "";
    var opinionClass = "";
    var url = "";
    var divUrl = "";
    var group = "";
    var filter_context_id = false;
    var dashboardMode = "false";

    this.loadJS = function () {
      function addScript(url) {
       var script = document.createElement('script');
       script.type = 'application/javascript';
       script.src = url;
       document.head.appendChild(script);
     }
     addScript('https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js');
      if (numLoaded < 6) {
        var fileToLoad;
        if (numLoaded == 0) {
          fileToLoad = x_templateLocation + "common_html5/js/chart.min.js";
        } else if (numLoaded == 1) {
        /*
                else if (numLoaded == 1) {
                    fileToLoad = 'common_html5/js/xapidashboard/dist/xapidashboard.min.js';
                }
                */
          fileToLoad = "modules/xerte/xAPI/xapicollection.min.js";
        } else if (numLoaded == 2) {
          fileToLoad =
            x_templateLocation + "common_html5/js/moment-with-locales.min.js";
        } else if (numLoaded == 3) {
          fileToLoad = x_templateLocation + "common_html5/js/apexcharts.min.js";
        } else if (numLoaded == 4) {
          fileToLoad = x_templateLocation + "common_html5/js/jsPDF/jspdf.min.js";
        } else if (numLoaded == 5) {
            fileToLoad = x_templateLocation + "common_html5/js/chartjs-adapter-moment.js";
        }

        $.getScript(fileToLoad)
          .done(function (script, textStatus) {
            numLoaded++;
            adaptiveContent.loadJS();
          })
          .fail(function (jqxhr, settings, exception) {
            console.log("Failed to load chart scripts");
          });
      } else {
        // All files have loaded

        // Make sure config is correct
        /*
                var conf = {
                    "endpoint": lrsEndpoint + '/',
                    "user": lrsUsername,
                    "password": lrsPassword,
                    "strictCallbacks": true
                };

                ADL.XAPIWrapper.changeConfig(conf);
                ADL.XAPIWrapper.log.debug = true;
                */

        var displayMode = x_currentPageXML.getAttribute("displayMode");
        if (displayMode == "Listed") {
          this.setUpListed();
        } else {
          this.setUpUnlisted();
        }
      }
    };

    // Function called every time the page is viewed after it has initially loaded.
    this.pageChanged = function () {
      $("#adaptiveContentMain").html("");
      this.init();
    };

    // Function called every time the size of the LO is changed.
    this.sizeChanged = function () {
      var width = $x_pageHolder.width();
      var height = $x_pageHolder.height();
      if (width > height) {
        $("#diagram").width(height * 0.9);
        $("#diagram").height(height * 0.9);
        textSize = (width - height) / 10;
      } else {
        $("#diagram").width(width * 0.9);
        $("#diagram").height(width * 0.9);
        textSize = (height - width) / 10;
      }

      if (textSize > 20) {
        textSize = 20;
      } else if (textSize < 12) {
        textSize = 12;
      }
      var displayMode = x_currentPageXML.getAttribute("displayMode");
      if (displayMode == "Listed") {
        var pageDiv = $("#x_pageDiv");
        pageDiv.height(height - (pageDiv.innerHeight() - pageDiv.height()));
        $("#adaptiveContentMain .splitScreen .left").height(pageDiv.height());
        $("#adaptiveContentMain .splitScreen .right").height(pageDiv.height());
      }
    };

    this.init = function () {
      //debugger;
      var loadFiles = true;
      for (var i = 0; i < x_pageInfo.length; i++) {
        if (
          i != x_currentPage &&
          x_pageInfo[i].type == x_pageInfo[x_currentPage].type &&
          x_pageInfo[i].built != false
        ) {
          // a page of this type has already been loaded - don't reload popcorn files
          loadFiles = false;
          break;
        }
      }
      this.dashboardMode = x_currentPageXML.getAttribute("dashboardMode");
      if (this.dashboardMode == undefined) {
        this.dashboardMode = "false";
      }
      if (loadFiles == true) {
        numLoaded = 0;
        this.loadJS();
      } else {
        var displayMode = x_currentPageXML.getAttribute("displayMode");
        if (displayMode == "Listed") {
          this.setUpListed();
        } else {
          this.setUpUnlisted();
        }
      }
    };

    this.drawBlock = function (
      location,
      interaction,
      interactionIndex,
      fullWidth
    ) {
      xerteurl = interaction.getAttribute("xerteurl");
      xertelo = interaction.getAttribute("xertelo");
      xertelabel = interaction.getAttribute("label");
      xertegrouping = interaction.getAttribute("grouping");
      name = interaction.getAttribute("name");
      interactionType = interaction.getAttribute("interactionType");
      opinionClass = interaction.getAttribute("opinionClass");
      if ((interactionType == "open" || interactionType == "answer") && xertelabel.indexOf("/") == -1) {
        xertelabel += "/" + xertelabel;
      }

      var scoreLabelText = interaction.getAttribute("scoreText");
      if (scoreLabelText == undefined) {
        scoreLabelText = "Your score is {0}";
      }

      var answerLabelText = interaction.getAttribute("answerText");
      if (answerLabelText == undefined) {
        answerLabelText = "Your answer is {0}";
      }

      var nrParticipantsText = interaction.getAttribute("NrParticipantsText");
      if (nrParticipantsText == undefined) {
        nrParticipantsText = "The number of participants is {0}";
      }

      if (interactionType != "grouping" && interactionType != "opinionclasses") {
        url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
      } else {
        url = getUrl(xerteurl, xertelo);
      }
      var $this = this;
      divUrl = escapeUrl(url, interactionType, interactionIndex);
      name = interaction.getAttribute("name");
      var score = interaction.score;
      var div = $("<div>")
        .attr("id", divUrl)
        .attr("data-index", interactionIndex)
        .addClass("panel")
        .addClass("html2pdf__page-break");

      // Include data uri of loading gif as this loads faster than the image
      const loadinggif = "data:image/gif;base64,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";
      let specificationDiv = "";
      if (interaction.getAttribute("showSpecification") == "true") {
        specificationDiv =
          '<div class="specification">' +
          `<h4>${interaction.getAttribute("SpecificationText")}</h4>` +
          '<ul class="question-list"></ul>' +
          "</div>";
      }
      let adviceHeader = "";
      if (interaction.children.length !== 0
          && adaptiveContent.dashboardMode !== 'true'
          && interaction.getAttribute("AdviceText") != null) {
        adviceHeader = `<h4>${interaction.getAttribute("AdviceText")}</h4>`;
      }

      let introductionText = interaction.getAttribute("introduction");
      if (introductionText == undefined) {
        introductionText = "";
      }
      let summaryText = interaction.getAttribute("SummaryText");
      if (summaryText == undefined) {
        summaryText = "";
      }
      if (
        interaction.getAttribute("showNrOfQuestions") != "true" &&
        interaction.getAttribute("showNrOfCorrectQuestions") != "true"
      ) {
        // Do not show Summry heading
        summaryText = "";
      } else {
        summaryText = `<h1><p>${summaryText}</p></h1>`;
      }
      let summaryDiv = ''
      if (
        summaryText !== '' ||
          specificationDiv !== '' ||
          adviceHeader !== '' ||
          interaction.getAttribute("showNrOfParticipants") === "true" ||
          interaction.getAttribute("showScore") === "true" ||
          interactionType === "open"
        ) {
        summaryDiv = '<div class="summary">' +
          summaryText +
          '<div class="score">' +
          '<div class="stats-div"><ul class="stats"></ul></div>' +
          specificationDiv +

          "</div>" +
          "</div>";
      }
      //if (summaryText != "" || adviceHeader != "" || interactionType == 'grouping') {
      let graphContainer = '<div class="graph-container"></div>';
      if (summaryDiv == '') {
          graphContainer = '<div class="graph-container graph-container-wide"></div>';
        }

      let adviceDiv = '<div class="advice">' +
          adviceHeader +
          '<div class="message"></div>' +
          "</div>";
      div.html(
        `<h2><p>${name}</p></h2>` +
          `<div class='introduction'>${introductionText}</div>` +
          '<div class="interaction_load" id="interaction_load_' + interactionIndex + '"><img class="loading-gif" src="' + loadinggif + '"/></div>' +
          '<div class="summary-container">' +
          summaryDiv +
          graphContainer +
          "</div>" +
          adviceDiv
      );
      //}
      //else
      //{
      //    div.html(
      //        `<h2><p>${name}</p></h2>` +
      //        `<div class='introduction'>${introductionText}</div>` +
      //        '<div class="summary-container">' +
      //        '<div class="graph-container"></div>' +
      //        '</div>'
      //    );
      //}

      $(location).append(div);

      /*
            $('#adaptiveContent').append(
                "<div id='" + divUrl + "' data-index='" + interactionIndex + "'></div>",
            );

            $('#adaptiveContent #' + divUrl).append(
                '<h2>' +
                name +
                "</h2><div class='introduction'>" +
                interaction.getAttribute('introduction') +
                "</div><div class='score'></div><div class='message'></div>",
            );
            */
      if (interactionType == "score") {
        var verb = "http://adlnet.gov/expapi/verbs/scored";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawScore(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          var statements = getStatements(
            xerteurl,
            xertelo,
            xertelabel,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawScore
          );
        }
      } else if (interactionType == "answer") {
        var verb = "http://adlnet.gov/expapi/verbs/answered";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawAnswer(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          var statements = getStatements(
            xerteurl,
            xertelo,
            xertelabel,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawAnswer
          );
        }
      } else if (interactionType == "opinion") {
        var verb = "http://adlnet.gov/expapi/verbs/scored";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawOpinion(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          var statements = getStatements(
            xerteurl,
            xertelo,
            xertelabel,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawOpinion
          );
        }
      } else if (interactionType == "open") {
        // check open question special options
        var verb = "http://adlnet.gov/expapi/verbs/scored";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawOpen(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          statements = getStatements(
            xerteurl,
            xertelo,
            xertelabel,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawOpen
          );
        }
      } else if (interactionType == "grouping") {
        // check open question special options
        var verb = "http://adlnet.gov/expapi/verbs/scored";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawGroupedScore(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          statements = getStatements(
            xerteurl,
            xertelo,
            xertegrouping,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawGroupedScore
          );
        }
      } else if (interactionType == "groupings") {
        // check open question special options
        var verb = "http://adlnet.gov/expapi/verbs/scored";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawGroupedScores(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          statements = getStatements(
            xerteurl,
            xertelo,
            xertegrouping,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawGroupedScores
          );
        }
      } else if (interactionType == "opinionclasses") {
        // check open question special options
        //debugger;
        var verb = "http://adlnet.gov/expapi/verbs/answered";
        if (interaction.data != null) {
          var url = getUrl(xerteurl, xertelo, xertelabel, opinionClass);
          this.drawScore(
            interaction.data,
            interaction,
            url,
            interactionType,
            interactionIndex,
            fullWidth
          );
        } else {
          statements = getStatements(
            xerteurl,
            xertelo,
            xertelabel,
            verb,
            opinionClass,
            interactionType,
            hasToRetrieveAll(interaction),
            interactionIndex,
            group,
            filter_context_id,
            fullWidth,
            this.drawGroupedScores
          );
        }
      }
    };

    this.drawScore = function (
      data,
      interaction,
      url,
      type,
      interactionIndex,
      fullWidth
    ) {
      // remove loader
      $("#interaction_load_" + interactionIndex).remove();
      let scoreLabelText = interaction.getAttribute("scoreText");
      if (scoreLabelText == null) {
        scoreLabelText = "Your score is {0}";
      }
      let nrParticipantsText = interaction.getAttribute("NrParticipantsText");
      if (nrParticipantsText == null) {
        nrParticipantsText = "The number of participants is {0}";
      }
      let NrQuestionsText = interaction.getAttribute("NrQuestionsText");
      if (NrQuestionsText == null) {
        NrQuestionsText = "Total number of questions {0}";
      }
      let NrCorrectQuestionsText = interaction.getAttribute(
        "NrCorrectQuestionsText"
      );
      if (NrCorrectQuestionsText == null) {
        NrCorrectQuestionsText = "Total correct {0}";
      }
      var CorrectText = interaction.getAttribute("CorrectText");
      if (CorrectText == undefined) {
        CorrectText = "Correct";
      }
      var IncorrectText = interaction.getAttribute("IncorrectText");
      if (IncorrectText == undefined) {
        IncorrectText = "Incorrect";
      }
      var xertelo = interaction.getAttribute("xertelo");
      var ownstatements = filterOwnStatements(data, xertelo);

      var graphAnswerType = interaction.getAttribute("graphAnswerType");
      if (graphAnswerType == undefined) {
          graphAnswerType = "all";
      }
      var statements = filterRelevantStatements(data, graphAnswerType);
      xerteurl = interaction.getAttribute("xerteurl");
      xertelabel = interaction.getAttribute("label");
      name = interaction.getAttribute("name");
      interactionType = interaction.getAttribute("interactionType");
      opinionClass = interaction.getAttribute("opinionClass");
      var nrbars = interaction.getAttribute("graphNrDataPoints");
      if (nrbars == undefined) {
        nrbars = 10;
      }
      var followBlock = interaction.getAttribute("graphFollowBlock");
      if (followBlock == undefined) {
          followBlock = false;
      }
      var graphFitInfoInBar = interaction.getAttribute("graphFitInfoInBar");
      if (graphFitInfoInBar == undefined) {
          graphFitInfoInBar = false;
      }
      var graphShowAvg = interaction.getAttribute("graphShowAvg");
      if (graphShowAvg == undefined) {
          graphShowAvg = false;
      }
      var graphShowAvgLine = interaction.getAttribute("graphShowAvgBar");
      if (graphShowAvgLine == undefined) {
          graphShowAvgLine = false;
      }

      var barName = [];
      var barNameValue = [];
      var barRange = [];
      var barColors = [
          "#FF6384",
          "#4BC0C0",
          "#FFCD56",
          "#C9CBCF",
          "#36A2EB",
          "#B284BE",
      ];
      for (let i = 0; i < interaction.children.length; i++) {
            if (interaction.childNodes[i].getAttribute("blockName") != null && interaction.childNodes[i].getAttribute("blockName") != "") {
                barName.push(interaction.childNodes[i].getAttribute("blockName"));
            }

            barNameValue.push(interaction.childNodes[i].getAttribute("conScoreBetween"));
          let tempstr = interaction.childNodes[i].getAttribute("conScoreBetween").split(",");
          barRange.push([parseInt(tempstr[0]), parseInt(tempstr[1])]);
          if (interaction.childNodes[i].getAttribute("blockColor") != null && interaction.childNodes[i].getAttribute("blockColor") != "") {
              barColors[i] = interaction.childNodes[i].getAttribute("blockColor").replace("0x","#");
          }
      }

      if (statements.length > 0) {
        if (statements[0].extensions !== undefined) {
          let numQuestions =
            statements[0].extensions[
              "http://xerte.org.uk/grouping/num-grouped-statements"
            ];
          if (numQuestions !== undefined) {
            if (interaction.getAttribute("showNrOfQuestions") == "true") {
              var txt = NrQuestionsText;
              txt = txt.replace(/\{0\}/, numQuestions);
              $(
                `#${escapeUrl(url, type, interactionIndex)} .score .stats`
              ).append(`<li>${txt}</li>`);
            }
          }
        }

        if (statements[0].result.extensions !== undefined) {
          let correctQuestionScores;
          if (adaptiveContent.dashboardMode == "true") {
            correctQuestionScores = {};
            for (let statement in statements) {
              let res =
                statements[statement].result.extensions[
                  "http://xerte.org.uk/result/grouping/scores"
                ];
              for (let singleRes in res) {
                if (!(res[singleRes][0][0] in correctQuestionScores)) {
                  correctQuestionScores[res[singleRes][0][0]] = [
                    res[singleRes][1],
                  ];
                } else {
                  correctQuestionScores[res[singleRes][0][0]].push(
                    res[singleRes][1]
                  );
                }
              }
            }
          } else {
            correctQuestionScores =
              statements[0].result.extensions[
                "http://xerte.org.uk/result/grouping/scores"
              ];
          }
          if (correctQuestionScores !== undefined) {
            if (
              interaction.getAttribute("showNrOfCorrectQuestions") == "true"
            ) {
              let numCorrectQuestions = 0;
              for (let i = 0; i < correctQuestionScores.length; i++) {
                if (correctQuestionScores[i][1] === 100) {
                  numCorrectQuestions += 1;
                }
              }
              var txt = NrCorrectQuestionsText;
              txt = txt.replace(/\{0\}/, numCorrectQuestions);
              $(
                `#${escapeUrl(url, type, interactionIndex)} .score .stats`
              ).append(`<li>${txt}</li>`);
            }
            if (interaction.getAttribute("showSpecification") == "true") {
              if (adaptiveContent.dashboardMode == "true") {
                const average = (list) =>
                  list.reduce((prev, curr) => prev + curr) / list.length;
                for (let questionScore in correctQuestionScores) {
                  txt = `${questionScore}: ${average(
                    correctQuestionScores[questionScore]
                  ).toFixed(1)}`;
                  $(
                    `#${escapeUrl(
                      url,
                      type,
                      interactionIndex
                    )} .specification .question-list`
                  ).append(`<li>${txt}%</li>`);
                }
              } else {
                for (let i = 0; i < correctQuestionScores.length; i++) {
                  txt = `${correctQuestionScores[i][0]}: ${
                    correctQuestionScores[i][1] === 100
                      ? CorrectText
                      : IncorrectText
                  }`;
                  $(
                    `#${escapeUrl(
                      url,
                      type,
                      interactionIndex
                    )} .specification .question-list`
                  ).append(`<li>${txt}</li>`);
                }
              }
            }
          }
        }

        if (
          interaction.getAttribute("interactionType") === "groupings" ||
          interaction.getAttribute("interactionType") === "opinionclasses"
        ) {
          let visitedGroups = {};
          for (let statement in statements) {
            let group =
              statements[statement].context.contextActivities.grouping[0]
                .definition.name["en-US"];
            if (!(group in visitedGroups)) {
              visitedGroups[group] = [statements[statement].result.score.raw];
            } else {
              visitedGroups[group].push(statements[statement].result.score.raw);
            }
          }
          const sortObject = (obj) =>
            Object.keys(obj)
              .sort()
              .reduce((res, key) => ((res[key] = obj[key]), res), {});
          visitedGroups = sortObject(visitedGroups);
          const average = (list) =>
            list.reduce((prev, curr) => prev + curr) / list.length;
          for (group in visitedGroups) {
            score = average(visitedGroups[group]);
            if (interaction.getAttribute("showScore") == "true") {
              var txt = group;
              txt = `${txt}: ${Math.round(score * 10) / 10}`;
              $(
                "#" + escapeUrl(url, type, interactionIndex) + " .score .stats"
              ).append("<li>" + txt + "%</li>");
            }
          }
        } else {
          score = 0;

          if (adaptiveContent.dashboardMode == "true") {
            for (let statement in statements) {
              score += statements[statement].result.score.raw;
            }
            score = score / statements.length;
          } else {
            // If a graph is also shown, statements might contain statements of other people, select the last one of the current user
            if (ownstatements.length > 0) {
              score = ownstatements[0].result.score.raw;
            }
            else
            {
                score = 0;
            }
          }
          if (interaction.getAttribute("showScore") == "true") {
            var txt = scoreLabelText;
            txt = txt.replace(/\{0\}/, Math.round(score * 10) / 10);
            $(
              "#" + escapeUrl(url, type, interactionIndex) + " .score .stats"
            ).append("<li>" + txt + "%</li>");
          }
        }
        if (adaptiveContent.dashboardMode == "false") {
          for (
            blockIndex = 0;
            blockIndex < interaction.children.length;
            blockIndex++
          ) {
            block = interaction.children[blockIndex];
            scoreRange = block.getAttribute("conScoreBetween");
            let showOtherBlockContent = interaction.getAttribute("showOtherBlockContent");
              if (showOtherBlockContent == undefined){
                  showOtherBlockContent = 'false'
              }
            range = scoreRange.split(",");
            if (range.length == 2) {
              lowerBound = range[0];
              upperBound = range[1];
              // if (score >= lowerBound && score <= upperBound) {
              //   $(
              //     "#" + escapeUrl(url, type, interactionIndex) + " .message"
              //   ).html(block.getAttribute("adaptiveContent"));
              // }
                let blockName = block.getAttribute("blockName")
                if (blockName == undefined){
                    blockName = block.getAttribute("conScoreBetween")
                }

                if (score >= lowerBound && score <= upperBound) {
                  $("#" + escapeUrl(url, type, interactionIndex) + " .message").prepend('<button type="button" class="feedback">' + blockName + '</button>\n' +
                      '<div class="collapsibleContent block' + blockIndex + '" style="display: block; margin-bottom: 25px">' + block.getAttribute("adaptiveContent") + '</div>');
                } else if (showOtherBlockContent == 'true'){
                    $("#" + escapeUrl(url, type, interactionIndex) + " .message").append('<button type="button" class="collapsible">' + blockName + '</button>\n' +
                         '<div class="collapsibleContent block' + blockIndex + '">' + block.getAttribute("adaptiveContent") + '</div>');

                    $("#" + escapeUrl(url, type, interactionIndex) + " .message").children("button").slice(-1).on('click', function () {
                        this.classList.toggle("active");
                        var content = this.nextElementSibling;
                        if (content.style.display === "block") {
                            content.style.display = "none";
                        } else {
                            content.style.display = "block";
                        }
                    });
                }
            }
          }
        }
      }
      if (interaction.getAttribute("showNrOfParticipants") == "true") {
        let sessionIds = statements.map(
          (x) => x.context.extensions["http://xerte.org.uk/sessionId"]
        );
        let uniqueSessions = sessionIds.filter(
          (e, i) => sessionIds.indexOf(e) === i
        );
        var txt = nrParticipantsText;
        txt = txt.replace(/\{0\}/, uniqueSessions.length);
        $(
          "#" + escapeUrl(url, type, interactionIndex) + " .score .stats"
        ).append("<li>" + txt + "</li>");
      }
      if (interaction.getAttribute("graph") === "true") {
        var showExplanation = interaction.getAttribute("showExplanation");
        var Explanation = interaction.getAttribute("graphExplanation");
        var ExplanationPanelWidth = interaction.getAttribute(
          "graphExplanationPanelWidth"
        );
        if (showExplanation == undefined) {
          showExplanation = "false";
        }
        if (Explanation == undefined) {
          Explanation = "";
        }
        if (ExplanationPanelWidth == undefined) {
          ExplanationPanelWidth = "40%";
        }
        div = $(
          "#" + escapeUrl(url, type, interactionIndex) + " .graph-container"
        );
        if (
          interaction.getAttribute("graphType") == "pie_marks" ||
          interaction.getAttribute("graphType") == "bar_comb_marks" ||
          interaction.getAttribute("graphType") == "polar_area_per_category" ||
             interaction.getAttribute("graphType") == "bar_marks" ||
              interaction.getAttribute("graphType") == "bar_marks_score" ||
            interaction.getAttribute("graphType") == "bar_answers" ||
            interaction.getAttribute("graphType") == "line_average_marks" ||
            interaction.getAttribute("graphType") == "line_own_marks"
        ) {
          div.append(
            "<div class='graph'><canvas id='" +
              escapeUrl(url, type, interactionIndex) +
              "-graph'></canvas></div>"
          );
        } else if (
          interaction.getAttribute("graphType") == "hor_bar_comb_marks" ||
          interaction.getAttribute("graphType") == "hor_bar_comb_marks_avg"
        ) {
          div.append(
            "<div class='graph'><div id='" +
              escapeUrl(url, type, interactionIndex) +
              "-graph'></div></div>"
          );
        } else {
          div.append(
            "<div class='graph'><svg id='" +
              escapeUrl(url, type, interactionIndex) +
              "-graph' width='700' height='300' viewBox='0 0 700 300'></svg></div>"
          );

          //document.getElementById(escapeUrl(url, type, interactionIndex) + "-graph").setAttribute("width", '700');
          //document.getElementById(escapeUrl(url, type, interactionIndex) + "-graph").setAttribute("height", '300');
          //document.getElementById(escapeUrl(url, type, interactionIndex) + "-graph").setAttribute("preserveAspectRatio", "xMinYMin meet");
          //document.getElementById(escapeUrl(url, type, interactionIndex) + "-graph").setAttribute("viewBox", "0 0 700 300");
          //document.getElementById(escapeUrl(url, type, interactionIndex) + "-graph").setAttribute('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
        //.attr('preserveAspectRatio','xMinYMin')
        }
        if (showExplanation == "true" && Explanation != "") {
          var textSize = Math.round(interaction.getAttribute("labelFontSize"));
          if (textSize == null || textSize == 0) textSize = 12;
          div.append(
            '<div class="panel legend" style="width: ' + ExplanationPanelWidth + '; font-size: ' + textSize + 'px;">' +
              Explanation +
              "</div>"
          );
        }
        if (interaction.getAttribute("graphType") == "bar_answers") {
            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
            var xAxisLabelBarAnswers = interaction.getAttribute(
              "xAxisLabelBarAnswers"
            );
            var yAxisLabelBarAnswers = interaction.getAttribute(
              "yAxisLabelBarAnswers"
            );
            if (xAxisLabelBarAnswers == undefined)
              xAxisLabelBarAnswers = "Answers given";
            if (yAxisLabelBarAnswers == undefined)
              yAxisLabelBarAnswers = "Number of answers";

            //get labels and #
            let labels = {};
            let barBorderColor = barColors.slice();

            for (let i = 0; i < statements.length; i++) {
                if (!labels.hasOwnProperty(statements[i].result.response)) {
                    labels[statements[i].result.response] = 1;
                } else {
                    labels[statements[i].result.response] += 1;
                }
                if (statements[i] == ownstatements[0]) {
                    barBorderColor[Object.keys(labels).indexOf(statements[i].result.response)] = "#484848";
                }
            }

            Object.keys(labels).forEach(function(key){ labels[key] = labels[key]/statements.length*100 });

            let bardata = {
                labels: Object.keys(labels),
                datasets: [
                    {
                        type: "bar",
                        label: "data",
                        data: Object.values(labels),
                        backgroundColor: barColors,
                        borderColor: barBorderColor,
                        borderWidth: 5,
                        yID: "id1",
                    },
                ],
            };

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelBarAnswers,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        x: {
                            title: {
                                display: true,
                                text: xAxisLabelBarAnswers,
                                beginAtZero: true,
                            },
                            ticks: {
                                autoSkip: false,
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

          // var dash = new ADL.XAPIDashboard();
          // dash.addStatements(data);

          // var xAxisLabelBarAnswers = interaction.getAttribute(
          //   "xAxisLabelBarAnswers"
          // );
          // var yAxisLabelBarAnswers = interaction.getAttribute(
          //   "yAxisLabelBarAnswers"
          // );
          // if (xAxisLabelBarAnswers == undefined)
          //   xAxisLabelBarAnswers = "Answers given";
          // if (yAxisLabelBarAnswers == undefined)
          //   yAxisLabelBarAnswers = "Number of answers";

          // var chart = dash.createBarChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "result.response",
          //   aggregate: ADL.count(),
          //   post: function (d) {
          //     d.contents.map(function (el) {
          //       el.out *= (1 / data.length) * 100;
          //     });
          //   },
          //   customize: function (chart) {
          //     chart.xAxis.rotateLabels(45).axisLabel(xAxisLabelBarAnswers);
          //     chart.yDomain([0, 100]);
          //     chart.yAxis.axisLabel(yAxisLabelBarAnswers);
          //     if (fullWidth) {
          //       chart.width(700);
          //     } else {
          //       chart.width(450);
          //     }
          //     chart.height(300);
          //   },
          // });
          // chart.draw();
        } else if (interaction.getAttribute("graphType") == "bar_marks") {
            let xAxisLabelBarMarks =
                interaction.getAttribute("xAxisLabelBarMarks");
            let yAxisLabelBarMarks =
                interaction.getAttribute("yAxisLabelBarMarks");
            let y2AxisLabelBarMarks =
                interaction.getAttribute("y2AxisLabelBarMarks");
            let avgScoreLabelBarMarks =
                interaction.getAttribute("avgScoreLabelBarMarks");
            let ownScoreLabelBarMarks =
                interaction.getAttribute("ownScoreLabelBarMarks");
            let groupUserLabel = interaction.getAttribute("groupUserLabel");
            let groupScore = interaction.getAttribute("groupScore");
            let userScore = interaction.getAttribute("userScore");
            if (xAxisLabelBarMarks == undefined)
                xAxisLabelBarMarks = "Score Range [%]";
            if (yAxisLabelBarMarks == undefined)
                yAxisLabelBarMarks = "% of Group";
            if (y2AxisLabelBarMarks == undefined)
                y2AxisLabelBarMarks = "Score [%]";
            if (avgScoreLabelBarMarks == undefined)
                avgScoreLabelBarMarks = "Average in this group";
            if (ownScoreLabelBarMarks == undefined)
                ownScoreLabelBarMarks = "Your score";
            if (groupUserLabel == undefined)
                groupUserLabel = "participants in group";
            if (groupScore == undefined){
                groupScore = "avg score";
            }
            if (userScore == undefined){
                userScore = "User score";
            }

            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";

            //create labels
            let labels = [];
            if (followBlock == "true") {
                for (let i = 0; i < barNameValue.length; i++) {
                    labels.push([barNameValue[i].replace(",", "-")])
                }
            } else {
                for (let i = 0; i < 100; i = i + Math.ceil(100 / nrbars)) {
                    let temp = ""
                    labels.push([temp + i + "-" + (i + Math.ceil(100 / nrbars))])
                }
            }
            for (let i = 0; i < barName.length; i++) {
                labels[i] = [barName[i]];
            }

            //calculate to what group the answers belong
            let barSizeData = new Array(barRange.length).fill(0);
            let groupAvg = new Array(barRange.length).fill(0);
            let tempTotal = 0;
            let ownUserScore = [];
            let barBorderColor = barColors.slice();
            let barScoreColor = new Array(barRange.length);
            let barOwnScore = barSizeData.slice();

            if (followBlock == "true") {
                for (let i = 0; i < statements.length; i++) {
                    //check what bar contains 100 (might not be the last)
                    if (statements[i].result.score.raw == 100) {
                        for (let k = 0; k < barRange.length; k++) {
                            if (barRange[k][1] == 100) {
                                barSizeData[k] += 1;
                                groupAvg[k] += statements[i].result.score.raw;
                                tempTotal += 1;
                                if (statements[i] == ownstatements[0]) {
                                    barBorderColor[k] = "#484848";
                                    barScoreColor[k] = "#000000";
                                    barOwnScore[k] = [score - 1, score];
                                    ownUserScore = [k, score];
                                }
                            }
                        }
                    } else {
                        for (let j = 0; j < barRange.length; j++) {
                            if (statements[i].result.score.raw >= barRange[j][0] && statements[i].result.score.raw < barRange[j][1]) {
                                barSizeData[j] += 1;
                                groupAvg[j] += statements[i].result.score.raw;
                                tempTotal += 1;
                                if (statements[i] == ownstatements[0]) {
                                    barBorderColor[j] = "#484848";
                                    barScoreColor[j] = "#000000";
                                    barOwnScore[j] = [score - 1, score];
                                    ownUserScore = [j, score];
                                }
                            }
                        }
                    }
                }
            } else {
                //as we are not following the block settings we should allocate more room for bars
                barSizeData = new Array(Number(nrbars)).fill(0);
                groupAvg = barSizeData.slice();
                barOwnScore = barSizeData.slice();
                for (let i = 0; i < statements.length; i++) {
                    let ind = Math.floor(statements[i].result.score.raw / Math.ceil(100 / nrbars));
                    barSizeData[ind] += 1;
                    groupAvg[ind] += statements[i].result.score.raw;
                    tempTotal += 1;
                    if (statements[i] == ownstatements[0]) {
                        barBorderColor[ind] = "#484848";
                        barScoreColor[ind] = "#000000";
                        barOwnScore[ind] = [score - 1, score];
                        ownUserScore = [ind, score];
                    }
                }
            }

            //add block avg to labels
            if (graphShowAvg == "true") {
                for (let i = 0; i < labels.length; i++) {
                    labels[i].push(groupScore + ": " + (groupAvg[i]/ Math.max(barSizeData[i], 1)).toFixed(2))
                    if (i == ownUserScore[0]) {
                        labels[i].push(userScore + ": " + ownUserScore[1])
                    }
                }
            }

            //add # users per group
            if (interaction.getAttribute("showNrOfParticipants") == "true") {
                for (let i = 0; i < labels.length; i++) {
                    labels[i].push(barSizeData[i] + " " + groupUserLabel);
                }
            }
            //convert to percentage and avg
            for (let i = 0; i < barSizeData.length; i++) {
                if (barSizeData[i] !== 0) {
                    groupAvg[i] = [groupAvg[i] / barSizeData[i] - 1, groupAvg[i] / Math.max(barSizeData[i], 1)];
                } else {
                    groupAvg[i] = [0, 0];
                }
                if (tempTotal !== 0) {
                    barSizeData[i] = barSizeData[i] / tempTotal * 100;
                } else {
                    barSizeData[i] = 0;
                }
            }


            //scale to fit in bar
            if (graphFitInfoInBar == "true") {
                for (let i = 0; i < barSizeData.length; i++) {
                    if (followBlock == "true") {
                        //use plus one to prevent out of bounds
                        groupAvg[i][0] = ((groupAvg[i][1] - barRange[i][0]) / (barRange[i][1] - barRange[i][0])) * barSizeData[i];
                        groupAvg[i][1] = groupAvg[i][0] + 1;
                        if (barOwnScore[i] !== 0) {
                            barOwnScore[i][0] = ((barOwnScore[i][1] - barRange[i][0]) / (barRange[i][1] - barRange[i][0])) * barSizeData[i];
                            barOwnScore[i][1] = barOwnScore[i][0] + 1;
                        }
                    } else {

                        let step = Math.ceil(100 / nrbars);
                        groupAvg[i][0] = ((groupAvg[i][1] - i * step) / ((i + 1) * step - i * step)) * barSizeData[i];
                        groupAvg[i][1] = groupAvg[i][0] + 1;
                        if (barOwnScore[i] !== 0) {
                            barOwnScore[i][0] = ((barOwnScore[i][1] - i * step) / ((i + 1) * step - i * step)) * barSizeData[i];
                            barOwnScore[i][1] = barOwnScore[i][0] + 1;
                        }
                    }
                }
            }

            let bardata = {};
            if (graphShowAvgLine == "true" && graphShowAvg == "true") {
                bardata = {
                    labels: labels,
                    datasets: [
                        {
                            type: "bar",
                            label: ownScoreLabelBarMarks,
                            data: barOwnScore,
                            backgroundColor: barScoreColor,
                            yID: "id1",
                        },
                        {
                            type: "bar",
                            label: avgScoreLabelBarMarks,
                            data: groupAvg,
                            backgroundColor: "#8f4e4e",
                            yID: "id1",
                        },
                        {
                            type: "bar",
                            label: "My First dataset",
                            data: barSizeData,
                            backgroundColor: barColors,
                            borderWidth: 5,
                            borderColor: barBorderColor,
                            yID: "id1",
                        },
                    ],
                };
            } else {
                bardata = {
                    labels: labels,
                    datasets: [
                        {
                            type: "bar",
                            label: "My First dataset",
                            data: barSizeData,
                            backgroundColor: barColors,
                            borderWidth: 5,
                            borderColor: barBorderColor,
                            yID: "id1",
                        },
                    ],
                };
            }

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    events: [],
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelBarMarks,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        y2: {
                            display: (!graphFitInfoInBar),
                            title: {
                                display: true,
                                text: y2AxisLabelBarMarks,
                                beginAtZero: true,
                            },
                            position: "right",
                            min: 0,
                            max: 100,
                            id: "id2",
                        },
                        x: {
                            title: {
                                display: !(barName.length > 0),
                                text: xAxisLabelBarMarks
                            },
                            stacked: true,
                            ticks: {
                                autoSkip: false,
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                },
            });


            //   var dash = new ADL.XAPIDashboard();
            //   dash.addStatements(data);
            //   data.map(function (x) {
            //       x.result.score.raw;
            //       return x;
            //   });
            //
            // var chart = dash.createBarChart({
            //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
            //   groupBy: "result.score.raw",
            //   aggregate: ADL.count(),
            //   range: {
            //    start: 0.0,
            //    end: 100.0,
            //   increment: Math.ceil(100 / nrbars),
            //   },
            //   post: function (d) {
            //     d.contents.map(function (el) {
            //       el.out *= (1 / data.length) * 100;
            //     });
            //   },
            //
            //   customize: function (chart) {
            //     chart.xAxis.rotateLabels(45).axisLabel(xAxisLabelBarMarks);
            //     chart.yAxis.axisLabel(yAxisLabelBarMarks);
            //     if (fullWidth) {
            //       chart.width(700);
            //     } else {
            //       chart.width(450);
            //     }
            //     chart.height(300);
            //     chart.yDomain([0, 100]);
            //   },
            // });
            // chart.draw();
        } else if (interaction.getAttribute("graphType") == "bar_marks_score") {

            let yAxisLabelBarScore =
                interaction.getAttribute("yAxisLabelBarScore");
            let groupUserLabel = interaction.getAttribute("groupUserLabel");
            let groupScore = interaction.getAttribute("groupScore");
            let userScore = interaction.getAttribute("userScore");
            if (yAxisLabelBarScore == undefined)
                yAxisLabelBarScore = "Average score of all attempts";
            if (groupUserLabel == undefined)
                groupUserLabel = "participants in level";
            if (groupScore == undefined){
                groupScore = "avg score";
            }
            if (userScore == undefined){
                userScore = "User score";
            }

            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
            //create labels
            let labels = [];
            if (followBlock == "true") {
                for (let i = 0; i < barNameValue.length; i++) {
                    labels.push([barNameValue[i].replace(",", "-")])
                }
            } else {
                for (let i = 0; i < 100; i = i + Math.ceil(100 / nrbars)) {
                    let temp = ""
                    labels.push([temp + i + "-" + (i + Math.ceil(100 / nrbars))])
                }
            }

            for (let i = 0; i < barName.length; i++) {
                    labels[i] = [barName[i]];
            }

            //calculate to what group the answers belong
            let barSizeData = new Array(barRange.length).fill(0);
            let barBorderColor = barColors.slice();
            let groupAvg = new Array(barRange.length).fill(0);
            let barOwnScore = barSizeData.slice();
            let ownScore,ownScoreIndex = 0;

            if (followBlock == 'true') {
                for (let i = 0; i < statements.length; i++) {
                    //check what bar contains 100 (might not be the last)
                    if (statements[i].result.score.raw == 100) {
                        for (let k = 0; k < barRange.length; k++) {
                            if (barRange[k][1] == 100) {
                                barSizeData[k] += 1;
                                groupAvg[k] += statements[i].result.score.raw;
                                if (statements[i] == ownstatements[0]) {
                                    barBorderColor[k] = "#484848";
                                    barOwnScore[k] = score;
                                    ownScore = score;
                                    ownScoreIndex = k;
                                }
                            }
                        }
                    } else {
                        for (let j = 0; j < barRange.length; j++) {
                            if (statements[i].result.score.raw >= barRange[j][0] && statements[i].result.score.raw < barRange[j][1]) {
                                barSizeData[j] += 1;
                                groupAvg[j] += statements[i].result.score.raw;

                                if (statements[i] == ownstatements[0]) {
                                    barBorderColor[j] = "#484848";
                                    barOwnScore[j] = score;
                                    ownScore = score;
                                    ownScoreIndex = j;
                                }
                            }
                        }
                    }
                }
            } else {
                //as we are not following the block settings we should allocate more room for bars
                barSizeData = new Array(Number(nrbars)).fill(0);
                groupAvg = barSizeData.slice();

                for (let i = 0; i < statements.length; i++) {
                    let ind = Math.floor(statements[i].result.score.raw / Math.ceil(100 / nrbars));
                    barSizeData[ind] += 1;
                    groupAvg[ind] += statements[i].result.score.raw;
                    if (statements[i] == ownstatements[0]) {
                        barBorderColor[ind] = "#484848";
                        barOwnScore[ind] = score;
                        ownScore = score;
                        ownScoreIndex = ind;
                    }
                }
            }

            for (let i = 0; i < barSizeData.length; i++) {
                if (barSizeData[i] !== 0) {

                    groupAvg[i] = groupAvg[i] / barSizeData[i];
                } else {
                    groupAvg[i] = 0;
                }
            }

            const newShade = (hexColor, magnitude) => {
                hexColor = hexColor.replace(`#`, ``);
                if (hexColor.length === 6) {
                    const decimalColor = parseInt(hexColor, 16);
                    let r = (decimalColor >> 16) + magnitude;
                    r > 255 && (r = 255);
                    r < 0 && (r = 0);
                    let g = (decimalColor & 0x0000ff) + magnitude;
                    g > 255 && (g = 255);
                    g < 0 && (g = 0);
                    let b = ((decimalColor >> 8) & 0x00ff) + magnitude;
                    b > 255 && (b = 255);
                    b < 0 && (b = 0);
                    return `#${(g | (b << 8) | (r << 16)).toString(16)}`;
                } else {
                    return hexColor;
                }
            };
            let offBarColors = barColors.slice();
            for (let i = 0; i < barOwnScore.length; i++) {
                if (barOwnScore[i] != 0) {
                    offBarColors = newShade(barColors[i], 40)
                }
            }
            //add block avg to labels
            for (let i = 0; i < labels.length; i++) {
                labels[i].push(groupScore + ": " + groupAvg[i].toFixed(2))
                if (i == ownScoreIndex){
                    labels[i].push(userScore + ": " + ownScore)
                }
            }

            //add # users per group
            if (interaction.getAttribute("showNrOfParticipants") == "true") {
                for (let i = 0; i < labels.length; i++) {
                    labels[i].push(barSizeData[i] + " " + groupUserLabel);
                }
            }

            let bardata = {
                labels: labels,
                datasets: [
                    {
                        type: "bar",
                        label: "Score",
                        data: barOwnScore,
                        backgroundColor: offBarColors,
                        barPercentage: (ownScore > groupAvg[ownScoreIndex]) ? 0.96:0.90,
                        yID: "id1",
                        order: 2,
                    },
                    {
                        type: "bar",
                        label: "data",
                        data: groupAvg,
                        backgroundColor: barColors,
                        borderWidth: 5,
                        barPercentage: 0.96,
                        borderColor: barBorderColor,
                        yID: "id1",
                        order: (ownScore > groupAvg[ownScoreIndex]) ? 1:3,
                    },
                ],
            };

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelBarScore,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        x: {
                            stacked: (ownScore != groupAvg[ownScoreIndex] || ownScore == 0),
                            ticks: {
                                autoSkip: false,
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

        } else if (interaction.getAttribute("graphType") == "bar_comb_marks") {
          let passingGrade = x_params.trackingPassed;
          if (passingGrade == null) {
            passingGrade = "55";
          } else {
            if (passingGrade.indexOf("%") >= 0) {
              passingGrade = parseInt(passingGrade) + "";
            } else if (
              parsefloat(passingGrade) >= 0 &&
              parsefloat(passingGrade) <= 1
            ) {
              passingGrade = parseFloat(passingGrade) * 100.0 + "";
            }
          }
          let ldData = [];
          let ldLabels = [];
          let ldPassing = [];
          let visitedGroups = {};
          for (let statement in statements) {
              try {
                  let group =
                      statements[statement].context.contextActivities.grouping[0]
                          .definition.name["en-US"];
                  if (!(group in visitedGroups)) {
                      visitedGroups[group] = [statements[statement].result.score.raw];
                  } else {
                      visitedGroups[group].push(statements[statement].result.score.raw);
                  }
              } catch (e) {
                  //console.log(e);
              }
          }
          const sortObject = (obj) =>
            Object.keys(obj)
              .sort()
              .reduce((res, key) => ((res[key] = obj[key]), res), {});
          visitedGroups = sortObject(visitedGroups);
          const average = (list) =>
            list.reduce((prev, curr) => prev + curr) / list.length;
          for (let group in visitedGroups) {
            ldData.push(average(visitedGroups[group]));
            ldLabels.push(group);
            ldPassing.push(Number(passingGrade));
          }
          //statements.forEach(x => {
          //    ldData.push(x.result.score.raw)
          //    ldLabels.push(x.context.contextActivities.grouping[0].definition.name['en-US'])
          //    ldPassing.push(Number(passingGrade));
          //});
          let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
          let options = {
            maintainAspectRatio: false,
            legend: {
              display: false,
            },
            scales: {
              yAxes: [
                {
                  ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100,
                  },
                },
              ],
            },
          };
          var mixedChart = new Chart(ctx, {
            type: "bar",
            data: {
              datasets: [
                {
                  label: "Bar Dataset",
                  data: ldData,
                  backgroundColor: "rgba(40, 64, 150, 0.8)",
                  borderColor: "rgba(40, 64, 150, 1)",
                  order: 1,
                },
                {
                  label: "Line Dataset",
                  data: ldPassing,

                  // Changes this dataset to become a line
                  type: "line",
                  fill: false,
                  backgroundColor: "rgba(40, 200, 64, 1)",
                  borderColor: "rgba(40, 200, 64, 1)",
                  order: 2,
                },
              ],
              labels: ldLabels,
            },
            options: options,
          });

        } else if (interaction.getAttribute("graphType") == "pie_marks") {
          var correctLabel = interaction.getAttribute("correctLabel");
          var incorrectLabel = interaction.getAttribute("incorrectLabel");
          if (correctLabel == undefined) correctLabel = "Correct";
          if (incorrectLabel == undefined) incorrectLabel = "Incorrect";

          let numCorrectQuestions = 0;
          let numIncorrectQuestions = 0;

          if (adaptiveContent.dashboardMode == "true") {
            for (let statement in statements) {
              if (statements[statement].result.extensions !== undefined) {
                let correctQuestionScores =
                  statements[statement].result.extensions[
                    "http://xerte.org.uk/result/grouping/scores"
                  ];
                if (correctQuestionScores !== undefined) {
                  for (let i = 0; i < correctQuestionScores.length; i++) {
                    if (correctQuestionScores[i][1] === 100) {
                      numCorrectQuestions += 1;
                    } else {
                      numIncorrectQuestions += 1;
                    }
                  }
                }
              }
            }
          } else {
            if (statements[0].result.extensions !== undefined) {
              let correctQuestionScores =
                statements[0].result.extensions[
                  "http://xerte.org.uk/result/grouping/scores"
                ];
              if (correctQuestionScores !== undefined) {
                for (let i = 0; i < correctQuestionScores.length; i++) {
                  if (correctQuestionScores[i][1] === 100) {
                    numCorrectQuestions += 1;
                  } else {
                    numIncorrectQuestions += 1;
                  }
                }
              }
            }
          }
          let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
          let options = {
            maintainAspectRatio: false,
          };
          data = {
            labels: [correctLabel, incorrectLabel],
            datasets: [
              {
                label: "# of Votes",
                data: [numCorrectQuestions, numIncorrectQuestions],
                backgroundColor: [
                  "rgba(40, 200, 64, 0.8)",
                  "rgba(255, 95, 87, 0.8)",
                ],
                borderColor: ["rgba(40, 200, 64, 1)", "rgba(255, 95, 87, 1)"],
                borderWidth: 1,
              },
            ],
          };
          chart = new Chart(ctx, {
            type: "pie",
            data: data,
            options: options,
          });
        } else if (
          interaction.getAttribute("graphType") == "line_average_marks"
        ) {
          var xAxisLabelLineAvgMarks = interaction.getAttribute(
            "xAxisLabelLineAvgMarks"
          );
          var yAxisLabelLineAvgMarks = interaction.getAttribute(
            "yAxisLabelLineAvgMarks"
          );
          if (xAxisLabelLineAvgMarks == undefined)
            xAxisLabelLineAvgMarks = "Score Range [%]";
          if (yAxisLabelLineAvgMarks == undefined)
            yAxisLabelLineAvgMarks = "% of Group";
            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";

         //  var dash = new ADL.XAPIDashboard();
         // dash.addStatements(data);
         //  data.map(function (x) {
         //    x.result.score.raw;
         //    return x;
         //  });
            //get labels and #
            let labels = {};

            for (let i = 0; i < statements.length; i++) {
                if (!labels.hasOwnProperty(statements[i].result.score.raw)) {
                    labels[statements[i].result.score.raw] = 1;
                } else {
                    labels[statements[i].result.score.raw] += 1;
                }
            }

            Object.keys(labels).forEach(function(key){ labels[key] = labels[key]/statements.length*100 });
            let bardata = {
                labels: Object.keys(labels),
                datasets: [
                    {
                        type: "line",
                        label: "data",
                        backgroundColor: barColors,
                        borderColor: barColors,
                        data: Object.values(labels),
                        yID: "id1",
                    },
                ],
            };

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelLineAvgMarks,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        x: {
                            title: {
                                display: true,
                                text: xAxisLabelLineAvgMarks,
                                beginAtZero: true,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

            //
          // var chart = dash.createLineChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "result.score.raw",
          //   aggregate: ADL.count(),
          //   range: {
          //     start: 0.0,
          //     end: 100.0,
          //     increment: Math.ceil(100 / nrbars),
          //   },
          //   rangeLabel: "start",
          //   post: function (d) {
          //     d.contents.map(function (el) {
          //       el.out *= (1 / data.length) * 100;
          //     });
          //   },
          //   customize: function (chart) {
          //     chart.xAxis.rotateLabels(45).axisLabel(xAxisLabelLineAvgMarks);
          //     chart.yAxis.axisLabel(yAxisLabelLineAvgMarks);
          //     if (fullWidth) {
          //       chart.width(700);
          //     } else {
          //       chart.width(450);
          //     }
          //     chart.tooltips(false);
          //     chart.height(300);
          //     chart.yDomain([0, 100]);
          //   },
          // });
          // chart.draw();
        } else if (interaction.getAttribute("graphType") == "line_own_marks") {
          var xAxisLabelLineOwnMarks = interaction.getAttribute(
            "xAxisLabelLineOwnMarks"
          );
          var yAxisLabelLineOwnMarks = interaction.getAttribute(
            "yAxisLabelLineOwnMarks"
          );
          if (xAxisLabelLineOwnMarks == undefined)
            xAxisLabelLineOwnMarks = "Date";
          if (yAxisLabelLineOwnMarks == undefined)
            yAxisLabelLineOwnMarks = "Grade [0-10]";
          // var dash = new ADL.XAPIDashboard();
          // data.map(function (x) {
          //   x.result.score.raw;
          //   return x;
          // });

          //dash.addStatements(statements);
          end = new Date();
          begin = end;
          for (statement in statements) {
            if (
              begin.getTime() >
              new Date(statements[statement].timestamp).getTime()
            ) {
              begin = new Date(statements[statement].timestamp);
            }
          }

          begin = new Date(begin.getTime() - 1 * 24 * 60 * 60 * 1000);

            let dataSet = [];
            for (let i = 0; i < statements.length; i++) {
                let temp = {};
                temp["x"] = statements[i].timestamp;
                temp["y"] = statements[i].result.score.raw/10;
                dataSet.push(temp)
            }

            let bardata = {
                datasets: [
                    {
                        type: "line",
                        label: "data",
                        data: dataSet,
                        borderColor: barColors,
                        backgroundColor: barColors,
                    },
                ],
            };

          let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxis: {
                            title: {
                                display: true,
                                text: yAxisLabelLineOwnMarks,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 10,
                            ticks: {
                                 stepSize: 2
                            }
                        },
                        xAxes: {
                            type: "time",
                            time: {
                                unit: 'day',
                                tooltipFormat: 'll'
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Date'
                            },
                            title: {
                                display: true,
                                text: xAxisLabelLineOwnMarks,
                                beginAtZero: true,
                            },
                            min: begin,
                            max: end,
                        },
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });


          // var chart = dash.createLineChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "timestamp",
          //   range: {
          //     start: begin.toISOString(),
          //     end: end.toISOString(),
          //     increment: 1000 * 60 * 15,
          //   },
          //   aggregate: ADL.average("result.score.raw"),
          //   rangeLabel: "start",
          //   customize: function (chart) {
          //     if (fullWidth) {
          //       chart.width(700);
          //     } else {
          //       chart.width(700);
          //     }
          //     chart.height(300);
          //     chart.tooltips(false);
          //     chart.yDomain([0, 10]);
          //     chart.xAxis.axisLabel(xAxisLabelLineOwnMarks);
          //     chart.yAxis.axisLabel(yAxisLabelLineOwnMarks);
          //     chart.xAxis.tickFormat(function (label) {
          //       return d3.time.format("%b %d")(new Date(label));
          //     });
          //   },
          //   post: function (data) {
          //     data.contents.map(function (el) {
          //       el.out = el.out / 10;
          //       el.in = Date.parse(el.in);
          //     });
          //   },
          // });
          // chart.draw();
        } else if (
          interaction.getAttribute("graphType") == "polar_area_per_category"
        ) {
          let backgroundColors = [
            "#FF6384",
            "#4BC0C0",
            "#FFCD56",
            "#C9CBCF",
            "#36A2EB",
            "#B284BE",
          ];
            //quick check if we use simple colors or specific color/group pairs
            // under the assumption that only one of the systems is used
            let namedBackgroundColors = false;
          if (interaction.getAttribute("graphColorScale") != undefined && interaction.getAttribute("graphColorScale") != "" && !interaction.getAttribute("graphColorScale").includes(":")) {
              backgroundColors = interaction.getAttribute("graphColorScale").split(",");
          } else if (interaction.getAttribute("graphColorScale") != undefined && interaction.getAttribute("graphColorScale") != ""){
              backgroundColors = [];
              let groupColorPairs = interaction.getAttribute("graphColorScale").split(",")
              for (key of groupColorPairs){
                  let keyValue = key.split(":")
                  backgroundColors[keyValue[0]] = keyValue[1];
                  namedBackgroundColors = true;
              }
          }
          let visitedGroups = [];
          for (let statement in statements) {
            let group =
              statements[statement].context.contextActivities.grouping[0]
                .definition.name["en-US"];
            if (!(group in visitedGroups)) {
              visitedGroups[group] = [statements[statement].result.score.raw];
            } else {
              visitedGroups[group].push(statements[statement].result.score.raw);
            }
          }
          if (namedBackgroundColors && Object.keys(visitedGroups).length == Object.keys(backgroundColors).length){
              // Order the keys in visitedGroups to match the order of backgroundColors
              let newVisitedGroups = [];
              let matched = true;
              for (let i = 0; i < Object.keys(backgroundColors).length; i++){
                  let key = Object.keys(backgroundColors)[i];
                  if (typeof(visitedGroups[key]) == 'undefined'){
                      matched = false;
                      break;
                  }
                  newVisitedGroups[key] = visitedGroups[key];
              }
              if (matched) {
                  visitedGroups = newVisitedGroups;
              }
          }
          let labelCounter = 0;
          let legendLabels = [];
          for (key in visitedGroups) {
            legendLabels.push({
              text: key,
              fillStyle: typeof(backgroundColors[key]) == 'undefined' ? backgroundColors[labelCounter] : backgroundColors[key],
            });
            labelCounter += 1;
          }
          labelCounter = 0;
          let questions = statements.map(
            (statement) => ({
                question : statement.result.extensions[
                    "http://xerte.org.uk/result/grouping/scores"
                    ],
                groupName : statement.context.contextActivities.grouping[0]
                    .definition.name["en-US"]
                    })
          );
          // Arrange questions in the same order as visitedGroups
          let newQuestions = [];
          for (key in visitedGroups) {
              for (let i = 0; i < questions.length; i++) {
                  if (questions[i].groupName == key) {
                      newQuestions.push(questions[i]);
                      break;
                  }
              }
          }
          questions = newQuestions;
          let labels = [];
          let backgroundColor = [];
          let dataValues = [];
          for (let index in questions) {
            let questionsGroup = questions[index]["question"];
            let groupName = questions[index]["groupName"]
            for (let index in questionsGroup) {
              let singleQuestion = questionsGroup[index];
              labels.push(singleQuestion[0][0]);
              dataValues.push(singleQuestion[1]);
              //again differentiate between simple colors and color/group pairs
                if (!namedBackgroundColors) {
                    if (labelCounter < backgroundColors.length) {
                        backgroundColor.push(backgroundColors[labelCounter]);
                    }
                }else {
                    if (labelCounter < Object.keys(backgroundColors).length){
                        if (typeof(backgroundColors[groupName]) !== 'undefined'){
                         backgroundColor.push(backgroundColors[groupName])
                         }
                    }
                }
            }
            labelCounter += 1;
          }
          let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
          let options = {
            maintainAspectRatio: false,
          };
          const data = {
            labels,
            datasets: [
              {
                label: "My First Dataset",
                data: dataValues,
                backgroundColor,
              },
            ],
          };
          var myChart = new Chart(ctx, {
            type: "polarArea",
            data: data,
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: true,
                  labels: {
                    generateLabels: function (chart) {
                      return legendLabels;
                    },
                  },
                },
              },
            },
          });
        } else if (
          interaction.getAttribute("graphType") == "hor_bar_comb_marks"
        ) {
          let passingGrade = x_params.trackingPassed;
          if (passingGrade == null) {
            passingGrade = "55";
          } else {
            if (passingGrade.indexOf("%") >= 0) {
              passingGrade = parseInt(passingGrade) + "";
            } else if (
              parsefloat(passingGrade) >= 0 &&
              parsefloat(passingGrade) <= 1
            ) {
              passingGrade = parseFloat(passingGrade) * 100.0 + "";
            }
          }
          let ctx = escapeUrl(url, type, interactionIndex) + "-graph";
          let visitedGroups = {};
          for (let statement in statements) {
            let group =
              statements[statement].context.contextActivities.grouping[0]
                .definition.name["en-US"];
            if (!(group in visitedGroups)) {
              visitedGroups[group] = [statements[statement].result.score.raw];
            } else {
              visitedGroups[group].push(statements[statement].result.score.raw);
            }
          }
          let labelCounter = 0;
          let data = [];
          for (key in visitedGroups) {
            data.push({
              x: key,
              y: Math.round(visitedGroups[key][0], 2),
              goals: [
                {
                  name: "Expected",
                  value: passingGrade,
                  strokeWidth: 5,
                  strokeColor: "#775DD0",
                },
              ],
            });
            labelCounter += 1;
          }
          let colors = [
              "#FF6384",
              "#4BC0C0",
              "#FFCD56",
              "#C9CBCF",
              "#36A2EB",
              "#B284BE",
          ];
          if (interaction.getAttribute('graphColorScale') != null && interaction.getAttribute('graphColorScale') != '')
          {
              colors = interaction.getAttribute('graphColorScale').split(",");
          }
          var options = {
            series: [
              {
                data,
              },
            ],
            chart: {
              toolbar: {
                show: false,
              },
              height: 350,
              type: "bar",
            },
            plotOptions: {
              bar: {
                horizontal: true,
                distributed: true,
              },
            },
            colors: colors,
            dataLabels: {
              formatter: function (val, opt) {
                const goals =
                  opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
                    .goals;

                if (goals && goals.length) {
                  return `${val}%`;
                }
                return val;
              },
            },
            legend: {
              show: true,
              showForSingleSeries: true,
              customLegendItems: ["Passing Score"],
              markers: {
                fillColors: ["#775DD0"],
              },
            },
          };
          var chart = new ApexCharts(
            document.querySelector(`#${ctx}`),
            options
          );
          chart.render();
        }
      }
    };

    this.drawAnswer = function (
      data,
      interaction,
      url,
      type,
      interactionIndex,
      fullWidth
    ) {
      // remove loader
      $("#interaction_load_" + interactionIndex).remove();
      var answerLabelText = interaction.getAttribute("answerText");
      if (answerLabelText == undefined) {
        answerLabelText = "Your answer is {0}";
      }

      var nrParticipantsText = interaction.getAttribute("NrParticipantsText");
      if (nrParticipantsText == undefined) {
        nrParticipantsText = "The number of participants is {0}";
      }
      var nrbars = interaction.getAttribute("graphNrDataPoints");
      if (nrbars == undefined) {
        nrbars = 10;
      }
      var xertelo = interaction.getAttribute("xertelo");
      var statements = filterOwnStatements(data, xertelo);

        var graphFitInfoInBar = interaction.getAttribute("graphFitInfoInBar");
        if (graphFitInfoInBar == undefined) {
            graphFitInfoInBar = false;
        }

        var barColors = [
            "#FF6384",
            "#4BC0C0",
            "#FFCD56",
            "#C9CBCF",
            "#36A2EB",
            "#B284BE",
        ];

      if (statements.length > 0) {
        var givenAnswer = statements[0].result.response;
        if (interaction.getAttribute("showScore") == "true") {
          var txt = answerLabelText;
          const givenAnswerCleanedUp = givenAnswer.replace(/\[\,\]/g, ",<br>").replace(/\[\.\]/g, " ==> ");
          txt = txt.replace(/\{0\}/, givenAnswerCleanedUp);
          $(
            "#" + escapeUrl(url, type, interactionIndex) + " .score .stats"
          ).append("<li>" + txt + "</li>");
        }
        for (
          blockIndex = 0;
          blockIndex < interaction.children.length;
          blockIndex++
        ) {
          var block = interaction.children[blockIndex];
          var conScoreAnswer = block.getAttribute("conScoreAnswer");
          if (conScoreAnswer == givenAnswer) {
            $("#" + escapeUrl(url, type, interactionIndex) + " .message").html(
              block.getAttribute("adaptiveContent")
            );
          }
        }
      }
      if (interaction.getAttribute("showNrOfParticipants") == "true") {
        var txt = nrParticipantsText;
        txt = txt.replace(/\{0\}/, data.length);
        $(
          "#" + escapeUrl(url, type, interactionIndex) + " .score .stats"
        ).append("<li>" + txt + "</li>");
      }
      if (interaction.getAttribute("graph") === "true") {
        var showExplanation = interaction.getAttribute("showExplanation");
        var Explanation = interaction.getAttribute("graphExplanation");
        var ExplanationPanelWidth = interaction.getAttribute(
          "graphExplanationPanelWidth"
        );
        if (showExplanation == undefined) {
          showExplanation = "false";
        }
        if (Explanation == undefined) {
          Explanation = "";
        }
        if (ExplanationPanelWidth == undefined) {
          ExplanationPanelWidth = "40%";
        }
        div = $(
          "#" + escapeUrl(url, type, interactionIndex) + " .graph-container"
        );
        // div.append(
        //   "<div class='graph'><svg id='" +
        //   escapeUrl(url, type, interactionIndex) +
        //   "-graph' width='700' height='300' viewBox='0 0 700 300'></svg></div>"
        // );
          div.append(
              "<div class='graph'><canvas id='" +
              escapeUrl(url, type, interactionIndex) +
              "-graph'></canvas></div>"
          );
        if (showExplanation == "true" && Explanation != "") {
            var textSize = Math.round(interaction.getAttribute("labelFontSize"));
            if (textSize == null || textSize == 0) textSize = 12;

            div.append(
            '<div class="panel legend" style="width: ' + ExplanationPanelWidth + '; font-size: ' + textSize + 'px;" >' +
              Explanation +
              "</div>"
          );
        }
        if (interaction.getAttribute("graphType") == "bar_answers") {
          // Check if data has responses with multiple answers
          var multipleAnswers = false;
          data.forEach(function(s){
            if (s.result.response.indexOf('[,]') >= 0) {
              multipleAnswers = true;
            }
          });
          if (multipleAnswers)
          {
            // Create pseudo dataset with statement for each answer
            var dataset = [];
            data.forEach(function(s){
              const answers = s.result.response.split('[,]');
              answers.forEach(function(a){
                // clone statement
                var statement = JSON.parse(JSON.stringify(s));
                  statement.result.response = a;
                dataset.push(statement);
              });
            });
          }

          //var dash = new ADL.XAPIDashboard();
          //if (!multipleAnswers) {
          //  dash.addStatements(data);
          //} else {
          //  dash.addStatements(dataset);
          //}

            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";

          var xAxisLabelBarAnswers = interaction.getAttribute(
            "xAxisLabelBarAnswers"
          );
          var yAxisLabelBarAnswers = interaction.getAttribute(
            "yAxisLabelBarAnswers"
          );
          if (xAxisLabelBarAnswers == undefined)
            xAxisLabelBarAnswers = "Answers given";
          if (yAxisLabelBarAnswers == undefined)
            yAxisLabelBarAnswers = "Number of answers";
          var xDomain = [];
          if (
            data.length > 0 &&
            data[0].object.definition != "undefined" &&
            data[0].object.definition.choices != "undfined"
          ) {
            var choices = data[0].object.definition.choices;
            for (var i = 0; i < choices.length; i++) {
              xDomain[i] = choices[i].id;
            }
          }

            //get used labels and #
            let labels = {};
            if (!multipleAnswers) {
                for (let i = 0; i < statements.length; i++) {
                    if (!labels.hasOwnProperty(statements[i].result.response)) {
                        labels[statements[i].result.response] = 1;
                    } else {
                        labels[statements[i].result.response] += 1;
                    }
                }
            } else {
                for (let i = 0; i < dataset.length; i++) {
                    if (!labels.hasOwnProperty(dataset[i].result.response)) {
                        labels[dataset[i].result.response] = 1;
                    } else {
                        labels[dataset[i].result.response] += 1;
                    }
                }
            }
            var barData = [];
            //match used labels and # to xDomain
            if (xDomain.length == 0) {
                xDomain = Object.keys(labels);
                barData = Object.values(labels);
            } else {
                barData = new Array(xDomain.length).fill(0);
                for (let i = 0; i < xDomain.length; i++) {
                    if (labels[xDomain[i]] !== undefined){
                        barData[i] = labels[xDomain[i]];
                    }
                }
            }
            if (!multipleAnswers) {
                for (let i = 0; i < barData.length; i++) {
                    barData[i] = barData[i] / statements.length * 100;
                }
            } else {
                for (let i = 0; i < barData.length; i++) {
                    barData[i] = barData[i] / dataset.length * 100;
                }
            }

            let bardata = {
                labels: xDomain,
                datasets: [
                    {
                        type: "bar",
                        label: "data",
                        data: barData,
                        borderWidth: 5,
                        backgroundColor: barColors,
                        yID: "id1",
                    },
                ],
            };

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelBarAnswers,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        x: {
                            title: {
                                display: true,
                                text: xAxisLabelBarAnswers,
                                beginAtZero: true,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

          // var chart = dash.createBarChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "result.response",
          //   aggregate: ADL.count(),
          //   post: function (d) {
          //     d.contents.map(function (el) {
          //       el.out *= (1 / data.length) * 100;
          //     });
          //   },
          //   customize: function (chart) {
          //     chart.xAxis.rotateLabels(45).axisLabel(xAxisLabelBarAnswers);
          //     chart.yDomain([0, 100]);
          //     if (xDomain.length > 0) {
          //       chart.xDomain(xDomain);
          //     }
          //     chart.yAxis.axisLabel(yAxisLabelBarAnswers);
          //     chart.width(700);
          //     chart.height(300);
          //   },
          // });
          // chart.draw();
        } else if (interaction.getAttribute("graphType") == "bar_marks") {
          //var dash = new ADL.XAPIDashboard();
          //dash.addStatements(data);
          var xAxisLabelBarMarks =
            interaction.getAttribute("xAxisLabelBarMarks");
          var yAxisLabelBarMarks =
            interaction.getAttribute("yAxisLabelBarMarks");
          if (xAxisLabelBarMarks == undefined)
            xAxisLabelBarMarks = "Score Range [%]";
          if (yAxisLabelBarMarks == undefined)
            yAxisLabelBarMarks = "% of Group";
          // data.map(function (x) {
          //   x.result.score.raw;
          //   return x;
          // });

            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";

            //get used labels and #
            let labels = {};
            for (let i = 0; i < statements.length; i++) {
                if (!labels.hasOwnProperty(statements[i].result.score.raw)) {
                    labels[statements[i].result.score.raw] = 1;
                } else {
                    labels[statements[i].result.score.raw] += 1;
                }
            }
            Object.keys(labels).forEach(function(key){ labels[key] = labels[key]/statements.length*100 });

            let bardata = {
                labels: Object.keys(labels),
                datasets: [
                    {
                        type: "bar",
                        label: "data",
                        data: Object.values(labels),
                        borderWidth: 5,
                        backgroundColor: barColors,
                        yID: "id1",
                    },
                ],
            };

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelBarMarks,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        x: {
                            title: {
                                display: true,
                                text: xAxisLabelBarMarks,
                                beginAtZero: true,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

          // var chart = dash.createBarChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "result.score.raw",
          //   aggregate: ADL.count(),
          //   range: {
          //     start: 0.0,
          //     end: 100.0,
          //     increment: Math.ceil(100 / nrbars),
          //   },
          //   post: function (d) {
          //     d.contents.map(function (el) {
          //       el.out *= (1 / data.length) * 100;
          //     });
          //   },
          //   customize: function (chart) {
          //     chart.xAxis.rotateLabels(45).axisLabel(xAxisLabelBarMarks);
          //     chart.yAxis.axisLabel(yAxisLabelBarMarks);
          //     chart.width(700);
          //     chart.height(300);
          //     chart.yDomain([0, 100]);
          //   },
          // });
          // chart.draw();
        } else if (
          interaction.getAttribute("graphType") == "line_average_marks"
        ) {
          //var dash = new ADL.XAPIDashboard();
          //dash.addStatements(data);
          var xAxisLabelLineAvgMarks = interaction.getAttribute(
            "xAxisLabelLineAvgMarks"
          );
          var yAxisLabelLineAvgMarks = interaction.getAttribute(
            "yAxisLabelLineAvgMarks"
          );
          if (xAxisLabelLineAvgMarks == undefined)
            xAxisLabelLineAvgMarks = "Score Range [%]";
          if (yAxisLabelLineAvgMarks == undefined)
            yAxisLabelLineAvgMarks = "% of Group";
          // data.map(function (x) {
          //   x.result.score.raw;
          //   return x;
          // });

            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";

            let labels = {};

            for (let i = 0; i < statements.length; i++) {
                if (!labels.hasOwnProperty(statements[i].result.score.raw)) {
                    labels[statements[i].result.score.raw] = 1;
                } else {
                    labels[statements[i].result.score.raw] += 1;
                }
            }
            Object.keys(labels).forEach(function(key){ labels[key] = labels[key]/statements.length*100 });

            let bardata = {
                labels: Object.keys(labels),
                datasets: [
                    {
                        type: "line",
                        label: "data",
                        data: Object.values(labels),
                        backgroundColor: barColors,
                        borderColor: barColors,
                        yID: "id1",
                    },
                ],
            };

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelLineAvgMarks,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 100,
                            id: "id1",
                        },
                        x: {
                            title: {
                                display: true,
                                text: xAxisLabelLineAvgMarks,
                                beginAtZero: true,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

          // var chart = dash.createLineChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "result.score.raw",
          //   aggregate: ADL.count(),
          //   range: { start: 0.0, end: 100, increment: Math.ceil(100 / nrbars) },
          //   rangeLabel: "start",
          //   post: function (d) {
          //     d.contents.map(function (el) {
          //       el.out *= (1 / data.length) * 100;
          //     });
          //   },
          //   customize: function (chart) {
          //     chart.xAxis.rotateLabels(45).axisLabel(yAxisLabelLineAvgMarks);
          //     chart.yAxis.axisLabel(yAxisLabelLineAvgMarks);
          //     chart.width(700);
          //     chart.tooltips(false);
          //     chart.height(300);
          //     chart.yDomain([0, 100]);
          //   },
          // });
          // chart.draw();
        } else if (interaction.getAttribute("graphType") == "line_own_marks") {
          var xAxisLabelLineOwnMarks = interaction.getAttribute(
            "xAxisLabelLineOwnMarks"
          );
          var yAxisLabelLineOwnMarks = interaction.getAttribute(
            "yAxisLabelLineOwnMarks"
          );
          if (xAxisLabelLineOwnMarks == undefined)
            xAxisLabelLineOwnMarks = "Date";
          if (yAxisLabelLineOwnMarks == undefined)
            yAxisLabelLineOwnMarks = "Grade [0-10]";
          //var dash = new ADL.XAPIDashboard();
          // data.map(function (x) {
          //   x.result.score.raw /= 10;
          //   return x;
          // });

          //dash.addStatements(statements);
          end = new Date();
          begin = end;
          for (statement in statements) {
            if (
              begin.getTime() >
              new Date(statements[statement].timestamp).getTime()
            ) {
              begin = new Date(statements[statement].timestamp);
            }
          }

          begin = new Date(begin.getTime() - 1 * 24 * 60 * 60 * 1000);

            let dataSet = [];
            for (let i = 0; i < statements.length; i++) {
                let temp = {};
                temp["x"] = statements[i].timestamp;
                temp["y"] = statements[i].result.score.raw/10;
                dataSet.push(temp)
            }
            dataSet.push({x:end.toISOString(), y:0});
            dataSet.unshift({x:begin.toISOString(), y:0});
            //ensure dates are in order
            dataSet.sort(function( a, b ) {
                if ( a.x < b.x ){
                    return -1;
                }
                if ( a.x > b.x ){
                    return 1;
                }
                return 0;
            })


            let bardata = {
                datasets: [
                    {
                        type: "line",
                        label: "data",
                        data: dataSet,
                        backgroundColor: barColors,
                        borderColor: barColors,
                        spanGaps: false,
                    },
                ],
            };
            let ctx = escapeUrl(url, type, interactionIndex) + "-graph";

            new Chart(ctx, {
                data: bardata,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: yAxisLabelLineOwnMarks,
                                beginAtZero: true,
                            },
                            position: "left",
                            min: 0,
                            max: 10,
                            ticks: {
                                stepSize: 2
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: xAxisLabelLineOwnMarks,
                                beginAtZero: true,
                            },
                            type: 'time',
                            min: begin,
                            max: end,
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                filter: function (item, chart) {
                                    // Logic to remove a particular legend item goes here
                                    return !item.text.includes('My First dataset');
                                }
                            }
                        }
                    },
                    events: ['click']
                },
            });

          // var chart = dash.createLineChart({
          //   container: "#" + escapeUrl(url, type, interactionIndex) + "-graph",
          //   groupBy: "timestamp",
          //   range: {
          //     start: begin.toISOString(),
          //     end: end.toISOString(),
          //     increment: 1000 * 60 * 15,
          //   },
          //   aggregate: ADL.average("result.score.raw"),
          //   rangeLabel: "start",
          //   customize: function (chart) {
          //     chart.width(700);
          //     chart.height(300);
          //     chart.tooltips(false);
          //     chart.yDomain([0, 10]);
          //     chart.xAxis.axisLabel(xAxisLabelLineOwnMarks);
          //     chart.yAxis.axisLabel(yAxisLabelLineOwnMarks);
          //     chart.xAxis.tickFormat(function (label) {
          //       return d3.time.format("%b %d")(new Date(label));
          //     });
          //   },
          //   post: function (data) {
          //     data.contents.map(function (el) {
          //       el.in = Date.parse(el.in);
          //     });
          //   },
          // });
          // chart.draw();
        }
      }
    };

    this.drawOpinion = function (
      data,
      interaction,
      url,
      type,
      interactionIndex,
      fullWidth
    ) {
      // remove loader
      $("#interaction_load_" + interactionIndex).remove();

      var scoreLabelText = interaction.getAttribute("scoreText");
      if (scoreLabelText == null) {
        scoreLabelText = "Your score is {0}";
      }
      var nrParticipantsText = interaction.getAttribute("NrParticipantsText");
      if (nrParticipantsText == null) {
        nrParticipantsText = "The number of participants is {0}";
      }
      var showExplanation = interaction.getAttribute("showExplanation");
      var Explanation = interaction.getAttribute("graphExplanation");
      var ExplanationPanelWidth = interaction.getAttribute(
        "graphExplanationPanelWidth"
      );
      if (showExplanation == undefined) {
        showExplanation = "false";
      }
      if (Explanation == undefined) {
        Explanation = "";
      }
      if (ExplanationPanelWidth == undefined) {
        ExplanationPanelWidth = "40%";
      }
      if (interaction.getAttribute("showNrOfParticipants") == "true") {
        var txt = nrParticipantsText;
        txt = txt.replace(/\{0\}/, data.length);
        $(
          "#" + escapeUrl(url, type, interactionIndex) + " .score .stats"
        ).append("<li>" + txt + "</li>");
      }
      jsonData = data.map(function (d) {
        var obj = {};
        obj.timestamp = d.timestamp;
        obj.actor = d.actor;
        obj.result = d.result;
        if (d.result.extensions == undefined) {
          return undefined;
        }
        obj.graph = JSON.parse(
          d.result.extensions["http://xerte.org.uk/xapi/JSONGraph"]
        );
        return obj;
      });
      jsonData = jsonData.filter(function (x) {
        return x != undefined;
      });
      //debugger;
      div = $(
        "#" + escapeUrl(url, type, interactionIndex) + " .graph-container"
      );


      if (interaction.getAttribute('opinionGraphType') == 'radar' || interaction.getAttribute('opinionGraphType') == null) {
        div.append(
            "<fieldset class='noStyle'><canvas aria-live='polite'></canvas></fieldset>"
        );
      } else if (interaction.getAttribute('opinionGraphType') == 'hor_bar_comb_marks_avg') {
        div.append(
          "<div class='graph'><div id='" +
            escapeUrl(url, type, interactionIndex) +
            "-graph'></div></div>"
        );
      }
      if (showExplanation == "true" && Explanation != "") {
        var textSize = Math.round(interaction.getAttribute("labelFontSize"));
        if (textSize == null || textSize == 0) textSize = 12;
        div.append(
          '<div class="panel legend" style="width: ' + ExplanationPanelWidth + '; font-size: ' + textSize + 'px;" >' +
            Explanation +
            "</div>"
        );
      }
      var identifier = escapeUrl(url, type, interactionIndex);
      createDiagram(
        jsonData,
        identifier,
        adaptiveContent.dashboardMode,
        interaction
      );
    };

    this.drawOpen = function (
      data,
      interaction,
      url,
      type,
      interactionIndex,
      fullWidth
    ) {
      // remove loader
      $("#interaction_load_" + interactionIndex).remove();

      var answerLabelText = interaction.getAttribute("answerText");
      if (answerLabelText == undefined) {
        answerLabelText = "Your answer is {0}";
      }

      var nrParticipantsText = interaction.getAttribute("NrParticipantsText");
      if (nrParticipantsText == undefined) {
        nrParticipantsText = "The number of participants is {0}";
      }

      var showUserId = "false";
      var showDate = "false";
      var sortOrder = "false";
      if (interaction.getAttribute("showUserID") != undefined) {
        showUserId = interaction.getAttribute("showUserID");
      }
      if (interaction.getAttribute("showDate") != undefined) {
        showDate = interaction.getAttribute("showDate");
      }
      if (interaction.getAttribute("sortOrder") != undefined) {
        sortOrder = interaction.getAttribute("sortOrder");
      }

      moment.locale(x_params.language);
      var allAnswers = [];
      var myAnswers = [];
      for (var i = 0; i < data.length; i++) {
        var answer = {};
        if (
          data[i].result != undefined &&
          data[i].result.response != undefined &&
          data[i].result.response != ""
        ) {
          answer["answer"] = data[i].result.response;
          var user;
          if (typeof data[i].actor.name != "undefined") {
            user = data[i].actor.name;
          } else if (typeof data[i].actor.mbox != "undefined") {
            user = data[i].actor.mbox.substr(7);
          } else if (typeof data[i].actor.mbox_sha1 != "undefined") {
            user = data[i].actor.mbox_sha1.substr(7);
          } else if (
            typeof data[i].actor.account != "undefined" &&
            typeof data[i].actor.account.name != "undefined"
          ) {
            user = data[i].actor.account.name;
          } else {
            user = "";
          }
          answer["user"] = user;
          answer["date"] = moment(data[i].timestamp).format("L");
        }
        if (typeof answer["answer"] != "undefined") {
          if (matchActor(data[i])) {
            myAnswers.push(answer);
            allAnswers.push(answer);
          } else {
            allAnswers.push(answer);
          }
        }
      }
      // Perhaps we want to do something with the number of answers
      var nrMyAnswers = myAnswers.length;
      var nrAnswers = allAnswers.length + nrMyAnswers;
      var myOpenAnswerText = interaction.getAttribute("myOpenAnswerText");
      if (myOpenAnswerText == undefined) {
        myOpenAnswerText = "My answers";
      }
      var allOpenAnswerText = interaction.getAttribute("allOpenAnswerText");
      if (allOpenAnswerText == undefined) {
        allOpenAnswerText = "All answers";
      }

      var html = "";
      if (adaptiveContent.dashboardMode != "true") {
        if (nrMyAnswers > 0) {
          if (sortOrder == "increasing") {
            // Reverse order
            var reverse = [];
            for (i = 0; i < myAnswers.length; i++) {
              reverse[myAnswers.length - 1 - i] = myAnswers[i];
            }
            myAnswers = reverse;
          }
          html = "<h2><p>" + myOpenAnswerText + "</p></h2>";
          html += "<table>";
          for (i = 0; i < myAnswers.length; i++) {
            var itemnr = i + 1;
            html += "<tr class='openanswer'>";
            html += "<td class='itemnr'>" + itemnr + "</td>";
            if (showDate == "true" && myAnswers[i]["date"] != "") {
              html += "<td class='date'>" + myAnswers[i]["date"] + "</td>";
            }
            if (showUserId == "true" && myAnswers[i]["user"] != "") {
              html += "<td class='user'>" + myAnswers[i]["user"] + "</td>";
            }
            html += "<td class='answer'>" + myAnswers[i]["answer"] + "</td>";
            html += "</tr>";
          }
          html += "</table>";
        }
      } else {
        if (allAnswers.length > 0) {
          if (sortOrder == "increasing") {
            // Reverse order
            var reverse = [];
            for (i = 0; i < allAnswers.length; i++) {
              reverse[allAnswers.length - 1 - i] = allAnswers[i];
            }
            allAnswers = reverse;
          }
          html += "<h2><p>" + allOpenAnswerText + "</p></h2>";
          html += "<table>";
          for (i = 0; i < allAnswers.length; i++) {
            var itemnr = i + 1;
            html += "<tr class='openanswer'>";
            html += "<td class='itemnr'>" + itemnr + "</td>";
            if (showDate == "true" && allAnswers[i]["date"] != "") {
              html += "<td class='date'>" + allAnswers[i]["date"] + "</td>";
            }
            if (showUserId == "true" && allAnswers[i]["user"] != "") {
              html += "<td class='user'>" + allAnswers[i]["user"] + "</td>";
            }
            html += "<td class='answer'>" + allAnswers[i]["answer"] + "</td>";
            html += "</tr>";
          }
          html += "</table>";
        }
      }
      $("#" + escapeUrl(url, type, interactionIndex) + " .message").html(html);
    };

    this.drawGroupedScore = function (
      data,
      interaction,
      url,
      type,
      interactionIndex,
      fullWidth
    ) {
      // remove loader
      $("#interaction_load_" + interactionIndex).remove();

      // reshuffle
      var groupingStatements = [];
      var userGrouping = [];
      for (var i = 0; i < data.length; i++) {
        var user;
        if (typeof data[i].actor.name != "undefined") {
          user = data[i].actor.name;
        } else if (typeof data[i].actor.mbox != "undefined") {
          user = data[i].actor.mbox.substr(7);
        } else if (typeof data[i].actor.mbox_sha1 != "undefined") {
          user = data[i].actor.mbox_sha1.substr(7);
        } else if (
          typeof data[i].actor.account != "undefined" &&
          typeof data[i].actor.account.name != "undefined"
        ) {
          user = data[i].actor.account.name;
        } else {
          user = "unknown";
        }
        var session = "unknown";
        if (
          typeof data[i].context != "undefined" &&
          typeof data[i].context.extensions != "undefined" &&
          typeof data[i].context.extensions["http://xerte.org.uk/sessionId"] !=
            "undefined"
        ) {
          session = data[i].context.extensions["http://xerte.org.uk/sessionId"];
        }
        if (typeof userGrouping[user] == "undefined") {
          userGrouping[user] = {
            sessions: [],
          };
        }
        if (typeof userGrouping[user]["sessions"][session] == "undefined") {
          userGrouping[user]["sessions"][session] = [];
        }
        userGrouping[user]["sessions"][session].push(i);
      }

      // Calculate averages and create groupingStatments, which are pseudo xAPI statements which are a combination of all the grouping statements
      // Hmm... tric to enumerate array elements
      var userGroupingKeys = Object.keys(userGrouping);
      for (var i = 0; i < userGroupingKeys.length; i++) {
        var sessions = userGrouping[userGroupingKeys[i]];
        var sessionsKeys = Object.keys(sessions["sessions"]);
        for (var j = 0; j < sessionsKeys.length; j++) {
          var s = sessions["sessions"][sessionsKeys[j]];
          // make a full copy of statement
          var statement = JSON.parse(JSON.stringify(data[s[0]]));
          var sum = statement.result.score.raw;
          var duration = moment.duration(statement.result.duration);
          if (statement.result.extensions === undefined) {
            statement.result.extensions = {};
          }
          statement.result.extensions[
            "http://xerte.org.uk/result/grouping/scores"
          ] = [];
          statement.result.extensions[
            "http://xerte.org.uk/result/grouping/scores"
          ].push([
            [data[0].object.definition.name["en-US"]],
            data[s[0]].result.score.raw,
          ]);
          for (var k = 1; k < s.length; k++) {
            statement.result.extensions[
              "http://xerte.org.uk/result/grouping/scores"
            ].push([
              [data[s[k]].object.definition.name["en-US"]],
              data[s[k]].result.score.raw,
            ]);
            sum += data[s[k]].result.score.raw;
            duration.add(moment.duration(data[s[k]].result.duration));
          }
          statement.result.extensions[
            "http://xerte.org.uk/result/grouping/scores"
          ].reverse();
          statement.result.score.raw = sum / s.length;
          statement.result.score.scaled = statement.result.score.raw / 100.0;
          statement.result.duration = duration.toISOString();
          statement.extensions = {
            "http://xerte.org.uk/grouping/num-grouped-statements": s.length,
          };
          groupingStatements.push(statement);
        }
      }
      // New statements can be handled by drawScore
      adaptiveContent.drawScore(
        groupingStatements,
        interaction,
        url,
        type,
        interactionIndex,
        fullWidth
      );
    };

    this.drawGroupedScores = function (data) {
      // reshuffle
      var groupingStatements = [];
      var userGrouping = [];
      for (var i = 0; i < data.length; i++) {
        var user;
        if (typeof data[i].actor.name != "undefined") {
          user = data[i].actor.name;
        } else if (typeof data[i].actor.mbox != "undefined") {
          user = data[i].actor.mbox.substr(7);
        } else if (typeof data[i].actor.mbox_sha1 != "undefined") {
          user = data[i].actor.mbox_sha1.substr(7);
        } else if (
          typeof data[i].actor.account != "undefined" &&
          typeof data[i].actor.account.name != "undefined"
        ) {
          user = data[i].actor.account.name;
        } else {
          user = "unknown";
        }
        var session = "unknown";
        if (
          typeof data[i].context != "undefined" &&
          typeof data[i].context.extensions != "undefined" &&
          typeof data[i].context.extensions["http://xerte.org.uk/sessionId"] !=
            "undefined"
        ) {
          session = data[i].context.extensions["http://xerte.org.uk/sessionId"];
        }
        if (typeof userGrouping[user] == "undefined") {
          userGrouping[user] = {
            sessions: [],
          };
        }
        if (typeof userGrouping[user]["sessions"][session] == "undefined") {
          userGrouping[user]["sessions"][session] = [];
        }
        userGrouping[user]["sessions"][session].push(i);
      }

      // Calculate averages and create groupingStatments, which are pseudo xAPI statements which are a combination of all the grouping statements
      // Hmm... tric to enumerate array elements
      var userGroupingKeys = Object.keys(userGrouping);
      for (var i = 0; i < userGroupingKeys.length; i++) {
        var sessions = userGrouping[userGroupingKeys[i]];
        var sessionsKeys = Object.keys(sessions["sessions"]);
        for (var j = 0; j < sessionsKeys.length; j++) {
          var s = sessions["sessions"][sessionsKeys[j]];
          // make a full copy of statement
          var statement = JSON.parse(JSON.stringify(data[s[0]]));
          var sum = statement.result.score.raw;
          var duration = moment.duration(statement.result.duration);
          if (statement.result.extensions === undefined) {
            statement.result.extensions = {};
          }
          statement.result.extensions[
            "http://xerte.org.uk/result/grouping/scores"
          ] = [];
          statement.result.extensions[
            "http://xerte.org.uk/result/grouping/scores"
          ].push([
            [data[0].object.definition.name["en-US"]],
            data[s[0]].result.score.raw,
          ]);
          for (var k = 1; k < s.length; k++) {
            statement.result.extensions[
              "http://xerte.org.uk/result/grouping/scores"
            ].push([
              [data[s[k]].object.definition.name["en-US"]],
              data[s[k]].result.score.raw,
            ]);
            sum += data[s[k]].result.score.raw;
            duration.add(moment.duration(data[s[k]].result.duration));
          }
          statement.result.extensions[
            "http://xerte.org.uk/result/grouping/scores"
          ].reverse();
          statement.result.score.raw = sum / s.length;
          statement.result.score.scaled = statement.result.score.raw / 100.0;
          statement.result.duration = duration.toISOString();
          if (statement.extensions === undefined) {
            statement.extensions = {};
          }
          statement.extensions = {
            "http://xerte.org.uk/grouping/num-grouped-statements": s.length,
          };
          if (statement.context.contextActivities.grouping === undefined) {
            statement.context.contextActivities.grouping = [];
            let groupingName = {
              definition: {
                name: {
                  "en-US":
                    statement.context.extensions[
                      "http://xerte.org.uk/opinionClass"
                    ],
                },
              },
            };
            statement.context.contextActivities.grouping.push(groupingName); //[0].definition.name["en-US"] = statement.context.extensions['http://xerte.org.uk/opinionClass'];
          }
          groupingStatements.push(statement);
        }
      }
      // New statements can be handled by drawScore
      return groupingStatements;
    };

    this.orderInteractions = function (interactions, handler) {
      promises = [];
      allInteractions = interactions;
      for (
        var interactionIndex = 0;
        interactionIndex < interactions.length;
        interactionIndex++
      ) {
        interaction = interactions[interactionIndex];
        errors = verifyInteraction(interaction);
        if (errors.length > 0) {
          $("#adaptiveContentMain").append(
            "<div id='errors-" + interactionIndex + "'></div>"
          );
          errors.forEach(function (error) {
            $("#adaptiveContentMain #errors-" + interactionIndex).append(error);
          });
          continue;
        }
        xerteurl = interaction.getAttribute("xerteurl");
        xertelo = interaction.getAttribute("xertelo");
        xertelabel = interaction.getAttribute("label");
        name = interaction.getAttribute("name");
        interactionType = interaction.getAttribute("interactionType");
        opinionClass = interaction.getAttribute("opinionClass");
        if (opinionClass == undefined) {
          opinionClass = null;
        }
        group = interaction.getAttribute("groupFromUrl");
        if (group == undefined) {
          group = "";
        } else {
          if (group == "true") {
            if (x_urlParams["group"] != undefined) {
              group = decodeURIComponent(x_urlParams["group"]);
            } else {
              if (interaction.getAttribute("groupName") != undefined) {
                group = interaction.getAttribute("groupName");
              } else {
                group = "";
              }
            }
          } else {
            group = "";
          }
        }
        filter_context_id = (interaction.getAttribute("contextFilter") == 'true'? true : false);
        promises.push(
          new Promise(function (resolve, reject) {
            var verb = "http://adlnet.gov/expapi/verbs/scored";
            if (
              interactionType == "answer" ||
              interactionType == "opinionclasses"
            ) {
              verb = "http://adlnet.gov/expapi/verbs/answered";
            }
            getStatements(
              xerteurl,
              xertelo,
              xertelabel,
              verb,
              opinionClass,
              interactionType,
              hasToRetrieveAll(interaction),
              interactionIndex,
              group,
              filter_context_id,
              false,
              function (
                data,
                interaction,
                url,
                type,
                interactionIndex,
                fullWidth
              ) {
                if (interaction !== undefined) {
                  interactions[interactionIndex].data = data;
                  interactions[interactionIndex].score = Number.MAX_VALUE;
                  interactions[interactionIndex].index = interactionIndex;
                  if (
                    data.length > 0 &&
                    data[0].result != null &&
                    data[0].result.score != null &&
                    data[0].result.score.raw != null
                  ) {
                    interactions[interactionIndex].score =
                      data[0].result.score.raw;
                  }
                }
                adaptiveContent.resolved++;
                $("#loader_text").html(
                  adaptiveContent.resolved + "/" + adaptiveContent.totalresolved
                );
                resolve();
              }
            );
          })
        );
        //wait until promises
      }
      Promise.all(promises, function () {}).then(function () {
        var sortorder = "none";
        // find elements that should not be sorted
        var donotsort = [];
        var j = 0;
        for (var i = 0; i < interactions.length; i++) {
          if (interactions[i].getAttribute("doNotSort") === "true") {
            donotsort[j] = interactions[i].index;
            j++;
          }
        }
        if (x_currentPageXML.getAttribute("sortOrder") != null) {
          sortorder = x_currentPageXML.getAttribute("sortOrder");
        }
        if (sortorder == "increasing") {
          interactions.sort(function (a, b) {
            if (a.score < b.score) {
              return -1;
            }
            if (a.score > b.score) {
              return 1;
            }
            return 0;
          });
        } else if (sortorder == "decreasing") {
          interactions.sort(function (a, b) {
            if (a.score < b.score) {
              return 1;
            }
            if (a.score > b.score) {
              return -1;
            }
            return 0;
          });
        }
        // Resort elements that should not be sorted
        if (donotsort.length > 0) {
          for (var i = 0; i < donotsort.length; i++) {
            for (var j = 0; j < interactions.length; j++) {
              if (interactions[j].index == donotsort[i]) {
                // Move interactions[j] to poistion i
                for (var k = j; k > i; k--) {
                  // Swap k with k-1
                  var interaction = interactions[k - 1];
                  interactions[k - 1] = interactions[k];
                  interactions[k] = interaction;
                }
              }
            }
          }
        }
        handler(interactions);
      });
    };

    this.setUpListed = function () {
      $("#adaptiveContentMain").append(
        '<div class="splitScreen"><div class="left"></div><div class="right"></div></div>'
      );
      $("#adaptiveContentMain").addClass("listed");
      $(".left").append('<div id="listPanel" class="panel qPanel">');
      $(".right").append('<div id="infoPanel" class="qPanel">');
      $("#listPanel").append(
        '<div id="introductionText"></div><div id="loader"><div><img class="loading-gif" src="' +
          x_templateLocation +
          'common_html5/loading16.gif"/></div><div><p id="loader_text"></p></div></div><div id="adaptiveContentList"></div>'
      );
      //$("#infoPanel").append("<h3>Current block</h3>");

      // Set heights
      var height = $x_pageHolder.height();
      var pageDiv = $("#x_pageDiv");
      pageDiv.css("padding-bottom", "0px");
      pageDiv.height(height - (pageDiv.innerHeight() - pageDiv.height()));
      $("#adaptiveContentMain .splitScreen .left").height(pageDiv.height());
      $("#adaptiveContentMain .splitScreen .right").height(pageDiv.height());

      interactions = $(x_currentPageXML).children();
      $("#adaptiveContentList").append("<ul></ul>");
      var $this = this;
      this.resolved = 0;
      this.totalresolved = interactions.length;
      $("#loader_text").html(this.resolved + "/" + this.totalresolved);
      this.orderInteractions(interactions, function (oInteractions) {
        $("#loader").hide();
        $("#introductionText").html(
          x_currentPageXML.getAttribute("introduction")
        );

        interactions = oInteractions;
        var scoreLabelText = interaction.getAttribute("scoreText");
        if (scoreLabelText == undefined) {
          scoreLabelText = "Your score is {0}";
        }

        for (
          var interactionIndex = 0;
          interactionIndex < oInteractions.length;
          interactionIndex++
        ) {
          interaction = oInteractions[interactionIndex];
          errors = verifyInteraction(interaction);
          if (errors.length > 0) {
            $("#adaptiveContentList ul").append(
              "<li class='select-interaction' data-interaction-index='" +
                interactionIndex +
                "'><div id='errors-" +
                interactionIndex +
                "'></div></li>"
            );
            errors.forEach(function (error) {
              $("#adaptiveContentList #errors-" + interactionIndex).append(
                error
              );
            });
            continue;
          }
          name = interaction.getAttribute("name");
          div = $("<div></div>");
          var scoretext = "";
          if (interaction.score != Number.MAX_VALUE) {
            scoretext =
              "<div class='score'><p>" +
              scoreLabelText.replace(
                "{0}",
                Math.round(interaction.score * 10) / 10
              ) +
              "</p></div>";
          }
          div.html(
            "<h2><p>" +
              name +
              "</p></h2>" +
              scoretext +
              "<div class='introduction'>" +
              interaction.getAttribute("introduction") +
              "</div><div class='message'></div>"
          );

          $("#adaptiveContentList ul").append(
            "<li class='select-interaction' data-interaction-index='" +
              interactionIndex +
              "'>" +
              div.html() +
              "</li>"
          );
        }
        $("#infoPanel").html("");
        if (oInteractions.length > 0) {
          $this.drawBlock("#infoPanel", oInteractions[0], 0, false);
          $('li.select-interaction[data-interaction-index="0"]').addClass(
            "selected"
          );
          adaptiveContent.selected = 0;
        }
        $("#listPanel ul li").click(function () {
          $(
            'li.select-interaction[data-interaction-index="' +
              adaptiveContent.selected +
              '"]'
          ).removeClass("selected");
          adaptiveContent.selected = $(this).data("interaction-index");
          $("#infoPanel").html("");
          $(
            'li.select-interaction[data-interaction-index="' +
              adaptiveContent.selected +
              '"]'
          ).addClass("selected");
          $this.drawBlock(
            "#infoPanel",
            oInteractions[adaptiveContent.selected],
            adaptiveContent.selected,
            false
          );
        });
      });
      x_pageLoaded();
    };

    this.setUpUnlisted = function () {
      if (x_currentPageXML.getAttribute('disableprinting') !== 'true') {
        $("#adaptiveContentMain").append(
            '<div id="button-placeholder"><button id="printBtn" hidden></button></div>'
        );

        $("#printBtn")
        .button({
          label: 'print'
        })
        .click(async function() {
            $("#adaptiveContentMain").prepend("<div id='print-overlay'><img id='print-overlay-spinner' src='" + x_templateLocation + "common_html5/loading16.gif'></div>");
            let filename = 'xerte-adaptive-content.pdf';
            if (x_currentPageXML.getAttribute('name') != null) {
                filename = $("<div>").html(x_currentPageXML.getAttribute('name')).text().replace('\/ ', '_') + '.pdf';
            }
            if (x_params['ic'] != null) {
                logoimg = x_params['ic'];
                // Determine the type of image and set the correct header
                if (logoimg.indexOf('.png') > -1) {
                    logoImgType = 'PNG';
                } else if (logoimg.indexOf('.jpg') > -1) {
                    logoImgType = 'JPEG';
                } else if (logoimg.indexOf('.gif') > -1) {
                    logoImgType = 'GIF';
                } else if (logoimg.indexOf('.svg') > -1) {
                    logoImgType = 'SVG';
                }
                else {
                    logoImgType = '';
                }
                logoImg = new Image();
                logoImg.src = logoimg;
                //logo = '<img class="print-logo" src="' + logoimg + '" style="float:right; height: 20px; margin-top: -40px; padding-right:80px; margin-right:80px;">';
            }
            else
            {
                logoImg = '';
            }
            let pageTitle = $("<div>").html(x_currentPageXML.getAttribute('name')).text();
          /*  $("#adaptiveContent").addClass("hide-screen");
            $(".hide-screen").css("background-color", "black");
            $(".hide-screen").css("z-index", "999");*/
            var canvasWidthHeights = [];

            $(".html2pdf__page-break").each(function (index){
                canvasWidthHeights.push({width: $(this).children().eq(2).children().eq(1).children().eq(0).children().width(), height: $(this).children().eq(2).children().eq(1).children().eq(0).children().height(), parentHeight: $(this).height()})
                $(this).find('.summary-container').addClass('container-print');
                if($(this).find('.graph-container').find('.panel').length > 0){
                    $(this).find('.graph-container').find('.noStyle').addClass("graph-panel");
                }else{
                    $(this).find('.graph-container').find('.noStyle').addClass("graph-no-panel");
                }
            })

            $(".graph-container .panel").addClass("panel-legend");
            $(".graph-container .panel").removeClass("panel");
            $(".panel-legend").css("padding-left", "0px");
            //$(".panel-legend").css("width", "90px");
            $(".panel-legend").css("height", "90px");


            $("#adaptiveContent .panel").addClass("panel-print");
            $("#adaptiveContent .panel").removeClass("panel");
            $(".panel-print").css("width", "794px");
            //$(".panel-print").css("height", "210px");
            $(".panel-print").css("padding", "79.4px");
            //$(".panel-print").prepend(
            //    `<div class="print-title" style="font-size: 20px"><div style="width:500px"><h1>${x_currentPageXML.getAttribute("name")}</h1></div>` + logo + `</div>`
            //);

            $("#adaptiveContent .advice").addClass("advice-print");
            $("#adaptiveContent .advice").removeClass("advice");
            $(".advice-print").css("width", "635px");


           /* $(".graph-container").css("float", "unset");*/
            $(".graph-container").css("width", "635px");
            //$(".graph-container").css("height", "365px");
            $(".graph-panel canvas").css("min-width", "400px");
            $(".graph-panel canvas").css("min-height", "270px");
            $(".graph-panel canvas").css("max-width", "535px");
            $(".graph-panel canvas").css("max-height", "365px");
            $(".graph-panel").css({
                'width' : '535px',
                //'height' : '295px'
            });
            $(".graph-no-panel").css("width", "635px");
            $(".introduction").css("width", "635px");
            $("p").css("font-size", "14px");
            $("ul").css("font-size", "14px");
            adaptiveContent.sizeChanged();
            //debugger;

            await new Promise(resolve => setTimeout(resolve, 1500));
            let opt = {
                filename: filename,
                margin: [10, 0, 10, 0],
                pagebreak: {
                    mode: ['css', 'legacy'],
                    avoid: [ 'p', 'li', 'table', 'thead', 'tfoot', 'tbody', 'tr', 'th', 'td', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ]
                },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
              };
            html2pdf().set(opt).from($("#adaptiveContent")[0]).toPdf().get('pdf').then(function (pdf) {



                $(".graph-container .panel-legend").addClass("panel");
                $(".graph-container .panel-legend").removeClass("panel-legend");

                $("#print-title").remove();
              /*  $("#adaptiveContent .panel").css({'padding' : "0", 'padding-bottom' : "20px"});*/
                $(".panel-print").css("padding", "");
                $("#adaptiveContent .panel-print").addClass("panel");
                $("#adaptiveContent .panel").removeClass("panel-print");
                $(".panel").css("width", "");
                $(".panel").css("height", "");

                $("#adaptiveContent .advice-print").addClass("advice");
                $("#adaptiveContent .advice-print").removeClass("advice-print");
                $(".advice").css("width", "");
                $(".advice").css("padding", "");

                $(".graph-panel canvas").css("min-width", "");
                $(".graph-panel canvas").css("min-height", "");
                $(".graph-panel canvas").css("max-width", "");
                $(".graph-panel canvas").css("max-height", "");
                $(".graph-panel").css("width", "").removeClass("graph-panel");
                $(".graph-no-panel").css("width", "").removeClass("graph-no-panel");

                $(".graph-container").css("width", "");
                $(".graph-container").css("float", "");

                $(".graph").css("width", "");

                $(".introduction").css("width", "");

                $("p").css("font-size", "");
                $("ul").css("font-size", "");
                $(".panel .legend p").css("font-size", "");

                $(".html2pdf__page-break").each(function (index){
                    $(this).css({'height' : canvasWidthHeights[index].parentHeight, 'padding' : "20px"})
                    $(this).find('.graph').css({'width': canvasWidthHeights[index].width, 'height' : canvasWidthHeights[index].height})
                    $(this).find('.container-print').removeClass('container-print');
                    if($(this).find('.graph-container').find('.graph-panel').length > 0){
                        $(this).find('.graph-container').find('.graph-panel').removeClass("graph-panel")
                        $(this).find('.graph-container').find('.graph-panel').children().css({'width': canvasWidthHeights[index].width, 'height' : canvasWidthHeights[index].height})

                    }else{
                        $(this).find('.graph-container').find('.graph-no-panel').removeClass("graph-no-panel")
                    }
                })
                $("#print-overlay").remove();
                $(".print-title").remove();

                // Add the page header and footer
                const totalPages = pdf.internal.getNumberOfPages();

                for (let i = 1; i <= totalPages; i++) {
                    // set footer to every page
                    pdf.setPage(i);
                    // set footer font
                    pdf.setFontSize(12);  //12pt

                    // Set title in the header
                    pdf.text(21, 14, pageTitle);
                    // Add Logo to the right of the header
                    if (logoImg != '')
                    {
                        const imgWidth = logoImg.naturalWidth;
                        const imgHeight = logoImg.naturalHeight;
                        const imgRatio = imgWidth / imgHeight;
                        const logoHeight = 5.3;  //mm = 20px
                        const logoWidth = logoHeight * imgRatio;
                        pdf.addImage(logoImg, logoImgType, pdf.internal.pageSize.getWidth() - logoWidth - 21, 10, logoWidth, logoHeight);
                    }
                    // Add the footer text
                    // this example gets internal pageSize just as an example to locate your text near the borders in case you want to do something like "Page 3 out of 4"
                    const pagenr = x_getLangInfo(x_languageData.find("vocab").find("page")[0], false, "") + " " + (i) + " " + x_getLangInfo(x_languageData.find("vocab").find("of")[0], false, "-") + " " + totalPages
                    const textwidth = pdf.getTextWidth(pagenr);
                    pdf.setFontSize(10);  //10pt
                    pdf.text(pdf.internal.pageSize.getWidth() - textwidth - 21, pdf.internal.pageSize.getHeight() - 7, pagenr);

                }
            }).save();
        });
      }
      $("#adaptiveContentMain").append(
          '<div id="introductionText"></div><div id="adaptiveContent"></div>'
      );
      $("#adaptiveContentMain").addClass("unlisted");
      $("#introductionText").html(
        x_currentPageXML.getAttribute("introduction")
      );
      interactions = $(x_currentPageXML).children();

      x_pageLoaded();

      for (
        var interactionIndex = 0;
        interactionIndex < interactions.length;
        interactionIndex++
      ) {
        interaction = interactions[interactionIndex];
        errors = verifyInteraction(interaction);
        if (errors.length > 0) {
          $("#adaptiveContent").append(
            "<div id='errors-" + interactionIndex + "'></div>"
          );
          errors.forEach(function (error) {
            $("#adaptiveContent #errors-" + interactionIndex).append(error);
          });
          continue;
        }
        xerteurl = interaction.getAttribute("xerteurl");
        xertelo = interaction.getAttribute("xertelo");
        xertelabel = interaction.getAttribute("label");
        name = interaction.getAttribute("name");
        interactionType = interaction.getAttribute("interactionType");
        opinionClass = interaction.getAttribute("opinionClass");
        if (opinionClass == undefined) {
          opinionClass = "";
        }
        group = interaction.getAttribute("groupFromUrl");
        if (group == undefined) {
          group = "";
        } else {
          if (group == "true") {
            if (x_urlParams["group"] != undefined) {
              group = decodeURIComponent(x_urlParams["group"]);
            } else {
              if (interaction.getAttribute("groupName") != undefined) {
                group = interaction.getAttribute("groupName");
              } else {
                group = "";
              }
            }
          } else {
            group = "";
          }
        }
        filter_context_id = (interaction.getAttribute("contextFilter") == 'true'? true : false);

        url = xerteurl + xertelo + "/" + xertelabel;
        if (opinionClass != "") {
          url += "/" + opinionClass;
        }
        this.drawBlock("#adaptiveContent", interaction, interactionIndex, true);
      }

      // Call this function in every model once everything's loaded.
    };
  })();
  adaptiveContent.init();
</script>

<div id="adaptiveContentMain"></div>