milwright commited on
Commit
0aa8e05
·
1 Parent(s): b451c6e

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

Files changed (2) hide show
  1. src/clozeGameEngine.js +2 -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 * 12)}px;">
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: italic;
 
 
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 {