`;
listContainer.appendChild(div);
});
}
// Event Delegation for remove buttons
if (listContainer) listContainer.addEventListener("click", function (e) {
if (e.target && e.target.matches(".riddle-remove-btn")) { // IV.C
const item = e.target.closest(".riddle-list-item");
if (item) {
const index = parseInt(item.getAttribute("data-index"), 10);
removeRiddle(index);
}
}
});
function addRiddle() {
if (!configText || !configAnswer) return;
const riddle = configText.value.trim();
const answer = configAnswer.value.trim();
if (riddle && answer) {
riddleData.push({ riddle, answer });
configText.value = "";
configAnswer.value = "";
renderRiddleList();
} else {
alert("Please fill out both the riddle and the answer.");
}
}
if (addBtn) addBtn.addEventListener("click", addRiddle);
function removeRiddle(index) {
if (riddleData[index]) {
riddleData.splice(index, 1);
renderRiddleList();
}
}
// --- II.A. & II.E: Dashboard (Riddle) Logic ---
function getTodaysRiddle() {
if (riddleData.length === 0) {
alert("No riddles available. Please add some in the 'Data Configuration' tab.");
return;
}
// II.E.2: Use user-defined parameters (the date)
const now = new Date();
const start = new Date(now.getFullYear(), 0, 0);
const diff = now.getTime() - start.getTime(); // Use getTime() for reliability
const day = Math.floor(diff / (1000 * 60 * 60 * 24)); // Day of the year
// Select riddle based on day
const index = (day - 1) % riddleData.length;
currentRiddle = riddleData[index];
// Update UI
if (textDisplay) textDisplay.textContent = currentRiddle.riddle;
if (startScreen) startScreen.style.display = "none";
if (activeScreen) activeScreen.style.display = "block";
if (resultScreen) resultScreen.style.display = "none";
if (answerInput) answerInput.value = "";
}
if (getBtn) getBtn.addEventListener("click", getTodaysRiddle);
function submitAnswer() {
if (!currentRiddle || !answerInput || !resultMsg || !correctAns || !pdfRiddle || !pdfAnswer) return;
const userAnswer = answerInput.value.trim().toLowerCase();
const correctAnswer = currentRiddle.answer.toLowerCase();
if (userAnswer === correctAnswer) {
resultMsg.textContent = "Correct!";
resultMsg.className = "correct";
} else {
resultMsg.textContent = "Incorrect!";
resultMsg.className = "incorrect";
}
correctAns.textContent = `The correct answer is: ${currentRiddle.answer}`;
// Update hidden PDF content (Other #9)
pdfRiddle.textContent = currentRiddle.riddle;
pdfAnswer.textContent = currentRiddle.answer;
// Show result
if (activeScreen) activeScreen.style.display = "none";
if (resultScreen) resultScreen.style.display = "block";
}
if (submitBtn) submitBtn.addEventListener("click", submitAnswer);
// --- II.C. & Other #9: PDF Download Functionality ---
if (pdfBtn) pdfBtn.addEventListener("click", () => {
// IV.B.2. Null check
if (!window.jspdf || !window.html2canvas || !pdfContent) {
alert("Error: PDF generation libraries are not loaded.");
return;
}
// Temporarily display the hidden content
pdfContent.style.display = 'block';
const { jsPDF } = window.jspdf;
html2canvas(pdfContent, {
scale: 2,
backgroundColor: "#ffffff",
}).then((canvas) => {
// Hide content again
pdfContent.style.display = 'none';
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF("p", "mm", "a4");
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const ratio = canvasWidth / canvasHeight;
let imgWidth = pdfWidth - 20; // A4 width with 10mm margins
let imgHeight = imgWidth / ratio;
if (imgHeight > pdfHeight - 20) {
imgHeight = pdfHeight - 20;
imgWidth = imgHeight * ratio;
}
const x = (pdfWidth - imgWidth) / 2;
const y = 10;
pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight);
pdf.save("Riddle-of-the-Day.pdf");
});
});
// --- V.A. Initial Setup (Other #7) ---
function populateSampleData() {
riddleData = [
{
riddle: "I have cities, but no houses; forests, but no trees; and water, but no fish. What am I?",
answer: "A map"
},
{
riddle: "I am a symbol of freedom, in a New York bay. I hold a torch up high, lighting the way. What am I?",
answer: "The Statue of Liberty"
},
{
riddle: "What has a face and two hands, but no body or legs, and is a famous landmark in New York's Grand Central Terminal?",
answer: "A clock"
},
{
riddle: "I have a big head, a big mouth, but I never speak. I can be found on a famous mountain in South Dakota. What am I?",
answer: "A face on Mount Rushmore"
}
];
renderRiddleList();
}
populateSampleData();
updateNavButtons(); // Set initial button state
});
