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.
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!
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
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…
@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
@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.