-
-
- Edit src/App.tsx and save to test HMR
-
+
+
+
+
+
+ {tab === "learn" && (
+
+
+
+
+ ¡Hola! Soy el Profesor Búho. Hoy te enseño dónde va la tilde 🪄
+
+
+ -
+ Agudas: la voz fuerte está en la última sílaba. camión
+
+ -
+ Graves (llanas): la voz fuerte está en la penúltima. árbol
+
+ -
+ Esdrújulas: la voz fuerte está en la antepenúltima. rápido
+
+
+
+
+
+ -
+ Agudas ➜ llevan tilde si terminan en vocal, n o s.
+
+ -
+ Graves ➜ llevan tilde si NO terminan en vocal, n o s.
+
+ -
+ Esdrújulas ➜ siempre llevan tilde.
+
+
+
+
+
+
+
✔️ Llevan tilde
+
camión, corazón, inglés, café, lápiz, árbol, rápido
+
+
+
✖️ No llevan tilde
+
cama, papel, reloj, joven, examen, paraguas
+
+
+
+
+
-
- Click on the Vite and React logos to learn more
+
+ );
+}
+
+function LearnPlayground() {
+ const sample = WORDS.find((w) => w.base === "arbol");
+ const [showTip, setShowTip] = useState(false);
+
+ return (
+
+ Ejemplo guiado
+
+ ¿Por qué árbol lleva tilde y cama no?
-
- )
+
+
+
+
+ árbol → es grave y termina en l (consonante ≠ n/s) →
+ lleva tilde
+
+
+
+
+ cama → es grave y termina en vocal →
+ no lleva tilde
+
+
+
+ Truco del búho: si la palabra es grave y termina en
+ vocal, n o s, casi nunca lleva tilde. Si termina en otra consonante, casi siempre sí.
+
+
+ )}
+
+
+ );
}
-export default App
+function Practice() {
+ const [index, setIndex] = useState(0);
+ const [score, setScore] = useState(0);
+ const [feedback, setFeedback] = useState(null);
+ const [streak, setStreak] = useState(0);
+
+ const item = WORDS[index % WORDS.length];
+ const wordWithoutAccent = stripAccents(item.correcto);
+
+ function answer(tieneTilde) {
+ const correcto = item.correcto !== wordWithoutAccent; // si la forma correcta tiene tilde visual
+ const acierta = tieneTilde === correcto;
+
+ setFeedback({
+ ok: acierta,
+ msg: acierta
+ ? `¡Muy bien! ${item.correcto} ✓`
+ : `Casi. La forma correcta es ${item.correcto}.`,
+ regla: item.regla,
+ });
+
+ if (acierta) {
+ setScore((s) => s + 10);
+ setStreak((r) => r + 1);
+ } else {
+ setStreak(0);
+ }
+ }
+
+ function next() {
+ setFeedback(null);
+ setIndex((i) => i + 1);
+ }
+
+ return (
+
+
+
+
Practica
+
Puntos: {score}
+
+
+
+
¿Esta palabra lleva tilde?
+
+ {stripAccents(item.correcto)}
+
+
+
+
+
+
+
+
+ {feedback && (
+
+ {feedback.msg}
+ {feedback.regla}
+
+
+ )}
+
+
+
+
+ Racha: {streak} {streak >= 3 ? "⭐" : ""}
+
+
+
+
+ - Agudas → tilde si terminan en vocal, n o s.
+ - Graves → tilde si NO terminan en vocal, n o s.
+ - Esdrújulas → siempre tilde.
+
+
+
+
+ Di la palabra en voz alta y toca con la palma la sílaba que suena más fuerte. ¡Ahí vive la tilde si le toca! 🦉
+
+
+
+ );
+}
+
+function Game({ words }) {
+ const [i, setI] = useState(0);
+ const [points, setPoints] = useState(0);
+ const [msg, setMsg] = useState("");
+ const w = words[i % words.length];
+
+ function pick(tipo) {
+ const ok = w.tipo === tipo;
+ setMsg(
+ ok
+ ? `¡Correcto! ${w.correcto} es ${w.tipo}.`
+ : `Ups, ${w.correcto} no es ${tipo}. Es ${w.tipo}.`
+ );
+ setPoints((p) => p + (ok ? 10 : 0));
+ }
+
+ return (
+
+
+
+
Clasifica la palabra
+
Puntos: {points}
+
+
+
+
+ {stripAccents(w.correcto)}
+
+
+
+ {["aguda", "grave", "esdrújula"].map((t) => (
+
+ ))}
+
+
+ {msg && (
+
+
{msg}
+
{w.regla}
+
+
+ )}
+
+
+
+
+ - Si la fuerza está al final, piensa en aguda (camión).
+ - Si está en el medio, suele ser grave (árbol, cama).
+ - Si está muy al principio, es esdrújula (rápido).
+
+
+
+
+ Clasifica 10 palabras con 80 puntos o más para ganar la medalla 🏅
+
+
+ );
+}