+
+
+
+
+
-
-
- {question.formattedGlobalFeedback && showAnswer && (
-
- )}
- {!showAnswer && handleOnSubmitAnswer && (
-
- )}
+
);
};
diff --git a/client/src/components/QuestionsDisplay/questionStyle.css b/client/src/components/QuestionsDisplay/questionStyle.css
index f300ba2..2babc91 100644
--- a/client/src/components/QuestionsDisplay/questionStyle.css
+++ b/client/src/components/QuestionsDisplay/questionStyle.css
@@ -169,3 +169,35 @@
.choices-wrapper {
width: 90%;
}
+
+.progress-bar-container {
+ position: relative;
+ width: 100%;
+ height: 20px;
+ background-color: #FEFEFE;
+ border-radius: 8px;
+ overflow: hidden;
+ border: 1px solid black;
+}
+
+.progress-bar-fill {
+ height: 100%;
+ background-color: royalblue;
+ width: 0%;
+ transition: width 0.6s ease;
+}
+
+.progress-bar-text {
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ top: 0;
+ line-height: 20px;
+ color: Black;
+}
+
+.pick-rate{
+ color: rgba(0,0,0,1);
+ min-width: 120px;
+}
+
diff --git a/client/src/main.tsx b/client/src/main.tsx
index e73c979..a04f569 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider, createTheme } from '@mui/material';
import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
import './cssReset.css';
import './index.css';
diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
index b5116a7..8fe1715 100644
--- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@@ -201,7 +201,12 @@ const ManageRoom: React.FC = () => {
socket.on('user-disconnected', (userId: string) => {
console.log(`Student left: id = ${userId}`);
- setStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId));
+ //setStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId));
+ setStudents(prevStudents =>
+ prevStudents.map(student =>
+ student.id === userId ? { ...student, isActive: false } : student
+ )
+ );
});
setSocket(socket);
@@ -520,7 +525,6 @@ const ManageRoom: React.FC = () => {
{quizQuestions?.length}
)}
-
{quizMode === 'teacher' && (
{/* {
{currentQuestion && (
)}
diff --git a/package-lock.json b/package-lock.json
index 144d2f8..fb5535d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,18 @@
"packages": {
"": {
"dependencies": {
- "axios-mock-adapter": "^2.1.0"
+ "@popperjs/core": "^2.11.8",
+ "axios-mock-adapter": "^2.1.0",
+ "bootstrap": "^5.3.5"
+ }
+ },
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
}
},
"node_modules/asynckit": {
@@ -37,6 +48,24 @@
"axios": ">= 0.17.0"
}
},
+ "node_modules/bootstrap": {
+ "version": "5.3.5",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.5.tgz",
+ "integrity": "sha512-ct1CHKtiobRimyGzmsSldEtM03E8fcEX4Tb3dGXz1V8faRwM50+vfHwTzOxB3IlKO7m+9vTH3s/3C6T2EAPeTA==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.8"
+ }
+ },
"node_modules/call-bind-apply-helpers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
diff --git a/package.json b/package.json
index a8332a4..ca7551a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,7 @@
{
"dependencies": {
- "axios-mock-adapter": "^2.1.0"
+ "@popperjs/core": "^2.11.8",
+ "axios-mock-adapter": "^2.1.0",
+ "bootstrap": "^5.3.5"
}
}