Прихований текст у навчальному матеріалі

За умовчанням система Moodle не дозволяє приховати частину тексту на сторінці навчального матеріалу, хоча це може бути корисним у деяких випадках. Так, можна початково приховати розв’язок задачі, або підказки про хід її розв’язку, даючи учневі можливість скористатись цією інформацією у будь-який момент.

 Якщо потрібно перевірити вміння учня розв’язувати задачу, слід скористатись засобом Урок, який дозволяє сформулювати завдання та налаштувати тестову відповідь на це завдання. У такому разі учень не зможе перейти до наступного завдання, не розв’язавши попереднє. Проте іноді потрібно надати можливість довільного переходу до блоків навчального матеріалу.

Наприклад, на сайті дистанційного навчання інформатики http://dystosvita.mdl2.com/, в курсі програмування мовою Pascal та Python до кожної теми пропонується кілька навчальних задач-прикладів, а також додаткових завдань для самостійного розв’язання учнями.
Учень може переглянути презентацію вчителя, у якій пояснюється хід міркувань для розв’язування задачі (у багатьох випадках — з анімаційним супроводом), а також спробувати розв’язати задачу самостійно. Якщо виникають труднощі — кнопка Показати код відкриває програмний код розв’язку задачі.

Приховування розв’язку надає можливість учневі спробувати знайти рішення самостійно, а його доступність в будь-який момент часу — дозволяє перевірити своє рішення і виправити можливі помилки.
Приклад:

Задача 1. Текст задачі

Розв'язок задачі

Практично реалізувати таку кнопку дозволяє код:
<p>Задача 1. Текст задачі</p>
<div id="spoiler1" style="display: none;">

<pre>
Розв'язок задачі
</pre>

</div>
<p><button title="Click to show/hide content" type="button" onclick="if
(document.getElementById('spoiler1') .style.display=='none')
{document.getElementById('spoiler1') .style.display=''}else
{document.getElementById('spoiler1') .style.display='none'}">Показати код/Сховати код</button></p>

Зверніть увагу, ім’я spoiler1— назва поточного прихованого елемента, якщо на сторінці їх кілька, потрібно змінити номер у всьому відповідному коді кнопки.
Використання тегу  <pre> дозволяє відобразити програмний код без змін форматування — це актуально при розміщенні програм.
Розгорнувши прихований текст під час редагування сторінки з навчальним матеріалом, можна виконати додаткове форматування (наприклад, виділення кольорами відповідних блоків коду тощо).

Ще один цікавий код дозволяє показати/приховати текст лише після введення правильного паролю (можна випробувати паролем 123):

Розв’язки самостійних задач:
Розв'язок задачі

Цей код дещо складніший:

<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px">
<b>Розв'язки самостійних задач</b>: <input type="button" value="Показати" style="width:60px;font-size:10px;margin:0px;padding:0px;" onclick="password=prompt('Перегляд доступний для вчителів, котрі мають пароль...',' ');
if (password=='123')
{
alert('Пароль прийнято!');
if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
{
  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
  this.innerText = '';
  this.value = 'Hide'; }
else
{
  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
  this.innerText = '';
  this.value = 'Show';
}
}
">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div>
<pre>

 Розв'язок задачі
</pre>
</div>
</div>
</div>