Скрытые элементы
Иногда часть учебного материала приходится сделать скрытым, выводя его лишь по желанию пользователя. В одних случаях это экономит место, делает учебный материл структурированным, а следовательно, более понятным. В других случаях, скрытый текст может содержать подсказку к выполнению задания. Есть два вида оформления скрытого материала:
Превью изображения:
(кликните на изображение для полноэкранного просмотра)
Полностью скрытый контент:
(кликните на ссылку для просмотра подсказки)
Очень странный почтальон: Не маг и не волшебник он. Доставит письма и газеты, Несет посылку на край света, Хранить умеет все секреты. Крылат и смел, и зорок он. Кто же этот почтальон?
Подсказка
Подсказка:
Xищная птица, ведущая ночной образ жизни.
Превью изображения:
Всё, что нужно для создания предпросмотра изображения — добавить символ « @ » перед идентификатором картинки.
Пишем:
![][@sports-owl]
Получаем:
Полностью скрытый контент:
Для того, чтобы полностью скрыть часть материала, необходимо включить его в блок с классом hint
. Текст ссылки на скрытый контент должен находиться в этом же блоке и иметь класс prompt
. Если в блоке с классом hint
вы не укажите абзац с классом prompt
, текстом ссылки будет надпись «Показать подсказку».
Весь материал, размещенный в блоке с классом hint
(кроме абзаца с классом prompt
), будет отображаться при активации ссылки на подсказку.
Пишем:
~~~{.hint} *Подсказка*{.prompt} ##### Подсказка: Xищная птица, ведущая ночной образ жизни. ![][owl] ~~~
Получаем:
Подсказка
Подсказка:
Xищная птица, ведущая ночной образ жизни.