Tips Dan Triks

TIPS & TRIKS eMODUL
A. Tips dan Trik Umum

a. Tips
1. Buat modul dalam format doc (word)
2. Susun dokumen setiap section (bagian) sebagai satu file.
3. Inventarisir dan kumpulkan media pendukung (gambar,animasi,video, dan sound) yang
dibutuhkan.
4. Install software/apilkasi pendukung (Sigil, Format Factory, Video Editor, Foto Editor dsb)
5. Mulai mencoba membuat e-Modul (Lihat, Contoh, Modifikasi, Kreasi)
b. Triks
1. Trik agar naskah terformat rapi
 Gunakan bantuan tabel
2. Trik agar gambar berbingkai
 Insert gambar pada dokumen
 Setting format gambar sesuai yang diinginkan
3. Trik untuk video dan animasi
 Insert video/animasi/audio setelah di tarik ke Sigil
4. Trik untuk evaluasi interaktif
 Gunakan template evaluasi yang ada
 Edit Soal
B. Formatting
1. Gambar (image)
Memasukka gambar, klik tanda Plus biru pojok kiri atas kemudian pilih gambar yang mau di masukkan
e-UKBM klik ok, masuk menu insert pilih file gambar tsb
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height: normal"><span
lang="IN"><img alt="berprestasi" src="../Images/berprestasi.JPG"/><br/></span></p>
Yang merah di hapus, kemudian samping kanan img ditambahi html:
class="gambar" align="center"
Atau

<div align="center">
<div class="image">
<img alt="" src="../Images/image002.png" width="100%"/>
<div class="caption">
<b>Gambar : </b>
Petunjuk Umum
</div>
</div>
</div>

2. Caption
<p class="caption">Gambar 1: Inkubator Bay (sumber: www.inkubator-gratis.org)</p>
Ganti MsoNormal menjadi Caption dan ganti diskrisi gambar
1 | Tips & Triks eModul 2019

3. Video
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height: normal"><span
lang="IN"><video controls="controls" src="../Video/Contoh video.mp4"></video><br/></span></p>
Yang merah di hapus, kemudian samping kanan video ditambahi html:

class="video" align="center"
atau
<div>
<div align="center" style="width:auto;">
<div class="image">
<video width="100%" controls="controls">
<source src="../Video/listrik.mp4" type="video/mp4"/>
</video>
<div class="caption">
<b>Video : </b><span style="font-weight: bold;">Arus Listrik Tegangan
Tinggi</span><br/>Sumber: http://youtube.com/watch?v=1FfiRjHG-UI</div>
</div>
</div>
4. Audio
Penggunaan elemen audio ditandai dengan pasangan tag <audio> …. </audio>. Diantara pasangan tag
<audio> terdapat elemen source dan dapat ditambahkan teks yang akan tampil jika browser tidak
mendukung elemen audio.
Pada elemen audio juga terdapat beberapa atribut yaitu :
Atribut Nilai Fungsi

Menentukan bahwa audio akan diputar langsung ketika halaman sudah diload
autoplay –
secara otomatis.
Menunjukkan bahwa controls audio (setiap browser memiliki tampilan
controls – controls audio yang berbeda – beda) ditampilkan seperti player yang biasanya
berisi perintah seperti tombol play/pause, slider, volume dan lain sebagainya.
Digunakan untuk mematikan atau membisukan suara yang berarti audio akan
muted –
diputar tanpa suara pada awal inisial.
loop – Digunakan untuk memutar ulang audio yang sudah selesai diputar.
URL lokasi file Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan
src
audio keberadaan audio file tersebut.
auto, none, Menunjukkan seberapa penting audio harus diload ketika halaman web
preload
metada dimuat.
Contoh sebagai berikut :
<audio controls="controls" src="../Audio/meraih bintang.mp3"></audio>

5. Untuk membuat ringksan penting biasa disebut quote
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:
normal"><span lang="IN">ini teks yang mau dicadikan quote.</span></p>
class="MsoNormal" warna merah diganti "quote"
C. Menu
<br/><br/>
<script src="../Misc/getfeedback.js" type="text/javascript"></script>
<script src="../Misc/evaluasi.js" type="text/javascript"></script>
<div id="footer" style="text-align:center; font-weight: bold">
<a class="button_left purple" href="../Text/daftar_isi.xhtml"><span>⌂</span>Daftar
Isi</a></div>
Atau
<p align="center">
<a class="button_left turquoise" href="../Text/petakonsep.xhtml"><span>Ω</span>Peta
Konsep</a>
<a class="button_left purple" href="../Text/daftar_isi.xhtml"><span>≡</span>Daftar
Isi</a>
<a class="button_right" href="../Text/pembelajaran.xhtml"><span>∋</span>Pembelajaran</a>
</p>
D. Footer
<p class="footer">eModul 2019<br/>PSMA – Dinas Pendidikan Prov. Jatim</p>
E. Membuat Sampul
Buka file ppt contoh sampul, simpan sbagai png, masuk tool
F. Membuat Soal
1. Essay
<p><span style="font-style: italic;">Kerjakan semua soal di bawah ini di kertas, kemudian cocokan
dengan alternatif penyelesaiannya!</span></p>


<ul style="list-style-type: decimal-leading-zero;">

<li><div style="text-align: left;"> Soal essay 1=</div>
<button class="alt_penyelesaian" onclick="getFeedback('01','1')">Alternatif penyelesaian</button>
<p id="fb01_1" style="color: red; display: none;"> Pembahasan 1<br/><br/></p></li>

<li><div style="text-align: left;">Soal essay 2</div>

<p id="fb02_1" style="color: red; display: none;">Pembahasan 2<br/><br/></p></li>



</ul>
Jika tidak tampil
<script src="../Misc/getfeedback.js" type="text/javascript">

</script>
<script src="../Misc/evaluasi.js" type="text/javascript">
</script>
2. Pilihan Ganda1


<table>
<tbody><tr>
<td rowspan="7" valign="top" width="50px"><font style="font-size: 30px;">1.</font></td>
<td align="left" colspan="2">SOAL1</td>

</tr>
<tr>
<td width="40px" valign="top"><button onclick="getFeedbackpg('01','1')">A</button></td>
<td>OPSI A</td>
</tr>

<tr>
<td><button onclick="getFeedbackpg('01','2')">B</button></td>
<td>OPSI B</td>
</tr>
<tr>
<td><button onclick="getFeedbackpg('01','3')">C</button></td>
<td>OPSI C</td>
</tr>
<tr>
<td><button onclick="getFeedbackpg('01','4')">D</button></td>
<td>OPSI D</td>
</tr>
<tr>
<td><button onclick="getFeedbackpg('01','5')">E</button></td>
<td>OPSI E</td>
</tr>
<tr>
<td colspan="2">
<p id="fbpg_01_1" style="color:red;display:none;"><b>SALAH</b></p>
<p id="fbpg_01_5" style="color:blue;display:none;"><b>BENAR</b></p>

</td>
</tr>
</tbody>
</table>
<hr/>

<table>
<tbody><tr>

</tr>
<tr>
<td>OPSI A</td>
</tr>
<tr>
<td>OPSI B</td>
</tr>
<tr>
<td>OPSI C</td>
</tr>
<tr>
<td>OPSI D</td>
</tr>
<tr>
<td>OPSI E</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>
</tbody>
</table>
<hr/>


<table>
<tbody><tr>

</tr>
<tr>
<td>OPSI A</td>
</tr>
<tr>
<td>OPSI B</td>
</tr>
<tr>
<td>OPSI C</td>
</tr>
<tr>
<td>OPSI D</td>
</tr>
<tr>
<td>OPSI E</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>
</tbody>
</table>
<hr/>

<table>
<tbody><tr>

</tr>
<tr>
<td>OPSI A</td>
</tr>
<tr>
<td>OPSI B</td>
</tr>
<tr>
<td>OPSI C</td>
</tr>
<tr>
<td>OPSI D</td>
</tr>
<tr>
<td>OPSI E</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>
</tbody>
</table>
<hr/>

<table>
<tbody><tr>

</tr>
<tr>
<td>OPSI A</td>
</tr>
<tr>
<td>OPSI B</td>
</tr>
<tr>
<td>OPSI C</td>
</tr>
<tr>
<td>OPSI D</td>
</tr>
<tr>
<td>OPSI E</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>
</tbody>
</table>
3. Pilihan Ganda2
<ul style="list-style-type: decimal-leading-zero;">

<li>
<p>Pertanyaan nomor 1</p>
<table>
<tbody><tr><td width="25px" valign="top"><input type="radio" name="question0" value="A"/></td>
<td width="25px" valign="top">A.</td>
<td>opsi 1</td>
</tr>
<tr><td width="25px" valign="top"><input type="radio" name="question0" value="B"/></td>
<td width="25px" valign="top">B.</td>
<td>opsi 2</td>
</tr>
<tr><td width="25px" valign="top"><input type="radio" name="question0" value="C"/></td>
<td width="25px" valign="top">C.</td>
<td>opsi 3</td>
</tr>
<tr><td width="25px" valign="top"><input type="radio" name="question0" value="D"/></td>
<td width="25px" valign="top">D.</td>
<td>opsi 4</td>
</tr>
<tr><td width="25px" valign="top"><input type="radio" name="question0" value="E"/></td>
<td width="25px" valign="top">E.</td>
<td>opsi 5</td>
</tr>

</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<td>opsi 1</td>
</tr>
<td>opsi 2</td>
</tr>
<td>opsi 3</td>
</tr>
<td>opsi 4</td>
</tr>
<td>opsi 5</td>
</tr>
</tbody>
</table>
</li>
</ul>
<div align="center">
<br/>
<a class="button_left red" onclick="returnScore()" href="#nilai"><span>√</span>Hasil Evaluasi</a>
<br/>
<table style="text-align:center;" class="tabel">
<tbody><tr><th width="100px">Nilai</th>
<th width="300px">Deskripsi</th>
</tr>
<tr><td><span id="nilai" style="color:red;font-size:30px;text-decoration:bold;"> </span>
</td>
<td><span id="deskripsi" style="color:blue;font-size:20px"> </span></td>
</tr>
</tbody>
</table>
</div>
4. Refleksi Diri
<p>Jawablah pertanyaan-pertanyaan berikut dengan jujur dan bertanggungjawab!</p>
<table class="tabel">
<tbody><tr>
<th>No.</th>
<th>Pertanyaan</th>
<th colspan="2">Jawaban</th>
</tr>
<tr>
<td>01.</td>
<td style="text-align: left;">item penilaian diri 1<br/></td>
<td style="width:40px;"><input name="p1" type="radio"/>Ya</td>
<td style="width:100px;"><input name="p1" type="radio"/>Tidak</td>

</tr>
<tr>
<td>02.</td>

</tr>
<tr>
<td>03.</td>

</tr>
<tr>
<td>04.</td>

</tr>
<tr>
<td>05.</td>

</tr>
<tr>
<td>06.</td>

</tr>
<tr>
<td>07.</td>


</tr>
<tr>
<td>08.</td>

</tr>
<tr>
<td>09.</td>

</tr>
<tr>
<td>10.</td>

</tr>
</tbody>
</table>
<br/>
<p>Bila ada jawaban "Tidak", maka segera lakukan review pembelajaran, terutama pada bagian yang
masih "Tidak".<br/>
<br/>
Bila semua jawaban "Ya", maka Anda dapat melanjutkan ke pembelajaran berikutnya.
<br/></p>
G. Daftar Pustaka
<div class="paragraph">
<p class="pustaka">Pengarang 1 . Tahun terbit 1 . <span style="font-style: italic;">Judul Buku 1 .
</span>Kota 1 : Penerbit 1 . </p>
</div>

Tips Dan Triks

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tips Dan Triks

Diunggah oleh

Hak Cipta:

Format Tersedia

TIPS & TRIKS eMODUL

A. Tips dan Trik Umum

1 | Tips & Triks eModul 2019

Yang merah di hapus, kemudian samping kanan video ditambahi html:

Pada elemen audio juga terdapat beberapa atribut yaitu :

Atribut Nilai Fungsi

2 | Tips & Triks eModul 2019

class="MsoNormal" warna merah diganti "quote"

3 | Tips & Triks eModul 2019

Jika tidak tampil

<script src="../Misc/getfeedback.js" type="text/javascript">

<td align="left" colspan="2">SOAL1</td>

4 | Tips & Triks eModul 2019

<p id="fbpg_01_2" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_01_3" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_01_4" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_01_5" style="color:blue;display:none;"><b>BENAR</b></p>

<td align="left" colspan="2">SOAL2</td>

<p id="fbpg_02_2" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_02_3" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_02_4" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_02_5" style="color:blue;display:none;"><b>BENAR</b></p>

6 | Tips & Triks eModul 2019

<td align="left" colspan="2">SOAL3</td>

<p id="fbpg_03_2" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_03_3" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_03_4" style="color:red;display:none;"><b>SALAH</b></p>

7 | Tips & Triks eModul 2019

<td align="left" colspan="2">SOAL4</td>

<p id="fbpg_04_3" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_04_4" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_04_5" style="color:blue;display:none;"><b>BENAR</b></p>

<td align="left" colspan="2">SOAL5</td>

<p id="fbpg_05_2" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_05_3" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_05_4" style="color:red;display:none;"><b>SALAH</b></p>

<p id="fbpg_05_5" style="color:blue;display:none;"><b>BENAR</b></p>

<ul style="list-style-type: decimal-leading-zero;">

10 | Tips & Triks eModul 2019

<p>Jawablah pertanyaan-pertanyaan berikut dengan jujur dan bertanggungjawab!</p>

<td style="text-align: left;">item penilaian diri 1<br/></td>

<td style="width:40px;"><input name="p1" type="radio"/>Ya</td>

<td style="width:100px;"><input name="p1" type="radio"/>Tidak</td>

<td style="text-align: left;">item penilaian diri 2<br/></td>

<td style="width:70px;"><input name="p2" type="radio"/>Ya</td>

16 | Tips & Triks eModul 2019

<td style="text-align: left;">item penilaian diri 3<br/></td>

<td style="width:70px;"><input name="p3" type="radio"/>Ya</td>

<td style="width:70px;"><input name="p3" type="radio"/>Tidak</td>

<td style="text-align: left;">item penilaian diri 4<br/></td>

<td style="width:70px;"><input name="p4" type="radio"/>Ya</td>

<td style="width:70px;"><input name="p4" type="radio"/>Tidak</td>

<td style="text-align: left;">item penilaian diri 5<br/></td>

<td style="width:70px;"><input name="p5" type="radio"/>Ya</td>

<td style="width:70px;"><input name="p5" type="radio"/>Tidak</td>

<td style="text-align: left;">item penilaian diri 6<br/></td>

<td style="width:70px;"><input name="p6" type="radio"/>Ya</td>

<td style="width:70px;"><input name="p6" type="radio"/>Tidak</td>

<td style="text-align: left;">item penilaian diri 7<br/></td>

17 | Tips & Triks eModul 2019

<td style="width:70px;"><input name="p7" type="radio"/>Tidak</td>

<td style="text-align: left;">item penilaian diri 8<br/></td>

<td style="width:70px;"><input name="p8" type="radio"/>Ya</td>