First pass at the Matching activity

Author: Brian Genisio

data/answer.md

@@ -1,96 +1,63 @@
 __Type__
 
-Multiple Choice
+Matching
 
 __Summary__
 
-0/4 correct
+0/5 correct
 
 __Responses__
 
-1. **Question 1**
+1. **Item 1**
    - Selected Answer: No answer selected
-   - Correct Answer: B, C
+   - Correct Answer: Discomfort
    - Result: ✗ Incorrect
 
-2. **Question 2**
-   - Selected Answer: B
-   - Correct Answer: A
+2. **Item 2**
+   - Selected Answer: No answer selected
+   - Correct Answer: Engagement
    - Result: ✗ Incorrect
 
-3. **Question 3**
-   - Selected Answer: D
-   - Correct Answer: B
+3. **Item 3**
+   - Selected Answer: No answer selected
+   - Correct Answer: Tension
    - Result: ✗ Incorrect
 
-4. **Question 4**
+4. **Item 4**
    - Selected Answer: No answer selected
-   - Correct Answer: B, C
+   - Correct Answer: Frustration
    - Result: ✗ Incorrect
 
-__Practice Question__
-
-Why is it important to include both Wikipedia and web text in a language model's training data?
-
-D. It prevents the model from learning code snippets.
-A. It ensures the model only learns formal writing styles.
-B. It limits the model to factual information only.
-C. It exposes the model to both structured and informal language.
-
-__Suggested Answers__
+5. **Item 5**
+   - Selected Answer: No answer selected
+   - Correct Answer: Relief
+   - Result: ✗ Incorrect
 
-- D
-- A
-- B - Correct
-- C - Correct
+__Markdown With Blanks__
 
-__Practice Question__
+Match each subtle cue a leader might notice with what it could signal about the team's emotions.
 
-Which of the following are common preprocessing steps for text data before training a language model? Select all that apply.
 
-A. Cleaning (removing HTML tags and ads)
-B. Adding random spelling errors
-C. Splitting text at random points
-E. Normalization (standardizing text format)
-D. Deduplication (removing repeated content)
 
-__Suggested Answers__
+> **Subtle Cue 1**: Team members are avoiding eye contact and have closed body language. [[blank:Discomfort]]
 
-- A - Correct
-- B
-- C
-- E
-- D
 
-__Practice Question__
+> **Subtle Cue 2**: Several people are nodding, smiling, and leaning forward during a discussion. [[blank:Engagement]]
 
-What is the main reason for removing duplicate content from a training dataset?
 
-D. To ensure all documents are the same length
-C. To increase the number of unique special characters
-A. To make the dataset smaller for faster downloads
-B. To prevent the model from overfitting to repeated phrases
-
-__Suggested Answers__
+> **Subtle Cue 3**: Voices are raised and people are talking over each other. [[blank:Tension]]
 
-- D
-- C
-- A
-- B - Correct
 
-__Practice Question__
+> **Subtle Cue 4**: Someone sighs and looks away when a topic comes up. [[blank:Frustration]]
 
-Which of the following is an example of normalization in text preprocessing?
 
-D. Adding HTML tags to mark sections
-B. Converting all text to lowercase
-A. Removing all numbers from the text
-C. Splitting a book into chapters
+> **Subtle Cue 5**: Laughter and relaxed posture spread through the group after a team win. [[blank:Relief]]
 
 __Suggested Answers__
 
-- D
-- B - Correct
-- A
-- C - Correct
+- Relief
+- Frustration
+- Engagement
+- Tension
+- Discomfort
 

data/examples/matching.md

@@ -0,0 +1,25 @@
+__Type__
+
+Matching
+
+__Markdown With Blanks__
+
+Match each subtle cue a leader might notice with what it could signal about the team's emotions.
+
+> **Subtle Cue 1**: Team members are avoiding eye contact and have closed body language. [[blank:Discomfort]]
+
+> **Subtle Cue 2**: Several people are nodding, smiling, and leaning forward during a discussion. [[blank:Engagement]]
+
+> **Subtle Cue 3**: Voices are raised and people are talking over each other. [[blank:Tension]]
+
+> **Subtle Cue 4**: Someone sighs and looks away when a topic comes up. [[blank:Frustration]]
+
+> **Subtle Cue 5**: Laughter and relaxed posture spread through the group after a team win. [[blank:Relief]]
+
+__Suggested Answers__
+
+- Discomfort
+- Engagement
+- Tension
+- Frustration
+- Relief

data/question.md

@@ -1,69 +1,25 @@
 __Type__
 
-Multiple Choice
+Matching
 
-__Practice Question__
+__Markdown With Blanks__
 
-Why is it important to include both Wikipedia and web text in a language model's training data?
+Match each subtle cue a leader might notice with what it could signal about the team's emotions.
 
-A. It ensures the model only learns formal writing styles.  
-B. It limits the model to factual information only.  
-C. It exposes the model to both structured and informal language.  
-D. It prevents the model from learning code snippets.
+> **Subtle Cue 1**: Team members are avoiding eye contact and have closed body language. [[blank:Discomfort]]
 
-__Suggested Answers__
-
-- A  
-- B - Correct
-- C - Correct  
-- D
-
-__Practice Question__
-
-Which of the following are common preprocessing steps for text data before training a language model? Select all that apply.
-
-A. Cleaning (removing HTML tags and ads)  
-B. Adding random spelling errors  
-C. Splitting text at random points  
-D. Deduplication (removing repeated content)  
-E. Normalization (standardizing text format)
-
-__Suggested Answers__
-
-- A - Correct  
-- B  
-- C  
-- D 
-- E
-
-__Practice Question__
-
-What is the main reason for removing duplicate content from a training dataset?
-
-A. To make the dataset smaller for faster downloads  
-B. To prevent the model from overfitting to repeated phrases  
-C. To increase the number of unique special characters  
-D. To ensure all documents are the same length
-
-__Suggested Answers__
-
-- A  
-- B - Correct  
-- C  
-- D
+> **Subtle Cue 2**: Several people are nodding, smiling, and leaning forward during a discussion. [[blank:Engagement]]
 
-__Practice Question__
+> **Subtle Cue 3**: Voices are raised and people are talking over each other. [[blank:Tension]]
 
-Which of the following is an example of normalization in text preprocessing?
+> **Subtle Cue 4**: Someone sighs and looks away when a topic comes up. [[blank:Frustration]]
 
-A. Removing all numbers from the text  
-B. Converting all text to lowercase  
-C. Splitting a book into chapters  
-D. Adding HTML tags to mark sections
+> **Subtle Cue 5**: Laughter and relaxed posture spread through the group after a team win. [[blank:Relief]]
 
 __Suggested Answers__
 
-- A  
-- B - Correct  
-- C - Correct
-- D
+- Discomfort
+- Engagement
+- Tension
+- Frustration
+- Relief

public/app.js

@@ -2,6 +2,7 @@ import { initSwipe } from './modules/swipe.js';
 import { initSort } from './modules/sort.js';
 import { initFib } from './modules/fib.js';
 import { initMcq } from './modules/mcq.js';
+import { initMatching } from './modules/matching.js';
 
 (() => {
   'use strict';
@@ -84,15 +85,16 @@ import { initMcq } from './modules/mcq.js';
     const currentType = activity.type || '';
     const persistedType = persistedData.type || '';
 
-    if (!/^multiple choice$/i.test(currentType) && !/^fill in the blanks$/i.test(currentType)) {
-      // Only validate MCQ and FIB for now
+    if (!/^multiple choice$/i.test(currentType) && !/^fill in the blanks$/i.test(currentType) && !/^matching$/i.test(currentType)) {
+      // Only validate MCQ, FIB, and Matching for now
       return null;
     }
 
     // Type must match exactly
     const typeMatches = 
       (/^multiple choice$/i.test(currentType) && /^multiple choice$/i.test(persistedType)) ||
-      (/^fill in the blanks$/i.test(currentType) && /^fill in the blanks$/i.test(persistedType));
+      (/^fill in the blanks$/i.test(currentType) && /^fill in the blanks$/i.test(persistedType)) ||
+      (/^matching$/i.test(currentType) && /^matching$/i.test(persistedType));
 
     if (!typeMatches) {
       return null;
@@ -143,6 +145,28 @@ import { initMcq } from './modules/mcq.js';
         }
       });
       return validatedAnswers;
+    } else if (/^matching$/i.test(currentType)) {
+      // For Matching: validate that item indices exist
+      if (!activity.matching || !activity.matching.items) {
+        return null;
+      }
+      const validItemIndices = new Set(activity.matching.items.map((item, idx) => idx));
+      const persistedItemIndices = Object.keys(persistedData.answers).map(idx => parseInt(idx, 10));
+      
+      // All persisted item indices must exist in current items
+      const allIndicesValid = persistedItemIndices.every(idx => validItemIndices.has(idx));
+      if (!allIndicesValid) {
+        return null;
+      }
+      
+      // Return only answers for valid item indices
+      const validatedAnswers = {};
+      persistedItemIndices.forEach(idx => {
+        if (validItemIndices.has(idx)) {
+          validatedAnswers[idx] = persistedData.answers[idx];
+        }
+      });
+      return validatedAnswers;
     }
 
     return null;
@@ -170,6 +194,13 @@ import { initMcq } from './modules/mcq.js';
       if (currentActivity && typeof currentActivity.validate === 'function') {
         validationHandler = currentActivity.validate;
       }
+    } else if (/^matching$/i.test(activity.type)) {
+      currentActivity = initMatching({ 
+        activity, 
+        state, 
+        postResults,
+        persistedAnswers
+      });
     } else {
       currentActivity = initSwipe({ 
         items: state.items, 

public/design-system

@@ -9,9 +9,12 @@
   <link rel="stylesheet" href="/design-system/spacing/spacing.css" />
   <link rel="stylesheet" href="/design-system/components/input/input.css" />
   <link rel="stylesheet" href="/design-system/components/button/button.css" />
+  <link rel="stylesheet" href="/design-system/components/tags/tags.css" />
   <link rel="stylesheet" href="/styles.css" />
   <link rel="stylesheet" href="/modules/fib.css" />
   <link rel="stylesheet" href="/modules/mcq.css" />
+  <link rel="stylesheet" href="/modules/matching.css" />
+  <link rel="stylesheet" href="/design-system/components/horizontal-cards/horizontal-cards.css" />
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='90'%3E%E2%98%85%3C/text%3E%3C/svg%3E" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>