a riddling game by Poe (ChatGPt 3.5)

ToonTalk · Nov 23, 2023 · 7a8569a · 7a8569a
1 parent e9afa4e
commit 7a8569a
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/apps/riddle game by poe/index.html b/apps/riddle game by poe/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Fairy and Cute Monster Riddler</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <h1>Welcome to the Fairy and Cute Monster Riddler!</h1>
+  <div id="riddle-container">
+    <h2>Here's a riddle for you:</h2>
+    <p id="riddle-text"></p>
+    <input type="text" id="answer-input" placeholder="Enter your answer">
+    <button id="submit-button">Submit</button>
+  </div>
+  <div id="treasure-container">
+    <h2>Congratulations! You've found a shiny gem!</h2>
+    <img src="gem.png" alt="Shiny Gem">
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/apps/riddle game by poe/script.js 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";
+}
diff --git a/apps/riddle game by poe/style.css 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;
+}