contoh storyboard
Post on 10-Oct-2015
142 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
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
-
Beranda 13.00SatFeb29Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
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?
4. Window :menu Titik, :tab Konsep
: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
-
Beranda 13.00SatFeb29Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
4. Window :menu Titik, :tab Konsep
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
-
Beranda 13.00SatFeb29Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
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
-
Beranda 13.00SatFeb29Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
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
-
Beranda 13.00SatFeb29Window | Modul Titik
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
-
Beranda 13.00SatFeb29Window | Modul Titik
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
-
Beranda 13.00SatFeb29Window | Modul Titik
Konsep | Simulasi | Real | Evaluasi
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
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
5. Window :menu Garis, :tab Konsep
Daftar isi1. Menggambar Garis pada Koordinat Cartesius2. Garis Vertikal | Horizontal3. Gradien4. Hubungan 2 buah Garis
11
-
Beranda 13.00SatFeb29Window | Modul Garis
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 */
5. Window :menu Garis, :tab Konsep
*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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Garis Vertikal | Horizontal
5. Window :menu Garis, :tab Konsep
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Gradien
5. Window :menu Garis, :tab Konsep
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Hubungan 2 Buah Garis- Sejajar- Berpotongan- Bersilangan
5. Window :menu Garis, :tab Konsep
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
5. Window :menu Garis, :tab Simulasi
Daftar Simulasi1. Menggambar Garis pada Koordinat Cartesius2. Garis Vertikal | Horizontal3. Hubungan 2 buah Garis
16
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
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)
5. Window :menu Garis, :tab Simulasi
Konsep
17
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Membuat Garis VertikalMasukan Koordinatuntuk titik A1
X YBuatTitik
A
B
5. Window :menu Garis, :tab Simulasi
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Membuat 2 GarisMasukan Koordinatuntuk titik A1
X YBuatTitik
A
B
5. Window :menu Garis, :tab Simulasi
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Real | Evaluasi
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
-
Beranda 13.00SatFeb29Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
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
top related