6.1 App Screen 3 (UI + Backend integration)

We have used google charts library to create graphs for the third and most interesting screen of our web app.

Web app Screens

Home Screen

click on view Result to go to Enter Credential page and Registration to go to student Registration page

Enter Credential page

Marks Display page

Graphical Analysis and Suggestions (Third major screen of my webapp)

Backend Integration

I have used AJAX -XMLHttpRequest to fetch marks from result table, then used successive calls of these functions to get data for my charts.

To fetch candidate result:

var userphysics=0;
var userchemistry=0;
var usermathematics=0;
var userbiology=0;
var userenglish=0;
var usercomputerscience=0;
function pulluser(){
var request= new XMLHttpRequest();
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE && request.status===200){
console.log(this.responseText);
var response=JSON.parse(this.responseText);

userphysics=Number(response[0].physics);
userchemistry=Number(response[0].chemistry);
usermathematics=Number(response[0].mathematics);
userbiology=Number(response[0].biology);
userenglish=Number(response[0].english);
usercomputerscience=Number(response[0].computer_science);

pullphysics();
}
else{
}
}
request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.send(JSON.stringify({ type:"select", args:{ table:"Result", columns:[ "*" ] , where:{"id":id}}}));
};

To fetch subject wise result of all student: similar calls are made to fetch marks for each subjects.

var physicsavg=0;
var physicsmax=0;
function pullphysics(){
var request= new XMLHttpRequest();
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE && request.status===200){
console.log(this.responseText);
var response=JSON.parse(this.responseText);

var avg=0;
var max=0
for(i=0;i<response.length;i++){
avg+=Number(response[i].physics);
if(max<response[i].physics)
max=response[i].physics;
}
physicsavg = avg/response.length;
console.log(avg/response.length);
console.log(max);
physicsmax = max;
pullchemistry();
}
else{
}
}
request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.send(JSON.stringify({ type:"select", args:{ table:"Result", columns:[ "physics"]}}));
};

To generate Suggestion to improve performance:

function suggestions() {
var arr = [1, 1, 1, 1, 1, 1];
var bad = 0;
if (userphysics < physicsavg){
arr[0] = 0;
bad++;
}
if (userchemistry < chemistryavg){
arr[1] = 0;
bad++;
}
if (usermathematics < mathematicsavg){
arr[2] = 0;
bad++;
}
if (userbiology < biologyavg){
arr[3] = 0;
bad++;
}
if (userenglish < englishavg){
arr[4] = 0;
bad++;
}
if (usercomputerscience < computerscienceavg){
arr[5] = 0;
bad++;
}
if(bad > 0){
var sugg = 'Needs to pay more attention in ';
}
else{
var sugg = 'Well done, marks in all subjects are above average!'
}

var count = 0;
for (var i=0; i<5; i++){
if(arr[i] == 0){
count++;
if(i == 0) { sugg += 'Physics'; }

else if(i == 1){ sugg += 'Chemistry'; }

else if(i == 2){ sugg += 'Mathematics'; }

else if(i == 3){ sugg += 'Biology'; }

else if(i == 4){ sugg += 'English'; }

else { sugg += 'Computer Science'; }

if (bad-count > 1){
sugg += ', ';
}
else if(bad-count == 1){
sugg += ' and ';
}
else{
sugg += ".";
}
}
}
console.log('suggestion: '+sugg);
console.log('bad'+bad);
console.log(arr);
$('#suggestions').html('Suggestions: '+sugg);

}

Links to my webapp:

Link to my webapp

Direct link to third screen my webapp

Next: User feedback and Testing