Menampilkan rumus matematika tanpa koneksi internet (Mathjax Offline)
Untuk e-learning versi 1.9 keatas, sudah tidak pakai mathjax lagi, karena rumus sudah langsung ditampilkan dalam bentuk gambar supaya lebih support saat diprint.
Ada bahasa tertentu yang digunakan untuk menampilkan berbagai jenis rumus pada halaman HTML kita, bahasa tersebut bernama LaTeX, MathML, dan AsciiMath.
Ketiga bahasa tersebut memiliki karakteristik dan kelebihan yang berbeda-beda, namun memiliki fungsi dan tujuan sama yaitu membuat dan menampilkan rumus-rumus pada halaman HTML.
Prinsip kerjanya juga sama, dimana kita menuliskan kode dengan format yang sudah ditentukan, kemudian bahasa tersebut akan diterjemahkan oleh tools yang sudah mereka sediakan.
Untuk lebih jelasnya, silakan kunjungi website mereka AsciiMath, LaTeX dan MathML.
Sekarang kita akan membahas sebuah javascript library yang bernama Mathjax.org yang saat ini populer karena fitur dan kemudahannya dan sudah digunakan dibanyak situs terkemuka. Mathjax ini fungsinya menampilkan rumus yang sudah dibuat dengan tiga bahasa diatas.
Kalau tidak pakai mathjax, harus setup dan panggil tools ketiga bahasa tersebut supaya bisa render dan tampil, sedangkan jika pakai mathjax kita hanya memanggil satu library saja dan sudah bisa menampilkan rumus dari ketiga bahasa tersebut.
Berikut fitur-fitur mathjax:
- High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages
- Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader
- Easy for authors, flexible for publishers, extensible for developers
- Supports math accessibility, cut-and-paste interoperability, and other advanced functionality
- Powerful API for integration with other web applications
Pada aplikasi e-learning dokumenary.net, sudah menggunakan mathjax juga untuk menampilkan rumus yang telah dibuat dengan wiris editor, namun masih memanggil mathjax dari cdn.mathjax.org, artinya komputer kita harus terkoneksi internet dulu agar rumus yang sudah dibuat bisa tampil dengan baik.
Kenapa tidak langsung disertakan pada aplikasi e-learningnya?
Ini menurut saya kelemahan mathjax, jika kita mendownload sourcenya ukurannya cukup besar -+ 40MB. Jadi saya memutuskan untuk tidak disertakan pada master aplikasi e-learning, cukup memanggil cdn nya saja.
Inget ya… Mathjax merupakan library untuk menampilkan rumus bukan tools untuk membuat rumusnya, kalo tools nya pada aplikasi e-learning menggunakan wiris editor, wiris editor sendiri harus terkoneksi dengan internet supaya bisa dibuka.
Pada tutorial kali ini akan saya jelaskan langkah-langkah memasang Mathjax pada pengguna aplikasi e-learning yang masih dilocal. Karena ada beberapa sekolah yang menggunakan aplikasi ini pada jaringan local lab komputer mereka.
1. Download Mathjax pada situs resminya https://www.mathjax.org/. Atau di SINI yang sudah saya sederhanakan sedikit dengan membuang file-file yang saya rasa tidak diperlukan.
2. File hasil download jika diexstrak akan ada folder bernama MathJax-master jika anda mendownload dari situs resminya kemudian rename menjadi MathJax, jika mendownload dari file yang sudah saya sederhanakan akan ada folder bernama MathJax.
Pindahkan folder tersebut ke assets/comp/
3. Buka file application/views/default/layout-public.html, application/views/default/layout-private.html, application/views/default/layout-iframe.html dan application/views/default/layout-detail-materi.html
Untuk e-learning versi 1.8, cukup membuka file application/views/default/layout-header.html untuk aksi no 3.
Kemudian cari kode ini
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Ganti menjadi
<script type="text/javascript" src="{{ base_url('assets/comp/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML') }}"></script>
Jika file-file yang saya sebutkan diatas ada juga pada folder plugins/views/ lakukan hal yang sama.
Setelah melakukan tiga hal diatas, harusnya tanpa koneksi internet rumus yang sudah dibuat dapat tampil dengan baik, cara taunya klik kanan pada rumus, maka akan muncul tampilan seperti berikut :
Ok sekian tutorial kali ini, selamat mencoba dan semoga berhasil.
Terimakasih sudah menggunakan aplikasi e-learningnya… 🙂
Category: Docs New Elearning
Heri
May 13, 2016 - 8:58 pm
good job
abimu
May 14, 2016 - 11:05 am
Terimakasih Mas Ary, sdh diterapkan di sekolah kami dan berhasil. Klo untuk WIRIS nya sendiri apa memang harus Online ataukah bisa offline juga spt MathJax?
Almazari
May 14, 2016 - 11:24 am
Syuperr… Untuk wiris editornya sementara masih request ke wiris.net mas, dan masih menggunakan lisensi free trial. Saya sudah mencari alternatif yang lain, namun tidak ada yang semudah wiris. Ini saya masih menghubungi pihak wiris karena terkendala masalah lisensinya.
abimu
May 14, 2016 - 1:01 pm
Ok, semoga berhasil
Adi Pirmansah
May 24, 2016 - 9:20 pm
Assalamualaikum mas….yang versi terbaru..halaman pengaturannya ko kosong ya.. ga tampil apa2….kenapa ya mas? padahal pake php terbaru
Almazari
June 4, 2016 - 10:57 pm
Coba perika databasenya mas, apakah sudah terbuat tabel – tabel baru? Jika belum berarti ada kegagalan install, tipsnya coba ubah permission folder application/cache/twig menjadi 777.
illank
October 1, 2016 - 9:28 pm
Assalamu ALaikum wr wr. mas saya sudah mengikuti seperti petunjuk diatas untuk memasukkan fungsi mathjax kok tdk bisa,yang muncul tetap wiris mohon bantuannya
User
February 3, 2017 - 8:23 am
Mas, saya juga sudah mencoba ngengikuti semua tutorial di atas, tetapi tetap tidak bisa,. mohon bantuan nya mas. terima kasih
Almazari
February 3, 2017 - 8:37 am
Yang dimaksut tidak bisa gmn?
User
February 3, 2017 - 10:54 am
ya tidak bisa muncul rumus nya, harus koneksi internet baru muncul. saya gunakan versi 1.8
Almazari
February 3, 2017 - 11:04 am
Maksutnya ketika klik wiris dari texteditor itu harus terkoneksi internet bukan ya? kalo iya berarti masih salah pemahamannya… Yang ditutorial ini yang dimaksut setelah rumus dibuat dengan wiris editor, disave, misalnya pada materi tertulis, berarti yang harus di check di view materi, harusnya nampil dengan baik rumusnya… kalo tidak tampil coba view source dibrowsernya, pastikan link ke matjaxnya sudah bener.
User
February 3, 2017 - 11:17 am
Iya benar mas, ketika klik wiris harus koneksi internet, kalau tidak jadi tidak tampil rumus nya, cara mengatasi nya bagai mana?.
terus di coba buat rumus dengan koneksi internet pas di save muncul code-code, dan ketika view tidak muncul. untuk link matjaxnya sudah di cek sudah benar.
Almazari
February 3, 2017 - 11:24 am
Masnya masih salah paham… Inget ya… Mathjax merupakan library untuk menampilkan rumus bukan tools untuk membuat rumusnya, kalo tools nya pada aplikasi e-learning menggunakan wiris editor, wiris editor sendiri harus terkoneksi dengan internet supaya bisa dibuka.
User
February 3, 2017 - 11:43 am
iya mas terimakasih, gagal fokus, he..
terus ini sudah membuat rumus, untuk memindahkan dari wiris editor nya ke halaman tugas/ soal nya bagai mana? soalnya malah muncul code-code