Untitled
unknown
plain_text
16 days ago
8.4 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plate & Prevail Decode!</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fffaf5;
color: #333333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.game-container {
background-color: #ffffff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(255, 136, 0, 0.15);
max-width: 600px;
width: 100%;
border: 2px solid #ffe6cc;
}
h2 {
color: #ff6a00;
margin-top: 0;
text-align: center;
font-size: 28px;
text-transform: uppercase;
letter-spacing: 1px;
}
.directions {
background-color: #fff9e6;
padding: 15px;
border-left: 5px solid #ffcc00;
border-radius: 4px;
font-size: 14px;
line-height: 1.6;
margin-bottom: 25px;
color: #555555;
}
.plate-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
}
.plate-item {
display: flex;
align-items: center;
background-color: #fff5eb;
padding: 12px;
border-radius: 8px;
border: 1px solid #ffe0b3;
}
.plate-number {
font-size: 16px;
font-weight: bold;
color: #ff8800;
width: 35px;
}
.license-plate {
background-color: #ffffff;
color: #111111;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: 26px;
padding: 10px 20px;
border-radius: 6px;
border: 3px solid #ffaa00;
box-shadow: 3px 3px 0px #ff6a00;
letter-spacing: 2px;
display: inline-block;
min-width: 220px;
text-align: center;
position: relative;
}
.license-plate::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background-color: #ff6a00;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.input-section {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
input[type="text"] {
padding: 14px;
font-size: 16px;
border-radius: 8px;
border: 2px solid #ffcc00;
background-color: #ffffff;
color: #333333;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
input[type="text"]:focus {
border-color: #ff6a00;
outline: none;
box-shadow: 0 0 8px rgba(255, 106, 0, 0.2);
}
button {
padding: 14px;
font-size: 16px;
font-weight: bold;
background-color: #ff6a00;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 0px #cc5500;
}
button:hover {
background-color: #ff7c1a;
transform: translateY(-1px);
}
button:active {
transform: translateY(3px);
box-shadow: 0 1px 0px #cc5500;
}
.result-message {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-weight: bold;
text-align: center;
display: none;
font-size: 15px;
}
.success {
background-color: #e6f4ea;
color: #137333;
border: 1px solid #c2e7cb;
}
.error {
background-color: #fce8e6;
color: #c5221f;
border: 1px solid #fad2cf;
}
.toggle-key-btn {
background-color: #ffcc00;
color: #333333;
font-size: 13px;
padding: 8px 16px;
margin-bottom: 15px;
border-radius: 6px;
box-shadow: 0 2px 0px #ccaa00;
}
.toggle-key-btn:hover {
background-color: #ffd633;
}
.alphabet-key {
display: none;
background-color: #fffdf5;
padding: 12px;
border-radius: 8px;
font-size: 13px;
color: #666666;
text-align: center;
margin-bottom: 20px;
line-height: 1.6;
border: 1px dashed #ffcc00;
}
</style>
</head>
<body>
<div class="game-container">
<h2>Plate & Prevail Decode!</h2>
<div class="directions">
<strong>Directions:</strong> Analyze each set of license plate numbers. Find the missing letter by adding all the visible numbers together, then dividing the total by 2. The result matches the alphabet position (A=1, B=2, C=3...). Finally, unscramble all 5 solved letters to reveal our lesson's secret keyword!
</div>
<div style="text-align: center;">
<button class="toggle-key-btn" onclick="toggleKey()">Show / Hide Alphabet Key</button>
</div>
<div id="alphabetKey" class="alphabet-key">
A=1; B=2; C=3; D=4; E=5; F=6; G=7; H=8; I=9; J=10; K=11; L=12; M=13;<br>
N=14; O=15; P=16; Q=17; R=18; S=19; T=20; U=21; V=22; W=23; X=24; Y=25; Z=26
</div>
<div class="plate-list">
<div class="plate-item">
<span class="plate-number">1.</span>
<div class="license-plate">_BD 554</div>
</div>
<div class="plate-item">
<span class="plate-number">2.</span>
<div class="license-plate">K_A 99888</div>
</div>
<div class="plate-item">
<span class="plate-number">3.</span>
<div class="license-plate">_BC 442</div>
</div>
<div class="plate-item">
<span class="plate-number">4.</span>
<div class="license-plate">HI_ 99992</div>
</div>
<div class="plate-item">
<span class="plate-number">5.</span>
<div class="license-plate">_TB 88886</div>
</div>
</div>
<div class="input-section">
<input type="text" id="keywordInput" placeholder="Type the unscrambled secret keyword here...">
<button onclick="checkAnswer()">Unlock Lesson</button>
</div>
<div id="resultBox" class="result-message"></div>
</div>
<script>
function toggleKey() {
var key = document.getElementById("alphabetKey");
if (key.style.display === "none" || key.style.display === "") {
key.style.display = "block";
} else {
key.style.display = "none";
}
}
function checkAnswer() {
var input = document.getElementById("keywordInput").value.trim().toUpperCase();
var resultBox = document.getElementById("resultBox");
if (input === "GUESS") {
resultBox.className = "result-message success";
resultBox.innerHTML = "🎉 Excellent job! You successfully decoded the pattern and revealed the keyword: GUESS.";
resultBox.style.display = "block";
} else {
resultBox.className = "result-message error";
resultBox.innerHTML = "❌ Incorrect keyword. Double-check your addition and division formulas, unscramble the letters, and try again!";
resultBox.style.display = "block";
}
}
</script>
</body>
</html>
Editor is loading...
Leave a Comment