1 / 10

Short Answer (20 pts)

Given the following code, what picture is displayed in the second image on the page when the first image is clicked on the first time? ___________________________ <script type = “text/ javascript ”> arr = new Array() arr [0] = ”dog.jpg” arr [1] = “cat.jpg” arr [2] = “bird.jpg”

terry
Download Presentation

Short Answer (20 pts)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Given the following code, what picture is displayed in the second image on the page when the first image is clicked on the first time? ___________________________ <script type = “text/javascript”> arr = new Array() arr[0] = ”dog.jpg” arr[1] = “cat.jpg” arr[2] = “bird.jpg” arr[3] = “bunny.jpg” arr[4] = “goat.jpg” arr2 = new Array() arr2[0] = ”wombat.jpg” arr2[1] = “echidna.jpg” arr2[2] = “platypus.jpg” arr2[3] = “bilby.jpg” arr2[4] = “muntjac.jpg” arr2[5] = “boobie.jgp” counter = 3 function ChangeIt() { counter = counter + 1 document.images[‘pic3’].src = arr[counter] counter2 = counter + 4 if counter2 == arr2.length { counter2 = 0 } else if counter2 == arr2.length + 1 { counter2 = 1 } else if counter2 == arr2.length + 2 { counter2 = 2 } else if counter2 == arr2.length + 3 { counter2 = 3 } document.images[‘pic4’].src = arr2[counter2] } </script> </head> <body> <h1 id = "hello">My Page </h1> <p> <imgsrc = "first.jpg" width = "20" height = "10" alt = "a pic" id = "pic3" onClick = "ChangeIt()"/> <imgsrc = "second.jpg" width = "20" height = "10" alt = "another pic" id = "pic4" /> </p>

  2. Given the following code snippet, what picture is displayed when the second image is clicked on?____________________ <script type = “text/javascript”> arr= new Array() arr[0] = ”wombat.jpg” arr[1] = “echidna.jpg” arr[2] = “platypus.jpg” arr[3] = “bilby.jpg” arr[4] = “muntjac.jpg” arr[5] = “boobie.jgp” counter = 1 function ChangeIt(holder1, holder2) { document.images[‘pic4’].src = arr[holder2] counter = counter + 1 document.images[‘pic4’].src = arr[holder1] } </script> </head> <body> <p> <imgsrc = "pic1.jpg" width = "500" height = "375" id = "pic1" onClick = "ChangeIt(5,2)"/><br /> <imgsrc = "pic2.jpg" width = "500" height = "375" id = "pic2" onClick = "ChangeAll(3,1)"/><br /> <imgsrc = "pic3.jpg" width = "500" height = "375" id = "pic3" onClick = "ChangeAll(0,4)"/><br /> <imgsrc = "pic4.jpg" width = "500" height = "375" id = "pic4" /> </p>

  3. Short Answer (20 pts) • (5 pts) Write the code snippet such that when you click on an image, the text is changed. Include the appropriate html code as well (the images and paragraphs that call the function). When you call the function, you should pass in the name of the image you want to change. <script type = “text/javascript”> function ChangeText(holder) { document.getElementById(holder).innerHTML = “New Text” } </script> </head> <body> <p> <imgsrc = "pic1.jpg" width = "500" height = "375" id = "pic1" onClick = "ChangeText(‘mytext’)"/><br /> </p> <p id = “mytext”> Text I’ll change </p>

  4. (5 pts) Write a function that changes any text element on the page so that it has a solid border and centered text. <script type = “text/javascript”> function ChangeStyle(holder) { document.getElementById(holder).style.borderStyle= “solid” document.getElementById(holder).style.textAlign = “centered” } </script> </head> <body> <p> <imgsrc = "pic1.jpg" width = "500" height = "375" id = "pic1" onClick = "ChangeText(‘mytext’)"/><br /> </p> <p id = “mytext”> Text I’ll style </p>

  5. (10 pts) Given the following html code, write the function ChangeAll that generates a random number and uses that number to change both the text for a paragraph and the picture for an image on the page: <script type = “text/javascript”> txtArr = new Array() txtArr[0] = “New Text 1” txtArr[1] = “New Text 2” txtArr[2] = “New Text 3” txtArr[3] = “New Text 4” picArr = new Array() picArr[0] = “pic1.jpg” picArr[1] = “pic2.jpg” picArr[2] = “pic3.jpg” picArr[3] = “pic4.jpg” function ChangeAll(holder1,holder2) { rand = Math.floor(Math.random() * txtArr.length) document.images[holder1].src = picArr[rand] document.getElementById(holder2).innerHTML = txtArr[rand } </script></head><body> <p> <imgsrc = "pic1.jpg" width = "500" height = "375" id = "pic1" onClick = "ChangeAll(‘para1’,’pic2’)"/><br /> <imgsrc = "pic2.jpg" width = "500" height = "375" id = "pic2" onClick = "ChangeAll(‘para2’,’pic3’)"/><br /> <imgsrc = "pic3.jpg" width = "500" height = "375" id = "pic3" onClick = "ChangeAll(‘para1’,’pic4’)"/><br /> <imgsrc = "pic4.jpg" width = "500" height = "375" id = "pic4" onClick = "ChangeAll(‘para2’,’pic1’)"/> </p> <p id = "para1”>First paragraph here </p> <p id = “para2” >Second paragraph here </p>

  6. Practice Problem 1: • Write an array of images. • Write a function that takes 2 input parameters: the id of an image on the web page and a number. • In the function you should check to see if the number is greater than or equal to (>= ) the length of the array of images • If it is >= to the length of the array, then display the image in the array at 0 • Otherwise, display the array at the number passed in. • Practice Problem 2: • Write a text array • Write html code with 4 different paragraphs. • Write a function that generates 4 different random numbers, each the length of the text array, and places different text in each of the 4 different paragraphs based on the random number generated. • Practice Problem 3: • Write an array of images. • Write a function that takes as input the id of an image on the web page. • The function should display the first image in the array. • The function should then generate a prompt asking, “do you like that picture?” • If the answer is no, the next image in the array should be displayed. If the counter >= to the length of the array of image, you should show the first image again. • Practice Problem 4: • Write 2 arrays of images: • Write 2 functions • Each should have a separate counter (counter1 and counter 2) • The first function should display the first image in the first array. • It should increase its counter. If its counter >= the length of the first array, it should reset to 0 • It should then use setTimeout to pause for 1500 msec, then call the second function • The second function should display the first image in the second array • It should increase its counter. If its counter >= the length of the second array, it should reset to 0 • The second function should then use the setTimeout to pause for 1500 msec, then call the first function

  7. arr1 = new Array() arr1[0] = “pic1.jpg” arr1[1] = “pic2.jpg” arr1[2] = “pic3.jpg” arr2= new Array() arr2[0] = “pic4.jpg” arr2[1] = “pic5.jpg” arr2[2] = “pic6.jpg” arr2[3] = “pic7.jpg” counter1 = 0 counter2 = 0 function func1() { document.images[“pic1id”].src = arr1[counter1] counter1 = counter1 + 1 if (counter1 >= arr1.length) { counter1 = 0 } setTimeout(“func2()”,1500) } function func2() { document.images[“pic2id”].src = arr2[counter2] counter2 = counter2 + 1 if (counter2>= arr2.length) { counter2 = 0 } setTimeout(“func1()”,1500) }

  8. <script type = "text/javascript"> ls = new Array() ls[0] = "kittysleeping.jpg" ls[1] = "kittymetric.jpg" ls[2] = "kittyfur-back.jpg" ls[3] = "kittysit.jpg" ls[4] = "kittyalcohol.jpg" ls[5] = "kittybelly.jpg" count = -1 function loopforbackground(idholder, idholder2) { document.body.style.backgroundImage= “” document.getElementById(idholder2).innerHTML = " " continuevar = true while (continuevar == true) { count = count + 1 if (count == ls.length) { count = 0 } document.images[idholder].src = ls[count] continuevar= confirm("Do you want to see another picture?") } document.body.style.backgroundImage = “url(‘pic.jpg’)” document.body.style.backgroundImage= "url(\'" + ls[count] + "\')" document.getElementById(idholder2).innerHTML = "click here for other background options" } </script> </head> <body> <img width = "500" height = "374" alt = "area in which pics will be displayed" id = "display" /> <h3 id = "firsttext" onClick = "loopforbackground('display','firsttext')"> Click here to see potential pics... </h3>

  9. BlackJack (sort of) Overall Game: You’re going to write a web page in which you get asked if you want another card continuously, and, if you say yes, a new card will be displayed in a different place on the web page. You’re trying to make the cards come as close to but not go over 21. Steps: • Create an array of images. The images (pictures) should be of the numbers 1 through 11(Note: the image of number 1 will go in the array at 0 because we always start our arrays at 0) • Write an html page with space for 12 images (probably a table with images in it.) Each image should have a unique id. • Create a counter variable. • Write a function GetCards() • Inside GetCards, write a confirm asking, “do you want a card”. • Write a loop. Your loop will continue while the answer from confirm is true • Inside your loop, generate a random number between 0 and the length of your image array. • Slightly challenging part: • Now (still inside your loop), you will create an if statement, that goes something like this: • If the counter is equal to 0, use the random number generated to display the image from the array (like we’ve done before). You will display the image in the first id on the web page. • If the counter is equal to 1, you’ll display the image in the second id on the web page. • If the counter is equal to 2, you’ll display the image in the third id on the web page, • … • If the counter is equal to 11, you’ll display the image on the twelfth id on the web page. • Now you will use the confirm to ask, “do you want another card”. • End your loop • End your function Advanced Modifications: Keep track of the total number generated by adding each random number generated together. If the number goes over 21, modify text on the page to say, “You lose!” Modification #2: After the loop, but before the end of the function, generate a random number between 12 and 25 (The dealer’s hand). If the dealer’s random number is >21, modify text on the page to say, “You win!” Otherwise, check to see whose value is closer to 21 and modify text to report who won, accordingly

More Related