Drum Machine can't pass the test although I can play it with keyboard

My test is passing except for two tests. But if you control and look at it, I can play it with the keyboard. But in the test, warns me about keys on the keyboard do not trigger the playing.

Here is my code https://codepen.io/sayin47/pen/qBRajEK

My Github project related to it https://github.com/sayinmehmet47/Build-a-Drum-Machine.git

Try onkeypress instead of onkeydown. I used onkeypress and mine passed.

@jpottercycles

$(document).on('keypress', function (e) {
  var keyNum = e.which;

  bankOne.map((e) => {
    if (e.keyCode === keyNum) {
      console.log(e.keyTrigger);
        
    $(`#${e.keyTrigger}`).first().click();
    
    }
  });

I tried that but I think keypress is not working in this function.

Hey!

I got one of the two tests working.

I might be wrong but I believe the problem is that you create a new audio file by using

  var audio = new Audio(link);
  let audio = $('#' + id)

Which doesn’t seem to work with the tests.

By finding the audio element in your page and playing it instead using :

  var audio = $('#' + id)[0];
  audio.play();

I manage to bank(pun intended) that test.

The other criteria I cannot figure out right now for some reason… I thought I could manage by using the same function to manage the keypress modifying your handler for

$(document).keypress(function (e) {
  var keyNum = e.which;

//If char is lower Case we compute the capital char code
  if(keyNum>90) 
    keyNum-=32;
  
  let id = String.fromCharCode(keyNum)
  general(id);
  e.preventDefault();
});

Which also seems functional but fails for the same reason.

I have done everything I could to avoid jquery myself during my time so there might be something obvious I am missing as well…

I’ll try giving it another shot tomorrow as it is pretty late now but thought making it half way there could sustain your effort until then!

Here is the updated code I made if you want to take a look: https://codepen.io/lazymarsupial/pen/rNjMvLo

Courage! You’re almost there!

thanks for your effort @laurentlabine. Last one more test that, I cant find its solution.

Yeah just to answer the previous message you sent regarding the key codes changing,

I looked up the tests yesterday and they do seem to take into account the three type of events brought up by @jpottercycles because the tests are implemented as

          __triggerEvent(el.parentElement, 'keydown', keyCodes[i]);
          __triggerEvent(el.parentElement, 'keypress', keyCodes[i]);
          __triggerEvent(el.parentElement, 'keyup', keyCodes[i]);

So I don’t think the type of event you handle is the issue here…

It seems like this could be a jquery structure vs HTML and the testing method inherent issue regarding the implementation which I am not very familiar with as I have done it myself using React and didn’t face that issue…

I tried a few combinations and couldn’t figure it out either… I’ll give it a bit more thoughts and let you know if I figure it out…

In the meantime maybe somebody else will be able to shine some light…

If you are stuck and getting discouraged I think I’d suggest moving on to the next project for now and coming back to it in a bit maybe on a fresh headspace and/or maybe we’ll figure it out by then as well…

I’ve been there quite a few times the last few months and felt defeated quite a few times so I know how frustrating these can be…

1 Like

@laurentlabine Actually I want to do this project in ReactJS, but I want to do it in Jquery first. The problem is not stemming from the keypress event. I think when clicking with the mouse on the button, as you can see, it gives a clicked effect on the button. It is happening with the help of Bootstrap buttons. But when using keyboard buttons to trigger the playing you cant see clicked effect on buttons. Maybe this leads to the problem.Anyway, I will try different possibilities. Thanks for help

Yeah I Understand! I haven’t given up quite yet but am still trying to figure it out! Let me know if you do!

1 Like

Yes of course maybe someone else also help

@laurentlabine In your example, I think it is just the order of the buttons that are wrong.

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.

1 Like

I went along with @sayinmehmet47 's divisions on this as they are defined by columns… Is this what is causing the issue?

Didn’t think it could be a problem really

When I switch the order of the buttons your project passes the tests.

1 Like

Wow that’s a great catch!

Thanks for your help! I guess it would be problem solved then!

1 Like

It did have me stumped at first because the order was looking correct on the page so I didn’t even notice it at first.

1 Like

@lasjorg great catch. I have forget that my order of the keys is different. Thank you @lasjorg and @laurentlabine

1 Like

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