Part II: JavaScript & Events (14 Marks) Create a copy of the web page CENG256Lab2.html and program effects based on the following events using the examples on the course web site as a reference. (The name of your web page should also be CENG256Lab2.html placed directly in your public_html directory so that I can find it.) For questions 1-4 use document.querySelector(selector) Using JavaScript: 1. Random Word Selection (5 marks) Create an array of 10 words each of which has 5 or 6 letters. Create a function rword that returns a single word chosen randomly from a list of words passed to it. Note that: a. rword does not know how many words are in the array it has to use the length property of arrays to determine that. b. Math.random() returns a random # between 0 and 1. It does not return integers. C. The functions Math.ceil and Math.floor do convert floating point numbers to integers. d. Write a loop that tests that your rword can return any word in the list. (The loop to test your function should not be inside your function as that would make it unusable. Instead write your test code inside another function and then run it. You may test your idea by writing the loop first in the console. If your list is n words, randomly pick 2n items. Expect duplicates. Run this enough times to make sure that the 1st and last words show up - which would be the most common mistakes to watch out for.) e. You'll find two empty ordered list tags on the web page labelled Original and Random Selection along with a button Show Words. Attach a function to Show Words that i. Inserts each of the original words as a list item in the 1st list ii. Inserts a list of 2n randomly selected items in the 2nd list. iii. Pressing the button again should replace the items in both lists, not add to them. You should be building a large string in a loop and adding the items afterwards. 2. Randomizing the Letters in a word (3 marks) Create a function jumble that takes any string and scrambles the characters in random order. a. There are two approaches you can take. The string function .charAt(n) extracts the characters at a given position, or the function.split(") without an empty splits the array into single characters. An array of words (or letters) can be merged together using the array function .join(""). If the argument to join is a character such as a space or a comma, the words are joined using that character. b. Loop through the string 1 character at time and swap that character with another character chosen at random. By the time you go through the entire list every single letter will be in a randomly chosen position. (It's OK if the occasional letter doesn't move randomly a letter can wind up in the same position it started in. C. Test your function by writing a loop that mixes up the letters of all of the words in your wordlist to the console. 3. Event Handlers (3 marks) a. Program button1 so that when it's clicked a random word is chosen from your wordList, its letters are then jumbled and placed on the web page inside the label myWord. Save the unscrambled word either in a global variable or in a hidden field on your web page. (Note: If you haven't gotten #s 1 and 2 working you can just have the button put a fixed word of your choice.) b. Set up an onChange handler for the input box answer. When the user types in the correct word (solves the puzzle of the jumbled word) set the color of the input boxes' text to green. If the word is incorrect, set it to red. C. Set up an onlnput handler for the input box answer2. If the number of characters typed in does not match the number of characters in the label myWord then set/keep the color of the text in input box to black. Only set the color to red or green when the number of characters in answer2 matches the number of letters in your word. 4. mouseEnter and mouseLeave events (3 marks) a. Find 3 different web pages that have pictures and save the URLs. (Avoid offensive material.) For example you could choose a food theme and locate 3 recipes, or a travel theme and find pictures of famous places, cars, artwork, musicians etc. Use curl to copy the images to your public_html directory. Set up the images as sources from image1, image2 and image3. You should have been shown how to use curl to copy an image from the internet in CENG151. This will be demonstrated again in the lab. Find an image that is moderate in size. All you have to do is copy the link and right click after the command curl. eg: curl pasteLinkHere -o image1.jpg b. When the mouse enters each image, use styles to put a box around it and change the cursor. When the mouse leaves the image remove the box and the cursor. Implement this behaviour using functions and set it up so that each image had a different border and a different cursor. (Hint: pass the style information as the argument to the function) C. When the mouse enters an image, the hypertext link "Let's Go There" should change to the URL where the image original came from. d. Clear the status bar when the element loses focus. Status Report: (2 marks) Include a short status report in a paragraph at the end of your web page indicating what you were able to successfully finish and where you had problems. Part II: JavaScript & Events (14 Marks) Create a copy of the web page CENG256Lab2.html and program effects based on the following events using the examples on the course web site as a reference. (The name of your web page should also be CENG256Lab2.html placed directly in your public_html directory so that I can find it.) For questions 1-4 use document.querySelector(selector) Using JavaScript: 1. Random Word Selection (5 marks) Create an array of 10 words each of which has 5 or 6 letters. Create a function rword that returns a single word chosen randomly from a list of words passed to it. Note that: a. rword does not know how many words are in the array it has to use the length property of arrays to determine that. b. Math.random() returns a random # between 0 and 1. It does not return integers. C. The functions Math.ceil and Math.floor do convert floating point numbers to integers. d. Write a loop that tests that your rword can return any word in the list. (The loop to test your function should not be inside your function as that would make it unusable. Instead write your test code inside another function and then run it. You may test your idea by writing the loop first in the console. If your list is n words, randomly pick 2n items. Expect duplicates. Run this enough times to make sure that the 1st and last words show up - which would be the most common mistakes to watch out for.) e. You'll find two empty ordered list tags on the web page labelled Original and Random Selection along with a button Show Words. Attach a function to Show Words that i. Inserts each of the original words as a list item in the 1st list ii. Inserts a list of 2n randomly selected items in the 2nd list. iii. Pressing the button again should replace the items in both lists, not add to them. You should be building a large string in a loop and adding the items afterwards. 2. Randomizing the Letters in a word (3 marks) Create a function jumble that takes any string and scrambles the characters in random order. a. There are two approaches you can take. The string function .charAt(n) extracts the characters at a given position, or the function.split(") without an empty splits the array into single characters. An array of words (or letters) can be merged together using the array function .join(""). If the argument to join is a character such as a space or a comma, the words are joined using that character. b. Loop through the string 1 character at time and swap that character with another character chosen at random. By the time you go through the entire list every single letter will be in a randomly chosen position. (It's OK if the occasional letter doesn't move randomly a letter can wind up in the same position it started in. C. Test your function by writing a loop that mixes up the letters of all of the words in your wordlist to the console. 3. Event Handlers (3 marks) a. Program button1 so that when it's clicked a random word is chosen from your wordList, its letters are then jumbled and placed on the web page inside the label myWord. Save the unscrambled word either in a global variable or in a hidden field on your web page. (Note: If you haven't gotten #s 1 and 2 working you can just have the button put a fixed word of your choice.) b. Set up an onChange handler for the input box answer. When the user types in the correct word (solves the puzzle of the jumbled word) set the color of the input boxes' text to green. If the word is incorrect, set it to red. C. Set up an onlnput handler for the input box answer2. If the number of characters typed in does not match the number of characters in the label myWord then set/keep the color of the text in input box to black. Only set the color to red or green when the number of characters in answer2 matches the number of letters in your word. 4. mouseEnter and mouseLeave events (3 marks) a. Find 3 different web pages that have pictures and save the URLs. (Avoid offensive material.) For example you could choose a food theme and locate 3 recipes, or a travel theme and find pictures of famous places, cars, artwork, musicians etc. Use curl to copy the images to your public_html directory. Set up the images as sources from image1, image2 and image3. You should have been shown how to use curl to copy an image from the internet in CENG151. This will be demonstrated again in the lab. Find an image that is moderate in size. All you have to do is copy the link and right click after the command curl. eg: curl pasteLinkHere -o image1.jpg b. When the mouse enters each image, use styles to put a box around it and change the cursor. When the mouse leaves the image remove the box and the cursor. Implement this behaviour using functions and set it up so that each image had a different border and a different cursor. (Hint: pass the style information as the argument to the function) C. When the mouse enters an image, the hypertext link "Let's Go There" should change to the URL where the image original came from. d. Clear the status bar when the element loses focus. Status Report: (2 marks) Include a short status report in a paragraph at the end of your web page indicating what you were able to successfully finish and where you had problems