2017-10-25
691
Коли ви створюєте новий блок та додаєте компонент HTML, ви обираєте зі списку шаблонів:
Шаблон Raw HTML використовує чистий HTML за умовчанням, всі інші працюють у текстовому редакторі. Звичайно ж, ви можете переключатися між редакторами у будь-якому компоненті. Для цього необхідно:
1) додати новий HTML-компонент, або відкрити вже існуючий;
2) натиснути “Редагувати - Налаштування” (Edit - Settings);
3) обрати текстовий (Visual) чи чистий (Raw) HTML редактор;
4) натиснути “Зберегти” (Save), вийти з компоненту та знову відкрити його щоб змінити редактор.
Щоб додати новий HTML-компонент, потрібно зробити наступне:
1) створіть новий компонент, оберіть HTML;
2) оберіть шаблон (наступні пункти відносяться до шаблону с текстовим редактором); порожній компонент HTML буде додано внизу сторінки блока;
3) відкрийте його та натисніть “Редагувати”;
4) введіть та відредагуйте ваш контент;
5) задайте назву для цього компоненту. Для цього натисніть “Налаштування” (Settings) та введіть назву в рядок Display Name;
6) Поверніться до режиму редагування тексту, натиснувши “Редактор” (Editor);
7) Натисніть “Зберегти” (Save).
|
|
|
Щоб додати посилання на вебсайт, інший курс, інший компонент, застосовуйте функцію “Додати посилання” (Insert Link).
Додаємо посилання на вебсайт:
1) виділіть текст, до якого потрібно додати посилання;
2) натисніть значок посилання в панелі інструментів редактора;
3) введіть адресу вебсайта;
4) задайте режим роботи посилання (рядок Target) (відкрити у тому ж вікні чи у новому (New window)). Рекомендуємо завжди обирати режим відкриття у новому вікні;
5) Натисніть OK щоб закрити цей діалог та збережіть зміни в компоненті;
6) Щоб перевірити корректність роботи посилання, оберіть режим “ Preview ”.
Додаємо посилання на інший блок курсу (можливо лише для опублікованих розділів):
- відкрийте сторінку потрібного блоку у Studio та скопіюйте ідентифікатор блоку (Location ID). Він розташований у розділі “Розташування блоку” (Unit Location);
- відкрийте ваш HTML-компонент у редакторі;
- виділіть текст, до якого потрібно додати посилання;
- натисніть значок посилання в панелі інструментів редактора;
- у полі “Посилання” (URL) додайте наступний текст:
/jump_to_id/<ідентифікатор блоку> де <ідентифікатор блоку> - текст, що був скопійований вами в п. 1. Наприклад:
Зверніть увагу: посилання треба робити ТІЛЬКИ у такий спосіб, за допомогою внутрішнього посилання Studio URL. Якщо ви додасте у рядок URL адресу до блоку, яку видає ваш браузер, при експорті та імпорті вона буде втрачена, і структура курсу буде порушена;
6) задайте режим роботи посилання (рядок Target) (відкрити у тому ж вікні чи у новому (New window)). Рекомендуємо завжди обирати режим відкриття у новому вікні;
|
|
|
7) натисніть Insert (Вставити);
8) натисніть ОК, збережіть зміни у компоненті (Save changes) та протестуйте роботу посилання.
Щоб додати посилання на будь-який файл (.PDF, малюнок, архів тощо), його потрібно спочатку завантажити в нашу Studio через розділ “Контент - Файли та завантаження” (Content - Files & uploads). Після завантаження файлу у Studio, ви отримаєте посилання на цей файл, скопіюйте його та вставте в рядок URL діалогового вікна.
ВАЖЛИВО: Використовуйте тільки внутрішнє посилання Studio URL, а не адресу до файла у вашому браузері.
1) задайте режим роботи посилання (рядок Target) (відкрити у тому ж вікні чи у новому (New window)). Рекомендуємо завжди обирати режим відкриття у новому вікні;
2) Натисніть Insert (Вставити);
3) Натисніть ОК, збережіть зміни в компоненті (Save changes) та протестуйте роботу посилання.
Примітка: під час формування контенту курсу рекомендуємо відкривати розділ “Контент - Файли та завантаження” (Content - Files & uploads)та ваш HTML-компонент у двох окремих вкладках браузера, що значно підвищує швидкість та зручність створення посилань.
Щоб додати малюнок до вашого HTML-компоненту, завантажте цей малюнок у Studio через розділ “Контент - Файли та завантаження” (Content - Files & uploads). Скопіюйте внутрішнє посилання Studio URL на цей малюнок.
Рекомендуємо перевіряти наявність авторських прав на використовувані зображення та надавати посилання на джерело малюнків за необхідністю.
- Оберіть місце у вашому HTML-компоненті, де ви бажаєте вставити малюнок.
- Натисніть на значок малюнка в панелі інструментів текстового редактора.
- Вставте внутрішнє посилання на малюнок у рядок Source діалогового вікна.
- Введіть альтернативний текст у рядок “Опис малюнка” (Image description). Цей текст стане значенням атрибуту alt у HTML та потрібен для коректного функціонування вашого курсу.
- Змініть розміри малюнка, якщо це потрібно. Залиште функцію Constrain proportions активною, щоб зберігати пропорції малюнка при зміні розміру.
- У вкладці “Додаткові налаштування”(Advanced) ви можете задати розміри відступів та меж для малюнка.
- Натисніть OK щоб зберегти малюнок в обраному місці HTML-компоненту.
- Збережіть зміни та перевірте, чи коректно відтворюється малюнок на дошці студента.
2.3. Використання інструмента "Зображення малюнка на весь екран" (Full Screen Image Tool)
Використовуйте даний інструмент "Зображення малюнка на весь екран" для того, щоб дозволити слухачам відкрити та збільшити зображення великого розміру.
Цей інструмент дозволяє побачити дрібні деталі зображення та зрозуміти його значення в контексті сторінки.
Щоб дозволити слухачам переглядати зображення великого розміру, вам необхідно розмістити посилання з невеликого зображення на велику версію даного зображення.
Для використання цього інструменту вам необхідно:
- Завантажити файл зображення на сторінці Файли та Завантаження (Content -> Files & Uploads ->Upload New File).
- Перейдіть до структури курсу.
- У розділі “Додати новий компонент” (Add New Component), виберіть HTML, а потім виберіть “Full Screen Image Tool”.
- З'явиться новий компонент. Виберіть режим редагування (Edit)
- У редакторі компонентів замініть назву, яка була за умовчанням, замініть перший абзац, а також додайте текст у разі потреби.
- Оберіть HTML на панелі інструментів, щоб змінити вихідний код.
Розміщений нижче HTML код містить приклад використання інструмента "Зображення малюнка на весь екран" і формат, необхідний для цього. Щоб додати своє зображення, внесіть свої дані.
<a href="Шлях до повноекранного зображення" class="modal-content"> <img alt = "Текст пояснення" src = "Шлях до зображення, яке буде включене в сторінку" />
</a>
2.4. Використання інструмента "Збільшувальне скло"
|
|
|
Збільшувальне скло дозволяє слухачам курсу розглядати дрібні деталі великого, складного зображення. Наведення миші на різні частини зображення дозволить слухачеві розглянути зображення більш детально.
Перш ніж використовувати інструмент Збільшувальне скло, необхідно спочатку додати до курсу файл JavaScriptjquery.loupeAndLightbox.js JavaScript file.
Необхідно вставити в курс як велике зображення, так і його зменшений аналог.
Наведений нижче HTML код показує формат, який необхідний для використання збільшувального скла. Для використання цього інструмента в своїх курсах вам необхідно додати в наведеному шаблоні свої дані замість наших прикладів.
<div class="zooming-image-place" style="position: relative;">
<a class="loupe" href=”Шлях до великої версії зображення">
<img alt="Текст для голосових програм, що відтворюють текст на екрані"
src="Шлях до версії зображення, яку ви хочете включити в блок (на сторінку)" />
</a>
<div class="script_placeholder"
data-src="Шлях до файлу jquery.loupeAndLightbox.js на вашому комп’ютері"/>
</div>
<script type="text/javascript">// >![CDATA[
JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {
$('.loupe').loupeAndLightbox({
width: 350,
height: 350,
lightbox: false
});
});
// ]]></script>
<div id="ap_listener_added"></div>
Інструмент IFrame
Використовуйте інструмент IFrame, щоб вбудувати вправу, відео або інструмент зі стороннього вебсайту в сторінку вашого курсу. Наприклад, наведений нижче компонент дозволяє студентам вивчати трикутник, вписаний в коло. За допомогою мишки в ньому можна пересувати контрольні лінії та точки.
Вправи, створені за допомогою елементів IFrame, не оцінюються. Якщо ж ви хочете, щоб оцінювання відбувалося, необхідно застосовувати налаштовану задачу JavaScript.
Нижче наведений HTML код для інструмента IFrame. Щоб використовувати цей шаблон, замініть в ньому дані, віділені курсивом, на ваші значення.
<iframe title=" Необхідний заголовок "
src=" URL для IFrame, що починається з https:// ">
Це повідомлення буде відображено, якщо ваш браузер не підтримує IFrames.
</iframe>
Наведений як приклад елемент IFrame включає в себе ширину, висоту, ширину полів, ширину відступу (marginwidth), висоту відступу (marginheight), межу між фреймами (frameborder) та атрибути прокрутки. Використовувати дані атрибути не обов’язково, ви можете їх видалити або змінити значення.
|
|
|
Змініть шаблон згідно з вашими потребами.
Щоб змінити цей елемент IFrame, відредагуйте HTML код. При редагуванні даного шаблону натисніть значок HTML на панелі інструментів.
Після чого змініть наведений нижче пркилад так, як вважаєте за потрібне.
1. Замініть значення src у елементі URL-адресою елемента, який ви збираєтесь використовувати.
2. Примітка: URL повинен починатися з https, а не з http, щоб впевнитися, що елемент відтворюється в усіх браузерах, що підтримують IFrame.
3. Замініть значення атрибута title назвою інструмента. Обов’язково увімкніть текст спливаючої підказки, щоб забезпечити доступність материалів.
4. Замініть інші атрибути IFrame так, як вважаєте за потрібне. За додатковою інформацією можна звернутися до специфікації IFrame.
5. Ви також можете замінити текст між відкриваючими та закриваючими дужками iframe.
6. Ваш браузер не підтримує IFrame.
7. Студент побачить це повідомлення, якщо його браузер не підтримує IFrame.
Зміст
3. Створення тестових завдань. 1
3. 1 Створення тестів - одиничний та множинний вибір, введення відповіді числом, випадаючий список 1
3.2. Створення тестів - відповідь у вигляді математичного виразу. 2
3.3 Робота с картою (Вкажи на картинку). 2
