-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Aded reverse functionality (kanas to romaji)
- Loading branch information
codecruz
committed
Feb 2, 2025
1 parent
e017ff8
commit f5e88f8
Showing
5 changed files
with
146 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,80 @@ | ||
| let hiraganaData = []; | ||
| let currentCharacter = null; | ||
|
|
||
| // Elementos del DOM | ||
| const characterElement = document.getElementById('character'); | ||
| const answerInput = document.getElementById('answer'); | ||
| const checkButton = document.getElementById('check'); | ||
| const resultElement = document.getElementById('result'); | ||
|
|
||
| fetch('../data/hiragana.json') | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| let isReverseMode = false; | ||
| let hiraganaData = []; | ||
| let currentCharacter = null; | ||
| let currentRomanization = null; | ||
|
|
||
| async function loadHiraganaData() { | ||
| try { | ||
| const response = await fetch('../data/hiragana.json'); | ||
| const data = await response.json(); | ||
| hiraganaData = data.hiragana; | ||
| showRandomCharacter(); | ||
| }) | ||
| .catch(error => console.error('Error cargando el JSON:', error)); | ||
| loadNewCharacter(); | ||
| } catch (error) { | ||
| console.error('Error cargando el JSON:', error); | ||
| } | ||
| } | ||
|
|
||
| function showRandomCharacter() { | ||
| function getRandomCharacter() { | ||
| const randomIndex = Math.floor(Math.random() * hiraganaData.length); | ||
| currentCharacter = hiraganaData[randomIndex]; | ||
| characterElement.textContent = currentCharacter.character; | ||
| return hiraganaData[randomIndex]; | ||
| } | ||
|
|
||
| function updateUI() { | ||
| const characterElement = document.getElementById("character"); | ||
| const answerInput = document.getElementById("answer"); | ||
| const toggleButton = document.getElementById("toggle-mode"); | ||
|
|
||
| if (isReverseMode) { | ||
| // Modo Reverse: Mostrar la romanización y pedir el carácter | ||
| characterElement.textContent = currentRomanization; | ||
| answerInput.placeholder = "Escribe el carácter en japonés"; | ||
| } else { | ||
| // Modo Normal: Mostrar el carácter y pedir la romanización | ||
| characterElement.textContent = currentCharacter; | ||
| answerInput.placeholder = "Escribe la romanización"; | ||
| } | ||
| } | ||
|
|
||
| function checkAnswer() { | ||
| const userAnswer = answerInput.value.trim().toLowerCase(); | ||
| const correctAnswer = currentCharacter.romanization; | ||
| const userAnswer = document.getElementById("answer").value.trim(); | ||
| const resultElement = document.getElementById("result"); | ||
|
|
||
| if (userAnswer === correctAnswer) { | ||
| resultElement.textContent = '¡Correcto! 🎉'; | ||
| resultElement.style.color = 'green'; | ||
| showRandomCharacter(); // Mostrar un nuevo carácter aleatorio | ||
| if (isReverseMode) { | ||
| // Modo Reverse: Comparar con el carácter en japonés | ||
| if (userAnswer === currentCharacter) { | ||
| resultElement.textContent = "¡Correcto!"; | ||
| resultElement.style.color = "green"; | ||
| } else { | ||
| resultElement.textContent = `Incorrecto. La respuesta correcta es: ${currentCharacter}`; | ||
| resultElement.style.color = "red"; | ||
| } | ||
| } else { | ||
| resultElement.textContent = `Incorrecto. La respuesta correcta es "${correctAnswer}". ❌`; | ||
| resultElement.style.color = 'red'; | ||
| // Modo Normal: Comparar con la romanización | ||
| if (userAnswer === currentRomanization) { | ||
| resultElement.textContent = "¡Correcto!"; | ||
| resultElement.style.color = "green"; | ||
| } else { | ||
| resultElement.textContent = `Incorrecto. La respuesta correcta es: ${currentRomanization}`; | ||
| resultElement.style.color = "red"; | ||
| } | ||
| } | ||
|
|
||
| // Limpiar el campo de entrada | ||
| answerInput.value = ''; | ||
| document.getElementById("answer").value = ""; | ||
| loadNewCharacter(); | ||
| } | ||
|
|
||
| // Eventos | ||
| checkButton.addEventListener('click', checkAnswer); | ||
| answerInput.addEventListener('keypress', (e) => { | ||
| if (e.key === 'Enter') { | ||
| checkAnswer(); | ||
| } | ||
| }); | ||
| function loadNewCharacter() { | ||
| const randomChar = getRandomCharacter(); | ||
| currentCharacter = randomChar.character; | ||
| currentRomanization = randomChar.romanization; | ||
| updateUI(); | ||
| } | ||
|
|
||
| document.getElementById("toggle-mode").addEventListener("click", () => { | ||
| isReverseMode = !isReverseMode; | ||
| updateUI(); | ||
| }); | ||
|
|
||
| document.getElementById("check").addEventListener("click", checkAnswer); | ||
|
|
||
| loadHiraganaData(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,80 @@ | ||
| let isReverseMode = false; | ||
| let katakanaData = []; | ||
| let currentCharacter = null; | ||
| let currentRomanization = null; | ||
|
|
||
| // Elementos del DOM | ||
| const characterElement = document.getElementById('character'); | ||
| const answerInput = document.getElementById('answer'); | ||
| const checkButton = document.getElementById('check'); | ||
| const resultElement = document.getElementById('result'); | ||
|
|
||
| fetch('../data/katakana.json') | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| async function loadKatakanaData() { | ||
| try { | ||
| const response = await fetch('../data/katakana.json'); | ||
| const data = await response.json(); | ||
| katakanaData = data.katakana; | ||
| showRandomCharacter(); | ||
| }) | ||
| .catch(error => console.error('Error cargando el JSON:', error)); | ||
| loadNewCharacter(); | ||
| } catch (error) { | ||
| console.error('Error cargando el JSON:', error); | ||
| } | ||
| } | ||
|
|
||
| function showRandomCharacter() { | ||
| function getRandomCharacter() { | ||
| const randomIndex = Math.floor(Math.random() * katakanaData.length); | ||
| currentCharacter = katakanaData[randomIndex]; | ||
| characterElement.textContent = currentCharacter.character; | ||
| return katakanaData[randomIndex]; | ||
| } | ||
|
|
||
| function updateUI() { | ||
| const characterElement = document.getElementById("character"); | ||
| const answerInput = document.getElementById("answer"); | ||
| const toggleButton = document.getElementById("toggle-mode"); | ||
|
|
||
| if (isReverseMode) { | ||
| // Modo Reverse: Mostrar la romanización y pedir el carácter | ||
| characterElement.textContent = currentRomanization; | ||
| answerInput.placeholder = "Escribe el carácter en japonés"; | ||
| } else { | ||
| // Modo Normal: Mostrar el carácter y pedir la romanización | ||
| characterElement.textContent = currentCharacter; | ||
| answerInput.placeholder = "Escribe la romanización"; | ||
| } | ||
| } | ||
|
|
||
| function checkAnswer() { | ||
| const userAnswer = answerInput.value.trim().toLowerCase(); | ||
| const correctAnswer = currentCharacter.romanization; | ||
| const userAnswer = document.getElementById("answer").value.trim(); | ||
| const resultElement = document.getElementById("result"); | ||
|
|
||
| if (userAnswer === correctAnswer) { | ||
| resultElement.textContent = '¡Correcto! 🎉'; | ||
| resultElement.style.color = 'green'; | ||
| showRandomCharacter(); // Mostrar un nuevo carácter aleatorio | ||
| if (isReverseMode) { | ||
| // Modo Reverse: Comparar con el carácter en japonés | ||
| if (userAnswer === currentCharacter) { | ||
| resultElement.textContent = "¡Correcto!"; | ||
| resultElement.style.color = "green"; | ||
| } else { | ||
| resultElement.textContent = `Incorrecto. La respuesta correcta es: ${currentCharacter}`; | ||
| resultElement.style.color = "red"; | ||
| } | ||
| } else { | ||
| resultElement.textContent = `Incorrecto. La respuesta correcta es "${correctAnswer}". ❌`; | ||
| resultElement.style.color = 'red'; | ||
| // Modo Normal: Comparar con la romanización | ||
| if (userAnswer === currentRomanization) { | ||
| resultElement.textContent = "¡Correcto!"; | ||
| resultElement.style.color = "green"; | ||
| } else { | ||
| resultElement.textContent = `Incorrecto. La respuesta correcta es: ${currentRomanization}`; | ||
| resultElement.style.color = "red"; | ||
| } | ||
| } | ||
|
|
||
| // Limpiar el campo de entrada | ||
| answerInput.value = ''; | ||
| document.getElementById("answer").value = ""; | ||
| loadNewCharacter(); | ||
| } | ||
|
|
||
| // Eventos | ||
| checkButton.addEventListener('click', checkAnswer); | ||
| answerInput.addEventListener('keypress', (e) => { | ||
| if (e.key === 'Enter') { | ||
| checkAnswer(); | ||
| } | ||
| }); | ||
| function loadNewCharacter() { | ||
| const randomChar = getRandomCharacter(); | ||
| currentCharacter = randomChar.character; | ||
| currentRomanization = randomChar.romanization; | ||
| updateUI(); | ||
| } | ||
|
|
||
| document.getElementById("toggle-mode").addEventListener("click", () => { | ||
| isReverseMode = !isReverseMode; | ||
| updateUI(); | ||
| }); | ||
|
|
||
| document.getElementById("check").addEventListener("click", checkAnswer); | ||
|
|
||
| loadKatakanaData(); |
Oops, something went wrong.