Soalan - PAlt - DFT40163 - Sesi 2 2022 2023 - SET

SULIT DFT40163: WEB DESIGN TECHNOLOGY / PSP
INFORMATION & COMMUNICATION TECHNOLOGY DEPARTMENT

SESSION: 2 2022/2023
FINAL ASSESSMENT: PRACTICAL TEST (ONLINE)
COURSE CODE : DFT40163

COURSE NAME : WEB DESIGN TECHNOLOGY
DURATION : 2 HOURS
PRACTICAL TEST (30%)
Through this assessment, students will be able to:
CLO 1 : Construct the HTML, CSS, JavaScript and jQuery in developing an

interactive web page that can be published on web browser (P4, PLO 3)
INSTRUCTION
1. This exam is made up of FOUR (4) questions. Answer ALL the questions.
2. Create a folder and name the folder as your registration number. All your answers
should be saved in the folder.
3. All files names should follow the name given.
4. The compressed folder should be uploaded on the platform as informed by your
lecturer.
Submission Procedure:
1. Make sure all your files are in the correct folders and compress your root folder with
all your sub-folders with HTML, CSS, JS, images into a zip/rar file named
“REGNO.zip/.rar”. Submit this to the LMS platform provided.
2. When the zip file is decompressed, the entire Web site should be able to be run from
index.html without needing to move any files. Before you submit, please make sure
your page is working correctly.
Warning!
Marks will be deducted for any plagiarism from the total marks achieved.
1
QUESTION 1 (12 marks)
Prepare a storyboard for a HOMEPAGE for a dynamic website. Storyboard sketches must use
the guidelines in web design principles. You can use Ms. Word or Ms. PowerPoint as
software to draw the storyboard and save the file as storyboardQ1.pdf. (CLO1, P2)
The storyboard requirements that need to be developed are as follows:
1. storyboard is for flower and gift website.
2. have at least THREE (3) buttons which are Home, Login and Contact Us.
3. have the logo and search box and other additional menus as appropriate according
to your own creativity.
4. adhere to 3 principles of web design such as Consistency, Grid Based Layout and
Simplicity.

Complete the style code necessary to build the following page, exactly as shown in Figure
2.1. The page uses the HTML code as in Table 2.1. Your HTML should be in a file named
indexQ2.html. No style markup should be included in your HTML file. Implement it using
one single external stylesheet and save the file name as styleQ2.css. This file should be
placed in the same folder. (CLO1, P3)
Figure 2.1: Output with CSS
2
Some of the output specifications (refer to Figure 2.1):

1. The background color of the page is maroon colored but the background
color of the area containing everything is #FBF8F8. The #FBF8F8 area is
70% wide and centered. There is 10px of space between the edge of the
#FBF8F8 background and everything inside it.
2. The styles for topnav are orange bottom border, background color #FFFFFF
and overflow is hidden.
3. The styles for topnav hover are left, orange, padding 10 px 20 px and size
18px.
4. The max size for image is 50%.
5. The main H1 requires a size 36px and weight 600, while the paragraph below
has a size of 16px, color #777 and a weight of 600.
6. The styles for the service area are width 80%, alignment center and padding
top 30px, while service-col has a style flex-basis 31%, background color is
#FAD7A0, border radius 10px, padding 20px 12px and box-sizing is border-
box.
7. The footer area has background #FAD7A0 and the heading size is 20px. The
top and bottom margins are 10px and 20px respectively.
8. Footer-bottom padding is at 20px, font size 14px with orange background
color.
Note:
● Don't forget to use a proper tag for all the elements that clearly describe the
content on the page. You can add an extra style if needed.
● Some of color code used for text and background are:
# FBF8F8 ORANGE MAROON #FAD7A0
● Font Type: Candara
Crop this image and save it as logo.png
3
Figure 2.2: logo.png
4

Constructs a JavaScript program using conditional statements to display the result of a status
user’s satisfaction as per the following guideline.
Score Status
5 Very satisfied
4 Somewhat satisfied
3 Neither satisfied nor dissatisfied
2 Somewhat dissatisfied
1 Very dissatisfied
Condition Alert or Output

a. If score is null/blank Please enter the score field.
b. Invalid value score<0 or score>5 Please type the correct score from 1 until 5 only.
c. Invalid value Please enter a number only for score field.
d. Checking the condition for status Your feedback status is [${status}]. TQ for your
feedback!
The interaction is shown by notifying the user of the action made by the user. Your HTML
should be in a file named indexQ3.html, and your script should be in a separate file named
scriptQ3.js. (CLO1, P4)
Figure 3.1: Example of output
5
Figur
e 3.2: Example of output for Score is 5 Figure 3.3: Example of output if Score is null/blank.
Figure 3.4: Example of output for invalid value Figure 3.5: Example of output for invalid value
6

Referring to the following output in Figure 4.1, you are required to build an application using
the jQuery framework. The page uses the HTML code as in Table 4.1. Your HTML should
be in a file named indexQ4.html. Complete the coding by inserting the meta tag, jQuery
Mobile Content Delivery Network (CDN) hosted link and code as listed in Table 4.2 to add
all the buttons as shown in Figure 4.1. Make sure all the codes are placed in the correct place
so that the output is correct. (CLO1, P3)
Save the HTML file as indexQ4.html
Figure 4.1: Output of page
Question End
7
ATTACHMENT:
Table 2.1: The HTML code

<!DOCTYPE html>
<html>
<head>
<title>Q2_Flower Station</title>
<link rel="stylesheet" href=" styleQ2.css">
</head>
<body><div id="all">
<div class="topnav">

<a class="current" href="indexQ2.html" rel="external">Home</a>
<a href="#" rel="external">Login</a>
<a href="#" rel="external">Products</a>
<a href="#" rel="external">Gallery</a>
<a href="#" rel="external">Location</a>
<a href="#" rel="external">Contact Us</a>
</div>
<section class="service">
<img id="logo" src="logo.png">
<h1>Services we Offer</h1>
<p>“Where beauty meets the business”
<br>Flowers and plants play an important role in people’s lives.
<br>“People were, are and always will be buying flowers”.</p>
<div class="row">
<div class="service-col">
<h3>Nationwide Delivery</h3>
<p>We are here to serve you all over the country. So no matter
where you need that package to go, they can get it there. You won't have to
worry if your courier goes to the smaller city where your niece lives. </p>
</div>
<h3>Great Value for Money</h3>
<p>We are here to serve you the most advantageous combination of
cost, quality and sustainability to meet customer requirements. </p>
</div>
<h3>Customer Service</h3>
<p>Great customer service with 100% smile guarantee. We also do
a custom designed bouquet on how the customer request is. This type of custom
design can be ordered through our social media platform. </p>
</div>
</div>
</section>
<section class="footer">
<h1>About Us</h1>
<p>Welcome to Flower Station </p>
<div>
<a href="indexQ3.html" target="_blank">Feedback Form</a>
</div>
8
<div class="footer-bottom">
<p>Copyright ©2023 All Rights Reserved. Designed by
<span>Flower Station</span></p>
</div>
</section>
</div>
</body>
</html>
9

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=" styleQ2.css">
<style>
.datascore, .form-button {
padding: 10px 20px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 1.1);
}
.datascore {
background-color: #f5f5f5;
color:#333;
text-align: center;
}
.form-button {
background-color: orange;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
</style>
</head>
</div>
<h1>Feedback of Customer Satisfaction</h1><br>
<div>
<div>
<form>
<h2>Key in the Score (1 until 5)</h2>
<input type="text" class="datascore" placeholder="Score"
id="score">
<input type="button" value="Show Feedback Status" class="form-
button" onclick="calculate()">
</div>
<div class="form-group showdata">
<p id="showdata" style="font-size: 20px; color:orange;"></p>
</div>
</form>
</div>
10
<script src="scriptQ3.js"></script>
</section>
<section class="footer">
<h1>About Us</h1>
<p>Welcome to Flower Station </p>
<div>
<a href="indexQ4.html" target="_blank">Responsive Page</a>
</div>
<div class="footer-bottom">
<p>Copyright ©2023 All Rights Reserved. Designed by
<span>Flower Station</span></p>
</div>
</section>
</div>
</body>
</html>
11

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styleQ2.css">
<style>
h2{
font-family: Candara;
background-color: orange;
color: white;
text-align: center;
}
</style>
</head>

</div>
<h2>Feedback of Customer Satisfaction</h2>
<div data-role="main" class="uicontent">
<h2>Please rate the service:</h2>
<p>
<label for="Very dissatisfied"><input type="radio" name="rate" value="Very
dissatisfied" id="1">Very dissatisfied</label>
<label for="Somewhat dissatisfied"><input type="radio" name="rate"
value="Somewhat dissatisfied" id="2">
Somewhat dissatisfied</label>
<label for="Neither satisfied nor dissatisfied"><input type="radio" name="rate"
value="Neither satisfied nor dissatisfied" id="3">
Neither satisfied nor dissatisfied</label>
<label for="good"><input type="radio" name="rate" value="Somewhat satisfied"
id="4">
Somewhat satisfied</label>
<label for="very-good"><input type="radio" name="rate" value="Very satisfied"
id="5">Very satisfied</label>
</p>
<p>
<button id="btnRate" style="background-color: #FAD7A0;">Submit</button>
</p>
<h2 id="output"></h2>
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
</div>
12
</div></div>
<script>
let btn = document.getElementById('btnRate');
let output = document.getElementById('output');
btn.addEventListener('click', () => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if (rate.checked) {
output.innerText = `You selected: ${rate.value}`;
}
});
});
</script>
</section>
</body>
</html>
13
Table 4.2:
Meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
jQuery Mobile CDN hosted link:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Code 1:
<div data-role="navbar">

<ul>
<li><a href="______________ " target="_blank" style="padding: 40px 35px 10px
35px;" data-theme="b" data-icon="grid">______________ </a></li>
<li><a href="______________ " target="_ blank" style="padding: 40px 35px 10px
35px;" data-theme="b" data-icon="grid"> ______________ </a></li>
<li><a href="______________ " target="_blank" style="padding: 40px 35px 10px
35px;" data-theme="b" data-icon="grid"> ______________ </a></li>
</ul>
</div>
Code 2:
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn uicorner- all ui-shadow ui-icon-plus ui-btn-icon-
left">______________ </a>
left">______________ </a>
left">______________ </a>
</div></div>
14
Practical Test Rubric Score Marks
NO TASK 4 3 2 1 SCORE
Q1 Content Information in the storyboard is Information in the storyboard
interesting, newsworthy, and not newsworthy or
informational. informational
Clarity and Storyboard is easy to understand, Storyboard is easy to understand, Storyboard is hard to understand
Neatness and all elements are so clearly and most elements are clearly with rough drawings and labels.
written, labeled, or drawn. written, labeled, or drawn.
Web design Storyboard included all required Storyboard included 2 required web Storyboard included 1 web
Principle web design principle design principle design principle
Logo/Button/ Storyboard included all required Storyboard included 4 required Storyboard included 3 required Storyboard included 1@2
Menu items. button/menu button/menu required button/menu
MARK FOR Q1 / 12
Q2 All area ALL CSS properties have been Only 3 CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
content created completely as stated. created completely as stated. created completely as stated. been created.
Main heading 2 CSS properties have been created Only 1 of CSS properties has
completely as stated. been created.
Menu/topnav ALL CSS properties have been Only 3 CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
created completely as stated. created completely as stated. created completely as stated. been created.
Menu/topnav ALL CSS properties have been Only 3 CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
hover created completely as stated. created completely as stated. created completely as stated. been created.
Image/Logo 2 properties have been created Only 1 of CSS properties has
completely as stated. been created.
Heading Only 2 CSS properties have been Only 1 of CSS properties has
created completely as stated. been created.
Paragraph ALL CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
created completely as stated. created completely as stated. been created.
Column ALL CSS properties have been Only 3 CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
Footer ALL CSS properties have been Only 3 CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
Footer Bottom ALL CSS properties have been Only 3 CSS properties have been Only 2 CSS properties have been Only 1 of CSS properties has
Output The output of the website is The output of the website is
published on a suitable platform published on a suitable platform
without any problem/error. but with problems/errors.
MARK FOR Q2 / 35
15
NO TASK 4 3 2 1 SCORE
Q3 Output The output of the website is The output of the website is
Switch… case ALL JavaScript program function Only three quarters of JavaScript Only half of JavaScript program Less than half of JavaScript
for status completely. program function completely. function completely. program function completely.
If… else / alert Excellent use of JavaScript Good for using JavaScript program Simple and less JavaScript program Poor of JavaScript program
program using alert method. using alert method. using alert method. using alert method.
Overall Excellent use of JavaScript used. Good for using JavaScript used. Simple and less JavaScript used. Poor of JavaScript used.
MARK FOR Q3 / 14
Q4 Output The output of the website is The output of the website is
Meta tag Meta tag complete. Meta tag not complete.
CDN-hosted All the jQuery Mobile CDN hosted Only two coding places in the right Only 1 coding given placing in
files files are placed in the right place. place. the right place.
Codes 1 All blank codes are filled. Only three codes given are placed Only two codes given are placed Only one coding given is placed
correctly. correctly. correctly.
Codes 2 All blank codes are filled correctly. Only two codes given are placed Only one coding given is placed
correctly. correctly.
MARK FOR Q4 / 14
TOTAL MARKS / 75
Note:
A mark of ZERO (0) will be given if all items for score 1-4 are NOT fulfilled as specified or NO answer is given by the student.
16

Soalan - PAlt - DFT40163 - Sesi 2 2022 2023 - SET

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Soalan - PAlt - DFT40163 - Sesi 2 2022 2023 - SET

Uploaded by

Copyright:

Available Formats

SULIT DFT40163: WEB DESIGN TECHNOLOGY / PSP

INFORMATION & COMMUNICATION TECHNOLOGY DEPARTMENT

COURSE CODE : DFT40163

PRACTICAL TEST (30%)

Through this assessment, students will be able to:

CLO 1 : Construct the HTML, CSS, JavaScript and jQuery in developing an

QUESTION 1 (12 marks)

The storyboard requirements that need to be developed are as follows:

1. storyboard is for flower and gift website.

QUESTION 2 (35 marks)

Figure 2.1: Output with CSS

Some of the output specifications (refer to Figure 2.1):

● Font Type: Candara

Crop this image and save it as logo.png

Figure 2.2: logo.png

QUESTION 3 (14 marks)

Condition Alert or Output

Figure 3.1: Example of output

QUESTION 4 (14 marks)

Save the HTML file as indexQ4.html

Figure 4.1: Output of page

Table 2.1: The HTML code

Table 3.1: The HTML code

Table 4.1: The HTML code

<link rel="stylesheet" href="styleQ2.css">

jQuery Mobile CDN hosted link:

You might also like