fix(LearningCurves): learning curve final draft

Author: jakeaturner

components/LearningCurveDescriptor.tsx

@@ -6,12 +6,13 @@ import { DEFAULT_MARGINS, DEFAULT_WIDTH } from "@/utils/visualization-helpers";
 import { ArrowRight, ArrowLeft } from "react-bootstrap-icons";
 import LearningObjectiveQuestionsAligned from "./LearningObjectiveQuestionsAligned";
 import VisualizationLoading from "./VisualizationLoading";
+import { format, parseISO } from "date-fns";
 
 const MARGIN = {
   left: 40,
   right: 35,
   top: 30,
-  bottom: 35,
+  bottom: 40,
 };
 const DEFAULT_HEIGHT = 350;
 
@@ -41,40 +42,28 @@ const LearningCurveDescriptor: React.FC<LearningCurveDescriptorProps> = ({
 
   useEffect(() => {
     if (!data || !width || !height) return;
-    drawChart(); // Need to redraw the main chart when no longer viewing subobjectives
+    drawChart();
   }, [data, width]);
 
   function drawChart() {
     setLoading(true);
     const svg = d3.select(svgRef.current);
     svg.selectAll("*").remove();
 
-    const cleaned = data.score_data.filter((d) => !isNaN(d.score));
-    const maxScore = () => {
-      const DEFAULT_MAX = 1;
-      if (cleaned.length === 0) return DEFAULT_MAX;
-      const calculated = Math.max(...cleaned.map((d) => d.score));
-      return calculated > DEFAULT_MAX ? calculated : DEFAULT_MAX;
-    };
-
-    const maxAttempts = () => {
-      const DEFAULT_MAX = 15;
-      if (cleaned.length === 0) return DEFAULT_MAX;
-      const calculated = Math.max(...cleaned.map((d) => d.num_attempts));
-      return calculated > DEFAULT_MAX ? calculated : DEFAULT_MAX;
-    };
-
-    const xMax = maxAttempts();
-    const yMax = maxScore();
+    const cleaned = data.score_data.filter((d) => !isNaN(d.avg_percent));
+    const domain = data.score_data.map((d) =>
+      format(d.submission_date, "MM/dd/yyyy")
+    );
 
     const x = d3
-      .scaleLinear()
-      .domain([1, xMax])
-      .range([MARGIN.left, width - MARGIN.right]);
+      .scaleBand()
+      .domain(domain)
+      .range([MARGIN.left, width - MARGIN.right])
+      .padding(0.1);
 
     const y = d3
       .scaleLinear()
-      .domain([0, yMax])
+      .domain([0, 100])
       .range([height - MARGIN.bottom, MARGIN.top]);
 
     svg
@@ -83,26 +72,30 @@ const LearningCurveDescriptor: React.FC<LearningCurveDescriptorProps> = ({
       .data(cleaned)
       .enter()
       .append("circle")
-      .attr("cx", (d) => x(d.num_attempts))
-      .attr("cy", (d) => y(d.score))
-      .attr("r", 3)
+      .attr("cx", (d) => x(format(d.submission_date, "MM/dd/yyyy")) ?? 0)
+      .attr("cy", (d) => y(d.avg_percent))
+      .attr("r", 4)
       .style("fill", "#69b3a2");
 
-    // Add x-axis
+    // Add x-axis, only show 8 ticks
     svg
       .append("g")
       .attr("transform", `translate(0, ${height - MARGIN.bottom})`)
-      .call(d3.axisBottom(x));
+      .call(
+        d3.axisBottom(x).tickValues(
+          x.domain().filter((d, i) => i % Math.ceil(domain.length / 8) === 0)
+        )
+      );
 
     // Add x-axis label
     svg
       .append("text")
       .attr("text-anchor", "middle")
       .attr("x", width / 2)
-      .attr("y", height - 10)
+      .attr("y", height - 5)
       .attr("font-size", "12px")
       .attr("font-weight", "semibold")
-      .text("Number of Submission Attempts");
+      .text("Submission Date")
 
     // Add y-axis
     svg
@@ -117,32 +110,7 @@ const LearningCurveDescriptor: React.FC<LearningCurveDescriptorProps> = ({
       .attr("transform", `translate(10, ${height / 2}) rotate(-90)`)
       .attr("font-size", "12px")
       .attr("font-weight", "semibold")
-      .text("Final Question Score");
-
-    // Calculate the slope and intercept for the line of best fit starting at x = 1
-    const filteredData = cleaned.filter((d) => d.num_attempts >= 1);
-    const n = filteredData.length;
-    const sumX = d3.sum(filteredData, (d) => d.num_attempts);
-    const sumY = d3.sum(filteredData, (d) => d.score);
-    const sumXY = d3.sum(filteredData, (d) => d.num_attempts * d.score);
-    const sumXX = d3.sum(filteredData, (d) => d.num_attempts * d.num_attempts);
-
-    const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
-    const intercept = (sumY - slope * sumX) / n;
-
-    // Determine the y-value of the line at x = 1 and clamp it to the x-axis
-    let startY = intercept + slope * 1;
-    if (startY < 0) startY = 0;
-
-    // Create the line of best fit starting at x = 1
-    svg
-      .append("line")
-      .attr("x1", x(1))
-      .attr("y1", y(intercept + slope))
-      .attr("x2", x(xMax))
-      .attr("y2", y(Math.max(0, intercept + slope * xMax)))
-      .attr("stroke", "blue")
-      .attr("stroke-width", 1);
+      .text("Avg Percent Correct");
 
     setLoading(false);
   }

components/LearningCurves.tsx

@@ -51,6 +51,7 @@ const LearningCurves: React.FC<LearningCurvesProps> = ({
       if (!globalState.courseID) return;
 
       const _data = await getData(globalState.courseID);
+      console.log(_data)
       setData(_data);
     } catch (err) {
       console.error(err);

lib/Analytics.ts

@@ -11,6 +11,9 @@ import {
   IDWithText,
   LOCData,
   LearningCurveData,
+  LearningCurveRawData,
+  LearningCurveRawDataWPercent,
+  LearningCurveRawScoreDataWPercent,
   PerformancePerAssignment,
   Student,
   SubmissionTimeline,
@@ -1018,7 +1021,8 @@ class Analytics {
         ) as ICalcADAPTStudentActivity_Raw | undefined;
 
         const submitted = activity?.seen.length ?? 0;
-        const unsubmitted = allCourseQuestions[0].questions.length - submitted ?? 0;
+        const unsubmitted =
+          allCourseQuestions[0].questions.length - submitted ?? 0;
 
         return {
           actor_id: d.actor_id,
@@ -1489,7 +1493,7 @@ class Analytics {
         "descriptors.id": { $in: Array.from(uniqueDescriptorIDs) },
       })) as IFrameworkLevel_Raw[];
 
-      const out: LearningCurveData[] = [];
+      const out: LearningCurveRawData[] = [];
       for (const a of alignment) {
         for (const d of a.framework_descriptors) {
           const levelWDescriptor = frameworkLevelData.find((fd) =>
@@ -1532,7 +1536,7 @@ class Analytics {
 
       // out is now a list of all descriptors
       for (const o of out) {
-        const _scoreData: LearningCurveData["score_data"] = [];
+        const _scoreData: LearningCurveRawData["score_data"] = [];
         const descriptorQuestionIds = alignment
           .filter((a) =>
             a.framework_descriptors.find(
@@ -1548,23 +1552,80 @@ class Analytics {
         );
 
         descriptorScoreData.forEach((d) => {
-          d.questions.forEach((q) => {
+          for (const q of d.questions) {
+            if (!q.last_submitted_at) continue;
+
             _scoreData.push({
               question_id: q.question_id,
               score: parseFloat(q.score),
-              num_attempts: q.submission_count,
+              max_score: parseFloat(q.max_score),
+              last_submitted_at: q.last_submitted_at,
             });
-          });
+          }
         });
 
         // Set the score data for this descriptor
         o.score_data = _scoreData;
       }
 
+      // Calculate percent correct for each question
+      const withPercentCorrect: LearningCurveRawDataWPercent[] = out.map(
+        (d) => {
+          d.score_data = d.score_data.map((s) => {
+            return {
+              ...s,
+              percent_correct: parseFloat(
+                ((s.score / s.max_score) * 100).toPrecision(2)
+              ),
+            };
+          }) as LearningCurveRawScoreDataWPercent[];
+          return d as LearningCurveRawDataWPercent;
+        }
+      );
+
+      // Group the questions by last_submitted_at and calculate the average percent correct for each day
+      const groupedByDate: LearningCurveData[] = withPercentCorrect.map((d) => {
+        const grouped = d.score_data.reduce((acc, curr) => {
+          const date = new Date(curr.last_submitted_at).toLocaleDateString();
+          const existing = acc.find((a) => a.date === date);
+          if (existing) {
+            existing.percent_correct.push(curr.percent_correct);
+          } else {
+            acc.push({
+              date: date,
+              percent_correct: [curr.percent_correct],
+            });
+          }
+          return acc;
+        }, [] as { date: string; percent_correct: number[] }[]);
+
+        const mappedScoreData = grouped.map((g) => ({
+          submission_date: g.date,
+          avg_percent: parseFloat(
+            (
+              g.percent_correct.reduce((acc, curr) => acc + curr, 0) /
+              g.percent_correct.length
+            ).toPrecision(2)
+          ),
+        }));
+
+        const dateSorted = mappedScoreData.sort((a, b) => {
+          return (
+            new Date(a.submission_date).getTime() -
+            new Date(b.submission_date).getTime()
+          );
+        });
+
+        return {
+          descriptor: d.descriptor,
+          score_data: dateSorted,
+        };
+      });
+
       // Filter out exclusions
       const frameworkExclusions = await this._getFrameworkExclusions();
       const exclusionIDs = frameworkExclusions.map((d) => d.id);
-      const finalFiltered = out.filter((d) => {
+      const finalFiltered = groupedByDate.filter((d) => {
         return !exclusionIDs.includes(d.descriptor.id);
       });
 
@@ -1627,9 +1688,12 @@ class Analytics {
     }
   }
 
-  private _learningObjectivesParseScoreData(
-    data: IAssignmentScoresRaw[]
-  ): { question_id: string; score: number; max_score: number }[] {
+  private _learningObjectivesParseScoreData(data: IAssignmentScoresRaw[]): {
+    question_id: string;
+    score: number;
+    max_score: number;
+    last_submitted_at: string | null;
+  }[] {
     const results = [];
     for (const d of data) {
       for (const q of d.questions) {
@@ -1638,6 +1702,7 @@ class Analytics {
           question_id: q.question_id,
           score: parseFloat(q.score),
           max_score: parseFloat(q.max_score),
+          last_submitted_at: q.last_submitted_at,
         });
       }
     }

lib/AnalyticsDataCollector.ts

@@ -44,7 +44,7 @@ class AnalyticsDataCollector {
     //await this.collectAllAssignments();
     //await this.collectEnrollments();
     await this.collectAssignmentScores();
-    //await this.collectSubmissionTimestamps(); // this should only run after collectAssignmentScores
+    await this.collectSubmissionTimestamps(); // this should only run after collectAssignmentScores
     //await this.collectFrameworkData();
     //await this.collectQuestionFrameworkAlignment();
     //await this.collectReviewTimeData();

lib/types/analytics.ts

@@ -107,16 +107,36 @@ export type LOCData = {
   }[];
 };
 
-export type LearningCurveData = {
-  descriptor: {
-    id: string;
-    text: string;
-    questions: string[];
-    question_count: number;
-  };
+export type LearningCurveDescriptor = {
+  id: string;
+  text: string;
+  questions: string[];
+  question_count: number;
+}
+
+export type LearningCurveRawScoreData = {
+  question_id: string;
+  score: number;
+  max_score: number;
+  last_submitted_at: string;
+};
+
+export type LearningCurveRawScoreDataWPercent = LearningCurveRawScoreData & {
+  percent_correct: number;
+};
+
+export type LearningCurveRawData = {
+  descriptor: LearningCurveDescriptor;
+  score_data: LearningCurveRawScoreData[];
+};
+
+export type LearningCurveRawDataWPercent = Pick<LearningCurveRawData, "descriptor"> & {
+  score_data: LearningCurveRawScoreDataWPercent[];
+};
+
+export type LearningCurveData = Pick<LearningCurveRawData, "descriptor"> & {
   score_data: {
-    question_id: string;
-    score: number;
-    num_attempts: number;
+    submission_date: string;
+    avg_percent: number;
   }[];
 };