Unit 3, Lesson 14: Interactive Card Question

csdunit3
javascript
lesson14

#1

Hey everyone! I have a question about the Interactive Card project. I have a student trying to use a sound effect, but every time the condition is met the sound effect keeps looping. I have tried everything I can think of to no avail. I am hoping someone here can help me out. Here is a screenshot of the code used in the draw loop.


#2

Joey,

Anyway you can share the project to look at it? I believe the problem is in the nested if statements. Two of the “if” conditions are the same if, which both shouldn’t be needed (ship.y <= 100). If the nested loop with the sound was and “==” to 100 it would play and then the ship could move to 99 or 101 and it would stop. Again, just making guesses here…

Brad


#3

Here is the project, Brad.

Thank you for taking a look.


#4

It seems to me that once both conditions are met, there is nothing to change the fact that ship.y will be set to 100 at line 69 and will be that forever thus always playing the sound.


#5

Ok, that makes sense. Is there another way to stop the motion of the ship without setting ship.y to a specific number? If that piece of code isn’t in there the ship/explosion would keep moving.


#6

You can stop a sprite’s motion by setting its velocityX and velocityY to zero. But here, since the motion is caused by directly changing the x value, I would suggest something different. Wait to set visibility of the ship to false inside the if statement that plays the sound and use it’s visibility as the trigger to play. That way, once it is no visible, it won’t play again.

if (ship.visible)
{
playSound();
ship.visible = false ;
}

#7

Thank you! Here is what I ended up doing and it seems to have done the trick.

I can show the other way you described, however, as a good example that there are multiple ways to complete the same task in programming.


#8

For sure. This is one of the reasons why I think programming is so fun. So many solutions.


#9

Ok, I’ve got another challenge. Here is the link to the student’s interactive card. https://studio.code.org/projects/gamelab/_tKsiQFuXUJMiQnnuRkpDreqD7erZkDmy7cA05EqDKw

When she is in Game Lab, the program works just fine. The “shark” jumps up to eat the bird when the up arrow key is pressed and the fisherman sprite changes. When anyone clicks on the link, however, what you see is what they see. I’m not sure where the issue in her code lies, if any.


#10

@buyskej

Hi Joey,

Can you explain what the student wants to happen and what is happening instead? I don’t know whether I’m seeing the intended behavior or the bug. The program is doing exactly what I would expect from the code.

Thanks,
Elizabeth


#11

Yes. So, when the program loads in Game Lab, the shark is on the bottom, the bird is in the air, and the fisher is standing on the bank. Nothing is blinking. When you press the up arrow key, the shark jumps up and the bird disappears. The fisher sprite changes to something else as well. What you see when it loads is not what is supposed to happen.


#12

@buyskej

Hi Joey,

The reason the sprite is blinking is in the animation tab. The student has used multiple frames to create an animation. For the shark, the frames are a fish and a shark. For the bird, the frames are a bee and a bird.

In order to fix this, the student needs to go into the animation tab and delete the unwanted frames.

  1. Click on the animation tab to see the animations for this project.
  2. Click on the animation that you want to change.
  3. Look between the list of all animations on the left and the big version of the chosen animation on the right. There you will find the list of frames.
  4. Hover over the frame you don’t want. A “Delete” garbage pail will appear
  5. Click the delete garbage pail to get rid of the extra frame.
  6. Repeat for the other animation.

That should fix the problem for your student. This problem probably happened because the student added the new picture to the “frames” list in the middle of the page rather than the “animations” list on the left hand side of the page.

Elizabeth


#13

I see. I missed that when looking at her code. Makes sense. Thank you!


#14

I am back with another problem. I had multiple students today who couldn’t get any text to show up using the drawing commands. Here is an example of one student’s card:

We tried moving the blocks around to different positions to no avail (both inside and outside the draw function). I’m not sure if it has something to do with the background being a sprite, but the students who had issues all used sprites as backgrounds. Any ideas?


#15

Hi Joey,

The background sprite is covering up the text. The text command will need to come after the “drawSprites” command, or else it will be under all of the sprites and covered up.

Elizabeth