Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: how to answer #51

Merged
merged 10 commits into from
Feb 27, 2024
Merged

feat: how to answer #51

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0b38707
feat: create ExplanationModal
ykit00 Feb 21, 2024
8ae56ae
feat: problem description
ykit00 Feb 26, 2024
39740c9
Merge branch 'main' of github.com:exKAZUu-Research/trace-dojo into fe…
ykit00 Feb 26, 2024
9a197f7
chore: Remove unused prop
ykit00 Feb 26, 2024
8a91dcd
refactor: move getExplanation
ykit00 Feb 26, 2024
3a8a372
refactor: Renaming a modal component
ykit00 Feb 26, 2024
8a2495e
feat: Show problem help
ykit00 Feb 26, 2024
8e599dd
Merge branch 'main' of github.com:exKAZUu-Research/trace-dojo into fe…
ykit00 Feb 26, 2024
3b23705
Merge branch 'main' into feature/44/problem-help
ykit00 Feb 26, 2024
feb6999
Merge branch 'main' of github.com:exKAZUu-Research/trace-dojo into fe…
ykit00 Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 30 additions & 9 deletions src/app/(withAuth)/courses/[courseId]/programs/[programId]/CheckpointProblem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
}) => {
const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);

const { isOpen, onClose, onOpen } = useDisclosure();
const {
isOpen: isExplanationModalOpen,
onClose: onExplanationModalClose,
onOpen: onExplanationModalOpen,
} = useDisclosure();
const { isOpen: isHelpModalOpen, onClose: onHelpModalClose, onOpen: onHelpModalOpen } = useDisclosure();
const beforeCheckpointResult = solveProblem(problemProgram).histories?.at(beforeCheckPointLine);

const handleClickResetButton = (): void => {
Expand Down Expand Up @@ -94,14 +99,30 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
</Box>
</VStack>
<VStack align="end" minW="50%" overflow="hidden">
{explanation && (
<>
<Button colorScheme="gray" onClick={onOpen}>
解説
</Button>
<CustomModal body={explanation.body} isOpen={isOpen} title={explanation.title} onClose={onClose} />
</>
)}
<HStack>
<Button colorScheme="gray" onClick={onHelpModalOpen}>
解答方法
</Button>
<CustomModal
body="チェックポイント問題の解答方法の説明"
isOpen={isHelpModalOpen}
title="チェックポイント問題について"
onClose={onHelpModalClose}
/>
{explanation && (
<>
<Button colorScheme="gray" onClick={onExplanationModalOpen}>
解説
</Button>
<CustomModal
body={explanation.body}
isOpen={isExplanationModalOpen}
title={explanation.title}
onClose={onExplanationModalClose}
/>
</>
)}
</HStack>
<Box h="640px" w="100%">
<SyntaxHighlighter
beforeCheckPointLine={beforeCheckPointLine}
Expand Down
39 changes: 30 additions & 9 deletions src/app/(withAuth)/courses/[courseId]/programs/[programId]/ExecutionResultProblem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
setStep,
}) => {
const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
const { isOpen, onClose, onOpen } = useDisclosure();
const {
isOpen: isExplanationModalOpen,
onClose: onExplanationModalClose,
onOpen: onExplanationModalOpen,
} = useDisclosure();
const { isOpen: isHelpModalOpen, onClose: onHelpModalClose, onOpen: onHelpModalOpen } = useDisclosure();

const handleClickResetButton = (): void => {
turtleGraphicsRef.current?.init();
Expand Down Expand Up @@ -53,14 +58,30 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
</Box>
</VStack>
<VStack align="end" minW="50%" overflow="hidden">
{explanation && (
<>
<Button colorScheme="gray" onClick={onOpen}>
解説
</Button>
<CustomModal body={explanation.body} isOpen={isOpen} title={explanation.title} onClose={onClose} />
</>
)}
<HStack>
<Button colorScheme="gray" onClick={onHelpModalOpen}>
解答方法
</Button>
<CustomModal
body="実行結果問題の解答方法の説明"
isOpen={isHelpModalOpen}
title="実行結果問題について"
onClose={onHelpModalClose}
/>
{explanation && (
<>
<Button colorScheme="gray" onClick={onExplanationModalOpen}>
解説
</Button>
<CustomModal
body={explanation.body}
isOpen={isExplanationModalOpen}
title={explanation.title}
onClose={onExplanationModalClose}
/>
</>
)}
</HStack>
{/* 画面に収まる高さに設定 */}
<Box h="calc(100vh - 370px)" w="100%">
<SyntaxHighlighter code={problemProgram} programmingLanguageId={selectedLanguageId} />
Expand Down
39 changes: 30 additions & 9 deletions src/app/(withAuth)/courses/[courseId]/programs/[programId]/StepProblem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ export const StepProblem: React.FC<StepProblemProps> = ({
setCurrentCheckPointLine,
}) => {
const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
const { isOpen, onClose, onOpen } = useDisclosure();
const {
isOpen: isExplanationModalOpen,
onClose: onExplanationModalClose,
onOpen: onExplanationModalOpen,
} = useDisclosure();
const { isOpen: isHelpModalOpen, onClose: onHelpModalClose, onOpen: onHelpModalOpen } = useDisclosure();

const beforeCheckpointResult = solveProblem(problemProgram).histories?.at(beforeCheckPointLine);

Expand Down Expand Up @@ -87,14 +92,30 @@ export const StepProblem: React.FC<StepProblemProps> = ({
</Box>
</VStack>
<VStack align="end" minW="50%" overflow="hidden">
{explanation && (
<>
<Button colorScheme="gray" onClick={onOpen}>
解説
</Button>
<CustomModal body={explanation.body} isOpen={isOpen} title={explanation.title} onClose={onClose} />
</>
)}
<HStack>
<Button colorScheme="gray" onClick={onHelpModalOpen}>
解答方法
</Button>
<CustomModal
body="ステップ問題の解答方法の説明"
isOpen={isHelpModalOpen}
title="ステップ問題について"
onClose={onHelpModalClose}
/>
{explanation && (
<>
<Button colorScheme="gray" onClick={onExplanationModalOpen}>
解説
</Button>
<CustomModal
body={explanation.body}
isOpen={isExplanationModalOpen}
title={explanation.title}
onClose={onExplanationModalClose}
/>
</>
)}
</HStack>
<Box h="640px" w="100%">
<SyntaxHighlighter
beforeCheckPointLine={beforeCheckPointLine}
Expand Down