Lab8

この Lab では1~2人のクラスメートと協力することは問題ありませんが、そのグループのすべての受講生が等しく実習に貢献することが求められます。

ユーザが簡単な質問に答えられるWebページを作成します。

始め方

VS Codeを開きます。

$

wget https://cdn.cs50.net/2021/fall/labs/8/trivia.zip

その後にEnterを押すと、trivia.zipというZIPがあなたのCodespaceにダウンロードされます。wgetと次のURLの間にあるスペースや、その他の文字を見落とさないように注意してください。

次に

unzip trivia.zip

を実行して、triviaというフォルダを作成します。
ZIPファイルは不要になったため、

rm trivia.zip

を実行し、プロンプトで “y “に続いてEnterで応答すると、ダウンロードしたZIPファイルが削除されます。

次に

cd trivia

の後にEnterを押して、そのディレクトリに移動する（つまり、開く）。これでプロンプトは以下のようになります。

trivia/ $

すべて成功した場合は、次のように実行します。

ls

index.htmlファイルとstyles.cssファイルが表示されます。

問題が発生した場合は、同じ手順をもう一度実行して、どこが間違っていたかを判断できるかどうかを確認してください。

実装の詳細

HTML、CSS、およびJavaScriptを使用してWebページをデザインし、ユーザが簡単な質問に答えられるようにします。

• index.htmlで、 「Part 1」 の下に、HTMLで選択した複数選択式のトリビアの質問を追加します。
  • 質問のテキストにはh3ヘッダーを使用してください。
  • 選択可能な回答ごとに1つのボタンbuttonが必要です。少なくとも3つの選択肢があり、そのうちの1つが正確である必要があります。
• JavaScriptを使用して、ユーザがボタンをクリックしたときにボタンの色が変わるようにロジックを追加します。
  • ユーザが間違った回答のボタンをクリックすると、ボタンが赤に変わり、 質問の下に「Incorrect」 というテキストが表示されます。
  • ユーザが正解のボタンをクリックすると、ボタンが緑色に変わり、質問の下に「Correct!」というテキストが表示されます。
• index.htmlで、 「Part 2」 の下に、HTML形式のテキストベースの自由回答の質問を追加します。
  • 質問のテキストにはh3ヘッダーを使用してください。
  • 入力フィールドを使用して、ユーザが応答を入力できるようにする必要があります。
  • ユーザが回答を確認できるボタンbuttonを使用する必要があります。
• JavaScriptを使用して、ユーザが回答を確認したときにテキストフィールドの色が変わるようにロジックを追加します。
  • ユーザが間違った回答を入力して確認ボタンを押すと、入力フィールドが赤に変わり、質問の下に「Incorrect」 というテキストが表示されます。
  • ユーザが正解を入力して確認ボタンを押すと、入力フィールドが緑色に変わり、質問の下に「Correct!」というテキストが表示されます。

必要に応じて、次の操作も実行できます。

• styles.cssを編集して、WebページのCSSを変更します。
• 必要に応じて、トリビアの質問を追加してください。

ウォークスルー

このビデオは、コースがまだコードを書くためにCS50 IDEを使用していたときに記録されたものです。インターフェイスはあなたのCodespaceと異なるように見えますが、2つの環境の動作はほぼ同じであるはずです

ヒント

• 単一のHTML要素を取得するには、document.querySelectorを使用します。
• クエリに一致する複数のHTML要素を取得するには、document.querySelectorAllを使用します。この関数は、一致するすべての要素の配列を返します。

解決方法がわかりませんか？

テスト

この実習では、質問によって実装方法が異なるため、check50は不要です。ただし、Webページが適切に応答するように、質問ごとに正しくない応答と正しい応答の両方をテストしてください。

lab8ディレクトリにあるターミナルでhttp-serverを実行し、Webページを提供するWebサーバを起動します。

提出方法

ターミナルで、以下のコマンドを実行して提出してください。

submit50 cs50/labs/2022/x/trivia