diff --git a/frontEnd/archive/1 colour one cell working/colour.js b/frontEnd/archive/1 colour one cell working/colour.js new file mode 100644 index 0000000..6950908 --- /dev/null +++ b/frontEnd/archive/1 colour one cell working/colour.js @@ -0,0 +1,2 @@ +var A0 = document.getElementById("A0"); // cell A0 +A0.style.backgroundColor = "yellow";// \ No newline at end of file diff --git a/frontEnd/archive/1 colour one cell working/index.html b/frontEnd/archive/1 colour one cell working/index.html new file mode 100644 index 0000000..9604f4f --- /dev/null +++ b/frontEnd/archive/1 colour one cell working/index.html @@ -0,0 +1,62 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/frontEnd/archive/2 added switch case working/colour.js b/frontEnd/archive/2 added switch case working/colour.js new file mode 100644 index 0000000..4180a1f --- /dev/null +++ b/frontEnd/archive/2 added switch case working/colour.js @@ -0,0 +1,41 @@ +A0 = document.getElementById("A0"); // select cell by ID +A1 = document.getElementById("A0"); // select cell by ID + +//var score = 1; // engagement score simulation (-2 < score < 2) +// switch case + +function switchColour (score){ + + switch (score) { + case -2: + console.log("score is -2 so colour is red"); + A0.style.backgroundColor = "red";// set selected cell's colour + break; + + case -1: + console.log("score is -1 so colour is organge"); + A0.style.backgroundColor = "#ff6d00";// set selected cell's colour (orange) + break; + + case 0: + A0.style.backgroundColor = "yellow";// set selected cell's colour + break; + + case 1: + A0.style.backgroundColor = "rgb(190,255,0)";// set selected cell's colour (yellowish-green) + break; + + case 2: + A0.style.backgroundColor = "green";// set selected cell's colour + break; + + default: + A0.style.backgroundColor = "grey"; + break; + }; +} + +switchColour(2); // specify score + +// +// \ No newline at end of file diff --git a/frontEnd/archive/2 added switch case working/index.html b/frontEnd/archive/2 added switch case working/index.html new file mode 100644 index 0000000..9604f4f --- /dev/null +++ b/frontEnd/archive/2 added switch case working/index.html @@ -0,0 +1,62 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/frontEnd/archive/3 adress any cell working/10x10 table/colour.js b/frontEnd/archive/3 adress any cell working/10x10 table/colour.js new file mode 100644 index 0000000..2cfd467 --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/10x10 table/colour.js @@ -0,0 +1,53 @@ +A0 = document.getElementById("A0"); // select cell by ID +A1 = document.getElementById("A1"); // select cell by ID +A2 = document.getElementById("A2"); // select cell by ID +A3 = document.getElementById("A3"); // select cell by ID +A4 = document.getElementById("A4"); // select cell by ID +// function selectCell (cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = "red"; +// } + +// function colourCell (colour,cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = colour;// set selected cell's colour (orange) +// } + +function switchColour (score, cell){ + currentCell = cell; // set current cell + switch (score) { + case -2: + console.log("score is -2 so colour is red"); + + currentCell.style.backgroundColor = "#dd2c00";// red set selected cell's colour + break; + + case -1: + console.log("score is -1 so colour is orange"); + currentCell.style.backgroundColor = "#ffa726";// set orange selected cell's colour (orange) + break; + + case 0: + currentCell.style.backgroundColor = "#ffeb3b";// yellow set selected cell's colour + break; + + case 1: + currentCell.style.backgroundColor = "#b2ff59";// yellow-green set selected cell's colour (yellowish-green) + break; + + case 2: + currentCell.style.backgroundColor = "#64dd17";// green set selected cell's colour + break; + + default: + currentCell.style.backgroundColor = "grey"; + break; + }; +} +switchColour(-2, A0); // specify score,cell +switchColour(-1, A1); // specify score,cell +switchColour(-0, A2); // specify score,cell +switchColour(1, A3); // specify score,cell +switchColour(2, A4); // specify score,cell +// +// \ No newline at end of file diff --git a/frontEnd/archive/3 adress any cell working/10x10 table/index.html b/frontEnd/archive/3 adress any cell working/10x10 table/index.html new file mode 100644 index 0000000..1fd0fc2 --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/10x10 table/index.html @@ -0,0 +1,136 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/frontEnd/archive/3 adress any cell working/3x3 table/colour.js b/frontEnd/archive/3 adress any cell working/3x3 table/colour.js new file mode 100644 index 0000000..3c593d1 --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/3x3 table/colour.js @@ -0,0 +1,51 @@ +A0 = document.getElementById("A0"); // select cell by ID +A1 = document.getElementById("A1"); // select cell by ID +A2 = document.getElementById("A2"); // select cell by ID +B0 = document.getElementById("B0"); // select cell by ID +B1 = document.getElementById("B1"); // select cell by ID +B2 = document.getElementById("B2"); // select cell by ID +C0 = document.getElementById("C0"); // select cell by ID +C1 = document.getElementById("C1"); // select cell by ID +C2 = document.getElementById("C2"); // select cell by ID + + +function switchColour (score, cell){ + currentCell = cell; // set current cell + switch (score) { + case -2: + console.log("score is -2 so colour is red"); + currentCell.style.backgroundColor = "#dd2c00";// red set selected cell's colour + break; + + case -1: + console.log("score is -1 so colour is orange"); + currentCell.style.backgroundColor = "#ffa726";// set orange selected cell's colour (orange) + break; + + case 0: + currentCell.style.backgroundColor = "#ffeb3b";// yellow set selected cell's colour + break; + + case 1: + currentCell.style.backgroundColor = "#b2ff59";// yellow-green set selected cell's colour (yellowish-green) + break; + + case 2: + currentCell.style.backgroundColor = "#64dd17";// green set selected cell's colour + break; + + default: + currentCell.style.backgroundColor = "grey"; + break; + }; +} +switchColour(-2, A0); // specify score,cell +switchColour(-1, A1); // specify score,cell +switchColour(-0, A2); // specify score,cell +switchColour(2, B0); // specify score,cell +switchColour(-1, B1); // specify score,cell +switchColour(-0, B2); // specify score,cell +switchColour(-2, C0); // specify score,cell +switchColour(1, C1); // specify score,cell +switchColour(-0, C2); // specify score,cell + diff --git a/frontEnd/archive/3 adress any cell working/3x3 table/index.html b/frontEnd/archive/3 adress any cell working/3x3 table/index.html new file mode 100644 index 0000000..00e35c2 --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/3x3 table/index.html @@ -0,0 +1,29 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/frontEnd/archive/3 adress any cell working/5x5 table/colour.js b/frontEnd/archive/3 adress any cell working/5x5 table/colour.js new file mode 100644 index 0000000..f645372 --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/5x5 table/colour.js @@ -0,0 +1,94 @@ +A0 = document.getElementById("A0"); // select cell by ID +A1 = document.getElementById("A1"); // select cell by ID +A2 = document.getElementById("A2"); // select cell by ID +A3 = document.getElementById("A3"); // select cell by ID +A4 = document.getElementById("A4"); // select cell by ID +B0 = document.getElementById("B0"); // select cell by ID +B1 = document.getElementById("B1"); // select cell by ID +B2 = document.getElementById("B2"); // select cell by ID +B3 = document.getElementById("B3"); // select cell by ID +B4 = document.getElementById("B4"); // select cell by ID +C0 = document.getElementById("C0"); // select cell by ID +C1 = document.getElementById("C1"); // select cell by ID +C2 = document.getElementById("C2"); // select cell by ID +C3 = document.getElementById("C3"); // select cell by ID +C4 = document.getElementById("C4"); // select cell by ID +D0 = document.getElementById("D0"); // select cell by ID +D1 = document.getElementById("D1"); // select cell by ID +D2 = document.getElementById("D2"); // select cell by ID +D3 = document.getElementById("D3"); // select cell by ID +D4 = document.getElementById("D4"); // select cell by ID +E0 = document.getElementById("E0"); // select cell by ID +E1 = document.getElementById("E1"); // select cell by ID +E2 = document.getElementById("E2"); // select cell by ID +E3 = document.getElementById("E3"); // select cell by ID +E4 = document.getElementById("E4"); // select cell by ID +// function selectCell (cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = "red"; +// } + +// function colourCell (colour,cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = colour;// set selected cell's colour (orange) +// } + +function switchColour (score, cell){ + currentCell = cell; // set current cell + switch (score) { + case -2: + console.log("score is -2 so colour is red"); + + currentCell.style.backgroundColor = "#dd2c00";// red set selected cell's colour + break; + + case -1: + console.log("score is -1 so colour is orange"); + currentCell.style.backgroundColor = "#ffa726";// set orange selected cell's colour (orange) + break; + + case 0: + currentCell.style.backgroundColor = "#ffeb3b";// yellow set selected cell's colour + break; + + case 1: + currentCell.style.backgroundColor = "#b2ff59";// yellow-green set selected cell's colour (yellowish-green) + break; + + case 2: + currentCell.style.backgroundColor = "#64dd17";// green set selected cell's colour + break; + + default: + currentCell.style.backgroundColor = "grey"; + break; + }; +} +switchColour(2, A0); // specify score,cell +switchColour(-1, A1); // specify score,cell +switchColour(-0, A2); // specify score,cell +switchColour(1, A3); // specify score,cell +switchColour(2, A4); // specify score,cell +switchColour(-2, B0); // specify score,cell +switchColour(-1, B1); // specify score,cell +switchColour(-0, B2); // specify score,cell +switchColour(1, B3); // specify score,cell +switchColour(2, B4); // specify score,cell +switchColour(-2, C0); // specify score,cell +switchColour(-1, C1); // specify score,cell +switchColour(-0, C2); // specify score,cell +switchColour(1, C3); // specify score,cell +switchColour(2, C4); // specify score,cell +switchColour(-2, D0); // specify score,cell +switchColour(-1, D1); // specify score,cell +switchColour(-0, D2); // specify score,cell +switchColour(1, D3); // specify score,cell +switchColour(2, D4); // specify score,cell +switchColour(-2, E0); // specify score,cell +switchColour(-1, E1); // specify score,cell +switchColour(-0, E2); // specify score,cell +switchColour(1, E3); // specify score,cell +switchColour(2, E4); // specify score,cell + +// +// \ No newline at end of file diff --git a/frontEnd/archive/3 adress any cell working/5x5 table/index.html b/frontEnd/archive/3 adress any cell working/5x5 table/index.html new file mode 100644 index 0000000..37e7750 --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/5x5 table/index.html @@ -0,0 +1,49 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/frontEnd/archive/3 adress any cell working/colour.js b/frontEnd/archive/3 adress any cell working/colour.js new file mode 100644 index 0000000..d3309fc --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/colour.js @@ -0,0 +1,51 @@ +A0 = document.getElementById("A0"); // select cell by ID +A1 = document.getElementById("A1"); // select cell by ID +A2 = document.getElementById("A2"); // select cell by ID + +// function selectCell (cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = "red"; +// } + +// function colourCell (colour,cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = colour;// set selected cell's colour (orange) +// } + +function switchColour (score, cell){ + currentCell = cell; // set current cell + switch (score) { + case -2: + console.log("score is -2 so colour is red"); + + currentCell.style.backgroundColor = "#dd2c00";// red set selected cell's colour + break; + + case -1: + console.log("score is -1 so colour is organge"); + A0.style.backgroundColor = "#ffa726";// set orange selected cell's colour (orange) + break; + + case 0: + A0.style.backgroundColor = "#ffeb3b";// yellow set selected cell's colour + break; + + case 1: + A0.style.backgroundColor = "#b2ff59";// yellow-green set selected cell's colour (yellowish-green) + break; + + case 2: + A0.style.backgroundColor = "#64dd17";// green set selected cell's colour + break; + + default: + A0.style.backgroundColor = "grey"; + break; + }; +} +switchColour(-2, A0); // specify score,cell +switchColour(-1, A1); // specify score,cell +switchColour(-0, A2); // specify score,cell + +// +// \ No newline at end of file diff --git a/frontEnd/archive/3 adress any cell working/index.html b/frontEnd/archive/3 adress any cell working/index.html new file mode 100644 index 0000000..9604f4f --- /dev/null +++ b/frontEnd/archive/3 adress any cell working/index.html @@ -0,0 +1,62 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/frontEnd/current/MVC plan/MVCPlan.js b/frontEnd/current/MVC plan/MVCPlan.js new file mode 100644 index 0000000..ca26afb --- /dev/null +++ b/frontEnd/current/MVC plan/MVCPlan.js @@ -0,0 +1,45 @@ +// ** Model ** // Incoming data from backend - to replace with AJAX GET + +var model = { + // assuming engagment score are integers between -2 and +2 + "userID1": { + "engagement": 1 + }, + "userID2": { + "engagement": 2 + } +}; + +// ** Control ** // Extracting data from backend and passing it on to the front end + +var control = { + // Init // make it go! + + // Create object with key:value pairs userID:engagement from incoming data stream + + // Convert engagement values into integers between -2 an +2 +}; + + + +// ** View ** // Front end + +var view = { + init: function() { // Initialize grid view + + // set all grid cells to grey until colour data is ready + + this.render(); + }, + + render: function(){ // Render grid view (refresh every time new data is recieved) + + // Store variables for DOM pointers to table cells + + // Assign each new user to fixed cell + + // Colour cells according to users' engagement + } +}; + +control.init(); // make it go! \ No newline at end of file diff --git a/frontEnd/current/grid/colour.js b/frontEnd/current/grid/colour.js new file mode 100644 index 0000000..56d0740 --- /dev/null +++ b/frontEnd/current/grid/colour.js @@ -0,0 +1,53 @@ +A0 = document.getElementById("A0"); // select cell by ID +A1 = document.getElementById("A1"); // select cell by ID +A2 = document.getElementById("A2"); // select cell by ID +A3 = document.getElementById("A3"); // select cell by ID +A4 = document.getElementById("A4"); // select cell by ID +// function selectCell (cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = "red"; +// } + +// function colourCell (colour,cell){ +// currentCell = cell; +// currentCell.style.backgroundColor = colour;// set selected cell's colour (orange) +// } + +function switchColour (score, cell){ + currentCell = cell; // set current cell + switch (score) { // Add case for engagement = -3 (no face) + case -2: + console.log("score is -2 so colour is red"); + + currentCell.style.backgroundColor = "#dd2c00";// red set selected cell's colour + break; + + case -1: + console.log("score is -1 so colour is orange"); + currentCell.style.backgroundColor = "#ffa726";// set orange selected cell's colour (orange) + break; + + case 0: + currentCell.style.backgroundColor = "#ffeb3b";// yellow set selected cell's colour + break; + + case 1: + currentCell.style.backgroundColor = "#b2ff59";// yellow-green set selected cell's colour (yellowish-green) + break; + + case 2: + currentCell.style.backgroundColor = "#64dd17";// green set selected cell's colour + break; + + default: + currentCell.style.backgroundColor = "grey"; + break; + }; +} +switchColour(-2, A0); // specify score,cell +switchColour(-1, A1); // specify score,cell +switchColour(-0, A2); // specify score,cell +switchColour(1, A3); // specify score,cell +switchColour(2, A4); // specify score,cell +// +// \ No newline at end of file diff --git a/frontEnd/current/grid/grid.html b/frontEnd/current/grid/grid.html new file mode 100644 index 0000000..8f833d8 --- /dev/null +++ b/frontEnd/current/grid/grid.html @@ -0,0 +1,93 @@ + + + + + Engagement Indicator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/frontEnd/current/incomingDataFormat/archive/extractingData.js b/frontEnd/current/incomingDataFormat/archive/extractingData.js new file mode 100644 index 0000000..d60ee34 --- /dev/null +++ b/frontEnd/current/incomingDataFormat/archive/extractingData.js @@ -0,0 +1,73 @@ +// Assuming maximum 64 users (students) so 8x8 grid + +// ** Model ** // Incoming data from backend - +//to replace with AJAX GET method when we have a the real data stream +//from our backend + +var model = { + "userID1": { + "engagement": 1.0 + }, + "userID2": { + "engagement": 0.9 + } +}; + +// ** Control ** // Extracting data from backend and passing it on to the front end + +var control = { + // Init // make it go! + // Set all grid cells as unassigned (initially) + + // Get current data snapshot# + getCurrentData: function(){ + return model; // getting static snapshot of the data is important + //because order of users may change + // in direct data feed from the server + }, + + // Create object with key:value pairs userID:engagement from incoming data stream + extractUserIDs: function() { + var UserIDs = Object.keys(model); + //console.log(UserIDs); // outputs [0:userID1; 1:userID2 ...] + return UserIDs; + }, + extractEngagementsData: function(){ + for (i=0; i + + + + title + + + + + diff --git a/frontEnd/current/incomingDataFormat/archive/model.js b/frontEnd/current/incomingDataFormat/archive/model.js new file mode 100644 index 0000000..4516897 --- /dev/null +++ b/frontEnd/current/incomingDataFormat/archive/model.js @@ -0,0 +1,9 @@ +var data = { + "userID1": { + "engagement": 1.0 + }, + "userID2": { + "engagement": 0.9 + } +}; + diff --git a/frontEnd/current/incomingDataFormat/current/extractingData.js b/frontEnd/current/incomingDataFormat/current/extractingData.js new file mode 100644 index 0000000..67459cb --- /dev/null +++ b/frontEnd/current/incomingDataFormat/current/extractingData.js @@ -0,0 +1,80 @@ +// Assuming maximum 64 users (students) so 8x8 grid + +// ** Model ** // Incoming data from backend - +//to replace with AJAX GET method when we have a the real data stream +//from our backend +// Order of user IDs may change in real data stream + +var model = { + "userID1": { + "engagement": 2 + }, + "userID2": { + "engagement": 1 + } +}; + +// ** Control ** // Extracting data from backend and passing it on to the front end + +var control = { + // Init // make it go! + // Set all grid cells as unassigned (initially) + + // Get current data snapshot from incoming data stream + getCurrentData: function(){ + return model; // getting static snapshot of the data is important + //because order of users may change + // in direct data feed from the server + }, + // Creating userID:cell + // extract array of user IDs from data object snapshot + extractUserIDs: function() { + var currentData = this.getCurrentData(); // snapshot from data stream + var UserIDs = Object.keys(currentData); + return UserIDs; // outputs array [0:userID1; 1:userID2 ...] + }, + // extract array of engagements from data object snapshot + createEngagements: function(){ + var currentData = this.getCurrentData(); + console.log("current data is: " + currentData); + var currentUserIDs = this.extractUserIDs(); + console.log("currentUserIDs are: "+ currentUserIDs); + for (i=0; i + + + + title + + + + + diff --git a/frontEnd/current/incomingDataFormat/current/model.js b/frontEnd/current/incomingDataFormat/current/model.js new file mode 100644 index 0000000..4516897 --- /dev/null +++ b/frontEnd/current/incomingDataFormat/current/model.js @@ -0,0 +1,9 @@ +var data = { + "userID1": { + "engagement": 1.0 + }, + "userID2": { + "engagement": 0.9 + } +}; +