From 7a8569aaed58a7bcbf46c5d36f466877454d8517 Mon Sep 17 00:00:00 2001 From: Ken Kahn Date: Thu, 23 Nov 2023 13:56:34 +0800 Subject: [PATCH] a riddling game by Poe (ChatGPt 3.5) --- apps/riddle game by poe/index.html | 21 ++++++++++++++ apps/riddle game by poe/script.js | 44 ++++++++++++++++++++++++++++++ apps/riddle game by poe/style.css | 25 +++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 apps/riddle game by poe/index.html create mode 100644 apps/riddle game by poe/script.js create mode 100644 apps/riddle game by poe/style.css diff --git a/apps/riddle game by poe/index.html b/apps/riddle game by poe/index.html new file mode 100644 index 0000000..4008a9d --- /dev/null +++ b/apps/riddle game by poe/index.html @@ -0,0 +1,21 @@ + + + + Fairy and Cute Monster Riddler + + + +

Welcome to the Fairy and Cute Monster Riddler!

+
+

Here's a riddle for you:

+

+ + +
+
+

Congratulations! You've found a shiny gem!

+ Shiny Gem +
+ + + \ No newline at end of file diff --git a/apps/riddle game by poe/script.js b/apps/riddle game by poe/script.js new file mode 100644 index 0000000..a38fe7d --- /dev/null +++ b/apps/riddle game by poe/script.js @@ -0,0 +1,44 @@ +// Array of riddles +const riddles = [ + { + question: "I speak without a mouth and hear without ears. I have no body, but I come alive with wind. What am I?", + answer: "echo" + }, + { + question: "I have keys but no locks. I have space but no room. You can enter, but you can't go outside. What am I?", + answer: "keyboard" + } +]; + +// Get DOM elements +const riddleText = document.getElementById("riddle-text"); +const answerInput = document.getElementById("answer-input"); +const submitButton = document.getElementById("submit-button"); +const treasureContainer = document.getElementById("treasure-container"); + +// Randomly select a riddle from the array +const randomRiddle = riddles[Math.floor(Math.random() * riddles.length)]; + +// Set the riddle text +riddleText.textContent = randomRiddle.question; + +// Event listener for submit button +submitButton.addEventListener("click", checkAnswer); + +// Function to check if the answer is correct +function checkAnswer() { + const userAnswer = answerInput.value.toLowerCase(); + if (userAnswer === randomRiddle.answer) { + showTreasure(); + } else { + alert("Oops! That's not the correct answer. Try again!"); + } +} + +// Function to show the treasure container +function showTreasure() { + riddleText.style.display = "none"; + answerInput.style.display = "none"; + submitButton.style.display = "none"; + treasureContainer.style.display = "block"; +} \ No newline at end of file diff --git a/apps/riddle game by poe/style.css b/apps/riddle game by poe/style.css new file mode 100644 index 0000000..ec950fa --- /dev/null +++ b/apps/riddle game by poe/style.css @@ -0,0 +1,25 @@ +body { + font-family: Arial, sans-serif; + text-align: center; +} + +h1, h2 { + color: #333; +} + +#riddle-container { + margin-top: 50px; +} + +#answer-input { + margin-top: 20px; +} + +#submit-button { + margin-top: 10px; +} + +#treasure-container { + display: none; + margin-top: 50px; +} \ No newline at end of file