Contoh Storyboard

1. Start-up

Masukan nama anda

:Input Nama/* aksi: menyimpan nama penggunake dalam variabel yang telah disediakan */

Start-up Stage

:Button Go!/* aksi: masuk ke menu utama,jika nama = NULL maka aksi dialihkanke exception */

:Logo Produk{Mathematic Simulation}/* Logo applikasi ini */

Program Studi Pendidikan Ilmu KomputerUniversitas Pendidikan Indonesia

1

Beranda 13.00SatFeb29

2. Desktop (default)

:Button Start/* aksi: membuka list menu yang tersedia */

:Graphic Taskbar/* indikator menu(modul) yang dipilih */

:Movie Clip TimeBar/* menampilkanhari, tanggal, bulan, jam dinamis sesuai dengan hari yang dijalani */

:Graphic Desktop Background/* menampilkan latar dari desktop,aksi: background dapat berubahdengan menekan keyboard */

Modul Titik Modul Garis Modul Bidang

:Button Modul Garis, :Enabled = False/* aksi: membuka jendela modul garis */

:Button Modul Bidang, :Enabled = False/* aksi: membuka jendela modul bidang */

:Button Modul Titik/* aksi: membuka jendela modul titik */

*Catatan:Jika Modul Titik sudah berhasil dilewati beserta Evaluasinya makaTombol untuk Menu Garis akan terbuka, begitu juga seterusnya.

Bantuan | Tentang | Pengembang

:Button Shut Down/* aksi: menutup aplikasi */

2

Beranda 13.00SatFeb29Window | Modul Titik

Konsep | Simulasi | Game | Dunia Nyata | Evaluasi

4. Window :menu Titik, :tab Konsep

Daftar isi1. Mengenal Koordinat Cartesius2. Menggambar titik pada Koordinat Cartesius

:Button/* aksi: membuka halamankonten sesuai materi yang dipilih */

:Button, :Enable = false/* aksi: membuka halamankonten sesuai materi yang dipilih */

Daftar isi mengenai konsep dari modul Titik

:Button Beranda/* aksi: kembali kehalaman desktop (menu) */

3



Mengenal Koordinat CartesiusGambar di bawah ini menunjukkan bidang koordinat Cartesius yang memiliki sumbu mendatar (disebutsumbu-x) dan sumbu tegak (disebut sumbu-y). Titik potong kedua sumbutersebut dinamakan titik asal atau titik pusat koordinat. Pada Gambar tersebut,titik pusat koordinat Cartesius ditunjukkan oleh titik O (0, 0). Sekarang,bagaimana menggambar titik atau garis pada bidang koordinat Cartesius?


:Button Menu Bar/* Terdiri dari menu yang tersedia dalamjendela Modul yang sedang dibukaaksi: membuka menu dari modul yang sedangaktif*/

:Graphic Taskbar Status/* Menampilkan status jendalayang sedang dibuka */

:Button Close/* aksi: menutup jendelayang sedang aktif, kembalike Desktop(default) */

:Content Konsep Titik/* berisi semua konten mengenai penjelasan titiksecara konseptual,disajikan secara dinamis, desertai animasi dan gambaryang dibutuhkan */

Daftar isi

Simulasi

:Button Simulasi/* aksi: membukahalaman simulasi dari materi ini */

:Button Daftar isi/* aksi: kembali kehalaman daftar isi */

4




Daftar isi

Menggambar Titik pada Koordinat CartesiusSetiap titik pada bidang koordinat Cartesius dinyatakan dengan pasangan berurutan x dan y, di mana x merupakan koordinat sumbu-x (disebut absis) dan y merupakan koordinat sumbu-y (disebut ordinat). Jadi, titik pada bidang koordinat Cartesius dapat dituliskan (x, y).Pada Gambar 3.2 , terlihat ada 6 buah titik koordinat pada bidang koordinat Cartesius. Dengan menggunakan aturan penulisan titik koordinat, keenam titik tersebut dapat dituliskan dalam bentuk sebagai berikut.

Game

Materi disampaikan secara interaktifdan tidak menjenuhkan.

:Button Game/* aksi: membuka halamangame dari materi ini */

5



Membuat titik secara Random

Titik Buat Titik

Sembunyikan Cartesius

Titik A(4,-5)

4. Window :menu Titik, :tab Simulasi

:Button Konsep/* aksi: kembali ke konsep darisimulasi yang sedang dimainkan */

:Button Generate/* aksi: membuat titik sesuai denganjumlah yang telah diinputkan secaraacak (koordinatnya) */

:Input Jumlah Titik/* aksi: menyimpan jumlah titik yangakan dibuat ke dalam variabel yangtelah tersedia */

:Graphic Diagram Cartesius/* menampilkan diagram cartesius */

:Graphic Titik/* Titik yang telah dibuat secara acaka */

Titik A(4,-5)

Titik A(4,-5)

Titik A(4,-5)

Titik A(4,-5)

Titik A(4,-5)

Titik A(4,-5)

Titik A(4,-5)

Konsep

6



Masukan Koordinat

,X Y

TangkapSerangga

:Input X/* aksi: menyimpan nilai absis ke dalamvariabel yang telah disediakan */

:Input Y/* aksi: menyimpan nilai ordinat ke dalamvariabel yang telah disediakan */

:Button Masukan Titik/* aksi: Mencocokan koordinatyang diinputkan dengan koordinatserangga yang tersedia pada cartesian(Tersembunyi, hanya diperlihatkan beberapa detik */

4. Window :menu Titik, :tab Game

Sembunyikan Cartesius

Kesempatan :

Nilai :Baca Petunjuk

*Catatan:Game ini akan mencocokan koordinat yang kita inputkan dengan koordinat serangga yang tersimpandi stage(random) dberi 5 kesempatan untuk menangkap 3 serangga.Penghitungan Score berlaku.

Sisa Serangga

Konsep

:Text Sisa Serangga/* Menampilkan sisia serangga yang belum tertangkap */

7


Konsep | Simulasi | Dunia Nyata | Evaluasi

Aplikasi Titik di dunia nyata

Perhatikan Peta di bawah ini!

Setiap kota di gambarkan sebagai titik-titikyang terhubung satu sama lain.Setiap titik memiliki koordinat berupa garis geogras.Itu adalah salah satu aplikasi titik di dunianyata. dan banyak lagi....

:Content Real Titik/* menampilkan sebuah penjelasan yang dinamistentang aplikasi titik di dunia nyata.Penjelasan disertai animasi dan gambar yangsesuai dengan kebutuhan */

4. Window :menu Titik, :tab Real

8


Konsep | Simulasi | Real | Evaluasi

4. Window :menu Titik, :tab Evaluasi

1. Apa yang anda ketahui tentang sebuah titik?A. Berwarna hitamB. Memiliki volumeC. Bisa membentuk garisD. Kecil

Lanjut>>

:Content Evaluasi Titik/* berisi pertanyaan-pertanyaan tentangyang telah dipelajari sebelumnya,kemungkinan akan menggunakan XMLuntuk soal-solanya */

:Button Jawaban/* aksi: menyimpan jawaban yang telahdipilih untuk nanti dicocokan dengankunci jawaban yang tersedia */

:Button Next>>/* aksi: lanjut ke halaman berikutnya */

Titik bisa digambardalam berbagai warna

Titik TIDAK memilikivolume atau luas

Garis dapat dibuatdari beberapa titik yang sejajar

Titik TIDAK memilikiukuran

Skor

9



Hasil Evaluasi

Nama

Skor

Modul

Level

GILANG ABDUL AZIZ

89

TITIK

PEMULA

Coba Lagi

4. Window :menu Titik, :tab Evaluasi Hasil

:Text Nama/* aksi: diambil dari variabel nama yang telah diisi sebelumnya */

:Text Skor/* aksi: diambil dari hasilpencocokan jawaban kemudian dilakukan perhitungan */

:Text Modul/* aksi: menampilkan Modulyang sedang dipilih */

:Text Level/* aksi: menampilkan level yang dipilih,catatan: level menentukan tingkatkerumitan soal evaluasi */

:Button Ulangi Evaluasi/* aksi: mengulang kembali evaluasi dariawal,soal di acak kembali */

10

Beranda 13.00SatFeb29Window | Modul Garis


5. Window :menu Garis, :tab Konsep

Daftar isi1. Menggambar Garis pada Koordinat Cartesius2. Garis Vertikal | Horizontal3. Gradien4. Hubungan 2 buah Garis

11


Konsep | Simulasi | Dunia Nyata| Evaluasi

Menggambar Garis pada Koordinat CartesiusKamu telah memahami bagaimana menggambar titik pada bidang koordinatCartesius. Sekarang bagaimana menggambar garis lurus pada bidang yangsama? Coba perhatikan Gambar 3.3

Titik muncul perlahan dan berurutanGaris yang menunjukan koordinat jugamuncul perlahan.

Garis muncul cepatdiikuti eect glow.

Isi materi sesuai denganbuku sumber.*sumber terlampir.

:Button Lanjut | Sebelum/* aksi: lanjut ke halaman isi materiberikutnya, sesuai dengan sumber */


*Catatan:Urutan dan isi materi akan disesuaikan dengan yang ada di owchart.Adapun yang ditampilkan diatas adalah prototipe interface-nya saja.

Daftar isi

Simulasi

12



Garis Vertikal | Horizontal


Titik dan garis muncul secara berurutandengan animasi yang smooth

Titik dan garis muncul secara berurutandengan animasi yang smooth

*Catatan:Setiap langkah/pergerakan akan dideskripsikanberupa munculnya kotak dialog deskripsi

Daftar isi

Simulasi

13



Gradien


Dari Gambar tersebut terlihat suatu garis lurus pada bidang koordinat Cartesius. Garis tersebut melalui titik A(6, 3), B(4, 2), C(2, 1), D(2, 1), E(4, 2), dan F(6, 3). Perbandingan antara ordinat (y) dan absis (x) untukmasing-masing titik tersebut adalah sebagai berikut.

Perhatikan perbandingan ordinat dengan absis untuk setiap titik tersebut. Semua titik memiliki nilai perbandingan yang sama, yaitu 1/2Nilai tetap atau konstanta dari perbandingan ordinat dan absis ini disebut sebagai gradien. Biasanya gradien dilambangkan dengan m. Apa sebenarnya yang dimaksud dengan gradien?

Daftar isi

14



Hubungan 2 Buah Garis- Sejajar- Berpotongan- Bersilangan


2 buah garis akan sejajarapabila kedua garis tersebutmemiliki gradien yang sama

2 garis akan berpotongan apabila garis tersebutmemiliki gradien berbeda

Hasil kali antara dua gradien dari garis yang saling tegak lurus adalah 1.

Garis mucul dengan animasi yang smooth

Kemudian muncul kotak dialogyang mendisekripsikan sifat-sifatgaris yang ada di sampingnya..

Daftar isi

Simulasi

15



5. Window :menu Garis, :tab Simulasi

Daftar Simulasi1. Menggambar Garis pada Koordinat Cartesius2. Garis Vertikal | Horizontal3. Hubungan 2 buah Garis

16



Membuat GarisMasukan Koordinatuntuk titik B

X YBuatTitik

A

B

:Input X/* aksi: menyimpan nilai inputan kedalam variabel yang telah tersedia */

:Input Y/* aksi: menyimpan nilai inputan kedalam variabel yang telah tersedia */

:Button Buat Titik/* aksi: mebuat titik pada cartesiandengan koordinat sesuai inputan sekaligus menghubungkan keduatitik tersebut menjadi garis */

Titik awal (A) otomatis dibuatsecara random

Garis muncul melesat setelah titik B dibuat.

Titik B dibuat sesuai inputan

*Catatan:Simulasi ini mebuat garis dari 2 titik dengan 1 titik yang kita inputkan.Kemungkinan simulasi tidak 1, disesuaikan dengan owchart(Hubungan 2 buah garis, Vertikal-Horizontal, akan dibuat juga)


Konsep

17



Membuat Garis VertikalMasukan Koordinatuntuk titik A1

X YBuatTitik

A

B


Membut garis horizontalMasukan Koordinatuntuk titik B1

X YBuatTitik

A1

B1

Titik A1Koordinat sesuaidengan inputan

Titik diberikan secara default (random)

Titik B1Koordinat sesuaidengan inputan

Konsep

18



Membuat 2 GarisMasukan Koordinatuntuk titik A1

X YBuatTitik

A

B


Titik B1

X YBuatTitik

A1

B1

Titik diberikan secara default (random)

Titik A1Koordinat sesuai dengan inputan

Titik B1Koordinat sesuai dengan inputan

*Catatan:untuk memperkecil kompleksitas dalam simulasi inisaat user mau melakukan inputan titik A1 dan B1 akanada hint berupa titik-titik grayscale yang mungkin dibuat

Konsep

19



5. Window :menu Garis, :tab Dunia Nyata

Aplikasi penggunaan garis pada dunia nyata

300cm

Garis muncul diiringi efek glow untukmenegaskan

*Catatan:akan muncul dialog box di tiap pergerakan untuk mendeskripsikan

20



4. Window :menu Garis, :tab Evaluasi

1. Garis dapat dibentuk dari?A. Dua buah titikB. Tiga buah titikC. Dua buah titik sejajarD. Titik

Lanjut>>

:Content Evaluasi Garis/* berisi pertanyaan-pertanyaan tentangyang telah dipelajari sebelumnya,kemungkinan akan menggunakan XMLuntuk soal-solanya */

:Button Jawaban/* aksi: menyimpan jawaban yang telahdipilih untuk nanti dicocokan dengankunci jawaban yang tersedia */

:Button Next>>/* aksi: lanjut ke halaman berikutnya */

Dua buah titik belumtentu menjadi garis

Tiga buah titik belumtentu menjadi garis

Garis dapat dibuatdari beberapa titik yang sejajar

Garis dapat dibuatdari beberapa titik

Skor

21



Hasil Evaluasi

Nama

Skor

Modul

Level

GILANG ABDUL AZIZ

66

GARIS

BEGINNER

Coba Lagi

5. Window :menu Garis, :tab Evaluasi Hasil

:Text Nama/* aksi: diambil dari variabel nama yang telah diisi sebelumnya */

:Text Skor/* aksi: diambil dari hasilpencocokan jawaban kemudian dilakukan perhitungan */

:Text Modul/* aksi: menampilkan Modulyang sedang dipilih */

:Text Level/* aksi: menampilkan level yang dipilih,catatan: level menentukan tingkatkerumitan soal evaluasi */

:Button Ulangi Evaluasi/* aksi: mengulang kembali evaluasi dariawal,soal di acak kembali */

22

Documents

Contoh Storyboard