Scribd
Upload
128 views

Twa Practical Test Tasks 201903

This document outlines instructions for a final practical test on web technologies. It consists of 5 questions assessing skills in HTML, CSS, JavaScript, PHP and SQL. Question 1 involves marking up text with HTML tags. Question 2 adds CSS styling. Question 3 adds JavaScript form validation. Questions 4 and 5 involve connecting to a MySQL database and executing queries to display student data based on form submissions. The test is worth 30 marks and takes 90 minutes to complete.

Uploaded by

Humaira Siddika Saba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
128 views

Twa Practical Test Tasks 201903

This document outlines instructions for a final practical test on web technologies. It consists of 5 questions assessing skills in HTML, CSS, JavaScript, PHP and SQL. Question 1 involves marking up text with HTML tags. Question 2 adds CSS styling. Question 3 adds JavaScript form validation. Questions 4 and 5 involve connecting to a MySQL database and executing queries to display student data based on form submissions. The test is worth 30 marks and takes 90 minutes to complete.

Uploaded by

Humaira Siddika Saba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Technologies for Web Applications 300582

Final Practical Test 30 marks, 90 minutes

Student Name: Student ID:

1. (6 marks) The Question1.txt, which contains the text to be used for this
question, can be found in the root folder for this test. Add the necessary HTML
code to mark up the content as follows using appropriate HTML5 tags:

• The first line text should be a level 1 heading (1 mark)


• The title of the web page should be 'Web Development Trends in 2020' (1
mark)
• Divide the text into three paragraphs (1 mark)
• In 'Other trends of WD include…', create an ordered list for the trends to
follow (1 mark)
• Apply bold to all the 'AI's in the 2nd paragraph (1 mark)
• Apply anchor to the URL https://designwebkit.com/web-
development/web-development-trends-2020/ in the 4th paragraph (1
mark)

Save the resulting file as Question1.html, and make sure it passes the W3C
validator. Also found in the root folder is the HTML5 template file that may be used
in this question. 1 mark will be deducted if the code does not validate to HTML5.

1
2. (8 marks) Copy Question1.html into a new file called Question2.html (make
sure to keep a copy of Question1.html unchanged).

Create an external style sheet mystyle.css and link it to question2.html


Write rules in the CSS file to change:

• the background colour of the whole page to light grey (1 mark)


• the font type of the text for the whole page to 'Verdana' (1 mark)
• the colour of all the text on the page to dark brown (1 mark)
• the size of the level 1 heading to 150% (1 mark)
• the style of the list items to underline (1 mark)
• the list item marker to square (1 mark)
• the alignment of the 2nd paragraph to justified and colour of text in the 2nd
paragraph to purple (2 marks)

Note that you will have to make some changes to the HTML in Question2.html in
order for your CSS to work. Save Question2.html and make sure it passes the
W3C & CSS validator. Failure to validate the CSS will result in 2 marks deduction.

2
3. (8 marks) Hamilton Island Bistro is sending out a form for customer signup. The
signup form used for this is implemented in Question3.html, which is provided
in the root folder for this test.

Add the following validation rules to the Javascript function validateForm() in


Question3.html:

• The first name and last name must be filled (1 mark)


• The email must contain @ (1 mark)
• The first letter in the email should not be # / * (1 mark)
• Age option must be selected (1 marks)
• The password must contain at least one number (1 mark)
• The password must contain at least one capital letter (1 mark)
• Use a DOM notification to display a single generic error message if any
of the rules are violated (2 mark)
Save Question3.html.

3
The following database description applies to questions 4 and 5. Follow the
steps from Appendix.pdf in the root folder for this test.

Database Connection Information

Password
Type of Name of Location of Username to to
database database database connect connect
MySQL twa_quiz localhost root ""

Figure 1 Design View of twa_quiz

4. (4 marks) Question4.html contains the form to be used for this


question and it can be found in the root folder for this test. Do not modify
this html file in any way. The form in Question4.html allows the user to
select COURSEID and the students who have enrolled in selected course
can be displayed in Question4.php
Task: Create Question4.php to process form submission from
Question4.html so that the enrolling students can be displayed in
Question4.php including STUDENTID, FIRSTNAME, LASTNAME,
GENDER, GPA.

• SQL statements for db query and PHP statements for form data
retrieval, db connection and query execution in Qestion4.php (2
marks)
• PHP and html statements to display student information in a table
Question4.php (2 marks)

Save Question4.php in the root folder for this test.

4
5. (4 marks) Question5.php contains a postback form with two input
text fields: FIRSTNAME and LASTNAME of a student and a submit button.
It can be found in the root folder of the test. The form allows the users
to enter student's first name and last name so the corresponding
student's STUDENTID, GENDER and GPA will be displayed in
Qestion5.php
Task: Modify Question5.php so it can process the submission of
postback and display corresponding STUDENTID, GENDER and GPA.

• PHP statements to check if the form has been submitted with


FIRSTNAME and LASTNAME filled; if not, display a message "first
name and last name should be filled" in Question5.php (1 mark)
• SQL statements for query and PHP statements for form data
retrieval, db connection and query execution in Question5.php (2
marks)
• If no student is found, display a message "no student record found"
in Question5.php (1 mark)

Save Question5.php in the root folder for this test.

END OF TEST

You might also like