VINH LONG UNIVERSITY OF TECHNOLOGY EDUCATION

PRACTICE CENTER

TEST PROJECT
PRACTICAL SKILLS

MODULE 1: WEB DESIGN

Exam Paper Code: WD01

SCHOOL LEADERSHIP CHIEF SUBCOMMITTEE ON

EXAM DEVELOPMENT

Vinh Long, month 12/2020

Guide contestants
Date of
Student's name Placement Module
birth

Web Design

GUIDE CONTESTANTS

Time:
- Preparation Time: 05 minutes
- Time Duration: 150 minutes
- Break Time: 10 minutes
Scores:
Exam content Marks
1 Programming with HTML/CSS 30
2 Programming with JavaScript 30
3 Use the MySQL 10
4 Programming with PHP 30
Total Marks 100

Candidates are required to note:

- Ensure safety standards of health and computer
- Do the test independently without discussing while doing the test
- Comply with regulations of exam room and proctor’s instructions
- Fill the information in the form
- Complete all requirements in the content of the exam
- Do not use documents, the Internet and other communication devices during the
assignment
- If the exam does not have special requirement for the file name and storage location,
contestants save all exam file name in the folder as following format: D:\
WorkSkills\Web Design
<Student’s Name>_< Student code >[.< extension >]

Test Project: Web Design Exam Paper Code: WD01

Guide contestants
Date of
Student's name Placement Module
birth

Web Design

CONTENT OF THE TEST

Question 1:
Programming with HTML/CSS:
Use HTML/CSS code to design the following page:

DESCRIPTION OF PROJECT AND TASKS

o Make all headings green, and make them use Garamond font or any serif font on the
system.
o The quote should be italicized.
o The apples picture name is greenapples.jpg. It also links to http://www.apple.com/.
o All pictures should have no borders and be 250 pixels wide.
o The right section has a 2 pixel wide outset green border and a background
of #99cc99.
o Every other line in the "types of apples" list is white and its font-size is 120% as large
as the other list items.
o The definition terms are bolded.
o Notice that there are two distinct sections on the page.
o The content inside each section should be 20 pixels away from all edges.
Test Project: Web Design Exam Paper Code: WD01
Guide contestants
Date of
Student's name Placement Module
birth

Web Design

Question 2:
Programming with JavaScript:
Write the necessary JavaScript code garden.js for the functionality of the following
page:

DESCRIPTION OF PROJECT AND TASKS

o This page allows the user to plant a number of flower patches in their garden.
o The input box for the # of flower patches has an id of "count".
o The "Plant Garden" button has an id of "plant".
o The "Clear" button has an id of "clear".
o When the user clicks on "Plant Garden" the page should generate the # of flower
patches given in the input box on the page.
o The flower patches are images; either daffodils.jpg or roses.jpg.
o Choose randomly what kind of flower patch to show.
o Clicking on the "Clear" button removes all flower patches from the garden.

Test Project: Web Design Exam Paper Code: WD01

Guide contestants
Date of
Student's name Placement Module
birth

Web Design

Question 3:
Use the MySQL create database Cities:
The database schema:
Countries
independence_
code Name Continent population gnp head_of_state
year
AFG Afghanistan Asia 1919 22720000 5976.0 Mohammad Omar
NLD Netherlands Europe 1581 15864000 371362.0 Beatrix

... ... ... ... ... ... ...

Cities
Id Name country_code district population
3793 New York USA New York 8008278
Los
1 USA California 3694820
Angeles

... ... ... ... ...

Languages
country_code language official percentage
AFG Pashto T 52.4
NLD Dutch T 95.6

... ... ... ...

DESCRIPTION OF PROJECT AND TASKS

Test Project: Web Design Exam Paper Code: WD01

Guide contestants
Date of
Student's name Placement Module
birth

Web Design

Some countries have two cities with the same name. For example, there are several
cities in the USA named Springfield, which is part of the reason that name was chosen for
the home town of the Simpsons.
Using the world database, find all such cities where there are two or more cities
within the same country that have the same name. Show both the country name and the city
name. Eliminate duplicate results and order by the country name, breaking ties by the city
name.
This is the output you should get:

+--------------------+--------------+
| country | city |
+--------------------+--------------+
| China | Jining |
| China | Kaiyuan |
| China | Yichun |
| Indonesia | Depok |
| Mexico | Guadalupe |
| Mexico | La Paz |
| Mexico | Matamoros |
| Philippines | San Carlos |
| Philippines | San Fernando |
| Philippines | San Jose |
| Russian Federation | Zeleznogorsk |
| United States | Arlington |
| United States | Aurora |
| United States | Columbus |
| United States | Kansas City |
| United States | Richmond |
| United States | Springfield |
+--------------------+--------------+

Test Project: Web Design Exam Paper Code: WD01

Guide contestants
Date of
Student's name Placement Module
birth

Web Design

17 rows in set (14.48 sec)

Test Project: Web Design Exam Paper Code: WD01

Guide contestants
Date of
Student's name Placement Module
birth

Web Design

Question 4:

Programming with PHP:

Use database Cities from module C write a page that displays the result of a query in
PHP. Start from the following file cities.php (initial HTML/CSS code use cities.css from
source folder)

And page show.php:

DESCRIPTION OF PROJECT AND TASKS

o Use banner and background from source folder.
o Drop-down list "country" has an id of "country", it show name country.
o Drop-down list "top" has an id of "top", it show top largest cities.
o The "Submit Query" button has an id of "query", It also links to show.php.
o Page show.php show top largest cities of country selected.

Test Project: Web Design Exam Paper Code: WD01

Assessment guidelines

Student's name Date of birth Position

Web Design

GENERAL TRANSCRIPT
Maximum Achieved
Exam content
Marks Marks
1 Programming with HTML/CSS 30
2 Programming with JavaScript 30
3 Use the MySQL 10
4 Programming with PHP 30
Total Marks 100

TEST TIME

Get to know the equipment Time Duration Break Time

Starting time Starting Starting Starting
time time time
Ending time Ending Ending Ending
time time time

TEACHERS’ SIGNATURE

1 2 3 4 5

Test Project: Web Design Exam Paper Code: WD01

Assessment guidelines

Student's name Date of birth Position

Web Design

ASSESSMENT GUIDELINES
Maximum Achieved
1 Technical Press the network cable Note
Marks Marks
Animation doesn’t distract the eye when
1.1 1
reading over website content.
Animation fits in with the design of the
1.2 1
website.
1.3 Uniqueness of the animation. 1
1.4 Layout 4
Make all headings green, and make them use
1.5 Garamond font or any serif font on the 3
system.
1.6 The quote italicized. 3
The apples picture name is greenapples.jpg. It
1.7 3
also links to http://www.apple.com
All pictures should have no borders and be
1.8 2
250 pixels wide.
The right section has a 2 pixel wide outset
1.9 2
green border and a background of #99cc99.
Every other line in the "types of apples" list is
1.10 white and its font-size is 120% as large as the 2
other list items.
1.11 The definition terms are bolded. 2
1.12 there are two distinct sections on the page. 3
The content inside each section should be 20
1.13 3
pixels away from all edges.
Total Marks 30

Design the network model using VISIO Maximum Achieved

2 Note
software according to the system requirements Marks Marks
Animation doesn’t distract the eye when
2.1 1
reading over website content.
Animation fits in with the design of the
2.2 1
website.
Uniqueness of the animation.
2.3 1

2.4 Page layout has all required sections. 5

2.5 Box for "count". 5

Test Project: Web Design Exam Paper Code: WD01

Assessment guidelines

Student's name Date of birth Position

Web Design

2.6 Button "Plant Garden". 5

2.7 Button "Clear". 5
2.8 Use images; either daffodils.jpg or roses.jpg. 4
Choose randomly what kind of flower patch
2.9 3
to show.
Animation doesn’t distract the eye when
2.10 1
reading over website content.
Total Marks 30

Use Packet Tracer software to configure the Maximum Achieved

3 Note
above system Marks Marks
Tables with all necessary fields have been
3.1 3
created
Data types / lengths are appropriate on all
3.2 1
fields
Foreign key constraints have been used where
3.3 1
appropriate
The data for the menus has been inserted into
3.4 1
the tables
Find all such cities where there are two or
3.5 more cities within the same country that have 4
the same name
Total Marks 10

Use Packet Tracer software to configure the Maximum Achieved

4 Note
above system Marks Marks
4.1 Website that is connected to the database 3
4.2 Logical Website layout 2
Images have been used effectively in the
4.3 2
designs
4.4 Desigh page cities.css 2
4.5 Design page cities.php 5
4.6 Design page show.php 3
4.7 Drop-down list "country" show name country. 5
4.8 Drop-down list "top" show top largest cities. 3
The "Submit Query" button links
4.9 5
to show.php.
Total Marks 30

Test Project: Web Design Exam Paper Code: WD01

Assessment guidelines

Student's name Date of birth Position

Web Design

Test Project: Web Design Exam Paper Code: WD01