From 4c260ac15cbf71ec932c19307a6310ea52677241 Mon Sep 17 00:00:00 2001
From: "skillens.ai" <skillens.ai@gmail.com>
Date: Sat, 1 Nov 2025 20:19:21 +0530
Subject: [PATCH] color doding in the live exam bottom tab

---
 .../Student/Exams/AttemptExam/AttemptExam.css |   7 +
 .../Student/Exams/AttemptExam/AttemptExam.js  | 124 ++++++++++--------
 2 files changed, 76 insertions(+), 55 deletions(-)

diff --git a/src/component/Student/Exams/AttemptExam/AttemptExam.css b/src/component/Student/Exams/AttemptExam/AttemptExam.css
index d8e5021..a5c63a7 100644
--- a/src/component/Student/Exams/AttemptExam/AttemptExam.css
+++ b/src/component/Student/Exams/AttemptExam/AttemptExam.css
@@ -117,6 +117,13 @@
   border-spacing: 16px 12px;
 }
 
+.exam-status-row {
+  display: flex;
+  gap: 1.5rem; /* spacing between each status item */
+  flex-wrap: wrap; /* optional: wrap if small screens */
+  justify-content: center;
+}
+
 .status-item {
   display: flex;
   align-items: center;
diff --git a/src/component/Student/Exams/AttemptExam/AttemptExam.js b/src/component/Student/Exams/AttemptExam/AttemptExam.js
index 0992930..744b4d6 100644
--- a/src/component/Student/Exams/AttemptExam/AttemptExam.js
+++ b/src/component/Student/Exams/AttemptExam/AttemptExam.js
@@ -381,17 +381,53 @@ class AttemptExam extends React.Component {
 
       accordions = this.state.sections.map((item, index) => (
         <Panel header={item.subject_name} key={index}>
-          <Row gutter={20}>
-            {item.questions.map((question) => (
-              <Col key={question.id}>
-                <Avatar
-                  className={question.classN}
-                  onClick={this.onQuestionClick.bind(this, question.index)}
-                >
-                  {question.index}
-                </Avatar>
-              </Col>
-            ))}
+          <Row gutter={[10, 10]}>
+            {item.questions.map((question) => {
+              let bgColor = "#bfbfbf"; // Default (Not Visited)
+
+              // Match with your computed classN
+              switch (question.classN) {
+                case "QuesttionStatusNotVisited":
+                  bgColor = "#bfbfbf"; // gray
+                  break;
+                case "QuesttionStatusNotAnswered":
+                  bgColor = "#ff4d4f"; // red
+                  break;
+                case "QuesttionStatusAnswered":
+                  bgColor = "#52c41a"; // green
+                  break;
+                case "QuesttionStatusReview":
+                  bgColor = "#faad14"; // orange
+                  break;
+                case "QuesttionStatusAnsweredReview":
+                  bgColor = "#1890ff"; // blue
+                  break;
+                default:
+                  bgColor = "#bfbfbf";
+              }
+
+              return (
+                <Col key={question.id}>
+                  <Avatar
+                    style={{
+                      backgroundColor: bgColor,
+                      color: "#fff",
+                      fontWeight: "bold",
+                      cursor: "pointer",
+                      width: 38,
+                      height: 38,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      border: "1px solid #d9d9d9",
+                    }}
+                    onClick={() => this.onQuestionClick(question.index)}
+                  >
+                    {question.index}
+                  </Avatar>
+                </Col>
+              );
+            })}
           </Row>
         </Panel>
       ));
@@ -444,55 +480,33 @@ class AttemptExam extends React.Component {
 
                 <Layout className="exam-status-card">
                   <div className="exam-status-section">
-                    <table className="exam-status-table">
-                      <tbody>
-                        <tr>
-                          <td>
-                            <div className="status-item">
-                              <Avatar className="status-avatar not-visited">{total_notVisited}</Avatar>
-                              <span className="status-label">Not Visited</span>
-                            </div>
-                          </td>
-                          <td>
-                            <div className="status-item">
-                              <Avatar className="status-avatar not-answered">{total_notAnswered}</Avatar>
-                              <span className="status-label">Not Answered</span>
-                            </div>
-                          </td>
-                        </tr>
-
-                        <tr>
-                          <td>
-                            <div className="status-item">
-                              <Avatar className="status-avatar answered">{total_Answered}</Avatar>
-                              <span className="status-label">Answered</span>
-                            </div>
-                          </td>
-                          <td>
-                            <div className="status-item">
-                              <Avatar className="status-avatar to-review">{total_Reviwed}</Avatar>
-                              <span className="status-label">To Review</span>
-                            </div>
-                          </td>
-                        </tr>
-
-                        <tr>
-                          <td colSpan="2">
-                            <div className="status-item">
-                              <Avatar className="status-avatar answered-review">{total_AnsweredReviwed}</Avatar>
-                              <span className="status-label">Answered & To Review</span>
-                            </div>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
+                    <div className="exam-status-row">
+                      <div className="status-item">
+                        <Avatar className="status-avatar not-visited">{total_notVisited}</Avatar>
+                        <span className="status-label">Not Visited</span>
+                      </div>
+                      <div className="status-item">
+                        <Avatar className="status-avatar not-answered">{total_notAnswered}</Avatar>
+                        <span className="status-label">Not Answered</span>
+                      </div>
+                      <div className="status-item">
+                        <Avatar className="status-avatar answered">{total_Answered}</Avatar>
+                        <span className="status-label">Answered</span>
+                      </div>
+                      <div className="status-item">
+                        <Avatar className="status-avatar to-review">{total_Reviwed}</Avatar>
+                        <span className="status-label">To Review</span>
+                      </div>
+                      <div className="status-item">
+                        <Avatar className="status-avatar answered-review">{total_AnsweredReviwed}</Avatar>
+                        <span className="status-label">Answered & To Review</span>
+                      </div>
+                    </div>
                   </div>
-
                   <div className="exam-accordion">
                     <Collapse accordion>{accordions}</Collapse>
                   </div>
                 </Layout>
-
               </Layout>
             </Content>
           </Layout>