touchstudy-core 0.1.39 → 0.1.41

package/dist/index.modern.js

@@ -92,12 +92,16 @@ var encodeParams = function encodeParams(params) {
     return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
   }).join('&');
 };
-var Roles;
-(function (Roles) {
-  Roles["Student"] = "Student";
-  Roles["Teacher"] = "Teacher";
-  Roles["Admin"] = "Admin";
-})(Roles || (Roles = {}));
+var Role;
+(function (Role) {
+  Role["Student"] = "Student";
+  Role["Teacher"] = "Teacher";
+  Role["Admin"] = "Admin";
+  Role["AcademyAdmin"] = "AcademyAdmin";
+})(Role || (Role = {}));
+var PrintHeaderClassName = "print-header";
+var PrintContentClassName = "print-content";
+var PrintContainerClassName = "print-container";
 
 var utcToLocalTime = (function (time, FORMAT) {
   if (time === DATE_MIN_VALUE || time === DATE_TIME_MIN_VALUE) return "";
@@ -139,19 +143,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var styles = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","btn-primary":"_rd4Uy","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","dropdown-academy":"_3CMVp","image-academy":"_2ibYC","image-academy--item":"_3RDWF","academy-btn":"_1JMRU","switch-icon":"_N4FNf","dropdown-content-academy":"_31Dr0","dropdown-academy-item":"_3bjcz","noGutters":"_31ZQk","custom-col-2":"_3yXyK","custom-col-3":"_1RsJQ","custom-col-5":"_L42CP","custom-col-10":"_2u6eL","custom-row":"_8x7OP","custom-col":"_1JmTh","custom-col-4":"_3HO1e","custom-col-8":"_Oy31M","custom-col-12":"_3aUKo","custom-container":"_39LRs","form-label":"__Ut-u","form-control":"_2k4dX","btn-outline-primary":"_2PWdX","sort-icons":"_mQvLF","active":"_3oAH-","form-select":"_3W3aw","truncate":"_3NJzN","headers":"_3xnI5","logo-container":"_3YG70","tabBox":"_1CQPn","routerBox":"_3hx2T","tabText":"_3UyhW","router-link-active":"_1TGKA","router-link":"_1AqMh","userImg":"_2RI6G","disabled-link":"_3aVHg"};
 
-var AuthenticationMessage;
-(function (AuthenticationMessage) {
-  AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
-  AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
-})(AuthenticationMessage || (AuthenticationMessage = {}));
-var Role;
-(function (Role) {
-  Role["Student"] = "Student";
-  Role["Teacher"] = "Teacher";
-  Role["Admin"] = "Admin";
-  Role["AcademyAdmin"] = "AcademyAdmin";
-})(Role || (Role = {}));
-
 // A type of promise-like that resolves synchronously and supports only one observer
 const _Pact = /*#__PURE__*/(function() {
 	function _Pact() {}
@@ -221,6 +212,35 @@ function _isSettledPact(thenable) {
 	return thenable instanceof _Pact && thenable.s & 1;
 }
 
+// Asynchronously iterate through an object that has a length property, passing the index as the first argument to the callback (even as the length property changes)
+function _forTo(array, body, check) {
+	var i = -1, pact, reject;
+	function _cycle(result) {
+		try {
+			while (++i < array.length && (!check || !check())) {
+				result = body(i);
+				if (result && result.then) {
+					if (_isSettledPact(result)) {
+						result = result.v;
+					} else {
+						result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+						return;
+					}
+				}
+			}
+			if (pact) {
+				_settle(pact, 1, result);
+			} else {
+				pact = result;
+			}
+		} catch (e) {
+			_settle(pact || (pact = new _Pact()), 2, e);
+		}
+	}
+	_cycle();
+	return pact;
+}
+
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
 
 const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
@@ -1386,7 +1406,7 @@ var useSubjectSelect = function useSubjectSelect() {
   var isSuperAdmin = useSelector(function (state) {
     var _state$common2, _state$common2$user;
     return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
-  }).includes(Roles.Admin) && !isDomain;
+  }).includes(Role.Admin) && !isDomain;
   var subjectOptions = useMemo(function () {
     return subjectList === null || subjectList === void 0 ? void 0 : subjectList.map(function (subject) {
       return {
@@ -2106,7 +2126,7 @@ var extra_time$1 = "Extra time";
 var complete$1 = "Complete";
 var current_exam$1 = "Current exam";
 var current_time$1 = "Current time";
-var exam_time$1 = "Extra time";
+var exam_time$1 = "Exam time";
 var time_remaining$1 = "Time remaining";
 var number_results$1 = "{{number}}  Results";
 var number_result$1 = "{{number}} Result";
@@ -3916,75 +3936,6 @@ var ChatItem = function ChatItem(props) {
   }));
 };
 
-var MessageSortBy;
-(function (MessageSortBy) {
-  MessageSortBy["CreatedAt"] = "CreatedAt";
-})(MessageSortBy || (MessageSortBy = {}));
-var OrderBy;
-(function (OrderBy) {
-  OrderBy["ASC"] = "ASC";
-  OrderBy["DESC"] = "DESC";
-})(OrderBy || (OrderBy = {}));
-var StudentSortBy;
-(function (StudentSortBy) {
-  StudentSortBy["CreatedAt"] = "CreatedAt";
-  StudentSortBy["FullName"] = "FullName";
-})(StudentSortBy || (StudentSortBy = {}));
-var StudentOrderBy;
-(function (StudentOrderBy) {
-  StudentOrderBy["ASC"] = "ASC";
-  StudentOrderBy["DESC"] = "DESC";
-})(StudentOrderBy || (StudentOrderBy = {}));
-var MessageAction;
-(function (MessageAction) {
-  MessageAction[MessageAction["Default"] = 0] = "Default";
-  MessageAction[MessageAction["Took"] = 1] = "Took";
-})(MessageAction || (MessageAction = {}));
-var MessageSourceType;
-(function (MessageSourceType) {
-  MessageSourceType[MessageSourceType["Default"] = 0] = "Default";
-  MessageSourceType[MessageSourceType["Exam"] = 1] = "Exam";
-  MessageSourceType[MessageSourceType["Class"] = 2] = "Class";
-})(MessageSourceType || (MessageSourceType = {}));
-var MessageStatus;
-(function (MessageStatus) {
-  MessageStatus["Default"] = "Sent";
-  MessageStatus["Sending"] = "Sending...";
-  MessageStatus["SentError"] = "Sent fail, Retry";
-})(MessageStatus || (MessageStatus = {}));
-
-var types = {
-  __proto__: null,
-  get MessageSortBy () { return MessageSortBy; },
-  get OrderBy () { return OrderBy; },
-  get StudentSortBy () { return StudentSortBy; },
-  get StudentOrderBy () { return StudentOrderBy; },
-  get MessageAction () { return MessageAction; },
-  get MessageSourceType () { return MessageSourceType; },
-  get MessageStatus () { return MessageStatus; }
-};
-
-var ExamStatus;
-(function (ExamStatus) {
-  ExamStatus["Default"] = "Default";
-  ExamStatus["Pending"] = "Pending";
-  ExamStatus["Inprogress"] = "Inprogress";
-  ExamStatus["Completed"] = "Completed";
-})(ExamStatus || (ExamStatus = {}));
-var Roles$1;
-(function (Roles) {
-  Roles["Student"] = "Student";
-  Roles["Teacher"] = "Teacher";
-  Roles["Admin"] = "Admin";
-})(Roles$1 || (Roles$1 = {}));
-var MESSAGE_DEFAULT_FILTER = {
-  currentPage: 1,
-  pageSize: 15,
-  textSearch: "",
-  sortColumnDirection: OrderBy.DESC,
-  sortColumnName: MessageSortBy.CreatedAt
-};
-
 var ChatList = function ChatList(_ref) {
   var _ref$messages = _ref.messages,
     messages = _ref$messages === void 0 ? [] : _ref$messages,
@@ -4009,7 +3960,7 @@ var ChatList = function ChatList(_ref) {
       });
     });
   }, [JSON.stringify(messages)]);
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   return React.createElement("ul", {
     ref: listItemRef,
     className: styles$1["list"] + " " + styles$1["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
@@ -4253,7 +4204,7 @@ var ChatHeader = function ChatHeader(_ref) {
     t = _useTranslation.t;
   var theme = useTheme();
   var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   var filterDurationExam = useMemo(function () {
     if (!durationExam) return;
     return moment.duration(durationExam);
@@ -4567,6 +4518,75 @@ var ChatContainer = function ChatContainer(_ref) {
   })));
 };
 
+var MessageSortBy;
+(function (MessageSortBy) {
+  MessageSortBy["CreatedAt"] = "CreatedAt";
+})(MessageSortBy || (MessageSortBy = {}));
+var OrderBy;
+(function (OrderBy) {
+  OrderBy["ASC"] = "ASC";
+  OrderBy["DESC"] = "DESC";
+})(OrderBy || (OrderBy = {}));
+var StudentSortBy;
+(function (StudentSortBy) {
+  StudentSortBy["CreatedAt"] = "CreatedAt";
+  StudentSortBy["FullName"] = "FullName";
+})(StudentSortBy || (StudentSortBy = {}));
+var StudentOrderBy;
+(function (StudentOrderBy) {
+  StudentOrderBy["ASC"] = "ASC";
+  StudentOrderBy["DESC"] = "DESC";
+})(StudentOrderBy || (StudentOrderBy = {}));
+var MessageAction;
+(function (MessageAction) {
+  MessageAction[MessageAction["Default"] = 0] = "Default";
+  MessageAction[MessageAction["Took"] = 1] = "Took";
+})(MessageAction || (MessageAction = {}));
+var MessageSourceType;
+(function (MessageSourceType) {
+  MessageSourceType[MessageSourceType["Default"] = 0] = "Default";
+  MessageSourceType[MessageSourceType["Exam"] = 1] = "Exam";
+  MessageSourceType[MessageSourceType["Class"] = 2] = "Class";
+})(MessageSourceType || (MessageSourceType = {}));
+var MessageStatus;
+(function (MessageStatus) {
+  MessageStatus["Default"] = "Sent";
+  MessageStatus["Sending"] = "Sending...";
+  MessageStatus["SentError"] = "Sent fail, Retry";
+})(MessageStatus || (MessageStatus = {}));
+
+var types = {
+  __proto__: null,
+  get MessageSortBy () { return MessageSortBy; },
+  get OrderBy () { return OrderBy; },
+  get StudentSortBy () { return StudentSortBy; },
+  get StudentOrderBy () { return StudentOrderBy; },
+  get MessageAction () { return MessageAction; },
+  get MessageSourceType () { return MessageSourceType; },
+  get MessageStatus () { return MessageStatus; }
+};
+
+var ExamStatus;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["Inprogress"] = "Inprogress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus || (ExamStatus = {}));
+var Roles;
+(function (Roles) {
+  Roles["Student"] = "Student";
+  Roles["Teacher"] = "Teacher";
+  Roles["Admin"] = "Admin";
+})(Roles || (Roles = {}));
+var MESSAGE_DEFAULT_FILTER = {
+  currentPage: 1,
+  pageSize: 15,
+  textSearch: "",
+  sortColumnDirection: OrderBy.DESC,
+  sortColumnName: MessageSortBy.CreatedAt
+};
+
 var useMessageList = function useMessageList() {
   var _useState = useState([]),
     messages = _useState[0],
@@ -5202,7 +5222,7 @@ var useCategorySelect = function useCategorySelect(_ref) {
   var isSuperAdmin = useSelector(function (state) {
     var _state$common2, _state$common2$user;
     return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
-  }).includes(Roles.Admin) && !isDomain;
+  }).includes(Role.Admin) && !isDomain;
   var categoryOptions = useMemo(function () {
     return categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(function (category) {
       var _category$path;
@@ -5942,7 +5962,7 @@ var useExam = function useExam(props) {
     setExamRequest = _useState2[1];
   var isTeacher = useSelector(function (state) {
     var _state$common, _state$common$user;
-    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles.includes(Roles.Teacher);
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles.includes(Role.Teacher);
   });
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -8406,688 +8426,767 @@ var TabList = [{
   label: "problem_analysis",
   value: 3
 }];
-var Roles$2;
+var Roles$1;
 (function (Roles) {
   Roles["Student"] = "Student";
   Roles["Teacher"] = "Teacher";
   Roles["Admin"] = "Admin";
-})(Roles$2 || (Roles$2 = {}));
+})(Roles$1 || (Roles$1 = {}));
 var EXAM_RESULT = {
-  "id": 6047,
-  "teacherId": 1,
-  "title": "EXAMPLE EXAM",
-  "examSessionId": 8,
-  "description": "",
-  "image": "",
-  "type": "",
-  "teacherName": "Admin",
-  "teacherAvatar": "https://lh3.googleusercontent.com/a/ACg8ocKoBjuFGZfJYrpnWcDgDRSy0AcVYTOP6s-WWLgxecLmRg=s96-c",
-  "finishTime": "0001-01-01T00:00:00+00:00",
-  "status": 3,
-  "startTime": "2024-03-13T04:28:48.768643+00:00",
-  "duration": "01:00:00",
-  "student": {
-    "id": 1001,
-    "phoneNumber": "",
-    "email": "",
-    "avatar": "https://lh3.googleusercontent.com/a/ACg8ocKtZwjUWLrcUGGP8Vf4i39FjR8rWYz0rDzwcpUBwgyDxm4=s96-c",
-    "parentName": "",
-    "parentPhoneNumber": "",
-    "schoolName": "Academy",
-    "className": "1",
-    "major": "",
-    "roles": []
+  id: 6047,
+  teacherId: 1,
+  title: "EXAMPLE EXAM",
+  examSessionId: 8,
+  description: "",
+  image: "",
+  type: "",
+  teacherName: "Admin",
+  teacherAvatar: "https://lh3.googleusercontent.com/a/ACg8ocKoBjuFGZfJYrpnWcDgDRSy0AcVYTOP6s-WWLgxecLmRg=s96-c",
+  finishTime: "0001-01-01T00:00:00+00:00",
+  status: 3,
+  startTime: "2024-03-13T04:28:48.768643+00:00",
+  duration: "01:00:00",
+  student: {
+    id: 1001,
+    phoneNumber: "",
+    email: "",
+    avatar: "https://lh3.googleusercontent.com/a/ACg8ocKtZwjUWLrcUGGP8Vf4i39FjR8rWYz0rDzwcpUBwgyDxm4=s96-c",
+    parentName: "",
+    parentPhoneNumber: "",
+    schoolName: "Academy",
+    className: "1",
+    major: "",
+    roles: []
   },
-  "questions": [{
-    "id": 8144,
-    "selectedAnswers": "1",
-    "correctAnswers": "2",
-    "isStar": false,
-    "duration": 320.939,
-    "classAverageTime": 238.939,
-    "topDuration": 180.939,
-    "answerResponseSignal": 0,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:00.685+00:00",
-    "article": 1,
-    "category": {
-      "parentCategoryId": 5,
-      "name": "New category",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 7
+  questions: [{
+    id: 8144,
+    selectedAnswers: "1",
+    correctAnswers: "2",
+    isStar: false,
+    duration: 320.939,
+    classAverageTime: 238.939,
+    topDuration: 180.939,
+    answerResponseSignal: 0,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:00.685+00:00",
+    article: 1,
+    category: {
+      parentCategoryId: 5,
+      name: "New category",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 7
     },
-    "overallCorrectRate": 77,
-    "questionOrder": 0
+    overallCorrectRate: 77,
+    questionOrder: 0
   }, {
-    "id": 8145,
-    "selectedAnswers": "2",
-    "correctAnswers": "3",
-    "isStar": false,
-    "duration": 2.014,
-    "classAverageTime": 2.014,
-    "topDuration": 2.014,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:02.7+00:00",
-    "article": 1,
-    "category": {
-      "parentCategoryId": 5,
-      "name": "New category",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 7
+    id: 8145,
+    selectedAnswers: "2",
+    correctAnswers: "3",
+    isStar: false,
+    duration: 2.014,
+    classAverageTime: 2.014,
+    topDuration: 2.014,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:02.7+00:00",
+    article: 1,
+    category: {
+      parentCategoryId: 5,
+      name: "New category",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 7
     },
-    "overallCorrectRate": 64,
-    "questionOrder": 1
+    overallCorrectRate: 64,
+    questionOrder: 1
   }, {
-    "id": 8146,
-    "selectedAnswers": "1",
-    "correctAnswers": "2",
-    "isStar": false,
-    "duration": 72.244,
-    "classAverageTime": 52.244,
-    "topDuration": 24.244,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:04.944+00:00",
-    "article": 1,
-    "category": {
-      "parentCategoryId": 5,
-      "name": "New category",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 7
+    id: 8146,
+    selectedAnswers: "1",
+    correctAnswers: "2",
+    isStar: false,
+    duration: 72.244,
+    classAverageTime: 52.244,
+    topDuration: 24.244,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:04.944+00:00",
+    article: 1,
+    category: {
+      parentCategoryId: 5,
+      name: "New category",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 7
     },
-    "overallCorrectRate": 85,
-    "questionOrder": 2
+    overallCorrectRate: 85,
+    questionOrder: 2
   }, {
-    "id": 8147,
-    "selectedAnswers": "1",
-    "correctAnswers": "1",
-    "isStar": false,
-    "duration": 1.373,
-    "classAverageTime": 1.373,
-    "topDuration": 1.373,
-    "answerResponseSignal": 4,
-    "isCorrect": true,
-    "answerTime": "2024-03-13T04:29:06.317+00:00",
-    "article": 1,
-    "category": {
-      "parentCategoryId": 5,
-      "name": "New category",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 7
+    id: 8147,
+    selectedAnswers: "1",
+    correctAnswers: "1",
+    isStar: false,
+    duration: 1.373,
+    classAverageTime: 1.373,
+    topDuration: 1.373,
+    answerResponseSignal: 4,
+    isCorrect: true,
+    answerTime: "2024-03-13T04:29:06.317+00:00",
+    article: 1,
+    category: {
+      parentCategoryId: 5,
+      name: "New category",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 7
     },
-    "overallCorrectRate": 78.88,
-    "questionOrder": 3
+    overallCorrectRate: 78.88,
+    questionOrder: 3
   }, {
-    "id": 8148,
-    "selectedAnswers": "3",
-    "correctAnswers": "4",
-    "isStar": false,
-    "duration": 120.683,
-    "classAverageTime": 132.683,
-    "topDuration": 110.683,
-    "answerResponseSignal": 2,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:07+00:00",
-    "article": 1,
-    "category": {
-      "parentCategoryId": 5,
-      "name": "New category",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 7
+    id: 8148,
+    selectedAnswers: "3",
+    correctAnswers: "4",
+    isStar: false,
+    duration: 120.683,
+    classAverageTime: 132.683,
+    topDuration: 110.683,
+    answerResponseSignal: 2,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:07+00:00",
+    article: 1,
+    category: {
+      parentCategoryId: 5,
+      name: "New category",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 7
     },
-    "overallCorrectRate": 55.67,
-    "questionOrder": 4
+    overallCorrectRate: 55.67,
+    questionOrder: 4
   }, {
-    "id": 8149,
-    "selectedAnswers": "2",
-    "correctAnswers": "2",
-    "isStar": false,
-    "duration": 1.052,
-    "classAverageTime": 1.052,
-    "topDuration": 1.052,
-    "answerResponseSignal": 1,
-    "isCorrect": true,
-    "answerTime": "2024-03-13T04:29:08.052+00:00",
-    "article": 2,
-    "category": {
-      "parentCategoryId": null,
-      "name": "123458868",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 1008
+    id: 8149,
+    selectedAnswers: "2",
+    correctAnswers: "2",
+    isStar: false,
+    duration: 1.052,
+    classAverageTime: 1.052,
+    topDuration: 1.052,
+    answerResponseSignal: 1,
+    isCorrect: true,
+    answerTime: "2024-03-13T04:29:08.052+00:00",
+    article: 2,
+    category: {
+      parentCategoryId: null,
+      name: "123458868",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 1008
     },
-    "overallCorrectRate": 100,
-    "questionOrder": 5
+    overallCorrectRate: 100,
+    questionOrder: 5
   }, {
-    "id": 8150,
-    "selectedAnswers": "",
-    "correctAnswers": "3",
-    "isStar": false,
-    "duration": 0,
-    "classAverageTime": 0,
-    "topDuration": null,
-    "answerResponseSignal": null,
-    "isCorrect": false,
-    "answerTime": "0001-01-01T00:00:00+00:00",
-    "article": 2,
-    "category": {
-      "parentCategoryId": null,
-      "name": "123458868",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 1008
+    id: 8150,
+    selectedAnswers: "",
+    correctAnswers: "3",
+    isStar: false,
+    duration: 0,
+    classAverageTime: 0,
+    topDuration: null,
+    answerResponseSignal: null,
+    isCorrect: false,
+    answerTime: "0001-01-01T00:00:00+00:00",
+    article: 2,
+    category: {
+      parentCategoryId: null,
+      name: "123458868",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 1008
     },
-    "overallCorrectRate": 55.67,
-    "questionOrder": 6
+    overallCorrectRate: 55.67,
+    questionOrder: 6
   }, {
-    "id": 8151,
-    "selectedAnswers": "3",
-    "correctAnswers": "2",
-    "isStar": true,
-    "duration": 2.596,
-    "classAverageTime": 2.596,
-    "topDuration": 2.596,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:10.648+00:00",
-    "article": 2,
-    "category": {
-      "parentCategoryId": null,
-      "name": "123458868",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 1008
+    id: 8151,
+    selectedAnswers: "3",
+    correctAnswers: "2",
+    isStar: true,
+    duration: 2.596,
+    classAverageTime: 2.596,
+    topDuration: 2.596,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:10.648+00:00",
+    article: 2,
+    category: {
+      parentCategoryId: null,
+      name: "123458868",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 1008
     },
-    "overallCorrectRate": 78.24,
-    "questionOrder": 7
+    overallCorrectRate: 78.24,
+    questionOrder: 7
   }, {
-    "id": 8152,
-    "selectedAnswers": "5",
-    "correctAnswers": "4",
-    "isStar": false,
-    "duration": 0.899,
-    "classAverageTime": 0.899,
-    "topDuration": 0.899,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:12.864+00:00",
-    "article": 2,
-    "category": {
-      "parentCategoryId": null,
-      "name": "123458868",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 1008
+    id: 8152,
+    selectedAnswers: "5",
+    correctAnswers: "4",
+    isStar: false,
+    duration: 0.899,
+    classAverageTime: 0.899,
+    topDuration: 0.899,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:12.864+00:00",
+    article: 2,
+    category: {
+      parentCategoryId: null,
+      name: "123458868",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 1008
     },
-    "overallCorrectRate": 90,
-    "questionOrder": 8
+    overallCorrectRate: 90,
+    questionOrder: 8
   }, {
-    "id": 8153,
-    "selectedAnswers": "2",
-    "correctAnswers": "2",
-    "isStar": true,
-    "duration": 70.496,
-    "classAverageTime": 140.496,
-    "topDuration": 20.496,
-    "answerResponseSignal": 0,
-    "isCorrect": true,
-    "answerTime": "2024-03-13T04:29:14.36+00:00",
-    "article": 2,
-    "category": {
-      "parentCategoryId": null,
-      "name": "123458868",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 1008
+    id: 8153,
+    selectedAnswers: "2",
+    correctAnswers: "2",
+    isStar: true,
+    duration: 70.496,
+    classAverageTime: 140.496,
+    topDuration: 20.496,
+    answerResponseSignal: 0,
+    isCorrect: true,
+    answerTime: "2024-03-13T04:29:14.36+00:00",
+    article: 2,
+    category: {
+      parentCategoryId: null,
+      name: "123458868",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 1008
     },
-    "overallCorrectRate": 100,
-    "questionOrder": 9
+    overallCorrectRate: 100,
+    questionOrder: 9
   }, {
-    "id": 8154,
-    "selectedAnswers": "",
-    "correctAnswers": "5",
-    "isStar": false,
-    "duration": 0,
-    "classAverageTime": 0,
-    "topDuration": null,
-    "answerResponseSignal": null,
-    "isCorrect": false,
-    "answerTime": "0001-01-01T00:00:00+00:00",
-    "article": 2,
-    "category": {
-      "parentCategoryId": null,
-      "name": "123458868",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 1008
+    id: 8154,
+    selectedAnswers: "",
+    correctAnswers: "5",
+    isStar: false,
+    duration: 0,
+    classAverageTime: 0,
+    topDuration: null,
+    answerResponseSignal: null,
+    isCorrect: false,
+    answerTime: "0001-01-01T00:00:00+00:00",
+    article: 2,
+    category: {
+      parentCategoryId: null,
+      name: "123458868",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 1008
     },
-    "overallCorrectRate": 75,
-    "questionOrder": 10
+    overallCorrectRate: 75,
+    questionOrder: 10
   }, {
-    "id": 8155,
-    "selectedAnswers": "2",
-    "correctAnswers": "2",
-    "isStar": false,
-    "duration": 1.317,
-    "classAverageTime": 1.317,
-    "topDuration": 1.317,
-    "answerResponseSignal": 1,
-    "isCorrect": true,
-    "answerTime": "2024-03-13T04:29:11.965+00:00",
-    "article": 3,
-    "category": {
-      "parentCategoryId": null,
-      "name": "The first category a",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 4
+    id: 8155,
+    selectedAnswers: "2",
+    correctAnswers: "2",
+    isStar: false,
+    duration: 1.317,
+    classAverageTime: 1.317,
+    topDuration: 1.317,
+    answerResponseSignal: 1,
+    isCorrect: true,
+    answerTime: "2024-03-13T04:29:11.965+00:00",
+    article: 3,
+    category: {
+      parentCategoryId: null,
+      name: "The first category a",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 4
     },
-    "overallCorrectRate": 100,
-    "questionOrder": 11
+    overallCorrectRate: 100,
+    questionOrder: 11
   }, {
-    "id": 8156,
-    "selectedAnswers": "2",
-    "correctAnswers": "4",
-    "isStar": true,
-    "duration": 1.593,
-    "classAverageTime": 1.593,
-    "topDuration": 1.593,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:20.734+00:00",
-    "article": 3,
-    "category": {
-      "parentCategoryId": null,
-      "name": "The first category a",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 4
+    id: 8156,
+    selectedAnswers: "2",
+    correctAnswers: "4",
+    isStar: true,
+    duration: 1.593,
+    classAverageTime: 1.593,
+    topDuration: 1.593,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:20.734+00:00",
+    article: 3,
+    category: {
+      parentCategoryId: null,
+      name: "The first category a",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 4
     },
-    "overallCorrectRate": 82,
-    "questionOrder": 12
+    overallCorrectRate: 82,
+    questionOrder: 12
   }, {
-    "id": 8157,
-    "selectedAnswers": "2",
-    "correctAnswers": "5",
-    "isStar": true,
-    "duration": 1.204,
-    "classAverageTime": 1.204,
-    "topDuration": 1.204,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:18.164+00:00",
-    "article": 3,
-    "category": {
-      "parentCategoryId": null,
-      "name": "The first category a",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 4
+    id: 8157,
+    selectedAnswers: "2",
+    correctAnswers: "5",
+    isStar: true,
+    duration: 1.204,
+    classAverageTime: 1.204,
+    topDuration: 1.204,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:18.164+00:00",
+    article: 3,
+    category: {
+      parentCategoryId: null,
+      name: "The first category a",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 4
     },
-    "overallCorrectRate": 67,
-    "questionOrder": 13
+    overallCorrectRate: 67,
+    questionOrder: 13
   }, {
-    "id": 8158,
-    "selectedAnswers": "4",
-    "correctAnswers": "3",
-    "isStar": true,
-    "duration": 2.6,
-    "classAverageTime": 2.6,
-    "topDuration": 2.6,
-    "answerResponseSignal": 1,
-    "isCorrect": false,
-    "answerTime": "2024-03-13T04:29:16.96+00:00",
-    "article": 3,
-    "category": {
-      "parentCategoryId": null,
-      "name": "The first category a",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 4
+    id: 8158,
+    selectedAnswers: "4",
+    correctAnswers: "3",
+    isStar: true,
+    duration: 2.6,
+    classAverageTime: 2.6,
+    topDuration: 2.6,
+    answerResponseSignal: 1,
+    isCorrect: false,
+    answerTime: "2024-03-13T04:29:16.96+00:00",
+    article: 3,
+    category: {
+      parentCategoryId: null,
+      name: "The first category a",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 4
     },
-    "overallCorrectRate": 45,
-    "questionOrder": 14
+    overallCorrectRate: 45,
+    questionOrder: 14
   }, {
-    "id": 8159,
-    "selectedAnswers": "3",
-    "correctAnswers": "3",
-    "isStar": true,
-    "duration": 0.977,
-    "classAverageTime": 0.977,
-    "topDuration": 0.977,
-    "answerResponseSignal": 1,
-    "isCorrect": true,
-    "answerTime": "2024-03-13T04:29:19.141+00:00",
-    "article": 3,
-    "category": {
-      "parentCategoryId": null,
-      "name": "The first category a",
-      "path": "",
-      "numberOfQuestions": 0,
-      "numberOfChildren": 0,
-      "id": 4
+    id: 8159,
+    selectedAnswers: "3",
+    correctAnswers: "3",
+    isStar: true,
+    duration: 0.977,
+    classAverageTime: 0.977,
+    topDuration: 0.977,
+    answerResponseSignal: 1,
+    isCorrect: true,
+    answerTime: "2024-03-13T04:29:19.141+00:00",
+    article: 3,
+    category: {
+      parentCategoryId: null,
+      name: "The first category a",
+      path: "",
+      numberOfQuestions: 0,
+      numberOfChildren: 0,
+      id: 4
     },
-    "overallCorrectRate": 100,
-    "questionOrder": 15
+    overallCorrectRate: 100,
+    questionOrder: 15
   }],
-  "score": 10,
-  "placeOrder": 1,
-  "totalStudent": 1,
-  "totalTime": 30.987000000000002
+  score: 10,
+  placeOrder: 1,
+  totalStudent: 1,
+  totalTime: 30.987000000000002
 };
 var LONGTIME_SPEND_QUESTIONS = [{
-  "id": 8144,
-  "questionOrder": 0,
-  "duration": 320.939,
-  "topDuration": 145.32
+  id: 8144,
+  questionOrder: 0,
+  duration: 320.939,
+  topDuration: 145.32
 }, {
-  "id": 8153,
-  "questionOrder": 9,
-  "duration": 70.496,
-  "topDuration": 30.22
+  id: 8153,
+  questionOrder: 9,
+  duration: 70.496,
+  topDuration: 30.22
 }];
 var EFFECT_SIZE_QUESTIONS = [{
-  "id": 8144,
-  "questionOrder": 0,
-  "article": 1,
-  "isCorrect": false,
-  "selectedAnswers": "1",
-  "mostSelectedAnswers": "1",
-  "correctAnswers": "2",
-  "answerResponseSignal": 1,
-  "problemCategories": [3]
+  id: 8144,
+  questionOrder: 0,
+  article: 1,
+  isCorrect: false,
+  selectedAnswers: "1",
+  mostSelectedAnswers: "1",
+  correctAnswers: "2",
+  answerResponseSignal: 1,
+  problemCategories: [3]
 }, {
-  "id": 8145,
-  "questionOrder": 1,
-  "article": 1,
-  "isCorrect": false,
-  "selectedAnswers": "2",
-  "mostSelectedAnswers": "2",
-  "correctAnswers": "3",
-  "answerResponseSignal": 1,
-  "problemCategories": [4]
+  id: 8145,
+  questionOrder: 1,
+  article: 1,
+  isCorrect: false,
+  selectedAnswers: "2",
+  mostSelectedAnswers: "2",
+  correctAnswers: "3",
+  answerResponseSignal: 1,
+  problemCategories: [4]
 }, {
-  "id": 8146,
-  "questionOrder": 2,
-  "article": 1,
-  "isCorrect": false,
-  "selectedAnswers": "1",
-  "mostSelectedAnswers": "1",
-  "correctAnswers": "2",
-  "answerResponseSignal": 1,
-  "problemCategories": [3]
+  id: 8146,
+  questionOrder: 2,
+  article: 1,
+  isCorrect: false,
+  selectedAnswers: "1",
+  mostSelectedAnswers: "1",
+  correctAnswers: "2",
+  answerResponseSignal: 1,
+  problemCategories: [3]
 }, {
-  "id": 8147,
-  "questionOrder": 3,
-  "article": 1,
-  "isCorrect": true,
-  "selectedAnswers": "1",
-  "mostSelectedAnswers": "1",
-  "correctAnswers": "1",
-  "answerResponseSignal": 1,
-  "problemCategories": [1]
+  id: 8147,
+  questionOrder: 3,
+  article: 1,
+  isCorrect: true,
+  selectedAnswers: "1",
+  mostSelectedAnswers: "1",
+  correctAnswers: "1",
+  answerResponseSignal: 1,
+  problemCategories: [1]
 }, {
-  "id": 8148,
-  "questionOrder": 4,
-  "article": 1,
-  "isCorrect": false,
-  "selectedAnswers": "3",
-  "mostSelectedAnswers": "3",
-  "correctAnswers": "4",
-  "answerResponseSignal": 1,
-  "problemCategories": [4]
+  id: 8148,
+  questionOrder: 4,
+  article: 1,
+  isCorrect: false,
+  selectedAnswers: "3",
+  mostSelectedAnswers: "3",
+  correctAnswers: "4",
+  answerResponseSignal: 1,
+  problemCategories: [4]
 }, {
-  "id": 8149,
-  "questionOrder": 5,
-  "article": 2,
-  "isCorrect": true,
-  "selectedAnswers": "2",
-  "mostSelectedAnswers": "2",
-  "correctAnswers": "2",
-  "answerResponseSignal": 1,
-  "problemCategories": [1]
+  id: 8149,
+  questionOrder: 5,
+  article: 2,
+  isCorrect: true,
+  selectedAnswers: "2",
+  mostSelectedAnswers: "2",
+  correctAnswers: "2",
+  answerResponseSignal: 1,
+  problemCategories: [1]
 }, {
-  "id": 8150,
-  "questionOrder": 6,
-  "article": 2,
-  "isCorrect": false,
-  "selectedAnswers": "",
-  "mostSelectedAnswers": "",
-  "correctAnswers": "3",
-  "answerResponseSignal": null,
-  "problemCategories": []
+  id: 8150,
+  questionOrder: 6,
+  article: 2,
+  isCorrect: false,
+  selectedAnswers: "",
+  mostSelectedAnswers: "",
+  correctAnswers: "3",
+  answerResponseSignal: null,
+  problemCategories: []
 }, {
-  "id": 8151,
-  "questionOrder": 7,
-  "article": 2,
-  "isCorrect": false,
-  "selectedAnswers": "3",
-  "mostSelectedAnswers": "3",
-  "correctAnswers": "2",
-  "answerResponseSignal": 1,
-  "problemCategories": [2, 3]
+  id: 8151,
+  questionOrder: 7,
+  article: 2,
+  isCorrect: false,
+  selectedAnswers: "3",
+  mostSelectedAnswers: "3",
+  correctAnswers: "2",
+  answerResponseSignal: 1,
+  problemCategories: [2, 3]
 }, {
-  "id": 8152,
-  "questionOrder": 8,
-  "article": 2,
-  "isCorrect": false,
-  "selectedAnswers": "5",
-  "mostSelectedAnswers": "5",
-  "correctAnswers": "4",
-  "answerResponseSignal": 1,
-  "problemCategories": [4]
+  id: 8152,
+  questionOrder: 8,
+  article: 2,
+  isCorrect: false,
+  selectedAnswers: "5",
+  mostSelectedAnswers: "5",
+  correctAnswers: "4",
+  answerResponseSignal: 1,
+  problemCategories: [4]
 }, {
-  "id": 8153,
-  "questionOrder": 9,
-  "article": 2,
-  "isCorrect": true,
-  "selectedAnswers": "2",
-  "mostSelectedAnswers": "2",
-  "correctAnswers": "2",
-  "answerResponseSignal": 1,
-  "problemCategories": [1]
+  id: 8153,
+  questionOrder: 9,
+  article: 2,
+  isCorrect: true,
+  selectedAnswers: "2",
+  mostSelectedAnswers: "2",
+  correctAnswers: "2",
+  answerResponseSignal: 1,
+  problemCategories: [1]
 }, {
-  "id": 8154,
-  "questionOrder": 10,
-  "article": 2,
-  "isCorrect": false,
-  "selectedAnswers": "",
-  "mostSelectedAnswers": "",
-  "correctAnswers": "5",
-  "answerResponseSignal": null,
-  "problemCategories": []
+  id: 8154,
+  questionOrder: 10,
+  article: 2,
+  isCorrect: false,
+  selectedAnswers: "",
+  mostSelectedAnswers: "",
+  correctAnswers: "5",
+  answerResponseSignal: null,
+  problemCategories: []
 }, {
-  "id": 8155,
-  "questionOrder": 11,
-  "article": 3,
-  "isCorrect": true,
-  "selectedAnswers": "2",
-  "mostSelectedAnswers": "2",
-  "correctAnswers": "2",
-  "answerResponseSignal": 1,
-  "problemCategories": [1]
+  id: 8155,
+  questionOrder: 11,
+  article: 3,
+  isCorrect: true,
+  selectedAnswers: "2",
+  mostSelectedAnswers: "2",
+  correctAnswers: "2",
+  answerResponseSignal: 1,
+  problemCategories: [1]
 }, {
-  "id": 8156,
-  "questionOrder": 12,
-  "article": 3,
-  "isCorrect": false,
-  "selectedAnswers": "2",
-  "mostSelectedAnswers": "2",
-  "correctAnswers": "4",
-  "answerResponseSignal": 1,
-  "problemCategories": [4]
+  id: 8156,
+  questionOrder: 12,
+  article: 3,
+  isCorrect: false,
+  selectedAnswers: "2",
+  mostSelectedAnswers: "2",
+  correctAnswers: "4",
+  answerResponseSignal: 1,
+  problemCategories: [4]
 }, {
-  "id": 8157,
-  "questionOrder": 13,
-  "article": 3,
-  "isCorrect": false,
-  "selectedAnswers": "2",
-  "mostSelectedAnswers": "2",
-  "correctAnswers": "5",
-  "answerResponseSignal": 1,
-  "problemCategories": [4]
+  id: 8157,
+  questionOrder: 13,
+  article: 3,
+  isCorrect: false,
+  selectedAnswers: "2",
+  mostSelectedAnswers: "2",
+  correctAnswers: "5",
+  answerResponseSignal: 1,
+  problemCategories: [4]
 }, {
-  "id": 8158,
-  "questionOrder": 14,
-  "article": 3,
-  "isCorrect": false,
-  "selectedAnswers": "4",
-  "mostSelectedAnswers": "4",
-  "correctAnswers": "3",
-  "answerResponseSignal": 1,
-  "problemCategories": [4]
+  id: 8158,
+  questionOrder: 14,
+  article: 3,
+  isCorrect: false,
+  selectedAnswers: "4",
+  mostSelectedAnswers: "4",
+  correctAnswers: "3",
+  answerResponseSignal: 1,
+  problemCategories: [4]
 }, {
-  "id": 8159,
-  "questionOrder": 15,
-  "article": 3,
-  "isCorrect": true,
-  "selectedAnswers": "3",
-  "mostSelectedAnswers": "3",
-  "correctAnswers": "3",
-  "answerResponseSignal": 1,
-  "problemCategories": [1]
+  id: 8159,
+  questionOrder: 15,
+  article: 3,
+  isCorrect: true,
+  selectedAnswers: "3",
+  mostSelectedAnswers: "3",
+  correctAnswers: "3",
+  answerResponseSignal: 1,
+  problemCategories: [1]
 }];
 var TIMELY_ORDER_QUESTIONS = [{
-  "categoryId": 7,
-  "categoryName": "New category",
-  "article": 1,
-  "questions": [{
-    "questionId": 8144,
-    "questionOrder": 0,
-    "answerOrder": 1,
-    "topAnswerOrder": 2
+  categoryId: 7,
+  categoryName: "New category",
+  article: 1,
+  questions: [{
+    questionId: 8144,
+    questionOrder: 0,
+    answerOrder: 1,
+    topAnswerOrder: 2
   }, {
-    "questionId": 8145,
-    "questionOrder": 1,
-    "answerOrder": 2,
-    "topAnswerOrder": 1
+    questionId: 8145,
+    questionOrder: 1,
+    answerOrder: 2,
+    topAnswerOrder: 1
   }, {
-    "questionId": 8146,
-    "questionOrder": 2,
-    "answerOrder": 3,
-    "topAnswerOrder": 4
+    questionId: 8146,
+    questionOrder: 2,
+    answerOrder: 3,
+    topAnswerOrder: 4
   }, {
-    "questionId": 8147,
-    "questionOrder": 3,
-    "answerOrder": 4,
-    "topAnswerOrder": 5
+    questionId: 8147,
+    questionOrder: 3,
+    answerOrder: 4,
+    topAnswerOrder: 5
   }, {
-    "questionId": 8148,
-    "questionOrder": 4,
-    "answerOrder": 5,
-    "topAnswerOrder": 3
+    questionId: 8148,
+    questionOrder: 4,
+    answerOrder: 5,
+    topAnswerOrder: 3
   }]
 }, {
-  "categoryId": 1008,
-  "categoryName": "123458868",
-  "article": 2,
-  "questions": [{
-    "questionId": 8149,
-    "questionOrder": 5,
-    "answerOrder": 1,
-    "topAnswerOrder": 5
+  categoryId: 1008,
+  categoryName: "123458868",
+  article: 2,
+  questions: [{
+    questionId: 8149,
+    questionOrder: 5,
+    answerOrder: 1,
+    topAnswerOrder: 5
   }, {
-    "questionId": 8150,
-    "questionOrder": 6,
-    "answerOrder": null,
-    "topAnswerOrder": 2
+    questionId: 8150,
+    questionOrder: 6,
+    answerOrder: null,
+    topAnswerOrder: 2
   }, {
-    "questionId": 8151,
-    "questionOrder": 7,
-    "answerOrder": 2,
-    "topAnswerOrder": 3
+    questionId: 8151,
+    questionOrder: 7,
+    answerOrder: 2,
+    topAnswerOrder: 3
   }, {
-    "questionId": 8152,
-    "questionOrder": 8,
-    "answerOrder": 3,
-    "topAnswerOrder": 4
+    questionId: 8152,
+    questionOrder: 8,
+    answerOrder: 3,
+    topAnswerOrder: 4
   }, {
-    "questionId": 8153,
-    "questionOrder": 9,
-    "answerOrder": 4,
-    "topAnswerOrder": 1
+    questionId: 8153,
+    questionOrder: 9,
+    answerOrder: 4,
+    topAnswerOrder: 1
   }, {
-    "questionId": 8154,
-    "questionOrder": 10,
-    "answerOrder": null,
-    "topAnswerOrder": 6
+    questionId: 8154,
+    questionOrder: 10,
+    answerOrder: null,
+    topAnswerOrder: 6
   }]
 }, {
-  "categoryId": 4,
-  "categoryName": "The first category a",
-  "article": 3,
-  "questions": [{
-    "questionId": 8155,
-    "questionOrder": 11,
-    "answerOrder": 1,
-    "topAnswerOrder": 3
+  categoryId: 4,
+  categoryName: "The first category a",
+  article: 3,
+  questions: [{
+    questionId: 8155,
+    questionOrder: 11,
+    answerOrder: 1,
+    topAnswerOrder: 3
   }, {
-    "questionId": 8156,
-    "questionOrder": 12,
-    "answerOrder": 5,
-    "topAnswerOrder": 2
+    questionId: 8156,
+    questionOrder: 12,
+    answerOrder: 5,
+    topAnswerOrder: 2
   }, {
-    "questionId": 8157,
-    "questionOrder": 13,
-    "answerOrder": 3,
-    "topAnswerOrder": 1
+    questionId: 8157,
+    questionOrder: 13,
+    answerOrder: 3,
+    topAnswerOrder: 1
   }, {
-    "questionId": 8158,
-    "questionOrder": 14,
-    "answerOrder": 2,
-    "topAnswerOrder": 4
+    questionId: 8158,
+    questionOrder: 14,
+    answerOrder: 2,
+    topAnswerOrder: 4
   }, {
-    "questionId": 8159,
-    "questionOrder": 15,
-    "answerOrder": 4,
-    "topAnswerOrder": 5
+    questionId: 8159,
+    questionOrder: 15,
+    answerOrder: 4,
+    topAnswerOrder: 5
   }]
 }];
 var CATEGORY_RESPONSES = [{
-  "id": 7,
-  "name": "New category",
-  "totalQuestions": 5,
-  "totalCorrectQuestions": 1,
-  "totalAnsweredQuestions": 5,
-  "percentageAmongStudents": 17
+  id: 7,
+  name: "New category",
+  totalQuestions: 5,
+  totalCorrectQuestions: 1,
+  totalAnsweredQuestions: 5,
+  percentageAmongStudents: 17
 }, {
-  "id": 1008,
-  "name": "123458868",
-  "totalQuestions": 6,
-  "totalCorrectQuestions": 2,
-  "totalAnsweredQuestions": 4,
-  "percentageAmongStudents": 48
+  id: 1008,
+  name: "123458868",
+  totalQuestions: 6,
+  totalCorrectQuestions: 2,
+  totalAnsweredQuestions: 4,
+  percentageAmongStudents: 48
 }, {
-  "id": 4,
-  "name": "The first category a",
-  "totalQuestions": 5,
-  "totalCorrectQuestions": 2,
-  "totalAnsweredQuestions": 5,
-  "percentageAmongStudents": 40
+  id: 4,
+  name: "The first category a",
+  totalQuestions: 5,
+  totalCorrectQuestions: 2,
+  totalAnsweredQuestions: 5,
+  percentageAmongStudents: 40
 }];
+var DEFAULT_LINE_CHART_OPTIONS = {
+  chart: {
+    type: "line",
+    toolbar: {
+      show: false
+    },
+    zoom: {
+      enabled: false
+    }
+  },
+  tooltip: {
+    enabled: true,
+    hideEmptySeries: true
+  },
+  legend: {
+    show: true,
+    fontSize: "12px",
+    fontWeight: 600,
+    markers: {
+      width: 16,
+      height: 1
+    },
+    labels: {
+      colors: "#414E62"
+    },
+    itemMargin: {
+      vertical: 16
+    }
+  },
+  dataLabels: {
+    enabled: false
+  },
+  xaxis: {
+    categories: [],
+    axisBorder: {
+      show: true,
+      color: "#E4E7EC"
+    },
+    labels: {
+      style: {
+        fontSize: "10px"
+      }
+    }
+  },
+  grid: {
+    row: {
+      colors: ["#FFFFFF"]
+    },
+    borderColor: "#E4E7EC",
+    xaxis: {
+      lines: {
+        show: true
+      }
+    }
+  },
+  yaxis: {
+    stepSize: 1,
+    min: 0,
+    axisBorder: {
+      show: true,
+      color: "#E4E7EC"
+    },
+    labels: {
+      style: {
+        fontSize: "10px"
+      }
+    }
+  }
+};
+var defaultSeries = function defaultSeries(t) {
+  return [{
+    name: t("my_problem_solving_order"),
+    data: []
+  }, {
+    name: t("top_rankings_problem_solving_order"),
+    data: []
+  }];
+};
 
-var useExamResult = function useExamResult(searchParam, navigate, examSessionId, studentId, code) {
+var useExamResult = function useExamResult(searchParam, navigate, examSessionId, studentId, code, handleChangeTab) {
+  var _allChartOptions$data, _allSeries$dataChartI;
   if (examSessionId === void 0) {
     examSessionId = 0;
   }
@@ -9103,7 +9202,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     var _state$common, _state$common$user;
     return (state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles) || [];
   });
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$2.Student);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   var examCode = query.get("examCode") || "";
   var language = useSelector(function (state) {
     var _state$common2;
@@ -9119,8 +9218,8 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     longTimeSpend = _useState3[0],
     setLongTimeSpend = _useState3[1];
   var _useState4 = useState([]),
-    timelyOrderQuestion = _useState4[0],
-    setTimelyOrderQuestion = _useState4[1];
+    timelyOrderQuestions = _useState4[0],
+    setTimelyOrderQuestions = _useState4[1];
   var _useState5 = useState([]),
     categoryResponses = _useState5[0],
     setCategoryResponses = _useState5[1];
@@ -9146,10 +9245,11 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         var _temp = _catch(function () {
           return Promise.resolve(Promise.all([getResults(examCode), getResultsLongTimeSpend(examCode), getResultsEffectSize(examCode), getResultsTimeOrderQuestion(examCode), getResultsCategories(examCode)])).then(function (result) {
             var _result$0$data, _result$1$data, _result$2$data, _result$3$data, _result$4$data;
+            handleChangeTab(0);
             setResultDatas((_result$0$data = result[0].data) === null || _result$0$data === void 0 ? void 0 : _result$0$data.data);
             setLongTimeSpend((_result$1$data = result[1].data) === null || _result$1$data === void 0 ? void 0 : _result$1$data.data);
             setEffectSize((_result$2$data = result[2].data) === null || _result$2$data === void 0 ? void 0 : _result$2$data.data);
-            setTimelyOrderQuestion((_result$3$data = result[3].data) === null || _result$3$data === void 0 ? void 0 : _result$3$data.data);
+            setTimelyOrderQuestions((_result$3$data = result[3].data) === null || _result$3$data === void 0 ? void 0 : _result$3$data.data);
             setCategoryResponses(((_result$4$data = result[4].data) === null || _result$4$data === void 0 ? void 0 : _result$4$data.data) || []);
           });
         }, function (error) {
@@ -9180,10 +9280,11 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         var _temp5 = _catch(function () {
           return Promise.resolve(Promise.all([getResultsTeacher(examSessionId, studentId), getResultsLongTimeSpendTeacher(examSessionId, studentId), getResultsEffectSizeTeacher(examSessionId, studentId), getResultsTimeOrderQuestionTeacher(examSessionId, studentId), getResultsCategoriesTeacher(examSessionId, studentId)])).then(function (result) {
             var _result$0$data2, _result$1$data2, _result$2$data2, _result$3$data2, _result$4$data2;
+            handleChangeTab(0);
             setResultDatas((_result$0$data2 = result[0].data) === null || _result$0$data2 === void 0 ? void 0 : _result$0$data2.data);
             setLongTimeSpend((_result$1$data2 = result[1].data) === null || _result$1$data2 === void 0 ? void 0 : _result$1$data2.data);
             setEffectSize((_result$2$data2 = result[2].data) === null || _result$2$data2 === void 0 ? void 0 : _result$2$data2.data);
-            setTimelyOrderQuestion((_result$3$data2 = result[3].data) === null || _result$3$data2 === void 0 ? void 0 : _result$3$data2.data);
+            setTimelyOrderQuestions((_result$3$data2 = result[3].data) === null || _result$3$data2 === void 0 ? void 0 : _result$3$data2.data);
             setCategoryResponses(((_result$4$data2 = result[4].data) === null || _result$4$data2 === void 0 ? void 0 : _result$4$data2.data) || []);
           });
         }, function (error) {
@@ -9209,7 +9310,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     setResultDatas(EXAM_RESULT);
     setLongTimeSpend(LONGTIME_SPEND_QUESTIONS);
     setEffectSize(EFFECT_SIZE_QUESTIONS);
-    setTimelyOrderQuestion(TIMELY_ORDER_QUESTIONS);
+    setTimelyOrderQuestions(TIMELY_ORDER_QUESTIONS);
     setCategoryResponses(CATEGORY_RESPONSES);
   };
   useEffect(function () {
@@ -9225,7 +9326,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     }
   };
   var handleNextChart = function handleNextChart() {
-    if (dataChartIndex < timelyOrderQuestion.length - 1) {
+    if (dataChartIndex < timelyOrderQuestions.length - 1) {
       setDataChartIndex(dataChartIndex + 1);
     }
   };
@@ -9243,216 +9344,282 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
       seconds: totalTime % 60
     });
   }, [JSON.stringify(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.questions), language]);
-  var chartOptions = useMemo(function () {
-    return {
-      chart: {
-        type: "line",
-        toolbar: {
-          show: false
-        },
-        zoom: {
-          enabled: false
-        }
-      },
-      tooltip: {
-        enabled: true,
-        hideEmptySeries: true,
-        y: {
-          formatter: function formatter(val, _ref) {
-            var dataPointIndex = _ref.dataPointIndex;
-            if (dataPointIndex > 0) {
-              var _timelyOrderQuestion$, _questions$length, _questions;
-              var questions = ((_timelyOrderQuestion$ = timelyOrderQuestion[dataChartIndex]) === null || _timelyOrderQuestion$ === void 0 ? void 0 : _timelyOrderQuestion$.questions) || null;
-              var questionLength = (_questions$length = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length : 0;
+  var allChartOptions = useMemo(function () {
+    return timelyOrderQuestions.map(function (timelyOrderQuestion) {
+      return _extends({}, DEFAULT_LINE_CHART_OPTIONS, {
+        tooltip: _extends({}, DEFAULT_LINE_CHART_OPTIONS.tooltip, {
+          y: {
+            formatter: function formatter(val, _ref) {
+              var dataPointIndex = _ref.dataPointIndex;
+              if (dataPointIndex > 0) {
+                var _questions$length, _questions;
+                var questions = timelyOrderQuestion.questions || null;
+                var questionLength = (_questions$length = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length : 0;
+                return val != null ? t("problem_number_question", {
+                  number: questions !== null ? (((_questions = questions[questionLength - val]) === null || _questions === void 0 ? void 0 : _questions.questionOrder) || 0) + 1 : val
+                }) : t("no_data");
+              }
+              return null;
+            }
+          }
+        }),
+        xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
+          categories: ["."].concat(Array.from({
+            length: timelyOrderQuestion ? timelyOrderQuestion.questions.length : 1
+          }, function (_, i) {
+            return ORDER_NUMBERS[i + 1] ? t(ORDER_NUMBERS[i + 1]) : toNumberOrder(i + 1);
+          }), ["."])
+        }),
+        yaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.yaxis, {
+          tickAmount: timelyOrderQuestion.questions.length + 1,
+          max: timelyOrderQuestion.questions.length + 1,
+          labels: _extends({}, DEFAULT_LINE_CHART_OPTIONS.yaxis.labels, {
+            formatter: function formatter(val) {
+              var _questions$length2, _questions2;
+              var questions = timelyOrderQuestion.questions || null;
+              var questionLength = (_questions$length2 = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length2 : 0;
               return val != null ? t("problem_number_question", {
-                number: questions !== null ? (((_questions = questions[questionLength - val]) === null || _questions === void 0 ? void 0 : _questions.questionOrder) || 0) + 1 : val
+                number: questions !== null ? (((_questions2 = questions[questionLength - val]) === null || _questions2 === void 0 ? void 0 : _questions2.questionOrder) || 0) + 1 : val
               }) : t("no_data");
             }
-            return null;
-          }
-        }
-      },
-      legend: {
-        show: true,
-        fontSize: "12px",
-        fontWeight: 600,
-        markers: {
-          width: 16,
-          height: 1
-        },
-        labels: {
-          colors: "#414E62"
-        },
-        itemMargin: {
-          vertical: 16
-        }
-      },
-      dataLabels: {
-        enabled: false
-      },
-      xaxis: {
-        categories: ["."].concat(Array.from({
-          length: timelyOrderQuestion[dataChartIndex] ? timelyOrderQuestion[dataChartIndex].questions.length : 1
-        }, function (_, i) {
-          return ORDER_NUMBERS[i + 1] ? t(ORDER_NUMBERS[i + 1]) : toNumberOrder(i + 1);
-        }), ["."]),
-        axisBorder: {
-          show: true,
-          color: "#E4E7EC"
-        },
-        labels: {
-          style: {
-            fontSize: "10px"
-          }
-        }
-      },
-      grid: {
-        row: {
-          colors: ["#FFFFFF"]
-        },
-        borderColor: "#E4E7EC",
-        xaxis: {
-          lines: {
-            show: true
-          }
-        }
-      },
-      yaxis: {
-        tickAmount: timelyOrderQuestion[dataChartIndex] ? timelyOrderQuestion[dataChartIndex].questions.length + 1 : 1,
-        stepSize: 1,
-        min: 0,
-        max: timelyOrderQuestion[dataChartIndex] ? timelyOrderQuestion[dataChartIndex].questions.length + 1 : 1,
-        axisBorder: {
-          show: true,
-          color: "#E4E7EC"
-        },
-        labels: {
-          formatter: function formatter(val) {
-            var _timelyOrderQuestion$2, _questions$length2, _questions2;
-            var questions = ((_timelyOrderQuestion$2 = timelyOrderQuestion[dataChartIndex]) === null || _timelyOrderQuestion$2 === void 0 ? void 0 : _timelyOrderQuestion$2.questions) || null;
-            var questionLength = (_questions$length2 = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length2 : 0;
-            return val != null ? t("problem_number_question", {
-              number: questions !== null ? (((_questions2 = questions[questionLength - val]) === null || _questions2 === void 0 ? void 0 : _questions2.questionOrder) || 0) + 1 : val
-            }) : t("no_data");
-          },
-          style: {
-            fontSize: "10px"
-          }
-        }
-      }
-    };
-  }, [JSON.stringify(timelyOrderQuestion), dataChartIndex, language]);
-  var series = useMemo(function () {
-    if (!timelyOrderQuestion.length || timelyOrderQuestion.length < dataChartIndex + 1 || dataChartIndex < 0) return [{
-      name: t("my_problem_solving_order"),
-      data: []
-    }, {
-      name: t("top_rankings_problem_solving_order"),
-      data: []
-    }];
-    var data = timelyOrderQuestion[dataChartIndex];
-    var questionsData = data.questions.sort(function (a, b) {
-      return a.questionOrder > b.questionOrder ? 1 : b.questionOrder > a.questionOrder ? -1 : 0;
-    }).map(function (i, index) {
-      return _extends({}, i, {
-        questionOrder: index,
-        answerOrder: i.answerOrder == null ? 0 : i.answerOrder,
-        topAnswerOrder: i.topAnswerOrder == null ? 0 : i.topAnswerOrder
+          })
+        })
       });
     });
-    var mySeriesData = [null].concat(_.sortBy(questionsData.filter(function (i) {
-      return i.answerOrder !== 0;
-    }), ["answerOrder", "questionOrder"]).map(function (item) {
-      return data.questions.length - item.questionOrder;
-    }), questionsData.filter(function (i) {
-      return i.answerOrder === 0;
-    }).map(function () {
-      return null;
-    }), [null]);
-    var topSeriesData = [null].concat(_.sortBy(questionsData.filter(function (i) {
-      return i.topAnswerOrder !== 0;
-    }), ["topAnswerOrder", "questionOrder"]).map(function (item) {
-      return data.questions.length - item.questionOrder;
-    }), questionsData.filter(function (i) {
-      return i.topAnswerOrder === 0;
-    }).map(function () {
-      return null;
-    }), [null]);
-    return [{
-      name: t("my_problem_solving_order"),
-      data: mySeriesData
-    }, {
-      name: t("top_rankings_problem_solving_order"),
-      data: topSeriesData
-    }];
-  }, [JSON.stringify(timelyOrderQuestion), dataChartIndex, language]);
+  }, [JSON.stringify(timelyOrderQuestions), language]);
+  var allSeries = useMemo(function () {
+    return timelyOrderQuestions.map(function (timelyOrderQuestion) {
+      var questionsData = timelyOrderQuestion.questions.sort(function (a, b) {
+        return a.questionOrder > b.questionOrder ? 1 : b.questionOrder > a.questionOrder ? -1 : 0;
+      }).map(function (i, index) {
+        return _extends({}, i, {
+          questionOrder: index,
+          answerOrder: i.answerOrder == null ? 0 : i.answerOrder,
+          topAnswerOrder: i.topAnswerOrder == null ? 0 : i.topAnswerOrder
+        });
+      });
+      var mySeriesData = [null].concat(_.sortBy(questionsData.filter(function (i) {
+        return i.answerOrder !== 0;
+      }), ["answerOrder", "questionOrder"]).map(function (item) {
+        return timelyOrderQuestion.questions.length - item.questionOrder;
+      }), questionsData.filter(function (i) {
+        return i.answerOrder === 0;
+      }).map(function () {
+        return null;
+      }), [null]);
+      var topSeriesData = [null].concat(_.sortBy(questionsData.filter(function (i) {
+        return i.topAnswerOrder !== 0;
+      }), ["topAnswerOrder", "questionOrder"]).map(function (item) {
+        return timelyOrderQuestion.questions.length - item.questionOrder;
+      }), questionsData.filter(function (i) {
+        return i.topAnswerOrder === 0;
+      }).map(function () {
+        return null;
+      }), [null]);
+      return [{
+        name: t("my_problem_solving_order"),
+        data: mySeriesData
+      }, {
+        name: t("top_rankings_problem_solving_order"),
+        data: topSeriesData
+      }];
+    });
+  }, [JSON.stringify(timelyOrderQuestions), language]);
+  var chartOptions = (_allChartOptions$data = allChartOptions[dataChartIndex]) != null ? _allChartOptions$data : DEFAULT_LINE_CHART_OPTIONS;
+  var series = (_allSeries$dataChartI = allSeries[dataChartIndex]) != null ? _allSeries$dataChartI : defaultSeries(t);
   var handleExportPdf = function handleExportPdf() {
     try {
-      var canvas = document.querySelector("#canvas");
-      var headerCanvas = document.querySelector("#header-canvas");
-      if (!canvas || !headerCanvas) return Promise.resolve();
-      var doc = new jsPDF({
-        orientation: "p",
-        unit: "px",
-        format: "a4"
-      });
-      var WIDTH_PAPER = doc.internal.pageSize.width;
-      var HEIGHT_PAPER = doc.internal.pageSize.height;
-      var line = 0;
-      var imgWidth = WIDTH_PAPER;
-      var chartWidth = WIDTH_PAPER - 20;
-      return Promise.resolve(html2canvas(headerCanvas)).then(function (header) {
-        function _temp11() {
-          doc.save("download.pdf");
+      var _temp24 = function _temp24(_result) {
+        if (_exit) return _result;
+        dispatch(setLoading(false));
+      };
+      var _exit = false;
+      dispatch(setLoading(true));
+      var _temp23 = _catch(function () {
+        var canvas = document.querySelector("#canvas");
+        var headerCanvas = document.querySelector("#header-canvas");
+        if (!canvas || !headerCanvas) {
+          _exit = true;
+          return;
         }
-        var imgHeaderHeight = header.height * imgWidth / header.width;
-        var imgHeaderData = header.toDataURL('image/png');
-        doc.addImage(imgHeaderData, 'PNG', 0, 0, imgWidth, imgHeaderHeight);
-        line += imgHeaderHeight;
-        if (line > HEIGHT_PAPER) {
+        var doc = new jsPDF({
+          orientation: "p",
+          unit: "px",
+          format: "a4"
+        });
+        var WIDTH_PAPER = doc.internal.pageSize.width;
+        var HEIGHT_PAPER = doc.internal.pageSize.height;
+        var line = 0;
+        var breakPage = function breakPage() {
           doc.addPage();
           line = 20;
-        }
-        var _temp10 = function () {
-          if (canvas && canvas.childElementCount > 0) {
-            var _index = 0;
-            var _temp9 = _for(function () {
-              return _index < canvas.childElementCount;
-            }, function () {
-              return _index++;
-            }, function () {
-              var chart = canvas.children.item(_index);
-              return Promise.resolve(html2canvas(chart)).then(function (chartCanvas) {
-                var imgBodyHeight = chartCanvas.height * chartWidth / chartCanvas.width;
-                var imgBodyData = chartCanvas.toDataURL('image/png');
-                line += 10;
-                if (line + imgBodyHeight > HEIGHT_PAPER) {
-                  doc.addPage();
-                  line = 20;
+        };
+        var imgWidth = WIDTH_PAPER;
+        var chartWidth = WIDTH_PAPER - 20;
+        return Promise.resolve(html2canvas(headerCanvas)).then(function (header) {
+          function _temp22() {
+            doc.save("download.pdf");
+          }
+          var imgHeaderHeight = header.height * imgWidth / header.width;
+          var imgHeaderData = header.toDataURL('image/png');
+          doc.addImage(imgHeaderData, 'PNG', 0, 0, imgWidth, imgHeaderHeight);
+          line += imgHeaderHeight;
+          if (line > HEIGHT_PAPER) breakPage();
+          var _temp21 = function () {
+            if (canvas && canvas.childElementCount > 0) {
+              var _index = 0;
+              var _temp20 = _for(function () {
+                return _index < canvas.childElementCount;
+              }, function () {
+                return _index++;
+              }, function () {
+                function _temp19() {
+                  function _temp17() {
+                    line += 20;
+                  }
+                  var printChartTitle = function printChartTitle() {
+                    try {
+                      if (chartTitleData && chartTitleHeight) {
+                        if (line + chartTitleHeight + 10 > HEIGHT_PAPER) breakPage();else line + 10;
+                        doc.addImage(chartTitleData, 'PNG', 10, line, chartWidth, chartTitleHeight);
+                        line += chartTitleHeight;
+                      }
+                      return Promise.resolve();
+                    } catch (e) {
+                      return Promise.reject(e);
+                    }
+                  };
+                  var _temp16 = function () {
+                    if (printContainerEls.length) {
+                      var _temp15 = _forTo(printContainerEls, function (i) {
+                        function _temp14() {
+                          var printHeader = function printHeader(top) {
+                            if (top === void 0) {
+                              top = 0;
+                            }
+                            try {
+                              if (!printHeaderData || !printHeaderHeight) return Promise.resolve();
+                              line += top;
+                              if (line + printHeaderHeight > HEIGHT_PAPER) breakPage();
+                              doc.addImage(printHeaderData, 'PNG', 10, line, chartWidth, printHeaderHeight);
+                              line += printHeaderHeight;
+                              return Promise.resolve();
+                            } catch (e) {
+                              return Promise.reject(e);
+                            }
+                          };
+                          var printContents = printContainerEl.querySelectorAll("." + PrintContentClassName);
+                          if (!printContents.length) return;
+                          var _temp12 = _forTo(printContents, function (j) {
+                            var rowItem = printContents[j];
+                            return Promise.resolve(html2canvas(rowItem)).then(function (rowItemCanvas) {
+                              function _temp11() {
+                                doc.addImage(data, 'PNG', 10, line, chartWidth, height);
+                                line += height;
+                              }
+                              var height = rowItemCanvas.height * chartWidth / rowItemCanvas.width;
+                              var data = rowItemCanvas.toDataURL('image/png');
+                              if (i === 0 && j === 0 && line + height + (printHeaderHeight || 0) + ((chartTitleHeight || 0) + 10) + 20 > HEIGHT_PAPER) breakPage();
+                              i === 0 && j === 0 && printChartTitle();
+                              var _temp10 = function () {
+                                if (line + height + 20 > HEIGHT_PAPER) {
+                                  breakPage();
+                                  return Promise.resolve(printHeader()).then(function () {});
+                                } else {
+                                  var _temp25 = function () {
+                                    if (j === 0) {
+                                      return Promise.resolve(printHeader(10)).then(function () {});
+                                    }
+                                  }();
+                                  if (_temp25 && _temp25.then) return _temp25.then(function () {});
+                                }
+                              }();
+                              return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
+                            });
+                          });
+                          if (_temp12 && _temp12.then) return _temp12.then(function () {});
+                        }
+                        var printContainerEl = printContainerEls[i];
+                        var printHeaderEl = printContainerEl.querySelector("." + PrintHeaderClassName);
+                        var printHeaderCanvas = null;
+                        var printHeaderHeight = null;
+                        var printHeaderData = "";
+                        var _temp13 = function () {
+                          if (printHeaderEl) {
+                            return Promise.resolve(html2canvas(printHeaderEl)).then(function (_html2canvas2) {
+                              printHeaderCanvas = _html2canvas2;
+                              printHeaderHeight = printHeaderCanvas.height * chartWidth / printHeaderCanvas.width;
+                              printHeaderData = printHeaderCanvas.toDataURL('image/png');
+                            });
+                          }
+                        }();
+                        return _temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13);
+                      });
+                      if (_temp15 && _temp15.then) return _temp15.then(function () {});
+                    } else {
+                      return Promise.resolve(html2canvas(chart)).then(function (chartCanvas) {
+                        var imgBodyHeight = chartCanvas.height * chartWidth / chartCanvas.width;
+                        var imgBodyData = chartCanvas.toDataURL('image/png');
+                        line += 10;
+                        if (line + imgBodyHeight + 20 + (chartTitleHeight || 0) > HEIGHT_PAPER) breakPage();
+                        printChartTitle();
+                        doc.addImage(imgBodyData, 'PNG', 10, line, chartWidth, imgBodyHeight);
+                        line += imgBodyHeight;
+                      });
+                    }
+                  }();
+                  return _temp16 && _temp16.then ? _temp16.then(_temp17) : _temp17(_temp16);
                 }
-                doc.addImage(imgBodyData, 'PNG', 10, line, chartWidth, imgBodyHeight);
-                line += imgBodyHeight;
+                var chart = canvas.children.item(_index);
+                if (chart.getAttribute("id") === "header-canvas") return;
+                var chartTitle = chart.querySelector(".chart-title");
+                var printContainerEls = chart.querySelectorAll("." + PrintContainerClassName);
+                var printChartTitleCanvas = null;
+                var chartTitleHeight = null;
+                var chartTitleData = "";
+                var _temp18 = function () {
+                  if (chartTitle && printContainerEls.length) {
+                    return Promise.resolve(html2canvas(chartTitle)).then(function (_html2canvas) {
+                      printChartTitleCanvas = _html2canvas;
+                      chartTitleHeight = printChartTitleCanvas.height * chartWidth / printChartTitleCanvas.width;
+                      chartTitleData = printChartTitleCanvas.toDataURL('image/png');
+                    });
+                  }
+                }();
+                return _temp18 && _temp18.then ? _temp18.then(_temp19) : _temp19(_temp18);
               });
-            });
-            if (_temp9 && _temp9.then) return _temp9.then(function () {});
-          }
-        }();
-        return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
+              if (_temp20 && _temp20.then) return _temp20.then(function () {});
+            }
+          }();
+          return _temp21 && _temp21.then ? _temp21.then(_temp22) : _temp22(_temp21);
+        });
+      }, function (error) {
+        console.log({
+          error: error
+        });
+        toast.error("Print pdf failure!");
       });
+      return Promise.resolve(_temp23 && _temp23.then ? _temp23.then(_temp24) : _temp24(_temp23));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  var examTime = useMemo(function () {
+    return utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, "HH:mm") + " ~ " + utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.finishTime, "HH:mm");
+  }, [resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.finishTime]);
   return {
+    examTime: examTime,
     series: series,
     chartOptions: chartOptions,
+    allChartOptions: allChartOptions,
+    allSeries: allSeries,
     dataChartIndex: dataChartIndex,
     totalTime: totalTime,
     isStudent: isStudent,
     resultDatas: resultDatas,
     effectSize: effectSize,
     longTimeSpend: longTimeSpend,
-    timelyOrderQuestion: timelyOrderQuestion,
+    timelyOrderQuestions: timelyOrderQuestions,
     openProblem: openProblem,
     categoryResponses: categoryResponses,
     setOpenProblem: setOpenProblem,
@@ -10941,7 +11108,8 @@ function CreateNewQuestionDialog(_ref) {
 function MyAnswer(_ref) {
   var data = _ref.data,
     categories = _ref.categories,
-    isStudent = _ref.isStudent;
+    isStudent = _ref.isStudent,
+    isPrint = _ref.isPrint;
   var _useCreateQuestionDia = useCreateQuestionDialog(),
     handleCreateQuestion = _useCreateQuestionDia.handleCreateQuestion,
     openCreateQuestionDialog = _useCreateQuestionDia.openCreateQuestionDialog,
@@ -10958,94 +11126,8 @@ function MyAnswer(_ref) {
     handleSelectQuestionOrder(id);
     toggleCreateQuestion();
   };
-  return React.createElement("div", {
-    className: styles$4["myanswer"]
-  }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
-    return React.createElement("div", {
-      key: item.category.id
-    }, React.createElement(Stack, {
-      bgcolor: "#F9FAFB",
-      flexDirection: "row",
-      padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
-    }, React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uC815\uB2F5")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
-    }, React.createElement(Typography, {
-      sx: {
-        color: "#97A1AF",
-        fontSize: "12px"
-      }
-    }, "\uCE74\uD14C\uACE0\uB9AC"), React.createElement(Typography, {
-      sx: {
-        color: "#414E62",
-        fontSize: "12px",
-        fontWeight: 700
-      }
-    }, item.category.name)), React.createElement("div", {
-      className: styles$4["contentMyAnswer"]
-    }, item.questions.map(function (question, index) {
+  var renderQuestions = function renderQuestions(questions) {
+    return questions.map(function (question, index) {
       return React.createElement("div", {
         style: isOpenTime[question.id] ? {
           borderTop: index !== 0 ? "1px solid #E4E7EC" : "",
@@ -11140,7 +11222,108 @@ function MyAnswer(_ref) {
       }, React.createElement(iconChat, {
         color: "#5458D5"
       })))));
-    })));
+    });
+  };
+  var renderPrintQuestions = function renderPrintQuestions(questions) {
+    var chunkedQuestions = _.chunk(questions, 5);
+    return chunkedQuestions.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderQuestions(i));
+    });
+  };
+  return React.createElement("div", {
+    className: styles$4["myanswer"]
+  }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
+    return React.createElement("div", {
+      key: item.category.id,
+      className: isPrint ? PrintContainerClassName : ""
+    }, React.createElement("div", {
+      className: isPrint ? PrintHeaderClassName : ""
+    }, React.createElement(Stack, {
+      bgcolor: "#F9FAFB",
+      flexDirection: "row",
+      padding: "12px",
+      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    }, React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uC815\uB2F5")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
+      className: styles$4["titleMyAnswer2"]
+    }, React.createElement(Typography, {
+      sx: {
+        color: "#97A1AF",
+        fontSize: "12px"
+      }
+    }, "\uCE74\uD14C\uACE0\uB9AC"), React.createElement(Typography, {
+      sx: {
+        color: "#414E62",
+        fontSize: "12px",
+        fontWeight: 700
+      }
+    }, item.category.name))), React.createElement("div", {
+      className: styles$4["contentMyAnswer"]
+    }, isPrint ? renderPrintQuestions(item.questions) : renderQuestions(item.questions)));
   }), React.createElement(CreateNewQuestionDialog, {
     questions: data === null || data === void 0 ? void 0 : data.questions,
     questionOrderSelected: questionOrderSelected,
@@ -11193,10 +11376,74 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
   }));
 };
 
-function CompareGrass(_ref) {
-  var effectSize = _ref.effectSize;
+var CompareGrass = function CompareGrass(_ref) {
+  var effectSize = _ref.effectSize,
+    isPrint = _ref.isPrint;
+  var renderTableBody = function renderTableBody(effectSize) {
+    return effectSize.map(function (item, index) {
+      return React.createElement("tr", {
+        id: "print-item",
+        key: item.id,
+        style: index < effectSize.length - 1 ? {
+          borderBottom: "1px solid #e4e7ec"
+        } : {}
+      }, React.createElement("td", {
+        className: styles$4["tdcolumn1"]
+      }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
+        style: {
+          textAlign: "center",
+          color: "#202B37"
+        }
+      }, item.correctAnswers, "\uBC88"), React.createElement("td", {
+        className: styles$4["tdcolumn3"],
+        style: {
+          color: item.isCorrect ? "#1EE288" : "#F34B4B"
+        }
+      }, item.selectedAnswers ? item.selectedAnswers + "\uBC88" : ""), React.createElement("td", {
+        style: {
+          textAlign: "center",
+          color: "#414E62"
+        }
+      }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
+        className: styles$4["classification"]
+      }, item.problemCategories.map(function (problem, index) {
+        return React.createElement("div", {
+          key: index
+        }, problem === 1 && React.createElement("span", {
+          style: {
+            border: "1px solid #1EE288"
+          }
+        }, "\uC26C\uC6B4 \uBB38\uC81C"), problem === 3 && React.createElement("span", {
+          style: {
+            border: "1px solid #FDDB64"
+          }
+        }, "\uD568\uC815 \uBB38\uC81C"), problem === 2 && React.createElement("span", {
+          style: {
+            border: "1px solid #F34B4B"
+          }
+        }, "\uBCC0\uBCC4\uB825 \uBB38\uC81C"), problem === 0 && React.createElement("span", {
+          style: {
+            border: "1px solid #DDDDDD"
+          }
+        }, "\uC77C\uBC18\uC801\uC778 \uBB38\uC81C"), problem === 4 && React.createElement("span", {
+          style: {
+            border: "1px solid #FF0000"
+          }
+        }, "\uC5B4\uB824\uC6B4 \uBB38\uC81C"));
+      }))));
+    });
+  };
+  var renderPrintTableBody = function renderPrintTableBody(effectSize) {
+    var chunkedEffectSizeQuestions = _.chunk(effectSize, 5);
+    return chunkedEffectSizeQuestions.map(function (i, index) {
+      return React.createElement("tbody", {
+        key: index,
+        className: PrintContentClassName
+      }, renderTableBody(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["compareGrass"]
+    className: styles$4["compareGrass"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
     className: styles$4["tableCompareGrass"]
   }, React.createElement("div", {
@@ -11208,7 +11455,8 @@ function CompareGrass(_ref) {
   }, React.createElement("thead", {
     style: {
       borderBottom: "1px solid #E4E7EC"
-    }
+    },
+    className: isPrint ? PrintHeaderClassName : ""
   }, React.createElement("tr", null, React.createElement("th", {
     className: styles$4["thcolumn1"]
   }, "\uBB38\uC81C \uBC88\uD638"), React.createElement("th", {
@@ -11227,58 +11475,8 @@ function CompareGrass(_ref) {
     style: {
       textAlign: "center"
     }
-  }, "\uBB38\uC81C \uBD84\uB958"))), React.createElement("tbody", null, effectSize.map(function (item, index) {
-    return React.createElement("tr", {
-      key: item.id,
-      style: index < effectSize.length - 1 ? {
-        borderBottom: "1px solid #e4e7ec"
-      } : {}
-    }, React.createElement("td", {
-      className: styles$4["tdcolumn1"]
-    }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
-      style: {
-        textAlign: "center",
-        color: "#202B37"
-      }
-    }, item.correctAnswers, "\uBC88"), React.createElement("td", {
-      className: styles$4["tdcolumn3"],
-      style: {
-        color: item.isCorrect ? "#1EE288" : "#F34B4B"
-      }
-    }, item.selectedAnswers ? item.selectedAnswers + "\uBC88" : ""), React.createElement("td", {
-      style: {
-        textAlign: "center",
-        color: "#414E62"
-      }
-    }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
-      className: styles$4["classification"]
-    }, item.problemCategories.map(function (problem, index) {
-      return React.createElement("div", {
-        key: index
-      }, problem === 1 && React.createElement("span", {
-        style: {
-          border: "1px solid #1EE288"
-        }
-      }, "\uC26C\uC6B4 \uBB38\uC81C"), problem === 3 && React.createElement("span", {
-        style: {
-          border: "1px solid #FDDB64"
-        }
-      }, "\uD568\uC815 \uBB38\uC81C"), problem === 2 && React.createElement("span", {
-        style: {
-          border: "1px solid #F34B4B"
-        }
-      }, "\uBCC0\uBCC4\uB825 \uBB38\uC81C"), problem === 0 && React.createElement("span", {
-        style: {
-          border: "1px solid #DDDDDD"
-        }
-      }, "\uC77C\uBC18\uC801\uC778 \uBB38\uC81C"), problem === 4 && React.createElement("span", {
-        style: {
-          border: "1px solid #FF0000"
-        }
-      }, "\uC5B4\uB824\uC6B4 \uBB38\uC81C"));
-    }))));
-  }))))));
-}
+  }, "\uBB38\uC81C \uBD84\uB958"))), isPrint ? renderPrintTableBody(effectSize) : React.createElement("tbody", null, renderTableBody(effectSize))))));
+};
 
 var iconUpArrow = function iconUpArrow(_ref) {
   var _ref$width = _ref.width,
@@ -11295,9 +11493,9 @@ var iconUpArrow = function iconUpArrow(_ref) {
   }, React.createElement("path", {
     d: "M5.25 15.375L12 8.625L18.75 15.375",
     stroke: "#CED2DA",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }));
 };
 
@@ -11316,9 +11514,9 @@ var iconDownArrow = function iconDownArrow(_ref) {
   }, React.createElement("path", {
     d: "M5.25 8.625L12 15.375L18.75 8.625",
     stroke: "#CED2DA",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }));
 };
 
@@ -11367,20 +11565,75 @@ var iconAssignedQuestions = function iconAssignedQuestions(_ref) {
   }));
 };
 
-function TrickyProblem(_ref) {
+var TrickyProblem = function TrickyProblem(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
   var inCorrectQuestions = data.questions.filter(function (i) {
     return i.isStar && !i.isCorrect;
   });
   var correctQuestions = data.questions.filter(function (i) {
     return i.isStar && i.isCorrect;
   });
+  var renderProblems = function renderProblems() {
+    return React.createElement(Fragment$1, null, React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["wrongQuestions"]
+    }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
+      return React.createElement("span", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["assignedQuestions"]
+    }, !!correctQuestions.length && correctQuestions.map(function (question) {
+      return React.createElement("div", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
+  };
+  var renderPrintProblems = function renderPrintProblems() {
+    return React.createElement(Fragment$1, null, React.createElement("div", {
+      className: PrintContentClassName
+    }, React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["wrongQuestions"]
+    }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
+      return React.createElement("span", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C"))), React.createElement("div", {
+      className: PrintContentClassName
+    }, React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["assignedQuestions"]
+    }, !!correctQuestions.length && correctQuestions.map(function (question) {
+      return React.createElement("div", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: !openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem1: !openProblem.problem1
@@ -11392,41 +11645,53 @@ function TrickyProblem(_ref) {
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), openProblem.problem1 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem1 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$4["titleTrickyProblem"]
-  }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$4["wrongQuestions"]
-  }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
-    return React.createElement("span", {
-      key: question.id,
-      className: styles$4["question"]
-    }, question.questionOrder + 1, "\uBC88");
-  }), !data.questions.length && React.createElement("div", {
-    className: styles$4["noData"]
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
-    className: styles$4["titleTrickyProblem"]
-  }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$4["assignedQuestions"]
-  }, !!correctQuestions.length && correctQuestions.map(function (question) {
-    return React.createElement("div", {
-      key: question.id,
-      className: styles$4["question"]
-    }, question.questionOrder + 1, "\uBC88");
-  }), !data.questions.length && React.createElement("div", {
-    className: styles$4["noData"]
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
-}
+  }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), openProblem.problem1 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem1 && React.createElement(Fragment$1, null, isPrint ? renderPrintProblems() : renderProblems()));
+};
 
-function ProtractedProblem(_ref) {
+var ProtractedProblem = function ProtractedProblem(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var renderQuestions = function renderQuestions(data) {
+    return data.map(function (item) {
+      return React.createElement("div", {
+        className: styles$4["content"],
+        key: item.id
+      }, React.createElement("div", {
+        className: styles$4["contentColumn1"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uBB38\uC81C"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
+        className: styles$4["contentColumn2"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uB098\uC758 \uC2DC\uAC04"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
+        className: styles$4["duration"]
+      }, formatTimeSecond(item.duration, t)), React.createElement("span", {
+        className: styles$4["topDuration"]
+      }, formatTimeSecond(item.topDuration, t)))));
+    });
+  };
+  var renderPrintQuestions = function renderPrintQuestions() {
+    var chunkedData = _.chunk(data, 5);
+    return chunkedData.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderQuestions(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: !openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem2: !openProblem.problem2
@@ -11440,45 +11705,58 @@ function ProtractedProblem(_ref) {
     }
   }, "\uC2DC\uAC04\uC774 \uC624\uB798 \uAC78\uB9B0 \uBB38\uC81C"), openProblem.problem2 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem2 && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
-  }, data.length ? data.map(function (item) {
-    return React.createElement("div", {
-      className: styles$4["content"],
-      key: item.id
-    }, React.createElement("div", {
-      className: styles$4["contentColumn1"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$4["contentColumn2"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uB098\uC758 \uC2DC\uAC04"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
-      className: styles$4["duration"]
-    }, formatTimeSecond(item.duration, t)), React.createElement("span", {
-      className: styles$4["topDuration"]
-    }, formatTimeSecond(item.topDuration, t)))));
-  }) : React.createElement("div", {
-    className: styles$4["noData"]
+  }, data.length ? isPrint ? renderPrintQuestions() : renderQuestions(data) : React.createElement("div", {
+    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
-}
+};
 
-function Vulnerable(_ref) {
+var Vulnerable = function Vulnerable(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
   var incorrectQuestions = data.questions.filter(function (i) {
     return i.selectedAnswers !== "" && i.isCorrect === false;
   }).sort(function (q1, q2) {
     return q2.overallCorrectRate === q1.overallCorrectRate ? q1.questionOrder - q2.questionOrder : q2.overallCorrectRate - q1.overallCorrectRate;
   });
+  var renderQuestions = function renderQuestions(questions) {
+    return questions.map(function (question) {
+      return React.createElement("div", {
+        className: styles$4["content"],
+        key: question.id
+      }, React.createElement("div", {
+        className: styles$4["contentColumn1"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uBB38\uC81C"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
+        className: styles$4["contentColumn2"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uC804\uCCB4 \uC815\uB2F5\uB960"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
+        className: styles$4["overallCorrectRate"]
+      }, question.overallCorrectRate.toFixed(2), "%"), React.createElement("span", {
+        className: styles$4["answer"]
+      }, question.selectedAnswers, "\uBC88 (\uC815\uB2F5", " ", question.correctAnswers, "\uBC88)"))));
+    });
+  };
+  var renderPrintQuestions = function renderPrintQuestions(questions) {
+    var chunkedQuestions = _.chunk(questions, 5);
+    return chunkedQuestions.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderQuestions(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + PrintContainerClassName
   }, React.createElement("div", {
-    className: !openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem3: !openProblem.problem3
@@ -11492,40 +11770,51 @@ function Vulnerable(_ref) {
     }
   }, "\uB0B4\uAC00 \uCDE8\uC57D\uD55C \uBB38\uC81C"), openProblem.problem3 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem3 && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
-  }, incorrectQuestions.length ? React.createElement(Fragment$1, null, incorrectQuestions.map(function (question) {
-    return React.createElement("div", {
-      className: styles$4["content"],
-      key: question.id
-    }, React.createElement("div", {
-      className: styles$4["contentColumn1"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$4["contentColumn2"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
-      className: styles$4["overallCorrectRate"]
-    }, question.overallCorrectRate.toFixed(2), "%"), React.createElement("span", {
-      className: styles$4["answer"]
-    }, question.selectedAnswers, "\uBC88 (\uC815\uB2F5", " ", question.correctAnswers, "\uBC88)"))));
-  })) : React.createElement("div", {
-    className: styles$4["noData"]
+  }, isPrint ? renderPrintQuestions(incorrectQuestions) : renderQuestions(incorrectQuestions), !incorrectQuestions.length && React.createElement("div", {
+    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
-}
+};
 
-function GradesByTerritory(_ref) {
+var GradesByTerritory = function GradesByTerritory(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
+  var renderCategories = function renderCategories(data) {
+    return data.map(function (item) {
+      var trackStyle = {
+        left: item.percentageAmongStudents + "%"
+      };
+      return React.createElement("div", {
+        className: styles$4["contentProblem"],
+        key: item.id
+      }, React.createElement("div", {
+        className: styles$4["labelProblem"]
+      }, React.createElement("span", {
+        className: styles$4["name"]
+      }, item.name), React.createElement("div", {
+        className: styles$4["percent"]
+      }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, "\uBB38\uC81C"))), React.createElement("div", {
+        className: styles$4["slider"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["track"],
+        style: trackStyle
+      }))));
+    });
+  };
+  var renderPrintCategories = function renderPrintCategories() {
+    var chunkedCategories = _.chunk(data, 5);
+    return chunkedCategories.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderCategories(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: !openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem4: !openProblem.problem4
@@ -11539,28 +11828,10 @@ function GradesByTerritory(_ref) {
     }
   }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), openProblem.problem4 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem4 && React.createElement("div", {
     className: styles$4["wrappContentProblem"]
-  }, data.length && data.map(function (item) {
-    return React.createElement("div", {
-      className: styles$4["contentProblem"],
-      key: item.id
-    }, React.createElement("div", {
-      className: styles$4["labelProblem"]
-    }, React.createElement("span", {
-      className: styles$4["name"]
-    }, item.name), React.createElement("div", {
-      className: styles$4["percent"]
-    }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, "\uBB38\uC81C"))), React.createElement("div", {
-      className: styles$4["slider"]
-    }, React.createElement("span", {
-      className: styles$4["track"],
-      style: {
-        left: item.percentageAmongStudents + "%"
-      }
-    })));
-  }), openProblem.problem4 && !data.length && React.createElement("div", {
-    className: styles$4["noData"]
+  }, isPrint ? renderPrintCategories() : renderCategories(data), openProblem.problem4 && !data.length && React.createElement("div", {
+    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
-}
+};
 
 var useCreateQuestionDialog$1 = function useCreateQuestionDialog() {
   var _useState = useState(false),
@@ -11758,11 +12029,17 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     examSessionId = _ref.examSessionId,
     studentId = _ref.studentId,
     code = _ref.code;
-  var _useExamResult = useExamResult(searchParams, onNavigate, examSessionId, studentId, code),
+  var _useTab = useTab(),
+    selected = _useTab.selected,
+    handleChangeTab = _useTab.handleChangeTab;
+  var _useExamResult = useExamResult(searchParams, onNavigate, examSessionId, studentId, code, handleChangeTab),
+    examTime = _useExamResult.examTime,
     series = _useExamResult.series,
+    allSeries = _useExamResult.allSeries,
     chartOptions = _useExamResult.chartOptions,
+    allChartOptions = _useExamResult.allChartOptions,
     dataChartIndex = _useExamResult.dataChartIndex,
-    timelyOrderQuestion = _useExamResult.timelyOrderQuestion,
+    timelyOrderQuestions = _useExamResult.timelyOrderQuestions,
     isStudent = _useExamResult.isStudent,
     openProblem = _useExamResult.openProblem,
     resultDatas = _useExamResult.resultDatas,
@@ -11779,18 +12056,14 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     handleCreateQuestion = _useCreateQuestionDia.handleCreateQuestion,
     openCreateQuestionDialog = _useCreateQuestionDia.openCreateQuestionDialog,
     toggleCreateQuestion = _useCreateQuestionDia.toggleCreateQuestion;
-  var _useTab = useTab(),
-    selected = _useTab.selected,
-    handleChangeTab = _useTab.handleChangeTab;
   var isTabletUp = useMediaQuery('(min-width:900px)');
-  return React.createElement(Fragment$1, null, timelyOrderQuestion[dataChartIndex] && longTimeSpend && resultDatas && effectSize ? React.createElement("div", {
+  return React.createElement(Fragment$1, null, timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultDatas && effectSize ? React.createElement("div", {
     style: {
       width: "100%"
     }
   }, React.createElement(Grid, {
     container: true,
-    padding: "24px",
-    id: "header-canvas"
+    padding: "24px"
   }, React.createElement(Grid, {
     item: true
   }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
@@ -11850,7 +12123,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
       fontWeight: 600,
       color: "#414E62"
     }
-  }, moment(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, "HH:mm").format("hh:mm") + " ~ " + moment(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.finishTime, "HH:mm").format("hh:mm"))), React.createElement(Stack, null, React.createElement(Typography, {
+  }, examTime)), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
@@ -11921,6 +12194,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     var label = _ref2.label,
       value = _ref2.value;
     return React.createElement(Button, {
+      key: label,
       className: styles["truncate"],
       disableTouchRipple: true,
       sx: {
@@ -11968,7 +12242,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     options: chartOptions,
     series: series
   }))), React.createElement("div", {
-    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
+    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestions.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React.createElement(iconBtnNextChart, null)))), React.createElement(CustomTabPanel, {
     value: selected,
@@ -12000,69 +12274,170 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     className: "position-absolute",
     sx: {
       zIndex: -1,
-      width: "100%"
+      width: "1024px"
     },
     id: "canvas"
-  }, React.createElement(Stack, {
+  }, React.createElement(Grid, {
+    container: true,
+    padding: "24px",
+    id: "header-canvas"
+  }, React.createElement(Grid, {
+    item: true
+  }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#C3C5FE"
+    }
+  }, resultDatas.courseName)), React.createElement(Box, {
+    display: "flex",
+    gap: "16px",
+    flexDirection: "column"
+  }, React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "20px",
+      fontWeight: 600,
+      color: "#5458D5"
+    }
+  }, resultDatas.title)), React.createElement(Stack, {
+    flexDirection: "row",
+    gap: "16px"
+  }, React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("my_score")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#5458D5"
+    }
+  }, t("score_format", {
+    score: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.score
+  }))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("exam_date")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("exam_time")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, examTime)), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("total_students")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, t("number_people", {
+    number: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.totalStudent
+  }))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("teacher_in_charge")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.teacherName)))))), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
-      fontSize: "16px",
+      fontSize: "18px",
       fontWeight: 700,
       color: "#414E62"
     }
   }, t(TabList[0].label)), React.createElement(MyAnswer, {
     data: resultDatas,
     categories: categoryResponses,
-    isStudent: isStudent
+    isStudent: isStudent,
+    isPrint: true
   })), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
-      fontSize: "16px",
+      fontSize: "18px",
       fontWeight: 700,
       color: "#414E62"
     }
-  }, t(TabList[1].label)), React.createElement("div", {
-    className: styles$4["compareChart"]
-  }, React.createElement("div", {
-    className: styles$4["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
-    onClick: handlePrevChart
-  }, React.createElement(iconBtnPrevChart, null)), React.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
-  }, React.createElement("div", null, React.createElement(ReactApexChart, {
-    height: 389,
-    options: chartOptions,
-    series: series
-  }))), React.createElement("div", {
-    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
-    onClick: handleNextChart
-  }, React.createElement(iconBtnNextChart, null)))), React.createElement(Stack, {
+  }, t(TabList[1].label)), timelyOrderQuestions.map(function (timelyOrderQuestion, index) {
+    return React.createElement("div", {
+      key: index,
+      className: PrintContainerClassName
+    }, React.createElement(Typography, {
+      className: "pb-2 " + PrintHeaderClassName,
+      sx: {
+        fontSize: "14px",
+        fontWeight: 700,
+        color: "#414E62"
+      }
+    }, t("article_number"), " ", timelyOrderQuestion.article), React.createElement("div", {
+      className: styles$4["compareChart"] + " " + PrintContentClassName
+    }, React.createElement("div", {
+      className: styles$4["chart"] + " sr-line-chart"
+    }, React.createElement("div", null, React.createElement(ReactApexChart, {
+      height: 389,
+      options: allChartOptions[index],
+      series: allSeries[index]
+    })))));
+  })), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
-      fontSize: "16px",
+      fontSize: "18px",
       fontWeight: 700,
       color: "#414E62"
     }
   }, t(TabList[2].label)), React.createElement(CompareGrass, {
-    effectSize: effectSize
+    effectSize: effectSize,
+    isPrint: true
   })), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
-      fontSize: "16px",
+      fontSize: "18px",
       fontWeight: 700,
       color: "#414E62"
     }
@@ -12071,25 +12446,29 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     openProblem: _extends({}, openProblem, {
       problem1: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   }), React.createElement(Vulnerable, {
     data: resultDatas,
     openProblem: _extends({}, openProblem, {
       problem3: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   }), React.createElement(ProtractedProblem, {
     data: longTimeSpend,
     openProblem: _extends({}, openProblem, {
       problem2: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   }), React.createElement(GradesByTerritory, {
     data: categoryResponses,
     openProblem: _extends({}, openProblem, {
       problem4: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   })))), React.createElement(CreateNewQuestionDialog$1, {
     examSessionId: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.examSessionId,
     handleCreateQuestion: handleCreateQuestion,