Spaces:

ReneeHWT
/

VocabFun

Sleeping

App Files Files Community

ReneeHWT commited on Dec 18, 2024

Commit

d02a4aa

verified ·

1 Parent(s): f6386f7

Update app.py

Browse files

Files changed (1) hide show

app.py +392 -0

app.py CHANGED Viewed

	@@ -0,0 +1,392 @@

+<html><head><base href="https://example.com">
+    <meta charset="UTF-8">
+    <title>Personal English Vocabulary App</title>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <!-- CSS for styling and animations -->
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #d6c8c0, #b3a9b8);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            min-height: 100vh;
+        }
+        h1 {
+            color: #5a5a5a;
+            margin-bottom: 20px;
+            animation: fadeInDown 1s ease-in-out;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        #upload-section, #quiz-section {
+            background: #f5f5f5;
+            padding: 20px 30px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 600px;
+            margin-bottom: 20px;
+            animation: fadeInUp 1s ease-in-out;
+        }
+        label {
+            display: block;
+            margin-bottom: 10px;
+            color: #6b6b6b;
+        }
+        input[type="file"], input[type="text"], button {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 15px;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        input[type="text"] {
+            background-color: #ffffff;
+            border: 1px solid #ccc;
+        }
+        button {
+            background-color: #a89fcb;
+            color: #fff;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: #8e82b7;
+        }
+        #quiz-container {
+            display: none;
+            text-align: center;
+            width: 100%;
+        }
+        #matching-game {
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        .column {
+            width: 45%;
+        }
+        .column h3 {
+            color: #5a5a5a;
+            margin-bottom: 10px;
+            animation: fadeInDown 1s ease-in-out;
+        }
+        .list {
+            list-style: none;
+            padding: 0;
+        }
+        .list-item {
+            background: #cfcfcf;
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background 0.3s ease, transform 0.3s ease;
+            color: #5a5a5a;
+            user-select: none;
+        }
+        .list-item:hover {
+            background: #bcbcbc;
+            transform: scale(1.05);
+        }
+        .selected {
+            background: #a89fcb;
+            color: #fff;
+        }
+        #result {
+            font-size: 1.2em;
+            margin-top: 20px;
+            color: #6ab04c;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        /* Animations */
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        /* SVG Icon */
+        .icon {
+            width: 50px;
+            height: 50px;
+            margin-bottom: 10px;
+            fill: #a89fcb;
+            animation: rotate 4s linear infinite;
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        hr {
+            border: none;
+            border-top: 1px solid #ddd;
+            margin: 20px 0;
+        }
+        h2 {
+            color: #5a5a5a;
+            margin-bottom: 15px;
+            animation: fadeInDown 1s ease-in-out;
+        }
+    </style>
+</head>
+<body>
+    <h1>
+        📚 Personal English Vocabulary App
+    </h1>
+    <div id="upload-section">
+        <svg class="icon" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+            <path d="M48,4H16C10.477,4,6,8.477,6,14v36c0,5.523,4.477,10,10,10h32c5.523,0,10-4.477,10-10V14C58,8.477,53.523,4,48,4z M48,50H16c-2.209,0-4-1.791-4-4V14c0-2.209,1.791-4,4-4h32c2.209,0,4,1.791,4,4v32C52,48.209,50.209,50,48,50z"/>
+            <path d="M22,22h20v4H22V22z M22,30h20v4H22V30z M22,38h20v4H22V38z"/>
+        </svg>
+        <label for="vocab-file">Upload Your Vocabulary (CSV format: word, definition)</label>
+        <input type="file" id="vocab-file" accept=".csv">
+        <button id="start-quiz">Start Quiz</button>
+        <hr>
+        <h2>Add a Vocabulary Word Manually</h2>
+        <label for="manual-word">Word:</label>
+        <input type="text" id="manual-word" placeholder="Enter word">
+        <label for="manual-definition">Definition:</label>
+        <input type="text" id="manual-definition" placeholder="Enter definition">
+        <button id="add-word">Add Word</button>
+    </div>
+    <div id="quiz-section">
+        <div id="quiz-container">
+            <div id="matching-game">
+                <div class="column" id="words-column">
+                    <h3>Words</h3>
+                    <ul class="list" id="words-list">
+                        <!-- Words will be generated here -->
+                    </ul>
+                </div>
+                <div class="column" id="definitions-column">
+                    <h3>Definitions</h3>
+                    <ul class="list" id="definitions-list">
+                        <!-- Definitions will be generated here -->
+                    </ul>
+                </div>
+            </div>
+            <div id="result"></div>
+            <button id="reset-quiz" style="margin-top: 20px; display: none;">Reset Quiz</button>
+        </div>
+    </div>
+    <!-- JavaScript for functionality -->
+    <script>
+        const uploadSection = document.getElementById('upload-section');
+        const quizSection = document.getElementById('quiz-section');
+        const startQuizButton = document.getElementById('start-quiz');
+        const vocabFileInput = document.getElementById('vocab-file');
+        const wordsList = document.getElementById('words-list');
+        const definitionsList = document.getElementById('definitions-list');
+        const resultEl = document.getElementById('result');
+        const addWordButton = document.getElementById('add-word');
+        const manualWordInput = document.getElementById('manual-word');
+        const manualDefInput = document.getElementById('manual-definition');
+        const resetQuizButton = document.getElementById('reset-quiz');
+        let vocabulary = [];
+        let matches = {};
+        let selectedWord = null;
+        let selectedDefinition = null;
+        let score = 0;
+        startQuizButton.addEventListener('click', () => {
+            const file = vocabFileInput.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const text = e.target.result;
+                    parseCSV(text);
+                    if(vocabulary.length > 0){
+                        uploadSection.style.display = 'none';
+                        quizSection.style.display = 'block';
+                        startMatchingGame();
+                    } else {
+                        alert('Please upload a valid CSV file or add words manually.');
+                    }
+                }
+                reader.readAsText(file);
+            } else if (vocabulary.length > 0) {
+                uploadSection.style.display = 'none';
+                quizSection.style.display = 'block';
+                startMatchingGame();
+            } else {
+                alert('Please upload a CSV file or add words manually.');
+            }
+        });
+        addWordButton.addEventListener('click', () => {
+            const word = manualWordInput.value.trim();
+            const definition = manualDefInput.value.trim();
+            if (word && definition) {
+                vocabulary.push({ word, definition });
+                manualWordInput.value = '';
+                manualDefInput.value = '';
+                alert(`Added "${word}" to your vocabulary.`);
+            } else {
+                alert('Please enter both word and definition.');
+            }
+        });
+        resetQuizButton.addEventListener('click', () => {
+            vocabulary = [];
+            matches = {};
+            selectedWord = null;
+            selectedDefinition = null;
+            score = 0;
+            wordsList.innerHTML = '';
+            definitionsList.innerHTML = '';
+            resultEl.innerText = '';
+            resetQuizButton.style.display = 'none';
+            uploadSection.style.display = 'block';
+            quizSection.style.display = 'none';
+        });
+        function parseCSV(text) {
+            const lines = text.split('\\n');
+            const parsed = lines.map(line => {
+                const [word, definition] = line.split(',');
+                return { word: word.trim(), definition: definition.trim() };
+            }).filter(item => item.word && item.definition);
+            vocabulary = vocabulary.concat(parsed);
+        }
+        function startMatchingGame() {
+            shuffleArray(vocabulary);
+            displayWords();
+            displayDefinitions();
+        }
+        function displayWords() {
+            wordsList.innerHTML = '';
+            vocabulary.forEach((item, index) => {
+                const li = document.createElement('li');
+                li.classList.add('list-item');
+                li.innerText = item.word;
+                li.dataset.word = item.word;
+                li.addEventListener('click', () => selectWord(li));
+                wordsList.appendChild(li);
+            });
+        }
+        function displayDefinitions() {
+            definitionsList.innerHTML = '';
+            const shuffledDefinitions = [...vocabulary.map(item => item.definition)];
+            shuffleArray(shuffledDefinitions);
+            shuffledDefinitions.forEach((def, index) => {
+                const li = document.createElement('li');
+                li.classList.add('list-item');
+                li.innerText = def;
+                li.dataset.definition = def;
+                li.addEventListener('click', () => selectDefinition(li));
+                definitionsList.appendChild(li);
+            });
+        }
+        function selectWord(element) {
+            if (selectedWord) {
+                selectedWord.classList.remove('selected');
+            }
+            selectedWord = element;
+            selectedWord.classList.add('selected');
+            checkMatch();
+        }
+        function selectDefinition(element) {
+            if (selectedDefinition) {
+                selectedDefinition.classList.remove('selected');
+            }
+            selectedDefinition = element;
+            selectedDefinition.classList.add('selected');
+            checkMatch();
+        }
+        function checkMatch() {
+            if (selectedWord && selectedDefinition) {
+                const word = selectedWord.dataset.word;
+                const definition = selectedDefinition.dataset.definition;
+                const vocabItem = vocabulary.find(item => item.word === word);
+                if (vocabItem.definition === definition) {
+                    score++;
+                    resultEl.style.color = '#6ab04c';
+                    resultEl.innerText = 'Correct! 🎉';
+                    selectedWord.style.backgroundColor = '#6ab04c';
+                    selectedDefinition.style.backgroundColor = '#6ab04c';
+                } else {
+                    resultEl.style.color = '#e74c3c';
+                    resultEl.innerText = `Incorrect! "${word}" does not match the selected definition.`;
+                    selectedWord.style.backgroundColor = '#e74c3c';
+                    selectedDefinition.style.backgroundColor = '#e74c3c';
+                }
+                // Disable further selection
+                selectedWord.removeEventListener('click', selectWord);
+                selectedDefinition.removeEventListener('click', selectDefinition);
+                selectedWord = null;
+                selectedDefinition = null;
+                // Check if all matches are done
+                if (score === vocabulary.length) {
+                    resultEl.innerText += ' You matched all correctly!';
+                    resetQuizButton.style.display = 'block';
+                }
+            }
+        }
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+        }
+    </script>
+</body>
+</html>