🎈 今日は晴れていて、とても楽しい一日です！
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Emotional Explorer 🎉</title>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.animate-pop {
animation: pop 0.3s ease;
}
.animate-shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div id="app" style="width: 100%; height: 100%; max-width: 400px; max-height: 400px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; background-color: #f0f8ff;">
<div id="situation" style="text-align: center; margin-bottom: 20px; font-size: 1.2em;">
🎈 今日は晴れていて、とても楽しい一日です！
</div>
<div id="emotions" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;">
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #ffebcd; cursor: pointer;">
😀 幸福
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #add8e6; cursor: pointer;">
😢 悲しみ
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #f08080; cursor: pointer;">
😠 怒り
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #ffdab9; cursor: pointer;">
😲 驚き
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #e6e6fa; cursor: pointer;">
😨 恐怖
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #fafad2; cursor: pointer;">
😰 不安
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #98fb98; cursor: pointer;">
🤩 興奮
</button>
<button class="emotion-btn" style="padding: 10px; font-size: 1em; border: none; border-radius: 8px; background-color: #dda0dd; cursor: pointer;">
😕 戸惑い
</button>
</div>
<div id="next-btn-container" style="margin-top: 20px; display: none;">
<button id="next-btn" style="padding: 10px 20px; font-size: 1em; border: none; border-radius: 8px; background-color: #87cefa; cursor: pointer;">
次へ ➡️
</button>
</div>
</div>
<script>
const situations = [
{
text: "🌧️ 雨の日に家にこもっています。",
emotions: ["😰 不安", "😕 戸惑い"]
},
{
text: "🎉 サプライズパーティーで友達とお祝いしています！",
emotions: ["😀 幸福", "🤩 興奮"]
},
{
text: "🚗 交通渋滞でイライラしています。",
emotions: ["😠 怒り", "😰 不安"]
},
{
text: "🐶 子犬が走り回っています。",
emotions: ["😍 喜び", "🤩 興奮"]
},
{
text: "🏞️ 美しい夕日を見ています。",
emotions: ["😀 幸福", "😲 驚き"]
}
];
let current = 0;
let userSelections = [];
const app = document.getElementById('app');
const situationDiv = document.getElementById('situation');
const emotionsDiv = document.getElementById('emotions');
const nextBtnContainer = document.getElementById('next-btn-container');
const nextBtn = document.getElementById('next-btn');
function loadSituation() {
if (current < situations.length) {
const situation = situations[current];
situationDiv.innerHTML = situation.text;
emotionsDiv.innerHTML = '';
situation.emotions.forEach(emotion => {
const btn = document.createElement('button');
btn.textContent = emotion;
btn.style.padding = '10px';
btn.style.fontSize = '1em';
btn.style.border = 'none';
btn.style.borderRadius = '8px';
btn.style.cursor = 'pointer';
btn.style.backgroundColor = getBackgroundColor(emotion);
btn.addEventListener('click', () => selectEmotion(btn, emotion));
emotionsDiv.appendChild(btn);
});
nextBtnContainer.style.display = 'none';
} else {
showResults();
}
}
function getBackgroundColor(emotion) {
switch(emotion.split(' ')[0]) {
case "😀":
case "😍":
return "#ffebcd";
case "😢":
case "😭":
return "#add8e6";
case "😠":
case "🤬":
return "#f08080";
case "😲":
case "😳":
return "#ffdab9";
case "😨":
case "😱":
return "#e6e6fa";
case "😰":
case "😓":
return "#fafad2";
case "🤩":
case "🥳":
return "#98fb98";
case "😕":
case "😟":
return "#dda0dd";
default:
return "#ffffff";
}
}
function selectEmotion(button, emotion) {
button.classList.add('animate-pop');
setTimeout(() => button.classList.remove('animate-pop'), 300);
if (!userSelections[current]) {
userSelections[current] = [];
}
if (!userSelections[current].includes(emotion)) {
userSelections[current].push(emotion);
button.style.backgroundColor = "#ffa07a";
} else {
userSelections[current].splice(userSelections[current].indexOf(emotion), 1);
button.style.backgroundColor = getBackgroundColor(emotion);
}
if (userSelections[current].length > 0) {
nextBtnContainer.style.display = 'block';
} else {
nextBtnContainer.style.display = 'none';
}
}
nextBtn.addEventListener('click', () => {
current++;
loadSituation();
});
function showResults() {
app.innerHTML = '';
const title = document.createElement('div');
title.innerHTML = "🎊 結果 🎊";
title.style.fontSize = '1.5em';
title.style.marginBottom = '20px';
app.appendChild(title);
situations.forEach((situation, index) => {
const resultDiv = document.createElement('div');
resultDiv.style.marginBottom = '15px';
resultDiv.style.padding = '10px';
resultDiv.style.border = '2px solid #87cefa';
resultDiv.style.borderRadius = '8px';
resultDiv.style.backgroundColor = '#fffafa';
resultDiv.innerHTML = `
<div style="font-size: 1em; margin-bottom: 5px;">${situation.text}</div>
<div style="font-size: 0.9em;">
選択: ${userSelections[index] ? userSelections[index].join(', ') : 'なし'}<br>
正解: ${situation.emotions.join(', ')}
</div>
`;
app.appendChild(resultDiv);
});
const advice = document.createElement('div');
advice.innerHTML = "🎓 感情認識力を高めるためのアドバイス 🎓";
advice.style.fontSize = '1.2em';
advice.style.marginTop = '20px';
advice.style.textAlign = 'center';
app.appendChild(advice);
}
loadSituation();
</script>
</body>
</html>
```