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; 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 { .status-item {
display: flex; display: flex;
align-items: center; 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) => ( accordions = this.state.sections.map((item, index) => (
<Panel header={item.subject_name} key={index}> <Panel header={item.subject_name} key={index}>
<Row gutter={20}> <Row gutter={[10, 10]}>
{item.questions.map((question) => ( {item.questions.map((question) => {
<Col key={question.id}> let bgColor = "#bfbfbf"; // Default (Not Visited)
<Avatar
className={question.classN} // Match with your computed classN
onClick={this.onQuestionClick.bind(this, question.index)} switch (question.classN) {
> case "QuesttionStatusNotVisited":
{question.index} bgColor = "#bfbfbf"; // gray
</Avatar> break;
</Col> 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> </Row>
</Panel> </Panel>
)); ));
@ -444,55 +480,33 @@ class AttemptExam extends React.Component {
<Layout className="exam-status-card"> <Layout className="exam-status-card">
<div className="exam-status-section"> <div className="exam-status-section">
<table className="exam-status-table"> <div className="exam-status-row">
<tbody> <div className="status-item">
<tr> <Avatar className="status-avatar not-visited">{total_notVisited}</Avatar>
<td> <span className="status-label">Not Visited</span>
<div className="status-item"> </div>
<Avatar className="status-avatar not-visited">{total_notVisited}</Avatar> <div className="status-item">
<span className="status-label">Not Visited</span> <Avatar className="status-avatar not-answered">{total_notAnswered}</Avatar>
</div> <span className="status-label">Not Answered</span>
</td> </div>
<td> <div className="status-item">
<div className="status-item"> <Avatar className="status-avatar answered">{total_Answered}</Avatar>
<Avatar className="status-avatar not-answered">{total_notAnswered}</Avatar> <span className="status-label">Answered</span>
<span className="status-label">Not Answered</span> </div>
</div> <div className="status-item">
</td> <Avatar className="status-avatar to-review">{total_Reviwed}</Avatar>
</tr> <span className="status-label">To Review</span>
</div>
<tr> <div className="status-item">
<td> <Avatar className="status-avatar answered-review">{total_AnsweredReviwed}</Avatar>
<div className="status-item"> <span className="status-label">Answered & To Review</span>
<Avatar className="status-avatar answered">{total_Answered}</Avatar> </div>
<span className="status-label">Answered</span> </div>
</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> </div>
<div className="exam-accordion"> <div className="exam-accordion">
<Collapse accordion>{accordions}</Collapse> <Collapse accordion>{accordions}</Collapse>
</div> </div>
</Layout> </Layout>
</Layout> </Layout>
</Content> </Content>
</Layout> </Layout>