Events: Make the example runnable

The proposed changes, together with the style sheet suggestion proposed in the previous proposed change (and shown below), means that the example moves from being abstract, and students can directly copy/paste the example and see it work.

  <style>
  .on { background-color: yellow; }
  .off { background-color: black; color: white; }
  </style>

Closes #535.

Author: githubshrek

page/events/introduction-to-custom-events.md

@@ -65,18 +65,18 @@ Let's make our example a little more interesting. We'll add another room to our
 
 ```
 <div class="room" id="kitchen">
-	<div class="lightbulb on"></div>
-	<div class="switch"></div>
-	<div class="switch"></div>
-	<div class="clapper"></div>
+	<div class="lightbulb on">Kitchen light</div>
+	<div class="switch">Kitchen switch 1</div>
+	<div class="switch">Kitchen switch 1</div>
+	<div class="clapper">Kitchen clapper switch</div>
 </div>
 <div class="room" id="bedroom">
-	<div class="lightbulb on"></div>
-	<div class="switch"></div>
-	<div class="switch"></div>
-	<div class="clapper"></div>
+	<div class="lightbulb on">Bedroom light</div>
+	<div class="switch">Bedroom switch 1</div>
+	<div class="switch">Bedroom switch 2</div>
+	<div class="clapper">Bedroom clapper switch</div>
 </div>
-<div id="master_switch"></div>
+<div id="master_switch">Master switch</div>
 ```
 
 If there are any lights on in the house, we want the master switch to turn all the lights off; otherwise, we want it to turn all lights on. To accomplish this, we'll add two more custom events to the lightbulbs: `light:on` and `light:off`. We'll make use of them in the `light:toggle` custom event, and use some logic to decide which one the master switch should trigger: