Professional Documents
Culture Documents
Muhammad Ezral Redzuan Bin Azlee-Lab Test SWC3113
Muhammad Ezral Redzuan Bin Azlee-Lab Test SWC3113
LAB TEST
DURATION : 2 HOURS
1 This lab test aims to fulfil CLO2 - Apply appropriate functions, requirements and
. methods in mobile solution implementation. (C3, PLO2).
2 The marks allocated for this lab test is 25% of total marks.
.
3 This lab test consists of ONE (1) question.
.
4 Submit the answer sheet document which include code, screenshot of interface and
. recorded demo video link through LMS or Google Classroom.
5 This is a close book lab test. You are not allowed to refer to any resources such as
. Internet and Books.
6 Any plagiarism will be penalized.
.
This question paper consists of 4 printed pages including the front page
NOV 2021/SWC3113/SWC3403
You are assigned to create a My Biodata Apps for an introduction class. This application
should contain only 4 pages. Design the application creatively by including appropriate
information and multimedia element such as image, audio or video.
The following are examples of interface design for each page. You shall design your own
application based on the given interface design.
You might use: sidemenu bar, tab bar or your own design button. All button must navigate to
the related pages.
Your apps should include:
● Text
● Image
● Button
● Link
● Video
2
NOV 2021/SWC3113/SWC3403
Page 1 - Home
home.page.html
<ion-header>
<ion-toolbar>
<ion-title></ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p class="ion-text-center">
</p>
3
NOV 2021/SWC3113/SWC3403
<ion-grid fixed>
<ion-row class="ion-align-items-center">
ABOUT MY SELF
</ion-button>
</ion-col>
ABOUT MY FAMILY
</ion-button>
</ion-col>
GALLERY
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
4
NOV 2021/SWC3113/SWC3403
home.page.scss
*{
5
NOV 2021/SWC3113/SWC3403
myself.page.html
<style>
@import
url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&dis
play=swap');
</style>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Myself</ion-title>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
6
NOV 2021/SWC3113/SWC3403
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<p class="ion-text-center">
</p>
<ion-text>
</ion-text>
<ion-text>
<p>TelePhone: 0176829407</p>
</ion-text>
<ion-text>
</ion-text>
<ion-text>
</ion-text>
<ion-text>
</ion-text>
<ion-text>
7
NOV 2021/SWC3113/SWC3403
</ion-text>
</ion-content>
myself.page.scss
*{
8
NOV 2021/SWC3113/SWC3403
family.page.html
<style>
@import
url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&dis
play=swap');
</style>
<ion-header>
<ion-toolbar color="primary">
<ion-title>My Family</ion-title>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
9
NOV 2021/SWC3113/SWC3403
</ion-toolbar>
</ion-header>
<ion-content>
<p class="ion-text-center">
</p>
<ion-text>
</p>
</ion-text>
<ion-text>
</ion-text>
<ion-text>
</ion-text>
<ion-text>
10
NOV 2021/SWC3113/SWC3403
</ion-text>
</ion-content>
family.page.scss
*{
11
NOV 2021/SWC3113/SWC3403
Page 4 – Gallery
gallery.page.html
<style>
@import
url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&dis
play=swap');
</style>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Gallery</ion-title>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
12
NOV 2021/SWC3113/SWC3403
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<video
height="300"
width="100%"
controls="controls"
preload="metadata"
autoplay="autoplay"
webkit-playsinline="webkit-playsinline"
class="videoPlayer">
</video>
</ion-card>
<ion-grid>
<ion-row>
<ion-col size="6">
<p class="ion-text-center">
</p>
</ion-col>
<ion-col size="6">
<p class="ion-text-center">
13
NOV 2021/SWC3113/SWC3403
</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<p class="ion-text-center">
</p>
</ion-col>
<ion-col size="6">
<p class="ion-text-center">
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
gallery.page.scss
*{
14