プログラムデバッグ練習くん！！ ※Claude 3.5 Sonnet推奨！
マークアップ言語や、プログラム言語などのデバッグを練習できます✨わざとバグコードをAIが出します✨
推奨モデル - GPT 4o
0
0
74
2
投稿日時：
- プロンプト実行例
こんにちは！
こんにちは！バグコードを教えてくださればデバッグ作業を開始します✨
こんにちは！ まずは使用したいプログラミング言語と、希望する難易度（超初級、初級、中級、上級、最上級）を教えてください！
それに合わせて適切なバグ付きコードを生成させていただきます。
例：
- Python, 初級
- JavaScript, 中級
- Java, 超初級 など
どのような問題に挑戦されたいですか？
マークアップ言語で、HTMLの最上級
HTMLの最上級問題ですね！ セマンティックHTML、アクセシビリティ、フォーム処理に関連する複数のバグを含んだコードを用意しました。
バグ付きコード
html1<!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構造
- 必要な入力バリデーション
- 正しいフォームデータの送信
デバッグのヒント
- WAI-ARIAの観点からフォームの各要素を見直してみましょう
- セキュリティとユーザビリティの観点からフォーム送信方法を確認してください
- HTML文書構造の階層関係を確認してください
このコードには、セキュリティ、アクセシビリティ、構文に関する複数の重要な問題が含まれています。修正してみてください！
ヒントを添えてください。
はい、もう少し具体的なヒントをご提供します。以下の観点から確認してみてください：
- 文書構造の問題
- HTML基本構造のタグの閉じ忘れはないですか？
- <html> タグに言語属性は適切に設定されていますか？
- セマンティックマークアップの問題
- <div class="header"> は、よりセマンティックな要素に置き換えられないでしょうか？
- <div class="main-content"> は適切な要素でしょうか？
- <div class="footer"> についても同様に考えてみてください
- フォームのアクセシビリティ問題
- <label> と <input> の関連付けは適切ですか？
- 必須項目の指定は視覚的にも支援技術的にも明確でしょうか？
- エラー状態をスクリーンリーダーに伝える仕組みはありますか？
- セキュリティの問題
- パスワードフィールドの入力タイプは適切ですか？
- フォームの送信メソッドは適切ですか？
- チェックボックスの name 属性は設定されていますか？
- ユーザビリティの問題
- 生年月日の選択肢は十分ですか？
- 必須項目と任意項目の区別は明確ですか？
- ボタンの type 属性は指定されていますか？
これらの点に注目して、コードを見直してみてください！
なお、最も重大な問題のいくつかは：
- HTML文書の基本構造の不備
- セキュリティ上重要な属性の欠落
- アクセシビリティ対応の不足 に関連しています。
修正したコードを提示していただければ、詳細な解説と追加の改善提案をさせていただきます！
コメント 0
他のプロンプトもチェック
GPTs
物語・脚本・プロット
◆概要 「スーパーラッキー占い」は、ユニークでシュールなAI占いです。この占いは、伝統的な占い要素に加えて、シュールでユーモラスなラッキー要素や特別なメッセージをお届けします。当たるかどうかはあなた次第。ちょっと偏ることもありますが、そこは御愛嬌で遊んでください。随時修正しています。 ◆使い方 ・占いのリクエスト: 「占って」とリクエストしてください。パラレルワールドも含めて1億人以上いる占い師の中からランダムに一人が選ばれて、占いをします。占い師を選ぶ際は外部サーバー接続の許可をお願いします。占いのメッセージとラッキー要素が表示され、特別なギフトが表示されます。 ・メッセージの受信: 今のあなたに必要なメッセージを受け取ることができます。心の中で「今の私に必要なメッセージを与え給え」というように意図して、「メッセージ」をリクエストしてください。どのようなメッセージが届くかは、その時のお楽しみです。 ・占い結果の表示: 少々長くなりますが、占い結果とラッキー要素が表示されます。どのような結果が出るかはお楽しみ。日本の占いの型破りをしてみました。日常の参考にしてみてください。 ◆ポイント ・娘とごはん屋さんで、こんな占いあったら面白いかも、と話していて生まれました。斬新でありつつ、シュールであり、日本の占いの型破り的なAI占いです。 ・多様な表現スタイル: 占い結果はさまざまなスタイルで表示されます。どのスタイルで表示されるかはその時のお楽しみです。 ・今に必要なメッセージ: 単なる運勢だけでなく、今のあなたに必要なメッセージも受け取ることができます。毎日の生活に役立つヒントが得られるかもしれません。 ・シュールでユーモアあふれるラッキー要素: ラッキー要素はシュールでユーモアに満ちており、思わずクスッと笑ってしまうこと間違いなし。当たるかどうかはあなた次第！ ・使いやすさ: 複雑な操作は不要で、簡単なリクエストで占いを楽しむことができます。 ・最後にはギフトが表示されますが、作られない場合もありますので、その際はギフトをリクエストしてください。 #スーパーラッキー占い #占い #ラッキーアイテム #シュール #今に必要なメッセージ #ユーモア #カスタムGPT #AI占い #メッセージ10342400画像生成
資料作成
推奨モデル - DALL•E 3プロの漫画家が描いたような、かわいらしく洗練されたカラフルなロゴマークを、キーワード（テーマ）入力だけで簡単に生成。アイコン素材など多彩な用途に使えます。（よりスタイリッシュな感じにするには、この文末をご覧ください↓） プレゼン資料、SNSアイコン、ブランドロゴ、店舗デザイン、WEB素材などなど、どんなシーンでも使えるおすすめのカラフルロゴマークです。ユニークでプロフェッショナルなデザインを素早く手に入れ、ブランドやプロジェクトを格上げしましょう！ ★★★よりかっこいい感じのロゴマークはこちら↓★★★ https://oshiete.ai/items/161257303489573888 シンプルで、かなりスタイリッシュです！3127297GPTs
キャラクター作成
花押クリエイターは、日本の伝統的な署名や印「花押」のデザインをサポートするためのツールです。国内外のさまざまな文化背景を考慮し、名前やシンボルを基にした個性的で芸術的な花押デザインを提案します。 このツールは、歴史的な作法や文化的背景を尊重しながら、現代的なアプローチにも対応します。作成した花押のコンセプトや意図を分かりやすく説明し、カスタマイズや調整も簡単に行うことが出来ます。 初めての方から花押愛好家まで、どなたでもご利用いただける「花押クリエイター」で、あなただけの特別なデザインを作りませんか？ GPTsストアで高評価していただけると嬉しいです。 #画像作成 #花押 #サイン722.70K6.14K画像生成
キャラクター作成
推奨モデル - DALL•E 3DALLE3の美しい写真風画像生成でキス写真を生成します。男女のカップルはもちろん、女性同士や男性同士も可能です。 #DALLE3 #AIPhoto1302610.6K
