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 :

Import file “Persebaran fauna endemik.pkg” melalui File>Import>Lectora Online Package dan arahkan ke file “Persebaran fauna endemik.pkg”

Drag-drop file “Pencarian HTML.awo” ke Parent Direktori Title Explorer

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)!!!

Klik pilih pada Menu Bar Tools>Error Check untuk mengecek error yang mungkin terjadi.
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.

Jika ingin men-preview hanya akan tampil di browser, jika preview biasa hanya tampil tulisan script saja.
Jika error tidak lg ditemukan (minimal error biru) maka langkah selanjutnya kita klik pilih di Menu Bar>Publish>
1. Publish to HTML untuk MPI berbasis HTML, untuk menjalankan hasilnya dengan double klik “index.html”
2. Publish to SCORM untuk MPI berbasis LMS, seperti Moodle, dll
Hasil penampakannya:

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

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

clip_image020

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.