Как создать интерактивное обучающее упражнение

При изучении веба, важно полагаться на активном обучающем контенте. Такой контент создан для помощи в изучении чего-либо проактивно. Это может быть упражнения, живые взламываемые примеры, задачи к исполнению, оценки и т.д. Вкратце, всё что может помочь кому-либо в активном понимании чего-либо.

Нет прямого способа для создания такого контента. Например существует много сторонних инструментов которые помогут в создании живых примеров (см: JSFiddle, CodePen, Dabblet, и т.д.) которые вы можете ссылаться из MDN статей. Если вы хотите создать более продвинутые упражнения, то можете воспользоваться Thimble из проекта WebMaker.

На данный момент MDN не имеет лёгкого инструмента для пометки автора такого контента. Однако, если вы являетесь программистом, то можете воспользоваться текущими MDN функциями для создания своего активного обучающего контента. Читайте далее для того чтобы узнать как это сделать.

MDN live samples

MDN has a very cool feature called live samples. It's a mechanism that turns any HTML, CSS, and JavaScript code inside an MDN page into its executed equivalent. Before using it, you should read over Using the live sample system, which is our complete documentation for building them. While they're easy to do, there are quirks and tricks you'll learn along the way.

What is interesting is that it's really easy to tweak that feature to use it in order to embed any kind of tool or utility you want into an MDN page.

Hidden code

The first way to use a code sample to create active learning content is to edit the page where you want to add your content. Use the Live Sample feature to create your content as you wish. Don't bother with the code complexity you could write; just create what you need. Once your content is ready, just switch to the editor code view and surround your code with a simple <div> element with the class hidden. By doing so, your code won't be displayed but your live sample remains accessible and displayable.

Let's see a simple example:

Click on the following square to randomly change its color or just type a hexadecimal code color

If you take a look at that page HTML code with the MDN editor, you'll see the exact following HTML code:

<div class="moreinfo">
<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>

<div class="hidden">
<h4 id="hidden_code_example">hidden code example</h4>

<h5 id="HTML">HTML</h5>

<pre class="brush: html">
&lt;div class="square"&gt;
  #&lt;input class="color"&gt;

<h5 id="CSS">CSS</h5>

<pre class="brush: css">
body {
  padding: 10px;
  margin : 0;

.square {
  width  : 80px;
  height : 80px;
  padding: 10px;
  background-color: black;
  color: white;
  text-align: center;

.color {
  width: 60px;
  text-transform: uppercase;

<h5 id="JS">JS</h5>

<pre class="brush: js">
function setColor(color) {
  document.querySelector('.square').style.backgroundColor = '#' + color;
  document.querySelector('.color').value = color;

function getRandomColor() {
  var color = Math.floor(Math.random() * 16777215);
  return color.toString(16);

function getInputColor() {
  var value = document.querySelector('.color').value;
  var color = Number('0x' + color);
  if (color === +color) {
    return color.toString(16);
  return value;

document.addEventListener('click', function () {

document.addEventListener('keyup', function () {

{{EmbedLiveSample('hidden_code_example', 120, 120)}}

You can see a more advance example of such a tweak on the Canvas API page.

Code from outside the page

The previous example is okay if you want to embed basic active learning content. However, if you want to deal with complex code, it can become a bit awkward to deal with that hidden class wrapper.

So another option is to write the code of your learning content on an MDN page and then embed it into another page. To do this we can use the EmbedDistLiveSample macro instead of the EmbedLiveSample macro.

Let's how that sample looks when configured as if it were being embedded from a remote origin:

Click on the following square to randomly change its color or just type a hexadecimal code color

This time, if you take a look at that page's HTML using the MDN editor, you'll see no hidden code. If you want to see the code, just go to the page that hosts it.

You can see a more advanced example of this usage in our HTML Form tutorial, which uses this technique to allow experimentation with forms.