Hello all on this occasion I will share how to create a quiz on blogger with html, css and javascript.
This tutorial is reguest by a member of my whatsapp group, Mas Aan Triono , for those of you who want to regulate the tutorial, you can comment on one of my articles or forums or you can also join the whatsapp group.
and I'm sorry I can't fulfill all of the regulations, I will only make regulations if I think it's interesting enough, so if I haven't responded to your regulations, please be patient.
Furthermore, this quiz widget is perfect for those of you who have an educational niche blog, but that doesn't mean it's not suitable for other niches.
for other niches, if you want to make a quiz like this, you can count it for entertainment for our blog visitors.
for the demo, please click the button below, ok for those of you who want to try it, let's see how.
How to Make a Quiz on Blogger
please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>
/* widget quiz by Blogger Store */
.bs-qbs-mhs,.bs-qbs-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}
.bs-qbs-mhs.hidden,.bs-qbs-sls.hidden,#bs-qbs-start.hidden,.bs-qbs-knt.hidden,.bs-qbs-wkt.hidden,#bsqbs-made-by{visibility:hidden;opacity:0}
.bs-qbs-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}
.bs-qbs-mhs input[type=text]:focus,.blogContent .widget input[type=text]:focus{border-color:#f89000!important}
.bs-qbs-mhs input[type=text]::-webkit-input-placeholder{color:#a5a5a5;font-size:14px}
button#bs-qbs-lnj,button#bs-qbs-start,button#bs-qbs-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#bs-qbs-start,button#bs-qbs-fns{margin-top:25px}
@media screen and (min-width:500px){button#bs-qbs-start,button#bs-qbs-fns{max-width:300px}}
.bs-qbs-sls h3{text-align:center;font-size:17px}
.bs-qbs-sls p{font-size:15px;margin:5px auto}
.bs-qbs-sls p:last-child{font-size:13px;line-height:1.5em;margin-top:15px;font-style:italic;opacity:.8}
.bs-qbs-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}
.bs-qbs-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}
.bs-qbs-knt input:checked{background-color:#f89000}
.bs-qbs-knt label:hover{background-color:#ddd}
.bs-qbs-knt input{margin-right:10px}
.bs-qbs-knt b{padding:0 6px;border-radius:50%;border:5px solid rgba(255,219,158);color:#f89000;margin-right:5px}
.bs-qbs-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 .bs-qbs-mhs,.darkMode .bs-qbs-mhs input[type=text],.darkMode .bs-qbs-knt label,.darkMode .bs-qbs-mhs,.darkMode .bs-qbs-sls{background-color:#2d2d30;color:#fefefe}
.darkMode .bs-qbs-mhs input[type=text]{border-color:rgba(255,255,255,.1)}then copy the javascript below and place it above the code </body> or <!--</body>--></body> if you have don't forget to click save.
<b:if cond='data:view.isSingleItem and !data:view.isPreview'>
<!--[the script doesn't work if you remove the creator credit || the script doesn't work if you remove the creator credit]-->
<div class='made-by-bs' style='display:none;'>https://www.Blogger-store.com</div>
<script>
//<![CDATA[
// widget quiz by Blogger Store 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,"bs|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|qbsrst|window|location|0xeb|qbsstr|0xb|0x13|0x7|qbsfns|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|376563tGSqbs|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>How to use
In this section you can choose to put it in a free static post or page, and the part I marked you can adjust as needed.
I have tagged all the html functions below to explain the function of a function, so please read it to understand its use.
<!--[start button]-->
<div style='text-align:center;'>
<button id='bs-qbs-start'>Mulai</button>
</div>
<!--[start button and]-->
<!--[form Enter the name of the student and class]-->
<div class='bs-qbs-mhs hidden'>
<input id='bs-qbs-nmhs' type='text' placeholder='Nama Mahasiswa' autocomplete='off'/>
<input id='bs-qbs-kls' type='text' placeholder='Kelas' autocomplete='off'/>
<button id='bs-qbs-lnj'>Lanjutkan</button>
</div>
<!--[form Enter the name of the student and class and]-->
<!--[quiz time change the number 1800 with the time you want]-->
<div class='bs-qbs-wkt hidden'>Sisa waktu: <span id='sisa-waktu'>1800</span> detik</div>
<!--[quiz content]-->
<!--[adjust the number 5 on the quiz data with the number of existing quizzes]-->
<div class='bs-qbs-knt hidden' data-quis='5'>
<!--[quiz 1]-->
<form>
<p><b>1</b> Apa singkatan dari CSS?</p>
<!--[value="true" for correct answer and value="false" for wrong answer ]-->
<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>
<!--[quiz 1 and]-->
<!--[quiz 2]-->
<form>
<p><b>2</b> Manakah sintaks CSS yang benar?</p>
<!--[value="true" for correct answer and value="false" for wrong answer ]-->
<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>
<!--[quiz 2 and]-->
<!--[quiz 3]-->
<form>
<p><b>3</b> Bagaimana memasukkan komentar dalam file CSS?</p>
<!--[value="true" for correct answer and value="false" for wrong answer ]-->
<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>
<!--[quiz 3 and]-->
<!--[quiz 4]-->
<form>
<p><b>4</b> Properti CSS mana yang mengontrol ukuran teks?</p>
<!--[value="true" for correct answer and value="false" for wrong answer ]-->
<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>
<!--[quiz 4 and]-->
<!--[quiz 5]-->
<form>
<p><b>5</b> Apa sintaks CSS yang benar untuk membuat semua elemen menjadi tebal?</p>
<!--[value="true" for correct answer and value="false" for wrong answer ]-->
<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" /><p style="text-size:bold;"></label>
<label><input type="radio" name="radio" value="false" /><p style="font-size:bold;"></label>
</form>
<!--[quiz 5 and]-->
<!--[add the next quiz here and don't forget to change the data-quis above]-->
<!--[done button]-->
<div style='text-align:center;'>
<button id='bs-qbs-fns'>Selesai</button>
</div>
<!--[done button and]-->
</div>
<!--[quiz content and]-->
<!--[finished view]-->
<div class='bs-qbs-sls hidden'>
<h3>Selamat, Anda telah menyelesaikan quiz 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 quiz materi CSS, bagaimana perolehan nilai Anda? sukses atau perlu mengulang? <a id='bs-qbs-rst' href='javascript:;'>coba lagi</a></p>
</div>
<!--[finished view and]-->ok so that 's how to make a quiz on blogger that I can share this time, hopefully it's useful and thank you for visiting.
inspiration : https://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS
Tags:
Blogger Widgets
