antico5 · February 24, 2024 19:12
diff --git a/langapp.html b/langapp.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Word Learning App</title>
 <style>
  body { font-family: Arial, sans-serif; margin: 20px; }
  .container { max-width: 600px; margin: auto; }
  input, button { padding: 10px; margin: 5px; }
  .success { color: green; }
  .failure { color: red; }
 </style>
 </head>
 <body>
 <div class="container">
  <h2>Add New Word</h2>
  <input type="text" id="word" placeholder="Word" autofocus>
  <input type="text" id="meaning" placeholder="Meaning">
  <button id="addWord">Add Word</button>

  <h2>Guess the Meaning</h2>
  <div id="randomWord"></div>
  <input type="text" id="guess" placeholder="Your guess">
  <div id="feedback"></div>

  <h2>Words Stored: <span id="wordsCount">0</span></h2>

  <button id="exportWords">Export Words</button>
  <button id="importWords">Import Words</button>
  <input type="file" id="fileInput" style="display:none;">
 </div>

 <script>
  let words = JSON.parse(localStorage.getItem('words')) || {};
  let currentWord = '';

  const updateWordsCount = () => document.getElementById('wordsCount').innerText = Object.keys(words).length;
  updateWordsCount();

  document.getElementById('meaning').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      addWord();
    }
  });

  document.getElementById('guess').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      checkGuess();
    }
  });

  document.getElementById('addWord').addEventListener('click', addWord);

  document.getElementById('exportWords').addEventListener('click', exportWords);
  document.getElementById('importWords').addEventListener('click', () => document.getElementById('fileInput').click());
  document.getElementById('fileInput').addEventListener('change', importWords);

  function addWord() {
    const word = document.getElementById('word').value.trim();
    const meaning = document.getElementById('meaning').value.trim();
    if (word && meaning) {
      words[word] = { meaning: meaning, score: 1 };
      localStorage.setItem('words', JSON.stringify(words));
      document.getElementById('word').value = '';
      document.getElementById('meaning').value = '';
      document.getElementById('word').focus();
      updateWordsCount();
      pickRandomWord();
    }
  }

  function pickRandomWord() {
    const weightedWords = Object.entries(words).flatMap(([word, {score}]) => Array(score).fill(word));
    if (weightedWords.length === 0) {
      document.getElementById('randomWord').innerText = "Add some words to start!";
      return;
    }
    currentWord = weightedWords[Math.floor(Math.random() * weightedWords.length)];
    document.getElementById('randomWord').innerText = `What is the meaning of "${currentWord}"?`;
    document.getElementById('guess').value = '';
  }

  function checkGuess() {
    const guess = document.getElementById('guess').value.trim();
    const feedback = document.getElementById('feedback');
    if (guess.toLowerCase() === words[currentWord].meaning.toLowerCase()) {
      feedback.innerText = "Correct!";
      feedback.className = "success";
      words[currentWord].score = Math.max(words[currentWord].score - 1, 1);
    } else {
      feedback.innerText = `Wrong! The meaning is ${ words[currentWord].meaning.toLowerCase()}`;
      feedback.className = "failure";
      words[currentWord].score += 1;
    }
    localStorage.setItem('words', JSON.stringify(words));
    pickRandomWord();
  }

  function exportWords() {
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(words));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", "words.json");
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  }

  function importWords(event) {
    const fileReader = new FileReader();
    fileReader.onload = function(e) {
      const newWords = JSON.parse(e.target.result);
      // Merge newWords into existing words, updating scores if word already exists
      for (const [word, data] of Object.entries(newWords)) {
        if (words[word]) {
          // If word exists, adjust score to be the average
          words[word].score = Math.round((words[word].score + data.score) / 2);
        } else {
          // Add new word
          words[word] = data;
        }
      }
      localStorage.setItem('words', JSON.stringify(words));
      updateWordsCount();
      pickRandomWord();
    };
    fileReader.readAsText(event.target.files[0]);
    document.getElementById('fileInput').value = ''; // Reset file input
  }

  pickRandomWord();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Word Learning App</title>
	<style>
	body { font-family: Arial, sans-serif; margin: 20px; }
	.container { max-width: 600px; margin: auto; }
	input, button { padding: 10px; margin: 5px; }
	.success { color: green; }
	.failure { color: red; }
	</style>
	</head>
	<body>
	<div class="container">
	<h2>Add New Word</h2>
	<input type="text" id="word" placeholder="Word" autofocus>
	<input type="text" id="meaning" placeholder="Meaning">
	<button id="addWord">Add Word</button>

	<h2>Guess the Meaning</h2>
	<div id="randomWord"></div>
	<input type="text" id="guess" placeholder="Your guess">
	<div id="feedback"></div>

	<h2>Words Stored: <span id="wordsCount">0</span></h2>

	<button id="exportWords">Export Words</button>
	<button id="importWords">Import Words</button>
	<input type="file" id="fileInput" style="display:none;">
	</div>

	<script>
	let words = JSON.parse(localStorage.getItem('words')) \|\| {};
	let currentWord = '';

	const updateWordsCount = () => document.getElementById('wordsCount').innerText = Object.keys(words).length;
	updateWordsCount();

	document.getElementById('meaning').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	addWord();
	}
	});

	document.getElementById('guess').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	checkGuess();
	}
	});

	document.getElementById('addWord').addEventListener('click', addWord);

	document.getElementById('exportWords').addEventListener('click', exportWords);
	document.getElementById('importWords').addEventListener('click', () => document.getElementById('fileInput').click());
	document.getElementById('fileInput').addEventListener('change', importWords);

	function addWord() {
	const word = document.getElementById('word').value.trim();
	const meaning = document.getElementById('meaning').value.trim();
	if (word && meaning) {
	words[word] = { meaning: meaning, score: 1 };
	localStorage.setItem('words', JSON.stringify(words));
	document.getElementById('word').value = '';
	document.getElementById('meaning').value = '';
	document.getElementById('word').focus();
	updateWordsCount();
	pickRandomWord();
	}
	}

	function pickRandomWord() {
	const weightedWords = Object.entries(words).flatMap(([word, {score}]) => Array(score).fill(word));
	if (weightedWords.length === 0) {
	document.getElementById('randomWord').innerText = "Add some words to start!";
	return;
	}
	currentWord = weightedWords[Math.floor(Math.random() * weightedWords.length)];
	document.getElementById('randomWord').innerText = `What is the meaning of "${currentWord}"?`;
	document.getElementById('guess').value = '';
	}

	function checkGuess() {
	const guess = document.getElementById('guess').value.trim();
	const feedback = document.getElementById('feedback');
	if (guess.toLowerCase() === words[currentWord].meaning.toLowerCase()) {
	feedback.innerText = "Correct!";
	feedback.className = "success";
	words[currentWord].score = Math.max(words[currentWord].score - 1, 1);
	} else {
	feedback.innerText = `Wrong! The meaning is ${ words[currentWord].meaning.toLowerCase()}`;
	feedback.className = "failure";
	words[currentWord].score += 1;
	}
	localStorage.setItem('words', JSON.stringify(words));
	pickRandomWord();
	}

	function exportWords() {
	const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(words));
	const downloadAnchorNode = document.createElement('a');
	downloadAnchorNode.setAttribute("href", dataStr);
	downloadAnchorNode.setAttribute("download", "words.json");
	document.body.appendChild(downloadAnchorNode);
	downloadAnchorNode.click();
	downloadAnchorNode.remove();
	}

	function importWords(event) {
	const fileReader = new FileReader();
	fileReader.onload = function(e) {
	const newWords = JSON.parse(e.target.result);
	// Merge newWords into existing words, updating scores if word already exists
	for (const [word, data] of Object.entries(newWords)) {
	if (words[word]) {
	// If word exists, adjust score to be the average
	words[word].score = Math.round((words[word].score + data.score) / 2);
	} else {
	// Add new word
	words[word] = data;
	}
	}
	localStorage.setItem('words', JSON.stringify(words));
	updateWordsCount();
	pickRandomWord();
	};
	fileReader.readAsText(event.target.files[0]);
	document.getElementById('fileInput').value = ''; // Reset file input
	}

	pickRandomWord();
	</script>
	</body>
	</html>