Membina Soalan Objektif Dalam Blog Post

Baru-baru ini saya sering ditanya oleh guru-guru yang sambung belajar dengan beberapa soalan yang berkaitan pembinaan blog. Di sini saya ingin kongsi satu perkara yang berkemungkinan boleh digunakan oleh guru-guru dalam pembelajaran dan pengajaran. Kaedah ini digunakan untuk membina soalan yang berasaskan beraneka pilihan jawapan atau lebih dikenali sebagai "Multiple Choice Questions" dalam pos Blogger.



Berikut ialah langkah yang perlu dilaksanakan dalam pembinaan tersebut.

1. Buka bahagian skrip HTML dalam Blogger dengan cara 'Log in' Blogger


2. Kemudian pilih 'Template' dan Klik 'Edit HTML'


3. Seterusnya klik box 'Kembangkan Templat Widget'


4. Cari skrip </head>


5. Kemudian masukkan skrip di bawah sebelum skrip </head>.
   
   <script type='text/javascript'><br />function js_set_rad(ref,val)<br />{<br />var x = document.getElementById(ref);<br />x.value = val;<br />}<br />function js_score()<br />{<br />var score = 0;<br />var x = document.getElementById('aq1');<br />score = eval (score) + eval(x.value);<br />var x = document.getElementById('aq2');<br />score = eval (score) + eval(x.value);<br />var x = document.getElementById('aq3');<br />score = eval (score) + eval(x.value);<br />// etc...<br />alert("Skor Anda ialah: "+score);<br />}<br /></script>


6. Perubahan perlu dilakukan pada skrip dibawah, mengikut bilangan soalan
   
   var x = document.getElementById('aq1');<br /><br />score = eval (score) + eval(x.value);


7. Perhatikan pada skrip pada Nombor 5, terdapat 3 kali pengulangan skrip bermakna terdapat 5 soalan yang akan dibina.
   
   var x = document.getElementById('aq1');<br /><br />score = eval (score) + eval(x.value);<br /><br />var x = document.getElementById('aq2');<br /><br />score = eval (score) + eval(x.value);<br /><br />var x = document.getElementById('aq3');<br /><br />score = eval (score) + eval(x.value);


8. Terdapat perbezaan pd skrip aq1, aq2 dan aq3. Sekiranya anda ingin menambahnya maka urutan aq ini akan bertambah. Ini bermakna sekiranya anda ingin membina 10 soalan maka anda akan mengulang skrip tersebut dengan membina aq1... aq10.


9. Kemudian “Simpan” dan “Tutup”


10. Seterusnya bina cacatan atau 'post' baru, pilih penulisan secara HTML.


11. Isi ruangan catatan dengan skrip yang berikut:
    
    Soalan 1<br /><br /><input type="radio" name="q1" id="q1" value="1" onclick="js_set_rad('aq1',this.value)" /> Jawapan 1a<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> Jawapan 1b<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> Jawapan 1c<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> Jawapan 1d<br /><br /><input type="hidden" name="aq1" id="aq1" />


12. Skrip tersebut merupakan skrip untuk Soalan 1 dengan 4 pilihan jawapan.


13. Sebagai contoh skrip seperti berikut;
    
    Soalan 1<br /><br /><br /><br />Berapakah bilangan warna bendera Malaysia?<br /><br /><br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> 1<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> 2<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> 3<br /><br /><input type="radio" name="q1" id="q1" value="1" onclick="js_set_rad('aq1',this.value)" /> 4<br /><br /><input type="hidden" name="aq1" id="aq1" />
    
    Perhatikan pada value="0" bermakna jawapan salah, manakala value="1" merupakan jawapan yang betul.


14. Soalan akan terpapar seperti berikut;
    
    Soalan 1
    
    Berapakah bilangan warna bendera Malaysia?
    
    1
    
    2
    
    3
    
    4
    
    


15. Ulang salin skrip di atas untuk soalan seterusnya.


16. Namun begitu beberapa perkara perlu dilaksanakan. Sebagai contoh dua soalan dibina.
    
    Soalan 1<br /><br />Berapakah bilangan warna bendera Malaysia?<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> 1<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> 2<br /><br /><input type="radio" name="q1" id="q1" value="0" onclick="js_set_rad('aq1',this.value)" /> 3<br /><br /><input type="radio" name="q1" id="q1" value="1" onclick="js_set_rad('aq1',this.value)" /> 4<br /><br /><input type="hidden" name="aq1" id="aq1" /><br /><br /><br /><br />Soalan 2<br /><br />Nyatakan warna bintang pada bendera Malaysia?<br /><br /><input type="radio" name="q2" id="q1" value="0" onclick="js_set_rad('aq2',this.value)" /> Merah<br /><br /><input type="radio" name="q2" id="q1" value="0" onclick="js_set_rad('aq2',this.value)" /> Biru<br /><br /><input type="radio" name="q2" id="q1" value="1" onclick="js_set_rad('aq2',this.value)" /> Kuning<br /><br /><input type="radio" name="q2" id="q1" value="0" onclick="js_set_rad('aq2',this.value)" /> Putih<br /><br /><input type="hidden" name="aq2" id="aq2" />


17. Cuba anda nyatakan apakah pindaan yang perlu dilakukan? Sekiranya anda telah faham, bermakna anda memang bijak.


18. Sekiranya telah selesai membina kesemua soalan mengikut jumlah yang anda perlukan. Salin skrip di bawah sebagai penutup.
    
    <input type="button" name="score" id="score" value="Klik Untuk Skor" onclick="js_score();" />


19. Seterusnya klik 'Terbitkan'.

IlyTrolak:

"Selamat mencuba semua, mungkin tutorial ini akan dapat membantu anda dalam memberi latihan kepada murid."

Komen, pendapat dan cadangan dari pihak pembaca yang budiman, amat kami hargai dan didahului ucapan terima kasih

PERINGATAN: Aku Budak Trolak tidak bertanggungjawab terhadap komentar yang diutarakan melalui laman ini. Ia pandangan peribadi pelawat laman ini dan tidak semestinya menggambarkan pendirian pemilik laman. Segala risiko akibat komen yang disiarkan menjadi tanggungjawab pelawat laman itu sendiri.

Read More

Tutorial Blog 6 : Menghalang Klik Kanan Di Blog

Adakah anda ingin menghalang seseorang dari mengambil bahan yang terdapat di dalam blog anda?



Mari kita ikuti langkah ini.

Penggunaan klik kanan di muka laman adalah bertujuan melaksanakan aktiviti seperti mengambil bahan dari laman anda. Ianya boleh dihalang dengan memasukkan skrip berikut:

Kod Tidak Boleh Klik Kanan

Klik pada butang 'Tanda' seterusya klik kanan pada bahagian yang telah ditanda dan pilih 'Copy'

<br /><br /><script language="JavaScript"> <br /><br /><!-- http://www.spacegun.co.uk --><br /><br />var message = "function disabled"; <br /><br />function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; } <br /><br />if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } } <br /><br />document.onmousedown = rtclickcheck;<br /><br /></script><br /><br /><br /><br /><br /><br /><br /><br />

Ayat "function disabled" pada kod boleh ditukar mengikut kehendak sendiri. Ayat ini akan dikeluarkan apabila seseorang cuba klik kanan pada laman anda.

Read More

Tutorial Blog 5 : Membuat Navigasi Melintang

1. Masuk ke Blogger dengan menggunakan ID anda.



2. Klik pada 'Layout'



3. Pilih 'Edit HTML'



4. Ikut langkah di bawah

Kesan kod berikut ]]></b:skin>

salin dan tampalkan skrip di bawah di atas kod disebelah ]]></b:skin>

/* navbar

================== */

#bg_nav {

background: #000000;

width: 660px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #FFFFFF;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #333333;

border-bottom: 1px solid #333333;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 440px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 200px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #222222;

color: #FFFFFF;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #000000

}

#nav a:hover {

background: #6e6d6d;

color: #FFFFFF;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #333333;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#nav li li a:hover, #nav li li a:active {

background: #666666;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

Seterusnya lihat skrip bawah dan kesan kod berikut :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>

</div>

Salin dan tampal skrip di bawah, selepas kod di atas:

<div id='bg_nav'>

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://www.namadomain1.com/'>Utama</a></li>

<li><a href='http://www.namadomain2.com/'>Bisnes</a></li>

<li><a href='http://namadomain3.com/'>Produk</a></li>

<li><a href='http://namadomain4.com/'>Hubungi Kami </a></li>

</ul>

</div>

</div>

<div id='navright'>

<form action='http://YourBlogName.blogspot.com/search' id='searchform' method='get' name='searchform'>

<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

</div>

</div><!-- end bg_nav -->

Klik SAVE TEMPLATE.

Tamat.

Until this your experiment has done, however if you apply it in your template, you need to match a few things, such as; the width of the navigation, links, keywords and others. Some samples are as follow;

/* navbar

================== */

#bg_nav {

background: #000000;

width: 660px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #FFFFFF;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #333333;

border-bottom: 1px solid #333333;

overflow: hidden;

}

You have to change the width; 660px into the values which is suitable with your template; e.g. width: 990px.

#navleft {

width: 440px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 200px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

This one is also the same; you need to change it with the value that is suitable with your template.

<li><a href='http://www.namadomain.com/'>Utama</a></li>

<li><a href='http://www.namadomain2.com/'>Bisnes</a></li>

<li><a href='http://namadomain3.com/'>Produk</a></li>

<li><a href='http://namadomain4.com/'>Hubungi Kami </a></li>

Read More

Tutorial Blog 4 : Membuat Fungsi "Refresh" Dan "Redirect"

Untuk memasukkan fungsi "refresh" cukup dengan hanya meletakkan kod di bawah ini:



<meta http-equiv="refresh" content="10"/>



Simpan kode di atas antara <head> .... </head>

Keterangan :



fungsi nombor boleh diubah sama ada "1","2","3","4","5".... Fungsi nombor ini adalah masa untuk melaksanakan proses 'refresh' dalam kiraan saat.



Di dalam kod yang telah diberikan, nombor 10 bermakna selepas 10 saat proses 'refresh' akan berlaku.



Selain menjalankan proses 'refresh', proses 'redirect' juga boleh dilaksanakan dengan memasukkan alamat laman yang hendak dilakukan proses 'redirect', kod yang hendak digunakan adalah sama seperti di bawah:



<meta http-equiv="refresh" content="0";URL=tulis alamat URL tujuan di sini"/>



contoh seperti di bawah:



<meta http - equiv = "refresh" content = "0"; URL = http://www.google.com " />



Ini bermakna dalam tempoh 0 saat, laman akan berpaut ke laman baru iaitu Google.





Ily Trolak : Semoga ilmu dapat dimanfaatkan bersama.

Read More

Tutorial Blog 3 : Membuat Bar Sisi Di Kiri Dan Kanan Bar

Mari kita mulakan bagaimana membina bar atau kolum di bahagian sisi, sama ada di bahagian kiri atau kanan.



1. Mulakan kemasukan ke bahagian Blogger dengan masukkan Kata Pengguna dan Kata Laluan.



2. Seterusnya, pilih 'Layout' dan klik pada 'Edit HTML'

3. Kesan skrip seperti di bawah;



/* Outer-Wrapper

------------------------------------------ */



#outer-wrapper

{

width: 840px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}



#main-wrapper

{

width: 410px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



#sidebar-wrapper

{

width: 220px;

float: right;

padding-left:10px; /* yg ini tambahan juga biar ada jarak sela */

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}



Seterusnya tambah skrip berikut pada bahagian bawah skrip di atas.



#newsidebar-wrapper

{

width: 180px;

float: right;

padding-left:10px;

word-wrap: break-word;

overflow: hidden;

}



Penambahan yang diletakkan di atas akan memperlihatkan kewujudan kolum bahagian kiri. Untuk mengubah kedudukan kolum berada pada bahagian kanan lakukan perubahann seperti berikut;



#newsidebar-wrapper

{

width: 180px;

float: left;

padding-right:10px;

word-wrap: break-word;

overflow: hidden;

}



Perubahan hanya dilakukan pada bahagian yang berwarna biru sahaja.



5. Seterusnya klik pada butang "Save The Template"



6. Seterusnya, pergi ke bahagian bawah body dan masukkan skrip berikut:

div id='sidebar-wrapper';

b:section class='sidebar' id='sidebar' preferred='yes'>

b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

</b:section>

</div>

<div id='newsidebar-wrapper'>

<b:section class='sidebar' id='newsidebar' preferred='yes'/>

</div>

Now, if you want to place the new sidebar in the left side, then you have to move that sidebar code above the main code (posting). The whole codes will look like the following:



• <div id='newsidebar-wrapper'>  
  <b:section class='sidebar' id='newsidebar' preferred='ye'/'>
  </div>

  
  
  

• <div id='main-wrapper'> 
  <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section> </div>

  
  
  

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/></b:section></div>

Remember to click save template after finishing it. Finally, view the result…..what do you think? do you like your new template? I think so.

It is easy, isn’t it? Hopefully you understand my explanation and if you want to see the sample blog with the sidebar in the left and right, you can see it here.

Read More

Tutorial Blog 2 : Menghilangkan Tanda Pos Lama dan Baru

Perkataan yang tertera sebagai "Pos Terdahulu" atau "Older Post" atau "Pos Terbaru" atau "Newer Post", yang terdapat pada setiap kiriman kita, kadang-kadang tidak sedap dilihat oleh sesetengah orang.

Tanda tersebut boleh dihilangkan. Untuk menghilangkannya ikut panduan yang diberikan.



1. "login" ke dalam blogger menggunakan "username" dan "password" masing-masing.



2. Klik pada "Layout"



3. Pilih "Edit HTML".



Untuk menghilangkan tanda "Kiriman Terbaru" atau "Newer Posts", sila kesan skrip seperti berikut;



#blog-pager-newer-link {

float: left;

}



Kemudian gantikan skrip di atas dengan skrip seperti di bawah;



#blog-pager-newer-link {

display:none;

}



Untuk menghilangkan "Pos Terdahulu" atau "Older Post" pula, kesan skrip seperti di bawah;



#blog-pager-older-link {

float:right;

padding-right:5px;

}



gantikan skrip di atas dengan skrip seperti di bawah;



#blog-pager-older-link {

display:none;

}



Seterusnya untuk menghilangkan tanda "Home" atau "Utama", kesan skrip yang terdapat seperti di bawah;



#blog-pager {

text-align: center;

}



Gantikan skrip di atas dengan skrip seperti di bawah;



#blog-pager {

text-align: center;

}



Selamat mencuba.

Read More

Tutorial Blog 1 : Menukar Latar Belakang Blog

Banyak laman yang digunakan untuk menyampaikan ilmu berkaitan blog. Rata-rata kebanyakannya di dalam bahasa Inggeris. Kemudian yang hampir dengan bahasa Malaysia ialah bahasa Indonesia.

Oleh kerana aku adalah insan yang sememangnya menentang Pengajaran dan Pembelajaran Sains dan Matematik dalam Bahasa Inggeris atau lebih dikenali sebagai PPSMI atau ETeMs, Maka menjadi tanggungjawab aku jugalah untuk menerangkan sedikit ilmu di dalam bahasa Melayu pula.



Pada kesempatan yang ada hari ini, aku nak terangkan sedikit ilmu berkaitan cara nak menukar latar belakang laman blog. Kalau setakat nak tukar warna mungkin mudah sedikit, tapi jika nak tukar dari warna, hendak ditambah dengan gambar pula.



Aku masukkan juga caranya menukar warna latar belakang yang paling mudah iaitu;



a. Login pada Blogger.



b. Apabila sudah memasuki laman "Dashboard" pilihlah "Layout".



c. Kemudian pilih pada tab "Font and Colors".



d. Buatlah pilihan warna pada untuk latar belakang dengan memilih "Page Background Color".



Meletakkan gambar pada latar belakang pula, perlulah menggunakan cara yang berbeza. Ia memerlukan kita membuat perubahan pada skrip HTML.



Caranya ialah seperti berikut;



a. Tetapkan dahulu URL gambar yang dipilih.



b. Login pada Blogger.



c. Pilih tab "Layout".



d. Pilih tab "Edit HTML".



e. Cari skrip html seperti berikut;



body {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

text-align: center;

color: #fff;

font-family: arial,verdana,helvetica,tahoma,Sans-serif;

font-size: 100%;

width: 100%;

}



f. Masukkan skrip "background: url('http://www.................png') repeat;" ke dalam skrip tersebut. Lihat contoh di bawah;



body {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

text-align: center;

color: #fff;

background: url('http://www.................png') repeat;

font-family: arial,verdana,helvetica,tahoma,Sans-serif;

font-size: 100%;

width: 100%;

}





Selamat mencuba...

Read More