Spaces:
Sleeping
Sleeping
fix: add spaced underscores and mobile dropdown for questions
Browse files- Change placeholder from "____" to "_ _ _ _" to show letter count
- Switch to dotted underlines for better visual distinction
- Add dropdown menu on mobile to prevent button overflow
- src/clozeGameEngine.js +2 -2
- src/styles.css +3 -1
src/clozeGameEngine.js
CHANGED
@@ -605,8 +605,8 @@ class ClozeGame {
|
|
605 |
<input type="text"
|
606 |
class="cloze-input"
|
607 |
data-blank-index="${index}"
|
608 |
-
placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
|
609 |
-
style="width: ${Math.max(80, blank.originalWord.length *
|
610 |
<button id="${chatButtonId}"
|
611 |
class="chat-button text-blue-500 hover:text-blue-700 text-sm"
|
612 |
data-blank-index="${index}"
|
|
|
605 |
<input type="text"
|
606 |
class="cloze-input"
|
607 |
data-blank-index="${index}"
|
608 |
+
placeholder="${'_ '.repeat(Math.max(3, blank.originalWord.length)).trim()}"
|
609 |
+
style="width: ${Math.max(80, blank.originalWord.length * 16)}px;">
|
610 |
<button id="${chatButtonId}"
|
611 |
class="chat-button text-blue-500 hover:text-blue-700 text-sm"
|
612 |
data-blank-index="${index}"
|
src/styles.css
CHANGED
@@ -255,7 +255,9 @@
|
|
255 |
|
256 |
.cloze-input::placeholder {
|
257 |
color: rgba(0, 0, 0, 0.4);
|
258 |
-
font-style:
|
|
|
|
|
259 |
}
|
260 |
|
261 |
.typewriter-button {
|
|
|
255 |
|
256 |
.cloze-input::placeholder {
|
257 |
color: rgba(0, 0, 0, 0.4);
|
258 |
+
font-style: normal;
|
259 |
+
font-family: monospace;
|
260 |
+
letter-spacing: 0.1em;
|
261 |
}
|
262 |
|
263 |
.typewriter-button {
|