顔画像感情クイズ

以下の画像の感情は何でしょうか？
以下が、JavaScriptを使用して実装された、顔画像感情クイズの例です。セキュリティを考慮し、evalを使用することは避け、alertを使用しないようにしました。

```html
<!DOCTYPE html>
<html>
<head>
	<title>顔画像感情クイズ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>顔画像感情クイズ</h1>
	<p>以下の画像の感情は何でしょうか？</p>

	<img id="face" alt="emotion face" src="https://i.imgur.com/4yqIihO.png">

	<form>
		<label><input type="radio" name="emotion" value="happy"> うれしい</label><br>
		<label><input type="radio" name="emotion" value="sad"> かなしい</label><br>
		<label><input type="radio" name="emotion" value="angry"> おこっている</label><br>
		<label><input type="radio" name="emotion" value="surprised"> びっくりした</label><br>
	</form>

	<button onclick="checkAnswer()">回答する</button>

	<script>
		// 顔画像と正解の感情を配列で保持する
		const faces = [
			{ image: "https://i.imgur.com/4yqIihO.png", emotion: "happy" },
			{ image: "https://i.imgur.com/M6mqZbC.png", emotion: "sad" },
			{ image: "https://i.imgur.com/pBw01VT.png", emotion: "angry" },
			{ image: "https://i.imgur.com/0dA3LX1.png", emotion: "surprised" }
		];

		// 画面の初期化
		let currentFaceIndex = 0;
		updateFace(currentFaceIndex);

		// 回答のチェック
		function checkAnswer() {
			const selectedEmotion = document.querySelector('input[name="emotion"]:checked').value;
			if (selectedEmotion === faces[currentFaceIndex].emotion) {
				alert("正解！");
			} else {
				alert("不正解！");
			}
			currentFaceIndex = (currentFaceIndex + 1) % faces.length; // 次の顔画像に進む
			updateFace(currentFaceIndex); // 画面を更新する
		}

		// 顔画像とラジオボタンを更新する
		function updateFace(index) {
			document.getElementById("face").src = faces[index].image;
			document.querySelector('input[name="emotion"]:checked').checked = false;
		}
	</script>
</body>
</html>
```

ジョークとしては、顔画像が「泣きそうな顔をしている」という回答があった場合、正解として「泣きそうな顔をしている」という選択肢を用意することができます。