Pada postingan ini, saya membagikan cara membuat media pembelajaran bahasa Inggris. Media ini berguna bagi para guru bahasa Inggris yang ingin memperkaya kosakata (English vocabulary) anak didiknya. Media ini dirancang dengan menggunakan fungsi-fungsi Javascript sederhana berbasis HTML dengan tampilannya yang juga sederhana. Namun, kegunaannya terbukti sangat membantu saya, siswa pun senang mengunakan media ini (ternyata agan Admin ngajar English ya, …wkwkwk).
Dari tampilannya yang sederhana, pada user interface-nya pun cukup terdapat dua tombol saja, serta table berisi timer dan score. Adapun kalimat “Say the word, then its translation!” adalah instruksi untuk siswa (Sebtulnya, tidak semua yang muncul adalah berupa “word”, tapi muncul juga frasa). Ketika tombol Start diklik, tombol akan berubah menjadi tombol kosakata yang muncul. Jika ditekan lagi, akan berubah lagi dengan kosakata yang lain secara acak. Begitu, seterusnya sampai ada notifikasi “Last word” pada kosakata ke-20. Siswa yang sedang diuji/review harus menyebutkan kosakata yang muncul, kemudian terjemahannya. Pada contoh yang saya buat, saya inputkan sebanyak 50 kosakata yang terdiri atas campuran kosakata dalam bahasa Indonesia dan kosakata dalam bahasa Inggris. Dari ke-50 kosakata campuran tersebut, hanya 20 kosakata yang akan dimunculkan dan harus disebutkan sekaligus diterjemahkan oleh siswa.
Yang terakhir, pada table “timer” terdapat angka hitung mundur. Pada media yang saya buat, timer bermula dari angka 80 sampai nol, yang berarti siswa memiliki waktu 80 detik untuk menyebutkan dua puluh kata yang muncul. Jika waktunya habis, maka akan muncul notifikasi seperti pada gambar berikut. Untuk memulai kembali, tekan tombol “F5” pada keyboard.
Kemudian, tombol “Correct” harus diklik jika siswa menyebutkan terjemahan kata yang muncul dengan tepat. Secara otomatis, skor siswa akan muncul pada table “score”, skor 1 sampai 20. Jika siswa menyebutkan semua kosakata dan terjemahannya dengan tepat, maka siswa mendapat skor 20. Jika siswa tidak mampu menyebutkan terjemahan kosakata yang muncul, maka siswa harus bilang “skip” atau “pass”, lalu tekan tombol kosakata agar muncul kosakata lainnya. Seandainya siswa melewati atau “skip” tiga kata, maka siswa tersebut hanya berkesempatan mendapat skor 17.
- Membuat file index.html
Ini adalah langkah pertama dan utama. File index.html ini bisa diibaratkan etalase yang akan menampilkan proses-proses yang dijalankan oleh file-file javascript yang akan kita buat. Ini disebut file utama juga karena inilah file inti yang akan dijalankan pada browser saat kita menjalankan media ini. Pembuatan file ini bisa kita lakukan pada aplikasi notepad di computer kita. Buka aplikasi notepadnya lalu copas kode dibawah ini:
<!DOCTYPE html>
<head>
<title>Vocabulary Review</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="timer.js"></script>
<script src="skor.js"></script>
<script src="testku.js"></script>
</head>
<body>
<h1>Say the word, then its translation!</h1>
<p id="note">Last word</p>
<button id="button1" onClick = "myButton1()" >Start</button></br></br>
<button id="button2" onClick = "myScore()" >Correct</button></br></br>
<table>
<tr><td><h3>Timer</h3></td><td><h3>Score</h3></td></tr>
<tr><td><h2 id="timer">80<h2></td><td><h2 id="score">0</h2></td></tr>
</table>
</body>
</HTML>
 |
| Tampilan dasar Media pada browser |
- Memoles tampilan dengan file style.css
Langkah berikutnya adalah memoles tampilan dengan sebuah file CSS. Copy dan paste-kan kode berikut pada notepad lalu simpan file dengan nama style.css.
body{margin : 8% auto;background:#bb3333;font-family: Arial, tahoma, sans-serif;font-size: 20px;color: #ffffff;text-align: center;width: 76%}#button1{font-family: Arial, Helvetica, sans-serif;font-size: 1,5em;font-weight: bold;color: #000000;top: 1px;right: 1px;border-radius: 0.4em;text-align: center;color: #00f;padding: 0.3em;margin: 1%;background-color: #2244ff;color: #ffffff;font-size: 3em;}#button2 {font-family: Arial, Helvetica, sans-serif;font-size: 1.8em;font-weight: bold;color: #000000;top: 1px;right: 1px;border-radius: 0.4em;text-align: center;color: #00f;padding: 0.3em;margin: 1%;}table {border: solid 2px #ffffff;margin: 1em 4em;}tr {border: 1px solid #ffffff;text-align: center;}td {border: 1px solid #ffffff;padding: 0em 0.7em 0em ;color: #ccee11;}h1{font-size: 52px;margin: 0 0 5% 0;}h2{font-size: 60px;margin: 0.2em 0.2em 0.2em 0.2em ;}h3{font-size: 1.2em;margin: 0.3em 0.3em 0.3em 0.3em ;}p{font-size: 30px;color: #bb3333;font-weight: bold;}
Pastikan penyimpanan file CSS ini diletakkan pada satu folder yang sama dengan file index.html.
Setelah pembuatan file CSS ini, tampilan media kita harus tampak seperti gambar pertama.
- Membuat file javascript skor.js untuk fungsi tombol “Correct”
Berikutnya membuat file Javascript (JS) untuk otomasi fungsi-fungsi user interface pada tampilan media. Berikut adalah kode JS yang kita susun untuk memfungsikan tombol “correct” pada tampilan media. Silakan copy-paste kode berikut pada notepad dan simpan dengan nama skor.js. Simpan pada folder yang sama dengan dua file yang sudah dibuat sebelumnya.
var skor = 1;
for (i = 0; i>=20; skor++){
}
function myScore(){
if(skor < 31){
document.getElementById("score").innerHTML = (skor++);
}
}
- Membuat file javascript timer.js untuk timer
Langkah berikutnya yaitu membuat “timer.js”. File JS ini berfungsi membuat penghitung waktu mundur otomatis pada media. Langsung copy-paste saja kode di bawah ini dan simpan dengan nama timer.js.
var counter = 81;
setInterval(function(){
counter--;
if(counter < 0){
alert ("Time is over..! Press F5 to Restart..!");
} else{
document.getElementById("timer").innerHTML = counter;
}
}, 950);
- Membuat file javascript testku.js
File testku.js ini berfungsi untuk otomasi tombol kosakata. Variable MyArray pada kode dibawah ini menyimpan vocabularies yang akan ditampilkan satu-persatu secara acak saat tombol kosakata di klik. Silakan copy-paste kodenya lalu simpan dengan nama testku.js.
var myArray = ["Afford (Afforded, Afforded)","Appear (Appeared, Appeared)","Arrive (Arrived, Arrived)","Begin (Began , Begun)","Build (Built, Built)","Buy (Bought, Bought)","Cannot Bear (Couldn'T Bear, Couldn'T Bear)","Carry (Carried, Carried)","Cover (Covered, Covered)","Damage (Damaged, Damaged)","Drive (Drove, Driven)","Exclaime (Exclaimed, Exclaimed)","Expect (Expected, Expected)","Menemukan","Terbang/ Menerbangkan","Memberi","Pergi","Mendengar","Menyela/ Mengganggu","Menjaga","Mengetuk","Mempelajari","Meminjamkan","Membuat","Beautiful","Bright","Busy","Clever","Correct","Different","Difficult","Hard","Important","Large","Pengemis","Percakapan","Negara, pedesaan","Gorden","Keputusan","Berlian","Jarak","Insinyur","Perusahaan, firma","Bentuk","Kecil, sedikit","Nyaring","Beruntung","Garasi, bengkel mobil","Pelabuhan","Alat"];
for (i=0; i < 1; i++){
}
function myButton1() {
var acak= myArray[Math.floor(Math.random()*myArray.length)];
document.getElementById("button1").innerHTML = (acak);
i++;
if(i > 25)
document.getElementById("note").style.color = "#ff9922";
if(i > 26)
document.getElementById("button1").style.color = "#bb3333";
if(i > 26)
document.getElementById("button1").style.background = "#bb3333";
}
Sekali lagi pastikan penyimpanan file ini dijadikan satu dengan file-file yang telah dibuat.
- Penyelesaian
Secara keseluruhan kita harus memiliki lima file yang terdiri file index.htmt, style.css, dan tiga file Javascript dalam satu folder yang sama. Jika file index.html di jalankan, pada browser kita akan tampak angka pada table “timer” mulai menghitung mundur dari angka 80 menuju nol. Begitupun dengan fungsi dua tombol yaitu tombol “start” dan tombol “correct” sudah berfungsi.Demikianlah uraian tentang pembuatan Media Latihan Vocabulary pada postingan blog ini. Salam, semoga bermanfaat.
