commit cf64c3dd9fdc6950150381f7bfdb2b0dde4435b1
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 09:54:23 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..bcc513d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,37 @@
+<header>
+ <h1>Word Chain</h1>
+ <p class="tagline">Connect and Learn English Words!</p>
+</header>
+
+<main>
+ <section class="game-container">
+ <div class="score-board">
+ <span>Score: <span id="score">0</span></span>
+ <span>Time: <span id="timer">60</span>s</span>
+ </div>
+
+ <div class="word-display">
+ <div id="previousWord">Start!</div>
+ <div id="arrow">↓</div>
+ <input type="text" id="wordInput" placeholder="Type your word..." autocomplete="off">
+ </div>
+
+ <button id="submitWord" class="primary-button">Submit</button>
+
+ <div class="word-chain" id="wordChain"></div>
+ </section>
+
+ <section class="instructions">
+ <h2>How to Play</h2>
+ <ul>
+ <li>Type a word that starts with the last letter of the previous word</li>
+ <li>Each correct word gives you points</li>
+ <li>You have 60 seconds to make the longest chain</li>
+ <li>Only English words are accepted</li>
+ </ul>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ for young English learners</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..36832e6
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,12 @@
+buildHtml
+baseUrl https://wordchain.scroll.pub
+metaTags
+ title Word Chain - Fun English Learning Game for Kids
+ description An interactive word chain game helping elementary school students learn English vocabulary through play
+ keywords english learning, word chain, vocabulary game, kids education
+ author WordChain Education
+editButton /edit.html
+title Word Chain - English Learning Game
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6f45694
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_017ohCNJVDvNS9PrYHWeroyk",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create an engaging word chain game website for elementary school students learning English. Here's the implementation:\n\n---domain---\nwordchain.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://wordchain.scroll.pub\nmetaTags\n title Word Chain - Fun English Learning Game for Kids\n description An interactive word chain game helping elementary school students learn English vocabulary through play\n keywords english learning, word chain, vocabulary game, kids education\n author WordChain Education\neditButton /edit.html\ntitle Word Chain - English Learning Game\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Word Chain</h1>\n <p class=\"tagline\">Connect and Learn English Words!</p>\n</header>\n\n<main>\n <section class=\"game-container\">\n <div class=\"score-board\">\n <span>Score: <span id=\"score\">0</span></span>\n <span>Time: <span id=\"timer\">60</span>s</span>\n </div>\n \n <div class=\"word-display\">\n <div id=\"previousWord\">Start!</div>\n <div id=\"arrow\">↓</div>\n <input type=\"text\" id=\"wordInput\" placeholder=\"Type your word...\" autocomplete=\"off\">\n </div>\n\n <button id=\"submitWord\" class=\"primary-button\">Submit</button>\n \n <div class=\"word-chain\" id=\"wordChain\"></div>\n </section>\n\n <section class=\"instructions\">\n <h2>How to Play</h2>\n <ul>\n <li>Type a word that starts with the last letter of the previous word</li>\n <li>Each correct word gives you points</li>\n <li>You have 60 seconds to make the longest chain</li>\n <li>Only English words are accepted</li>\n </ul>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ for young English learners</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #2196F3;\n --background-color: #f0f7ff;\n --text-color: #333;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n box-shadow: var(--shadow);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n animation: bounce 1s infinite alternate;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\n.game-container {\n max-width: 600px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 15px;\n box-shadow: var(--shadow);\n}\n\n.score-board {\n display: flex;\n justify-content: space-between;\n font-size: 1.2rem;\n margin-bottom: 2rem;\n padding: 1rem;\n background: #f5f5f5;\n border-radius: 10px;\n}\n\n.word-display {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n#previousWord {\n font-size: 1.5rem;\n color: var(--primary-color);\n margin-bottom: 0.5rem;\n}\n\n#arrow {\n font-size: 2rem;\n color: var(--secondary-color);\n animation: pulse 1s infinite;\n}\n\n#wordInput {\n width: 100%;\n padding: 1rem;\n font-size: 1.2rem;\n border: 2px solid #ddd;\n border-radius: 8px;\n margin: 1rem 0;\n transition: border-color 0.3s;\n}\n\n#wordInput:focus {\n border-color: var(--primary-color);\n outline: none;\n}\n\n.primary-button {\n display: block;\n width: 100%;\n padding: 1rem;\n font-size: 1.2rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.primary-button:hover {\n transform: scale(1.02);\n}\n\n.word-chain {\n margin-top: 2rem;\n padding: 1rem;\n background: #f5f5f5;\n border-radius: 8px;\n min-height: 100px;\n}\n\n.instructions {\n max-width: 600px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 15px;\n box-shadow: var(--shadow);\n}\n\n.instructions h2 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n}\n\n.instructions ul {\n list-style-position: inside;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n margin-top: 2rem;\n background: #333;\n color: white;\n}\n\n@keyframes bounce {\n from { transform: translateY(0); }\n to { transform: translateY(-10px); }\n}\n\n@keyframes pulse {\n from { opacity: 0.5; }\n to { opacity: 1; }\n}\n\n@media (max-width: 768px) {\n .game-container, .instructions {\n margin: 1rem;\n padding: 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const wordInput = document.getElementById('wordInput');\n const submitButton = document.getElementById('submitWord');\n const previousWord = document.getElementById('previousWord');\n const wordChain = document.getElementById('wordChain');\n const scoreElement = document.getElementById('score');\n const timerElement = document.getElementById('timer');\n\n let score = 0;\n let timeLeft = 60;\n let usedWords = new Set();\n let timer;\n\n const basicWords = new Set([\n 'apple', 'banana', 'cat', 'dog', 'elephant', 'fish',\n 'goat', 'house', 'ice', 'juice', 'kite', 'lion',\n 'monkey', 'nose', 'orange', 'pig', 'queen', 'rabbit',\n 'snake', 'tiger', 'umbrella', 'van', 'water', 'box',\n 'yellow', 'zebra'\n ]);\n\n function startGame() {\n timer = setInterval(() => {\n timeLeft--;\n timerElement.textContent = timeLeft;\n \n if (timeLeft <= 0) {\n endGame();\n }\n }, 1000);\n }\n\n function endGame() {\n clearInterval(timer);\n wordInput.disabled = true;\n submitButton.disabled = true;\n alert(`Game Over! Your score: ${score}`);\n }\n\n function isValidWord(word) {\n return basicWords.has(word.toLowerCase()) && !usedWords.has(word.toLowerCase());\n }\n\n function checkWordChain(prevWord, newWord) {\n if (prevWord === 'Start!') return true;\n return prevWord.slice(-1).toLowerCase() === newWord.charAt(0).toLowerCase();\n }\n\n function addWordToChain(word) {\n const wordElement = document.createElement('span');\n wordElement.textContent = word + ' → ';\n wordChain.appendChild(wordElement);\n previousWord.textContent = word;\n usedWords.add(word.toLowerCase());\n }\n\n submitButton.addEventListener('click', () => {\n const word = wordInput.value.trim();\n \n if (!timer) {\n startGame();\n }\n\n if (word && isValidWord(word) && checkWordChain(previousWord.textContent, word)) {\n score += word.length;\n scoreElement.textContent = score;\n addWordToChain(word);\n wordInput.value = '';\n } else {\n alert('Invalid word! Try again.');\n }\n });\n\n wordInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n submitButton.click();\n }\n });\n});\n\n---end---\n\nThis implementation creates an engaging word chain game specifically designed for elementary school students learning English. The design is colorful and kid-friendly while maintaining professional standards. Key features include:\n\n1. Clean, animated UI with bouncing title and pulsing arrow\n2. Simple gameplay mechanics suitable for young learners\n3. Score tracking and timer system\n4. Basic word validation against a predefined word list\n5. Responsive design that works on all devices\n6. Clear instructions and feedback\n7. Accessible color scheme and contrast\n8. Smooth animations and transitions\n9. Error handling and user feedback\n\nThe game uses a simplified word list suitable for elementary students and provides immediate feedback on valid/invalid words. The design is intentionally playful with Comic Sans MS font and animated elements to appeal to young learners while maintaining usability and educational value."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 287,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2487
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4f1fab6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# wordchain.scroll.pub
+Website generated by Claude from prompt: 给小学生学习英语单词的接龙游戏
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4aeefec
--- /dev/null
+++ b/script.js
@@ -0,0 +1,79 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const wordInput = document.getElementById('wordInput');
+ const submitButton = document.getElementById('submitWord');
+ const previousWord = document.getElementById('previousWord');
+ const wordChain = document.getElementById('wordChain');
+ const scoreElement = document.getElementById('score');
+ const timerElement = document.getElementById('timer');
+
+ let score = 0;
+ let timeLeft = 60;
+ let usedWords = new Set();
+ let timer;
+
+ const basicWords = new Set([
+ 'apple', 'banana', 'cat', 'dog', 'elephant', 'fish',
+ 'goat', 'house', 'ice', 'juice', 'kite', 'lion',
+ 'monkey', 'nose', 'orange', 'pig', 'queen', 'rabbit',
+ 'snake', 'tiger', 'umbrella', 'van', 'water', 'box',
+ 'yellow', 'zebra'
+ ]);
+
+ function startGame() {
+ timer = setInterval(() => {
+ timeLeft--;
+ timerElement.textContent = timeLeft;
+
+ if (timeLeft <= 0) {
+ endGame();
+ }
+ }, 1000);
+ }
+
+ function endGame() {
+ clearInterval(timer);
+ wordInput.disabled = true;
+ submitButton.disabled = true;
+ alert(`Game Over! Your score: ${score}`);
+ }
+
+ function isValidWord(word) {
+ return basicWords.has(word.toLowerCase()) && !usedWords.has(word.toLowerCase());
+ }
+
+ function checkWordChain(prevWord, newWord) {
+ if (prevWord === 'Start!') return true;
+ return prevWord.slice(-1).toLowerCase() === newWord.charAt(0).toLowerCase();
+ }
+
+ function addWordToChain(word) {
+ const wordElement = document.createElement('span');
+ wordElement.textContent = word + ' → ';
+ wordChain.appendChild(wordElement);
+ previousWord.textContent = word;
+ usedWords.add(word.toLowerCase());
+ }
+
+ submitButton.addEventListener('click', () => {
+ const word = wordInput.value.trim();
+
+ if (!timer) {
+ startGame();
+ }
+
+ if (word && isValidWord(word) && checkWordChain(previousWord.textContent, word)) {
+ score += word.length;
+ scoreElement.textContent = score;
+ addWordToChain(word);
+ wordInput.value = '';
+ } else {
+ alert('Invalid word! Try again.');
+ }
+ });
+
+ wordInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ submitButton.click();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d3af66
--- /dev/null
+++ b/style.css
@@ -0,0 +1,162 @@
+:root {
+ --primary-color: #4CAF50;
+ --secondary-color: #2196F3;
+ --background-color: #f0f7ff;
+ --text-color: #333;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Comic Sans MS', cursive, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ box-shadow: var(--shadow);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ animation: bounce 1s infinite alternate;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+.game-container {
+ max-width: 600px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+}
+
+.score-board {
+ display: flex;
+ justify-content: space-between;
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background: #f5f5f5;
+ border-radius: 10px;
+}
+
+.word-display {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+#previousWord {
+ font-size: 1.5rem;
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+}
+
+#arrow {
+ font-size: 2rem;
+ color: var(--secondary-color);
+ animation: pulse 1s infinite;
+}
+
+#wordInput {
+ width: 100%;
+ padding: 1rem;
+ font-size: 1.2rem;
+ border: 2px solid #ddd;
+ border-radius: 8px;
+ margin: 1rem 0;
+ transition: border-color 0.3s;
+}
+
+#wordInput:focus {
+ border-color: var(--primary-color);
+ outline: none;
+}
+
+.primary-button {
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ font-size: 1.2rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.primary-button:hover {
+ transform: scale(1.02);
+}
+
+.word-chain {
+ margin-top: 2rem;
+ padding: 1rem;
+ background: #f5f5f5;
+ border-radius: 8px;
+ min-height: 100px;
+}
+
+.instructions {
+ max-width: 600px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+}
+
+.instructions h2 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.instructions ul {
+ list-style-position: inside;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ margin-top: 2rem;
+ background: #333;
+ color: white;
+}
+
+@keyframes bounce {
+ from { transform: translateY(0); }
+ to { transform: translateY(-10px); }
+}
+
+@keyframes pulse {
+ from { opacity: 0.5; }
+ to { opacity: 1; }
+}
+
+@media (max-width: 768px) {
+ .game-container, .instructions {
+ margin: 1rem;
+ padding: 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+}