bergabung di grup telegram kami

cara membuat kuis di blogger

cara membuat kuis di blogger
membuat kuis di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat kuis di blogger dengan html css dan javascript.

tutorial ini di reguest oleh member grup whatsapp saya yaitu mas Aan Triono bagi kalian yang mau reguest tutorial bisa komentar ke salah satu artikel saya maupun forum atau kalian juga bisa join ke grup whatsapp.

dan mohon maaf tidak smua reguest bisa saya penuhi, saya hanya akan membuat reguestan jika saya rasa itu cukup menarik, jadi jika reguestan kalian belum saya respon ya mohon bersabar saja.

lanjut, widget kuis ini sangat cocok sekali bagi kalian yang memiliki blog berniche pendidikan, namun bukan bearti tidak cocok untuk niche lain.

untuk niche lain juga bisa2 aja jika ingin membuat kuis seperti ini, hitung2 bisa untuk hiburan untuk pengunjung blog kita.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Cara Membuat Kuis Di Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

/* widget kuis by wendy code */
.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)}

lanjut salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk 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 wendy code 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

bagian ini kalian bisa memilih untuk meletakkanya di postingan atau halaman statis bebas aja, dan bagian yang saya tandai bisa kalian sesuaikan sesuai kebutuhan.

semua fungsi html di bawah ini sudah saya beri tag komentar untuk mengjelaskan dari sebuah fungsi, jadi mohon di baca agar paham penggunaannya.

<!--[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]-->

ok jadi sekian cara membuat kuis di blogger yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

inspirasi : https://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS

Baca juga :

10 komentar



image quote pre code
  1. Terima kasih mas Wendy. Mohon izin menggunakannya 🙏.
    1. Sama2 ya mas
  2. mas, kalau bikin soal yang setelah dijawab ada pembahasannya bisa? trus kuisnya bisa di-hide dlu gtu.
    seperti yg ada di wardayacollege dot com. cek ya mas please...
    saya banyak belajar nih dari wendycode.
    terimakasih banyak ilmunya mas.
  3. terimakasih atas ilmu.
    saya juga ingin request seperti di komen sebelumnya. bagaimana caranya membuat soal kemudian dibawahnya ada pembahasannya namun pembahasan tersebut di hide. jadi siswa bisa mencoba terlebih dahulu tanpa melihat jawabannya. kemudian nanti ada tombol yang dapat membuka pembahsan tersebut.
  4. Update lagi kak htmlnya supaya ketika sudah mengerjakan itu kelihatan soal mana saja yang salahnnya supaya bisa terlihat juga salahnnya. terimkasih kak
  5. Terimakasih mas, sudah saya aplikasikan di blog saya www,maxikhsa,my,id dan hasilnya bagus. Request dong mas, kalau bisa user login pake email, terus setelah selesai resultnya masuk ke email admin. Terima kasih
  6. Ini nanti nilainya keluar dimana mas? apakah seperti google form?
    1. bukan, tidak ada data yang di simpan
  7. Terima kasih bget Mas wendy, tutorialnya sangat bermanfaat.

    tapi kalau ingin, jawabannya teracak otomatis susunanya bisa gk ya mas?
    1. Tidak bisa
© 2020 - Wendy Code