adisingh
/
PracticeKea-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

color doding in the live exam bottom tab

This commit is contained in:
skillens.ai 2025-11-01 20:19:21 +05:30
parent 9b6c8f4fef
commit 4c260ac15c
2 changed files with 76 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/component/Student/Exams/AttemptExam/AttemptExam.css
View File

@ -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;

124
src/component/Student/Exams/AttemptExam/AttemptExam.js
View File

@ -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>