Programme Diploma in Information Technology

Module Web Development 2A

Module Code WPD 210
NQF Level 6
Credits 15
Assessment Type Group Assignment Memorandum
Semester 2nd
Due Date TBA

Total marks 50
Pass mark 50%
Weighting 10%
Examiner John Alloziem
Moderator Thabiso Mathebula

This question paper consists of 10 pages including the cover page.

INSTRUCTIONS:
Read the following instructions CAREFULLY:
1. Your assignment should be typed – Arial font 12; 1.5 spacing; 1500 words.Justified (Cltr + J)
2. Your submission must be presented in the following format:
a. Coversheet
b. Table of Contents
c. Introduction
d. Body
e. Conclusion
f. Bibliography, (proof of research). Not included in the word count.
3. Use the Harvard method of referencing.
4. You must consult at least five (5) different sources or preferably journals for adequate
referencing.
5. Keep photocopies of all assignments handed in.
6. Plagiarism and copying of assignments will result in the default mark 0% being awarded. This
is also a punishable offence, which will lead to a disciplinary action.
7. Groups should be midsized (4 - 6 people).
8. It is in your own interest to present your work neatly.

1
 DECLARATION OF AUTHENTICITY

All members of the group are required to sign the declaration, each of whom is responsible and liable to
disciplinary actions, irrespective of whether he/she has signed the declaration and whether he/she has
contributed, directly or indirectly, to the contents presented.

I/We the undersigned declare that:

• We understand what plagiarism is and are aware of the Damelin’s policy in this regard.
• The work hereby submitted is original work, gathered and utilised to fulfil the requirements of this
group assignment except for source material explicitly acknowledged.
• All group members have read and checked that all parts of this submission, irrespective of
whether they are contributed by individual members or all, here submitted are original except for
source material explicitly acknowledged.
• We have not used work previously produced by another student/ group or any other persons to
hand in as our own.
• We have not allowed, and will not allow, anyone to copy our work with the intention of passing
it off as their own work.

Group Members:
Full Name & Surname Signature Date

2
GROUP ASSIGNMENT INSTRUCTIONS

Groups will consist of between minimum of FOUR and maximum of SIX members.
The group has to meet, and the work must be divided equally amongst the members.

The Presentation:
• The presentation should be no longer than 15 minutes.
• The group will present to the class and lecturer as scheduled.
• All members are to have equal presenting time.

The group presentation will be assessed as follows;

Your lecturer will use these rubrics to evaluate each group’s presentation.

Criteria Grading Scale

Marks
Teamwork 0-1 2-3 4 5
Did everyone The The The teammates The teammates
contribute to teammates teammates worked from always worked
the never worked sometimes others’ ideas from others’
presentation? from others’ worked from most ideas.
Did everyone ideas. It others’ ideas. of the time. And It was evident
seem well seems as However, it it seems like that
versed in the though seems every did some all of the group
material? only a few as though work, but some members
people worked certain people people are contributed
on the did not do as carrying the equally to the
presentation. much work as presentation. presentation.
others. /5
Organisation The There were The The presentation
Was the presentation minimal signs presentation was well
presentation lacked of had organising organised, well
well organised organisation organisation or ideas but could prepared and
and easy to and preparation have been easy
follow? had little much to follow.
evidence stronger with
of preparation better
preparation /5
Delivery Presenters Presenters Presenters were Presenters were
Did the were were occasionally all
presenters unconfident not consistent confident with very confident in
Speak clearly? and with the level their delivery and they
Did they engage demonstrated of presentation did an excellent
theaudience? little evidence confidence/ however the job of engaging
Was it obvious of preparedness presentation the class.
thematerial had planning prior they showed was Preparation is
been to the not as engaging very
rehearsed? presentation. classroom but as it could have evident.
had some been for the
strong class
moments. /5

3
 Total
Category Evaluation Criteria Marks Marks
Introduction is attention-getting, lays out the problem well, 5
and establishes a framework for the rest of the
presentation.
Content Technical terms are well-defined in language appropriate 5
(25 points) for the target audience.
Presentation contains accurate information. 5
Appropriate amount of material is prepared, and points 5
made reflect well their relative importance.
There is an obvious conclusion summarising the 5
presentation.
Referencing Appropriate Harvard Referencing. 5
(5 points)
Peer Review Evaluation by Classmates 5
(5 points)

QUESTION 1 (10 marks)

1.1 In order to create a usable navigation for your website, one should try to avoid information (4)

overload. Give a full description of, at least, two things you should do to achieve this.

Answer: Pg 66 SU 9
To avoid information overload, we may implement the following:
• Create manageable information segments by breaking content into smaller files that can be
linked together. √√
• Control page length by breaking content into sectional pages and providing sufficient links to
enable users to get around. √√
• Use hypertext to link facts, related information and logical concepts. √√
Any 2.
Outcome: Create usable navigation
1.2 Responsive design lets us build a more flexible type of web page that responds to the varying (6)
size of mobile displays.
What are the three main elements of responsive design are. Give full description.
Answer: Pg 109, SU 12
Three main elements of responsive design are:
• CSS media queries - Using these expressions, we can apply styles based on display device
characteristics. √√
• Flexible images - These images adapt to the parameters of the user’s screen size √√
• Flexible layouts - These realign elements of our content structure based on the display
device √√
Outcome: Responsive web design

4
QUESTION 2 (10 marks)

2.1 Design a web page similar to the one shown below. (10)
The owner has desired that you design the page exactly as it is here.
When the user clicks on the button “Send Info” the data filled in the form should be
picked up and forwarded to an email which you should provide in your code.
When the user clicks on the “clear button”, the whole form should be reset to accept
fresh entries.
The “Select type of position desired” should have contain two options; Part-Time
Contract or Full-Time Contract.

Answer:
Form design (3 marks)
Correct placement of form objects(check boxes, text boxes and buttons (5 marks)
Others (2 marks)

5
(Solution is just a guide, marker to use own discretion)
<!DOCTYPE>
<HTML>
<HEAD>
<title>Wonder Job Seach</title>
<meta content="text/html;charset =utf8" http-equiv="content-type"/>
<style type="text/css"> </style>
</HEAD>
<BODY>
<h1> Ultimate online job Search</h1> √
<h2> Please enter your details below</h2> √
<form action="" method="post"> √
<p>Name:.<input size="30" name="name" id="name"></p> √
<p>Email:.<input size="30" name="name" id="email"></p> √
<p>Phone:.<input size="30" name="name" id="phone"></p> √
<h2>Select Your Target Job Title (Choose one):</h2> √
<p>
<input type="checkbox" name="jobtitle" value="ae" /> √
Account Executive √
</p>
<p>
<input type="checkbox" name="jobtitle" value="bd" /> √
Business Development √
</p>
<p>
<input type="checkbox" name="jobtitle" value="bd" /> √
Sales Manager √
</p>
<p>
<input type="checkbox" name="jobtitle" value="bd" /> √
Vp Sales √
</p>
<p>

6
 Select the type of position you desire: √
<select name="position"> √
<option>Part-Time Contract</option> √
<option>Full-Time Contract</option> √
</select>
</p>
<p>
Are you willing relocate? √
Yes<input type="radio" /> √
No<input type="radio" /> √
</p>
<p>
<input type="submit" value="Send Info"><a href="[email protected]"> √
<input type="reset" value="Clear form" onclick="this.form.reset()" /> √

</p>
</form> √
</BODY>
</HTML>

QUESTION 3 (10 marks)

3.1 Write a simple html code to display the image below: (10)

Answer:
<!DOCTYPE html>
<html>

7
 <head>
<title>Lists, Tables and Forms</title>
<style>
ul#navlist li{
display: inline;
}√√
body{font-size: 24px;} √
</style>
</head>
<body>
<ul id="navlist"> √
<li><a href="index.html">Home</a></li> √
<li><a href="history.html">History</a></li> √
<li><a href="how.html">How it Works</a></li>√
<li><a href="clubs.html">Balloon Clubs</a></li>√
<li><a href="festivals.html">Festivals</a></li>√
<li><a href="rides.html">Where to Ride</a></li>√
<li><a href="faq.html">FAQ</a></li>√
</ul>
</body>
</html>

QUESTION 4 (20 marks)

4.1 Design a web page complete with all the information and layout design as seen in the (20)
picture below. Your code should make use of external style sheet (CSS). Use the
pictures supplied as data files for this question (Gout_pix and Gout_pix2).

8
9
Answer:
Marker to use own discretion as solutions may vary. Answer is provided only as a
guide.
Use of External CSS (5 marks)
Page design as original (10 marks)
Correct header and footer sections as original (5 marks)

10