Forum Discussion
JavaScript API
DavidAnderson challenged us to play with JavaScript API today, so here I am stuck with a javascript item I can't get to work. The attached project has two slides. I used Javascript on the first slide to enable the keystroke commands to answer the questions, thanks to the help in this forum.
Now, I want to reuse this same slide in the quiz to ensure the users know their keystrokes. I removed the game score and hint button from the original.
Here are the two slides.
The first is the practice. If they don't know the correct answer, they hit the question mark for the answer, and they lose a point, but get the answer. If they know the answer, they get a point.
The second slide is the quiz. It's the same thing BUT if they don't know the correct answer and press any key besides the correct one, I want the answer to show in the incorrect state.
Copilot gave me this code below, which I modified to have the variables as Q1Correct and Q1Incorrect to make it easier. But it still does nothing with striking the wrong key. The right key is fine. I would love to have some ideas for making this work from the JavaScript Juggernaut. I have gone forth boldly, DavidAnderson.
document.addEventListener('keydown', function(event) {
var player = GetPlayer();
// Question 1: TAB
if (event.key === 'Tab' && !event.shiftKey) {
player.SetVar('Q1_TabPressed', true);
} else if (player.GetVar('Q1_TabPressed') !== true) {
player.SetVar('Q1_ShowIncorrect', true);
}
// Question 2: SHIFT + TAB
if (event.key === 'Tab' && event.shiftKey) {
player.SetVar('Q2_TabPressed', true);
} else if (player.GetVar('Q2_TabPressed') !== true) {
player.SetVar('Q2_ShowIncorrect', true);
}
// Question 3: ENTER
if (event.key === 'Enter') {
player.SetVar('Q3_TabPressed', true);
} else if (player.GetVar('Q3_TabPressed') !== true) {
player.SetVar('Q3_ShowIncorrect', true);
}
// Question 4: F3
if (event.key === 'F3') {
player.SetVar('Q4_TabPressed', true);
} else if (player.GetVar('Q4_TabPressed') !== true) {
player.SetVar('Q4_ShowIncorrect', true);
}
// Question 5: PAUSE/BREAK
if (event.code === 'Pause') {
player.SetVar('Q5_TabPressed', true);
} else if (player.GetVar('Q5_TabPressed') !== true) {
player.SetVar('Q5_ShowIncorrect', true);
}
});
For your stated issue, you need to change the value in the third trigger on layer q5 to "Q5" instead of "q5" for Set currentQuestion. That fixes the key response.
Unrelated, but you are also missing a T/F SL variable "Q4Correct".
Another note is that in the second trigger JavaScript, for case 'Q5' you could change event.code to event.key just to be consistent with the other keypress checks. It doesn't change anything as the code and key for Pause are the same, but it makes the code clearer.
5 Replies
Your code more or less works to recognize the keys and send variable updates to SL. However, all the key checks are done and the all the SL variables are set no matter what key is pressed (any key). It would help if the event handler knew what question you were on (1 to 4). Maybe set a variable that it can read to tell it which question you're on so it knows which key to check for, and ignore setting the incorrect status for the other questions.
I assume you are making the state changes with a trigger inside SL according to the Pressed and Incorrect variables for each question. Although the JS API provides a way to request state changes from inside a script, it does not work properly on states containing images. The initial image will remain no matter what state you request, so keep that in mind.
Well darn if it won't do state changes for images. Maybe if I do layers like I did with the hints. Thanks Nathan_Hilliard
I implemented Nathan_Hilliard's suggestion and we are closer. I moved each question to a new layer, and now everything works except the wrong key on the last question which uses Pause/Break as the answer. It does nothing if you press the wrong key. What's missing? It looks the same as the others.
I wasn't sure if I needed to add Execute Javascript on each layer, but I added that trigger just in case.
Any suggestions?
#javascript DavidAnderson
For your stated issue, you need to change the value in the third trigger on layer q5 to "Q5" instead of "q5" for Set currentQuestion. That fixes the key response.
Unrelated, but you are also missing a T/F SL variable "Q4Correct".
Another note is that in the second trigger JavaScript, for case 'Q5' you could change event.code to event.key just to be consistent with the other keypress checks. It doesn't change anything as the code and key for Pause are the same, but it makes the code clearer.
That did it! Thanks so much Nathan_Hilliard. You are truly a JavaScript Juggernaut.
Here's the file if anyone ever needs to replicate something like this.
