From b05011f8ee12582a8fc41028030aeb6eebd2ff5f Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 8 Jan 2026 02:41:53 +0100
Subject: [PATCH] Add conditional classes to match rows in QuizRunner component

---
 client/src/components/QuizRunner.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/QuizRunner.tsx b/client/src/components/QuizRunner.tsx
index 0931423..02122a6 100644
--- a/client/src/components/QuizRunner.tsx
+++ b/client/src/components/QuizRunner.tsx
@@ -151,7 +151,16 @@ function QuestionRenderer({
     return (
       <div className="question-block matches">
         {pairs.map((pair, idx) => (
-          <div key={idx} className="match-row">
+          <div
+            key={idx}
+            className={[
+              'match-row',
+              showResult && response?.[idx] === pair.right ? 'correct' : '',
+              showResult && response?.[idx] && response?.[idx] !== pair.right ? 'incorrect' : '',
+            ]
+              .join(' ')
+              .trim()}
+          >
             <div className="match-left">{pair.left}</div>
             <select
               className="input"