Melanjutkan postingan sebelumnya, Bekerja dengan Variabel, pada postingan kali ini kita akan belajar membuat sebuah input-an sederhana yang menanyakan nama user dan menampilkannya kembali pada slide berikutnya.

Ada beberapa tahapan yang harus dilakukan untuk menggunakan variabel dalam media pembelajaran, yaitu:

  1. Membuat form input berupa Textbox
  2. Membuat dan mengatur variabel
  3. Menampilkan isi variabel

Membuat Form Input Textbox

Form input berfungsi untuk menerima masukan dari user. Untuk membuat form input Textbox, Anda dapat mengikuti langkah berikut:

1. Aktifkan slide dan buatlah tampilan yang akan menampilkan form masukan nama user.

2. Pilih tab Insert > Input > Data Entry  > Text Entry Field, untuk menambahkan form masukan.

Pilihan Input > Textbox

Selanjutnya gambarlah kotak textbox sehingga seperti pada gambar berikut:

Tampilan kotak textbox pada slide

Pada teks “Tipe your text here” gantilah dengan teks “Nama Anda”. Maka sebuah variabel baru telah dibuat dengan nama “TextEntry”, seperti yang terlihat pada panel Trigger berikut:

Variabel baru TextEntry

3. Ubahlah nama variabel “TextEntry” menjadi username untuk memudahkan Anda dalam menggunakan variabel ini nantinya, dengan cara:

  • Klik ikon X pada bagian kanan panel Trigger, maka akan muncul kotak dialog Variables.
  • Pada kotak dialog tersebut, double click pada nama variable “TextEntry” dan ubahlah nama variabel menjadi “username” seperti yang terlihat pada gambar berikut:

Kotak dialog Variable

  • Pada kolom Value biarkan kosong dan klik OK.

4. Selanjutnya, tambahkan tombol “Lanjut” di bagian bawah kotak textbox, untuk menyimpan data nama yang telah dimasukkan, seperti terlihat pada gambar berikut:

Tampilan input username

5. Pada tombol “Lanjut” tersebut, berilah trigger dengan Action berikut:

  • Action: Jump to slide
  • Slide: next slide
  • When: User click
  • Object: Lanjut (Button)

Pengaturan trigger untuk tombol “Lanjut”

  • Pilih Show Condition dan klik ikon + pada bagian kanan bawah kotak dialog di atas.

Pilihan Add a new “AND” or “OR” condition

Maka akan ditampilkan kotak dialog Add Trigger Condition seperti pada gambar berikut:

Pengaturan tambahan kondisi untuk tombol “Lanjut”

Selanjutnya lakukan pengaturan pada kolom:

  • List, beri pilihan pada Variables
  • If, beri pilihan pada nama variabel yang akan digunakan [username]
  • Operator, beri pilihan pada != Not equal to
  • Type, beri pilihan pada Value
  • Value, dikosongkan (jika diinginkan user dapat mengisikan dengan teks apapun)

Sehingga apabila trigger di atas diucapkan, maka akan berbunyi:

“Tampilkan slide selanjutnya ketika user mengeklik tombol Lanjut dan isi variabel username telah terisi dengan nama user (tidak kosong)”

Menampilkan Isi Variabel 

Variabel yang telah diisi dengan data dapat ditampilkan kembali dalam slide/scene dengan menambahkan Reference pada slide/scene di mana isi variabel akan ditampilkan. Berikut langkah untuk menampilkan kembali isi variabel:

  1. Aktifkan slide dimana isi variabel akan ditampilkan.
  2. Klik Insert > Text Box, untuk menambahkan textbox, dimana data variabel akan ditampilkan
  3. Masih pada textbox tersebut, klik Insert > Reference untuk mengambil isi variabel dan pilih nama variabelnya, misalnya username.

Kotak dialog References

4. Klik OK untuk menyisipkan isi variabel pada slide. Ulangi langkah no.2 untuk memilih variabel yang lain yang akan ditampilkan. Maka akan tampil nama variabel dengan format sebagai berikut:

Tampilan nama variabel pada slide

Selanjutnya Anda dapat mengatur tampilan isi variabel tersebut sesuai dengan tampilan yang diinginkan.

Download project TextVariabel.story

Selamat mencoba, semoga bermanfaat yaa.. 😉

Referensi:
https://articulate.com/support/article/introduction-to-variables-sl2
https://community.articulate.com/series/5/articles/working-with-variables
https://community.articulate.com/series/articulate-storyline-1/articles/adding-text-variables