CSCI 2447 Columbus State College JavaScript & Jquery Project 5 Report

Hello I need help with fixing my project for JavaScript and Jquery and I also need help with questions 2-8 for project 5 as well.

This is what I need to correct for the project here was the issue

as soon as I click start, the timer starts at 29 seconds, not 30 seconds. This is where you will need to adjust your counter in the timer function, and place it after the script that updates the phrase on your page.

function decrementSeconds() {                        if(remaining_seconds < 0){              clearTimeout(clock);              clearTimeout(t);              alert("Game is over");          }          else{            $('#spTimeLeft').text(remaining_seconds);            remaining_seconds -= 1;                  clock = setTimeout("updateTimer()", 1000);            }}

For your setTimeouts, you will want to assign it to a variable. That way you can clear it (stop it) in the last project. If you do not assign it to a variable, you will not have a way to stop it. Thus will cause it to run dynamically after the game is over.

clock <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">"decrementSeconds()"</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Your gamespace is a little too small compared to the size of bubble. I would make the gamespace around 600px width and height of 350px.

Not sure about using a soccerball for the cursor. It does not fit the overall theme. Maybe a cursor that looks like a target. https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR61leTxKEg7AzYlOyl2NvsjItDePz6ChDWwg&usqp=CAU

Project 5 questions 2-8

2. In the last project, you created an addImage() function which added the image to#gamespace. This worked well but each time it is called, it replaced the image whichwas already in there with a new one. We want to preserve the images already in the#gamespace. Change your use of .html() in addImage() to .append(). If already using.append(), no need to make a change.3. Now we will try to make the images appear randomly around the gamespace. To do so,you will need to utilize the position style. For more info on position, check out:https://www.w3schools.com/css/css_positioning.asp First, add the following code toyour game.css file. This will allow us to use the “top” and “left” CSS styles on the IMGtag.div#gamespace img { position: absolute; }And add the following property to div#gamespace:div#gamespace { position: relative; }4. To randomly move each image, you will need to call your random number functions!Call each function once in the addImage() function and save the returned value to avariable (eg. xPos and yPos). Now that you have two random values, you will need toadd a “style” attribute to the IMG tag. For example:In this “style” attribute, you will need to add a “left” and “top” property. The values foreach property will be your random numbers. Most students will have issues placing thequotation marks. To help you, a website to help better understand this:https://www.digitalocean.com/community/tutorials/h…Tweak the values of your random function to make the images stay within the#gamespace.Hint: The actual value would be stored within a variable. You will call the function torun, and have the value stored within a variable. You will place the variable within theline of code where the value is to be added.5. When the image is clicked, it should disappear. To do this, add a line of code to your.on() function that makes image disappear when clicked. Note: There are a variety ofmethods that will allow you to do so in jQuery, and jQuery UI.6. Turn off the click of the start button once it has been clicked. You can use the .off()function to turn off the click. Once the game has started, you do not want the gamer tobe able to click on the start button again.7. Randomize the time interval in which new images appear. Currently, it is set to a static2000 (2 seconds). The interval should vary between 0 and 2000 at random. You maycreate a new random function like your random x and y functions, if you like. Imagesshould now appear at random intervals!8. Incorporate at least one widget, or effects from jQueryUI. Make sure to document whicharea by adding a comment within the script. Example: You might create a tab widget.One tab will have the game and the other tab will have the instructions.

Then when it comes to project 5 it should do the following after it is completed

By then end of this project, the game should do the following:

• An image should disappear when clicked.
• Multiple images should appear at a timed interval randomly around #gamespace.
• The timing of the images appearing should be randomized now. Interval varies between 0 and 2000 milliseconds.
• The start button click is turned off once the game is started.
• A jQueryUI widget or effect has been added to the page.

I would need it to be completed by Friday before midnight.