TUTORIAL LECTORA: MEMBUAT MPI YANG CERDAS DENGAN EXTERNAL HTML OBJECT

A. Pendahuluan MPI selain harus memiliki materi yang baik dan menarik secara grafis, juga haruslah interaktif. Untuk menambah interaktifitas guru dapat menambahkan sesuatu dalam MPI. Sesuatu tersebut salah satunya adalah External HTML Object (HTML Extension). Kali ini penulis membuat Tutorial MPI menggunakan Lectora dengan beberapa prasayarat dalam pembuatannya: 1. Software e-learning Lectora vX.6 atau lebih baik Lectora V11. Untuk versi V11 dapat di download di sini 2. Semua materi tutorial dapat di download di sini (tapi saya menyarankan download sesuai alur tutorial ini satu per satu) 3. Hasil publish tidak dapat berupa .exe (karena HTML Extension tidak dapat dipublish oleh Lectora). Jika menginginkan dalam berbentuk .exe harus menggunakan software tambahan. B. Tutorial I : MPI cerdas dengan mesin pencari kata MPI dengan materi yang banyak tentu akan menyulitkan siswa untuk mencari materi yang diinginkan. Pada kali ini penulis ingin menerapkan search engine tersebut ke dalam sebuah MPI, hal ini akan berdampak signifikan terutama untuk untuk MPI yang mirip-mirip dengan ensiklopedia yang syarat dengan deskripsi. Penulis telah menyiapkan sebuah 2 file pendukung yang harus di download yaitu 1 file .pkg (master file Lectora) dan 1 file .awo (file external HTML object). File tutorial I silahkan di download di sini Langkah-langkah membuat MPI cerdas dengan mesin pencari kata dengan Lectora vX.6 : 1. Import file Persebaran fauna endemik.pkg melalui File>Import>Lectora Online Package dan arahkan ke file Persebaran fauna endemik.pkg

2. Drag-drop file Pencarian HTML.awo ke Parent Direktori Title Explorer Artikel Lomba Menulis Blog Formulasi: Tutorial Lectora: Membuat MPI Cerdas Dengan External HTML Object Hal | 1

3. Memilih Page atau Chapter yang akan dimasukkan ke dalam kriteria yang dapat di cari melalui Page atau Chapter Properties. Jika anda check pada Include in Table of Contents berarti anda memilih menyertakan halaman tersebut dalam pencarian mesin pencari tersebut.

Tips: Jangan menyertakan halaman evaluasi dalam pencarian (Table of Contents)!!! 4. Klik pilih pada Menu Bar Tools>Error Check untuk mengecek error yang mungkin terjadi. 5. Jika terdapat error berwarna merah/biru silahkan ditelusur dengan cara double klik peringatan yang muncul dan otomatis akan menuju ke lokasi error tersebut. Keterangan: error merah berarti kesalahan fatal dan berakibat rusaknya MPI saat di publish, error biru masih bisa lanjut. 6. Jika ingin men-preview hanya akan tampil di browser, jika preview biasa hanya tampil tulisan script saja. 7. Jika error tidak lg ditemukan (minimal error biru) maka langkah selanjutnya kita klik pilih di Menu Bar>Publish> a. Publish to HTML untuk MPI berbasis HTML, untuk menjalankan hasilnya dengan double klik index.html b. Publish to SCORM untuk MPI berbasis LMS, seperti Moodle, dll 8. Hasil penampakannya:

Artikel Lomba Menulis Blog Formulasi: Tutorial Lectora: Membuat MPI Cerdas Dengan External HTML Object

Hal | 2

9. Selamat berkreasi dengan menerapkan External Object ini dengan MPI anda sendiri. C. Tutorial II : MPI cerdas dengan membangun sendiri External Object Pada Tutorial I guru hanya tinggal Drag-Drop file .awo sebagai external objectnya, sedangkan pada Tutorial II ini guru dapat membuat file .awo nya sendiri sesuai dengan kebutuhan. Yang anda perlukan tidaklah harus anda sebagai ahli script, karena begitu banyak script yang dapat diperoleh melaui internet secara gratis. Salah satunya di sini , saya menggunakan salah satu file script Tutorial II ini di alamat tersebut. Berikut langkah-langkah membuat MPI cerdas dengan membangun sendiri External Object: 1. Download file-file Tutorial II di sini dan extract file extern-kalkulator.rar di folder kerja anda 2. Import file sample.pkg sama cara nya pada Tutorial I 3. Pilih halaman soal dan kemudian sorot pilih pada menu bar Add>Object>External HTML atau melalui icon 4. Pada jendela External HTML Object Properties isikan parameter berikut: a. pada Tab General isikan/pilih: 1. Object Name : kalkulator 2. Object Type : other 3. Centang pada Use External Text File 4. Text file > import file Calculator.txt dari hasil extract extern-kalkulator.rar 5. Hilangkan tanda centang di Initially Visible Artikel Lomba Menulis Blog Formulasi: Tutorial Lectora: Membuat MPI Cerdas Dengan External HTML Object Hal | 3

b. Kemudian klik pilih Tab Additional files kemudian klik Add File dan pilih 2 file calculator.css serta calculator.js

c. Klik OK 5. Membuat tombol pemicu munculnya kalkulator: a. Menggunakan icon Add Button b. Pada Button Properties : 1. Beri nama button dengan Kalkulator 2. Import dan pilih file di folder hasil extract

3. Tambahkan Action pada tombol Kalkulator yang kita buat: 1. On: Mouse Click 2. Action: Toggle Visibility State 3. Target: External HTML Object 4. OK Artikel Lomba Menulis Blog Formulasi: Tutorial Lectora: Membuat MPI Cerdas Dengan External HTML Object Hal | 4

6. Melakukan hal yang sama pada no 5 s/d 8 sesuai Tutorial I 7. Menyimpan External Object kita sebagai Library Object (file .awo) untuk dipergunakan di kemudian hari. Blok Exerternal Object dan Tomnol kemudian klik kanan Save as Library Object dan simpan. 8. Hasil penampakannya:

9. Selamat berkreasi dengan menerapkan External Object ini dengan MPI anda sendiri. D. Penutup Selamat Berkarya. URL File :

Bahan pendukung Tutorial MPI Lectora di sini Software : Lectora versi vX.6

PESERTA PERIODE II : TUTORIAL LECTORA: MEMBUAT MPI YANG CERDAS DENGAN EXTERNAL HTML OBJECT NAMA : NUR SAMSU, S.Pd. NO. HP : 08562916234 EMAIL : Arya.sam34@gmail.com INSTANSI : SMPN 3 Saptosari JUDUL

Artikel Lomba Menulis Blog Formulasi: Tutorial Lectora: Membuat MPI Cerdas Dengan External HTML Object

Hal | 5