CSC101 - BMCC - Spring 2019 03/22/2019 Lab 07 Download and extract the content of CSC101_Lab07.zip from the course web page (labs.html); then browse and open the folder Lab07 where you will find all necessary files to accomplish this lab. If Statements 1- Edit and check the content of the Web page ifdemo.html, then load the page in the browser to verify that it behaves as described. Test the Web page by entering various grades in the text box. 2- Modify the page ifdemo.html by replacing the if statement in the ShowMessage function with the below if statement. Load this modified page then test it using various grades. if (grade < 60) { diff = 60 - grade; alert('you failed! If only you could have ' + 'earned ' + diff + ' more points.'); } else { alert('congratulations, you passed.'); } 3- In Lab 06 Task 12, you created a Web page (randseq.html) that selected a sequence of random letters from a string that was entered by the user. Modify the randseq.html page so that it checks to make sure that the user has correctly entered characters to choose from. If not (i.e., if the text box is empty when the button is clicked), an alert window should appear to warn the user. Otherwise, the random sequence should be generated and displayed as before. Note: The Web page randseq.html is provided in Lab07 directory. Nested If Statements 4- In Lab 04 Task 12, you created a Web page (grades.html) that computes a student's overall average for a course. Modify the grades.html page by inserting a cascading if-else statement similar to the statement in Figure 1. In addition to displaying the student s class average, the associated letter grade should be displayed. For example, if the student s average was calculated to be 85.5, then the message displayed in the page division should be:
Your overall course average is 85.5 Letter grade: B Note: The Web page grades.html is provided in Lab07 directory. Figure 1 Example: Dice Simulations 5- Edit and check the content of the Web page stats.html, then load the page in the browser to verify that it behaves as described. 6- Modify the page stats.html to add an additional text span that serves as a conditional counter, keeping track of the number of times the user rolls doubles. The new SPAN element should appear below the existing one that displays the number of rolls and should be preceded by an appropriate label. With-in the RollDice function, add an if statement that checks whether the two rolls are identical and, if so, increments the doubles counter in the text span. Note: Statistically speaking, users should obtain doubles on one-sixth their rolls. This is attributable to the fact that 6 out of the 36 possible dice combinations are doubles. After a reasonable number of rolls, is your doubles count roughly one-sixth of the total number of rolls? 7- Imagine that users of your stats.html page would like to perform repeated experiments with the dice simulator. It would greatly help these users if they were able to reset the roll and doubles counts within the page. This can be accomplished by reloading the page that is, by clicking on the browser's reload button or reentering the page's address but a more elegant solution would be to add another button to
the page labeled Reset counters. When the user clicks this button, the values in the two text spans should be reset to 0. Add such a button to your page and verify that it behaves appropriately. 8- There are six different dice combinations that add up to 7: 6-1, 5-2, 4-3, 3-4, 2-5, and 1-6, making it the most common dice roll. Add an additional text span to your stats.html page that keeps track of the number of times the user rolls dice that total 7. The new SPAN element should appear below the existing ones and should be preceded by an appropriate label. Within the RollDice function, add an if statement that checks whether the two rolls add up to 7 and, if so, increments the sevens counter in the text span. This counter should also be reset to 0 when the user clicks on the reset button (from Task 7). Once you have done this, use your page to simulate repeated dice rolls. After a reasonable number of rolls, is your sevens count roughly one-sixth of the total number of rolls? 9- In gambling circles, the combination of a 3 and 4 (in either order) is known as a natural seven. Add an additional text span to your stats.html page that keeps track of the number of natural sevens that are rolled. The new SPAN element should appear below the existing ones and should be preceded by an appropriate label. Within the RollDice function, add code that increments the natural sevens counter in the text span. This counter should also be reset to 0 when the user clicks on the reset button (from Task 7). Once you have done this, use your page to simulate repeated dice rolls. How frequently would you expect to obtain a natural seven? Do the results of your repeated simulations match your expectations? Example: Slot Machine 10- Edit and check the content of the Web page slots.html, then load the page in the browser to verify that it behaves as described. 11- Modify the page slots.html so that it simulates a slot machine, with the player's credits displayed in a text span in the page. When the game begins, the number of credits should start at 20. Each spin of the slots should cost the player one credit. If all three slot images match, however, the player wins and is credited with 13 credits (for a net gain of 12 credits). In addition, an alert window should appear to notify the player of the winning spin. Modify the SpinSlots function so that the number of credits is updated appropriately on each spin. Note: As is the case with all organized gambling, the odds here favor the house. Since there are four different images that can appear in a slot, there is a 1 in 16 chance of all three slots coming up the same. Thus, you would expect (in the long run) for the player to win 1 out of every 16 spins. Consequently, the payoff of $13 does not quite offset the $16 cost of the spins. As a result, you are more likely to lose
money (in the long run) than win money. Perform numerous simulations with your updated page to see if this pattern holds. 12- As is, your slots.html page does not recognize when a player has run out of money. It is possible for the user to play your slots game even after the number of credits becomes 0, and the credits can become negative as a result. Any smart casino owner would put a stop to this immediately. Add code to SpinSlots that disallows a spin if the player's credits have reached 0. In particular, the existing code for simulating the spin and displaying the results should only be executed if the player has money. 13- In a real slot machine, the player always has the option of adding more credits to the machine and continuing play indefinitely (or until they go completely broke). Add an additional button to your page labeled Add 20 credits. When the user clicks this button, 20 credits should be added to the credit total on the page. Example: Designing a Dot Race A common event at sporting events is the running of dot races on the scoreboard. In a dot race, dots of different colors speed around a track, and members of the crowd are encouraged to cheer for different dots. Every few seconds, each dot moves forward a different random amount; the dot that reaches the finish line first is the winner. 14- Design and implement a Web page named dotrace.html that allows the user to simulate a race between two dots. Your page should look something like the one in Figure 2. Figure 2
The length of the race (i.e., the goal distance) is entered by the user in a text box, and the positions of the two dots (initially 0) are displayed in text spans. Each time the user clicks the button labeled Take a Step, each dot should move forward a random amount (either one, two, or three units). When one of the dots crosses the finish line meaning that its current position is greater than or equal to the goal distance an alert box should appear to identify the winner. Note that it is possible for the dots to tie if both cross the finish line on the same step. Thus, your code must be able to recognize a tied race and display an appropriate message in the alert box. 15- Modify your dotrace.html page so that users can initiate repeated races without having to reload the page. You can accomplish this by adding a button labeled New Race; when a user clicks this button, the positions of the dots should be reset to 0. If the user clicks the Take a Step button after the current race is complete, an alert box should appear directing the user to click the New Race button and begin a new race. Lab Submission Copy all your Web pages in a directory named Lab07_Firstname_Lastname (use your first and last names); then bring it using your USB Flash drive to the classroom for submission on March 29, 2019.