Как создать интерактивную схему для электронного учебника

В видеокурсе «Электронный учебник за 1 день» есть 3 видеоурока, посвящённых созданию интерактивных схем с помощью специальной программы. Эта страница — краткое описание того, что вы получите и как применить это в своём учебнике.

Что такое интерактивная схема #

Интерактивная схема — это изображение, на котором отдельные детали кликабельны. При нажатии на деталь появляется её название и описание, а в режиме теста — вопрос с вариантами ответов.

Такие схемы оживляют учебник и помогают ученикам лучше запоминать материал.

Очковый узел (правый)

Два смотровых стекла. В ГП-7 они имеют изогнутую трапециевидную форму, что увеличивает угол обзора до 70%

Пример интерактивной схемы противогаза ГП-7
Переключайте режимы "Обучение" и "Тест", кликайте по деталям

Где это можно использовать #

Интерактивные схемы подходят для любых предметов:

• ОБЗР — устройство противогаза, воинские звания, знаки различия
• Автодело — устройство двигателя, кузова, тормозной системы
• Биология — строение клетки, растения, животного
• География — карты, природные зоны
• Физика — электрические цепи, механизмы
• История — карты сражений, схемы битв

Примеры интерактивных схем для разных предметов

Как это работает #

Создание схемы состоит из трёх шагов:

1. Подготовка изображения. Вы берёте готовую схему или картинку. Она может быть в формате PNG или JPG
2. Разметка зон. С помощью специальной программы вы обводите контуры деталей. Программа запоминает координаты и создаёт интерактивные области.
3. Добавление описаний. Для каждой зоны вы задаёте название, описание, вопрос и варианты ответов. После этого программа генерирует готовый HTML-код, который можно вставить в учебник.

Интерфейс программы для создания интерактивных схем.
Программа входит в видеокурс

Что вы получите в итоге #

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

• Готовая интерактивная схема, которая работает в любом браузере
• Возможность вставить её в свой электронный учебник
• Два режима: обучение (показывает описание) и тест (задаёт вопросы)
• Код, который можно скопировать и использовать многократно

Где научиться это делать #

В видеокурсе «Электронный учебник за 1 день» есть 3 отдельных урока, посвящённых созданию интерактивных схем:

• Урок «Создание интерактивной схемы» — знакомство с программой и принцип работы.
• Урок «Разметка зон» — как обводить детали и задавать координаты.
• Урок «Добавление описаний и тестов» — как заполнить схему вопросами и ответами.

Все уроки идут с исходниками и готовыми примерами. После прохождения вы сможете создавать такие же схемы для своих предметов.

Хотите научиться создавать такие схемы?

Посмотрите видеокурс «Электронный учебник за 1 день». В нём я показываю весь процесс — от разметки зон до вставки готового кода в учебник.

Подробнее о видеокурсе →