Уровень 1 0 / 100 XP
Сегодня
0 мин
0 вопросов
- точность
0 уроков

Завтра счёт начнётся заново

Новое достижение
Первые шаги

Node Types

Типы узлов в scenarios и как их использовать

Node Types: Типы узлов в сценариях

У сценария есть узлы, и каждый несёт своё назначение.


Обзор типов узлов

Тип Назначение Использование
scene Обычная сцена с текстом и выборами 80% узлов
checkpoint Проверка знаний с quiz Ключевые моменты
theory Теоретический материал Объяснения
practice Практическое задание Упражнения
ending Финальная сцена Концовки
mixed Комбинация типов Сложные узлы

1. Scene (Сцена)

Базовый тип узла — текст + выборы.

Структура

- id: my_scene
  type: scene
  image: "/images/scene.jpg"  # опционально
  content: |
    Текст сцены в Markdown.

    **Жирный текст**, *курсив*, списки и т.д.

  choices:
    - id: choice_1
      text: "Вариант 1"
      goto: next_node
      effects:
        money: -100
        wisdom: 10
      feedback: "Объяснение выбора"

    - id: choice_2
      text: "Вариант 2"
      goto: another_node

Параметры Scene

Параметр Обязательно Описание
id Да Уникальный ID узла
type Да scene
content Да Текст сцены (Markdown)
image Нет URL или путь к изображению
choices Да Список вариантов выбора

Параметры Choice

Параметр Обязательно Описание
id Нет ID выбора (для аналитики)
text Да Текст кнопки выбора
goto Да ID следующего узла
effects Нет Изменения переменных
feedback Нет Объяснение последствий
condition Нет Условие показа выбора

Пример: Простая сцена

- id: library_entrance
  type: scene
  image: "https://source.unsplash.com/800x600/?library"
  content: |
    Ты входишь в старую библиотеку. Воздух пахнет пылью и древней бумагой.

    У входа стоит библиотекарь и смотрит на тебя.

    **Что сделаешь?**

  choices:
    - text: "Поздороваться вежливо"
      goto: polite_greeting
      effects:
        reputation: 5
      feedback: "Вежливость открывает двери!"

    - text: "Пройти мимо молча"
      goto: silent_entry
      feedback: "Библиотекарь хмурится..."

Условные выборы (Condition)

Показывай выборы только при определённых условиях:

choices:
  - text: "Купить книгу за 500₽"
    goto: buy_book
    condition: "money >= 500"  # Показать только если есть деньги

  - text: "Не хватает денег..."
    goto: no_money
    condition: "money < 500"

Доступные операторы:

  • >=, <=, >, <, ==, !=
  • AND, OR

Примеры:

condition: "money >= 100 AND wisdom > 50"
condition: "level == 3 OR hasKey == true"

2. Checkpoint (Проверка)

Узел с quiz для проверки знаний.

Структура

- id: checkpoint_1
  type: checkpoint
  image: "/images/checkpoint.jpg"  # опционально
  content: |
    Прежде чем продолжить, проверим понимание.

  quiz:
    question: "Что такое переменная?"
    options:
      - text: "Контейнер для хранения данных"
        correct: true
        feedback: "Верно! Переменная хранит значение."

      - text: "Название функции"
        feedback: "Нет, это определение функции."

      - text: "Тип данных"
        feedback: "Нет, тип данных — это String, Number и т.д."

  pass_next: continue_path    # Куда идти при правильном ответе
  fail_next: retry_theory     # Куда идти при ошибке

Параметры Checkpoint

Параметр Обязательно Описание
quiz.question Да Вопрос
quiz.options Да Варианты ответа (2-5)
pass_next Да ID узла при правильном ответе
fail_next Да ID узла при ошибке

Пример: Checkpoint после теории

# Теория
- id: variables_theory
  type: scene
  content: |
    **Переменные в JavaScript**

    Переменная — это именованный контейнер для хранения данных:

    ```javascript
    let age = 25;
    const name = "Alice";
    ```

  choices:
    - text: "Понятно, проверим знания"
      goto: checkpoint_variables

# Checkpoint
- id: checkpoint_variables
  type: checkpoint
  content: "Проверим, как ты усвоил материал"
  quiz:
    question: "Какое ключевое слово используется для переменной, которая НЕ может быть переназначена?"
    options:
      - text: "let"
        feedback: "Нет, let позволяет переназначение."
      - text: "const"
        correct: true
        feedback: "Верно! const создаёт константу."
      - text: "var"
        feedback: "Нет, var — устаревший способ."

  pass_next: continue_learning
  fail_next: retry_variables

3. Theory (Теория)

Узел с теоретическим материалом и интерактивными элементами.

Структура

- id: theory_node
  type: theory
  content: |
    Теоретический материал в Markdown.

  atoms:
    - type: callout
      variant: info
      content: "Важное замечание"

    - type: code-block
      language: javascript
      code: |
        const example = "code";

  choices:
    - text: "Продолжить"
      goto: next_node

Использование atoms в Theory

Можешь встраивать любые shortcodes:

- id: redux_theory
  type: theory
  content: |
    ## Redux Store

    Store — центральное хранилище состояния.

atoms:
  - type: callout
    variant: warning
    content: "Store должен быть **один** на всё приложение!"

  - type: definition
    term: "Reducer"
    definition: "Чистая функция, которая принимает state и action, возвращает новый state"

  - type: code-block
    language: javascript
    code: |
      const store = createStore(reducer);

choices:
  - text: "Понял, продолжим"
    goto: practice_redux

4. Practice (Практика)

Узел с практическим заданием.

Структура

- id: practice_node
  type: practice
  content: |
    Теперь попробуй сам!

  task:
    description: "Создай переменную name со своим именем"
    hint: "Используй const или let"

  atoms:
    - type: fill-blank
      question: "const name = {{blank}};"
      answer: "your_name"

  choices:
    - text: "Проверить решение"
      goto: check_solution

Пример: Практика с code-block

- id: practice_loop
  type: practice
  content: |
    **Задание:** Напиши цикл, который выводит числа от 1 до 5.

  atoms:
    - type: code-block
      language: javascript
      editable: true
      code: |
        // Твой код здесь
        for (let i = 1; i <= 5; i++) {
          console.log(i);
        }

    - type: callout
      variant: tip
      content: "Начни с i = 1 и увеличивай до 5"

  choices:
    - text: "Готово!"
      goto: next_concept

5. Ending (Концовка)

Финальный узел сценария.

Структура

- id: ending_success
  type: ending
  endingType: good  # good, neutral, bad
  title: "Успех!"
  image: "/images/success.jpg"
  content: |
    Поздравляем! Ты справился!

    **Твои результаты:**
    - Мудрость: {wisdom}
    - Деньги: {money}

    Ты научился:
    - Планировать бюджет
    - Принимать взвешенные решения
    - Сопротивляться импульсивным покупкам

  stats:
    show: true  # Показать статистику переменных

  actions:
    - text: "Пройти снова"
      action: restart

    - text: "Изучить теорию"
      action: link
      url: "/concepts/finance-basics/"

Параметры Ending

Параметр Обязательно Описание
endingType Да good, neutral, bad
title Да Название концовки
content Да Финальный текст
stats.show Нет Показать переменные (default: true)
actions Нет Кнопки действий

Типы концовок

Good ending

- id: ending_master
  type: ending
  endingType: good
  title: "Redux Master!"
  content: |
    Ты стал экспертом в Redux!

    **Достижения:**
    - Качество кода: {codeQuality}
    - Тех. долг: {techDebt}

Neutral ending

- id: ending_ok
  type: ending
  endingType: neutral
  title: "Работа выполнена"
  content: |
    Проект завершён, но есть над чем работать.

    В следующий раз можно сделать лучше!

Bad ending

- id: ending_fail
  type: ending
  endingType: bad
  title: "Технический долг"
  content: |
    Проект завершён, но ценой большого тех. долга.

    **Что пошло не так:**
    - Не было тестов
    - Плохая структура кода

    Но это опыт! Попробуй снова.

6. Mixed (Смешанный)

Комбинация нескольких типов в одном узле.

Структура

- id: mixed_node
  type: mixed
  sections:
    - type: theory
      content: "Теоретический блок"

    - type: practice
      task: "Практическое задание"
      atoms:
        - type: fill-blank
          question: "..."

    - type: checkpoint
      quiz:
        question: "Проверка"
        options: [...]

  choices:
    - text: "Продолжить"
      goto: next_node

Пример: Theory + Practice + Checkpoint

- id: loops_complete
  type: mixed
  sections:
    # 1. Теория
    - type: theory
      content: |
        **Циклы for**

        Цикл for повторяет код N раз:
        ```javascript
        for (let i = 0; i < 5; i++) {
          console.log(i);
        }
        ```

    # 2. Практика
    - type: practice
      atoms:
        - type: fill-blank
          question: "for (let i = 0; i < {{blank}}; i++)"
          answer: "10"

    # 3. Проверка
    - type: checkpoint
      quiz:
        question: "Сколько раз выполнится код в цикле for (let i = 0; i < 3; i++)?"
        options:
          - text: "3 раза"
            correct: true
          - text: "2 раза"
          - text: "4 раза"

  choices:
    - text: "Далее"
      goto: next_topic

Использование Atoms в узлах

В любом узле можешь использовать atoms (shortcodes).

Доступные atoms

atoms:
  # Callout
  - type: callout
    variant: info | warning | success | danger
    content: "Текст"

  # Definition
  - type: definition
    term: "Термин"
    definition: "Определение"

  # Code Block
  - type: code-block
    language: javascript
    code: "console.log('Hello');"

  # Fill Blank
  - type: fill-blank
    question: "Вопрос с {{blank}}"
    answer: "правильный ответ"

  # True/False
  - type: true-false
    question: "Утверждение"
    correct: true
    explanation: "Объяснение"

  # Quiz
  - type: quiz
    question: "Вопрос"
    options:
      - text: "Вариант 1"
        correct: true
      - text: "Вариант 2"

  # Flashcard
  - type: flashcard
    front: "Вопрос"
    back: "Ответ"

  # Reveal
  - type: reveal
    trigger: "Показать ответ"
    content: "Скрытый контент"

Пример: Scene с atoms

- id: scene_with_atoms
  type: scene
  content: |
    Изучим основы переменных.

  atoms:
    - type: callout
      variant: info
      content: "Переменные — основа программирования"

    - type: definition
      term: "let"
      definition: "Создаёт переменную с блочной областью видимости"

    - type: code-block
      language: javascript
      code: |
        let age = 25;
        console.log(age); // 25

    - type: true-false
      question: "Переменную let можно переназначить?"
      correct: true
      explanation: "Да, let позволяет изменить значение"

  choices:
    - text: "Понятно"
      goto: next_concept

Примеры по направлениям

Программирование

# React Hooks
- id: hooks_intro
  type: theory
  content: |
    **React Hooks**

    Hooks позволяют использовать state в функциональных компонентах.

  atoms:
    - type: code-block
      language: jsx
      code: |
        const [count, setCount] = useState(0);

    - type: callout
      variant: warning
      content: "Hooks можно вызывать только на верхнем уровне!"

  choices:
    - text: "Попробовать в практике"
      goto: hooks_practice

Литература

# Анализ Кафки
- id: kafka_choice
  type: scene
  content: |
    Грегор превратился в насекомое.

    **Что символизирует это превращение?**

  choices:
    - text: "Отчуждение человека в обществе"
      goto: alienation_path
      effects:
        interpretation: "existential"
      feedback: "Экзистенциальная интерпретация!"

    - text: "Буквальное наказание за грехи"
      goto: literal_path
      feedback: "Слишком упрощённо..."

История

# Битва при Бородино
- id: borodino_decision
  type: scene
  content: |
    **1812 год, утро перед битвой**

    Вы — Кутузов. Наполеон наступает.

  atoms:
    - type: callout
      variant: info
      content: "Русская армия: 120,000 человек. Французская: 130,000."

  choices:
    - text: "Дать генеральное сражение"
      goto: battle_borodino
      effects:
        morale: 20
        losses: 40

    - text: "Отступить без боя"
      goto: retreat
      effects:
        morale: -30
        losses: 0

Проверка понимания


Best Practices


Следующие шаги