e-portfolio skm

aran menu Jenis Data
rmainan
Paparan peta
emalar permainan

aran peta Soalan permainan
rmainan

n permainan

Maaf, jawapan anda Betul, jawapan anda Maaf, jawapan anda
tidak tepat tepat tidak tepat

g Teruskan Butang Teruskan

aran skor Paparan skor
eluruhan keseluruhan

i. Antaramuka memaparkan tiga pilihan butang permainan iaitu Pembolehubah, Pemalar
dan Jenis Data.
ii. Klik pada butang untuk memulakan permainan

iii. Klik butang bercahaya pada peta permainan untuk ke paparan soalan permainan

iv. Bagi soalan isi tempat kosong, tulis jawapan yang betul pada kotak jawapan yang
disediakan dan klik butang ‘Submit’.

vii. Bagi soalan pilihan jawapan, pilih jawapan yang sesuai dan klik butang ‘Submit’.

vii. Notifikasi ‘Sila cuba lagi’ akan dipaparkan jika jawapan yang diberikan adalah salah.

viii. Notifikasi ‘Tahniah’ akan dipaparkan jika jawapan yang diberikan adalah betul.

ix. Klik pada butang ‘Teruskan’ untuk kembali pada peta permainan.
x. Klik pada butang yang bercahaya untuk ke soalan seterusnya.
xi. Paparan skor markah keseluruhan.



TUGASAN BAGI SETIAP
AHLI KUMPULAN

LAPORAN AKHIR INDIVIDU

STUDIO MULTIMEDIA II

MOHAMMAD NADZMI BIN MOHD NOOR
CB160127

LEARNING DESIGNER

PEMBANGUNAN GAMIFIKASI THINKERCODE DALAM SUBJEK
SAINS KOMPUTER BAGI PELAJAR TINGKATAN 4
OLYSSA PRODUCTION

CARTA GANTT BAGI PEMBANGUNAN PROD

TAHUN SE
NO BULAN 12

MINGGU
1 Pembangunan aplikasi bagi tutorial (Pembolehubah)
2 Pembangunan aplikasi bagi tutorial (Pemalar)
3 Pembangunan aplikasi bagi tutorial (Jenis Data)
4 Pembangunan aplikasi bagi permainan (Pembolehubah)
5 Pembangunan aplikasi bagi permainan (Pemalar)
6 Pembangunan aplikasi bagi permainan (Jenis Data)
7 Kualiti Kawalan (Pengujian bersama klien)
8 Penambahbaikan aplikasi
9 Kualiti Kawalan (Dalaman)
10 Pembentangan akhir
11 Penyediaan laporan akhir
12 Penghantaran produk kepada klien

DUK THINKERCODE (LEARNING DESIGNER)

2019

EPT OKTOBER NOVEMBER DISEMBER

34123412341234

LAPORAN TESTING ANALYSIS (BAHAGIAN 1)
MOHAMMAD NADZMI BIN MOHD NOOR
CB160127
LEARNING DESIGNER

1. Mengumpul aset-aset pembangunan aplikasi.
 Pembangunan aplikasi ini bermula dengan pengumpulan dan penerimaan aset
pembangunan seperti grafik, kandungan, audio dan video yang direka oleh
pereka grafik, pakar media dan kawalan kualiti.

Rajah 1: Contoh aset grafik yang disediakan oleh pereka grafik.
2. Membangunkan antaramuka aplikasi dan tetapan fungsi.

 Setelah menerima aset, pembangunan dimulakan dengan membangunkan
antaramuka aplikasi dengan membuat scene dan meletakkan imej latar, teks,
butang dan menyusun atur kandungan pada setiap slaid.

Rajah 2.1 Antaramuka perisian articulate
 Scene direka berdasarkan carta alir aplikasi sistem yang telah direka semasa

fasa perancangan pembangunan produk. Terdapat 6 scenes yang direka iaitu
halaman utama, menu permainan, permainan bagi pembolehubah, pemalar dan
jenis data serta scene tutorial.

Rajah 2.2 Proses memuat naik video
 Memuatnaik video yang telah disediakan oleh pakar media ke dalam perisian

dengan resolusi 1920x1080. Tetapan diubah agar video dimainkan secara
automatik apabila aplikasi dibuka oleh pengguna.

Rajah 2.3 Membangunkan antaramuka log masuk
 Pembangunan antaramuka log masuk yang direka agar pengguna perlu

memasukkan nama sebelum log masuk sebelum ke halaman utama. Pangkalan
data disetkan agar dapat menyimpan nama yang ditulis oleh pengguna dan
dapat dipanggil pada antaramuka yang berikutnya.

Rajah 2.4: Pembangunan halaman utama
 Berikut merupakan halaman utama yang mempuyai butang pautan ke laman

tutorial dan permainan. Pangkalan data bagi nama yang diisi oleh pengguna
digunakan semula pada antaramuka ini untuk memaparkan nama mereka.
Butang keluar diletakkan di halaman ini untuk pengguna keluar dari aplikasi.

Rajah 2.5: Pembangunan halaman permainan
 Pada halaman permainan ini terdapat 3 butang pautan ke halaman permainan

iaitu pembolehubah, pemalar dan jenis data. Butang keluar dikekalkan dan
ditambah butang ke halaman menu utama di sebelah kiri halaman. Ketiga-tiga
butang yang digunakan mempunyai warna yang berlainan agar pengguna
muda mengenalpasti perbezaan antara setiap subtopik.

Rajah 2.6: Proses meletakkan trigeer wizard

 Halaman ini merupakan halaman peta permainan yang akan menunjukkan
pengguna kedudukan mereka ketika menjawab kuiz. Butang pada peta itu
diletakkan fungsi dengan menggunakan trigger wizard yang menghubungkan
ke halaman soalan kuiz.

Rajah 2.7: Mereka bentuk halaman soalan
 Halaman kuiz ini menggunakan fungsi fill in yang terdapat pada perisian

pembangunan dimana pengguna boleh menjawab soalan dengan menuliskan
jawapan pada kotak yang disediakan. Kemudian, jangkaan jawapan perlu diisi
di tab form-view agar setiap jawapan yang diisi oleh pengguna boleh
dikenalpasti sama ada betul ataupun salah.

Rajah 2.8: Penyediaan beberapa jawapan
 Pada halaman ini perlu mengisi jangkaan jawapan dan interaksi pengguna

sekiranya mereka memilih jawapan yang betul atau salah. Pada halaman ini
juga perlu mengisi jumlah mata yang akan diberikan kepada pengguna bagi
soalan pada halaman ini.

Rajah 2.9: Paparan pilhan jawapan
 Soalan ini merupakan soalan objektif yang mempunyai pilihan jawapan.

Tetapan bagi halaman ini pula ialah menggunakan fungsi pick-one yang

terdapat pada perisian. Setelah meletakkan butang pilihan, imej tersebut perlu
ditetapkan sebagai pilihan jawapan agar fungsi bagi pick-one dapat berfungsi.

Rajah 2.10: Paparan markah
 Halaman keputusan ini akan memaparkan skor markah, skor lulus dan status

lulus ataupun gagal bagi kuiz yang dijawab tersebut. Bagi fungsi paparan skor
markah ini pembangun perlu menggunakan skrip bagi mengeluarkan jumlah
markah dan kiraan skor sama ada lulus ataupun gagal.

Rajah 2.11: Halaman menu tutorial

 Halaman menu tutorial ini terdapat fungsi pautan ke video tutorial. Fungsi ini
dimasukkan menggunakan trigger wizard yang terdapat pada perisian
pembangunan.

Rajah 2.12: Meletakkan video pada halaman tutorial
 Video tutorial dimasukkan ke dalam perisian dengan memuatnaik fail dari

komputer dan disetkan kepada resolusi 1920x1080.
3. Semakan produk bersama klien

 Setelah produk selesai dibangunkan, produk akan dibawa kepada klien untuk diuji
kebolehgunaan berdasarkan borang senarai semak yang disediakan oleh Quality
Control. Produk akan ditambahbaik jika terdapat sebarang permasalahan semasa
proses pengujian.

Kesimpulan bagi setiap aktiviti yang dijalankan sepanjang pembangunan produk gamifikasi
Thinkercode adalah seperti dalam carta dibawah:

Semakan produk bersama klien Lulus
Perlu
Membangunkan antaramuka aplikasi Diperbaiki
dan tetapan fungsi. Dalam proses

Mengumpul aset-aset pembangunan 50% 100%
aplikasi.
0%

TESTING DEVELOPMENT LAPORAN TESTING ANALYSIS (BAHAGIAN 2) REMARK
MOHAMMAD NADZMI BIN MOHD NOOR
CB160127
LEARNING DESIGNER

RESULT

Mengumpul Lulus

aset-aset
1 pembangunan

aplikasi

 Pembangunan aplikasi ini bermula dengan pengumpulan dan penerimaan aset pembangunan seperti
grafik, kandungan, audio dan video yang direka oleh pereka grafik, pakar media dan kawalan kualiti.

Membangunkan Lulus
Perlu Diperbaiki
2 antaramuka aplikasi
dan tetapan fungsi

 Scene direka berdasarkan carta alir aplikasi sistem yang telah direka semasa fasa perancangan
pembangunan produk. Terdapat 6 scenes yang direka iaitu halaman utama, menu permainan,
permainan bagi pembolehubah, pemalar dan jenis data serta scene tutorial.

 Video dimuatnaik berdasarkan asset yang telah diberikan oleh pakar media dengan resolusi 1920x1080
 Tetapan diubah agar video dimainkan secara automatik apabila aplikasi dibuka oleh pengguna

 Antaramuka log masuk direka untuk pengguna memasukkan nama sebelum masuk ke halaman utama.
Antaramuka ini memerlukan pangkalan data untuk menyimpan maklumat yang diisi oleh pengguna.

 Halaman utama yang direka mempunyai butang pautan ke laman tutorial dan permainan. Pangkalan
data bagi nama yang diisi oleh pengguna digunakan semula pada antaramuka ini untuk memaparkan
nama mereka.

 Butang keluar juga diletakkan pada halaman ini untuk pengguna keluar dari aplikasi.

 Halaman ini direka dengan mempunyai tiga butang pautan utama untuk ke halaman permainan
berdasarkan tiga subtopik iaitu Pembolehubah, Pemalar dan Jenis Data.

 Butang keluar diletakkan secara konsisten disebelah kanan halaman dan mempunyai warna yang
berbeza agar mudah dikenalpasti oleh pengguna.

 Halaman peta permainan ini menunjukkan kedudukan pengguna semasa menjawab kuiz.
 Butang pada peta itu diletakkan fungsi dengan menggunakan trigger wizard yang menghubungkan ke

halaman soalan kuiz.

 Halaman kuiz ini menggunakan fungsi fill in yang terdapat pada perisian pembangunan dimana
pengguna boleh menjawab soalan dengan menuliskan jawapan pada kotak yang disediakan.,

 Jangkaan jawapan perlu diisi di tab form-view agar setiap jawapan yang diisi oleh pengguna boleh
dikenalpasti sama ada betul ataupun salah.

Halaman untuk mengisi jangkaan jawapan

 Halaman keputusan ini direka untuk memaparkan skor markah, skor lulus dan status lulus ataupun

gagal bagi kuiz yang dijawab.

 Setelah gamifikasi Thinkercode selesai dibangunkan dan disemak kebolehfungsian produk tersebut,

Semakan produk pihak Quality Control bersama dengan Product Manager akan berjumpa dengan pihak klien untuk

3 menguji kandungan serta kebolehgunaan produk. Dalam Proses
bersama klien
 Satu borang senarai semak diberikan kepada klien untuk mendapatkan maklum balas daripada pihak

klien dan akan membuat penambahbaikan jika terdapat sebarang masalah yang perlu diperbaiki.

Borang senarai semak untuk diberikan kepada klien

LAPORAN AKHIR INDIVIDU

STUDIO MULTIMEDIA II

MUHAMAD AMIRUL FAIZ BIN ZON
CB160024

GRAPHIC DESIGNER

PEMBANGUNAN GAMIFIKASI THINKERCODE DALAM SUBJEK
SAINS KOMPUTER BAGI PELAJAR TINGKATAN 4
OLYSSA PRODUCTION

CARTA GANTT BAGI PEMBANGUNAN GRAPHIC DESIGN THINKERCODE

TAHUN 2019

NO BULAN SEPT OKTOBER NOVEMBER DISEMBER
MINGGU
1234123412341234
1 Pembangunan bagi bahagian Tutorial topik Pembolehubah
Menyediakan aset grafik yang diperlukan.
- Latar belakang
- Tulisan
- Butang

2 Pembangunan bagi bahagian Tutorial topik Pemalar
Menyediakan aset grafik yang diperlukan.
- Latar belakang
- Tulisan
- Butang

3 Pembangunan bagi bahagian Tutorial Jenis Data
Menyediakan aset grafik yang diperlukan.
- Latar belakang
- Tulisan
- Butang

4 Pembangunan permainan bagi topik Pembolehubah

5 Pembangunan permainan bagi topik Pemalar

6 Pembangunan permainan bagi topik Jenis Data

7 Kualiti Kawalan (Pengujian bersama client)

8 Penambahbaikan kepada produk
9 Penambahbaikan kepada produk
10 Penambahbaikan kepada produk
11 Kualiti Kawalan (Dalaman)
12 Pembentangan akhir
13 Penyediaan laporan akhir
14 Penghantaran produk kepada client

LAPORAN TESTING ANALYSIS (BAHAGIAN 1)
MUHAMAD AMIRUL FAIZ BIN ZON
CB160024
GRAPHIC DESIGNER

1. Merekabentuk logo kumpulan Olyssa.

Perisian yang digunakan ialah Adobe Illustrator CC 2018.

 Elipse tools digunakan untuk membentuk bom dan line tools digunakan untuk melukis
sumbu. Seterusnya kesemua bentuk yang dihasilkan digabungkan membentuk bom
dengan menggunakan Shape Builder tool.

 Bentuk bintang pada belakang bom, di dalam bulatan bom dan percikan pada sumbu
dilukis menggunakan polygon tools.

 Font yang digunakan adalah berjenis Lucida Handwriting Italic . Pemilihan warna
yang digunakan bersesuaian dengan pengguna sasaran iaitu remaja sekolah menengah.

2. Merekabentuk video pengenalan bagi aplikasi permainan thinkercode.

Perisian yang digunakan ialah Adobe Premier Pro CC 2018.
 Video pengenalan ini dimulakan dengan logo Olyssa yang dianimasikan

menggunakan teknik layering dan transition dalam perisian Adobe Primier Pro 2018.

 Kemudian video ini akan mempamerkan nama aplikasi permainan ini iaitu
Thinkercode dengan transisi processing letters diiringi dengan audio modern digital
process yang dimuat turun daripada Youtube.com dan disunting dalam perisian ini.

 Akhir sekali, video ini video ini akan mempamerkan animasi welcome dengan transisi
loading letters diiringi dengan audio modern digital process yang dimuat turun
daripada Youtube.com dan disunting dalam perisian ini.

3. Merekabentuk halaman log masuk.

 Rekaan pertama halaman log masuk menggunakan Adobe Illustrator CC 2018.
Menurut Quality Control rekaan ini tidak sesuai dengan fungsi yang diinginkan dalam
aplikasi Thinkercode dan menerima arahan untuk membuat rekabentuk yang lebih
baik.

 Rekaan halaman log masuk yang baru dan telah diluluskan oleh Quality Control.
Rekaan lebih moden dengan pemilihan latar belakang dan butang yang lebih moden
dan terkini. Latar belakang dimuat turun daripada freepik.com manakala butang
dilukis menggunakan rounded rectangle tools dengan opacity yang berbeza. Font
yang digunakan ialah Cambria bold , saiz 44pt.

4. Merekabentuk menu utama

 Menu utama direka menggunnakan elemen neon untuk tampilan yang lebih moden
dan terkini sesuai dengan topik dan pengguna sasaran. Menu utama mengandungi dua
butang iaitu butang tutorial dan permainan.

 Butang direka menggunakan warna yang kontra untuk membezakan pilihan. Butang
direka bentuk dengan dua opacity yang berbeza untuk mouse hover effect.

5. Merekabentuk menu tutorial

 Setelah butang tutorial di click pengguna akan dibawa ke menu tutorial yang
memparkan 3 butang mengikut subtopik pembolehubah, pemalar dan jenis data.
Ilustrasi pada butang yang berunsur digital diammbil daripada freepik.com. butang dan
nyalaan lampu dilukis menggunakan shape tools dengan opacity , gradient dan effects
3d. Font yang digunakan ialan font jenis bebas nuaeu bold.

6. Merekabentuk menu permainan.

 Setelah butang permainan di click pengguna akan dibawa ke menu permainan yang
memparkan 3 butang mengikut subtopik pembolehubah, pemalar dan jenis data.
Ilustrasi pada butang yang berupa robot dibezakan mengikut warna bagi setiap topik.

7. Merekabentuk butang home dan exit.

 Mereka bentuk butang home dan exit menggunkan elipse tool dan shape builder tools
untuk digunakan di halaman menu utama, menu permainan, menu tutorial, dan peta
permainan dan halaman keputusan. Butang direka menggunakan opacity yang berbeza
untuk mouse hover effects.

8. Merekabentuk halaman peta permainan.

 Peta permainan direka berdasarkan 7 soalan bagi setiap topik. Peta ini mengandungi 7
checkpoint yang berbentuk kiub. Setiap soalan yang berjaya dijawap akan ditanda
pada checkpoint dengan glow effects. Peta bagi setiap topik adalah sama bagi
mengekalkan konsistensi aplikasi.

9. Merekabentuk antara muka soalan permainan

 Antara muka bagi soalan objektif bagi setiap topik memberi pilihan kepada pengguna
memilih jawapan dengan menekan butang yang disediakan. Soalan bagi setiap topik
dapat dibezakan dengan warna robot yang berbeza mengikut warna topik masing-
masing.

 Antara muka bagi soalan subjektif bagi setiap topik memberi pilihan kepada pengguna
memasukkan jawapan dengan menaip jawapan pada ruang yang disediakan berupa
kotak. Soalan bagi setiap topik dapat dibezakan dengan warna robot yang berbeza
mengikut warna topik masing-masing.

10. Mereka bentuk menu keluar

 Setelah pengguna menekan butang exit, pengguna akan dibawa ke halaman menu
keluar. Sekiranya memilih ya, pengguna akan keluar daripada aplikasi manakala
sekiranya memilih tidak pengguna akan ke menu utama.

Kesimpulan bagi setiap aktiviti yang dijalankan sepanjang pembangunan produk gamifikasi
Thinkercode adalah seperti dalam carta dibawah :

Merekabentuk halaman log masuk Lulus
Merekabentuk menu keluar Perlu
Merekabentuk soalan Diperbaiki
Dalam proses
Merekabentuk peta permainan
Merekabentuk butang home dan exit 50% 100%

Merekabentuk menu permainan
Merekabentuk menu tutorial
Merekabentuk menu utama

Merekabentuk video pengenalan
Merekabentuk logo
0%

Nama: Muhamad Amirul Faiz Bin Zon
No Matrik: CB 160024
Graphic Designer.

LAPORAN TESTING ANALYSIS (BAHAGIAN 2)

Testing Development Result Remark
Success
Merekabentuk logo kumpulan
Olyssa

Testing Mereka bentuk logo kumpulan
1 olyssa menggunakan tools dalam
perisian Adobe Illustrator cc
2018

Testing Merekabentuk video Success
2 pengenalan bagi aplikasi Success
permainan Thinkercode

Memaparkan nama permainan
dan logo.

Halaman log masuk

Testing Membangunankan halaman log
3 masuk bagi aplikasi
Thinkercode.

Halaman Utama

Halaman utama mempunyai dua
butang navigasi permainan dan
tutorial.

Testing
4

Testing Menu tutorial Success
5 Success
Menu tutorial mempunyai 3
butang navigasi mewakili setiap
topik.

Testing Menu permainan
6
Menu game mempunyai 3
butang navigasi mewakili setiap Success
topik. Success

Testing Peta permainan
7
Peta pemainan mengandungi 7
checkpoint mewakili setiap
soalan.

Antaramuka soalan Success
Success
Testing Antaramuka soalan objektif
8 mempunyai butang pilihan
jawapan.

Antaramuka soalan subjektif
mempunyai ruangan menaip
jawapan.

Menu keluar

Testing Butang ya, pengguna keluar dari
9 aplikasi.

Butang tidak, pengguna kembali
ke laman utama.

MANUAL TEKNIKAL
GRAPHIC DESIGNER
Logo Kumpulan Olyssa

Rajah: Antaramuka Adobe Illustrator CC
Logo Olyssa direka bentuk menggunakan perisian Adobe Illustrator CC

1. Buka perisian Adobe Ilustrator CC
2. Mulakan Artboard baru dengan menekan ctrl+N pada keyboard
3. Paparan New Document akan terpapar.

Rajah: New Document.
Set saiz artboard pada sebeah kiri paparan.

Set tetapan saiz pada pixels
Width: 1920px

Height: 1080px
Orientation: landcape
Artsboards: 1
Tekan butang Create.
4. Paparan Artboard akan terpapar.

Rajah: Artboard
5. Tekan Ctrl+R pada keyboard untuk memaparkan tools ruler dan letakkan guide pada

center Artboard sebagai rujukan.

Rajah: Ruler dan Guidelines.

6. Pilih latar belakang yang sesuai daripada google image dan masukkan ke Artboard.

Rajah: latar belakang.
 Gambar latar belakang yang telah dimuat turun dimasukkan ke dalam Artboarf

dengan cara Drag dan Drop ke atas Artboard.
 Ubah saiz dan kedudukan gambar mengikut Artboard menggunakan Move Tools

dengan menarik titik Anchor pada setiap penjuru objek.