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種類があり、すべての問題は一括実行モードから始まります。
- どちらのモードでも、解答者はタートル(亀)を操作して、プログラムの実行後の盤面を再現する必要があります。
+ どちらのモードでも、解答者はタートル(亀)を操作して、プログラムの実行後の盤面を再現し、変数の値を入力する必要があります。
@@ -35,10 +35,15 @@ const CoursesPage: NextPage = async () => {
- タートルの初期位置が決まったら、プログラムを読み進めながら、「前に進む」「後に戻る」「↰」「↱」などの操作ボタンを使ってタートルを動かし、軌跡を描きます。
+ ③タートルの初期位置が決まったら、プログラムを読み進めながら、「前に進む」「後に戻る」「↰」「↱」などの操作ボタンを使ってタートルを動かし、軌跡を描きます。
+
+ ④盤面の下に「変数名」「値」と書かれたフォームがある場合は、プログラムを実行した時の最終的な変数の値を入力してください。
+
+
+
誤った操作をした場合は、以下の方法で修正できます。
・誤った軌跡を描いた場合は、該当するマスを右クリックして白色に戻します。
@@ -49,16 +54,15 @@ const CoursesPage: NextPage = async () => {
- プログラム終了後の状態まで軌跡を描き終えたら、下図のように「提出」ボタンをクリックして解答を確認しましょう。
+ ⑤プログラム終了後の状態まで軌跡を描き終えたら、下図のように「提出」ボタンをクリックして解答を確認しましょう。
-
+
正解の場合は、指示に従って問題一覧ページに戻り、次の問題に進みます。
-
不正解の場合は、やり直します。3回間違えるか、「諦めてステップ実行モードに移行する」ボタンをクリックすると、下図のように「ステップ実行モード」に移行します。
-
+
■ステップ実行モードの解き方
@@ -66,25 +70,28 @@ const CoursesPage: NextPage = async () => {
ステップ実行モードでは、一括実行モードとは異なり、プログラムをステップごとに(概ね1行ごとに)変数の値の変化とタートルの軌跡を確認します。
以下および下図の手順で、問題を解きます。
-
- ① 出題されたプログラム上の、赤い枠で囲まれた行を確認します。
- ② 赤い枠で囲まれた行のプログラムを実行した後のタートルの位置や軌跡を盤面に描きます。
-
- ③
- 1ステップ分のタートルの位置や軌跡を描くごとに「提出」ボタンを押してください。正解するまで次のステップに進めないので、修正と提出を繰り返します。
-
-
+
+ ① 出題されたプログラム上の、赤い枠で囲まれた行を確認します。
+
+ ②
+ 赤い枠で囲まれた行のプログラムを実行した後のタートルの位置や軌跡を盤面に描き、同じ行の変数の値をフォームに入力します。
+
+
+ ③
+ 1ステップ分の変数の値を入力したり、タートルの位置や軌跡を描いたりするごとに「提出」ボタンを押してください。正解するまで次のステップに進めないので、修正と提出を繰り返します。
+
+
- なお、タートルの動きがない行が選ばれることもあります。その場合は、盤面を変更せずに「提出」ボタンを押してください。
+ なお、タートルや変数の動きがない行が選ばれることもあります。その場合は、盤面や値を変更せずに「提出」ボタンを押してください。
-
+
ステップ実行モードでは、ステップごとに変数の値とタートルの動きを遡って確認できます。
画面下部に直前の盤面と変数の一覧が表示されます。「1ステップ前を表示」や「1ステップ後を表示」ボタンを押すと、さらに前の盤面と変数の一覧を表示できます。
-
+
プログラムが終了するまで、ステップ実行モードの問題は続きます。最後まで解き終えたら問題一覧ページに戻り、次の問題に進みましょう。