98%でお金がもらえる！
ただし、2%の確率で一生臭くなる可能性があります。
以下は、ボタンをクリックしたときに、ランダムに配布されるエントリーに基づく円グラフを作成するサンプルコードです。evalを使用せず、他のサイトに遷移させることなく、より安全な方法を使用しています。また、シンプルで分かりやすいレイアウトを採用し、ユーザーエクスペリエンスを重視しています。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お金 vs. 一生臭くなる</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
canvas {
margin-top: 25px;
}
#result {
margin-top: 50px;
}
</style>
</head>
<body>
<h1>98%でお金がもらえる！</h1>
<p>ただし、2%の確率で一生臭くなる可能性があります。</p>
<button onclick="showResult()">押すと分かる</button>
<canvas id="myChart" width="400" height="400"></canvas>
<div id="result"></div>
<script>
function showResult() {
const entries = [
{ label: 'お金', color: 'rgb(75, 192, 192)', value: 98 },
{ label: '一生臭くなる', color: 'rgb(255, 99, 132)', value: 2 }
];
const total = entries.reduce((sum, entry) => sum + entry.value, 0);
const probabilities = entries.map(entry => entry.value / total);
const result = getRandomEntry(entries, probabilities);
showPieChart(entries, probabilities, result.label);
displayResult(result.label);
}
function getRandomEntry(entries, probabilities) {
const randomValue = Math.random();
let probabilitySum = 0;
for (let i = 0; i < entries.length; i++) {
probabilitySum += probabilities[i];
if (randomValue <= probabilitySum) {
return entries[i];
}
}
}
function showPieChart(entries, probabilities, selectedLabel) {
const canvas = document.getElementById('myChart');
const context = canvas.getContext('2d');
const chartData = {
labels: entries.map(entry => entry.label),
datasets: [{
data: probabilities,
backgroundColor: entries.map(entry => entry.color)
}]
};
const options = {
legend: {
display: true,
position: 'bottom'
},
tooltips: {
enabled: false
}
};
const chart = new Chart(context, {
type: 'pie',
data: chartData,
options: options
});
const index = entries.findIndex(entry => entry.label === selectedLabel);
chart.data.datasets[0].backgroundColor[index] = 'rgb(255, 200, 200)';
chart.update();
}
function displayResult(resultLabel) {
const resultMessage = (resultLabel === 'お金') ? 'やった！お金がもらえた！' : 'あれ...？一生臭くなってしまった...';
const resultElement = document.getElementById('result');
resultElement.textContent = resultMessage;
}
</script>
</body>
</html>
```
ジョークとして、円グラフの色の濃さに反映される結果が、突然何かに変わるというオプションを追加することもできます。ただし、これはユーザーエクスペリエンスの観点からは好ましくありませんので、実装する場合には注意してください。