feat: how to answer (#51)

* feat: create ExplanationModal * feat: problem description * chore: Remove unused prop * refactor: move getExplanation * refactor: Renaming a modal component * feat: Show problem help
exKAZUu-Research · Feb 27, 2024 · 99bc426 · 99bc426
1 parent c3588b1
commit 99bc426
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 27 deletions.
diff --git a/src/app/(withAuth)/courses/[courseId]/programs/[programId]/CheckpointProblem.tsx b/src/app/(withAuth)/courses/[courseId]/programs/[programId]/CheckpointProblem.tsx
@@ -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.excuteProgram).histories?.at(beforeCheckPointLine);
 
   const handleClickResetButton = (): void => {
@@ -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}

diff --git a/src/app/(withAuth)/courses/[courseId]/programs/[programId]/ExecutionResultProblem.tsx b/src/app/(withAuth)/courses/[courseId]/programs/[programId]/ExecutionResultProblem.tsx
@@ -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();
@@ -57,14 +62,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.displayProgram} programmingLanguageId={selectedLanguageId} />

diff --git a/src/app/(withAuth)/courses/[courseId]/programs/[programId]/StepProblem.tsx b/src/app/(withAuth)/courses/[courseId]/programs/[programId]/StepProblem.tsx
@@ -34,7 +34,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.excuteProgram).histories?.at(beforeCheckPointLine);
 
@@ -88,14 +93,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}