Consider the following file A_Q1.html.

Size: px

Start display at page:

Download "Consider the following file A_Q1.html."

Brianne Bruce
5 years ago
Views:

1 Consider the following file A_Q1.html. 1 <html> 2 <head> 3 <title> Q1A </title> 4 <style type="text/css"> 5 </style> 6 <script type="text/javascript"> 7 function check () { 8 } 9 </script> 10 </head> 11 <body> 12 <form name="myform" action="a_q2.php" method="get" onsubmit="return check()"> 13 <p> Verb Form to be displayed: 14 <input type="radio" name="verbform" value="1" checked /> Past tense 15 <input type="radio" name="verbform" value="2" /> Present Perfect tense 16 <input type="radio" name="verbform" value="3" /> Both 17 </p> 18 <p> Number to be displayed: 19 <input type="text" name="totalno" id="totalno" /> <span id="infototalno"> </span> 20 </p> 21 <input type="submit" value="submit" /> 22 </form> 23 </body> 24 </html> Question 1 Sketch the output of A_Q1.html. Question 2 User will choose the verb form (i.e., past tense, present perfect tense or both) as well as the total number of verbs to be displayed. These data will be passed to A_Q2.php after the submit button is clicked. In A_Q1.html, complete the JavaScript function check() so that it can perform a client-side checking of the following: User needs to enter the total number of verbs to be displayed, i.e., the field totalno is mandatory. If it is empty at the time when user clicks submit, the message This field is required (in red color defined using the embedded style of CSS) will appear next to the textbox.

2 The total number to be displayed must be between 5 and 15 (inclusive). If it is not in the range, the message You should enter a number between 5 and 15 (inclusive) only (in blue color defined using the embedded style of CSS) will appear next to the textbox. You should use regular expression (JavaScript) for form validation. Note that you cannot add or remove any other parts of A_Q1.html. You can only modify the JavaScript function check() and the CSS style within <style type="text/css"> and </style>. Question 3 Consider the following A_Q2.php. 1 <!DOCTYPE html> 2 <head> 3 <title> Q2 </title> 4 <script type="text/javascript"> 5 function DisplayInfo () { 6 } 7 </script> 8 </head> 9 <body onload="displayinfo()" 10 <p id="verbinfo" name="verbinfo"> Verb form to be displayed: </p> 11 <p id="tno" name="tno"> Number of questions: </p> 12 <input type="button" value="show" onclick="location.href='a_q3.php'" /> 13 </body> 14 </html> If the field totalno satisfies the required format, data will be passed to A_Q2.php after the submit button is clicked. In A_Q2.php, complete the function DisplayInfo() so that the information input by the user in A_Q1.html is displayed as shown in Figure Q2A. If user selects Past tense and enters 14 in the textbox in A_Q1.html, then the display is as in Figure Q2A(a). If user selects Present Perfect tense and enters 10 in the textbox in A_Q1.html, then the display is as in Figure Q2A(b). If user selects Both and enters 7 in the textbox in A_Q1.html, then the display is as in Figure Q2A(c). Complete the function DisplayInfo() in A_Q2.php. Do not modify any other parts in A_Q2.php.

3 Figure Q2A (a) Figure Q2A (b) Figure Q2A (c) Question 4 In this part, we would need to develop the program A_Q3.php. After the button Show in A_Q2.php is clicked, user will be redirected to A_Q3.php. Sample displays are in Figure Q3A. At the beginning, choice made by the user is shown. This includes the verb form and the number of verbs to be displayed. In fact, it is the same display as that in A_Q2.php (Figure Q2A). The text file questions.txt contains a list of irregular verbs. The information is arranged in the following format: Verb in present tense, verb in past tense, verb in present perfect tense For example, the first line in questions.txt is: awake,awoke,awoken It means the verb in present tense is awake, the corresponding verbs in past tense and present prefect tense are awoke and awoken respectively. They are separated by comma.

4 Note that the number shown on the left hand side is for reference only. The actual file questions.txt does not have that column. Suppose that the user has chosen the past tense to be displayed and set the number of questions to be 14, then 14 verbs are chosen randomly from the file questions.txt for display. Note that only the present tense and the past tense are displayed as in Figure Q3A(a). If user has chosen the present perfect tense and set the number of questions to be 10, then 10 verbs are chosen randomly from the file questions.txt for display. Note that only the present tense and the present perfect tense are displayed as in Figure Q3A(b). If user has chosen both and set the number of questions to be 7, then 7 verbs are chosen randomly from the file questions.txt for display. In this case, verbs in present tense, past tense and present perfect tense are displayed as in Figure Q3A(c).

5 Figure Q3A (a) Figure Q3A (b) Figure Q3A (c)

JavaScript CSCI 201 Principles of Software Development

JavaScript CSCI 201 Principles of Software Development Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu Outline JavaScript Program USC CSCI 201L JavaScript JavaScript is a front-end interpreted language that