CodeDrill
day_streak: --
← 問題一覧に戻る
JavaScript ・ DOM操作

問題5: チェックボックスで詳細の表示・非表示を切り替える

チェックボックス #showToggle をオン・オフすることで、段落 #detail の表示・非表示(display: block / display: none)を切り替えてください。

今回鍛える力

制約を伝える

身につく力

  • 初期表示状態を指定する
  • on/offの条件を示す
  • スタイル変更方法を伝える

AIへの頼み方のヒント

チェックがオンのときはdisplay:block、オフのときはdisplay:noneにすること、そしてページ読み込み時の初期状態も合わせて伝えましょう。

曖昧に頼むと初期状態を伝えないと、ページ読み込み時に#detailが表示されたままになり、チェックボックスの状態と矛盾することがあります。

あなたのコード

実行しました

プレビュー

AIレビュー(プロンプト練習)

コードはChatGPTやClaudeに出させたものを貼って構いません。
ここでの本番は「次にAIへ出す指示」です。評価軸は1つだけ見て、弱点・指示の穴・改善例を返します。
テストに落ちていてもレビューできます。落ちた理由と、指示に足りなかった情報を結びつけます。

先にコードを実行し、テストを1つ以上通してください。