feat: enhance hints

exKAZUu-Research · Oct 11, 2024 · 716b054 · 716b054
1 parent 9e6d742
commit 716b054
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/...p/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx b/...p/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx
@@ -52,7 +52,7 @@ interface TurtleGraphicsProps {
 }
 
 export interface TurtleGraphicsHandle {
-  findIncorrectLocations(): string[];
+  findIncorrectLocationsAndHintText(): [string[], string];
 }
 
 export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>((props, ref) => {
@@ -77,7 +77,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
   );
 
   useImperativeHandle(ref, () => ({
-    findIncorrectLocations,
+    findIncorrectLocationsAndHintText,
   }));
 
   useEffect(() => {
@@ -100,8 +100,9 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
     });
   };
 
-  const findIncorrectLocations = (): string[] => {
+  const findIncorrectLocationsAndHintText = (): [string[], string] => {
     const locations: string[] = [];
+    let hintText = '';
     if (!fastDeepEqual(currentTraceItem.turtles, turtles)) {
       locations.push('亀');
     }
@@ -114,9 +115,13 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
         zenkakuAlphanumericalsToHankaku(props.currentVariables[name].toString())
       ) {
         locations.push(`変数${name}`);
+        if (props.initialVariables[name].toString() === props.currentVariables[name].toString()) {
+          hintText +=
+            '\n\nヒント: たとえ変数を参照する式があっても、変数を更新する演算子（=, +=, ++）などがなければ、変数の値が変化しないことに注意してください。';
+        }
       }
     }
-    return locations;
+    return [locations, hintText];
   };
 
   const handleClickTurtle = (turtle: TurtleTrace): void => {
@@ -221,7 +226,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
               <Thead>
                 <Tr>
                   <Th>変数名</Th>
-                  <Th>値（=や+=などで代入しないと変化しない）</Th>
+                  <Th>値（=や+=などの代入がないと変化しない）</Th>
                 </Tr>
               </Thead>
               <Tbody>

diff --git a/...pp/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx b/...pp/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
@@ -91,7 +91,8 @@ export const ProblemBody: React.FC<Props> = (props) => {
   const handleSubmit = useCallback(async (): Promise<void> => {
     if (isAlertOpen || !turtleGraphicsRef.current) return;
 
-    const incorrectLocationText = turtleGraphicsRef.current.findIncorrectLocations().join('、');
+    const [incorrectLocations, hintText] = turtleGraphicsRef.current.findIncorrectLocationsAndHintText();
+    const incorrectLocationText = incorrectLocations.join('、');
 
     switch (problemType) {
       case 'executionResult': {
@@ -129,7 +130,10 @@ export const ProblemBody: React.FC<Props> = (props) => {
           !incorrectLocationText && currentTraceItemIndex === props.problem.traceItems.length - 1
         );
         if (incorrectLocationText) {
-          openAlertDialog('不正解', `${incorrectLocationText}に誤りがあります。もう一度解答してください。`);
+          openAlertDialog(
+            '不正解',
+            `${incorrectLocationText}に誤りがあります。もう一度解答してみましょう。${hintText}`
+          );
           setViewingTraceItemIndex(previousTraceItemIndex);
         } else {
           if (currentTraceItemIndex === props.problem.traceItems.length - 1) {
@@ -258,7 +262,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
             <AlertDialogHeader fontSize="lg" fontWeight="bold">
               {alertTitle}
             </AlertDialogHeader>
-            <AlertDialogBody>{alertMessage}</AlertDialogBody>
+            <AlertDialogBody whiteSpace="pre-wrap">{alertMessage}</AlertDialogBody>
             <AlertDialogFooter>
               <Button
                 ref={cancelRef}