Merge branch 'monitoring_student_behavior_IT17138000' into 'QA_RELEASE'

Monitoring student behavior it17138000

See merge request !32

FirstApp/api.py

@@ -15,7 +15,6 @@ from random import Random
 
 from MonitorLecturerApp.models import LectureRecordedVideo, LecturerVideoMetaData
 from MonitorLecturerApp.serializers import LectureRecordedVideoSerializer, LecturerVideoMetaDataSerializer
-from .MongoModels import *
 from rest_framework.views import *
 from .logic import activity_recognition as ar
 from . import emotion_detector as ed
@@ -23,6 +22,7 @@ from .logic import id_generator as ig
 from .logic import pdf_file_generator as pdf
 from .logic import head_gaze_estimation as hge
 from .logic import video_extraction as ve
+from . logic import student_behavior_process as sbp
 from .serializers import *
 from braces.views import CsrfExemptMixin
 
@@ -114,8 +114,7 @@ class LecturerSubjectViewSet(APIView):
 
 
 # API for timetables
-class FacultyTimetableViewSet(CsrfExemptMixin, APIView):
-    # authentication_classes = []
+class FacultyTimetableViewSet(APIView):
 
     def get(self, request):
         timetable = FacultyTimetable.objects.all().filter()
@@ -1271,6 +1270,208 @@ class GetLectureGazeCorrelations(APIView):
         })
 
 
+# this class will handle the student activity-emotion correlations
+class GetStudentActivityEmotionCorrelations(APIView):
+
+    def get(self, request):
+        # get the day option
+        option = request.query_params.get('option')
+        # get the lecturer id
+        lecturer = request.query_params.get('lecturer')
+        int_option = int(option)
+        # initialize the student behavior count
+        student_behavior_count = 0
+
+
+        current_date = datetime.datetime.now().date()
+        option_date = datetime.timedelta(days=int_option)
+
+        # get the actual date
+        previous_date = current_date - option_date
+
+        # initialize the lists
+        individual_lec_activities = []
+        individual_lec_emotions = []
+        activity_emotion_correlations = []
+
+        # retrieving lecture activities
+        lec_activity = LectureActivity.objects.filter(
+            lecture_video_id__date__gte=previous_date,
+            lecture_video_id__date__lte=current_date,
+            lecture_video_id__lecturer=lecturer
+        )
+
+        # retrieving lecture emotions
+        lec_emotion = LectureEmotionReport.objects.filter(
+            lecture_video_id__date__gte=previous_date,
+            lecture_video_id__date__lte=current_date,
+            lecture_video_id__lecturer=lecturer
+        )
+
+
+        # if there are lecture activities
+        if len(lec_activity) > 0:
+            student_behavior_count += 1
+            activity_serializer = LectureActivitySerializer(lec_activity, many=True)
+            activity_data = activity_serializer.data
+            _, individual_lec_activities, _ = ar.get_student_activity_summary_for_period(activity_data)
+
+        # if there are lecture emotions
+        if len(lec_emotion) > 0:
+            student_behavior_count += 1
+            emotion_serializer = LectureEmotionSerializer(lec_emotion, many=True)
+            emotion_data = emotion_serializer.data
+            _, individual_lec_emotions, _ = ed.get_student_emotion_summary_for_period(emotion_data)
+
+
+        # if both student activity, emotion are available
+        if student_behavior_count == 2:
+
+            # find the correlations between student activity and gaze estimations
+            activity_emotion_correlations = sbp.calculate_student_activity_emotion_correlations(individual_lec_activities, individual_lec_emotions)
+
+
+        return Response({
+            "correlations": activity_emotion_correlations
+        })
+
+
+# this class will handle the student activity-emotion correlations
+class GetStudentActivityGazeCorrelations(APIView):
+
+    def get(self, request):
+        # get the day option
+        option = request.query_params.get('option')
+        # get the lecturer id
+        lecturer = request.query_params.get('lecturer')
+        int_option = int(option)
+        # initialize the student behavior count
+        student_behavior_count = 0
+
+
+        current_date = datetime.datetime.now().date()
+        option_date = datetime.timedelta(days=int_option)
+
+        # get the actual date
+        previous_date = current_date - option_date
+
+        # initialize the lists
+        individual_lec_activities = []
+        individual_lec_gaze = []
+        activity_gaze_correlations = []
+
+
+        # retrieving lecture gaze estimations
+        lec_gaze = LectureGazeEstimation.objects.filter(
+            lecture_video_id__date__gte=previous_date,
+            lecture_video_id__date__lte=current_date,
+            lecture_video_id__lecturer=lecturer
+        )
+
+
+        # retrieving lecture activities
+        lec_activity = LectureActivity.objects.filter(
+            lecture_video_id__date__gte=previous_date,
+            lecture_video_id__date__lte=current_date,
+            lecture_video_id__lecturer=lecturer
+        )
+
+
+        # if there are lecture activities
+        if len(lec_activity) > 0:
+            student_behavior_count += 1
+            activity_serializer = LectureActivitySerializer(lec_activity, many=True)
+            activity_data = activity_serializer.data
+            _, individual_lec_activities, _ = ar.get_student_activity_summary_for_period(activity_data)
+
+
+        # if there are gaze estimations
+        if len(lec_gaze) > 0:
+            student_behavior_count += 1
+            gaze_serializer = LectureGazeEstimationSerializer(lec_gaze, many=True)
+            gaze_data = gaze_serializer.data
+            _, individual_lec_gaze, _ = hge.get_student_gaze_estimation_summary_for_period(gaze_data)
+
+
+        # if there are any recorded lectures
+        if student_behavior_count == 2:
+
+            # find the correlations between student activity and gaze estimations
+            activity_gaze_correlations = sbp.calculate_student_activity_gaze_correlations(individual_lec_activities, individual_lec_gaze)
+
+
+        return Response({
+            "correlations": activity_gaze_correlations
+        })
+
+
+# this class will handle the student emotion-gaze correlations
+class GetStudentEmotionGazeCorrelations(APIView):
+
+    def get(self, request):
+        # get the day option
+        option = request.query_params.get('option')
+        # get the lecturer id
+        lecturer = request.query_params.get('lecturer')
+        int_option = int(option)
+        # initialize the student behavior count
+        student_behavior_count = 0
+
+
+        current_date = datetime.datetime.now().date()
+        option_date = datetime.timedelta(days=int_option)
+
+        # get the actual date
+        previous_date = current_date - option_date
+
+        # initialize the lists
+        individual_lec_emotions = []
+        individual_lec_gaze = []
+        emotion_gaze_correlations = []
+
+
+        # retrieving lecture gaze estimations
+        lec_gaze = LectureGazeEstimation.objects.filter(
+            lecture_video_id__date__gte=previous_date,
+            lecture_video_id__date__lte=current_date,
+            lecture_video_id__lecturer=lecturer
+        )
+
+        # retrieving lecture emotions
+        lec_emotion = LectureEmotionReport.objects.filter(
+            lecture_video_id__date__gte=previous_date,
+            lecture_video_id__date__lte=current_date,
+            lecture_video_id__lecturer=lecturer
+        )
+
+        # if there are lecture emotions
+        if len(lec_emotion) > 0:
+            student_behavior_count += 1
+            emotion_serializer = LectureEmotionSerializer(lec_emotion, many=True)
+            emotion_data = emotion_serializer.data
+            _, individual_lec_emotions, _ = ed.get_student_emotion_summary_for_period(emotion_data)
+
+        # if there are gaze estimations
+        if len(lec_gaze) > 0:
+            student_behavior_count += 1
+            gaze_serializer = LectureGazeEstimationSerializer(lec_gaze, many=True)
+            gaze_data = gaze_serializer.data
+            _, individual_lec_gaze, _ = hge.get_student_gaze_estimation_summary_for_period(gaze_data)
+
+
+
+        # if there are any recorded lectures
+        if student_behavior_count == 2:
+
+            # find the correlations between student activity and gaze estimations
+            emotion_gaze_correlations = sbp.calculate_student_emotion_gaze_correlations(individual_lec_emotions, individual_lec_gaze)
+
+
+        return Response({
+            "correlations": emotion_gaze_correlations
+        })
+
+
 ##### BATCH PROCESS SECTION #####
 
 # perform the student behavior analysis as a batch process
@@ -1319,4 +1520,5 @@ class TestRandom(APIView):
 
         return Response({
             "response": random
-        })
\ No newline at end of file
+        })
+

FirstApp/logic/student_behavior_process.py

+import pandas as pd
+from . import utilities as ut
+
+def calculate_student_activity_emotion_correlations(lec_activities, lec_emotions):
+    # this variable will be used to store the correlations
+    correlations = []
+
+    limit = 10
+
+    data_index = ['lecture-{}'.format(i + 1) for i in range(len(lec_activities))]
+
+    # student gaze labels
+    student_activity_labels = ['phone checking', 'listening', 'note taking']
+    student_emotion_labels = ['Happy', 'Sad', 'Angry', 'Surprise', 'Neutral']
+
+    # lecture activity data list (student)
+    phone_perct_list = []
+    note_perct_list = []
+    listen_perct_list = []
+
+    # lecture emotion data list (student)
+    happy_perct_list = []
+    sad_perct_list = []
+    angry_perct_list = []
+    surprise_perct_list = []
+    neutral_perct_list = []
+
+
+    # loop through the lecture activity data
+    for data in lec_activities:
+        phone_perct_list.append(int(data['phone_perct']))
+        listen_perct_list.append(int(data['listening_perct']))
+        note_perct_list.append(int(data['writing_perct']))
+
+    # loop through the lecture emotion data
+    for data in lec_emotions:
+        happy_perct_list.append(int(data['happy_perct']))
+        sad_perct_list.append(int(data['sad_perct']))
+        angry_perct_list.append(int(data['angry_perct']))
+        surprise_perct_list.append(int(data['surprise_perct']))
+        neutral_perct_list.append(int(data['neutral_perct']))
+
+
+    corr_data = {'phone checking': phone_perct_list, 'listening': listen_perct_list, 'note taking': note_perct_list,
+                 'Happy': happy_perct_list, 'Sad': sad_perct_list, 'Angry': angry_perct_list, 'Surprise': surprise_perct_list, 'Neutral': neutral_perct_list,
+                 }
+
+    # create the dataframe
+    df = pd.DataFrame(corr_data, index=data_index)
+
+    # calculate the correlation
+    pd_series = ut.get_top_abs_correlations(df, limit)
+
+    for i in range(limit):
+        # this dictionary will get the pandas.Series object's  indices and values separately
+        corr_dict = {}
+
+        index = pd_series.index[i]
+
+        # check whether the first index is a student activity
+        isStudentActivity = index[0] in student_activity_labels
+        # check whether the second index is a lecturer activity
+        isStudentEmotion = index[1] in student_emotion_labels
+
+        # if both are student and lecturer activities, add to the dictionary
+        if isStudentActivity & isStudentEmotion:
+            corr_dict['index'] = index
+            corr_dict['value'] = pd_series.values[i]
+
+            # append the dictionary to the 'correlations' list
+            correlations.append(corr_dict)
+
+    # return the list
+    return correlations
+
+
+# this method will calculate the student activity-gaze correlations
+def calculate_student_activity_gaze_correlations(lec_activities, lec_gaze):
+    # this variable will be used to store the correlations
+    correlations = []
+
+    limit = 10
+
+    data_index = ['lecture-{}'.format(i + 1) for i in range(len(lec_activities))]
+
+    # student gaze labels
+    student_activity_labels = ['phone checking', 'listening', 'note taking']
+    student_emotion_labels = ['Happy', 'Sad', 'Angry', 'Surprise', 'Neutral']
+    student_gaze_labels = ['Up and Right', 'Up and Left', 'Down and Right', 'Down and Left', 'Front']
+
+    # lecture activity data list (student)
+    phone_perct_list = []
+    note_perct_list = []
+    listen_perct_list = []
+
+    # lecture gaze estimation data list (student)
+    upright_perct_list = []
+    upleft_perct_list = []
+    downright_perct_list = []
+    downleft_perct_list = []
+    front_perct_list = []
+
+
+    # loop through the lecture activity data
+    for data in lec_activities:
+        phone_perct_list.append(int(data['phone_perct']))
+        listen_perct_list.append(int(data['listening_perct']))
+        note_perct_list.append(int(data['writing_perct']))
+
+    # loop through the lecture activity data
+    for data in lec_gaze:
+        upright_perct_list.append(int(data['looking_up_and_right_perct']))
+        upleft_perct_list.append(int(data['looking_up_and_left_perct']))
+        downright_perct_list.append(int(data['looking_down_and_right_perct']))
+        downleft_perct_list.append(int(data['looking_down_and_left_perct']))
+        front_perct_list.append(int(data['looking_front_perct']))
+
+
+    corr_data = {'phone checking': phone_perct_list, 'listening': listen_perct_list, 'note taking': note_perct_list,
+                 'Up and Right': upright_perct_list, 'Up and Left': upleft_perct_list, 'Down and Right': downright_perct_list,
+                 'Down and Left': downleft_perct_list, 'Front': front_perct_list
+                 }
+
+    # create the dataframe
+    df = pd.DataFrame(corr_data, index=data_index)
+
+    # calculate the correlation
+    pd_series = ut.get_top_abs_correlations(df, limit)
+
+    for i in range(limit):
+        # this dictionary will get the pandas.Series object's  indices and values separately
+        corr_dict = {}
+
+        index = pd_series.index[i]
+
+        # check whether the first index is a student activity
+        isStudentActivity = index[0] in student_activity_labels
+        # check whether the second index is a student gaze estimation
+        isStudentGaze = index[1] in student_gaze_labels
+
+        # if both are student and lecturer activities, add to the dictionary
+        if isStudentActivity & isStudentGaze:
+            corr_dict['index'] = index
+            corr_dict['value'] = pd_series.values[i]
+
+            # append the dictionary to the 'correlations' list
+            correlations.append(corr_dict)
+
+    # return the list
+    return correlations
+
+
+# this method will calculate the student activity-gaze correlations
+def calculate_student_emotion_gaze_correlations(lec_emotions, lec_gaze):
+    # this variable will be used to store the correlations
+    correlations = []
+
+    limit = 10
+
+    data_index = ['lecture-{}'.format(i + 1) for i in range(len(lec_emotions))]
+
+    student_emotion_labels = ['Happy', 'Sad', 'Angry', 'Surprise', 'Neutral']
+    student_gaze_labels = ['Up and Right', 'Up and Left', 'Down and Right', 'Down and Left', 'Front']
+
+
+    # lecture emotion data list (student)
+    happy_perct_list = []
+    sad_perct_list = []
+    angry_perct_list = []
+    surprise_perct_list = []
+    neutral_perct_list = []
+
+    # lecture gaze estimation data list (student)
+    upright_perct_list = []
+    upleft_perct_list = []
+    downright_perct_list = []
+    downleft_perct_list = []
+    front_perct_list = []
+
+
+    # loop through the lecture emotion data
+    for data in lec_emotions:
+        happy_perct_list.append(int(data['happy_perct']))
+        sad_perct_list.append(int(data['sad_perct']))
+        angry_perct_list.append(int(data['angry_perct']))
+        surprise_perct_list.append(int(data['surprise_perct']))
+        neutral_perct_list.append(int(data['neutral_perct']))
+
+    # loop through the lecture gaze data
+    for data in lec_gaze:
+        upright_perct_list.append(int(data['looking_up_and_right_perct']))
+        upleft_perct_list.append(int(data['looking_up_and_left_perct']))
+        downright_perct_list.append(int(data['looking_down_and_right_perct']))
+        downleft_perct_list.append(int(data['looking_down_and_left_perct']))
+        front_perct_list.append(int(data['looking_front_perct']))
+
+
+    corr_data = {'Happy': happy_perct_list, 'Sad': sad_perct_list, 'Angry': angry_perct_list, 'Surprise': surprise_perct_list, 'Neutral': neutral_perct_list,
+                 'Up and Right': upright_perct_list, 'Up and Left': upleft_perct_list, 'Down and Right': downright_perct_list,
+                 'Down and Left': downleft_perct_list, 'Front': front_perct_list
+                 }
+
+    # create the dataframe
+    df = pd.DataFrame(corr_data, index=data_index)
+
+    # calculate the correlation
+    pd_series = ut.get_top_abs_correlations(df, limit)
+
+    for i in range(limit):
+        # this dictionary will get the pandas.Series object's  indices and values separately
+        corr_dict = {}
+
+        index = pd_series.index[i]
+
+        # check whether the first index is a student activity
+        isStudentEmotion = index[0] in student_emotion_labels
+        # check whether the second index is a student gaze estimation
+        isStudentGaze = index[1] in student_gaze_labels
+
+        # if both are student and lecturer activities, add to the dictionary
+        if isStudentEmotion & isStudentGaze:
+            corr_dict['index'] = index
+            corr_dict['value'] = pd_series.values[i]
+
+            # append the dictionary to the 'correlations' list
+            correlations.append(corr_dict)
+
+    # return the list
+    return correlations
\ No newline at end of file

FirstApp/templates/FirstApp/Home.html

@@ -1017,6 +1017,67 @@
             });
 
 
+            //this method will handle the student activity-emotion correlations advanced analysis
+            $('#student_activity_emotion_corr').click(function () {
+                //open the modal
+                $('#student_activity_emotion_advanced_modal').modal();
+
+                //show the loader
+                $('#student_activity_emotion_corr_loader').attr('hidden', false);
+
+
+                let lecturer = "{{ lecturer }}";
+                let option = $("input[name='option']:checked").val();
+
+                //fetch the correlation data
+                fetch('http://127.0.0.1:8000/get-student-activity-emotion-correlations/?lecturer=' + lecturer + "&option=" + option)
+                    .then((res) => res.json())
+                    .then((out) => displayActivityEmotionCorrelations(out.correlations))
+                    .catch((err) => alert('err: ' + err));
+
+            });
+
+            //this method will handle the student activity-gaze correlations advanced analysis
+            $('#student_activity_gaze_corr').click(function () {
+                //open the modal
+                $('#student_activity_gaze_advanced_modal').modal();
+
+                //show the loader
+                $('#student_activity_gaze_corr_loader').attr('hidden', false);
+
+
+                let lecturer = "{{ lecturer }}";
+                let option = $("input[name='option']:checked").val();
+
+                //fetch the correlation data
+                fetch('http://127.0.0.1:8000/get-student-activity-gaze-correlations/?lecturer=' + lecturer + "&option=" + option)
+                    .then((res) => res.json())
+                    .then((out) => displayActivityGazeCorrelations(out.correlations))
+                    .catch((err) => alert('err: ' + err));
+
+            });
+
+            //this method will handle the student emotion-gaze correlations advanced analysis
+            $('#student_emotion_gaze_corr').click(function () {
+                //open the modal
+                $('#student_emotion_gaze_advanced_modal').modal();
+
+                //show the loader
+                $('#student_emotion_gaze_corr_loader').attr('hidden', false);
+
+
+                let lecturer = "{{ lecturer }}";
+                let option = $("input[name='option']:checked").val();
+
+                //fetch the correlation data
+                fetch('http://127.0.0.1:8000/get-student-emotion-gaze-correlations/?lecturer=' + lecturer + "&option=" + option)
+                    .then((res) => res.json())
+                    .then((out) => displayEmotionGazeCorrelations(out.correlations))
+                    .catch((err) => alert('err: ' + err));
+
+            });
+
+
             //this method will display the activity correlations in a table
             function displayActivityCorrelations(correlations) {
 
@@ -1032,17 +1093,13 @@
 
                     if (value <= 100 && value > 80) {
                         htmlString += "<tr class='bg-success text-white'>";
-                    }
-                    else if (value <= 80 && value > 60) {
+                    } else if (value <= 80 && value > 60) {
                         htmlString += "<tr class='bg-primary text-white'>";
-                    }
-                    else if (value <= 60 && value > 40) {
+                    } else if (value <= 60 && value > 40) {
                         htmlString += "<tr class='bg-warning text-white'>";
-                    }
-                    else if (value <= 40 && value > 20) {
+                    } else if (value <= 40 && value > 20) {
                         htmlString += "<tr class='bg-danger text-white'>";
-                    }
-                    else if (value <= 20 && value > 0) {
+                    } else if (value <= 20 && value > 0) {
                         htmlString += "<tr class='bg-dark text-white'>";
                     }
 
@@ -1088,17 +1145,13 @@
 
                     if (value <= 100 && value > 80) {
                         htmlString += "<tr class='bg-success text-white'>";
-                    }
-                    else if (value <= 80 && value > 60) {
+                    } else if (value <= 80 && value > 60) {
                         htmlString += "<tr class='bg-primary text-white'>";
-                    }
-                    else if (value <= 60 && value > 40) {
+                    } else if (value <= 60 && value > 40) {
                         htmlString += "<tr class='bg-warning text-white'>";
-                    }
-                    else if (value <= 40 && value > 20) {
+                    } else if (value <= 40 && value > 20) {
                         htmlString += "<tr class='bg-danger text-white'>";
-                    }
-                    else if (value <= 20 && value > 0) {
+                    } else if (value <= 20 && value > 0) {
                         htmlString += "<tr class='bg-dark text-white'>";
                     }
 
@@ -1145,17 +1198,13 @@
 
                     if (value <= 100 && value > 80) {
                         htmlString += "<tr class='bg-success text-white'>";
-                    }
-                    else if (value <= 80 && value > 60) {
+                    } else if (value <= 80 && value > 60) {
                         htmlString += "<tr class='bg-primary text-white'>";
-                    }
-                    else if (value <= 60 && value > 40) {
+                    } else if (value <= 60 && value > 40) {
                         htmlString += "<tr class='bg-warning text-white'>";
-                    }
-                    else if (value <= 40 && value > 20) {
+                    } else if (value <= 40 && value > 20) {
                         htmlString += "<tr class='bg-danger text-white'>";
-                    }
-                    else if (value <= 20 && value > 0) {
+                    } else if (value <= 20 && value > 0) {
                         htmlString += "<tr class='bg-dark text-white'>";
                     }
 
@@ -1187,6 +1236,164 @@
             }
 
 
+            //this method will display the student activity-emotion correlations in a table
+            function displayActivityEmotionCorrelations(correlations) {
+
+                let htmlString = "";
+
+                //create the html content for the activity correlation table
+                for (let i = 0; i < correlations.length; i++) {
+                    let corr = correlations[i];
+
+                    let indices = corr.index;
+                    let value = corr.value;
+                    value = Math.round(value * 100, 1);
+
+                    if (value <= 100 && value > 80) {
+                        htmlString += "<tr class='bg-success text-white'>";
+                    } else if (value <= 80 && value > 60) {
+                        htmlString += "<tr class='bg-primary text-white'>";
+                    } else if (value <= 60 && value > 40) {
+                        htmlString += "<tr class='bg-warning text-white'>";
+                    } else if (value <= 40 && value > 20) {
+                        htmlString += "<tr class='bg-danger text-white'>";
+                    } else if (value <= 20 && value > 0) {
+                        htmlString += "<tr class='bg-dark text-white'>";
+                    }
+
+                    //create a <tr> to be inserted
+                    htmlString += "<td>";
+                    htmlString += indices[0];
+                    htmlString += "</td>";
+                    htmlString += "<td>";
+                    htmlString += indices[1];
+                    htmlString += "</td>";
+                    htmlString += "<td>";
+                    htmlString += value;
+                    htmlString += "</td>";
+
+                    htmlString += "</tr>";
+
+                }
+
+                //append to the <tbody>
+                $('#student_activity_emotion_corr_tbody').append(htmlString);
+
+
+                //hide the loader
+                $('#student_activity_emotion_corr_loader').hide();
+
+                //show the table
+                $('#student_activity_emotion_corr_table').attr('hidden', false);
+
+            }
+
+            //this method will display the student activity-gaze correlations in a table
+            function displayActivityGazeCorrelations(correlations) {
+
+                let htmlString = "";
+
+                //create the html content for the activity correlation table
+                for (let i = 0; i < correlations.length; i++) {
+                    let corr = correlations[i];
+
+                    let indices = corr.index;
+                    let value = corr.value;
+                    value = Math.round(value * 100, 1);
+
+                    if (value <= 100 && value > 80) {
+                        htmlString += "<tr class='bg-success text-white'>";
+                    } else if (value <= 80 && value > 60) {
+                        htmlString += "<tr class='bg-primary text-white'>";
+                    } else if (value <= 60 && value > 40) {
+                        htmlString += "<tr class='bg-warning text-white'>";
+                    } else if (value <= 40 && value > 20) {
+                        htmlString += "<tr class='bg-danger text-white'>";
+                    } else if (value <= 20 && value > 0) {
+                        htmlString += "<tr class='bg-dark text-white'>";
+                    }
+
+                    //create a <tr> to be inserted
+                    htmlString += "<td>";
+                    htmlString += indices[0];
+                    htmlString += "</td>";
+                    htmlString += "<td>";
+                    htmlString += indices[1];
+                    htmlString += "</td>";
+                    htmlString += "<td>";
+                    htmlString += value;
+                    htmlString += "</td>";
+
+                    htmlString += "</tr>";
+
+                }
+
+                //append to the <tbody>
+                $('#student_activity_gaze_corr_tbody').append(htmlString);
+
+
+                //hide the loader
+                $('#student_activity_gaze_corr_loader').hide();
+
+                //show the table
+                $('#student_activity_gaze_corr_table').attr('hidden', false);
+
+            }
+
+
+            //this method will display the student emotion-gaze correlations in a table
+            function displayEmotionGazeCorrelations(correlations) {
+
+                let htmlString = "";
+
+                //create the html content for the activity correlation table
+                for (let i = 0; i < correlations.length; i++) {
+                    let corr = correlations[i];
+
+                    let indices = corr.index;
+                    let value = corr.value;
+                    value = Math.round(value * 100, 1);
+
+                    if (value <= 100 && value > 80) {
+                        htmlString += "<tr class='bg-success text-white'>";
+                    } else if (value <= 80 && value > 60) {
+                        htmlString += "<tr class='bg-primary text-white'>";
+                    } else if (value <= 60 && value > 40) {
+                        htmlString += "<tr class='bg-warning text-white'>";
+                    } else if (value <= 40 && value > 20) {
+                        htmlString += "<tr class='bg-danger text-white'>";
+                    } else if (value <= 20 && value > 0) {
+                        htmlString += "<tr class='bg-dark text-white'>";
+                    }
+
+                    //create a <tr> to be inserted
+                    htmlString += "<td>";
+                    htmlString += indices[0];
+                    htmlString += "</td>";
+                    htmlString += "<td>";
+                    htmlString += indices[1];
+                    htmlString += "</td>";
+                    htmlString += "<td>";
+                    htmlString += value;
+                    htmlString += "</td>";
+
+                    htmlString += "</tr>";
+
+                }
+
+                //append to the <tbody>
+                $('#student_emotion_gaze_corr_tbody').append(htmlString);
+
+
+                //hide the loader
+                $('#student_emotion_gaze_corr_loader').hide();
+
+                //show the table
+                $('#student_emotion_gaze_corr_table').attr('hidden', false);
+
+            }
+
+
         });
 
     </script>
@@ -1214,86 +1421,7 @@
                     </div>
 
                     <!-- Content Row -->
-                    {#          <div class="row">#}
-                    {##}
-                    {#            <!-- Earnings (Monthly) Card Example -->#}
-                    {#            <div class="col-xl-3 col-md-6 mb-4">#}
-                    {#              <div class="card border-left-primary shadow h-100 py-2">#}
-                    {#                <div class="card-body">#}
-                    {#                  <div class="row no-gutters align-items-center">#}
-                    {#                    <div class="col mr-2">#}
-                    {#                      <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>#}
-                    {#                      <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>#}
-                    {#                    </div>#}
-                    {#                    <div class="col-auto">#}
-                    {#                      <i class="fas fa-calendar fa-2x text-gray-300"></i>#}
-                    {#                    </div>#}
-                    {#                  </div>#}
-                    {#                </div>#}
-                    {#              </div>#}
-                    {#            </div>#}
-                    {##}
-                    {#            <!-- Earnings (Monthly) Card Example -->#}
-                    {#            <div class="col-xl-3 col-md-6 mb-4">#}
-                    {#              <div class="card border-left-success shadow h-100 py-2">#}
-                    {#                <div class="card-body">#}
-                    {#                  <div class="row no-gutters align-items-center">#}
-                    {#                    <div class="col mr-2">#}
-                    {#                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Earnings (Annual)</div>#}
-                    {#                      <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>#}
-                    {#                    </div>#}
-                    {#                    <div class="col-auto">#}
-                    {#                      <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>#}
-                    {#                    </div>#}
-                    {#                  </div>#}
-                    {#                </div>#}
-                    {#              </div>#}
-                    {#            </div>#}
-                    {##}
-                    {#            <!-- Earnings (Monthly) Card Example -->#}
-                    {#            <div class="col-xl-3 col-md-6 mb-4">#}
-                    {#              <div class="card border-left-info shadow h-100 py-2">#}
-                    {#                <div class="card-body">#}
-                    {#                  <div class="row no-gutters align-items-center">#}
-                    {#                    <div class="col mr-2">#}
-                    {#                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks</div>#}
-                    {#                      <div class="row no-gutters align-items-center">#}
-                    {#                        <div class="col-auto">#}
-                    {#                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>#}
-                    {#                        </div>#}
-                    {#                        <div class="col">#}
-                    {#                          <div class="progress progress-sm mr-2">#}
-                    {#                            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>#}
-                    {#                          </div>#}
-                    {#                        </div>#}
-                    {#                      </div>#}
-                    {#                    </div>#}
-                    {#                    <div class="col-auto">#}
-                    {#                      <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>#}
-                    {#                    </div>#}
-                    {#                  </div>#}
-                    {#                </div>#}
-                    {#              </div>#}
-                    {#            </div>#}
-                    {##}
-                    {#            <!-- Pending Requests Card Example -->#}
-                    {#            <div class="col-xl-3 col-md-6 mb-4">#}
-                    {#              <div class="card border-left-warning shadow h-100 py-2">#}
-                    {#                <div class="card-body">#}
-                    {#                  <div class="row no-gutters align-items-center">#}
-                    {#                    <div class="col mr-2">#}
-                    {#                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Requests</div>#}
-                    {#                      <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>#}
-                    {#                    </div>#}
-                    {#                    <div class="col-auto">#}
-                    {#                      <i class="fas fa-comments fa-2x text-gray-300"></i>#}
-                    {#                    </div>#}
-                    {#                  </div>#}
-                    {#                </div>#}
-                    {#              </div>#}
-                    {#            </div>#}
-                    {##}
-                    {#          </div>#}
+
 
                     <!-- Content Row -->
 
@@ -1418,6 +1546,23 @@
                                                     Advanced Analysis
                                                 </button>
                                                 <!-- end of button to view advanced analysis -->
+
+
+                                                <!-- button to view advanced analysis dropdown -->
+                                                {#                                                <div class="dropdown">#}
+                                                {#                                                    <button class="btn btn-secondary dropdown-toggle float-right mr-2" type="button"#}
+                                                {#                                                            id="activity_advanced_dropdown" data-toggle="dropdown"#}
+                                                {#                                                            aria-haspopup="true" aria-expanded="false">#}
+                                                {#                                                        Advanced Analysis#}
+                                                {#                                                    </button>#}
+                                                {#                                                    <div class="dropdown-menu"#}
+                                                {#                                                         aria-labelledby="activity_advanced_dropdown">#}
+                                                {#                                                        <button class="dropdown-item" id="activity_advanced_btn">Student vs. Lecturer</button>#}
+                                                {#                                                        <button class="dropdown-item">Student vs. Student</button>#}
+                                                {#                                                    </div>#}
+                                                {#                                                </div>#}
+                                                <!-- end of button to view advanced analysis dropdown -->
+
                                             </div>
                                         </div>
                                         <!-- end of Activity card -->
@@ -1501,6 +1646,22 @@
                                                     Advanced Analysis
                                                 </button>
                                                 <!-- end of button to view advanced analysis -->
+
+                                                <!-- button to view advanced analysis dropdown -->
+                                                {#                                                <div class="dropdown">#}
+                                                {#                                                    <button class="btn btn-secondary dropdown-toggle float-right mr-2" type="button"#}
+                                                {#                                                            id="emotion_advanced_dropdown" data-toggle="dropdown"#}
+                                                {#                                                            aria-haspopup="true" aria-expanded="false">#}
+                                                {#                                                        Advanced Analysis#}
+                                                {#                                                    </button>#}
+                                                {#                                                    <div class="dropdown-menu"#}
+                                                {#                                                         aria-labelledby="emotion_advanced_dropdown">#}
+                                                {#                                                        <button class="dropdown-item" id="emotion_advanced_btn">Student vs. Lecturer</button>#}
+                                                {#                                                        <button class="dropdown-item">Student vs. Student</button>#}
+                                                {#                                                    </div>#}
+                                                {#                                                </div>#}
+                                                <!-- end of button to view advanced analysis dropdown -->
+
                                             </div>
 
                                         </div>
@@ -1578,11 +1739,56 @@
                                                 </button>
                                                 <!-- end of button to view advanced analysis -->
 
+                                                <!-- button to view advanced analysis dropdown -->
+                                                {#                                                <div class="dropdown">#}
+                                                {#                                                    <button class="btn btn-secondary dropdown-toggle float-right mr-2" type="button"#}
+                                                {#                                                            id="gaze_advanced_dropdown" data-toggle="dropdown"#}
+                                                {#                                                            aria-haspopup="true" aria-expanded="false">#}
+                                                {#                                                        Advanced Analysis#}
+                                                {#                                                    </button>#}
+                                                {#                                                    <div class="dropdown-menu"#}
+                                                {#                                                         aria-labelledby="gaze_advanced_dropdown">#}
+                                                {#                                                        <button class="dropdown-item" id="gaze_advanced_btn">Student vs. Lecturer</button>#}
+                                                {#                                                        <button class="dropdown-item">Student vs. Student</button>#}
+                                                {#                                                    </div>#}
+                                                {#                                                </div>#}
+                                                <!-- end of button to view advanced analysis dropdown -->
+
                                             </div>
 
                                         </div>
                                         <!-- end of Gaze estimation card -->
 
+                                        <!-- advanced analysis for student-student correlations -->
+                                        {#                                        <div class="float-right m-2">#}
+                                        {#                                            <button type="button" class="btn btn-success" id="student_student_corr">#}
+                                        {#                                                Advanced Analysis#}
+                                        {#                                            </button>#}
+                                        {#                                        </div>#}
+                                        <!-- end of advanced analysis for student-student correlations -->
+
+                                        <!-- button to view advanced analysis dropdown -->
+                                        <div class="dropdown">
+                                            <button class="btn btn-secondary dropdown-toggle float-right mr-2"
+                                                    type="button"
+                                                    id="student_student_advanced_dropdown" data-toggle="dropdown"
+                                                    aria-haspopup="true" aria-expanded="false">
+                                                Advanced Analysis
+                                            </button>
+                                            <div class="dropdown-menu"
+                                                 aria-labelledby="student_student_advanced_dropdown">
+                                                <button class="dropdown-item" id="student_activity_emotion_corr">
+                                                    Activity vs. Emotion
+                                                </button>
+                                                <button class="dropdown-item" id="student_activity_gaze_corr">Activity
+                                                    vs. Gaze
+                                                </button>
+                                                <button class="dropdown-item" id="student_emotion_gaze_corr">Emotion vs.
+                                                    Gaze
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <!-- end of button to view advanced analysis dropdown -->
 
                                     </div>
                                     <!-- end of student behavior summary -->
@@ -2364,6 +2570,143 @@
     <!-- end of gaze advanced analysis modal -->
 
 
+    <!-- student activity-emotion advanced analysis modal -->
+    <div class="modal fade" id="student_activity_emotion_advanced_modal" tabindex="-1" role="dialog"
+         aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document" style="max-width: 700px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5>Student Behavior Correlations</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">
+                    <h3 class="font-weight-bold">Student Activity vs. Student Emotion</h3>
+
+                    <!-- ajax loader -->
+                    <div class="text-center" id="student_activity_emotion_corr_loader" hidden>
+                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                    </div>
+
+                    <!-- correlation table -->
+                    <table class="table table-striped" id="student_activity_emotion_corr_table" hidden>
+                        <thead>
+                        <tr>
+                            <th>Student Activity</th>
+                            <th>Student Emotion</th>
+                            <th>Correlation Score</th>
+                        </tr>
+                        </thead>
+
+                        <tbody id="student_activity_emotion_corr_tbody">
+
+                        </tbody>
+                    </table>
+                    <!-- end of correlation table -->
+
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- end of student activity-emotion advanced analysis modal -->
+
+    <!-- student activity-gaze advanced analysis modal -->
+    <div class="modal fade" id="student_activity_gaze_advanced_modal" tabindex="-1" role="dialog"
+         aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document" style="max-width: 700px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5>Student Behavior Correlations</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">
+                    <h3 class="font-weight-bold">Student Activity vs. Student Emotions</h3>
+
+                    <!-- ajax loader -->
+                    <div class="text-center" id="student_activity_gaze_corr_loader" hidden>
+                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                    </div>
+
+                    <!-- correlation table -->
+                    <table class="table table-striped" id="student_activity_gaze_corr_table" hidden>
+                        <thead>
+                        <tr>
+                            <th>Student Activity</th>
+                            <th>Student Gaze</th>
+                            <th>Correlation Score</th>
+                        </tr>
+                        </thead>
+
+                        <tbody id="student_activity_gaze_corr_tbody">
+
+                        </tbody>
+                    </table>
+                    <!-- end of correlation table -->
+
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- end of student activity-gaze advanced analysis modal -->
+
+    <!-- student emotion-gaze advanced analysis modal -->
+    <div class="modal fade" id="student_emotion_gaze_advanced_modal" tabindex="-1" role="dialog"
+         aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document" style="max-width: 700px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5>Student Behavior Correlations</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">
+                    <h3 class="font-weight-bold">Student Emotion vs, Student Gaze</h3>
+
+                    <!-- ajax loader -->
+                    <div class="text-center" id="student_emotion_gaze_corr_loader" hidden>
+                        <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
+                    </div>
+
+                    <!-- correlation table -->
+                    <table class="table table-striped" id="student_emotion_gaze_corr_table" hidden>
+                        <thead>
+                        <tr>
+                            <th>Student Emotion</th>
+                            <th>Student Gaze</th>
+                            <th>Correlation Score</th>
+                        </tr>
+                        </thead>
+
+                        <tbody id="student_emotion_gaze_corr_tbody">
+
+                        </tbody>
+                    </table>
+                    <!-- end of correlation table -->
+
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- end of student emotion-gaze advanced analysis modal -->
+
+
+
 {% endblock %}
 <!--scripts-->
 {% block 'scripts' %}

FirstApp/urls.py

@@ -151,21 +151,30 @@ urlpatterns = [
     # retrieves lecture activity summary
     url(r'^get-lecture-activity-summary/$', api.GetLectureActivitySummary.as_view()),
 
-    # retrieves lecture activity summary
+    # retrieves lecture emotion summary
     url(r'^get-lecture-emotion-summary/$', api.GetLectureEmotionSummary.as_view()),
 
-    # retrieves lecture activity summary
+    # retrieves lecture gaze estimation summary
     url(r'^get-lecture-gaze-summary/$', api.GetLectureGazeSummary.as_view()),
 
-    # retrieves lecture activity summary
+    # retrieves student activity correlations with lecturer activity
     url(r'^get-activity-correlations/$', api.GetLectureActivityCorrelations.as_view()),
 
-    # retrieves lecture activity summary
+    # retrieves student emotion correlations with lecturer activity
     url(r'^get-emotion-correlations/$', api.GetLectureEmotionCorrelations.as_view()),
 
-    # retrieves lecture activity summary
+    # retrieves student gaze estimation correlations with lecturer activity
     url(r'^get-gaze-correlations/$', api.GetLectureGazeCorrelations.as_view()),
 
+    # retrieves student activity-emotion correlations
+    url(r'^get-student-activity-emotion-correlations/$', api.GetStudentActivityEmotionCorrelations.as_view()),
+
+    # retrieves student activity-gaze correlations
+    url(r'^get-student-activity-gaze-correlations/$', api.GetStudentActivityGazeCorrelations.as_view()),
+
+    # retrieves student emotion-gaze correlations
+    url(r'^get-student-emotion-gaze-correlations/$', api.GetStudentEmotionGazeCorrelations.as_view()),
+
 
     ##### OTHERS #####