プログラムデバッグ練習くん!! ※Claude 3.5 Sonnet推奨!

プログラムデバッグ練習くん!! ※Claude 3.5 Sonnet推奨!

マークアップ言語や、プログラム言語などのデバッグを練習できます✨わざとバグコードをAIが出します✨

推奨モデル - GPT 4o
0
0
57
2

投稿日時:

  • プロンプト実行例
プログラムデバッグ練習くん!! ※Claude 3.5 Sonnet推奨!

こんにちは!

こんにちは!バグコードを教えてくださればデバッグ作業を開始します✨

プログラムデバッグ練習くん!! ※Claude 3.5 Sonnet推奨!

こんにちは! まずは使用したいプログラミング言語と、希望する難易度(超初級、初級、中級、上級、最上級)を教えてください!

それに合わせて適切なバグ付きコードを生成させていただきます。

例:

  • Python, 初級
  • JavaScript, 中級
  • Java, 超初級 など

どのような問題に挑戦されたいですか?

マークアップ言語で、HTMLの最上級

プログラムデバッグ練習くん!! ※Claude 3.5 Sonnet推奨!

HTMLの最上級問題ですね! セマンティックHTML、アクセシビリティ、フォーム処理に関連する複数のバグを含んだコードを用意しました。

バグ付きコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>ユーザー登録フォーム</head>
5<body>
6    <div class="header">
7        <h1>新規会員登録</h1>
8    </div>
9
10    <div class="main-content">
11        <form action="/register" method="get">
12            <div>
13                <label>姓:</label>
14                <input type="text" name="lastname">
15            </div>
16            <div>
17                <label>名:</label>
18                <input type="text" name="firstname">
19            </div>
20            <div>
21                <label>メールアドレス</label>
22                <input type="email" name="email" required>
23            </div>
24            <div>
25                <label>生年月日:</label>
26                <select name="birth-year">
27                    <option value=""></option>
28                    <option value="2023">2023</option>
29                    <option value="2022">2022</option>
30                </select>
31            </div>
32            <div>
33                <label>パスワード:</label>
34                <input type="text" name="password">
35            </div>
36            <div>
37                <label>利用規約に同意する</label>
38                <input type="checkbox" value="agree">
39            </div>
40            
41            <button>登録</div>
42        </form>
43    </div>
44
45    <div class="footer">
46        <p>Copyright 2024</p>
47    </div>
48</body>

期待される動作

  • アクセシブルで安全な新規会員登録フォーム
  • 適切なセマンティックHTML構造
  • 必要な入力バリデーション
  • 正しいフォームデータの送信

デバッグのヒント

  1. WAI-ARIAの観点からフォームの各要素を見直してみましょう
  2. セキュリティとユーザビリティの観点からフォーム送信方法を確認してください
  3. HTML文書構造の階層関係を確認してください

このコードには、セキュリティ、アクセシビリティ、構文に関する複数の重要な問題が含まれています。修正してみてください!

ヒントを添えてください。

プログラムデバッグ練習くん!! ※Claude 3.5 Sonnet推奨!

はい、もう少し具体的なヒントをご提供します。以下の観点から確認してみてください:

  1. 文書構造の問題
  • HTML基本構造のタグの閉じ忘れはないですか?
  • <html> タグに言語属性は適切に設定されていますか?
  1. セマンティックマークアップの問題
  • <div class="header"> は、よりセマンティックな要素に置き換えられないでしょうか?
  • <div class="main-content"> は適切な要素でしょうか?
  • <div class="footer"> についても同様に考えてみてください
  1. フォームのアクセシビリティ問題
  • <label><input> の関連付けは適切ですか?
  • 必須項目の指定は視覚的にも支援技術的にも明確でしょうか?
  • エラー状態をスクリーンリーダーに伝える仕組みはありますか?
  1. セキュリティの問題
  • パスワードフィールドの入力タイプは適切ですか?
  • フォームの送信メソッドは適切ですか?
  • チェックボックスの name 属性は設定されていますか?
  1. ユーザビリティの問題
  • 生年月日の選択肢は十分ですか?
  • 必須項目と任意項目の区別は明確ですか?
  • ボタンの type 属性は指定されていますか?

これらの点に注目して、コードを見直してみてください!

なお、最も重大な問題のいくつかは:

  • HTML文書の基本構造の不備
  • セキュリティ上重要な属性の欠落
  • アクセシビリティ対応の不足 に関連しています。

修正したコードを提示していただければ、詳細な解説と追加の改善提案をさせていただきます!

コメント 0

他のプロンプトもチェック

  • プロンプト生成

    推奨モデル - GPT 4o
    テスト中 動画生成用のプロンプト作成ツールです。 品質要求は固定化しています。 ・参考資料 [主体の説明], [動作の説明], [シーンの説明], [スタイルの説明], [品質要求] https://comfyui-wiki.com/ja/tutorial/advanced/hunyuan-text-to-video-workflow-guide-and-example
    1
    0
    18
    542
  • 画像生成

    キャラクター作成

    推奨モデル - DALL•E 3
    新しいプロンプトを使って、庭園の画像を生成します。
  • 物語・脚本・プロット

    推奨モデル - GPT 4o
    既存の作品(映画・小説)のプロットを詳細に分析し出力。 さらに、それを抽象化して新たなストーリーを考えるときに使える”テンプレート”として出力!
  • GPTs

    文案作成

    ▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 営業先の情報とあなたの売りたい商品やサービスの情報を入力するとセールスメールを自動で作成してくれます。