diff --git a/main.html b/main.html
index beb8b84..6cabc1c 100644
--- a/main.html
+++ b/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: [
- "#f8cc1b90",
- "#fa7a4890",
- "#31195590",
- "#84a2cd90",
- "#bed05790",
- "#4777cd90",
- "#ffa5c890"],
- pointBackgroundColor: [
- "#f8cc1b90",
- "#fa7a4890",
- "#31195590",
- "#84a2cd90",
- "#bed05790",
- "#4777cd90",
- "#ffa5c890"],
+ backgroundColor: colorArray,
+ pointBackgroundColor: colorArray,
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);
}