Front End Development Libraries Projects: Drummachine failing test 6 while functionally ok

My Front End Development Libraries Projects: Drummachine is failing test 6 while it is functionally ok.

To recap:

User Story #1: I should be able to see an outer container with a corresponding id="drum-machine" that contains all other elements.

User Story #2: Within #drum-machine I can see an element with a corresponding id="display".

User Story #3: Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.

User Story #4: Within each .drum-pad, there should be an HTML5 audio element which has a src attribute pointing to an audio clip, a class name of clip, and an id corresponding to the inner text of its parent .drum-pad (e.g. id="Q", id="W", id="E" etc.).

User Story #5: When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.

User Story #6: When I press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string Q, pressing the W key should trigger the drum pad which contains the string W, etc.).

User Story #7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

When I press the q, w, e, a, s, d, z, x or c keys. All the right sounds chime. But the testscript doesn’t care much.

My solution is uuuuugly, and doesnt use React or Redux (booo!). But it does work in codepen and thus should pass the mark. Or have I missunderstood something, or is the code far more terrible than I dare to dream?

const Sound = {
  q() {document.getElementById("Q").play()},
  w() {document.getElementById("W").play()},
  e() {document.getElementById("E").play()},
  a() {document.getElementById("A").play()},
  s() {document.getElementById("S").play()},
  d() {document.getElementById("D").play()},
  z() {document.getElementById("Z").play()},
  x() {document.getElementById("X").play()},
  c() {document.getElementById("C").play()},
};

const Text = {
  q() {$('#textbox').text('Changed Value11');},
  w() {$('#textbox').text('Changed Value22');},
  e() {$('#textbox').text('Changed Value33');},
  a() {$('#textbox').text('Changed Value44');},
  s() {$('#textbox').text('Changed Value55');},
  d() {$('#textbox').text('Changed Value66');},
  z() {$('#textbox').text('Changed Value77');},
  x() {$('#textbox').text('Changed Value88');},
  c() {$('#textbox').text('Changed Value99');},
};

const keyAction = {
  q: { keydown: Sound.q, keyup: Text.q},
  w: { keydown: Sound.w, keyup: Text.w }, 
  e: { keydown: Sound.e, keyup: Text.e },
  a: { keydown: Sound.a, keyup: Text.a },
  s: { keydown: Sound.s, keyup: Text.s },
  d: { keydown: Sound.d, keyup: Text.d },
  z: { keydown: Sound.z, keyup: Text.z },
  x: { keydown: Sound.x, keyup: Text.x },
  c: { keydown: Sound.c, keyup: Text.c }
};

const keyHandler = (ev) => {
  if (ev.repeat) return;                             
  if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
  keyAction[ev.key][ev.type]();
};

['keydown', 'keyup'].forEach((evType) => {
  document.body.addEventListener(evType, keyHandler);
});

The error I get (is there a quote function that I have missed btw?):

6. When I press the trigger key associated with each .drum-pad, 
the audio clip contained in its child <audio> element should be triggered 
(e.g. pressing the Q key should trigger the drum pad which contains the string "Q", 
pressing the W key should trigger the drum pad which contains the string "W", etc.).

No audio plays when the Q key is pressed : expected true to be false
AssertionError: No audio plays when the Q key is pressed : expected true to be false
    at o.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:15147)
    at o.e (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:401:182)
    at Reflect.get (<anonymous>)
    at Object.e [as get] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:68:1382)
    at Function.n.isFalse (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:1349)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:149794
    at NodeList.forEach (<anonymous>)
    at n.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:149651)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259477
    at ny.Dg.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259772)

Please post a link to your Codepen.

I don’t know what the exact problem was with yours, but in mine it was because at one point I had them defined in the wrong order. I can’t remember the exact issue, but maybe make sure that the audio elements and clickable buttons appear in the QWEASDZXC order (I think I had S and D reversed). Everything appeared fine and worked fine, but the test couldn’t find them.

Full HTML:

<!DOCTYPE html>

<div id="drum-machine"> 
  <div id="display">
    <div id="textbox">
    </div>    
    
    <button class="drum-pad" id="1">Q<audio src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3' id="Q" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="2">W<audio src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' id="W" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="3">E<audio src='https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' id="E" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="4">A<audio src='https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' id="A" class="clip"></audio>      
    </button>
    <button class="drum-pad" id="5">S<audio src='https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' id="S" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="6">D<audio src='https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3' id="D" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="7">Z<audio src='https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3' id="Z" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="8">X<audio src='https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3' id="X" class="clip"></audio>      
    </button>
    
    <button class="drum-pad" id="9">C<audio src='https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3' id="C" class="clip"></audio>      
    </button>
    
  </div>
</div>

Full JS:

const Sound = {
  q() {document.getElementById("Q").play()},
  w() {document.getElementById("W").play()},
  e() {document.getElementById("E").play()},
  a() {document.getElementById("A").play()},
  s() {document.getElementById("S").play()},
  d() {document.getElementById("D").play()},
  z() {document.getElementById("Z").play()},
  x() {document.getElementById("X").play()},
  c() {document.getElementById("C").play()},
};

const Text = {
  q() {$('#textbox').text('Changed Value11');},
  w() {$('#textbox').text('Changed Value22');},
  e() {$('#textbox').text('Changed Value33');},
  a() {$('#textbox').text('Changed Value44');},
  s() {$('#textbox').text('Changed Value55');},
  d() {$('#textbox').text('Changed Value66');},
  z() {$('#textbox').text('Changed Value77');},
  x() {$('#textbox').text('Changed Value88');},
  c() {$('#textbox').text('Changed Value99');},
};

const keyAction = {
  q: { keydown: Sound.q, keyup: Text.q},
  w: { keydown: Sound.w, keyup: Text.w }, 
  e: { keydown: Sound.e, keyup: Text.e },
  a: { keydown: Sound.a, keyup: Text.a },
  s: { keydown: Sound.s, keyup: Text.s },
  d: { keydown: Sound.d, keyup: Text.d },
  z: { keydown: Sound.z, keyup: Text.z },
  x: { keydown: Sound.x, keyup: Text.x },
  c: { keydown: Sound.c, keyup: Text.c }
};

const keyHandler = (ev) => {
  if (ev.repeat) return;                             
  if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
  keyAction[ev.key][ev.type]();
};

['keydown', 'keyup'].forEach((evType) => {
  document.body.addEventListener(evType, keyHandler);
});


document.getElementById("1").addEventListener("click",function(){
       document.getElementById("Q").play(); Text.q();
     });

document.getElementById("2").addEventListener("click",function(){
       document.getElementById("W").play(); Text.w();
     });

document.getElementById("3").addEventListener("click",function(){
       document.getElementById("E").play(); Text.e();
     });

document.getElementById("4").addEventListener("click",function(){
       document.getElementById("A").play(); Text.a();
     });

document.getElementById("5").addEventListener("click",function(){
       document.getElementById("S").play(); Text.s();
     });

document.getElementById("6").addEventListener("click",function(){
       document.getElementById("D").play(); Text.d();
     });

document.getElementById("7").addEventListener("click",function(){
       document.getElementById("Z").play(); Text.z();
     });

document.getElementById("8").addEventListener("click",function(){
       document.getElementById("X").play(); Text.x();
     });

document.getElementById("9").addEventListener("click",function(){
       document.getElementById("C").play(); Text.c();
     });

Log out console.log(ev.key) inside keyHandler and run the test. Do you see a problem?


Edit: Just as an aside. The reason I asked for a Codepen is so I don’t have to set it up and add the test, and in this case, also add jQuery. The less work people have to do to help you the more likely you are to get help.

Very fair.

My aplogies.

Also, lower case vs upper…

Thanks!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.