diff --git a/src/app/exam/_components/ExamPage/ExamPage.module.scss b/src/app/exam/_components/ExamPage/ExamPage.module.scss index 119fed9d..659c5c1f 100644 --- a/src/app/exam/_components/ExamPage/ExamPage.module.scss +++ b/src/app/exam/_components/ExamPage/ExamPage.module.scss @@ -7,14 +7,14 @@ @import '../../../../components/common/variable'; .exam_area_wrapper { margin: -16px; - display: grid; - grid-template-columns: 200px 1fr; + display: flex; width: 100dvw; height: calc(100dvh - 48px); } .exam_status { padding: 0px 8px; + min-width: 172px; max-height: 100%; overflow-y: scroll; display: flex; @@ -35,25 +35,41 @@ display: grid; // prettier-ignore grid-template: - 'gap question question' auto - 'gap answer result' 1fr - 'button button button' auto / 12px 1fr 1fr; - margin-top: 8px; + 'question question' auto + 'answer result' 1fr + 'button button' auto / 1fr 1fr; + max-height: calc(100dvh - 48px); } .question { grid-area: question; + padding: 4px 8px; font-size: 1.7em; white-space: pre-wrap; + word-wrap: break-word; border-bottom: 2px solid $color-fg; } .answer { grid-area: answer; + padding: 4px 8px; font-size: 1.5em; white-space: pre-wrap; + word-wrap: break-word; } .result { grid-area: result; + padding: 4px 12px; white-space: pre-wrap; + word-wrap: break-word; +} +.scroll_area { + overflow-y: scroll; + scrollbar-color: $color-fg transparent; + ::-webkit-scrollbar-track { + background-color: transparent; + } + ::-webkit-scrollbar-thumb { + background-color: $color-fg; + } } .button_container { grid-area: button; diff --git a/src/app/exam/_components/ExamPage/ExamPage.tsx b/src/app/exam/_components/ExamPage/ExamPage.tsx index 16779640..cec544f6 100644 --- a/src/app/exam/_components/ExamPage/ExamPage.tsx +++ b/src/app/exam/_components/ExamPage/ExamPage.tsx @@ -4,13 +4,13 @@ // Email : // Twitter: @Watasuke102 // This software is released under the MIT or MIT SUSHI-WARE License. +'use client'; import css from './ExamPage.module.scss'; import React from 'react'; import Exam from '@mytypes/Exam'; import Button from '@/common/Button/Button'; import ArrowLeftIcon from '@assets/arrow-left.svg'; import ArrowRightIcon from '@assets/arrow-right.svg'; -import Head from 'next/head'; type Props = { title: string; @@ -40,23 +40,54 @@ export function ExamPage(props: Props): JSX.Element { return ( <> - - {} -
-
+
{`${index + 1} / ${props.exam.length}`}
{[...Array(1000)].map((e, i) => ( {`00${i}`.slice(-3)}：1000問正解 ))}
-
{props.exam[index].question}
-
answer
-
result
+
+ {props.exam[index].question} + {'00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'} +
+
+ {[...Array(100)].map((e, i) => ( + <> + + {`00${i}`.slice(-3)}:{'0000000000000000000000000000000000000000000000000000' + i * i * i} + +
+ + ))} + answer +
+
+ {[...Array(100)].map((e, i) => ( + <> + + {`00${i}`.slice(-3)}: + {'0000000000000000000012345678901234500000000000000000000000000000000' + i * i * i} + +
+ + ))} + result +
-
diff --git a/src/app/exam/loading.tsx b/src/app/exam/loading.tsx new file mode 100644 index 00000000..3975863a --- /dev/null +++ b/src/app/exam/loading.tsx @@ -0,0 +1,9 @@ +// TAGether - Share self-made exam for classmates +// CopyRight (c) 2020-2023 watasuke +// +// Email : +// Twitter: @Watasuke102 +// This software is released under the MIT or MIT SUSHI-WARE License. +import Loading from '@/common/Loading/Loading'; + +export default Loading;