แบบทดสอบพร้อมคำถามและคำตอบในโค้ด HTML โดยใช้ JavaScript

ในบทเรียนนี้และอีกหลายบทเรียนถัดไป เราจะมาสร้างแบบทดสอบพร้อมคำถามและคำตอบกัน โดยจะเริ่มจากรูปแบบที่ง่ายที่สุดก่อน แล้วค่อยๆ เพิ่มความซับซ้อนขึ้นเรื่อยๆ

เริ่มต้นสมมติว่าเราต้องการสร้างชุดคำถาม ซึ่งแต่ละคำถามมีได้เพียงคำตอบเดียว โดยผู้ใช้จะพิมพ์คำตอบลงในช่องป้อนข้อมูล (input) ที่อยู่ใต้คำถามแต่ละข้อ

มาดูตัวอย่างโค้ด 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>

รายละเอียดถัดไปที่ต้องคิดคือ: เราจะทำการตรวจสอบความถูกต้องของคำตอบเมื่อไรดี? ในที่นี้มีสองวิธีที่เสนอได้ คือ ให้แต่ละช่องป้อนข้อมูลตรวจสอบคำตอบทันทีที่ผู้ใช้ป้อนคำตอบลงไป หรือให้มีปุ่มกด เมื่อกดปุ่มนั้นจึงจะทำการตรวจสอบคำตอบของทุกคำถามพร้อมกัน

ไม่ว่าเราจะเลือกวิธีไหน ขอเสนอว่า ถ้าคำตอบถูกต้อง ให้เปลี่ยนขอบของช่องป้อนข้อมูลเป็นสีเขียว และถ้าผิด ให้เป็นสีแดง สร้างคลาส CSS ที่เกี่ยวข้องดังนี้:

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

เขียนโค้ดให้การป้อนคำตอบลงในช่อง input เสร็จสิ้นด้วยการกดปุ่ม Enter และเมื่อเกิดขึ้น ให้ช่องนั้นตรวจสอบความถูกต้องของคำตอบทันที

ปรับเปลี่ยนโค้ดของคุณ เพื่อให้การตรวจสอบคำตอบทำงานเมื่อผู้ใช้กดปุ่ม