<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EQ Mini-Game</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#game-container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 500px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
}
#scenario {
margin-bottom: 20px;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="game-container">
<h1>EQ Mini-Game</h1>
<div id="scenario"></div>
<div id="choices"></div>
<div id="result"></div>
</div>
<script>
const scenarios = [
{
situation: "Your friend seems upset but hasn't said anything. What do you do?",
choices: [
{ text: "Ignore it and continue as normal", score: 1 },
{ text: "Ask them if everything is okay", score: 3 },
{ text: "Try to cheer them up without addressing the issue", score: 2 }
]
},
{
situation: "A colleague takes credit for your work in a meeting. How do you respond?",
choices: [
{ text: "Confront them angrily in front of everyone", score: 1 },
{ text: "Speak to them privately after the meeting", score: 3 },
{ text: "Say nothing and let it slide", score: 2 }
]
},
{
situation: "You're feeling overwhelmed with work. What's your approach?",
choices: [
{ text: "Push through and work longer hours", score: 2 },
{ text: "Speak to your manager about prioritizing tasks", score: 3 },
{ text: "Ignore some tasks and hope no one notices", score: 1 }
]
}
];
let currentRound = 0;
let totalScore = 0;
function startGame() {
currentRound = 0;
totalScore = 0;
playRound();
}
function playRound() {
if (currentRound < 3) {
const scenario = scenarios[currentRound];
document.getElementById('scenario').textContent = scenario.situation;
const choicesElement = document.getElementById('choices');
choicesElement.innerHTML = '';
scenario.choices.forEach((choice, index) => {
const button = document.createElement('button');
button.textContent = choice.text;
button.onclick = () => makeChoice(choice.score);
choicesElement.appendChild(button);
});
} else {
endGame();
}
}
function makeChoice(score) {
totalScore += score;
currentRound++;
playRound();
}
function endGame() {
const avgScore = totalScore / 3;
let feedback;
if (avgScore > 2.5) {
feedback = "Great job! You show high emotional intelligence.";
} else if (avgScore > 1.5) {
feedback = "You have room for improvement in your emotional intelligence.";
} else {
feedback = "Consider working on your emotional intelligence skills.";
}
document.getElementById('scenario').textContent = "Game Over!";
document.getElementById('choices').innerHTML = '';
document.getElementById('result').innerHTML = `
Your average EQ score: ${avgScore.toFixed(2)}<br>
${feedback}<br>
<button onclick="startGame()">Play Again</button>
`;
}
startGame();
</script>
</body>
</html>