Assignment specifications: This assignment must be completed using JavaScript. SUPPLIED FILES For this assignment, you are supplied with the following starter files (in STARTcweb190a1.zip): - cards.html - styles folder containing cards.css - images folder containing: 2.png 3.png 4.png 5.png 6.png 7.png 8.png 9.png 10.png j.png q.png k.png a.png blank.png DESCRIPTION OF THE ASSIGNMENT You are to update cards.html so that it allows you to graphically shuffle two sets of 13 cards and keep track of points scored on the last the last 10 deals and statistics for cards dealt. When the updated cards.html is initially opened, you should display the following: Card Dealer Click on either card to shuffle and deal: The points scored on the previous 10 attempts were: 0,0,0,0,0,0,0,0,0,0 Card Statistics: My card statistics for a total of 0 attempts: Here is an example screenshot after 11 deals have been completed: Card Dealer Click on either card to shuffle and deal: You scored 104 points. Your total for this session is 330 points! The previous 10 point scores were: 23,23,22,21,17,17,12,15,64,104 Card Statistics: My statistics for a total of 11 deals: The completed cards.html should work as follows: 1. When the website visitor clicks on either of the card images, the dice will begin "shuffling" and stop shuffling 1 second later. a. A deal consists of a new random card being generated every 100 milliseconds for each card. The image for each card must be updated to represent the current random card (2.png, 3.png, ..., a.png). b. When the cards are being shuffled, the user should be prevented from shuffling again. c. The score for the deal must be displayed in the pPoints paragraph (for example, "You scored 104 points."). Points are calculated as follows: - Each card is worth its face value for 2 to 10 , and 11 points for a jack, 12 points for a queen, 13 points for a king, and 14 points for an ace (so an ace and a 3 would score 14+3=17 points). - If the two cards are the same, point values are quadrupled (so a king and a king would score (13+13)4=104 points). - If both cards are aces, 125 points are scored. d. The total points for the entire session (since the page was loaded) must be displayed in the pTotalPoints paragraph (for example, "Your total for this session is 330 points!"). e. The result of the deal must be added to the list of the previous ten rolls in the pPreviousTenDeals paragraph. This list only displays the points for the most recent 10 deals; points for deals older than 10 are bumped from the list. The points for the most recent deal are at the end of the list. 2. For each deal, the card statistics must be updated. a. The frequency of each possible card ( 2 to ace inclusive) must be updated, and the frequency as a percentage of the total number of cards dealt must be updated. b. The total number of deals in the pTotalDeals paragraph must be updated. WHAT YOU ARE TO DO The initial file cards.html contains a bare HTML document, with no JavaScript functionality. You are to add HTML elements and JavaScript code to this file (or better yet, put the JavaScript code in its own separate file) to provide the desired functionality. A quick summary of what you'll need to do is as follows: - You will need to add event handlers to handle when an image is clicked. - Use an array like [ "2", "3", ..., "a" ] to map values to cards. - Use an array to keep track of the previous 10 point scores. Note that your array should never contain more than 10 values; when there are 10 values in the array and you need to add another, remove the oldest value from the array. Use appropriate array methods to maintain this list. - Use an array to keep track of the frequency of each card. Marking scheme for Assignment \#1: Use JavaScript Language Constructs cards.html c1 cass cards.css @acharset "UTF-8"; \#tblstats td, \#tblstats th \{ text-align: center; s=05