🎃 Spooky Challenge - Day 9 🎃
The Spirits' Cipher
As the clock nears the witching hour, the spirits present a final test. The numbers you've gathered are scattered among impostors in a spectral cipher. Can you decipher the true sequence amidst the distractions?
The spirits sing:
"Among the ghosts and shadow's glee,
Numbers hidden, you must see.
Pick them out, with careful glance,
To reveal the spectral dance."
Your tasks:
🔗 Platform Suggestion: Use CodePen to decrypt the spirits' cipher with JavaScript, HTML, and CSS.
The Spirits' Cipher
As the clock nears the witching hour, the spirits present a final test. The numbers you've gathered are scattered among impostors in a spectral cipher. Can you decipher the true sequence amidst the distractions?
The spirits sing:
"Among the ghosts and shadow's glee,
Numbers hidden, you must see.
Pick them out, with careful glance,
To reveal the spectral dance."
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Spirits' Cipher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="cipher-grid" onclick="selectNumber(event)">
<!-- Numbers will be dynamically added here by JavaScript -->
</div>
<div class="deciphered-code"></div>
</body>
</html>
CSS:
body {
font-family: 'Arial', sans-serif;
background: url('https://png.pngtree.com/thumb_back/fh260/background/20230617/pngtree-halloween-wallpapers-and-backgrounds-for-laptop-or-desktop-image_2968567.jpg') no-repeat center center fixed;
background-size: cover;
color: red;
text-align: center;
padding-top: 50px;
overflow: hidden;
}
.cipher-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
cursor: pointer;
width: 90%;
margin: 0 auto;
}
.deciphered-code {
margin-top: 30px;
font-size: 3em;
user-select: none;
}
JavaScript:
let trueNumbers = ["2", "8", "1", "0", "2", "0", "1", "8"];
let allNumbers = trueNumbers.concat(["3", "4", "5", "6", "7", "9", "3", "4", "5", "6", "7", "9"]);
allNumbers.sort(() => Math.random() - 0.5);
allNumbers.forEach(num => {
let numberElement = document.createElement('div');
numberElement.classList.add('cipher-number');
numberElement.textContent = num;
document.querySelector('.cipher-grid').appendChild(numberElement);
});
function selectNumber(event) {
let selectedNumber = event.target.textContent;
if (trueNumbers.includes(selectedNumber)) {
document.querySelector('.deciphered-code').textContent += selectedNumber;
trueNumbers = trueNumbers.filter(num => num !== selectedNumber);
} else {
document.querySelector('.deciphered-code').textContent = '';
trueNumbers = ["2", "8", "1", "0", "2", "0", "1", "8"];
}
}Your tasks:
- Select the correct sequence of numbers from the grid. Picking an incorrect number will reset your progress.
- Decipher the spirits' code and complete your journey.
🔗 Platform Suggestion: Use CodePen to decrypt the spirits' cipher with JavaScript, HTML, and CSS.
Incredible! With a discerning eye, you've picked out the true sequence "28102018" from amidst the spectral distractions.
The spirits, impressed by your unwavering focus and determination, grant you the complete code. Brace yourself for tomorrow, when the vault's secrets will be yours to uncover. The climax of your journey in the Web Manor is near.
The spirits, impressed by your unwavering focus and determination, grant you the complete code. Brace yourself for tomorrow, when the vault's secrets will be yours to uncover. The climax of your journey in the Web Manor is near.
Last edited:
