Update to horse joke app

ToonTalk · Dec 7, 2023 · 13b79b4 · 13b79b4
1 parent 83b8e08
commit 13b79b4
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 6 deletions.
diff --git a/apps/Jokes for 7 year old/Sallys_Talking_Horse_Joke_Quiz_With_More_Jokes _With_Sound.html b/apps/Jokes for 7 year old/Sallys_Talking_Horse_Joke_Quiz_With_More_Jokes _With_Sound.html
@@ -0,0 +1,91 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Sally's Talking Horse Joke Quiz</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #ffccff;
+            color: #333333;
+            padding: 50px;
+        }
+        #joke, #answer {
+            margin: 20px;
+            padding: 20px;
+            border: 2px solid #333333;
+            border-radius: 10px;
+            width: 50%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        #horseImage {
+            width: 300px;
+            margin: auto;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #ff99cc;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #ff66aa;
+        }
+    </style>
+</head>
+<body>
+    <h1>Welcome to Sally's Talking Horse Joke Quiz!</h1>
+    <img id="horseImage" src="DALL·E 2023-12-02 09.53.52 - a cartoon image of a cheerful horse, standing in a playful pose, with bright colors and a friendly expression, suitable for a children's app, in a sim.png" alt="Cartoon Horse">
+    <div id="joke">Click the button to see and hear a horse joke!</div>
+    <div id="answer" style="display: none;">Answer: </div>
+    <button onclick="showJoke()">Show me a joke!</button>
+    <button onclick="showAnswer()" style="display: none;" id="answerButton">Show answer</button>
+    <audio id="horseSound" src="horse.wav" type="audio/wav"></audio>
+    <script>
+        var jokes = [
+        { question: "Why did the horse chew with its mouth open?", answer: "Because it had bad stable manners!" },
+        { question: "What do you call a horse that lives next door?", answer: "A neigh-bor!" },
+        { question: "What game do horses like to play?", answer: "Stable tennis!" },
+        { question: "Why are horses so healthy?", answer: "Because they're on a stable diet!" },
+        { question: "What did the horse say when it fell over?", answer: "Help, I’ve fallen and I can’t giddy-up!" },
+
+            { question: "What do you call a horse that likes arts and crafts?", answer: "A hobby horse!" },
+            { question: "Why did the horse go behind the tree?", answer: "To change his jockeys!" },
+            { question: "What did the horse say when it fell?", answer: "I've fallen and I can't giddyup!" }
+        ];
+        var currentJoke = {};
+
+        function speak(text) {
+            var utterance = new SpeechSynthesisUtterance(text);
+            speechSynthesis.speak(utterance);
+        }
+
+        function showJoke() {
+            currentJoke = jokes[Math.floor(Math.random() * jokes.length)];
+            var jokeText = currentJoke.question;
+            document.getElementById('joke').innerHTML = jokeText;
+            speak(jokeText);
+            document.getElementById('answer').style.display = 'none';
+            document.getElementById('answerButton').style.display = 'block';
+            playHorseSound(); // Play the horse sound
+        }
+
+        function showAnswer() {
+            var answerText = "Answer: " + currentJoke.answer;
+            document.getElementById('answer').innerHTML = answerText;
+            document.getElementById('answer').style.display = 'block';
+            speak(answerText);
+        }
+
+        function playHorseSound() {
+            var horseSound = document.getElementById('horseSound');
+            horseSound.play();
+        }
+    </script>
+</body>
+</html>
diff --git a/apps/Jokes for 7 year old/Sallys_Talking_Horse_Joke_Quiz_With_More_Jokes.html b/apps/Jokes for 7 year old/Sallys_Talking_Horse_Joke_Quiz_With_More_Jokes.html
@@ -45,7 +45,6 @@ <h1>Welcome to Sally's Talking Horse Joke Quiz!</h1>
     <div id="answer" style="display: none;">Answer: </div>
     <button onclick="showJoke()">Show me a joke!</button>
     <button onclick="showAnswer()" style="display: none;" id="answerButton">Show answer</button>
-    <audio id="horseSound" src="horse.wav" type="audio/wav"></audio>
     <script>
         var jokes = [
         { question: "Why did the horse chew with its mouth open?", answer: "Because it had bad stable manners!" },
@@ -72,7 +71,6 @@ <h1>Welcome to Sally's Talking Horse Joke Quiz!</h1>
             speak(jokeText);
             document.getElementById('answer').style.display = 'none';
             document.getElementById('answerButton').style.display = 'block';
-            playHorseSound(); // Play the horse sound
         }
 
         function showAnswer() {
@@ -82,10 +80,6 @@ <h1>Welcome to Sally's Talking Horse Joke Quiz!</h1>
             speak(answerText);
         }
 
-        function playHorseSound() {
-            var horseSound = document.getElementById('horseSound');
-            horseSound.play();
-        }
     </script>
 </body>
 </html>