touchstudy-core 0.1.42 → 0.1.44

package/dist/index.modern.js

@@ -141,7 +141,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-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 styles = {"lighter":"#F0FFF6","light":"#C8F8DB","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_100":"#F9FAFB","gray_300":"#DFE3E8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","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"};
 
 // A type of promise-like that resolves synchronously and supports only one observer
 const _Pact = /*#__PURE__*/(function() {
@@ -1175,9 +1175,7 @@ var LayoutContext = function LayoutContext(_ref) {
       }
     }
     if (!pusherRegisterUrls.includes(pathname.toLocaleLowerCase()) && !!currentPusher) {
-      if (currentPusher) {
-        currentPusher.disconnect();
-      }
+      currentPusher.disconnect();
       dispatch(setConcurrentConnectionPusher({
         pusher: null,
         academyDomain: ""
@@ -1471,7 +1469,7 @@ var ExamEvent;
   ExamEvent["TeacherKickOutStudent"] = "teacher-kick-out-student";
 })(ExamEvent || (ExamEvent = {}));
 
-var problem_solving = "전체 공지";
+var problem_solving = "수업 관리";
 var my_story = "내 스토리";
 var search_find = "검색하여 찾기";
 var test_code = "시험코드 입력";
@@ -1481,7 +1479,7 @@ var description_success = "스터디 터치는 엄태욱 선생님의 수업에
 var logout = "로그 아웃";
 var overall_status = "전체 현황";
 var exam_status = "시험별 현";
-var student_status = "학생 신분";
+var student_status = "학생별 현황";
 var user_manager = "사용자 목록";
 var recent_exam_results = "최근 시험 결과";
 var instructor_name = "강사이름";
@@ -1518,6 +1516,7 @@ var confirmation = "확인";
 var student_name = "학생이름";
 var full_pool_time = "전체풀이시간";
 var number_question = "{{number}}번";
+var number_answer = "{{number}}번";
 var answer_rate = "정답률";
 var seconds = "초";
 var search_placeholder = "시험 이름으로 검색하기";
@@ -1532,6 +1531,7 @@ var information_by_question = "문항별 정보";
 var no_data = "데이터 없음";
 var internet_connection_was_lost = "인터넷 연결이 끊어졌습니다";
 var problem = "문제";
+var problems = "문제";
 var problem_solving_time = "문제풀이 시간";
 var minutes = "분";
 var correct_rate = "정확한 비율";
@@ -1788,8 +1788,40 @@ var problem_analysis = "문제 분석";
 var class_information = "수업정보";
 var teachers = "교사";
 var lessons = "수업";
+var new_test = "새로운 시험";
+var manage_saved_tests = "저장된 시험 관리";
+var textbook_management = "교과서 관리";
+var my_question = "내 질문";
 var update_class = "수업 업데이트";
 var create_class = "수업 만들기";
+var problem_number = "문제 번호";
+var answer = "정답";
+var correct = "정답";
+var solve_time = "풀이 시간";
+var comparison_of_top_rankings = "상위권 비교";
+var total_correct_rate = "전체 정답률";
+var incorrect = "오답";
+var no_solution = "풀이 없음";
+var no_time = "시간 없음";
+var my_solving_time = "나의 풀이 시간";
+var top_solution_time = "최상위권 풀이시간";
+var average_solve_time = "평균 풀이 시간";
+var my_solution = "내 풀이";
+var most_solutions = "가장 많은 풀이";
+var problem_classification = "문제 분류";
+var my_wrong_answer = "나의 오답";
+var incorrect_problem_among_the_starred_problems = "별표 친 문제 중 틀린 문제";
+var correct_problem_among_the_starred_problems = "별표 친 문제 중 맞춘 문제";
+var tricky_problems = "까다로웠던 문제";
+var issues_vulnerable = "내가 취약한 문제";
+var grades_by_area = "영역별 성적";
+var problems_that_took_a_long_time = "시간이 오래 걸린 문제";
+var my_time = "나의 시간";
+var top_time = "상위권 시간";
+var fingerprint = "지문";
+var end = "종료";
+var ask_for_feedback = "피드백 요청하기";
+var quit = "종료하기";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1840,6 +1872,7 @@ var lang_ko = {
 	student_name: student_name,
 	full_pool_time: full_pool_time,
 	number_question: number_question,
+	number_answer: number_answer,
 	answer_rate: answer_rate,
 	seconds: seconds,
 	search_placeholder: search_placeholder,
@@ -1854,6 +1887,7 @@ var lang_ko = {
 	no_data: no_data,
 	internet_connection_was_lost: internet_connection_was_lost,
 	problem: problem,
+	problems: problems,
 	problem_solving_time: problem_solving_time,
 	minutes: minutes,
 	correct_rate: correct_rate,
@@ -1962,7 +1996,7 @@ var lang_ko = {
 	credentials_invalid: credentials_invalid,
 	role_is_invalid: role_is_invalid,
 	today: today,
-	"q&a": "질의응답",
+	"q&a": "질문 및 답변",
 	user_is_disabled: user_is_disabled,
 	cover_image: cover_image,
 	notification: notification,
@@ -2097,8 +2131,40 @@ var lang_ko = {
 	class_information: class_information,
 	teachers: teachers,
 	lessons: lessons,
+	new_test: new_test,
+	manage_saved_tests: manage_saved_tests,
+	textbook_management: textbook_management,
+	my_question: my_question,
 	update_class: update_class,
-	create_class: create_class
+	create_class: create_class,
+	problem_number: problem_number,
+	answer: answer,
+	correct: correct,
+	solve_time: solve_time,
+	comparison_of_top_rankings: comparison_of_top_rankings,
+	total_correct_rate: total_correct_rate,
+	incorrect: incorrect,
+	no_solution: no_solution,
+	no_time: no_time,
+	my_solving_time: my_solving_time,
+	top_solution_time: top_solution_time,
+	average_solve_time: average_solve_time,
+	my_solution: my_solution,
+	most_solutions: most_solutions,
+	problem_classification: problem_classification,
+	my_wrong_answer: my_wrong_answer,
+	incorrect_problem_among_the_starred_problems: incorrect_problem_among_the_starred_problems,
+	correct_problem_among_the_starred_problems: correct_problem_among_the_starred_problems,
+	tricky_problems: tricky_problems,
+	issues_vulnerable: issues_vulnerable,
+	grades_by_area: grades_by_area,
+	problems_that_took_a_long_time: problems_that_took_a_long_time,
+	my_time: my_time,
+	top_time: top_time,
+	fingerprint: fingerprint,
+	end: end,
+	ask_for_feedback: ask_for_feedback,
+	quit: quit
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -2149,6 +2215,7 @@ var confirmation$1 = "Confirmation";
 var student_name$1 = "Student name";
 var full_pool_time$1 = "Full pool time";
 var number_question$1 = "No.{{number}}";
+var number_answer$1 = "No.{{number}}";
 var answer_rate$1 = "Answer rate";
 var seconds$1 = "s";
 var search_placeholder$1 = "Search by exam name";
@@ -2162,7 +2229,8 @@ var correct_answer_for_each_student$1 = "Correct answer for each student";
 var information_by_question$1 = "Information by question";
 var no_data$1 = "No data";
 var internet_connection_was_lost$1 = "Internet connection was lost";
-var problem$1 = "Problem ";
+var problem$1 = "Problem";
+var problems$1 = "Problems";
 var problem_solving_time$1 = "Problem solving time";
 var minutes$1 = "m";
 var correct_rate$1 = "Correct rate";
@@ -2184,7 +2252,7 @@ var difficult = "Difficult";
 var article = "Article";
 var correct_answer = "Correct answer";
 var mark = "Mark";
-var answer = "Answer";
+var answer$1 = "Answer";
 var add_new_row = "Add new row";
 var question_text_required = "Question text is required";
 var create_question_success = "Question is created successfully";
@@ -2455,6 +2523,42 @@ var teachers$1 = "Teachers";
 var lessons$1 = "Lessons";
 var update_class$1 = "Update class";
 var create_class$1 = "Create class";
+var new_test$1 = "New Test";
+var manage_saved_tests$1 = "Manage saved tests";
+var textbook_management$1 = "Textbook Management";
+var my_question$1 = "My Question";
+var problem_number$1 = "Problem number";
+var solve_time$1 = "Solve time";
+var comparison_of_top_rankings$1 = "Comparison of top rankings";
+var total_correct_rate$1 = "Total correct rate";
+var incorrect$1 = "Incorrect";
+var correct$1 = "Correct";
+var no_solution$1 = "No solution";
+var no_time$1 = "No time";
+var my_solving_time$1 = "My solving time";
+var top_solution_time$1 = "Top solving time";
+var average_solve_time$1 = "Average solve time";
+var my_solution$1 = "My solution";
+var most_solutions$1 = "Most solutions";
+var problem_classification$1 = "Problem classification";
+var my_wrong_answer$1 = "My wrong answer";
+var incorrect_problem_among_the_starred_problems$1 = "Incorrect problem among the starred problems";
+var correct_problem_among_the_starred_problems$1 = "Correct problem among the starred problems";
+var tricky_problems$1 = "Tricky problems";
+var issues_vulnerable$1 = "Issues I'm Vulnerable to";
+var grades_by_area$1 = "Grades by area";
+var problems_that_took_a_long_time$1 = "Problems that took a long time";
+var my_time$1 = "My time";
+var top_time$1 = "Top time";
+var easy_problem = "Easy problem";
+var trick_problem = "Trick problem";
+var differential_problem = "Differential problem";
+var difficult_problem = "Difficult problem";
+var general_problem = "General problem";
+var fingerprint$1 = "Fingerprint";
+var end$1 = "end";
+var ask_for_feedback$1 = "Ask for feedback";
+var quit$1 = "Quit";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -2506,6 +2610,7 @@ var lang_en = {
 	student_name: student_name$1,
 	full_pool_time: full_pool_time$1,
 	number_question: number_question$1,
+	number_answer: number_answer$1,
 	answer_rate: answer_rate$1,
 	seconds: seconds$1,
 	search_placeholder: search_placeholder$1,
@@ -2520,6 +2625,7 @@ var lang_en = {
 	no_data: no_data$1,
 	internet_connection_was_lost: internet_connection_was_lost$1,
 	problem: problem$1,
+	problems: problems$1,
 	problem_solving_time: problem_solving_time$1,
 	minutes: minutes$1,
 	correct_rate: correct_rate$1,
@@ -2542,7 +2648,7 @@ var lang_en = {
 	article: article,
 	correct_answer: correct_answer,
 	mark: mark,
-	answer: answer,
+	answer: answer$1,
 	add_new_row: add_new_row,
 	question_text_required: question_text_required,
 	create_question_success: create_question_success,
@@ -2798,7 +2904,43 @@ var lang_en = {
 	teachers: teachers$1,
 	lessons: lessons$1,
 	update_class: update_class$1,
-	create_class: create_class$1
+	create_class: create_class$1,
+	new_test: new_test$1,
+	manage_saved_tests: manage_saved_tests$1,
+	textbook_management: textbook_management$1,
+	my_question: my_question$1,
+	problem_number: problem_number$1,
+	solve_time: solve_time$1,
+	comparison_of_top_rankings: comparison_of_top_rankings$1,
+	total_correct_rate: total_correct_rate$1,
+	incorrect: incorrect$1,
+	correct: correct$1,
+	no_solution: no_solution$1,
+	no_time: no_time$1,
+	my_solving_time: my_solving_time$1,
+	top_solution_time: top_solution_time$1,
+	average_solve_time: average_solve_time$1,
+	my_solution: my_solution$1,
+	most_solutions: most_solutions$1,
+	problem_classification: problem_classification$1,
+	my_wrong_answer: my_wrong_answer$1,
+	incorrect_problem_among_the_starred_problems: incorrect_problem_among_the_starred_problems$1,
+	correct_problem_among_the_starred_problems: correct_problem_among_the_starred_problems$1,
+	tricky_problems: tricky_problems$1,
+	issues_vulnerable: issues_vulnerable$1,
+	grades_by_area: grades_by_area$1,
+	problems_that_took_a_long_time: problems_that_took_a_long_time$1,
+	my_time: my_time$1,
+	top_time: top_time$1,
+	easy_problem: easy_problem,
+	trick_problem: trick_problem,
+	differential_problem: differential_problem,
+	difficult_problem: difficult_problem,
+	general_problem: general_problem,
+	fingerprint: fingerprint$1,
+	end: end$1,
+	ask_for_feedback: ask_for_feedback$1,
+	quit: quit$1
 };
 
 i18n.use(initReactI18next).init({
@@ -3126,7 +3268,7 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
     sx: {
       fontSize: 14,
       fontWeight: 600,
-      color: "#5458D5",
+      color: styles.dark,
       minWidth: 150
     }
   }, (selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name) || t(role === Role.Admin ? "switch_academy_admin" : "switch_academy")), React.createElement("div", {
@@ -3214,7 +3356,7 @@ var canAccess = function canAccess(userRoles, componentRoles) {
 var _excluded$1 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return React.createElement(components.DropdownIndicator, Object.assign({}, props), React.createElement(FaCaretDown, {
-    color: "#5458D5"
+    color: styles.darker
   }));
 };
 var CustomOption = function CustomOption(props) {
@@ -3226,26 +3368,26 @@ var CustomOption = function CustomOption(props) {
   }, props.data.label));
 };
 var customStyles = {
-  control: function control(baseStyles, state) {
+  control: function control(baseStyles) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5",
-      borderColor: state.isFocused ? '#5458D5' : '#C3C5FE'
+      color: styles.darker,
+      borderColor: styles.less_dark
     });
   },
   input: function input(baseStyles, _) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   },
   singleValue: function singleValue(baseStyles) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   }
 };
@@ -3301,10 +3443,10 @@ var iconPersonNoActive = function iconPersonNoActive(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, React.createElement("path", {
     d: "M10.395 2.01813C9.78691 1.36156 8.93753 1 8.00003 1C7.05753 1 6.20534 1.35937 5.60003 2.01187C4.98815 2.67156 4.69003 3.56813 4.76003 4.53625C4.89878 6.44625 6.35222 8 8.00003 8C9.64784 8 11.0988 6.44656 11.2397 4.53687C11.3107 3.5775 11.0107 2.68281 10.395 2.01813Z",
-    fill: "#5458D5"
+    fill: color
   }), React.createElement("path", {
     d: "M13.5001 15H2.50006C2.35608 15.0019 2.21349 14.9716 2.08267 14.9115C1.95185 14.8513 1.83609 14.7627 1.74381 14.6522C1.54068 14.4094 1.45881 14.0778 1.51943 13.7425C1.78318 12.2794 2.60631 11.0503 3.90006 10.1875C5.04943 9.42156 6.50537 9 8.00006 9C9.49474 9 10.9507 9.42188 12.1001 10.1875C13.3938 11.05 14.2169 12.2791 14.4807 13.7422C14.5413 14.0775 14.4594 14.4091 14.2563 14.6519C14.1641 14.7625 14.0483 14.8511 13.9175 14.9113C13.7867 14.9715 13.6441 15.0018 13.5001 15Z",
-    fill: "#5458D5"
+    fill: color
   }));
 };
 
@@ -3369,6 +3511,8 @@ var useTooltip = function useTooltip() {
 var ContentTooltip = function ContentTooltip(_ref) {
   var toggleConfirmDialog = _ref.toggleConfirmDialog,
     toggleUpdateDialog = _ref.toggleUpdateDialog;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return React.createElement(Stack, null, React.createElement(Stack, {
     display: "flex",
     gap: "4px",
@@ -3382,9 +3526,9 @@ var ContentTooltip = function ContentTooltip(_ref) {
     sx: {
       fontWeight: 700,
       fontSize: "14px",
-      color: "#5458D5"
+      color: styles.dark
     }
-  }, "\uD3B8\uC9D1\uD558\uAE30")), React.createElement(Stack, {
+  }, t("edit"))), React.createElement(Stack, {
     border: "1px solid #E4E7EC"
   }), React.createElement("div", {
     style: {
@@ -3395,9 +3539,9 @@ var ContentTooltip = function ContentTooltip(_ref) {
     sx: {
       fontWeight: 700,
       fontSize: "14px",
-      color: "#5458D5"
+      color: styles.dark
     }
-  }, "\uD3B8\uC9D1\uD558\uAE30"))));
+  }, t("delete")))));
 };
 
 var ChatRightItem = function ChatRightItem(_ref) {
@@ -3440,7 +3584,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     fontSize: 14,
     padding: "4px",
     lineHeight: "16.71px",
-    color: "#5458D5"
+    color: styles.darker
   }, sender === null || sender === void 0 ? void 0 : sender.fullName)), React.createElement(Stack, {
     display: "flex",
     flexDirection: "row",
@@ -3476,7 +3620,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
   }, React.createElement(iconMore, null))))), contentType ? React.createElement(Stack, {
     borderRadius: "6px",
     padding: "12px",
-    bgcolor: "#5458D5"
+    bgcolor: styles.darker
   }, React.createElement("img", {
     onClick: toggleImageDialog,
     src: content,
@@ -3485,11 +3629,12 @@ var ChatRightItem = function ChatRightItem(_ref) {
       position: "relative",
       objectFit: "contain"
     }
-  })) : React.createElement("div", {
+  })) : React.createElement(Stack, {
     className: styles$1["wrap-content"] + " " + styles$1["content-chat-receiver"],
-    style: {
+    sx: {
       "float": "inline-end"
-    }
+    },
+    bgcolor: styles.darker
   }, React.createElement(Typography, {
     fontWeight: 500,
     fontSize: "14px",
@@ -3529,22 +3674,22 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     fontWeight: 500,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#97A1AF"
+    color: styles.darker
   }, t("counselor")), React.createElement(Typography, {
     fontWeight: 700,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#97A1AF"
+    color: styles.darker
   }, sender === null || sender === void 0 ? void 0 : sender.fullName)) : React.createElement(Fragment$1, null, React.createElement(Typography, {
     fontWeight: 700,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#5458D5"
+    color: styles.darker
   }, sender === null || sender === void 0 ? void 0 : sender.fullName), React.createElement(Typography, {
     fontWeight: 500,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#5458D5"
+    color: styles.darker
   }, t("student")))), React.createElement(Box, {
     padding: "4px 0px"
   }), React.createElement(Stack, {
@@ -3554,7 +3699,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   }, contentType ? React.createElement(Stack, {
     borderRadius: "6px",
     padding: "12px",
-    bgcolor: "#5458D5"
+    bgcolor: styles.darker
   }, React.createElement("img", {
     onClick: toggleImageDialog,
     src: content,
@@ -3566,10 +3711,10 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   })) : React.createElement("div", {
     className: styles$1["wrap-content"] + " " + styles$1["content-chat-sender"]
   }, React.createElement(Typography, {
-    fontWeight: 500,
+    fontWeight: 400,
     fontSize: "14px",
     lineHeight: "16.71px",
-    color: "#414E62"
+    color: "#5D5D5B"
   }, content)))));
 };
 
@@ -3795,6 +3940,9 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
         padding: '12px'
       }
     }, React.createElement(Button, {
+      sx: {
+        color: styles.dark
+      },
       className: styles$1['btn-cancel'],
       onClick: onClose
     }, React.createElement(Typography, {
@@ -3802,6 +3950,10 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button, {
+      variant: 'contained',
+      sx: {
+        bgcolor: styles.dark
+      },
       className: styles$1['btn-register'],
       type: "submit"
     }, React.createElement(Typography, {
@@ -3828,16 +3980,14 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     sx: {
       display: "flex",
       gap: "8px",
-      padding: "12px !important",
-      borderColor: "#5458D5"
+      padding: "12px !important"
     }
-  }, React.createElement(iconPlusCircle, null), React.createElement(Typography, {
+  }, React.createElement(iconPlusCircle, {
+    color: styles.dark
+  }), React.createElement(Typography, {
     fontWeight: 700,
     fontSize: "13px",
-    lineHeight: "15.51px",
-    sx: {
-      color: "#5458D5"
-    }
+    lineHeight: "15.51px"
   }, t("attachment")), React.createElement("input", {
     type: "file",
     hidden: true,
@@ -3854,13 +4004,17 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     className: styles$1['btn-cancel'],
     onClick: onClose
   }, React.createElement(Typography, {
+    sx: {
+      color: styles.dark
+    },
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '16.71px'
   }, "\uCDE8\uC18C")), React.createElement(Button, {
+    variant: "contained",
     className: styles$1['btn-register'],
     sx: {
-      bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? "#EBEBFF !important" : "#5458D5 !important"
+      bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? styles.light + " !important" : styles.dark
     },
     disabled: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content),
     onClick: function onClick() {
@@ -4094,10 +4248,11 @@ var InputChat = function InputChat(_ref) {
     gap: "16px"
   }, React.createElement(Button, {
     variant: "contained",
+    fullWidth: true,
+    className: styles$1["btn-send"],
     sx: {
-      bgcolor: isCompleted ? "#EBEBFF !important" : "#5458D5 !important"
+      bgcolor: isCompleted ? styles.light + " !important" : styles.dark
     },
-    className: styles$1["btn-send"],
     disabled: isCompleted,
     onClick: handleSubmit
   }, React.createElement(iconSendMessage, null), React.createElement(Typography, {
@@ -4113,15 +4268,17 @@ var InputChat = function InputChat(_ref) {
       display: "flex",
       gap: "8px",
       padding: "12px !important",
-      borderColor: isCompleted ? "transparent" : "#5458D5",
+      borderColor: isCompleted ? "transparent" : styles.less_dark,
       borderWidth: "1px"
     }
-  }, React.createElement(iconPlusCircle, null), React.createElement(Typography, {
+  }, React.createElement(iconPlusCircle, {
+    color: styles.dark
+  }), React.createElement(Typography, {
     fontWeight: 700,
     fontSize: "13px",
     lineHeight: "15.51px",
     sx: {
-      color: "#5458D5"
+      color: styles.dark
     }
   }, t("attachment")), React.createElement("input", {
     type: "file",
@@ -4147,7 +4304,7 @@ var iconChecked = function iconChecked(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, React.createElement("path", {
     d: "M8 1.5C4.41594 1.5 1.5 4.41594 1.5 8C1.5 11.5841 4.41594 14.5 8 14.5C11.5841 14.5 14.5 11.5841 14.5 8C14.5 4.41594 11.5841 1.5 8 1.5ZM11.3828 5.82156L7.18281 10.8216C7.13674 10.8764 7.07941 10.9208 7.01471 10.9516C6.95001 10.9823 6.87945 10.9989 6.80781 11H6.79938C6.72929 11 6.66 10.9852 6.59599 10.9567C6.53198 10.9282 6.47468 10.8865 6.42781 10.8344L4.62781 8.83438C4.5821 8.78589 4.54654 8.72876 4.52322 8.66633C4.4999 8.60391 4.4893 8.53745 4.49203 8.47087C4.49477 8.40429 4.51078 8.33892 4.53914 8.27862C4.56749 8.21831 4.60761 8.16429 4.65715 8.11971C4.70668 8.07514 4.76463 8.04091 4.82757 8.01905C4.89052 7.99719 4.95721 7.98813 5.02371 7.9924C5.09021 7.99668 5.15518 8.01421 5.21481 8.04396C5.27444 8.0737 5.32752 8.11507 5.37094 8.16562L6.78625 9.73812L10.6172 5.17844C10.7031 5.07909 10.8247 5.01754 10.9556 5.00711C11.0866 4.99668 11.2164 5.03819 11.317 5.12268C11.4175 5.20717 11.4808 5.32784 11.4931 5.45862C11.5055 5.5894 11.4658 5.71977 11.3828 5.82156Z",
-    fill: "#5458D5"
+    fill: color
   }));
 };
 
@@ -4232,20 +4389,22 @@ var ChatHeader = function ChatHeader(_ref) {
       alignItems: "center",
       flexDirection: "row",
       gap: "8px"
-    }, React.createElement(iconPersonNoActive, null), isTabletUp && React.createElement(Typography, {
+    }, React.createElement(iconPersonNoActive, {
+      color: styles.darker
+    }), isTabletUp && React.createElement(Typography, {
       fontWeight: 500,
       fontSize: "14px",
       lineHeight: "16.71px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("counselor"))), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "16.71px",
-      color: "#5458D5"
+      color: styles.darker
     }, ellipsisText(teacherName || "", 15))), !!examTitle && React.createElement(Box, {
       display: "flex",
       alignItems: "start",
-      color: "#5458D5",
+      color: styles.darker,
       gap: "6px",
       flexDirection: "column"
     }, React.createElement(Typography, {
@@ -4276,7 +4435,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 700,
       fontSize: "12px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, questionOrder != undefined ? t("problem_number_question", {
       number: questionOrder + 1
     }) : courseId ? t("class_inquiry") : t("exam_inquiry")) : React.createElement(Stack, {
@@ -4287,7 +4446,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 700,
       fontSize: "12px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("points", {
       number: score
     })), React.createElement(Typography, {
@@ -4311,12 +4470,12 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "11px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("consultation_category")), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("" + category))))) : React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -4331,16 +4490,19 @@ var ChatHeader = function ChatHeader(_ref) {
       display: "flex",
       alignItems: "center",
       gap: "24px",
-      color: "#5458D5"
+      color: styles.darker
     }, isTabletUp && React.createElement(Box, {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       gap: "8px"
-    }, React.createElement(iconPersonNoActive, null), React.createElement(Typography, {
+    }, React.createElement(iconPersonNoActive, {
+      color: styles.darker
+    }), React.createElement(Typography, {
       fontWeight: 500,
       fontSize: "14px",
-      lineHeight: "16.71px"
+      lineHeight: "16.71px",
+      color: styles.darker
     }, t("student"))), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
@@ -4349,7 +4511,7 @@ var ChatHeader = function ChatHeader(_ref) {
       display: "flex",
       alignItems: "center",
       gap: "24px",
-      color: "#5458D5"
+      color: styles.darker
     }, examTitle ? React.createElement(Typography, {
       fontWeight: 600,
       fontSize: "12px",
@@ -4363,12 +4525,12 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "11px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("consultation_category")), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("" + category))), questionOrder != undefined && React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
@@ -4382,13 +4544,16 @@ var ChatHeader = function ChatHeader(_ref) {
       display: "flex",
       alignItems: "center",
       gap: "8px",
-      border: "1px solid #5458D5",
+      border: "1px solid",
+      borderColor: styles.less_dark,
       borderRadius: "6px"
-    }, React.createElement(iconChecked, null), React.createElement(Typography, {
+    }, React.createElement(iconChecked, {
+      color: styles.darker
+    }), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "13px",
       lineHeight: "15.51px",
-      color: "#5458D5"
+      color: styles.dark
     }, "\uC644\uB8CC \uCC98\uB9AC"))) : React.createElement("div", null));
   };
   return React.createElement(Grid, {
@@ -4403,7 +4568,7 @@ var ChatHeader = function ChatHeader(_ref) {
   }, React.createElement(Typography, {
     fontWeight: 800,
     fontSize: "20px",
-    color: "#5458D5",
+    color: styles.darker,
     lineHeight: "23.87px"
   }, t("question_and_answer"))), renderHeader(), React.createElement(ConfirmDialog, {
     open: openDialog,
@@ -5073,7 +5238,7 @@ var InputText = function InputText(props) {
   }, props));
 };
 
-var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
 
 var SCORE_OPTIONS = Array.from({
   length: 10
@@ -5118,13 +5283,49 @@ var ScoreSelector = function ScoreSelector(_ref) {
   });
 };
 
-var QuestionView = function QuestionView(_ref) {
-  var index = _ref.index,
-    question = _ref.question,
-    answerCount = _ref.answerCount,
-    isDisabled = _ref.isDisabled,
-    onChangeCorrectAnswers = _ref.onChangeCorrectAnswers,
-    onChangeScoreAnswer = _ref.onChangeScoreAnswer;
+var BpIcon = styled('span')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    boxShadow: theme.palette.mode === 'dark' ? '0 0 0 1px rgb(16 22 26 / 40%)' : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+    backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa',
+    backgroundImage: theme.palette.mode === 'dark' ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+    '.Mui-focusVisible &': {
+      outline: '2px auto rgba(19,124,189,.6)',
+      outlineOffset: 2
+    },
+    'input:hover ~ &': {
+      backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5'
+    },
+    'input:disabled ~ &': {
+      boxShadow: 'none',
+      background: theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)'
+    }
+  };
+});
+var BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: styles.darker,
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&::before': {
+    display: 'block',
+    width: 16,
+    height: 16,
+    backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
+    content: '""'
+  },
+  'input:hover ~ &': {
+    backgroundColor: styles.dark
+  }
+});
+var QuestionView = function QuestionView(_ref2) {
+  var index = _ref2.index,
+    question = _ref2.question,
+    answerCount = _ref2.answerCount,
+    isDisabled = _ref2.isDisabled,
+    onChangeCorrectAnswers = _ref2.onChangeCorrectAnswers,
+    onChangeScoreAnswer = _ref2.onChangeScoreAnswer;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var handleChangeCorrectAnswer = function handleChangeCorrectAnswer(e) {
@@ -5160,7 +5361,9 @@ var QuestionView = function QuestionView(_ref) {
       onChange: handleChangeCorrectAnswer,
       disabled: isDisabled,
       control: React.createElement(Radio, {
-        size: "small"
+        size: "small",
+        checkedIcon: React.createElement(BpCheckedIcon, null),
+        icon: React.createElement(BpIcon, null)
       }),
       label: t("number_question", {
         number: i
@@ -5402,7 +5605,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   }, React.createElement(PiDotsNineLight, {
     size: 18
   })), React.createElement("div", {
-    className: "px-4"
+    className: "px-2"
   }, React.createElement("p", {
     className: "mb-0 " + styles$2["question-article"]
   }, t("article_number")), React.createElement("p", {
@@ -7080,7 +7283,7 @@ var getSubjectListApi$1 = function getSubjectListApi(textSearch) {
 var _excluded$3 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
 var DropdownIndicator$1 = function DropdownIndicator(props) {
   return React.createElement(components.DropdownIndicator, Object.assign({}, props), React.createElement(FaCaretDown, {
-    color: "#5458D5"
+    color: styles.darker
   }));
 };
 var CustomOption$1 = function CustomOption(props) {
@@ -7096,22 +7299,22 @@ var customStyles$1 = {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5",
-      borderColor: state.isFocused || state.hasValue ? '#5458D5' : '#97A1AF'
+      color: styles.darker,
+      borderColor: state.isFocused || state.hasValue ? styles.less_dark : '#97A1AF'
     });
   },
   input: function input(baseStyles, _) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   },
   singleValue: function singleValue(baseStyles) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   }
 };
@@ -7588,9 +7791,14 @@ var ExamDetailView = function ExamDetailView(_ref) {
   }), React.createElement(Grid, {
     item: true,
     xs: 12
-  }, React.createElement("button", {
+  }, React.createElement(Button, {
+    variant: 'outlined',
+    sx: {
+      color: styles.dark,
+      borderColor: styles.dark
+    },
     disabled: isDisabled,
-    className: styles["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"] + " mt-3",
+    className: "w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React.createElement(FaPlusCircle, {
     className: "me-2"
@@ -7619,13 +7827,11 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
     }
   }, React.createElement("div", {
     className: styles$3["drawer-header"] + " d-flex justify-content-between align-items-center"
-  }, React.createElement("div", {
-    style: {
-      color: "#5458D5",
+  }, React.createElement(Button, {
+    variant: "outlined",
+    sx: {
       cursor: "pointer",
       padding: "0.5rem 1rem",
-      border: "1px solid #5458D5",
-      backgroundColor: "white",
       justifyContent: "center",
       alignItems: "center",
       borderRadius: "6px"
@@ -7778,10 +7984,6 @@ var TextbookViewDetail = function TextbookViewDetail(props) {
     className: "d-flex justify-content-end"
   }, React.createElement(Button, {
     variant: "outlined",
-    sx: {
-      borderColor: "#5458D5",
-      color: "#5458D5"
-    },
     onClick: function onClick() {
       return handleOpenCreateExamDialog();
     },
@@ -7792,7 +7994,6 @@ var TextbookViewDetail = function TextbookViewDetail(props) {
   }, React.createElement(Typography, null, t("create_new_exam"))), !!id && React.createElement(Button, {
     className: "mx-1",
     variant: "contained",
-    color: "primary",
     startIcon: React.createElement(FaPlus, {
       size: 12
     }),
@@ -9185,8 +9386,8 @@ var defaultSeries = function defaultSeries(t) {
   }];
 };
 
-var useExamResult = function useExamResult(searchParam, navigate, examSessionId, studentId, code, handleChangeTab) {
-  var _allChartOptions$data, _allSeries$dataChartI;
+var useExamResult = function useExamResult(searchParam, navigate, examSessionId, studentId, code, handleChangeTab, selectedTab) {
+  var _allSeries$dataChartI;
   if (examSessionId === void 0) {
     examSessionId = 0;
   }
@@ -9198,10 +9399,11 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
   }
   var query = new URLSearchParams(searchParam);
   var dispatch = useDispatch();
-  var roles = 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) || [];
+  var user = useSelector(function (state) {
+    var _state$common;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
   });
+  var roles = (user === null || user === void 0 ? void 0 : user.roles) || [];
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   var examCode = query.get("examCode") || "";
   var language = useSelector(function (state) {
@@ -9209,8 +9411,8 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.language;
   });
   var _useState = useState(),
-    resultDatas = _useState[0],
-    setResultDatas = _useState[1];
+    resultData = _useState[0],
+    setResultData = _useState[1];
   var _useState2 = useState(),
     effectSize = _useState2[0],
     setEffectSize = _useState2[1];
@@ -9226,12 +9428,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
   var _useState6 = useState(0),
     dataChartIndex = _useState6[0],
     setDataChartIndex = _useState6[1];
-  var _useState7 = useState({
-      problem1: false,
-      problem2: false,
-      problem3: false,
-      problem4: false
-    }),
+  var _useState7 = useState(""),
     openProblem = _useState7[0],
     setOpenProblem = _useState7[1];
   var _useTranslation = useTranslation(),
@@ -9246,7 +9443,8 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
           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);
+            setDataChartIndex(0);
+            setResultData((_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);
             setTimelyOrderQuestions((_result$3$data = result[3].data) === null || _result$3$data === void 0 ? void 0 : _result$3$data.data);
@@ -9258,6 +9456,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         });
         return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       };
+      if (!examCode) return Promise.resolve();
       dispatch(setLoading(true));
       var _temp3 = _catch(function () {
         return Promise.resolve(getCheckStatusExam(examCode)).then(function () {});
@@ -9281,7 +9480,8 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
           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);
+            setDataChartIndex(0);
+            setResultData((_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);
             setTimelyOrderQuestions((_result$3$data2 = result[3].data) === null || _result$3$data2 === void 0 ? void 0 : _result$3$data2.data);
@@ -9293,6 +9493,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         });
         return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
       };
+      if (!examCode || !examSessionId || !studentId) return Promise.resolve();
       dispatch(setLoading(true));
       var _temp7 = _catch(function () {
         return Promise.resolve(getCheckStatusExam(examCode)).then(function () {});
@@ -9307,19 +9508,28 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     }
   };
   var setExampleData = function setExampleData() {
-    setResultDatas(EXAM_RESULT);
+    setResultData(EXAM_RESULT);
     setLongTimeSpend(LONGTIME_SPEND_QUESTIONS);
     setEffectSize(EFFECT_SIZE_QUESTIONS);
     setTimelyOrderQuestions(TIMELY_ORDER_QUESTIONS);
     setCategoryResponses(CATEGORY_RESPONSES);
   };
+  var resetData = function resetData() {
+    setResultData(undefined);
+    setLongTimeSpend([]);
+    setEffectSize([]);
+    setTimelyOrderQuestions([]);
+    setCategoryResponses([]);
+  };
   useEffect(function () {
     var getData = function getData() {
+      resetData();
+      if (!(user !== null && user !== void 0 && user.email)) return;
       isStudent && getStudentData(examCode);
       !isStudent && getStudentDataByTeacher(code, examSessionId, studentId);
     };
     examCode === "example-code" ? setExampleData() : getData();
-  }, [examCode, isStudent, code, examSessionId, studentId]);
+  }, [examCode, isStudent, code, examSessionId, studentId, user === null || user === void 0 ? void 0 : user.email]);
   var handlePrevChart = function handlePrevChart() {
     if (dataChartIndex > 0) {
       setDataChartIndex(dataChartIndex - 1);
@@ -9334,27 +9544,28 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     navigate("/student/my-story/live-main");
   };
   var totalTime = useMemo(function () {
-    var _resultDatas$question;
-    if (!(resultDatas !== null && resultDatas !== void 0 && (_resultDatas$question = resultDatas.questions) !== null && _resultDatas$question !== void 0 && _resultDatas$question.length)) return "0" + t("seconds");
-    var totalTime = resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.questions.reduce(function (val, current) {
+    var _resultData$questions;
+    if (!(resultData !== null && resultData !== void 0 && (_resultData$questions = resultData.questions) !== null && _resultData$questions !== void 0 && _resultData$questions.length)) return "0" + t("seconds");
+    var totalTime = resultData === null || resultData === void 0 ? void 0 : resultData.questions.reduce(function (val, current) {
       return val + Math.round((current === null || current === void 0 ? void 0 : current.duration) || 0);
     }, 0);
     return totalTime < 60 ? "" + totalTime + t("seconds") : t("mins_mins_seconds_seconds", {
       mins: Math.floor(totalTime / 60),
       seconds: totalTime % 60
     });
-  }, [JSON.stringify(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.questions), language]);
+  }, [JSON.stringify(resultData === null || resultData === void 0 ? void 0 : resultData.questions), language]);
   var allChartOptions = useMemo(function () {
     return timelyOrderQuestions.map(function (timelyOrderQuestion) {
+      var _questions$length;
+      var questions = timelyOrderQuestion.questions || null;
+      var questionLength = (_questions$length = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length : 0;
       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;
+                var _questions;
                 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");
@@ -9365,19 +9576,17 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         }),
         xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
           categories: ["."].concat(Array.from({
-            length: timelyOrderQuestion ? timelyOrderQuestion.questions.length : 1
+            length: questionLength
           }, 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,
+          tickAmount: questions.length + 1,
+          max: 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;
+              var _questions2;
               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");
@@ -9425,7 +9634,46 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
       }];
     });
   }, [JSON.stringify(timelyOrderQuestions), language]);
-  var chartOptions = (_allChartOptions$data = allChartOptions[dataChartIndex]) != null ? _allChartOptions$data : DEFAULT_LINE_CHART_OPTIONS;
+  var chartOptions = useMemo(function () {
+    var _timelyOrderQuestions, _questions$length2;
+    var questions = ((_timelyOrderQuestions = timelyOrderQuestions[dataChartIndex]) === null || _timelyOrderQuestions === void 0 ? void 0 : _timelyOrderQuestions.questions) || null;
+    var questionLength = (_questions$length2 = questions === null || questions === void 0 ? void 0 : questions.length) != null ? _questions$length2 : 0;
+    return _extends({}, DEFAULT_LINE_CHART_OPTIONS, {
+      tooltip: _extends({}, DEFAULT_LINE_CHART_OPTIONS.tooltip, {
+        y: {
+          formatter: function formatter(val, _ref2) {
+            var dataPointIndex = _ref2.dataPointIndex;
+            if (dataPointIndex > 0) {
+              var _questions3;
+              return val != null ? t("problem_number_question", {
+                number: questions !== null ? (((_questions3 = questions[questionLength - val]) === null || _questions3 === void 0 ? void 0 : _questions3.questionOrder) || 0) + 1 : val
+              }) : t("no_data");
+            }
+            return null;
+          }
+        }
+      }),
+      xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
+        categories: ["."].concat(Array.from({
+          length: questionLength
+        }, function (_, i) {
+          return ORDER_NUMBERS[i + 1] ? t(ORDER_NUMBERS[i + 1]) : toNumberOrder(i + 1);
+        }), ["."])
+      }),
+      yaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.yaxis, {
+        tickAmount: questionLength + 1,
+        max: questionLength + 1,
+        labels: _extends({}, DEFAULT_LINE_CHART_OPTIONS.yaxis.labels, {
+          formatter: function formatter(val) {
+            var _questions4;
+            return val != null ? t("problem_number_question", {
+              number: questions !== null ? (((_questions4 = questions[questionLength - val]) === null || _questions4 === void 0 ? void 0 : _questions4.questionOrder) || 0) + 1 : val
+            }) : t("no_data");
+          }
+        })
+      })
+    });
+  }, [JSON.stringify(allChartOptions), dataChartIndex, language]);
   var series = (_allSeries$dataChartI = allSeries[dataChartIndex]) != null ? _allSeries$dataChartI : defaultSeries(t);
   var handleExportPdf = function handleExportPdf() {
     try {
@@ -9604,9 +9852,12 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
       return Promise.reject(e);
     }
   };
+  useEffect(function () {
+    setDataChartIndex(0);
+  }, [selectedTab]);
   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 utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, "HH:mm") + " ~ " + utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.finishTime, "HH:mm");
+  }, [resultData === null || resultData === void 0 ? void 0 : resultData.startTime, resultData === null || resultData === void 0 ? void 0 : resultData.finishTime]);
   return {
     examTime: examTime,
     series: series,
@@ -9616,7 +9867,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     dataChartIndex: dataChartIndex,
     totalTime: totalTime,
     isStudent: isStudent,
-    resultDatas: resultDatas,
+    resultData: resultData,
     effectSize: effectSize,
     longTimeSpend: longTimeSpend,
     timelyOrderQuestions: timelyOrderQuestions,
@@ -11090,10 +11341,17 @@ function CreateNewQuestionDialog(_ref) {
       className: styles$4['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
+      sx: {
+        color: styles.dark + " !important"
+      },
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
+      variant: 'contained',
+      sx: {
+        bgcolor: styles.dark
+      },
       className: styles$4['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
@@ -11146,7 +11404,9 @@ function MyAnswer(_ref) {
         }
       }, question.isStar ? React.createElement(iconStarQuestion, null) : React.createElement(iconNoStarQuestion, null), React.createElement("span", {
         className: styles$4["questionOrder"]
-      }, question.questionOrder + 1, "\uBC88")), React.createElement("div", {
+      }, t("number_question", {
+        number: question.questionOrder + 1
+      }))), React.createElement("div", {
         className: styles["custom-col-2"],
         style: {
           display: "flex",
@@ -11155,11 +11415,11 @@ function MyAnswer(_ref) {
         }
       }, question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer, null), React.createElement("span", {
         className: styles$4["answerCorrect"]
-      }, "\uC815\uB2F5")), !question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer$1, null), React.createElement("span", {
+      }, t("correct"))), !question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer$1, null), React.createElement("span", {
         className: styles$4["answerIncorrect"]
-      }, "\uC624\uB2F5")), question.selectedAnswers === "" && React.createElement(Fragment$1, null, React.createElement(iconNoGrass, null), React.createElement("span", {
+      }, t("incorrect"))), question.selectedAnswers === "" && React.createElement(Fragment$1, null, React.createElement(iconNoGrass, null), React.createElement("span", {
         className: styles$4["answerNograss"]
-      }, "\uD480\uC774 \uC5C6\uC74C"))), React.createElement("div", {
+      }, t("no_solution")))), React.createElement("div", {
         className: styles["custom-col-2"],
         style: {
           display: "flex",
@@ -11175,7 +11435,7 @@ function MyAnswer(_ref) {
           margin: 0
         },
         className: styles$4["answerNoTime"]
-      }, "\uC2DC\uAC04 \uC5C6\uC74C")), React.createElement("div", {
+      }, t("no_time"))), React.createElement("div", {
         className: styles["custom-col-2"],
         style: {
           display: "flex",
@@ -11208,7 +11468,7 @@ function MyAnswer(_ref) {
           margin: 0
         },
         className: styles$4["answerNoTime"]
-      }, "\uC2DC\uAC04 \uC5C6\uC74C")), isStudent && React.createElement("div", {
+      }, t("no_time"))), isStudent && React.createElement("div", {
         className: styles["custom-col-2"],
         style: {
           display: "flex",
@@ -11220,7 +11480,7 @@ function MyAnswer(_ref) {
           return handleOpenChat(e, question === null || question === void 0 ? void 0 : question.id);
         }
       }, React.createElement(iconChat, {
-        color: "#5458D5"
+        color: styles.gray_700
       })))));
     });
   };
@@ -11258,7 +11518,7 @@ function MyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF"
       }
-    }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
+    }, t("problem_number"))), React.createElement("div", {
       className: styles["custom-col-2"],
       style: {
         display: "flex",
@@ -11270,7 +11530,7 @@ function MyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF"
       }
-    }, "\uC815\uB2F5")), React.createElement("div", {
+    }, t("answer"))), React.createElement("div", {
       className: styles["custom-col-2"],
       style: {
         display: "flex",
@@ -11282,7 +11542,7 @@ function MyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF"
       }
-    }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
+    }, t("solve_time"))), React.createElement("div", {
       className: styles["custom-col-2"],
       style: {
         display: "flex",
@@ -11295,7 +11555,7 @@ function MyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF"
       }
-    }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
+    }, t("comparison_of_top_rankings"))), React.createElement("div", {
       className: styles["custom-col-2"],
       style: {
         display: "flex",
@@ -11308,14 +11568,14 @@ function MyAnswer(_ref) {
         fontWeight: 600,
         color: "#97A1AF"
       }
-    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
+    }, t("total_correct_rate")))), React.createElement("div", {
       className: styles$4["titleMyAnswer2"]
     }, React.createElement(Typography, {
       sx: {
         color: "#97A1AF",
         fontSize: "12px"
       }
-    }, "\uCE74\uD14C\uACE0\uB9AC"), React.createElement(Typography, {
+    }, t("_category")), React.createElement(Typography, {
       sx: {
         color: "#414E62",
         fontSize: "12px",
@@ -11379,6 +11639,8 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
 var CompareGrass = function CompareGrass(_ref) {
   var effectSize = _ref.effectSize,
     isPrint = _ref.isPrint;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var renderTableBody = function renderTableBody(effectSize) {
     return effectSize.map(function (item, index) {
       return React.createElement("tr", {
@@ -11389,22 +11651,28 @@ var CompareGrass = function CompareGrass(_ref) {
         } : {}
       }, React.createElement("td", {
         className: styles$4["tdcolumn1"]
-      }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
+      }, t("problem"), " ", item.questionOrder + 1), React.createElement("td", {
         style: {
           textAlign: "center",
           color: "#202B37"
         }
-      }, item.correctAnswers, "\uBC88"), React.createElement("td", {
+      }, t("number_question", {
+        number: item.correctAnswers
+      })), React.createElement("td", {
         className: styles$4["tdcolumn3"],
         style: {
           color: item.isCorrect ? "#1EE288" : "#F34B4B"
         }
-      }, item.selectedAnswers ? item.selectedAnswers + "\uBC88" : ""), React.createElement("td", {
+      }, item.selectedAnswers ? t("number_question", {
+        number: item.selectedAnswers
+      }) : ""), React.createElement("td", {
         style: {
           textAlign: "center",
           color: "#414E62"
         }
-      }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
+      }, item.mostSelectedAnswers ? t("number_question", {
+        number: item.mostSelectedAnswers
+      }) : ""), React.createElement("td", null, React.createElement("div", {
         className: styles$4["classification"]
       }, item.problemCategories.map(function (problem, index) {
         return React.createElement("div", {
@@ -11413,23 +11681,23 @@ var CompareGrass = function CompareGrass(_ref) {
           style: {
             border: "1px solid #1EE288"
           }
-        }, "\uC26C\uC6B4 \uBB38\uC81C"), problem === 3 && React.createElement("span", {
+        }, t("easy_problem")), problem === 3 && React.createElement("span", {
           style: {
             border: "1px solid #FDDB64"
           }
-        }, "\uD568\uC815 \uBB38\uC81C"), problem === 2 && React.createElement("span", {
+        }, t("trick_problem")), problem === 2 && React.createElement("span", {
           style: {
             border: "1px solid #F34B4B"
           }
-        }, "\uBCC0\uBCC4\uB825 \uBB38\uC81C"), problem === 0 && React.createElement("span", {
+        }, t("differential_problem")), problem === 0 && React.createElement("span", {
           style: {
             border: "1px solid #DDDDDD"
           }
-        }, "\uC77C\uBC18\uC801\uC778 \uBB38\uC81C"), problem === 4 && React.createElement("span", {
+        }, t("general_problem")), problem === 4 && React.createElement("span", {
           style: {
             border: "1px solid #FF0000"
           }
-        }, "\uC5B4\uB824\uC6B4 \uBB38\uC81C"));
+        }, t("Difficult_problem")));
       }))));
     });
   };
@@ -11459,23 +11727,23 @@ var CompareGrass = function CompareGrass(_ref) {
     className: isPrint ? PrintHeaderClassName : ""
   }, React.createElement("tr", null, React.createElement("th", {
     className: styles$4["thcolumn1"]
-  }, "\uBB38\uC81C \uBC88\uD638"), React.createElement("th", {
+  }, t("problem_number")), React.createElement("th", {
     style: {
       textAlign: "center"
     }
-  }, "\uC815\uB2F5"), React.createElement("th", {
+  }, t("answer")), React.createElement("th", {
     style: {
       textAlign: "center"
     }
-  }, "\uB0B4 \uD480\uC774"), React.createElement("th", {
+  }, t("my_solution")), React.createElement("th", {
     style: {
       textAlign: "center"
     }
-  }, "\uAC00\uC7A5 \uB9CE\uC740 \uD480\uC774"), React.createElement("th", {
+  }, t("most_solutions")), React.createElement("th", {
     style: {
       textAlign: "center"
     }
-  }, "\uBB38\uC81C \uBD84\uB958"))), isPrint ? renderPrintTableBody(effectSize) : React.createElement("tbody", null, renderTableBody(effectSize))))));
+  }, t("problem_classification")))), isPrint ? renderPrintTableBody(effectSize) : React.createElement("tbody", null, renderTableBody(effectSize))))));
 };
 
 var iconUpArrow = function iconUpArrow(_ref) {
@@ -11566,10 +11834,14 @@ var iconAssignedQuestions = function iconAssignedQuestions(_ref) {
 };
 
 var TrickyProblem = function TrickyProblem(_ref) {
-  var data = _ref.data,
+  var keyOpen = _ref.keyOpen,
+    data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isOpen = openProblem === keyOpen;
   var inCorrectQuestions = data.questions.filter(function (i) {
     return i.isStar && !i.isCorrect;
   });
@@ -11579,82 +11851,90 @@ var TrickyProblem = function TrickyProblem(_ref) {
   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", {
+    }, React.createElement(iconX, null), React.createElement("span", null, t("incorrect_problem_among_the_starred_problems"))), 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");
+      }, t("number_question", {
+        number: question.questionOrder + 1
+      }));
     }), !data.questions.length && React.createElement("div", {
       className: styles$4["noData"]
-    }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
+    }, t("no_data"))), 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", {
+    }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, t("correct_problem_among_the_starred_problems"))), 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");
+      }, t("number_question", {
+        number: question.questionOrder + 1
+      }));
     }), !data.questions.length && React.createElement("div", {
       className: styles$4["noData"]
-    }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
+    }, t("no_data"))));
   };
   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", {
+    }, React.createElement(iconX, null), React.createElement("span", null, t("incorrect_problem_among_the_starred_problems"))), 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");
+      }, t("number_question", {
+        number: question.questionOrder + 1
+      }));
     }), !data.questions.length && React.createElement("div", {
       className: styles$4["noData"]
-    }, "\uB370\uC774\uD130 \uC5C6\uC74C"))), React.createElement("div", {
+    }, t("no_data")))), 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", {
+    }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, t("correct_problem_among_the_starred_problems"))), 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");
+      }, t("number_question", {
+        number: question.questionOrder + 1
+      }));
     }), !data.questions.length && React.createElement("div", {
       className: styles$4["noData"]
-    }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
+    }, t("no_data")))));
   };
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: (!openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem1: !openProblem.problem1
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem1 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       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, isPrint ? renderPrintProblems() : renderProblems()));
+  }, t("tricky_problems")), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement(Fragment$1, null, isPrint ? renderPrintProblems() : renderProblems()));
 };
 
 var ProtractedProblem = function ProtractedProblem(_ref) {
-  var data = _ref.data,
+  var keyOpen = _ref.keyOpen,
+    data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var isOpen = openProblem === keyOpen;
   var renderQuestions = function renderQuestions(data) {
     return data.map(function (item) {
       return React.createElement("div", {
@@ -11664,15 +11944,17 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
         className: styles$4["contentColumn1"]
       }, React.createElement("div", null, React.createElement("span", {
         className: styles$4["span1"]
-      }, "\uBB38\uC81C"), React.createElement("span", {
+      }, t("problem")), React.createElement("span", {
         className: styles$4["span2"]
-      }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
+      }, t("number_question", {
+        number: item.questionOrder + 1
+      })))), 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", {
+      }, t("my_time")), React.createElement("span", {
         className: styles$4["span2"]
-      }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
+      }, t("top_time"))), React.createElement("div", null, React.createElement("span", {
         className: styles$4["duration"]
       }, formatTimeSecond(item.duration, t)), React.createElement("span", {
         className: styles$4["topDuration"]
@@ -11691,30 +11973,32 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: (!openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem2: !openProblem.problem2
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem2 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\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", {
+  }, t("problems_that_took_a_long_time")), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
   }, data.length ? isPrint ? renderPrintQuestions() : renderQuestions(data) : React.createElement("div", {
     className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
+  }, t("no_data")))));
 };
 
 var Vulnerable = function Vulnerable(_ref) {
   var data = _ref.data,
+    keyOpen = _ref.keyOpen,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isOpen = openProblem === keyOpen;
   var incorrectQuestions = data.questions.filter(function (i) {
     return i.selectedAnswers !== "" && i.isCorrect === false;
   }).sort(function (q1, q2) {
@@ -11729,19 +12013,25 @@ var Vulnerable = function Vulnerable(_ref) {
         className: styles$4["contentColumn1"]
       }, React.createElement("div", null, React.createElement("span", {
         className: styles$4["span1"]
-      }, "\uBB38\uC81C"), React.createElement("span", {
+      }, t("problem_number")), React.createElement("span", {
         className: styles$4["span2"]
-      }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
+      }, t("number_question", {
+        number: question.questionOrder + 1
+      })))), 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", {
+      }, t("total_correct_rate")), React.createElement("span", {
         className: styles$4["span2"]
-      }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
+      }, t("my_wrong_answer"))), 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)"))));
+      }, t("number_question", {
+        number: question.selectedAnswers
+      }), " (", t("answer"), " ", t("number_question", {
+        number: question.correctAnswers
+      }), ")"))));
     });
   };
   var renderPrintQuestions = function renderPrintQuestions(questions) {
@@ -11756,30 +12046,32 @@ var Vulnerable = function Vulnerable(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + PrintContainerClassName
   }, React.createElement("div", {
-    className: (!openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem3: !openProblem.problem3
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem3 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\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", {
+  }, t("issues_vulnerable")), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
   }, isPrint ? renderPrintQuestions(incorrectQuestions) : renderQuestions(incorrectQuestions), !incorrectQuestions.length && React.createElement("div", {
     className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
+  }, t("no_data")))));
 };
 
 var GradesByTerritory = function GradesByTerritory(_ref) {
-  var data = _ref.data,
+  var keyOpen = _ref.keyOpen,
+    data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isOpen = openProblem === keyOpen;
   var renderCategories = function renderCategories(data) {
     return data.map(function (item) {
       var trackStyle = {
@@ -11794,7 +12086,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
         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", {
+      }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, t("problems")))), React.createElement("div", {
         className: styles$4["slider"]
       }, React.createElement("div", null, React.createElement("span", {
         className: styles$4["track"],
@@ -11814,23 +12106,21 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: (!openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem4: !openProblem.problem4
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem4 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), openProblem.problem4 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem4 && React.createElement("div", {
+  }, t("grades_by_area")), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement("div", {
     className: styles$4["wrappContentProblem"]
-  }, isPrint ? renderPrintCategories() : renderCategories(data), openProblem.problem4 && !data.length && React.createElement("div", {
+  }, isPrint ? renderPrintCategories() : renderCategories(data), isOpen && !data.length && React.createElement("div", {
     className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
+  }, t("no_data"))));
 };
 
 var useCreateQuestionDialog$1 = function useCreateQuestionDialog() {
@@ -11960,10 +12250,17 @@ function CreateNewQuestionDialog$1(_ref) {
       className: styles$4['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
+      sx: {
+        color: styles.dark + " !important"
+      },
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
+      variant: 'contained',
+      sx: {
+        bgcolor: styles.dark
+      },
       className: styles$4['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
@@ -12032,7 +12329,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
   var _useTab = useTab(),
     selected = _useTab.selected,
     handleChangeTab = _useTab.handleChangeTab;
-  var _useExamResult = useExamResult(searchParams, onNavigate, examSessionId, studentId, code, handleChangeTab),
+  var _useExamResult = useExamResult(searchParams, onNavigate, examSessionId, studentId, code, handleChangeTab, selected),
     examTime = _useExamResult.examTime,
     series = _useExamResult.series,
     allSeries = _useExamResult.allSeries,
@@ -12042,7 +12339,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     timelyOrderQuestions = _useExamResult.timelyOrderQuestions,
     isStudent = _useExamResult.isStudent,
     openProblem = _useExamResult.openProblem,
-    resultDatas = _useExamResult.resultDatas,
+    resultData = _useExamResult.resultData,
     longTimeSpend = _useExamResult.longTimeSpend,
     effectSize = _useExamResult.effectSize,
     categoryResponses = _useExamResult.categoryResponses,
@@ -12057,7 +12354,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     openCreateQuestionDialog = _useCreateQuestionDia.openCreateQuestionDialog,
     toggleCreateQuestion = _useCreateQuestionDia.toggleCreateQuestion;
   var isTabletUp = useMediaQuery('(min-width:900px)');
-  return React.createElement(Fragment$1, null, timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultDatas && effectSize ? React.createElement("div", {
+  return React.createElement(Fragment$1, null, timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultData && effectSize ? React.createElement("div", {
     style: {
       width: "100%"
     }
@@ -12066,13 +12363,13 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     padding: "24px"
   }, React.createElement(Grid, {
     item: true
-  }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
+  }, resultData.courseName && React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#C3C5FE"
+      color: styles.less_dark
     }
-  }, resultDatas.courseName)), React.createElement(Box, {
+  }, resultData.courseName)), React.createElement(Box, {
     display: "flex",
     gap: "16px",
     flexDirection: "column"
@@ -12080,78 +12377,77 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "20px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
-  }, resultDatas.title)), React.createElement(Stack, {
+  }, resultData.title)), React.createElement(Stack, {
     flexDirection: "row",
     gap: "16px"
   }, React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("my_score")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
   }, t("score_format", {
-    score: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.score
+    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_date")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
+  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_time")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, examTime)), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("total_students")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, t("number_people", {
-    number: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.totalStudent
+    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("teacher_in_charge")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.teacherName)))))), React.createElement(Grid, {
+  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React.createElement(Grid, {
     container: true,
-    padding: "24px",
     className: "position-relative overflow-hidden"
   }, !isTabletUp && React.createElement(Grid, {
     item: true,
@@ -12183,7 +12479,8 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     justifyContent: "space-between",
     alignItems: "center",
     display: "flex",
-    bgcolor: "#F9FAFB",
+    overflow: "scroll",
+    bgcolor: styles.gray_100,
     borderTop: "1px solid #E4E7EC",
     borderBottom: "1px solid #E4E7EC"
   }, React.createElement(Stack, {
@@ -12200,9 +12497,11 @@ var ExamResultV2 = function ExamResultV2(_ref) {
       sx: {
         fontSize: "14px",
         fontWeight: "600",
-        color: value === selected ? "#000" : "#97A1AF",
+        color: value === selected ? styles.less_dark : styles.gray_500,
         padding: "8px 16px",
-        bgcolor: value === selected ? "#FFF" : "#F9FAFB"
+        "&:hover": {
+          background: styles.light
+        }
       },
       onClick: function onClick() {
         return handleChangeTab(value);
@@ -12224,7 +12523,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 0
   }, React.createElement(MyAnswer, {
-    data: resultDatas,
+    data: resultData,
     categories: categoryResponses,
     isStudent: isStudent
   })), React.createElement(CustomTabPanel, {
@@ -12253,18 +12552,22 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 3
   }, React.createElement(TrickyProblem, {
-    data: resultDatas,
+    keyOpen: "TrickyProblem",
+    data: resultData,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React.createElement(Vulnerable, {
-    data: resultDatas,
+    keyOpen: "Vulnerable",
+    data: resultData,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React.createElement(ProtractedProblem, {
+    keyOpen: "ProtractedProblem",
     data: longTimeSpend,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React.createElement(GradesByTerritory, {
+    keyOpen: "GradesByTerritory",
     data: categoryResponses,
     openProblem: openProblem,
     changeOpen: setOpenProblem
@@ -12283,13 +12586,13 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     id: "header-canvas"
   }, React.createElement(Grid, {
     item: true
-  }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
+  }, resultData.courseName && React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#C3C5FE"
+      color: styles.less_dark
     }
-  }, resultDatas.courseName)), React.createElement(Box, {
+  }, resultData.courseName)), React.createElement(Box, {
     display: "flex",
     gap: "16px",
     flexDirection: "column"
@@ -12297,76 +12600,76 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "20px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
-  }, resultDatas.title)), React.createElement(Stack, {
+  }, resultData.title)), React.createElement(Stack, {
     flexDirection: "row",
     gap: "16px"
   }, React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("my_score")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
   }, t("score_format", {
-    score: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.score
+    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_date")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
+  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_time")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, examTime)), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("total_students")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, t("number_people", {
-    number: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.totalStudent
+    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("teacher_in_charge")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.teacherName)))))), React.createElement(Stack, {
+  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px"
@@ -12375,10 +12678,10 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "18px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.gray_500
     }
   }, t(TabList[0].label)), React.createElement(MyAnswer, {
-    data: resultDatas,
+    data: resultData,
     categories: categoryResponses,
     isStudent: isStudent,
     isPrint: true
@@ -12392,7 +12695,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "18px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.gray_500
     }
   }, t(TabList[1].label)), timelyOrderQuestions.map(function (timelyOrderQuestion, index) {
     return React.createElement("div", {
@@ -12424,11 +12727,10 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
-    className: "chart-title",
     sx: {
-      fontSize: "18px",
+      fontSize: "16px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.grey_500
     }
   }, t(TabList[2].label)), React.createElement(CompareGrass, {
     effectSize: effectSize,
@@ -12443,38 +12745,34 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "18px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.gray_500
     }
   }, t(TabList[3].label)), React.createElement(TrickyProblem, {
-    data: resultDatas,
-    openProblem: _extends({}, openProblem, {
-      problem1: true
-    }),
+    keyOpen: "TrickyProblem",
+    data: resultData,
+    openProblem: "TrickyProblem",
     changeOpen: setOpenProblem,
     isPrint: true
   }), React.createElement(Vulnerable, {
-    data: resultDatas,
-    openProblem: _extends({}, openProblem, {
-      problem3: true
-    }),
+    keyOpen: "Vulnerable",
+    data: resultData,
+    openProblem: "Vulnerable",
     changeOpen: setOpenProblem,
     isPrint: true
   }), React.createElement(ProtractedProblem, {
+    keyOpen: "ProtractedProblem",
     data: longTimeSpend,
-    openProblem: _extends({}, openProblem, {
-      problem2: true
-    }),
+    openProblem: "ProtractedProblem",
     changeOpen: setOpenProblem,
     isPrint: true
   }), React.createElement(GradesByTerritory, {
+    keyOpen: "GradesByTerritory",
     data: categoryResponses,
-    openProblem: _extends({}, openProblem, {
-      problem4: true
-    }),
+    openProblem: "GradesByTerritory",
     changeOpen: setOpenProblem,
     isPrint: true
   })))), React.createElement(CreateNewQuestionDialog$1, {
-    examSessionId: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.examSessionId,
+    examSessionId: resultData === null || resultData === void 0 ? void 0 : resultData.examSessionId,
     handleCreateQuestion: handleCreateQuestion,
     openCreateQuestionDialog: openCreateQuestionDialog,
     toggleCreateQuestion: toggleCreateQuestion
@@ -12582,7 +12880,8 @@ var Header = function Header(_ref) {
     direction: "row",
     alignItems: "center"
   }, React.createElement(Typography, {
-    className: "fw-bold text-primary me-2 text-nowrap flex-shrink-1",
+    color: styles.dark,
+    className: "fw-bold me-2 text-nowrap",
     sx: {
       minWidth: "60px",
       overflow: "hidden",