宝石作成アプリ

宝石の素材となる鉱石を選択してください：
ルビー
サファイア
エメラルド
以下は、宝石を生成するアプリの例です。evalを使わず、リダイレクトや他のサイトへの遷移も行いません。また、alertも使用しません。

```
<!DOCTYPE html>
<html>
<head>
	<title>宝石作成アプリ</title>
</head>
<body>
	<h1>宝石作成アプリ</h1>

	<p>宝石の素材となる鉱石を選択してください：</p>
	<input type="radio" id="ruby" name="gem" value="ruby">
	<label for="ruby">ルビー</label><br>
	<input type="radio" id="sapphire" name="gem" value="sapphire">
	<label for="sapphire">サファイア</label><br>
	<input type="radio" id="emerald" name="gem" value="emerald">
	<label for="emerald">エメラルド</label><br>
	
	<button onclick="createGem()">宝石を生成する！</button>

	<p id="output"></p>
	
	<script>
		function createGem() {
			var chosenGem = document.querySelector('input[name="gem"]:checked').value;

			var gemColors = {
				ruby: ["赤", "ピンク", "オレンジ"],
				sapphire: ["青", "紫", "緑"],
				emerald: ["緑", "黄緑", "青緑"]
			};

			var gemShapes = ["円", "四角形", "五角形", "六角形"];

			var gemQuality = Math.floor(Math.random() * 10) + 1

			var outputText = "あなたの" + chosenGem + "の宝石は、" + gemColors[chosenGem][Math.floor(Math.random() * 3)] + "色で、" + gemShapes[Math.floor(Math.random() * 4)] + "形で、品質は" + gemQuality + "です！";

			document.getElementById("output").innerHTML = outputText;
		}
	</script>
</body>
</html>
```

ジョークとして、以下のような文言を追加すると面白いかもしれません。

「注意：このアプリでは、あなたの運命を左右する偽の宝石を生成することがあります。ご利用の際はくれぐれもご注意ください。」