2023.12.28

トリビアウェブサイトの作成

marugotoyoten

cs50のYoutube動画「トリビアウェブサイトの作成」について要点と要約をまとめました

３つの要点

要点１
ユーザーの回答に基づいてフィードバックを提供する複数選択肢の質問と自由回答の質問を含むトリビアウェブサイトを作成します。
要点２
複数選択肢の質問では、不正解の回答はボタンを赤くし、不正確なメッセージを表示し、正解の回答はボタンを緑にし、正しいメッセージを表示します。
要点３
自由回答の質問では、不正解の回答はテキストフィールドを赤くし、不正確なメッセージを表示し、正解の回答はテキストフィールドを緑にし、正しいメッセージを表示します。

要約

トリビアウェブサイトの構築
この実習では、ユーザーにトリビアの質問をするウェブサイトを作成し、彼らの回答に基づいてフィードバックを提供する方法を案内します。完成した製品には、複数の選択肢の質問と自由回答の質問が含まれます。質問は自分で選ぶことができますが、作業の出発点として提供されます。

複数選択肢の質問の追加
まず、HTMLページに複数選択肢の質問を追加します。質問テキストにはh3見出しを使用します。各質問には少なくとも3つの選択肢が必要で、1つは正解です。その後、ユーザーの操作を処理するためのJavaScriptコードを書きます。不正解の回答がクリックされた場合、ボタンは赤くなり、回答が不正確であることを示すメッセージが表示されます。逆に、正解がクリックされた場合、ボタンは緑になり、回答が正しいことを示すメッセージが表示されます。

自由回答の質問の実装
実習の後半では、HTMLページに自由回答の質問を追加します。質問テキストにはh3見出しを使用します。ボタンの代わりに、ユーザーが回答を入力するための入力フィールドと回答を送信するためのボタンを使用します。複数選択肢の質問と同様に、JavaScriptコードを使用してフィードバックを提供します。ユーザーが不正解の回答を入力した場合、テキストフィールドは赤くなり、回答が不正確であることを示すメッセージが表示されます。正解が入力され、ボタンが押された場合、テキストフィールドは緑になり、回答が正しいことを示すメッセージが表示されます。

便利なJavaScriptのテクニック
実習全体で、2つのJavaScriptのテクニックが役立ちます。まず、document.querySelectorを使用すると、タグ名、ID、クラス、またはその他のCSSセレクタに基づいてページから要素を選択できます。これにより、ボタン、入力フィールド、段落などにアクセスして、スタイルやコンテンツを操作することができます。次に、addEventListener関数を使用すると、ウェブページ上のイベントに応答するコードを追加できます。ボタンにイベントリスナーを追加することで、ボタンのスタイルを変更したり、HTMLコンテンツを変更したり、ユーザーの操作に基づいて他のアクションを実行したりする関数を実行できます。

▼今回の動画