“Hello, my name is Charlie Dunbeyer, and if you are reading this, my worst fears have come true. I’m dead and without your help, my murder will be swept away and forgotten. I need you to help me retrace my steps, collect clues, and discover the true dastardly perpetrator(s) of my untimely demise. Please, Detective, you are my only hope.”

/* — CSS Styles for the Clue Quiz — */ .clue-quiz-box { background-color: #f5f5dc; /* Beige/Clue Background */ border: 3px solid #6b4d3c; /* Dark Brown/Wood Frame */ padding: 30px; border-radius: 10px; text-align: center; max-width: 650px; margin: 20px auto; font-family: ‘Georgia’, serif; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .clue-quiz-box h3 { color: #6b4d3c; margin-top: 0; font-size: 1.6em; font-weight: bold; margin-bottom: 20px; } .clue-quiz-box .clue-text { font-size: 1.2em; font-weight: bold; color: #333; min-height: 50px; margin-bottom: 25px; } .answer-options { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; } .answer-option { padding: 12px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; font-size: 1em; text-align: left; color: #333; } .answer-option:hover { background-color: #e6e6e6; } /* Feedback and Final Screen Styles */ .feedback-message { color: #cc0000; font-weight: bold; margin-top: 15px; min-height: 25px; } .final-clue-screen { background-color: #fffacd; /* Light Yellow Paper Effect */ border: 2px dashed #6b4d3c; padding: 20px; text-align: left; } .final-clue-screen h4 { color: #cc0000; font-size: 1.4em; margin-top: 0; } .final-clue-screen .clue-detail { font-style: italic; margin-top: 10px; font-size: 1.1em; } .control-button { background-color: #0073aa; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; transition: background-color 0.2s; margin-top: 15px; } .control-button:hover { background-color: #005a87; } .try-again-button { background-color: #cc0000; } .try-again-button:hover { background-color: #a30000; } // — JavaScript for the Clue Quiz — const quizQuestions = [ { q: “1) What are the cross streets closest to you?”, a: [“40th street and 8th Avenue”, “Broadway & 42nd street”, “8th Avenue and 4th street”, “40th street and 9th ave”], correct: “40th street and 8th Avenue” }, { q: “2) What job did Ralph Kramden have on the Honeymooners?”, a: [“Bus driver”, “Cabbie”, “Plumber”, “Cop”], correct: “Bus driver” }, { q: “3) What famous tech company built a headquarters just across 8th Avenue?”, a: [“Microsoft”, “TESLA”, “GOOGLE”, “YAHOO”], correct: “Microsoft” } ]; let currentQuestionIndex = 0; let hasAnsweredCurrentQuestion = false; const questionTextElement = document.getElementById(‘questionText’); const answerOptionsContainer = document.getElementById(‘answerOptions’); const feedbackMessageElement = document.getElementById(‘feedbackMessage’); const controlsContainer = document.getElementById(‘controlsContainer’); // — Game Flow Functions — function loadQuestion(index) { if (index >= quizQuestions.length) { showFinalClue(); return; } const qData = quizQuestions[index]; questionTextElement.textContent = qData.q; feedbackMessageElement.textContent = ”; answerOptionsContainer.innerHTML = ”; controlsContainer.innerHTML = ”; hasAnsweredCurrentQuestion = false; // Shuffle the answers for the question const shuffledAnswers = shuffleArray([…qData.a]); shuffledAnswers.forEach(answer => { const optionDiv = document.createElement(‘div’); optionDiv.className = ‘answer-option’; optionDiv.textContent = answer; optionDiv.onclick = () => checkAnswer(optionDiv, answer, qData.correct); answerOptionsContainer.appendChild(optionDiv); }); } function checkAnswer(selectedElement, selectedAnswer, correctAnswer) { if (hasAnsweredCurrentQuestion) return; hasAnsweredCurrentQuestion = true; // Disable all options const allOptions = document.querySelectorAll(‘.answer-option’); allOptions.forEach(option => { option.onclick = null; if (option.textContent === correctAnswer) { option.style.backgroundColor = ‘#ccffcc’; // Light green for correct answer } }); if (selectedAnswer === correctAnswer) { selectedElement.style.backgroundColor = ‘#4CAF50’; // Dark green for chosen correct answer selectedElement.style.color = ‘white’; feedbackMessageElement.textContent = ‘Correct! Preparing the next clue…’; // Delay before loading the next question setTimeout(() => { currentQuestionIndex++; loadQuestion(currentQuestionIndex); }, 1500); } else { selectedElement.style.backgroundColor = ‘#f44336’; // Red for wrong answer selectedElement.style.color = ‘white’; feedbackMessageElement.textContent = ‘Wrong answer. You must try again!’; // Show TRY AGAIN button const tryAgainButton = document.createElement(‘button’); tryAgainButton.className = ‘control-button try-again-button’; tryAgainButton.textContent = ‘TRY AGAIN?’; tryAgainButton.onclick = resetQuiz; controlsContainer.appendChild(tryAgainButton); } } function resetQuiz() { currentQuestionIndex = 0; loadQuestion(currentQuestionIndex); } function showFinalClue() { answerOptionsContainer.innerHTML = ”; feedbackMessageElement.innerHTML = ”; controlsContainer.innerHTML = ”; questionTextElement.innerHTML = `

YOU UNLOCKED THE CLUE TO YOUR NEXT LOCATION!

`; // Final Clue Screen const finalClue = document.createElement(‘div’); finalClue.className = ‘final-clue-screen’; finalClue.innerHTML = `

NEXT STOP: THE NEW YORKER HOTEL

You see an **brochure for the New Yorker Hotel**, and a hand written note that says **”10pm Tonight”**. Now the message in blood makes sense: **”NY HOTEL”**.

Head to **481 8th Ave, New York, NY 10001**.

Start Tour Over `; answerOptionsContainer.appendChild(finalClue); } // — Utility Functions — function shuffleArray(array) { for (let i = array.length – 1; i > 0; i–) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // — Initialize Game — document.addEventListener(‘DOMContentLoaded’, () => { loadQuestion(currentQuestionIndex); });