JavaScriptによるHTMLコードでの質問と回答のテスト

このレッスンと次のいくつかのレッスンでは、質問と回答を含むテストの作成に取り組みます。最もシンプルなバージョンから始めて、徐々に複雑にしていきます。

まずは、各質問に対して可能な回答が一つしかない一連の質問を作成したいとします。回答は、質問の下にある入力欄にユーザーが入力します。

上記の内容をHTMLコードで示します：

<div id="test">
	<div>
		<p>質問1？</p>
		<input>
	</div>
	<div>
		<p>質問2？</p>
		<input>
	</div>
	<div>
		<p>質問3？</p>
		<input>
	</div>
</div>

ご覧の通り、質問と回答用の入力欄があります。次に、正解をどこに保存するかを考える必要があります。

最も簡単な方法は、回答を入力欄のHTMLコード内に、何らかのdata-属性として保存することです：

<div id="test">
	<div>
		<p>質問1？</p>
		<input data-right="答え1">
	</div>
	<div>
		<p>質問2？</p>
		<input data-right="答え2">
	</div>
	<div>
		<p>質問3？</p>
		<input data-right="答え3">
	</div>
</div>

次に考慮すべきニュアンスは、回答が正しいかどうかをいつ確認するかです。ここでは2つのオプションが考えられます：回答が入力されるたびにすぐにチェックするか、ボタンをクリックした時にすべての質問の回答をまとめてチェックするかです。

どちらのオプションを選んだ場合でも、回答が正しい場合は入力欄の枠を緑色に、間違っている場合は赤色に塗りつぶすようにしましょう。そのために、対応するCSSクラスを作成します：

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

入力欄への回答入力がEnterキーを押すことで完了するようにしてください。この場合、入力欄はすぐに回答が正しいかどうかをチェックするようにします。

ボタンを押したときに回答チェックが実行されるようにコードを修正してください。