diff --git a/public/images/usage_01.png b/public/images/usage_01.png index 5bf496fb..778318e6 100644 Binary files a/public/images/usage_01.png and b/public/images/usage_01.png differ diff --git a/public/images/usage_02.png b/public/images/usage_02.png index 1f16f008..ed25ed6d 100644 Binary files a/public/images/usage_02.png and b/public/images/usage_02.png differ diff --git a/public/images/usage_03.png b/public/images/usage_03.png index b9953b62..1a69ac66 100644 Binary files a/public/images/usage_03.png and b/public/images/usage_03.png differ diff --git a/public/images/usage_04.png b/public/images/usage_04.png index 16ff65cd..b86f9ca6 100644 Binary files a/public/images/usage_04.png and b/public/images/usage_04.png differ diff --git a/public/images/usage_05.png b/public/images/usage_05.png index 53597bf0..fcfbfc9c 100644 Binary files a/public/images/usage_05.png and b/public/images/usage_05.png differ diff --git a/public/images/usage_06.png b/public/images/usage_06.png index 27cbf892..08be56d4 100644 Binary files a/public/images/usage_06.png and b/public/images/usage_06.png differ diff --git a/public/images/usage_07.png b/public/images/usage_07.png index 269f7ad4..babb6c56 100644 Binary files a/public/images/usage_07.png and b/public/images/usage_07.png differ diff --git a/public/images/usage_08.png b/public/images/usage_08.png new file mode 100644 index 00000000..1eb5286f Binary files /dev/null and b/public/images/usage_08.png differ diff --git a/src/app/(withAuth)/usage/page.tsx b/src/app/(withAuth)/usage/page.tsx index 183bf11f..130ce287 100644 --- a/src/app/(withAuth)/usage/page.tsx +++ b/src/app/(withAuth)/usage/page.tsx @@ -18,7 +18,7 @@ const CoursesPage: NextPage = async () => { ステップ実行モード 」の2種類があり、すべての問題は一括実行モードから始まります。 - どちらのモードでも、解答者はタートル(亀)を操作して、プログラムの実行後の盤面を再現する必要があります。 + どちらのモードでも、解答者はタートル(亀)を操作して、プログラムの実行後の盤面を再現し、変数の値を入力する必要があります。 Usage Overview @@ -35,10 +35,15 @@ const CoursesPage: NextPage = async () => { Initial Setup - タートルの初期位置が決まったら、プログラムを読み進めながら、「前に進む」「後に戻る」「↰」「↱」などの操作ボタンを使ってタートルを動かし、軌跡を描きます。 + ③タートルの初期位置が決まったら、プログラムを読み進めながら、「前に進む」「後に戻る」「↰」「↱」などの操作ボタンを使ってタートルを動かし、軌跡を描きます。 Turtle Movement + + ④盤面の下に「変数名」「値」と書かれたフォームがある場合は、プログラムを実行した時の最終的な変数の値を入力してください。 + + Variable Input + 誤った操作をした場合は、以下の方法で修正できます。 ・誤った軌跡を描いた場合は、該当するマスを右クリックして白色に戻します。 @@ -49,16 +54,15 @@ const CoursesPage: NextPage = async () => { - プログラム終了後の状態まで軌跡を描き終えたら、下図のように「提出」ボタンをクリックして解答を確認しましょう。 + ⑤プログラム終了後の状態まで軌跡を描き終えたら、下図のように「提出」ボタンをクリックして解答を確認しましょう。 - How to Submit + How to Submit 正解の場合は、指示に従って問題一覧ページに戻り、次の問題に進みます。 -
不正解の場合は、やり直します。3回間違えるか、「諦めてステップ実行モードに移行する」ボタンをクリックすると、下図のように「ステップ実行モード」に移行します。
- Step Execution Mode + Step Execution Mode ■ステップ実行モードの解き方 @@ -66,25 +70,28 @@ const CoursesPage: NextPage = async () => { ステップ実行モードでは、一括実行モードとは異なり、プログラムをステップごとに(概ね1行ごとに)変数の値の変化とタートルの軌跡を確認します。 以下および下図の手順で、問題を解きます。 - - ① 出題されたプログラム上の、赤い枠で囲まれた行を確認します。 - ② 赤い枠で囲まれた行のプログラムを実行した後のタートルの位置や軌跡を盤面に描きます。 - - ③ - 1ステップ分のタートルの位置や軌跡を描くごとに「提出」ボタンを押してください。正解するまで次のステップに進めないので、修正と提出を繰り返します。 - - + + ① 出題されたプログラム上の、赤い枠で囲まれた行を確認します。 + + ② + 赤い枠で囲まれた行のプログラムを実行した後のタートルの位置や軌跡を盤面に描き、同じ行の変数の値をフォームに入力します。 + + + ③ + 1ステップ分の変数の値を入力したり、タートルの位置や軌跡を描いたりするごとに「提出」ボタンを押してください。正解するまで次のステップに進めないので、修正と提出を繰り返します。 + + - なお、タートルの動きがない行が選ばれることもあります。その場合は、盤面を変更せずに「提出」ボタンを押してください。 + なお、タートルや変数の動きがない行が選ばれることもあります。その場合は、盤面や値を変更せずに「提出」ボタンを押してください。 - How to Submit + How to Submit ステップ実行モードでは、ステップごとに変数の値とタートルの動きを遡って確認できます。 画面下部に直前の盤面と変数の一覧が表示されます。「1ステップ前を表示」や「1ステップ後を表示」ボタンを押すと、さらに前の盤面と変数の一覧を表示できます。 - How to See Trace + How to See Trace プログラムが終了するまで、ステップ実行モードの問題は続きます。最後まで解き終えたら問題一覧ページに戻り、次の問題に進みましょう。