1.

Start-up
Masukan nama anda
:Input Nama
/* aksi: menyimpan nama pengguna
ke dalam variabel yang telah disediakan */
Start-up Stage
:Button Go!
/* aksi: masuk ke menu utama,
jika nama = NULL maka aksi dialihkan
ke exception */
:Logo Produk{Mathematic Simulation}
/* Logo applikasi ini */
Program Studi Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia
1
Beranda 13.00
Sat
Feb
29
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 berubah
dengan 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 maka
Tombol untuk Menu Garis akan terbuka, begitu juga seterusnya.
Bantuan | Tentang | Pengembang
:Button Shut Down
/* aksi: menutup aplikasi */
2
Beranda 13.00
Sat
Feb
29
Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
4. Window :menu Titik, :tab Konsep
Daftar isi
1. Mengenal Koordinat Cartesius
2. Menggambar titik pada Koordinat Cartesius
:Button
/* aksi: membuka halaman
konten sesuai materi yang dipilih */
:Button, :Enable = false
/* aksi: membuka halaman
konten sesuai materi yang dipilih */
Daftar isi mengenai konsep dari modul Titik
:Button Beranda
/* aksi: kembali ke
halaman desktop (menu) */
3
Beranda 13.00
Sat
Feb
29
Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
Mengenal Koordinat Cartesius
Gambar di bawah ini menunjukkan bidang koordinat Cartesius yang memiliki sumbu
mendatar (disebutsumbu-x) dan sumbu tegak (disebut sumbu-y). Titik potong kedua sumbu
tersebut 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 dalam
jendela Modul yang sedang dibuka
aksi: membuka menu dari modul yang sedang
aktif*/
:Graphic Taskbar Status
/* Menampilkan status jendala
yang sedang dibuka */
:Button Close
/* aksi: menutup jendela
yang sedang aktif, kembali
ke Desktop(default) */
:Content Konsep Titik
/* berisi semua konten mengenai penjelasan titik
secara konseptual,
disajikan secara dinamis, desertai animasi dan gambar
yang dibutuhkan */
<<Sebelum | Lanjut>>
Daftar isi
Simulasi
:Button Simulasi
/* aksi: membuka
halaman simulasi
dari materi ini */
:Button Daftar isi
/* aksi: kembali ke
halaman daftar isi */
4
Beranda 13.00
Sat
Feb
29
Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
4. Window :menu Titik, :tab Konsep
<<Sebelum | Lanjut>>
Daftar isi
Menggambar Titik pada Koordinat Cartesius
Setiap 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 interaktif
dan tidak menjenuhkan.
:Button Game
/* aksi: membuka halaman
game dari materi ini */
5
Beranda 13.00
Sat
Feb
29
Window | 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 dari
simulasi yang sedang dimainkan */
:Button Generate
/* aksi: membuat titik sesuai dengan
jumlah yang telah diinputkan secara
acak (koordinatnya) */
:Input Jumlah Titik
/* aksi: menyimpan jumlah titik yang
akan dibuat ke dalam variabel yang
telah 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.00
Sat
Feb
29
Window | Modul Titik
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
Masukan Koordinat
,
X Y
Tangkap
Serangga
:Input X
/* aksi: menyimpan nilai absis ke dalam
variabel yang telah disediakan */
:Input Y
/* aksi: menyimpan nilai ordinat ke dalam
variabel yang telah disediakan */
:Button Masukan Titik
/* aksi: Mencocokan koordinat
yang diinputkan dengan koordinat
serangga 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 tersimpan
di 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.00
Sat
Feb
29
Window | Modul Titik
Konsep | Simulasi | Dunia Nyata | Evaluasi
Aplikasi Titik di dunia nyata
Perhatikan Peta di bawah ini!
Setiap kota di gambarkan sebagai titik-titik
yang terhubung satu sama lain.
Setiap titik memiliki koordinat berupa garis
geografs.
Itu adalah salah satu aplikasi titik di dunia
nyata. dan banyak lagi....
:Content Real Titik
/* menampilkan sebuah penjelasan yang dinamis
tentang aplikasi titik di dunia nyata.
Penjelasan disertai animasi dan gambar yang
sesuai dengan kebutuhan */
4. Window :menu Titik, :tab Real
<<Sebelum | Lanjut>>
8
Beranda 13.00
Sat
Feb
29
Window | Modul Titik
Konsep | Simulasi | Real | Evaluasi
4. Window :menu Titik, :tab Evaluasi
1. Apa yang anda ketahui tentang sebuah titik?
A. Berwarna hitam
B. Memiliki volume
C. Bisa membentuk garis
D. Kecil
Lanjut>>
:Content Evaluasi Titik
/* berisi pertanyaan-pertanyaan tentang
yang telah dipelajari sebelumnya,
kemungkinan akan menggunakan XML
untuk soal-solanya */
:Button Jawaban
/* aksi: menyimpan jawaban yang telah
dipilih untuk nanti dicocokan dengan
kunci jawaban yang tersedia */
:Button Next>>
/* aksi: lanjut ke halaman berikutnya */
Titik bisa digambar
dalam berbagai warna
Titik TIDAK memiliki
volume atau luas
Garis dapat dibuat
dari beberapa titik yang
sejajar
Titik TIDAK memiliki
ukuran
Skor
9
Beranda 13.00
Sat
Feb
29
Window | 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 hasil
pencocokan jawaban
kemudian dilakukan
perhitungan */
:Text Modul
/* aksi: menampilkan Modul
yang sedang dipilih */
:Text Level
/* aksi: menampilkan level yang dipilih,
catatan: level menentukan tingkat
kerumitan soal evaluasi */
:Button Ulangi Evaluasi
/* aksi: mengulang kembali evaluasi dari
awal,
soal di acak kembali */
10
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
5. Window :menu Garis, :tab Konsep
Daftar isi
1. Menggambar Garis pada Koordinat Cartesius
2. Garis Vertikal | Horizontal
3. Gradien
4. Hubungan 2 buah Garis
11
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Menggambar Garis pada Koordinat Cartesius
Kamu telah memahami bagaimana menggambar titik pada bidang koordinat
Cartesius. Sekarang bagaimana menggambar garis lurus pada bidang yang
sama? Coba perhatikan Gambar 3.3
Titik muncul perlahan dan berurutan
Garis yang menunjukan koordinat juga
muncul perlahan.
Garis muncul cepat
diikuti efect glow.
Isi materi sesuai dengan
buku sumber.
*sumber terlampir.
:Button Lanjut | Sebelum
/* aksi: lanjut ke halaman isi materi
berikutnya, sesuai dengan sumber */
5. Window :menu Garis, :tab Konsep
*Catatan:
Urutan dan isi materi akan disesuaikan dengan yang ada di fowchart.
Adapun yang ditampilkan diatas adalah prototipe interface-nya saja.
<<Sebelum | Lanjut>>
Daftar isi
Simulasi
12
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Garis Vertikal | Horizontal
5. Window :menu Garis, :tab Konsep
Titik dan garis muncul secara berurutan
dengan animasi yang smooth
Titik dan garis muncul secara berurutan
dengan animasi yang smooth
*Catatan:
Setiap langkah/pergerakan akan dideskripsikan
berupa munculnya kotak dialog deskripsi
<<Sebelum | Lanjut>>
Daftar isi
Simulasi
13
Beranda 13.00
Sat
Feb
29
Window | 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?
<<Sebelum | Lanjut>>
Daftar isi
14
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Hubungan 2 Buah Garis
- Sejajar
- Berpotongan
- Bersilangan
5. Window :menu Garis, :tab Konsep
2 buah garis akan sejajar
apabila kedua garis tersebut
memiliki gradien yang sama
2 garis akan berpotongan
apabila garis tersebut
memiliki gradien berbeda
Hasil kali antara dua gradien
dari garis yang saling tegak
lurus adalah 1.
Garis mucul dengan animasi yang smooth
Kemudian muncul kotak dialog
yang mendisekripsikan sifat-sifat
garis yang ada di sampingnya..
<<Sebelum | Lanjut>>
Daftar isi
Simulasi
15
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Game | Dunia Nyata | Evaluasi
5. Window :menu Garis, :tab Simulasi
Daftar Simulasi
1. Menggambar Garis pada Koordinat Cartesius
2. Garis Vertikal | Horizontal
3. Hubungan 2 buah Garis
16
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Membuat Garis
Masukan Koordinat
untuk titik B
X Y
Buat
Titik
A
B
:Input X
/* aksi: menyimpan nilai inputan ke
dalam variabel yang telah tersedia */
:Input Y
/* aksi: menyimpan nilai inputan ke
dalam variabel yang telah tersedia */
:Button Buat Titik
/* aksi: mebuat titik pada cartesian
dengan koordinat sesuai inputan
sekaligus menghubungkan kedua
titik tersebut menjadi garis */
Titik awal (A) otomatis dibuat
secara 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 fowchart
(Hubungan 2 buah garis, Vertikal-Horizontal, akan dibuat juga)
5. Window :menu Garis, :tab Simulasi
Konsep
17
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Membuat Garis Vertikal
Masukan Koordinat
untuk titik A1
X Y
Buat
Titik
A
B
5. Window :menu Garis, :tab Simulasi
Membut garis horizontal
Masukan Koordinat
untuk titik B1
X Y
Buat
Titik
A1
B1
Titik A1
Koordinat sesuai
dengan inputan
Titik diberikan secara default (random)
Titik B1
Koordinat sesuai
dengan inputan
Konsep
18
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
Membuat 2 Garis
Masukan Koordinat
untuk titik A1
X Y
Buat
Titik
A
B
5. Window :menu Garis, :tab Simulasi
Titik B1
X Y
Buat
Titik
A1
B1
Titik diberikan secara default (random)
Titik A1
Koordinat sesuai dengan inputan
Titik B1
Koordinat sesuai dengan inputan
*Catatan:
untuk memperkecil kompleksitas dalam simulasi ini
saat user mau melakukan inputan titik A1 dan B1 akan
ada hint berupa titik-titik grayscale yang mungkin dibuat
Konsep
19
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Dunia Nyata| Evaluasi
5. Window :menu Garis, :tab Dunia Nyata
Aplikasi penggunaan garis pada dunia nyata
3
0
0
c
m
Garis muncul diiringi efek glow untuk
menegaskan
*Catatan:
akan muncul dialog box di tiap pergerakan untuk mendeskripsikan
20
Beranda 13.00
Sat
Feb
29
Window | Modul Garis
Konsep | Simulasi | Real | Evaluasi
4. Window :menu Garis, :tab Evaluasi
1. Garis dapat dibentuk dari?
A. Dua buah titik
B. Tiga buah titik
C. Dua buah titik sejajar
D. Titik
Lanjut>>
:Content Evaluasi Garis
/* berisi pertanyaan-pertanyaan tentang
yang telah dipelajari sebelumnya,
kemungkinan akan menggunakan XML
untuk soal-solanya */
:Button Jawaban
/* aksi: menyimpan jawaban yang telah
dipilih untuk nanti dicocokan dengan
kunci jawaban yang tersedia */
:Button Next>>
/* aksi: lanjut ke halaman berikutnya */
Dua buah titik belum
tentu menjadi garis
Tiga buah titik belum
tentu menjadi garis
Garis dapat dibuat
dari beberapa titik yang
sejajar
Garis dapat dibuat
dari beberapa titik
Skor
21
Beranda 13.00
Sat
Feb
29
Window | 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 hasil
pencocokan jawaban
kemudian dilakukan
perhitungan */
:Text Modul
/* aksi: menampilkan Modul
yang sedang dipilih */
:Text Level
/* aksi: menampilkan level yang dipilih,
catatan: level menentukan tingkat
kerumitan soal evaluasi */
:Button Ulangi Evaluasi
/* aksi: mengulang kembali evaluasi dari
awal,
soal di acak kembali */
22