working through the styles of the matching activity

Author: Brian Genisio

data/answer.md

@@ -9,22 +9,22 @@ __Summary__
 __Responses__
 
 1. **Item 1**
-   - Selected Answer: No answer selected
+   - Selected Answer: Tension
    - Correct Answer: Discomfort
    - Result: ✗ Incorrect
 
 2. **Item 2**
-   - Selected Answer: No answer selected
+   - Selected Answer: Frustration
    - Correct Answer: Engagement
    - Result: ✗ Incorrect
 
 3. **Item 3**
-   - Selected Answer: No answer selected
+   - Selected Answer: Engagement
    - Correct Answer: Tension
    - Result: ✗ Incorrect
 
 4. **Item 4**
-   - Selected Answer: No answer selected
+   - Selected Answer: Relief
    - Correct Answer: Frustration
    - Result: ✗ Incorrect
 
@@ -35,11 +35,7 @@ __Responses__
 
 __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]]
+> **Situation 1**: A teammate says they’re feeling stressed and overwhelmed. [[blank:Discomfort]]
 
 
 > **Subtle Cue 2**: Several people are nodding, smiling, and leaning forward during a discussion. [[blank:Engagement]]
@@ -55,9 +51,9 @@ Match each subtle cue a leader might notice with what it could signal about the
 
 __Suggested Answers__
 
-- Relief
-- Frustration
-- Engagement
 - Tension
+- Engagement
+- Frustration
+- Relief
 - Discomfort
 

data/examples/matching.md

@@ -4,8 +4,6 @@ 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]]

data/question.md

@@ -4,9 +4,7 @@ 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]]
+> **Situation 1**: A teammate says they’re feeling stressed and overwhelmed. [[blank:Discomfort]]
 
 > **Subtle Cue 2**: Several people are nodding, smiling, and leaning forward during a discussion. [[blank:Engagement]]
 

public/design-system

@@ -141,6 +141,17 @@
   margin: 0;
 }
 
+.horizontal-cards-card {
+  min-height: 284px !important;
+  width: 390px !important;
+  min-width: 390px !important;
+}
+
+.horizontal-cards-card-action {
+  min-height: 33px !important;
+  height: 33px !important;
+}
+
 /* Selection area within horizontal-cards action area */
 .horizontal-cards-card-action .matching-selection-area {
   width: 100%;
@@ -169,7 +180,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 36px;
+  min-height: 33px;
   padding: var(--UI-Spacing-spacing-s, 8px) var(--UI-Spacing-spacing-ml, 20px);
   border-radius: var(--UI-Radius-radius-s, 8px);
   cursor: pointer;
@@ -207,7 +218,7 @@
 
 .matching-selection-area:hover {
   border-color: var(--Colors-Learn-Practice-Selection-Area-Border-Active);
-  background: var(--Colors-Backgrounds-Main-Light);
+
 }
 
 .matching-selection-area:focus {

public/modules/matching.css

@@ -84,7 +84,7 @@ export function initMatching({ activity, state, postResults, persistedAnswers =
     if (selected) {
       return `<div class="matching-selection-area matched button button-primary body-large" data-item-index="${itemIndex}">${selected}</div>`;
     } else {
-      return `<div class="matching-selection-area empty body-xxsmall" data-item-index="${itemIndex}">Add label</div>`;
+      return `<div class="matching-selection-area empty body-xxsmall" data-item-index="${itemIndex}">Best response</div>`;
     }
   }
 
@@ -276,7 +276,7 @@ export function initMatching({ activity, state, postResults, persistedAnswers =
         // Add matched state classes (button styling)
         selectionArea.classList.add('matched', 'button', 'button-primary', 'body-large');
       } else {
-        selectionArea.textContent = 'Add label';
+        selectionArea.textContent = 'Best response';
         // Remove matched state classes
         selectionArea.classList.remove('matched', 'button', 'button-primary', 'body-large');
         // Add empty state classes