change: elements

WordDictationStudentApp/dist/CaptureAll-darwin-x64/Words.app/Contents/Info.plist

@@ -37,7 +37,7 @@
         <key>algorithm</key>
         <string>SHA256</string>
         <key>hash</key>
-        <string>75e5a9ebe3d6699e5358fe6723c0322596d795efc2b3f3371babb74fe0e8e238</string>
+        <string>818e25caaff3e6f16a05d4438d5c754ec44d4a108b3b5b133d0a837d752710a6</string>
       </dict>
     </dict>
     <key>LSApplicationCategoryType</key>

WordDictationStudentApp/student_app_fullscreen.html

@@ -418,6 +418,37 @@
             align-items: center;
             justify-content: center;
         }
+        /* 添加：单词容器样式 */
+        .word-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin: 20px 0;
+        }
+        /* 添加：单个字母框样式 */
+        .letter-box {
+            width: 80px;
+            height: 80px;
+            border-bottom: 3px solid #7cffcb;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 3rem;
+            font-weight: bold;
+            text-transform: uppercase;
+            position: relative;
+        }
+        /* 添加：空字母框样式 */
+        .letter-box.empty::after {
+            content: "";
+            position: absolute;
+            bottom: -3px;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background-color: #7cffcb;
+        }
         .word-blank {
             display: inline-block;
             min-width: 300px;
@@ -450,7 +481,8 @@
             box-shadow: 0 0 20px rgba(124, 255, 203, 0.5);
         } */
         /* --- 添加用于显示输入内容的元素 --- */
-        .input-display {
+        /* 修改：移除原来的input-display样式 */
+        /* .input-display {
             font-size: 2.5rem;
             color: #fff;
             margin: 20px 0;
@@ -460,7 +492,8 @@
             text-align: center;
             padding: 10px;
             border-bottom: 2px solid #7cffcb;
-        }
+        } */
+        /* --- 结束修改 --- */
         .input-indicator {
             color: #7cffcb;
             font-size: 1.2rem;
@@ -1138,13 +1171,13 @@
                     <h3 style="color: #fff; margin-bottom: 30px;">单词默写</h3>
                     <div class="word-display" id="wordDisplay">
                         <div class="input-indicator">请输入单词：</div>
-                        <div class="word-blank" id="wordBlank">_ _ _ _ _</div>
+                        <!-- 修改：创建一个容器来显示带字母的横线 -->
+                        <div class="word-container" id="wordContainer">
+                            <!-- 横线和字母将通过JavaScript动态生成 -->
+                        </div>
                         <div class="word-first-letter" id="wordFirstLetter" style="color:#ffd93d;font-size:2rem;margin-top:10px;"></div>
                         <div class="word-translation-student" id="wordTranslationStudent"></div> <!-- 新增翻译显示 -->
                     </div>
-                    <!-- --- 添加显示输入内容的元素 --- -->
-                    <div class="input-display" id="inputDisplay"></div>
-                    <!-- --- 结束添加 --- -->
                     <div class="progress-info" id="progressInfo">进度: 0/0</div>
                     <div class="progress-bar">
                         <div class="progress-fill" id="progressFill"></div>
@@ -1282,8 +1315,12 @@
 
             // 处理字母键
             if (key.length === 1 && /^[a-z]$/.test(key)) {
-                currentInput += key;
-                updateInputDisplay();
+                // 限制输入长度不超过当前单词长度
+                const currentWord = importedWords[currentWordIndex].word;
+                if (currentInput.length < currentWord.length) {
+                    currentInput += key;
+                    updateInputDisplay();
+                }
             }
             // 处理退格键
             else if (key === 'backspace') {
@@ -1301,11 +1338,32 @@
             // 忽略所有其他键，包括 Esc 键
         }
 
+        // 修改：更新输入显示函数
         function updateInputDisplay() {
-            const displayElement = document.getElementById('inputDisplay');
-            displayElement.textContent = currentInput;
+            const currentWord = importedWords[currentWordIndex].word;
+            const wordLength = currentWord.length;
+            const container = document.getElementById('wordContainer');
+            
+            // 清空容器
+            container.innerHTML = '';
+            
+            // 为每个字母位置创建框
+            for (let i = 0; i < wordLength; i++) {
+                const letterBox = document.createElement('div');
+                letterBox.className = 'letter-box';
+                
+                // 如果有输入的字母，显示它
+                if (i < currentInput.length) {
+                    letterBox.textContent = currentInput[i].toUpperCase();
+                } else {
+                    // 否则显示横线
+                    letterBox.classList.add('empty');
+                }
+                
+                container.appendChild(letterBox);
+            }
         }
-        // --- 结束新增 ---
+        // --- 结束修改 ---
 
         // 创建背景粒子
         function createParticles() {
@@ -1543,9 +1601,7 @@
                 const currentWord = currentWordObj.word;
                 const wordTranslation = currentWordObj.translation;
                 const wordLength = currentWord.length;
-                // 横线
-                const blanks = '_ '.repeat(wordLength).trim();
-                document.getElementById('wordBlank').textContent = blanks;
+                
                 // 首字母提示
                 document.getElementById('wordFirstLetter').textContent = `首字母提示：${currentWord[0].toUpperCase()}`;
                 // 翻译