diff --git a/content.js b/content.js
index 0e6e69ec2ac2e6ef783e76dbd248624ef3185510..2e69968eab286e69ad595524f5d76e97881a79d4 100644
--- a/content.js
+++ b/content.js
@@ -277,28 +277,17 @@ let Content = {
   note_array: {
     instructions: "Define <code>notes</code> to be an array that contains 7 \"note arrays\" that are pairs of note pitch and it's length, e.g. <code>[\"C5\",\"8n\"]</code>. The array must first have four sixteenth (16n) notes A4, B4, C#4, A4. Then, TWICE the eighth (8n) note E5. And finally, the half (2n) note C#4.",
     initialJs: 'let notes;',
-    postExecuteJs: ';\n'
-    + 'let notesTimed = [];'
-    + 'display.cmd([0,1,2,3,4,5,6].map(i => { return "notes[" + i + "]"; }).join(", "));\n'
-    + 'for (var i = 0; i < 7; i++) {\n'
-    + '  display.res(JSON.stringify((notes || [])[i]), (notes || [])[i]);\n'
-    + '  if (notes && notes[i] && notes[i].length > 1) {\n'
-    + '   notesTimed.push(notes[i]);\n'
-    + '  }\n'
-    + '}\n'
-    + 'document.write("<script src=\\"https://cdnjs.cloudflare.com/ajax/libs/tone/14.5.41/Tone.js\\"></"+"script>");\n'
-    + 'function music() {\n'
-    + '  var synth = new Tone.Synth().toDestination();\n'
-    + '  var pattern = new Tone.Pattern(function(time, note) {\n'
-    + '    synth.triggerAttackRelease(note[0], note[1]);\n'
-    + '  }, notesTimed);\n'
-    + '  pattern.start(0);\n'
-    + '  Tone.Transport.bpm.value = 160;\n'
-    + '  Tone.Transport.start();\n'
-    + '}\n'
-    + 'if (notesTimed.length > 0) {\n'
-    + '  document.write("<button onclick=\\"music();\\">Play music</button>");\n'
-    + '}\n',
+    postExecuteJs: ';'
+      + 'window["sequence"] = [];\n'
+      + 'display.cmd([0,1,2,3,4,5,6].map(i => { return "notes[" + i + "]"; }).join(", "));\n'
+      + 'for (var i = 0; i < 7; i++) {\n'
+      + '  display.res(JSON.stringify((notes || [])[i]), (notes || [])[i]);\n'
+      + '  if (notes && notes[i] && notes[i].length > 1) {\n'
+      + '    window["sequence"].push(notes[i]);\n'
+      + '  }\n'
+      + '}\n',
+    postExecuteHtml: '<button class="tone-play-sequence">Play music</button>\n',
+    postExecuteScript: '/static/webdev/augment-tone.js',
     executeAtStart: false,
     points: function ($element, config, accessor) {
       var correct = [["A4","16n"],["B4","16n"],["C#4","16n"],["A4","16n"],["E5","8n"],["E5","8n"],["C#4","2n"]];
@@ -577,6 +566,46 @@ let Content = {
     description: "",
     concepts: ["JavaScript", "getElementById", "childNodes", "innerText", "modify"],
     order: 14
+  },
+
+  'adjust_css_classes': {
+    instructions: 'The function named <code>onPlay</code> below is called with the id of a button that was just clicked. '
+      + 'Your task is to set a CSS class <code>last-played</code> to this button that was just clicked. '
+      + 'In addition, you must make it the only button that has this CSS class.',
+    preExecuteHtml: '<div id="keyboard" class="tone-keyboard">\n'
+      + '  <button id="C4">C4</button>\n'
+      + '  <button id="C#4" class="black">C#4</button>\n'
+      + '  <button id="D4">D4</button>\n'
+      + '  <button id="D#4" class="black">D#4</button>\n'
+      + '  <button id="E4">E4</button>\n'
+      + '</div>\n',
+    initialJs: 'function onPlay(id) {\n  console.log(id);\n}\n',
+    postExecuteJs: ';'
+      + 'document.querySelectorAll("#keyboard button").forEach(function (button) {\n'
+      + '  button.addEventListener("click", function (event) {\n'
+      + '    onPlay(event.target.getAttribute("id"));\n'
+      + '    display.showCode("keyboard");\n'
+      + '  });\n'
+      + '});\n'
+      + 'display.showCode("keyboard");\n',
+    postExecuteScript: '/static/webdev/augment-tone.js',
+    executeAtStart: true,
+    points: function ($element, config, accessor) {
+      let doc = accessor.doc();
+      let p = 0;
+      ['C4', 'D4', 'D#4', 'C#4', 'E4'].forEach(function (id) {
+        let b = doc.getElementById(id);
+        b.click();
+        p += b.classList.contains('last-played') ? 1 : 0;
+        p += doc.querySelectorAll('.last-played').length == 1 ? 1 : 0;
+      });
+      return { points: p };
+    },
+    maxPoints: 10,
+    title: "Adjust CSS classes",
+    description: "Set CSS classes for elements based on a given element id.",
+    concepts: ["JavaScript", "getElementById", "childNodes", "classes", "modify"],
+    order: 15
   }
 
 };