Cara Membuat Kuis Di Blogger

Kembali lagi dengan Siap Ngoding edisi Tutorial Cara Membuat Kuis Soal di Blogger menggunakan HTML, CSS, dan Javascript.

Ini semua karena request dari Mas Agus Priyono. Terimakasih Mas Agus sudah request, dan temen-temen yang mau request seputar dunia blogging dan koding juga bisa request di kolom komentar.

Dan bagi yang belum bisa saya penuhi permintaan nya saya mohon maaf sekali, karena saya hanya membuatkan tutorial dari permintaan (request) yang menurut saya menarik dan bisa berguna juga bagi orang lain. Mohon kerjasamanya.

Oke, Lanjut. Widget kuis ini sangat cocok sekali bagi kalian yang memiliki blog dengan niche pendidikan, namun bukan berarti tidak cocok untuk niche lain. Niche cerita lucu atau apapun itu juga akan cocok dipasangi widget ini. Hanya pertanyaan kuisnya saja yang berbeda.

Dan bagi blog yang ber niche random gado-gado sekalipun juga bisa dipasangi niche ini, itung-itung buat hiburan pengunjung blog.

Jika ingin melihat demonya terlebih dahulu, kalian bisa klik tombol demo di bawah.

Cara Membuat Kuis Di Blogger

Pertama silahkan kalian masuk ke Dasboard blogger > Tema > Edit HTML, lalu salin kode css di bawah ini dan tempelkan tepat di atas kode ]]></b:skin>

/* widget kuis by Siap Ngoding */
.wc-qws-mhs,.wc-qws-sls{position:relative;padding:10px 15px;margin:20px auto;width:100%;background-color:#fff;box-shadow: 0 2px 15px -2px rgb(0 0 0 / 12%);border-radius:3px}
.wc-qws-mhs.hidden,.wc-qws-sls.hidden,#wc-qws-start.hidden,.wc-qws-knt.hidden,.wc-qws-wkt.hidden,#wcqws-made-by{visibility:hidden;opacity:0}
.wc-qws-mhs input[type=text],.blogContent .widget input[type=text]{padding:15px;border-radius:3px;margin:10px 0;width:100%;border:1px solid #ddd;outline:none;background:rgba(255,255,255,0.2);color:#444}
.wc-qws-mhs input[type=text]:focus,.blogContent .widget input[type=text]:focus{border-color:#f89000!important}
.wc-qws-mhs input[type=text]::-webkit-input-placeholder{color:#a5a5a5;font-size:14px}
 button#wc-qws-lnj,button#wc-qws-start,button#wc-qws-fns{width:100%;padding:15px;outline:none;border:0;background-color:#f89000;color:#fff;border-radius:3px;margin-bottom:10px;font-size:15px;font-weight:bold}button#wc-qws-start,button#wc-qws-fns{margin-top:25px}
@media screen and (min-width:500px){button#wc-qws-start,button#wc-qws-fns{max-width:300px}}
.wc-qws-sls h3{text-align:center;font-size:17px}
.wc-qws-sls p{font-size:15px;margin:5px auto}
.wc-qws-sls p:last-child{font-size:13px;line-height:1.5em;margin-top:15px;font-style:italic;opacity:.8}
.wc-qws-knt label{background-color:#E7E9EB;display:block;position:relative;padding:10px;margin-bottom:1px;cursor:pointer;border-radius:3px;font-size:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-wrap:break-word}
.wc-qws-knt input{border:2px solid #fff;box-shadow:0 0 0 1px #f89000;appearance:none;border-radius:50%;width:12px;height:12px;background-color:#fff;transition:all ease-in 0.2s}
.wc-qws-knt input:checked{background-color:#f89000}
.wc-qws-knt label:hover{background-color:#ddd}
.wc-qws-knt input{margin-right:10px}  
.wc-qws-knt b{padding:0 6px;border-radius:50%;border:5px solid rgba(255,219,158);color:#f89000;margin-right:5px}
.wc-qws-knt form:nth-child(n+2):before{content:'\2027 \2027 \2027'; display:block;text-align:center;font-size:28px;font-style:normal;letter-spacing:0.6em;text-indent:0.6em;margin:20px auto}
  
/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wc-qws-mhs,.darkMode .wc-qws-mhs input[type=text],.darkMode .wc-qws-knt label,.darkMode .wc-qws-mhs,.darkMode .wc-qws-sls{background-color:#2d2d30;color:#fefefe}
.darkMode .wc-qws-mhs input[type=text]{border-color:rgba(255,255,255,.1)}

Selanjutnya salin kode javascript di bawah ini dan tempelkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, Setelah itu klik Simpan

<b:if cond='data:view.isSingleItem and !data:view.isPreview'>
<!--[skrip tidak berfungsi jika Anda menghapus kredit pembuat || the script doesn't work if you remove the creator credit]-->
<div class='made-by-wc' style='display:none;'>https://www.wendycode.com</div>
<script>
//<![CDATA[
// widget kuis by Siapngoding javascript pure
eval(function(x,e,c,r,a,f){if(a=function(x){return x},!"".replace(/^/,String)){for(;c--;)f[c]=r[c]||c;r=[function(x){return f[x]}],a=function(){return"\\w+"},c=1}for(;c--;)r[c]&&(x=x.replace(new RegExp("\\b"+a(c)+"\\b","g"),r[c]));return x}("4 3=28;(6(161,136){4 19=28,67=161();256(!![]){138{4 125=-23(19(255))/61+23(19(254))/33*(23(19(253))/60)+-23(19(252))/48+-23(19(251))/194*(23(19(250))/25)+23(19(249))/176*(-23(19(247))/51)+-23(19(239))/166+23(19(245))/167;36(125===136)242;52 67['124'](67['131']())}141(241){67['124'](67['131']())}}}(65,248));6 65(){4 137=['171','258','269','277','12\\107(6()\\107','(((.+)+)+)+$','276=','275=','274','273=','272','271=','270','268','{}.135(\\267\\266\\265)(\\107)','263','262','183','261','259+238+224+236+','214','180','159','129=','213==','212=','211','210','205','202','178','206','149','199','217','234','233','115','232','218','223','222==','221==','220==','219','204','225=','151','226','47','228','126','229','230','231','163','155','135','109','216','227=','192','203','201=','215==','168','207','100','208','209==','278==','89','198','260','280','300=','337','336'];65=6(){12 137};12 65()}6 28(128,130){4 134=65();12 28=6(82,333){82=82-127;4 133=134[82];12 133},28(128,130)}4 1=[3(321),3(328),3(327),3(326),3(325),3(324),3(279),3(322),3(338),3(339),3(340),3(341),'357=',3(195),'356=',3(355),3(354),'353','129=','352==',3(351),3(350),3(349),3(127),3(348),3(347),3(346),3(345),3(344),'343=','342',3(97),3(330)],0={'89':320(1[61]),'319':6(34){4 27=3,108,86,92,106,111,74,55,70='',63=14;53(34=0[27(318)](34);63<34['126'];)106=(108=34['100'](63++))>>33,111=(60&108)<<48|(86=34[27(44)](63++))>>48,74=(56&86)<<33|(92=34[27(44)](63++))>>25,55=38&92,139(86)?74=55=81:139(92)&&(55=81),70=70+20['89'][27(40)](106)+20['89'][27(40)](111)+20[27(46)]['159'](74)+20[27(46)][27(40)](55);12 70},'2':6(30){4 10=3,152=(6(){4 113=!![];12 6(157,73){4 153=113?6(){4 158=28;36(73){4 154=73[158(148)](157,145);12 73=144,154}}:6(){};12 113=![],153}}()),72=152(20,6(){4 66=28;12 72[66(98)]()['151']('(((.+)+)+)+$')['149']()[66(156)](72)[66(281)](66(287))});72();4 43=(6(){4 123=!![];12 6(147,69){4 142=123?6(){4 140=28;36(69){4 143=69[140(148)](147,145);12 69=144,143}}:6(){};12 123=![],142}}()),132=43(20,6(){4 8=28,50;138{4 150=283(8(282)+8(298)+');');50=150()}141(299){50=170}4 102=50[8(146)]=50[8(146)]||{},94=[8(310),'317',8(316),'315',8(314),8(313),8(358)];53(4 83=14;83<94[8(39)];83++){4 59=43[8(156)][8(311)][8(104)](43),101=94[83],103=102[101]||59;59[8(301)]=43[8(104)](43),59[8(98)]=103[8(98)][8(104)](103),102[101]=59}});132();4 95,93,99,105,80,96,45='',41=14;53(30=30['155'](/[^302-323-237-9\\+\\/\\=]/200,'');41<30[10(39)];)95=20[10(46)][10(77)](30[10(40)](41++))<<33|(105=20[10(46)][10(77)](30[10(40)](41++)))>>48,93=(56&105)<<48|(80=20[10(46)][10(77)](30[10(40)](41++)))>>33,99=(60&80)<<25|(96=20[10(46)][10(77)](30[10(40)](41++))),45+=15[10(17)](95),81!=80&&(45+=15[10(17)](93)),81!=96&&(45+=15[10(17)](99));12 45=0['191'](45)},'199':6(64){4 24=3;64=64[24(303)](/\\304\\305/200,'\\306');53(4 32='',75=14;75<64[24(39)];75++){4 22=64[24(44)](75);22<58?32+=15['198'](22):22>307&&22<308?(32+=15[24(17)](22>>25|87),32+=15[24(17)](38&22|58)):(32+=15[24(17)](22>>90|97),32+=15[24(17)](22>>25&38|58),32+=15[24(17)](38&22|58))}12 32},'191':6(42){4 31=3;53(4 62='',29=14,35=309=57=14;29<42[31(39)];)(35=42[31(44)](29))<58?(62+=15[31(17)](35),29++):35>195&&35<97?(57=42[31(44)](29+61),62+=15[31(17)]((164&35)<<25|38&57),29+=33):(57=42['100'](29+61),196=42[31(44)](29+33),62+=15[31(17)]((56&35)<<90|(38&57)<<25|38&196),29+=60);12 62}},188=0['2'](1[48])+0['2'](1[194]),165=0['2'](1[14])+0['2'](1[33])+0['2'](1[60]),189=5[3(7)](0['2'](1[25]));6 121(){4 85=3,119=5[85(290)](0['2'](1[176]))[14];119[85(37)]+=188,119[85(284)](0['2'](1[164]),0['2'](1[285]))}36(5[3(117)](0['2'](1[25]))[3(39)]===14)121();52{36(189[3(37)]!=165)121();52{4 122=5['47'](0['2'](1[51]))[3(286)](0['2'](1[166])),49=14,78=14,120=14;5[3(7)](0['2'](1[167]))[3(76)]('168',169);6 169(){4 71=3;170[71(288)][71(172)]=171[71(172)]}5[3(7)](0['2'](1[174]))[3(76)](3(112),173);6 173(){4 68=3;5['47'](0['2'](1[90]))[68(26)][68(91)](0['2'](1[18])),5['47'](0['2'](1[174]))[68(26)]['163'](0['2'](1[18]))}5[3(7)](0['2'](1[289]))[3(76)](3(112),177);6 177(){4 21=3;5[21(7)](0['2'](1[51]))[21(26)][21(54)](0['2'](1[18])),5[21(7)](0['2'](1[110]))[21(26)][21(54)](0['2'](1[18])),5[21(7)](0['2'](1[56]))[21(26)][21(91)](0['2'](1[18])),116(),184(291)}5['47'](0['2'](1[292]))['178'](3(112),162);6 162(){4 11=3,179=5[11(7)](0['2'](1[114]))[11(84)],181=5[11(7)](0['2'](1[182]))[11(84)];36(179==='')5[11(7)](0['2'](1[114]))['180']();52{36(181==='')5[11(7)](0['2'](1[182]))[11(293)]();52{5[11(7)](0['2'](1[90]))[11(26)][11(54)](0['2'](1[18])),5[11(7)](0['2'](1[51]))['109']['183'](0['2'](1[18])),5[11(7)](0['2'](1[110]))[11(26)][11(91)](0['2'](1[18]));4 88=5['186'](0['2'](1[175]));6 187(){4 16=11;88[16(87)]<=14?(5[16(7)](0['2'](1[51]))[16(26)][16(54)](0['2'](1[18])),5[16(7)](0['2'](1[110]))['109'][16(54)](0['2'](1[18])),5[16(7)](0['2'](1[56]))[16(26)][16(91)](0['2'](1[18])),116(),184(185)):88[16(87)]=88[16(87)]-61}4 185=294(187,295)}}}6 116(){4 13=3,190=5[13(7)](0['2'](1[114]))[13(84)],197=5[13(7)](0['2'](1[296]))[13(84)],297=5['186'](0['2'](1[175]))[13(37)];5[13(7)](0['2'](1[329]))[13(37)]=190,5[13(7)](0['2'](1[331]))[13(37)]=197,5[13(7)](0['2'](1[332]))[13(37)]=49,5[13(7)](0['2'](1[334]))['115']=78,5['47'](0['2'](1[335]))['115']=120,5[13(7)](0['2'](1[235]))[13(37)]=49/122*264}6 160(257){4 79=3;49=5['192'](0['2'](1[240]))[79(39)],78=5[79(117)](0['2'](1[243]))[79(39)],120=122-(49+78)}5[3(117)](0['2'](1[244]))[3(246)](193=>{4 118=3;193[118(76)](118(312),160)})}}",0,359,"Wc|kwsar|de|_0x355133|var|document|function|0xe7|_0x145a8a||_0x36595c|_0x42f976|return|_0x45ebec|0x0|String|_0x3a249a|0xfe|0x1e|_0x281c4c|this|_0x1a6651|_0x3258e9|parseInt|_0x1eb676|0x6|0xf0|_0x55a361|_0x5550|_0xbdd732|_0x1f96ff|_0x26419a|_0x3edf02|0x2|_0x5ad7f8|_0x55aabd|if|0xdb|0x3f|0xe9|0xcc|_0x31f9c1|_0x1a22e7|_0x23eb78|0xf9|_0x3243d1|0xfd|querySelector|0x4|jmbr|_0x3702ef|0x8|else|for|0xed|_0x54a641|0xf|c2|0x80|_0x8966ca|0x3|0x1|_0x42f8bd|_0x4fd943|_0x56f90e|_0x1628|_0x6115a8|_0x2ce02b|_0x1194e9|_0x25c071|_0xcfe7bb|_0x15e8f0|_0x231abe|_0x295d7d|_0x2e4c92|_0x2c81ab|0xd4|0xb8|jmsh|_0x57aa6e|_0x33aa03|0x40|_0xdabc7a|_0x3fb757|0xda|_0x5af4d9|_0x4acad9|0xc0|_0x5ad1c2|_keyStr|0xc|0xc7|_0x1b8df0|_0x3bc507|_0x5c66df|_0x2a9943|_0x4135fa|0xe0|0xd6|_0x81994d|charCodeAt|_0x1b1f9a|_0x1f5b87|_0x29f81b|0xb4|_0x487566|_0x292c1d|x20|_0x548c52|classList|0xe|_0x1f6a55|0xf7|_0x7eb364|0x11|innerHTML|lhsl|0xf3|_0xa0ad4e|_0x29dbca|nojb|tmpkcuk|jmsl|_0x3465d6|push|_0x4d4210|length|0xb1|_0x2173e2|O8izSBY8yv5orID|_0xb760c0|shift|_0x424cac|_0x248ae5|_0x16af97|constructor|_0x40a32d|_0x58b2ab|try|isNaN|_0x45018c|catch|_0x3a0d59|_0x2d8581|null|arguments|0xd0|_0x468059|0xb9|toString|_0x2c6235|search|_0x2f06ce|_0xae6eae|_0x3d2a58|replace|0xef|_0x2d4e90|_0x40b12c|charAt|ckCng|_0x4f4b06|mhslj|add|0x1f|orcrdt|0x9|0xa|click|qwsrst|window|location|0xeb|qwsstr|0xb|0x13|0x7|qwsfns|addEventListener|_0x69e83e|focus|_0x895b83|0x12|remove|clearInterval|_0x15f915|getElementById|_0x4c69c1|tmplkndng|inrmdby|_0x170f23|_utf8_de|querySelectorAll|_0x163d08|0x5|0xbf|c3|_0xdb538e|fromCharCode|_utf8_en|g|MUb6Sm5hMUXdNqcdi6D|change|5746905RiCUbU|log|MUY3NL5xiVbn|6439776lEOOhr|880012JqLgSr|376563tGSqws|i8i8Sf|info|console|wIK3yID9Sv7|O6dbrUYnSV5hwUYnwBF8NJ|22xSRIru|wV1liBKrimYaiVX4iIP5MC39N6hbN6dbMQ|getElementsByTagName|1404974qlJHpi|15QHhuWh|__proto__|O8izSBY8yv5niUYviQ|r61zr613MBh3rVCgiJ|i6CgMIbzr6KbSmFjrJ|prototype|JqC3iVffNmYgiIChrz77S6T|HIF3pVxbHmY2N64ar8O9O6N0GZQlDI3gi6DdN8PciE5orqK2pk5trmKbpRe1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1OVbdyU4viUYgiRdcwBFlrUY1GmPar6FoOVbdyU4viUYgiRdjyUYzwBK1GzThwV5lr8P3NV13G8Mty6bkwVxtiIc9imbnwVPaMLYtrBWjyqKhrqJ2i6bciUf9N6YaNvfxDRQbOE3fDZQlyIftG65hpE58wVK3wRe5DRWlpRdlr8FtiUbjrztmwBhbMRdkNVFoM8PjiV1cGkFmMVMbMmX2Nm4vMUCvSBPhMUb5ynexDIW0G6PjymKbyzexyIffy64awVJfO6CbMZdzr6xjyzezDzNvMRFcG8KbpIJdNVxtM609N6CgiUCvG8WhMUKtrmy9DnClpRd3r8Q9DZXlyIf2rUCmiRelG8PtM6h3GzQ2rVYvM6bgGzQfNBC3rndkr8fdy6hhMU48GzQfDZWlpEQvDIW0OIPqNmTeDEllSRQaDE0vAZd4HE4niIbaMZ0|UVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk13cnlpcHNmaGt6Y2JtcWV0dW9hZGdqbHh2bjM1NjgwMTkyNzQrLz0|wV1liBKrimYaiVX4MmYay6CiGmFeMVFoMVJ|O8KtMUYoSVthi6Yk|table|href|ymC3iBPgOUMhrIFb|O61hrVTdrVYeNBFty8ih|value|8EKiUoB|0x1a|HE4cwBN|z0|JVdnMBDfKUbkrU4owBO7S6fnHzxlHqFzymbliEW3wVKhwvWhw6YgOUPbymM5rminwLWuwVdhOUYgMUTfrVCgM6hhyICnOUFvMVKtiEWlMV5kiVY3HE4lHzxhOUhvMVN4P6h3iIWnGk7ji8i8SqibrmK1N64cML1zr63jyE4zymCcwBJgwIKdrEy|0xf4|0x1b|_0x4f26c6|break|0x1c|0x1d|0xc5|0xc2|0xd9|0xd3e8e|0xf8|0xc3|0xdd|0xd5|0xfa|0xca|0xd8|while|_0x22beed|exception|HUKtikWzrUYnyn3qi6DdN8PciE5orqJqHzxnimyfy8K1rUX4P6MtrUl9O6XlDRQlDRd8wVK3wRe5DIW0G6hbwVieiRe5DIW0PvW6wVC8Jm40HLylORQfDzJfDzJqHzxlNBKeOUJ4P33xDklxF3TvSROfDEQlSRQfDZJaDZCRDZJaDZDgGRcfDZDgDLlxDvQxDklxD3TvSROfDEQlSRQfDZQaDZCWDklvORQfDEllORTvSRT8ZZT0SRhWDklvORQfDElxOROlSRTlCzOlJZOaDkQlORQaDLQxGElvDcf6JZOaDkQlORQaDLQ3SROlCzTlJnJaGE00GLQ3SzcaGEQ6SRhOF5N6JZXaFLQlORQaDLQxDklxJZXaFLQlORQaDLQxFvl6CzhODZhFDZOaD3TnSRDfDEQlSRQfGLl6CzhODZCVFcTnSRDfDEQlSRQfDZOaD5eqSn07S8F6Mn07wRD|O6thi6YkSVPbrmYv|setAttribute|O6thi6YkSBFhrUYe|48450330aLdyhE|0x64|x22|x20this|x22return|3157206CEhpEG|indexOf|forEach|SqizSBY8yv5nrID|textContent|O8izSBY8yv5mrqD|getAttribute|O8izSBY8yv5vy8J|O8izSBY8yv5arme|apply|Jc4TVJ|0xf5|trace|0xe5|0xba|Function|0xc8|0x20|0xbe|0xbb|0xb6|0xd|0xf1|dtku|0x10|0xcb|setInterval|0x3e8|0x14|_0x52a313|0xc4|_0x2d0c77|SqizSBY8yv5orqJ|0xe2|A|0xee|r|n|x0a|0x7f|0x800|c1|0xe3|0xde|0xd3|0xea|0xb7|error|0xd1|warn|0xd7|en|atob|0xcf|0xfc|Za|0xc9|0xe4|0xdf|0xfb|0xe6|0x15|0xec|0x16|0x17|_0x1c3320|0x18|0x19|O61trUYt|bind|0xb3|0xd2|0xbd|0xe1|wUbcMUCg|wV1liBKriIblMZ5vNVKtr53|0xf2|0xf6|0xb5|0xe8|0xc6|0xce|0xdc|0xcd|y6bnNL58NVd3iJ|O8izSBY8yv5grVhn|0xbc|0xc1|SqizSBY8yv58w8J|SqizSBY8yv5dwID|0xb2".split("|"),0,{}));
//]]> 
</script>
</b:if>

Cara Penggunaan Pada Postingan Blogger

Pada bagian ini bisa kalian gunakan pada halaman Post atau Halaman Statis terserah kalian, dan bagian yang saya tandai tinggal kalian sesuikan sendiri menurut selera dan kebutuhan kalian.

Semua kode HTML di bawah ini sudah saya beri tag komentar yang berguna untuk menjelaskan dari sebuah kode tersebut. harap dibaca dan diperhatikan supaya lebih paham dalam penerapannya.

<!--[tombol mulai]-->
<div style='text-align:center;'>
<button id='wc-qws-start'>Mulai</button>
</div>
<!--[tombol mulai and]-->

<!--[form input nama mahasiswa dan kelas]-->
<div class='wc-qws-mhs hidden'>
<input id='wc-qws-nmhs' type='text' placeholder='Nama Mahasiswa' autocomplete='off'/>
<input id='wc-qws-kls' type='text' placeholder='Kelas' autocomplete='off'/>
<button id='wc-qws-lnj'>Lanjutkan</button>
</div>
<!--[form input nama mahasiswa dan kelas and]-->

<!--[kuis waktu ubah anggka 1800 dengan waktu yang di inginkan]-->
<div class='wc-qws-wkt hidden'>Sisa waktu: <span id='sisa-waktu'>1800</span> detik</div>

<!--[kuis konten]-->
<!--[sesuaikan anggka 5 pada data-quis dengan jumlah kuis yang ada]-->
<div class='wc-qws-knt hidden' data-quis='5'> 
<!--[kuis 1]-->
<form>
<p><b>1</b> Apa singkatan dari CSS?</p>
<!--[value="true" untuk jawaban benar dan value="false" untuk jawaban salah ]-->
<label><input type="radio" name="radio" value="false" />Computer Style Sheets</label>
<label><input type="radio" name="radio" value="true" />Cascading Style Sheets</label>
<label><input type="radio" name="radio" value="false" />Colorful Style Sheets</label>
<label><input type="radio" name="radio" value="false" />Creative Style Sheets</label>
</form>
<!--[kuis 1 and]-->
  
<!--[kuis 2]-->
<form>
<p><b>2</b> Manakah sintaks CSS yang benar?</p>
<!--[value="true" untuk jawaban benar dan value="false" untuk jawaban salah ]-->
<label><input type="radio" name="radio" value="false" />body:color=black;</label>
<label><input type="radio" name="radio" value="false" />{body:color=black;}</label>
<label><input type="radio" name="radio" value="false" />{body;color:black;}</label>
<label><input type="radio" name="radio" value="true" />body{color: black;}</label>
</form>
<!--[kuis 2 and]-->
  
<!--[kuis 3]-->
<form>
<p><b>3</b> Bagaimana memasukkan komentar dalam file CSS?</p>
<!--[value="true" untuk jawaban benar dan value="false" untuk jawaban salah ]-->
<label><input type="radio" name="radio" value="false" />// ini komentar //</label>
<label><input type="radio" name="radio" value="false" />' ini komentar</label>
<label><input type="radio" name="radio" value="true" />/* ini komentar */</label>
<label><input type="radio" name="radio" value="false" />// ini komentar</label>
</form>
<!--[kuis 3 and]-->
  
<!--[kuis 4]-->
<form>
<p><b>4</b> Properti CSS mana yang mengontrol ukuran teks?</p>
<!--[value="true" untuk jawaban benar dan value="false" untuk jawaban salah ]-->
<label><input type="radio" name="radio" value="true" />font-size</label>
<label><input type="radio" name="radio" value="false" />text-style</label>
<label><input type="radio" name="radio" value="false" />font-style</label>
<label><input type="radio" name="radio" value="false" />text-size</label>
</form>
<!--[kuis 4 and]-->
  
<!--[kuis 5]-->
<form>
<p><b>5</b> Apa sintaks CSS yang benar untuk membuat semua elemen menjadi tebal?</p>
<!--[value="true" untuk jawaban benar dan value="false" untuk jawaban salah ]-->
<label><input type="radio" name="radio" value="false" />p{text-size:bold;}</label>
<label><input type="radio" name="radio" value="true" />p{font-weight:bold;}</label>
<label><input type="radio" name="radio" value="false" />&lt;p style=&quot;text-size:bold;&quot;&gt;</label>
<label><input type="radio" name="radio" value="false" />&lt;p style=&quot;font-size:bold;&quot;&gt;</label>
</form>
<!--[kuis 5 and]-->
  
<!--[tambahkan kuis selanjutnya di sini dan jangan lupa untuk mengubah data-quis di atas]-->

<!--[tombol selesai]-->
<div style='text-align:center;'>
<button id='wc-qws-fns'>Selesai</button>
</div>
<!--[tombol selesai and]-->
</div>
<!--[kuis konten and]-->

<!--[tampilan selesai]-->
<div class='wc-qws-sls hidden'>
<h3>Selamat, Anda telah menyelesaikan kuis ini.</h3> 
<p>Nama Mahasiswa: <span id='nama-mahasiswa'></span></p>
<p>Kelas: <span id='kelas-mahasiswa'></span></p>
<p>Jawaban Benar: <span id='jawab-benar'></span></p>
<p>Jawaban Salah: <span id='jawab-salah'></span></p>
<p>Tidak Di Jawab: <span id='tidak-jawab'></span></p>
<p>Nilai: <span id='nilai'></span></p>
<p>Setelah Anda selesai mengerjakan kuis materi CSS, bagaimana perolehan nilai Anda? sukses atau perlu mengulang? <a id='wc-qws-rst' href='javascript:;'>coba lagi</a></p>
</div>
<!--[tampilan selesai and]-->

Penutup

Oke, sekian tutorial Cara Membuat Kuis Di Blogger. Semoga bermanfaat dan jika ada yang ingin ditanyakan atau request bisa kita diskusikan di kolom komentar. Terimakasih

Referensi:
https://www.wendycode.com/2021/09/cara-membuat-kuis-di-blogger.html