How to create an interactive learning exercise

When learning the web, it's important to rely on active learning content. Such content is made to help with learning something pro-actively. It can be exercises, live hackable examples, tasks to perform, assessments, etc. In short, anything that can help someone to actively understand something.

There is no straight forward way to create such content. For example many third party tools exist that can help you create live hackable examples (see: JSFiddle, CodePen, Dabblet, etc.) that you can link from MDN articles. If you want to create more advanced comprehensible exercises, you can easily use Thimble from the WebMaker project.

Currently, MDN does not have an easy tool to author such active content. However, if you are a coder you can use the current MDN features to create custom active learning content. Read on to see how to do that.

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

hidden code example

HTML

<div class="square">
  #<input class="color">
</div>

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;
}

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 () {
  setColor(getRandomColor());
});

document.addEventListener('keyup', function () {
  setColor(getInputColor());
});

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;
&lt;/div&gt;</pre>

<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;
}
</pre>

<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 () {
  setColor(getRandomColor());
});

document.addEventListener('keyup', function () {
  setColor(getInputColor());
});
</pre>
</div>

{{EmbedLiveSample('hidden_code_example', 120, 120)}}
</div>

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: