Skip to content

2
2020-101
Commit 20fd8ccb authored by I.K Seneviratne's avatar I.K Seneviratne
Browse files
Options

Committing considerable changes in Home page for displaying student behavior... 

Committing considerable changes in Home page for displaying student behavior summary for given time period .
parent 90df2c29
Hide whitespace changes
Inline Side-by-side
Showing with 432 additions and 69 deletions
FirstApp/api.py
View file @ 20fd8ccb
......@@ -669,6 +669,11 @@ class GetStudentBehaviorSummaryForPeriod(APIView):
isRecordFound = False
activity_percentages = {}
emotion_percentages = {}
individual_lec_activties = []
individual_lec_emotions = []
activity_labels = []
emotion_labels = []
current_date = datetime.datetime.now().date()
option_date = datetime.timedelta(days=int_option)
......@@ -686,7 +691,7 @@ class GetStudentBehaviorSummaryForPeriod(APIView):
isRecordFound = True
activity_serializer = LectureActivitySerializer(lec_activity, many=True)
activity_data = activity_serializer.data
activity_percentages = ar.get_student_activity_summary_for_period(activity_data)
activity_percentages, individual_lec_activties, activity_labels = ar.get_student_activity_summary_for_period(activity_data)
# retrieving lecture emotions
lec_emotion = LectureEmotionReport.objects.filter(
......@@ -698,12 +703,16 @@ class GetStudentBehaviorSummaryForPeriod(APIView):
if len(lec_emotion) > 0:
emotion_serializer = LectureEmotionSerializer(lec_emotion, many=True)
emotion_data = emotion_serializer.data
emotion_percentages = ed.get_student_emotion_summary_for_period(emotion_data)
emotion_percentages, individual_lec_emotions, emotion_labels = ed.get_student_emotion_summary_for_period(emotion_data)
return Response({
"activity_response": activity_percentages,
"emotion_response": emotion_percentages,
"individual_activities": individual_lec_activties,
"individual_emotions": individual_lec_emotions,
"activity_labels": activity_labels,
"emotion_labels": emotion_labels,
"isRecordFound": isRecordFound
})
FirstApp/emotion_detector.py
View file @ 20fd8ccb
......@@ -356,9 +356,21 @@ def get_student_emotion_summary_for_period(emotions):
# get the number of activties to calculate average
no_of_emotions = len(emotions)
individual_lec_emotions = []
emotion_labels = ["happy_perct", "sad_perct", "angry_perct", "disgust_perct", "surprise_perct", "neutral_perct"]
# iterate through the activities
for emotion in emotions:
individual_emotion = {}
individual_emotion["happy_perct"] = float(emotion['happy_perct'])
individual_emotion["sad_perct"] = float(emotion['sad_perct'])
individual_emotion["angry_perct"] = float(emotion['angry_perct'])
individual_emotion["disgust_perct"] = float(emotion['disgust_perct'])
individual_emotion["surprise_perct"] = float(emotion['surprise_perct'])
individual_emotion["neutral_perct"] = float(emotion['neutral_perct'])
happy_perct_combined += float(emotion['happy_perct'])
sad_perct_combined += float(emotion['sad_perct'])
angry_perct_combined += float(emotion['angry_perct'])
......@@ -366,6 +378,8 @@ def get_student_emotion_summary_for_period(emotions):
surprise_perct_combined += float(emotion['surprise_perct'])
neutral_perct_combined += float(emotion['neutral_perct'])
# append to the list
individual_lec_emotions.append(individual_emotion)
# calculate the average percentages
......@@ -384,4 +398,4 @@ def get_student_emotion_summary_for_period(emotions):
percentages["surprise_perct"] = surprise_average_perct
percentages["neutral_perct"] = neutral_average_perct
return percentages
\ No newline at end of file
return percentages, individual_lec_emotions, emotion_labels
\ No newline at end of file
FirstApp/logic/activity_recognition.py
View file @ 20fd8ccb
......@@ -584,12 +584,24 @@ def get_student_activity_summary_for_period(activities):
# get the number of activties to calculate average
no_of_activities = len(activities)
individual_lec_activities = []
activity_labels = ["phone_perct", "listening_perct", "writing_perct"]
# iterate through the activities
for activity in activities:
individual_activity = {}
individual_activity["phone_perct"] = float(activity['phone_perct'])
individual_activity["listening_perct"] = float(activity['listening_perct'])
individual_activity["writing_perct"] = float(activity['writing_perct'])
phone_checking_perct_combined += float(activity['phone_perct'])
listening_perct_combined += float(activity['listening_perct'])
note_taking_perct_combined += float(activity['writing_perct'])
# append to the list
individual_lec_activities.append(individual_activity)
# calculate the average percentages
......@@ -602,4 +614,4 @@ def get_student_activity_summary_for_period(activities):
percentages["listening_perct"] = listening_average_perct
percentages["writing_perct"] = note_taking_average_perct
return percentages
\ No newline at end of file
return percentages, individual_lec_activities, activity_labels
\ No newline at end of file
FirstApp/templates/FirstApp/Home.html
View file @ 20fd8ccb
{% extends 'FirstApp/template.html' %}
<!DOCTYPE html>
<html lang="en">
<!--{% block 'head' %}-->
<!--{% endblock %}-->
{#{% block 'head' %}#}
{# {% endblock %}#}
<body id="page-top">
{% block javascript %}
......@@ -34,6 +34,7 @@
var global_lecture_date = '';
var global_lecture_video_id = '';
var global_video_name = '';
var student_behavior_summary = {};
$(document).ready(function () {
......@@ -190,7 +191,6 @@
let test_date = new Date(0, 0, 0, 0, 12, 30, 0);
alert('test date: ' + test_date);
//render the chart onto the modal body
renderChart();
......@@ -305,6 +305,165 @@
chart.render();
}
//this function will render the chart for Activity statistics
function renderActivityStatistics() {
let individual_activities = student_behavior_summary.individual_activities;
let activity_labels = student_behavior_summary.activity_labels;
let activity_length = individual_activities.length;
let label_length = activity_labels.length;
let data = [];
let colors = [
"#000000",
"#00FF00",
"#0000FF"
];
for (let i = 0; i < label_length; i++) {
let label = activity_labels[i];
let datapoints = [];
for (let j = 0; j < activity_length; j++) {
let activity = individual_activities[j];
datapoints.push({label: label, y: activity[label]});
}
let obj = {
type: "line",
showInLegend: true,
name: "Activity-{" + i + "}",
markerType: "square",
{#xValueFormatString: "DD MMM, YYYY",#}
xValueFormatString: "Lec " + (i+1),
color: getRandomColor(),
dataPoints: datapoints
};
data.push(obj);
}
var chart = new CanvasJS.Chart("activity_stats_chart", {
animationEnabled: true,
theme: "light2",
title: {
text: "Activity Statistics"
},
axisX: {
title: "Lecture",
{#valueFormatString: "DD MMM",#}
valueFormatString: "lec",
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Percentage",
includeZero: true,
crosshair: {
enabled: true
}
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: data
});
chart.render();
}
//this function render the chart for Emotion statistics
function renderEmotionStatistics() {
let individual_emotions = student_behavior_summary.individual_emotions;
let emotion_labels = student_behavior_summary.emotion_labels;
let emotion_length = individual_emotions.length;
let label_length = emotion_labels.length;
let data = [];
let colors = [
"#000000",
"#00FF00",
"#0000FF"
];
for (let i = 0; i < label_length; i++) {
let label = emotion_labels[i];
let datapoints = [];
for (let j = 0; j < emotion_length; j++) {
let emotion = individual_emotions[j];
datapoints.push({label: label, y: emotion[label]});
}
let obj = {
type: "line",
showInLegend: true,
name: "Emotion-{" + i + "}",
markerType: "square",
{#xValueFormatString: "DD MMM, YYYY",#}
xValueFormatString: "Lec " + (i+1),
color: colors[i - 1],
dataPoints: datapoints
};
data.push(obj);
}
var chart = new CanvasJS.Chart("emotion_stats_chart", {
animationEnabled: true,
theme: "light2",
title: {
text: "Emotion Statistics"
},
axisX: {
title: "Lecture",
{#valueFormatString: "DD MMM",#}
valueFormatString: "lec" ,
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Percentage",
includeZero: true,
crosshair: {
enabled: true
}
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: data
});
chart.render();
}
//this function will toggle the content
function toogleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
......@@ -319,7 +478,9 @@
//this function will handle the 'View Summary' button click events
$('#student_behavior_view_summary_btn').click(function () {
$('#student_behavior_view_summary_modal').modal();
});
});
//this function will handle the view summary option form
$('#view_summary_option_form').submit(function (e) {
......@@ -332,15 +493,18 @@
//send the data using fetch API
fetch('http://127.0.0.1:8000/get-student-behavior-summary-for-period/?option=' + option + "&lecturer=" + lecturer)
.then((res) => res.json())
.then((out) => displayPeriodStudentActivitySummary(out))
.catch((err) => alert('error: ' + err))
.then((res) => res.json())
.then((out) => displayPeriodStudentActivitySummary(out))
.catch((err) => alert('error: ' + err))
});
//this function will display the percentages
function displayPeriodStudentActivitySummary(out) {
//assign the response to the global variable
student_behavior_summary = out;
if (out.isRecordFound) {
//show the summary tables
......@@ -358,9 +522,8 @@
$('#disgust_perct_for_period').text(out.emotion_response.disgust_perct);
$('#surprise_perct_for_period').text(out.emotion_response.surprise_perct);
$('#neutral_perct_for_period').text(out.emotion_response.neutral_perct);
}
else {
} else {
$('#student_summary_not_found_message').attr('hidden', false);
}
......@@ -370,6 +533,39 @@
}
//this function will view activity statistics
$('#view_activity_stats').click(function () {
//render the chart
renderActivityStatistics();
//open the modal
$('#activity_stats_modal').modal();
});
//this function will view emotion statistics
$('#view_emotion_stats').click(function () {
//render the chart
renderEmotionStatistics();
//open the modal
$('#emotion_stats_modal').modal();
});
//this function will generate random colors
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
</script>
......@@ -507,9 +703,11 @@
<span class="font-italic">---OR---</span>
</div>
<!-- OR message -->
<div class="text-center mt-4" id="student_behavior_view_summary">
<button type="button" class="btn btn-primary" id="student_behavior_view_summary_btn">View Summary</button>
<!-- 'View summary' button section -->
<div class="text-center my-4" id="student_behavior_view_summary">
<button type="button" class="btn btn-primary"
id="student_behavior_view_summary_btn">View Summary
</button>
</div>
<!-- loading video details message -->
......@@ -539,56 +737,134 @@
<!-- to display student behavior summary for period -->
<div class="text-center" id="student_behavior_summary_for_period" hidden>
<!-- activity table -->
<table class="table table-borderless">
<tbody>
<tr>
<td>Phone percentage</td>
<td id="phone_perct_for_period"></td>
</tr>
<tr>
<td>Listening percentage</td>
<td id="listening_perct_for_period"></td>
</tr>
<tr>
<td>Note taking percentage</td>
<td id="writing_perct_for_period"></td>
</tr>
</tbody>
</table>
<!-- end of activity table -->
<!-- emotion table -->
<table class="table table-borderless">
<tbody>
<tr>
<td>Happy percentage</td>
<td id="happy_perct_for_period"></td>
</tr>
<tr>
<td>Sad percentage</td>
<td id="sad_perct_for_period"></td>
</tr>
<tr>
<td>Angry percentage</td>
<td id="angry_perct_for_period"></td>
</tr>
<tr>
<td>Disgust percentage</td>
<td id="disgust_perct_for_period"></td>
</tr>
<tr>
<td>Surprise percentage</td>
<td id="surprise_perct_for_period"></td>
</tr>
<tr>
<td>Neutral percentage</td>
<td id="neutral_perct_for_period"></td>
</tr>
</tbody>
</table>
<!-- end of emotion table -->
<!-- Activity card -->
<div class="card shadow-lg mb-2">
<div class="card-body">
<!-- put the heading -->
<div class="text-center mt-2">
<h4 class="font-weight-bold">Activity</h4>
</div>
<!-- percentages -->
<div class="text-center">
<!-- activity table -->
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>
Phone percentage
<hr style="height: 5px">
</td>
<td id="phone_perct_for_period"></td>
</tr>
<tr>
<td>
Listening percentage
<hr style="height: 5px">
</td>
<td id="listening_perct_for_period"></td>
</tr>
<tr>
<td>
Note taking percentage
<hr style="height: 5px">
</td>
<td id="writing_perct_for_period"></td>
</tr>
</tbody>
</table>
<!-- end of activity table -->
</div>
<!-- stats button -->
<div class="float-right">
<button type="button" class="btn btn-primary"
id="view_activity_stats">
<i class="fa fa-line-chart"></i>
View stats
</button>
</div>
<!-- end of stats button -->
</div>
</div>
<!-- end of Activity card -->
<!-- Emotion card -->
<div class="card shadow-lg mb-2">
<div class="card-body">
<!-- put the heading -->
<div class="text-center mt-2">
<h4 class="font-weight-bold">Emotion</h4>
</div>
<!-- percentages -->
<div class="text-center">
<!-- emotion table -->
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>
Happy percentage
<hr style="height: 5px">
</td>
<td id="happy_perct_for_period"></td>
</tr>
<tr>
<td>
Sad percentage
<hr style="height: 5px">
</td>
<td id="sad_perct_for_period"></td>
</tr>
<tr>
<td>
Angry percentage
<hr style="height: 5px">
</td>
<td id="angry_perct_for_period"></td>
</tr>
<tr>
<td>
Disgust percentage
<hr style="height: 5px">
</td>
<td id="disgust_perct_for_period"></td>
</tr>
<tr>
<td>
Surprise percentage
<hr style="height: 5px">
</td>
<td id="surprise_perct_for_period"></td>
</tr>
<tr>
<td>
Neutral percentage
<hr style="height: 5px">
</td>
<td id="neutral_perct_for_period"></td>
</tr>
</tbody>
</table>
<!-- end of emotion table -->
</div>
<!-- end of percentages -->
<!-- stats button -->
<div class="float-right">
<button type="button" class="btn btn-primary"
id="view_emotion_stats">
<i class="fa fa-line-chart"></i>
View stats
</button>
</div>
<!-- end of stats button -->
</div>
</div>
<!-- end of Emotion card -->
</div>
<!-- end of student behavior summary -->
......@@ -727,7 +1003,9 @@
<!-- button to view a summary -->
<li class="list-group-item">
<button type="button" class="btn btn-primary float-right" id="summary_btn">Summary</button>
<button type="button" class="btn btn-primary float-right" id="summary_btn">
Summary
</button>
</li>
</ul>
......@@ -979,7 +1257,8 @@
<!-- student behavior view summary modal -->
<div class="modal fade" id="student_behavior_view_summary_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
<div class="modal fade" id="student_behavior_view_summary_modal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 500px">
<div class="modal-content">
......@@ -1012,7 +1291,9 @@
</div>
<div class="form-group mt-4">
<button type="submit" class="btn btn-outline-success" id="submit_view_summary_option">Submit</button>
<button type="submit" class="btn btn-outline-success" id="submit_view_summary_option">
Submit
</button>
</div>
</form>
<!-- end of list of options -->
......@@ -1028,6 +1309,53 @@
<!-- end of student behavior view summary modal -->
<!-- activity statistics Modal-->
<div class="modal fade" id="activity_stats_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1300px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Activity Statistics</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<div id="activity_stats_chart" style="height: 370px; width: 100%"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of activity statistics modal -->
<!-- emotion statistics Modal-->
<div class="modal fade" id="emotion_stats_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1300px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Emotion Statistics</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<div id="emotion_stats_chart" style="height: 370px; width: 100%"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of activity statistics modal -->
{% endblock %}
<!--scripts-->
{% block 'scripts' %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment