Features/answers visualization

core/serializers.py

@@ -23,4 +23,4 @@ class Meta:
 class UserAnswerSummarySerializer(serializers.ModelSerializer):
     class Meta:
         model = UserAnswerSummary
-        fields = ['pk', 'user', 'exercise', 'max_points', 'answer_count', 'latest']
+        fields = ['pk', 'user', 'exercise', 'max_points', 'answer_count', 'latest']

core/views.py

@@ -69,7 +69,7 @@ def create(self, request, off_pk=None, ex_slug=None):
             return Response(answer.data, status=status.HTTP_201_CREATED)
 
         return Response(answer.errors, status=status.HTTP_400_BAD_REQUEST)
-
+      
 
 def user_filter(request):
     user_pk = request.user.pk
@@ -105,4 +105,3 @@ def list_summaries_for_exercise(request, off_pk, ex_slug):
     all_summaries_json = UserAnswerSummarySerializer(all_summaries, many=True)
 
     return Response(all_summaries_json.data, status=status.HTTP_200_OK)
-

frontend/frontend-dev/package.json

@@ -14,9 +14,11 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "axios": "^0.21.1",
+    "chart.js": "^3.5.1",
     "framer-motion": "^4.1.17",
     "i18next": "^20.4.0",
     "react": "^17.0.2",
+    "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.12.2",
     "react-i18next": "^11.11.4",
@@ -79,4 +81,4 @@
       }
     ]
   }
-}
+}

frontend/frontend-dev/src/fragments/AnswersChart/index.tsx

@@ -0,0 +1,60 @@
+import { memo, useMemo } from "react";
+import { Bar, Doughnut } from "react-chartjs-2";
+
+interface IAnswersChartProps {
+  title?: string;
+  options: string[];
+  selectedOptionsCount: number[];
+}
+
+// docs for customisation: https://github.com/reactchartjs/react-chartjs-2
+function UnmemoizedAnswersChart({
+  title,
+  options,
+  selectedOptionsCount
+}: IAnswersChartProps) {
+  const data = useMemo(() => {
+    return {
+      labels: options,
+      datasets: [
+        {
+          label: "# of answers",
+          data: selectedOptionsCount,
+          backgroundColor: [
+            "#ff638433",
+            "#76f25d33",
+            "#36a2eb33",
+            "#ffce5633",
+            "#765df233",
+            "#21fcf233",
+            "#ff9f4033"
+          ],
+          borderColor: [
+            "#ff6384",
+            "#76f25d",
+            "#36a2eb",
+            "#ffce56",
+            "#765df2",
+            "#21fcf2",
+            "#ff9f40"
+          ],
+          borderWidth: 2
+        }
+      ]
+    };
+  }, [options, selectedOptionsCount]);
+
+  return (
+    <div className="flex flex-cols align-center justify-center">
+      <div style={{ maxHeight: 300 }}>
+        <Doughnut data={data} />
+      </div>
+
+      <div style={{ width: 500 }}>
+        <Bar data={data} options={{ maintainAspectRatio: false }} />
+      </div>
+    </div>
+  );
+}
+
+export const AnswersChart = memo(UnmemoizedAnswersChart);

frontend/frontend-dev/src/fragments/ExerciseDetails/index.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import Button from "../../components/Button";
-import Container from "../../components/Container";
 import { useUser } from "../../contexts/user-context";
+import { dynamicPathname } from "../../helpers";
+import { routes } from "../../routes";
 import { useSummaryListForExercise } from "../../services/exercises";
 
 interface ExerciseDetailsProps {
@@ -16,41 +18,52 @@ const ExerciseDetails = ({ offering, slug }: ExerciseDetailsProps) => {
   const {
     summaryList,
     loading,
-    refresh: refreshSummaryList,
+    refresh: refreshSummaryList
   } = useSummaryListForExercise(offering, slug, token);
 
   const { t } = useTranslation();
 
   const [numSubmissions, setNumSubmissions] = useState<number>(0);
   const [numUniqueUsers, setNumUniqueUsers] = useState<number>(0);
   const [lastRefresh, setLastRefresh] = useState<Date>();
+
   useEffect(() => {
     if (loading) return;
     setNumUniqueUsers(summaryList.length);
     setNumSubmissions(
       summaryList
         .map((answerSummary) => answerSummary.answer_count)
-        .reduce((a, b) => a + b, 0),
+        .reduce((a, b) => a + b, 0)
     );
     setLastRefresh(new Date());
   }, [loading, summaryList]);
 
+  const answersRoute = dynamicPathname(routes.EXERCISE_ANSWERS, {
+    offering,
+    slug
+  });
+
   return (
-    <Container className="bg-gray-100 p-4 my-4 flex">
+    <div className="bg-gray-100 p-4 flex flex-col">
       <div className="flex-grow">
         <p> {slug} </p>
         {!!lastRefresh && (
           <p>
             {t("submissions sent before", {
               total: numSubmissions,
               users: numUniqueUsers,
-              lastUpdate: lastRefresh?.toLocaleString(),
+              lastUpdate: lastRefresh?.toLocaleString()
             })}
           </p>
         )}
       </div>
-      <Button onClick={refreshSummaryList}>{t("Reload")}</Button>
-    </Container>
+      <div className="flex flex-row mt-4 justify-around">
+        <Link to={answersRoute}>
+          <Button>{t("See details")}</Button>
+        </Link>
+        <Button onClick={refreshSummaryList}>{t("Reload")}</Button>
+      </div>
+    </div>
   );
 };
 

frontend/frontend-dev/src/helpers/index.ts

@@ -0,0 +1,22 @@
+/**
+ *
+ * @param route Dynamic route. Ex:
+ * ```typescript
+ *    "/api/offerings/:off_pk/exercises/:ex_slug/answers/"
+ * ```
+ * @param params Object with dynamic params. Ex:
+ * ```typescript
+ * {off_pk: 1, ex_slug: 'quiz-0'})
+ * ```
+ * @returns Properly filled route
+ * ```typescript
+ * "/api/offerings/1/exercises/quiz-0/answers"
+ * ```
+ */
+export function dynamicPathname(route: string, params: Record<string, string|number>) {
+  for (let [key, value] of Object.entries(params)) {
+    const regexp = new RegExp(`:${key}`, "g");
+    route = route.replace(regexp, String(value));
+  }
+  return route;
+}

frontend/frontend-dev/src/routes/index.ts

@@ -1,13 +1,15 @@
 import { RouteProps } from "react-router";
 import { User } from "../models/User";
+import ExerciseAnswers from "../screens/ExerciseAnswers";
 import InstructorHome from "../screens/InstructorHome";
 import Login from "../screens/Login";
 import StudentHome from "../screens/StudentHome";
 
 export enum routes {
   STUDENT_HOME = "/",
   INSTRUCTOR_HOME = "/instructor",
-  LOGIN = "/login",
+  EXERCISE_ANSWERS = "/instructor/answers/:offering/:slug/",
+  LOGIN = "/login"
 }
 
 interface RouteData {
@@ -22,25 +24,34 @@ routesData[routes.STUDENT_HOME] = {
   props: {
     path: routes.STUDENT_HOME,
     exact: true,
-    component: StudentHome,
-  },
+    component: StudentHome
+  }
 };
 routesData[routes.INSTRUCTOR_HOME] = {
   title: "Instructor Dashboard",
   permissionTest: (user: User | null): boolean => !!user?.isStaff,
   props: {
     path: routes.INSTRUCTOR_HOME,
     exact: true,
-    component: InstructorHome,
-  },
+    component: InstructorHome
+  }
+};
+routesData[routes.EXERCISE_ANSWERS] = {
+  title: "Exercise Answers",
+  permissionTest: (user: User | null): boolean => !!user?.isStaff,
+  props: {
+    path: routes.EXERCISE_ANSWERS,
+    exact: true,
+    component: ExerciseAnswers
+  }
 };
 routesData[routes.LOGIN] = {
   title: "Login",
   props: {
     path: routes.LOGIN,
     exact: true,
-    component: Login,
-  },
+    component: Login
+  }
 };
 
 export const navRoutes: string[] = [routes.INSTRUCTOR_HOME];