Spaces:

ktskhoa
/

game-learning

Running

App Files Files Community

ktskhoa commited on May 3, 2025

Commit

e34012c

verified ·

1 Parent(s): 01470f0

Add 2 files

Browse files

Files changed (2) hide show

index.html +215 -26
prompts.txt +2 -0

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>English Vocabulary Learning Game</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -44,13 +44,17 @@
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-10px); }
         }
     </style>
 </head>
 <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
         <header class="text-center mb-8">
             <h1 class="text-4xl font-bold text-indigo-800 mb-2">Vocabulary Master</h1>
-            <p class="text-gray-600">Learn English words effectively</p>
         </header>
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
@@ -78,7 +82,7 @@
                 <div class="mt-6">
                     <h3 class="text-lg font-medium text-gray-800 mb-3">Your Vocabulary List</h3>
                     <div id="wordList" class="max-h-60 overflow-y-auto border border-gray-200 rounded-lg p-2">
-                        <p class="text-gray-500 text-center py-4">No words added yet</p>
                     </div>
                     <div class="mt-3 flex space-x-2">
                         <button id="clearWordsBtn" class="flex-1 bg-red-100 text-red-700 py-1 px-3 rounded hover:bg-red-200 transition">
@@ -302,8 +306,121 @@
     </div>
     <script>
         // Vocabulary data storage
-        let vocabulary = JSON.parse(localStorage.getItem('vocabulary')) || [];
         let knownWords = JSON.parse(localStorage.getItem('knownWords')) || [];
         // Current game state
@@ -379,6 +496,11 @@
         // Initialize the app
         function init() {
             updateWordList();
             updateProgress();
             setupEventListeners();
@@ -426,6 +548,15 @@
             checkTypingBtn.addEventListener('click', checkTypingAnswer);
             nextTypingBtn.addEventListener('click', showNextTyping);
             closeTyping.addEventListener('click', () => typingModal.classList.add('hidden'));
         }
         // Add a new word to vocabulary
@@ -470,8 +601,8 @@
         // Clear all words
         function clearWords() {
-            if (confirm('Are you sure you want to clear all words?')) {
-                vocabulary = [];
                 knownWords = [];
                 saveVocabulary();
                 updateWordList();
@@ -562,29 +693,58 @@
             }
             wordList.innerHTML = '';
-            vocabulary.forEach((word, index) => {
-                const isKnown = knownWords.includes(word.english);
-                const wordEl = document.createElement('div');
-                wordEl.className = `flex justify-between items-center p-2 mb-2 rounded-lg ${isKnown ? 'bg-green-50' : 'bg-white'} border ${isKnown ? 'border-green-200' : 'border-gray-200'}`;
-                wordEl.innerHTML = `
-                    <div>
-                        <div class="font-medium text-gray-800">${word.english}</div>
-                        <div class="text-sm text-gray-600">${word.vietnamese}</div>
-                        ${word.example ? `<div class="text-xs text-gray-500 italic mt-1">"${word.example}"</div>` : ''}
-                    </div>
-                    <div class="flex space-x-1">
-                        <button class="know-toggle px-2 py-1 text-xs rounded ${isKnown ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}" data-word="${word.english}">
-                            <i class="fas ${isKnown ? 'fa-check-circle' : 'fa-question-circle'} mr-1"></i> ${isKnown ? 'Known' : 'Learning'}
-                        </button>
-                        <button class="delete-word px-2 py-1 text-xs bg-red-100 text-red-800 rounded" data-index="${index}">
-                            <i class="fas fa-trash-alt"></i>
-                        </button>
-                    </div>
-                `;
-                wordList.appendChild(wordEl);
             });
             // Add event listeners for dynamically created buttons
@@ -616,6 +776,14 @@
         // Delete a word from vocabulary
         function deleteWord(e) {
             const index = parseInt(e.target.closest('button').getAttribute('data-index'));
             vocabulary.splice(index, 1);
             // Remove from known words if it was there
@@ -702,6 +870,27 @@
             flashcard.classList.toggle('flipped');
         }
         // Show previous flashcard
         function showPreviousCard() {
             if (currentFlashcardIndex > 0) {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vocabulary Master - 100 Common English Words</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-10px); }
         }
+        .word-category {
+            background-color: rgba(99, 102, 241, 0.1);
+            border-left: 4px solid #6366f1;
+        }
     </style>
 </head>
 <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
         <header class="text-center mb-8">
             <h1 class="text-4xl font-bold text-indigo-800 mb-2">Vocabulary Master</h1>
+            <p class="text-gray-600">Learn 100 common English words effectively</p>
         </header>
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 <div class="mt-6">
                     <h3 class="text-lg font-medium text-gray-800 mb-3">Your Vocabulary List</h3>
                     <div id="wordList" class="max-h-60 overflow-y-auto border border-gray-200 rounded-lg p-2">
+                        <!-- Words will be loaded here -->
                     </div>
                     <div class="mt-3 flex space-x-2">
                         <button id="clearWordsBtn" class="flex-1 bg-red-100 text-red-700 py-1 px-3 rounded hover:bg-red-200 transition">
     </div>
     <script>
+        // Default vocabulary with 100 common English words
+        const defaultVocabulary = [
+            // Basic Verbs (1-20)
+            { english: "be", vietnamese: "thì, là, ở", example: "I am happy" },
+            { english: "have", vietnamese: "có", example: "I have a book" },
+            { english: "do", vietnamese: "làm", example: "What are you doing?" },
+            { english: "say", vietnamese: "nói", example: "She says hello" },
+            { english: "go", vietnamese: "đi", example: "Let's go home" },
+            { english: "get", vietnamese: "nhận được", example: "I got a gift" },
+            { english: "make", vietnamese: "làm, tạo ra", example: "She makes cakes" },
+            { english: "know", vietnamese: "biết", example: "I know the answer" },
+            { english: "think", vietnamese: "nghĩ", example: "I think so" },
+            { english: "take", vietnamese: "lấy", example: "Take your time" },
+            { english: "see", vietnamese: "nhìn thấy", example: "I see a bird" },
+            { english: "come", vietnamese: "đến", example: "Come here please" },
+            { english: "want", vietnamese: "muốn", example: "I want coffee" },
+            { english: "look", vietnamese: "nhìn", example: "Look at that!" },
+            { english: "use", vietnamese: "sử dụng", example: "Can I use your phone?" },
+            { english: "find", vietnamese: "tìm thấy", example: "I found my keys" },
+            { english: "give", vietnamese: "đưa cho", example: "Give me the book" },
+            { english: "tell", vietnamese: "nói với", example: "Tell me a story" },
+            { english: "work", vietnamese: "làm việc", example: "I work at a bank" },
+            { english: "call", vietnamese: "gọi", example: "Call me later" },
+            // Common Nouns (21-40)
+            { english: "time", vietnamese: "thời gian", example: "What time is it?" },
+            { english: "person", vietnamese: "người", example: "She's a nice person" },
+            { english: "year", vietnamese: "năm", example: "Happy new year!" },
+            { english: "day", vietnamese: "ngày", example: "Have a nice day" },
+            { english: "thing", vietnamese: "thứ, vật", example: "What's that thing?" },
+            { english: "man", vietnamese: "đàn ông", example: "That man is tall" },
+            { english: "world", vietnamese: "thế giới", example: "Travel around the world" },
+            { english: "life", vietnamese: "cuộc sống", example: "Enjoy your life" },
+            { english: "hand", vietnamese: "bàn tay", example: "Raise your hand" },
+            { english: "part", vietnamese: "phần", example: "Part of the cake" },
+            { english: "child", vietnamese: "đứa trẻ", example: "She has two children" },
+            { english: "eye", vietnamese: "mắt", example: "My eyes are brown" },
+            { english: "woman", vietnamese: "phụ nữ", example: "That woman is my teacher" },
+            { english: "place", vietnamese: "nơi chốn", example: "This is a nice place" },
+            { english: "week", vietnamese: "tuần", example: "See you next week" },
+            { english: "case", vietnamese: "trường hợp", example: "In that case..." },
+            { english: "point", vietnamese: "điểm", example: "Good point!" },
+            { english: "government", vietnamese: "chính phủ", example: "The government announced..." },
+            { english: "company", vietnamese: "công ty", example: "I work for a tech company" },
+            { english: "number", vietnamese: "số", example: "Pick a number" },
+            // Adjectives (41-60)
+            { english: "good", vietnamese: "tốt", example: "Good job!" },
+            { english: "new", vietnamese: "mới", example: "I bought a new phone" },
+            { english: "first", vietnamese: "đầu tiên", example: "My first time" },
+            { english: "last", vietnamese: "cuối cùng", example: "The last page" },
+            { english: "long", vietnamese: "dài", example: "A long road" },
+            { english: "great", vietnamese: "tuyệt vời", example: "Great idea!" },
+            { english: "little", vietnamese: "nhỏ", example: "A little dog" },
+            { english: "own", vietnamese: "riêng", example: "My own house" },
+            { english: "other", vietnamese: "khác", example: "Other people" },
+            { english: "old", vietnamese: "cũ, già", example: "An old friend" },
+            { english: "right", vietnamese: "đúng, phải", example: "You're right" },
+            { english: "big", vietnamese: "lớn", example: "A big city" },
+            { english: "high", vietnamese: "cao", example: "High mountains" },
+            { english: "different", vietnamese: "khác biệt", example: "Different opinions" },
+            { english: "small", vietnamese: "nhỏ", example: "A small gift" },
+            { english: "large", vietnamese: "rộng lớn", example: "A large room" },
+            { english: "next", vietnamese: "tiếp theo", example: "Next week" },
+            { english: "early", vietnamese: "sớm", example: "Early morning" },
+            { english: "young", vietnamese: "trẻ", example: "Young people" },
+            { english: "important", vietnamese: "quan trọng", example: "Important news" },
+            // Common Words (61-80)
+            { english: "the", vietnamese: "cái, con, người (mạo từ)", example: "The book is interesting" },
+            { english: "and", vietnamese: "và", example: "You and me" },
+            { english: "that", vietnamese: "đó, kia", example: "That book is mine" },
+            { english: "it", vietnamese: "nó", example: "It is raining" },
+            { english: "not", vietnamese: "không", example: "I'm not sure" },
+            { english: "he", vietnamese: "anh ấy", example: "He is my brother" },
+            { english: "as", vietnamese: "như", example: "As you wish" },
+            { english: "at", vietnamese: "ở, tại", example: "At home" },
+            { english: "by", vietnamese: "bởi, bằng", example: "By bus" },
+            { english: "from", vietnamese: "từ", example: "From Vietnam" },
+            { english: "or", vietnamese: "hoặc", example: "Tea or coffee?" },
+            { english: "one", vietnamese: "một", example: "One dollar" },
+            { english: "all", vietnamese: "tất cả", example: "All students" },
+            { english: "would", vietnamese: "sẽ", example: "I would like to go" },
+            { english: "there", vietnamese: "ở đó", example: "Go there" },
+            { english: "their", vietnamese: "của họ", example: "Their house" },
+            { english: "what", vietnamese: "cái gì", example: "What is this?" },
+            { english: "so", vietnamese: "vì vậy", example: "I'm tired, so I'll rest" },
+            { english: "up", vietnamese: "lên", example: "Stand up" },
+            { english: "out", vietnamese: "ra ngoài", example: "Get out" },
+            // Useful Words (81-100)
+            { english: "about", vietnamese: "về", example: "Tell me about yourself" },
+            { english: "who", vietnamese: "ai", example: "Who is that?" },
+            { english: "which", vietnamese: "cái nào", example: "Which one do you want?" },
+            { english: "when", vietnamese: "khi nào", example: "When are you coming?" },
+            { english: "where", vietnamese: "ở đâu", example: "Where is the station?" },
+            { english: "why", vietnamese: "tại sao", example: "Why are you late?" },
+            { english: "how", vietnamese: "như thế nào", example: "How does it work?" },
+            { english: "some", vietnamese: "một vài", example: "I need some help" },
+            { english: "more", vietnamese: "nhiều hơn", example: "I want more time" },
+            { english: "most", vietnamese: "hầu hết", example: "Most people agree" },
+            { english: "many", vietnamese: "nhiều", example: "Many thanks" },
+            { english: "then", vietnamese: "sau đó", example: "We ate, then left" },
+            { english: "now", vietnamese: "bây giờ", example: "Do it now" },
+            { english: "only", vietnamese: "chỉ", example: "Only one person" },
+            { english: "also", vietnamese: "cũng", example: "I also like tea" },
+            { english: "very", vietnamese: "rất", example: "Very good" },
+            { english: "even", vietnamese: "thậm chí", example: "Even children know" },
+            { english: "back", vietnamese: "trở lại", example: "Come back soon" },
+            { english: "any", vietnamese: "bất kỳ", example: "Any questions?" },
+            { english: "well", vietnamese: "tốt", example: "You did well" }
+        ];
         // Vocabulary data storage
+        let vocabulary = JSON.parse(localStorage.getItem('vocabulary')) || defaultVocabulary;
         let knownWords = JSON.parse(localStorage.getItem('knownWords')) || [];
         // Current game state
         // Initialize the app
         function init() {
+            // If no vocabulary in localStorage, save the default
+            if (!localStorage.getItem('vocabulary')) {
+                saveVocabulary();
+            }
             updateWordList();
             updateProgress();
             setupEventListeners();
             checkTypingBtn.addEventListener('click', checkTypingAnswer);
             nextTypingBtn.addEventListener('click', showNextTyping);
             closeTyping.addEventListener('click', () => typingModal.classList.add('hidden'));
+            // Know/Don't know buttons (event delegation)
+            document.addEventListener('click', function(e) {
+                if (e.target.classList.contains('knowBtn')) {
+                    markWordAsKnown(true);
+                } else if (e.target.classList.contains('dontKnowBtn')) {
+                    markWordAsKnown(false);
+                }
+            });
         }
         // Add a new word to vocabulary
         // Clear all words
         function clearWords() {
+            if (confirm('Are you sure you want to clear all words? This will reset to default vocabulary.')) {
+                vocabulary = [...defaultVocabulary];
                 knownWords = [];
                 saveVocabulary();
                 updateWordList();
             }
             wordList.innerHTML = '';
+            // Group words by first letter for better organization
+            const groupedWords = vocabulary.reduce((groups, word) => {
+                const firstLetter = word.english.charAt(0).toUpperCase();
+                if (!groups[firstLetter]) {
+                    groups[firstLetter] = [];
+                }
+                groups[firstLetter].push(word);
+                return groups;
+            }, {});
+            // Sort letters alphabetically
+            const sortedLetters = Object.keys(groupedWords).sort();
+            // Display words by letter groups
+            sortedLetters.forEach(letter => {
+                const letterGroup = document.createElement('div');
+                letterGroup.className = 'mb-4';
+                const letterHeader = document.createElement('div');
+                letterHeader.className = 'word-category px-3 py-2 mb-2 font-medium text-indigo-800';
+                letterHeader.textContent = letter;
+                letterGroup.appendChild(letterHeader);
+                groupedWords[letter].forEach((word, index) => {
+                    const isKnown = knownWords.includes(word.english);
+                    const wordEl = document.createElement('div');
+                    wordEl.className = `flex justify-between items-center p-2 mb-1 rounded-lg ${isKnown ? 'bg-green-50' : 'bg-white'} border ${isKnown ? 'border-green-200' : 'border-gray-200'}`;
+                    wordEl.innerHTML = `
+                        <div class="flex-1">
+                            <div class="font-medium text-gray-800">${word.english}</div>
+                            <div class="text-sm text-gray-600">${word.vietnamese}</div>
+                            ${word.example ? `<div class="text-xs text-gray-500 italic mt-1">"${word.example}"</div>` : ''}
+                        </div>
+                        <div class="flex space-x-1">
+                            <button class="know-toggle px-2 py-1 text-xs rounded ${isKnown ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}" data-word="${word.english}">
+                                <i class="fas ${isKnown ? 'fa-check-circle' : 'fa-question-circle'} mr-1"></i> ${isKnown ? 'Known' : 'Learning'}
+                            </button>
+                            ${!defaultVocabulary.some(w => w.english === word.english) ?
+                              `<button class="delete-word px-2 py-1 text-xs bg-red-100 text-red-800 rounded" data-index="${vocabulary.findIndex(w => w.english === word.english)}">
+                                <i class="fas fa-trash-alt"></i>
+                              </button>` : ''}
+                        </div>
+                    `;
+                    letterGroup.appendChild(wordEl);
+                });
+                wordList.appendChild(letterGroup);
             });
             // Add event listeners for dynamically created buttons
         // Delete a word from vocabulary
         function deleteWord(e) {
             const index = parseInt(e.target.closest('button').getAttribute('data-index'));
+            if (index < 0 || index >= vocabulary.length) return;
+            // Don't allow deleting default words
+            if (defaultVocabulary.some(w => w.english === vocabulary[index].english)) {
+                alert('Default words cannot be deleted. Clear all to reset.');
+                return;
+            }
             vocabulary.splice(index, 1);
             // Remove from known words if it was there
             flashcard.classList.toggle('flipped');
         }
+        // Mark word as known or not known
+        function markWordAsKnown(isKnown) {
+            const currentWord = vocabulary[currentFlashcardIndex].english;
+            const index = knownWords.indexOf(currentWord);
+            if (isKnown && index === -1) {
+                knownWords.push(currentWord);
+            } else if (!isKnown && index !== -1) {
+                knownWords.splice(index, 1);
+            }
+            saveVocabulary();
+            updateProgress();
+            // Move to next card automatically
+            if (currentFlashcardIndex < vocabulary.length - 1) {
+                currentFlashcardIndex++;
+                updateFlashcard();
+            }
+        }
         // Show previous flashcard
         function showPreviousCard() {
             if (currentFlashcardIndex > 0) {

prompts.txt CHANGED Viewed

	@@ -0,0 +1,2 @@


1	+ cập nhật thêm 50 từ tiếng anh thông dụng và nghĩa tiếng việt
2	+ 50 từ mới thêm không tương tác được, làm lại