3歳児向け英語学習アプリ

※このアプリはジョークアプリです。実際の英語学習には使わないでください。
以下が実際のプログラムになります。セキュリティ脆弱性がある箇所は含まれていません。

<!DOCTYPE html>
<html>
<head>
	<title>3歳児向け英語学習アプリ</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: Arial, sans-serif;
		}
		button {
			padding: 10px;
			margin: 5px;
			border: none;
			background-color: #4CAF50;
			color: white;
			font-size: 16px;
			cursor: pointer;
		}
		button:hover {
			background-color: #3e8e41;
		}
		img {
			max-width: 100%;
			height: auto;
			display: none;
		}
	</style>
</head>
<body>
	<h1>3歳児向け英語学習アプリ</h1>
	<button id="playBtn">再生</button>
	<button id="pauseBtn">一時停止</button>
	<div id="wordImage"></div>
	<audio id="wordAudio"></audio>
	<script>
		// 単語とイラストのリストを定義する
		const words = [
			{word: "apple", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "banana", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "cat", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "dog", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "elephant", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "fish", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "grape", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "horse", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "ice cream", image: "https://i.imgur.com/WmZXuPS.png"},
			{word: "juice", image: "https://i.imgur.com/WmZXuPS.png"}
		];
		
		// 再生ボタンをクリックしたら実行される関数
		function play() {
			// イラストと単語をランダムに選ぶ
			const randomIdx = Math.floor(Math.random() * words.length);
			const word = words[randomIdx].word;
			const imageSrc = words[randomIdx].image;
			const isEnglish = Math.random() < 0.2;
			
			// イラストを表示する
			const wordImage = document.getElementById("wordImage");
			const img = wordImage.querySelector("img");
			img.src = imageSrc;
			img.alt = word;
			img.style.display = "block";
			
			// 単語を読み上げる
			const wordAudio = document.getElementById("wordAudio");
			if(isEnglish) {
				wordAudio.src = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=en&q=${encodeURIComponent(word)}`;
			} else {
				wordAudio.src = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=ja&q=${encodeURIComponent(word)}`;
			}
			wordAudio.play();
		}
		
		// 一時停止ボタンをクリックしたら実行される関数
		function pause() {
			const wordImage = document.getElementById("wordImage");
			const img = wordImage.querySelector("img");
			img.style.display = "none";
			
			const wordAudio = document.getElementById("wordAudio");
			wordAudio.pause();
		}
		
		// 再生ボタンと一時停止ボタンにイベントリスナーを追加する
		document.getElementById("playBtn").addEventListener("click", play);
		document.getElementById("pauseBtn").addEventListener("click", pause);
	</script>
	<p>※このアプリはジョークアプリです。実際の英語学習には使わないでください。</p>
</body>
</html>