Add choice chart visualization (#95)

* Add choice chart visualization * Fix chart title * Add missing semicolon
insper-education · Sep 22, 2023 · ed6a01d · ed6a01d
1 parent d7b6fe5
commit ed6a01d
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/backend/app/dashboard/static/dashboard-progress-weekly.js b/backend/app/dashboard/static/dashboard-progress-weekly.js
@@ -8,6 +8,7 @@ async function updateFilter() {
   await fetch(`${activeCourse}/${courseClass}/${student}/${week}`).then(async (response) => {
     const data = await response.json();
     createExercisesTable(data.exercises);
+    createChoiceChart(data.choice)
     createTagChart(data);
     createInfo(data);
     student_value = data["total"];
@@ -89,22 +90,69 @@ function createTagChart(data) {
 }
 
 function createExercisesTable(data) {
-  let dataAsArray = Object.values(data);
+  let filteredData = filterCodeExercise(data);
 
   if (table != null) {
     table.updateSettings({
-      data: dataAsArray
+      data: filteredData
     })
     return;
   }
   let table_div = document.getElementById("table");
   table = new Handsontable(table_div, {
-    data: dataAsArray,
+    data: filteredData,
     colHeaders: ["Slug", "Max points", "Submissions"],
     licenseKey: "non-commercial-and-evaluation", // for non-commercial use only
   });
 }
 
+function createChoiceChart(data) {
+  if (choiceChart != null)
+    choiceChart.destroy();
+  let labels = Object.keys(data);
+  let values = Object.values(data);
+  let correct = values.map(item => item.correct)
+  let wrong = values.map(item => item.wrong)
+  choiceChart = new Chart("another-chart", {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: [
+        {
+          label: "Right",
+          data: correct,
+        },
+        {
+          label: "Wrong",
+          data: wrong,
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          stacked: true,
+        },
+        y: {
+          stacked: true,
+        }
+      }
+    }
+  });
+}
+
+function filterCodeExercise(data) {
+  for (let key in data) {
+    if (data[key]["type"] == "choice") {
+      delete data[key];
+    } else
+      delete data[key].type;
+  }
+  return Object.values(data);
+}
+
 function getClassSelect() {
   return document.getElementById("select-class");
 }
@@ -139,6 +187,7 @@ var weekData;
 var exercise_div;
 var tagChart;
 var histChart;
+var choiceChart;
 var table;
 var courseClasses;
 var selectClass;

diff --git a/backend/app/dashboard/templates/dashboard/instructor-progress-weekly.html b/backend/app/dashboard/templates/dashboard/instructor-progress-weekly.html
@@ -55,6 +55,10 @@ <h5>Average</h5>
       <h3 class="h3">Exercise list</h3>
       <div id="table"></div>
     </div>
+    <div class="chart" id="tag-distribution">
+      <h3 class="h3">Choice Exercise </h3>
+      <canvas id="another-chart"></canvas>
+    </div>
     <div class="chart" id="exercise-per-week">
       <h3 class="h3">Exercises per week</h3>
       <canvas id="hist"></canvas>

diff --git a/backend/app/dashboard/views.py b/backend/app/dashboard/views.py
@@ -174,6 +174,7 @@ def student_weekly_data(request, course_name, class_name, user_nickname, week):
     metrics = {
         'total': len(exercises),
         'exercises': {},
+        'choice': {},
         'tags': {},
     }
     aggr_points = 0
@@ -182,14 +183,20 @@ def student_weekly_data(request, course_name, class_name, user_nickname, week):
         exercise_points = round(exercise.points, 2)
         exercise_tags = list(
             exercise.exercise.tags.all().values_list('name', flat=True))
+        isChoice = 'choice-exercise' in exercise_tags
         aggr_points += exercise_points
         if exercise_slug not in metrics['exercises']:
             metrics['exercises'][exercise_slug] = {
                 'slug': exercise_slug,
                 'best_score': exercise_points,
                 'submissions': 1,
             }
+            metrics['exercises'][exercise_slug]['type'] = 'choice' if 'choice-exercise' in exercise_tags else 'code'
             for tag in exercise_tags:
+                if isChoice and tag != 'choice-exercise':
+                    metrics['choice'].setdefault(tag, { 'wrong': 0, 'correct': 0})
+                    metrics['choice'][tag]['wrong'] += (not exercise_points)
+                    metrics['choice'][tag]['correct'] += exercise_points
                 metrics['tags'].setdefault(tag, 0)
                 metrics['tags'][tag] += 1
         else: