<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optomdle - Case 1</title>
<style>
body { font-family: 'Courier New', Courier, monospace; background: #f4f4f4; text-align: center; padding: 20px; }
.container { max-width: 500px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.case-header { background: #333; color: white; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
.hint-box { background: #ddd; margin: 10px 0; padding: 15px; border-radius: 5px; min-height: 20px; color: transparent; transition: all 0.5s; border: 1px solid #ccc; }
.hint-box.revealed { color: #333; background: #e8f4fd; }
input { width: 80%; padding: 10px; margin-top: 20px; font-size: 16px; }
#message { margin-top: 15px; font-weight: bold; color: #d9534f; }
</style>
</head>
<body>
<div class="container">
<h1>OPTOMDLE</h1>
<div class="case-header">
<strong>Patient:</strong> 9yo BF <br>
<strong>CC:</strong> "Headaches and blurry vision after school/homework."
</div>
<div id="hint1" class="hint-box">1. Distance/Near VA: 20/20 OU</div>
<div id="hint2" class="hint-box">2. NRA: +3.50 / PRA: -0.50</div>
<div id="hint3" class="hint-box">3. Dry Ret: +0.50 DS (fluctuating)</div>
<div id="hint4" class="hint-box">4. Near Cover Test: Esophoria</div>
<div id="hint5" class="hint-box">5. Wet Ret: +4.50 DS OU</div>
<input type="text" id="guessInput" placeholder="Type your diagnosis..." list="diagnosis-list">
<datalist id="diagnosis-list">
<option value="Latent Hyperopia">
<option value="Accommodative Excess">
<option value="Accommodative Insufficiency">
<option value="Convergence Excess">
<option value="Pseudomyopia">
</datalist>
<button onclick="checkGuess()" style="padding: 10px 20px; cursor: pointer;">Submit</button>
<div id="message"></div>
</div>
<script>
let attempts = 0;
const answer = "latent hyperopia";
function checkGuess() {
const guess = document.getElementById('guessInput').value.toLowerCase().trim();
const msg = document.getElementById('message');
if (guess === answer) {
msg.style.color = "green";
msg.innerText = "Correct! It's Latent Hyperopia.";
revealAll();
} else {
attempts++;
if (attempts <= 5) {
document.getElementById('hint' + attempts).classList.add('revealed');
msg.innerText = "Incorrect. A new hint has been revealed.";
} else {
msg.innerText = "Out of guesses! The diagnosis was Latent Hyperopia.";
}
}
document.getElementById('guessInput').value = "";
}
function revealAll() {
for(let i=1; i<=5; i++) {
document.getElementById('hint' + i).classList.add('revealed');
}
}
</script>
</body>
</html>