React.js – Тема 5 – Результат – Courses WebSkill

Слідкуйте за нами:

Facebook Instagram Youtube

Тема 5. React.js Самостійна робота

Приклад
Готовий код

Створення Додатку вивчення нових мов

Створення додатка для вивчення нових мов, особливо англійської, це захоплюючий проект. Щоб реалізувати це завдання на React, вам знадобиться створити компоненти для навчання слів, вправ і тестів.
Це загальний опис кроків і файлів для створення додатку для вивчення англійської мови на React. Ви можете розробити та розширити кожен компонент.

Обов'язкові кроки: 1-6, 9 та 10
Кроки 7 та 8 - не обов'язкові до виконання

Крок 1: Підготовка проекту:
Створіть новий проект React або використовуйте існуючий проект.

Крок 2: Отримання словникових даних
Знайдіть джерело словникових даних для англійської мови. Це може бути JSON-файл або API для отримання слів і їх перекладів.

Крок 3: Створення компонентів
Створіть компоненти для навчання слів, вправ і тестів.

Крок 4: Вивчення слів
Розробіть компонент "LearnWords", який дозволяє користувачам вивчати нові слова. Виводьте англійське слово та поле для введення перекладу. Перевіряйте правильність введеного перекладу та надавайте зворотний зв'язок користувачу.

Крок 5: Вправи 
Створіть компонент "Exercises", де користувачі можуть виконувати вправи на використання слів в різних контекстах. Наприклад, створення речень з використанням вивчених слів.

Крок 6: Тести 
Розробіть компонент "Tests" для проведення тестів на перевірку знань користувача. Тести можуть включати питання на переклад слів або вправи на вибір правильного перекладу.

Крок 7: Словникові дані
Відображайте слова для вивчення користувачам з використанням даних, які ви отримали на кроці. Можливо, ви захочете створити інтерфейс для додавання нових слів до вивчення.

Крок 8: Статистика 
Додайте статистику та звіти про успішність користувачів у вивченні слів та проходженні вправ і тестів.

Крок 9: Стилі та дизайн
Визначте стилі та дизайн для вашого додатку за допомогою CSS або інших інструментів для стилізації.

Крок 10: Тестування та налагодження 
Перевірте додаток та переконайтесь, що всі функції працюють коректно.

Файли, які потрібно створити та відредагувати

  1. App.js: Головний файл додатку, де ви розмістите ваші компоненти та основну логіку додатку.

  2. LearnWords.js: Файл з компонентом "LearnWords", де користувачі можуть вивчати нові слова.

  3. Exercises.js: Файл з компонентом "Exercises", де користувачі виконують вправи на використання слів.

  4. Tests.js: Файл з компонентом "Tests", де користувачі проходять тести на перевірку своїх знань.

  5. WordData.js: Файл для зберігання словникових даних.

  6. Statistics.js: Файл з компонентом для відображення статистики та звітів.

  7. styles.css: Файл для стилів та дизайну додатку.

Добавлення функцій для 7-го та 8-го кроків

  1. Створення бази даних або сховища: Спроектуйте базу даних або локальне сховище, де ви будете зберігати статистику користувачів. Створіть таблиці чи колекції для зберігання інформації про слова, вправи, тести та успішність користувачів.

  2. Збір статистики: Розробіть логіку для збору статистики під час вивчення слів, виконання вправ і проходження тестів. Наприклад, ви можете фіксувати, які слова користувач успішно вивчив, які вправи він виконав і які тести успішно склав.

  3. Зберігання даних: Зберігайте зібрану статистику в базі даних або локальному сховищі. В кожному записі про користувача включіть інформацію про його успішність, наприклад, кількість вивчених слів, результати вправ і тестів.

  4. Відображення статистики користувачам: Створіть сторінки або компоненти, які дозволять користувачам переглядати свою статистику та звіти. Виводьте інформацію про вивчені слова, виконані вправи та результати тестів.

  5. Аналіз і звіти: Розробіть аналітичні інструменти для агрегації статистики користувачів. Наприклад, ви можете створити звіти про загальну успішність користувачів у вивченні слів, аналізувати популярність певних слів або ефективність вправ і тестів.

  6. Заохочення користувачів: Використовуйте статистику для надання користувачам заохочення та підказок. Наприклад, надавайте нагороди за досягнення певних результатів або рекомендуйте ресурси для подальшого вивчення.

  1. Статистика для кожного користувача: Створіть окремий розділ для кожного користувача, де ви можете зберігати статистику, наприклад, кількість правильних і неправильних відповідей, кількість вивчених слів тощо.

  2. Графіки та діаграми: Використовуйте бібліотеки для створення графіків та діаграм, щоб візуалізувати статистичні дані. Наприклад, ви можете створити кругову діаграму, щоб показати відсоток правильних та неправильних відповідей.

  3. Звіти про вивчення слів: Виводьте користувачам звіти про слова, які вони вже вивчили. Це може бути список слів, які вони правильно переклали в определений кількість разів.

  4. Динамічні звіти: Спроектуйте сторінку зі статистикою, яка може автоматично оновлюватися при кожному сеансі користувача. Це дозволить користувачам відстежувати свій прогрес в реальному часі.

  5. Бейджі та нагороди: Введіть систему бейджів або нагород для користувачів, які досягли певних результатів. Наприклад, "Майстер перекладу" за відсоток правильних відповідей.

  6. Історія змін: Зберігайте історію змін статистики, щоб користувачі могли переглядати свій прогрес з часом.

  7. Мотивація до вивчення: Додайте функції для підштовхування користувачів до вивчення, такі як щоденні цілі, рівні складності тощо.

Вміст кожного із файлів готового додатку вивчення мов

Файл App.js
App.js
import React, { Component } from 'react';
import './App.css';
import LearnWords from './LearnWords';
import Exercises from './Exercises';
import Tests from './Tests';

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentComponent: 'tests', // Початковий компонент для відображення
    };
  }

  changeComponent = (componentName) => {
    this.setState({ currentComponent: componentName });
  };

  render() {
    const { currentComponent } = this.state;

    return (
      <div className="App">
        <h1>Додаток для вивчення слів</h1>
        <nav>
          <ul>
            <li onClick={() => this.changeComponent('learnWords')}>Навчання слів</li>
            <li onClick={() => this.changeComponent('exercises')}>Вправи</li>
            <li onClick={() => this.changeComponent('tests')}>Тести</li>
          </ul>
        </nav>
        {currentComponent === 'learnWords' && <LearnWords />}
        {currentComponent === 'exercises' && <Exercises />}
        {currentComponent === 'tests' && <Tests />}
      </div>
    );
  }
}

export default App;
Файл App.css
App.css
/* Стилізація загального контейнера додатку */
.App {
  font-family: Arial, sans-serif;
  text-align: center;
}

/* Стилізація заголовка */
h1 {
  font-size: 36px;
  color: #333;
  margin: 20px 0;
}

/* Стилізація навігаційного меню */
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 20px;
  font-size: 20px;
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

nav li:hover {
  color: #0056b3;
}
/* Стилізація контейнера LearnWords */
.learn-words-container {
  text-align: center;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Стилізація заголовка "Навчання слів" */
h2 {
  font-size: 24px;
  color: #333;
}

/* Стилізація слова для вивчення */
.word-display {
  font-size: 20px;
  color: #333;
  margin: 20px 0;
}

/* Стилізація поля для введення перекладу */
.translation-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  font-size: 16px;
  margin: 10px 0;
}

/* Стилізація кнопки "Перевірити" */
.check-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}

.check-button:hover {
  background-color: #0056b3;
}

/* Стилізація повідомлення зворотного зв'язку */
.feedback-message {
  font-size: 18px;
  margin: 10px 0;
}

/* Стилізація кнопки "Наступне слово" */
.next-word-button {
  background-color: #4caf50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 20px 0;
}

.next-word-button:hover {
  background-color: #45a049;
}
/* Стилізація контейнера Exercises */
.exercises-container {
  text-align: center;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}

/* Стилізація заголовка "Вправи" */
h2 {
  font-size: 24px;
  color: #333;
}

/* Стилізація тексту "Створіть речення, використовуючи слово" */
.sentence-instruction {
  font-size: 20px;
  color: #333;
  margin: 20px 0;
}

/* Стилізація поля для введення речення */
.sentence-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  font-size: 16px;
  margin: 10px 0;
}

/* Стилізація кнопки "Перевірити" */
.check-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}

.check-button:hover {
  background-color: #0056b3;
}

/* Стилізація повідомлення зворотного зв'язку */
.feedback-message {
  font-size: 18px;
  margin: 10px 0;
}

/* Стилізація кнопки "Наступне слово" */
.next-word-button {
  background-color: #4caf50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 20px 0;
}

.next-word-button:hover {
  background-color: #45a049;
}
/* Стилізація контейнера Tests */
.tests-container {
  text-align: center;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}

/* Стилізація заголовка "Тести" */
h2 {
  font-size: 24px;
  color: #333;
}

/* Стилізація тексту "Як перекладається слово" */
.question-instruction {
  font-size: 20px;
  color: #333;
  margin: 20px 0;
}

/* Стилізація форми з питаннями */
.question-form {
  display: flex;
  flex-direction: column;
}

/* Стилізація варіантів відповідей */
.answer-option {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

/* Стилізація тексту варіанта відповіді */
.answer-label {
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

/* Стилізація кнопки "Перевірити" */
.check-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin-top: 10px;
}

.check-button:hover {
  background-color: #0056b3;
}

/* Стилізація повідомлення зворотного зв'язку */
.feedback-message {
  font-size: 18px;
  margin: 10px 0;
}

/* Стилізація кнопок "Попереднє питання" і "Наступне питання" */
.navigation-button {
  background-color: #4caf50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 20px 10px;
}

.navigation-button:hover {
  background-color: #45a049;
}
Файл WordData.js
WordData.js
const wordData = [
  { word: 'apple', translation: 'яблуко' },
  { word: 'car', translation: 'автомобіль' },
  { word: 'house', translation: 'будинок' },
  { word: 'book', translation: 'книга' },
  { word: 'pen', translation: 'ручка' },
  { word: 'table', translation: 'стіл' },
  { word: 'chair', translation: 'стілець' },
  { word: 'phone', translation: 'телефон' },
  { word: 'music', translation: 'музика' },
  { word: 'food', translation: 'їжа' },
  { word: 'water', translation: 'вода' },
];

export default wordData;
Файл LearnWords.js
LearnWords.js
import React, { Component } from 'react';
import wordData from './WordData';

class LearnWords extends Component {
  constructor() {
    super();
    this.state = {
      currentWordIndex: 0,
      userTranslation: '',
      feedback: '', // Зворотній зв'язок для користувача
    };
  }

  // Функція для перевірки правильності перекладу
  checkTranslation = () => {
    const { currentWordIndex, userTranslation } = this.state;
    const currentWord = wordData[currentWordIndex];

    if (userTranslation.toLowerCase() === currentWord.translation.toLowerCase()) {
      this.setState({ feedback: 'Правильно!' });
    } else {
      this.setState({ feedback: 'Неправильно. Спробуйте ще раз.' });
    }
  };

  // Функція для переходу до наступного слова
  nextWord = () => {
    const { currentWordIndex } = this.state;

    if (currentWordIndex < wordData.length - 1) {
      this.setState({
        currentWordIndex: currentWordIndex + 1,
        userTranslation: '',
        feedback: '',
      });
    } else {
      this.setState({ feedback: 'Ви вивчили всі слова!' });
    }
  };

    // Функція для переходу до попереднього слова
    prevWord = () => {
        const { currentWordIndex } = this.state;
   
        if (currentWordIndex > 0) {
          this.setState({
            currentWordIndex: currentWordIndex - 1,
            userTranslation: '',
            feedback: '',
          });
        }
      };

  // Оновлення поля введення перекладу
  handleUserTranslationChange = (event) => {
    this.setState({ userTranslation: event.target.value });
  };

  render() {
    const { currentWordIndex, userTranslation, feedback } = this.state;
    const currentWord = wordData[currentWordIndex];

    return (
      <div className="learn-words-container">
        <h2>Навчання слів</h2>
        <p className="word-display">Слово: {currentWord.word}</p>
        <input
          type="text"
          placeholder="Введіть переклад"
          value={userTranslation}
          onChange={this.handleUserTranslationChange}
          className="translation-input"
        />
        <button onClick={this.checkTranslation} className="check-button">Перевірити</button>
        {feedback && <pclassName="feedback-message">{feedback}</p>}
        <button onClick={this.prevWord} className="next-word-button">Попереднє слово</button>
        <buttononClick={this.nextWord}className="next-word-button">Наступне слово</button>
      </div>
    );
  }
}

export default LearnWords;
Файл Exercises.js
Exercises.js
import React, { Component } from 'react';
import wordData from './WordData';

class Exercises extends Component {
  constructor() {
    super();
    this.state = {
      currentWordIndex: 0,
      sentence: '', // Речення, яке користувач вводить
      feedback: '', // Зворотній зв'язок для користувача
    };
  }

  // Функція для перевірки речення
  checkSentence = () => {
    const { currentWordIndex, sentence } = this.state;
    const currentWord = wordData[currentWordIndex];
    const englishSentenceRegex = /^[a-zA-Z\s,.'-]+$/;

    if (!englishSentenceRegex.test(sentence)) {
      this.setState({ feedback: 'Будь ласка, введіть англійське речення.' });
      return;
    }

    if (sentence.toLowerCase().includes(currentWord.word.toLowerCase())) {
      this.setState({ feedback: 'Правильно!' });
    } else {
      this.setState({ feedback: 'Неправильно. Спробуйте ще раз.' });
    }
  };

  // Функція для переходу до наступного слова
  nextWord = () => {
    const { currentWordIndex } = this.state;

    if (currentWordIndex < wordData.length - 1) {
      this.setState({
        currentWordIndex: currentWordIndex + 1,
        sentence: '',
        feedback: '',
      });
    } else {
      this.setState({ feedback: 'Ви виконали всі вправи!' });
    }
  };

  // Оновлення поля введення речення
  handleSentenceChange = (event) => {
    this.setState({ sentence: event.target.value });
  };

  render() {
    const { currentWordIndex, sentence, feedback } = this.state;
    const currentWord = wordData[currentWordIndex];

    return (
    <div className='learn-words-container'>
      <h2>Вправи</h2>
      <p className="sentence-instruction">Створіть речення, використовуючи слово "{currentWord.word}".</p>
      <input
      type="text"
      placeholder="Введіть речення"
      value={sentence}
      onChange={this.handleSentenceChange}
      className="sentence-input" // Додано клас для поля введення
      />
      <button onClick={this.checkSentence} className="check-button">Перевірити</button>
      {feedback && <p className="feedback-message">{feedback}</p>}
      <button onClick={this.prevWord} className="next-word-button">Попереднє слово</button>
      <button onClick={this.nextWord} className="next-word-button">Наступне слово</button>
    </div>
    );
  }
}

export default Exercises;
Файл Tests.js
Tests.js
import React, { Component } from 'react';
import wordData from './WordData';

class Tests extends Component {
  constructor() {
    super();
    this.state = {
      currentQuestionIndex: 0,
      selectedOption: null,
      feedback: '',
    };
  }

  // Функція для перевірки відповіді
  checkAnswer = () => {
    const { currentQuestionIndex, selectedOption } = this.state;
    const currentQuestion = wordData[currentQuestionIndex];

    if (selectedOption === currentQuestion.translation) {
      this.setState({ feedback: 'Правильно!' });
    } else {
      this.setState({ feedback: 'Неправильно. Спробуйте ще раз.' });
    }
  };

  // Функція для переходу до наступного питання
  nextQuestion = () => {
    const { currentQuestionIndex } = this.state;

    if (currentQuestionIndex < wordData.length - 1) {
      this.setState({
        currentQuestionIndex: currentQuestionIndex + 1,
        selectedOption: null,
        feedback: '',
      });
    } else {
      this.setState({ feedback: 'Ви виконали всі тести!' });
    }
  };

  // Функція для переходу до попереднього питання
  prevQuestion = () => {
    const { currentQuestionIndex } = this.state;

    if (currentQuestionIndex > 0) {
      this.setState({
        currentQuestionIndex: currentQuestionIndex - 1,
        selectedOption: null,
        feedback: '',
      });
    }
  };

  // Оновлення вибору користувача
  handleOptionChange = (event) => {
    this.setState({ selectedOption: event.target.value });
  };

  render() {
    const { currentQuestionIndex, selectedOption, feedback } = this.state;
    const currentQuestion = wordData[currentQuestionIndex];

    return (
        <div className="tests-container"> {/* Додано клас для контейнера */}
        <h2>Тести</h2>
        <pclassName="question-instruction">Як перекладається слово "{currentQuestion.word}"?</p>
        <form className="question-form">
          {wordData.map((word, index) => (
            <labelkey={index}className="answer-option">
              <input
                type="radio"
                value={word.translation}
                checked={selectedOption === word.translation}
                onChange={this.handleOptionChange}
              />
              <spanclassName="answer-label">{word.translation}</span>
            </label>
          ))}
        </form>
        <buttononClick={this.checkAnswer}className="check-button">Перевірити</button>
        {feedback && <p className="feedback-message">{feedback}</p>}
        <button onClick={this.prevQuestion} className="navigation-button">Попереднє питання</button>
        <buttononClick={this.nextQuestion}className="navigation-button">Наступне питання</button>
      </div>    
    );
  }
}

export default Tests;
Copyright © 2023 Courses WebSkill | Powered by WebSkill
Scroll to Top