taxonomy level and score added

main.html

@@ -170,38 +170,85 @@
    data.set("dynamic drawing", 3); // dynamic drawing
    data.set("translatability", 2); // translatability
 
-   function loadNewRadarChart(chartId, data, videotitle) {
+   function loadNewRadarChart(chartId, data, videotitle, score) {
 //       let removalIndex = chartId.data.datasets.indexOf(ds1); //Locate index of ds1
       let removalIndex = 0;
       if(removalIndex >= 0) { //make sure this element exists in the array
          chartId.data.datasets.splice(removalIndex, 1);
       }
 
+      let taxLevel = "G";
+
+      let colorArray =  [
+                  "#f8cc1b90",
+                  "#fa7a4890",
+                  "#31195590",
+                  "#84a2cd90",
+                  "#bed05790",
+                  "#4777cd90",
+                  "#ffa5c890"];
+      let firstValueZero = 10;
+
+      function changeColorsGrey(item, index, arr){
+         if (index >= firstValueZero) {
+            arr[index] = "#AAAAAA33";
+         }
+         console.log(arr);
+      }
+
+      if (data.get("instructional principle") == 0) {
+         firstValueZero = 0;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "0";
+      }
+      else if (data.get("visibility") == 0) {
+         firstValueZero = 1;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "A";
+      }
+      else if (data.get("segmentation") == 0) {
+         firstValueZero = 2;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "B";
+      }
+      else if (data.get("activity") == 0) {
+         firstValueZero = 3;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "C";
+      }
+      else if (data.get("interactivity") == 0) {
+         firstValueZero = 4;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "D";
+      }
+      else if (data.get("dynamic drawing") == 0) {
+         firstValueZero = 5;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "E";
+      }
+      else if (data.get("translatability") == 0) {
+         firstValueZero = 6;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "F";
+      }
+      else {
+         firstValueZero = 10;
+         colorArray.forEach(changeColorsGrey);
+         taxLevel = "G";
+      }
+
 //       chartId.data.labels.push(Array.from(data.keys()));
       chartId.data.datasets =[{
                label: videotitle,
                data: Array.from(data.values()),
-               backgroundColor:  [
+               backgroundColor: colorArray,
-                  "#f8cc1b90",
+               pointBackgroundColor: colorArray,
-                  "#fa7a4890",
-                  "#31195590",
-                  "#84a2cd90",
-                  "#bed05790",
-                  "#4777cd90",
-                  "#ffa5c890"],
-               pointBackgroundColor: [
-                  "#f8cc1b90",
-                  "#fa7a4890",
-                  "#31195590",
-                  "#84a2cd90",
-                  "#bed05790",
-                  "#4777cd90",
-                  "#ffa5c890"],
                borderColor: ['black'],
                borderWidth: 1,
                pointRadius: 6,
             }];
-      chartId.options.plugins.title.text = videotitle;
+      chartId.options.plugins.title.text = videotitle + ", Taxonomy Level: " + taxLevel
+                                          + ", Score: " + score;
       chartId.update();
 
    };
@@ -210,6 +257,9 @@
 
       console.log("Hi!");
 
+
+
+
       let nameValue = document.getElementById("videoname").value;
       console.log(nameValue);
 
@@ -228,11 +278,13 @@
       data_tra = parseInt(document.getElementById("tra_sel").value);
       data.set("translatability", data_tra);
 
+      let score = 0;
+      score = data_ins + data_vis + data_seg + data_act + data_int + data_int + data_dyn + data_tra;
 
       console.log(data);
 
 
-      loadNewRadarChart(chartHandleId, data, nameValue);
+      loadNewRadarChart(chartHandleId, data, nameValue, score);
    }
    </script>
 </head>