"quizwaaa"
Bootstrap 4.1.1 Snippet by ravic9089

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" href="css/style.css"> <style> #tabs .nav-tabs .nav-link { font-size: 12px; } .nav-fill .nav-item{ text-align: left; } </style> <style> .counter { width: 50px; height: 50px; background-color: red; text-align: center; border-radius: 50%; border: 2px solid #fff; margin: 0 auto; margin-top:5px; font-size: 16px; font-weight: 700; color: #fff; padding-top: 13px; } .container2{ width:100%; height:390px; margin:5px auto; /*background:radial-gradient(#6F73D3,#1A1C52);*/ } .question{ width: 100%; height: 87px; padding-top: 25px; padding-left: 8px; display: inline-block; } .question-box{ width:300px; height:auto; color:white; font-size:15px; font-weight:500; text-align:center; display:inline-block; /*background-color: #222465 ;*/ background: radial-gradient(#968b9ea8,#6f2ba5a6); position:relative; padding:22px 5px; border-top:3px solid #e8a70d; border-bottom:3px solid #e8a70d; box-sizing: border-box; } .question-box .hin{ font-size:14px; } .triangle-left{ width:0; height:0; display:inline-block; float:left; border-top:30px solid transparent; border-right:40px solid yellow; border-bottom:30px solid transparent; position:relative; } .trianle-left-empty{ width:0; height:0; position:absolute; left:4px; top:-27px; border-top:27px solid transparent; border-right:36px solid #222465 ; border-bottom:27px solid transparent; } .triangle-right{ width:0; height:0; display:inline-block; border-top:30px solid transparent; border-left:40px solid yellow; border-bottom:30px solid transparent; position:relative; float:right; display:inline-block; } .trianle-right-empty{ width:0; height:0; position:absolute; right:5px; top:-27px; border-top:27px solid transparent; border-left:36px solid #222465; border-bottom:27px solid transparent; } .answer { width: 240px; height: 35px; display: inline-block; margin-left: 40px; margin-top: 7px; } .answer-box{ width:200px; height:30px; color:white; font-size:13px; font-style: text-align:left; display:inline-block; /*background-color:#2F3280;*/ background:radial-gradient(#5a5ec3,#1A1C52); position:relative; border-top:1px solid #fff; border-bottom:1px solid #fff; box-sizing: border-box; cursor:pointer; } .ans-triangle-left{ width:0; height:0; display:inline-block; float:left; border-top:15px solid transparent; border-right:20px solid #fff; border-bottom:15px solid transparent; position:relative; } .ans-trianle-left-empty{ width:0; height:0; position:absolute; left:2px; top:-14px; border-top:14px solid transparent; border-right:18px solid #2F3280; border-bottom:14px solid transparent; } .ans-triangle-right{ width:0; height:0; display:inline-block; border-top:15px solid transparent; border-left:20px solid yellow; border-bottom:15px solid transparent; position:relative; float:right; display:inline-block; } .ans-trianle-right-empty{ width:0; height:0; position:absolute; right:2px; top:-14px; border-top:14px solid transparent; border-left:18px solid #2F3280; border-bottom:14px solid transparent; } .qline-left{ width:58px; display:inline-block; height:4px; background:yellow; position:relative; bottom:8px; right:-6px; border:none; } .qline-right{ width:58px; display:inline-block; height:4px; background:yellow; position:relative; bottom:8px; right:2px; border:none } .aline-left{ width:58px; display:inline-block; height:2px; background:yellow; position:relative; bottom:0px; top:7px; right:-6px; border:none; } .aline-right{ width:54px; display:inline-block; height:2px; background:yellow; position:relative; bottom:0px; top:7px; right:1px; border:none; } .right-answer-c{ background:#0FCD2C; } .right-answer-b{ border-right-color:#0FCD2C; border-left-color:#0FCD2C; } .wrong-answer-c{ background:#F12514; } .wrong-answer-b{ border-right-color:#F12514; border-left-color:#F12514; } .tag1{ font-size:18px; font-weight:600; } p { margin-top: 0; margin-bottom: .2rem; } .ques-myy{ text-align:center; } .ques-myy { /* text-align: center; */ padding-left:3px; font-size: 12px; font-weight: 600; /* margin: auto; */ } </style> <style> .box-1 { width: 100px; border: 1px solid #ddd; border-radius: 12px; margin-top: 27px; /* background-color: gray; */ background: radial-gradient(#6F73D3,#1A1C52); } .pagination-contain{ margin-top:17px; } .pagination{ list-style:none; margin-left:0px; } .pagination li{ display:inline-block; margin:0px 1px; } .circle { height:15px; width: 15px; display: table-cell; text-align: center; vertical-align: middle; border-radius: 50%; /* may require vendor prefixes */ background:red; border:1px solid #f6f6f6; font-size:8px; color:#fff; } .circle:hover{ width:18px; height:18px; font-size:9px; } span.circle.active{ width:16px; height:16px; font-size:9px; } .ans-triangle-left:before{ content: ""; position: absolute; height: 5px; border-bottom: 2px solid #fff; top: -4px; left: -42px; width: 43px; } .ans-triangle-right:after { content: ""; position: absolute; height: 5px; border-bottom: 2px solid #fff; top: -4px; left: -1px; width: 43px; } .tab-me { background-color: #c10505; text-align: center; color: #fff; font-size: 20px; width: 100%; padding: 4px; } .btn-primary2{ background: radial-gradient(#6F73D3,#1A1C52); } </style> </head> <body class="hm-gradient"> <main> <div class="container mt-4"> <div class="row"> <div class="col-6 text-white text-center float-right"> <div class="box-1 float-right">10 <span class="float-right text-warning"><i class="fa fa-diamond"></i> </span>  </div> </div> <div class="col-6 text-white text-center "> <div class="box-1 float-left">100000 <span class="float-right fa-1x text-warning"><i class="fa fa-diamond"></i> </span></div> </div> </div> <div class="clearfix"></div> <div class="pagination-contain"> <ul class="pagination"> <li><a href="#"><span class="circle active">1</span></a></li> <li><a href="#"><span class="circle">2</span></a></li> <li><a href="#"><span class="circle">3</span></a></li> <li><a href="#"><span class="circle">4</span></a></li> <li><a href="#"><span class="circle">5</span></a></li> <li><a href="#"><span class="circle">6</span></a></li> <li><a href="#"><span class="circle">7</span></a></li> <li><a href="#"><span class="circle">8</span></a></li> <li><a href="#"><span class="circle">9</span></a></li> <li><a href="#"><span class="circle">10</span></a></li> <li><a href="#"><span class="circle">11</span></a></li> <li><a href="#"><span class="circle">12</span></a></li> <li><a href="#"><span class="circle">13</span></a></li> <li><a href="#"><span class="circle">14</span></a></li> <li><a href="#"><span class="circle">15</span></a></li> <li><a href="#"><span class="circle">16</span></a></li> <li><a href="#"><span class="circle">17</span></a></li> <li><a href="#"><span class="circle">18</span></a></li> <li><a href="#"><span class="circle">19</span></a></li> <li><a href="#"><span class="circle">20</span></a></li> </ul> </div> <div class="row justify-content-center align-items-center"> <div class="counter "> <span id="timer"></span> </div> </div> <div class="container2"> <!--<hr class="qline-left">--> <div class="question"> <div class="question-box"> <p>Who has been appointed as the new prime minister of Romania?</p> <p class="hin"> रोमानिया के नए प्रधानमंत्री के रूप में किसे नियुक्त किया गया है?</p> </div> <!--<div class="triangle-left"> <div class="trianle-left-empty"></div> </div> <div class="triangle-right"> <div class="trianle-right-empty"></div> </div>--> </div> <!-- <hr class="qline-right">--> <br><br><br> <!--<hr class="aline-left">--> <div class="answer"> <a href="#"><div class="answer-box"> <span class="text-warning tag1">A</span>:<span class="ques-myy"><span>Darvin kumar</span> <span> डार्विन कुमार</span> </span> </div></a> <div class="ans-triangle-left"> <div class="ans-trianle-left-empty"></div> </div> <div class="ans-triangle-right"> <div class="ans-trianle-right-empty"></div> </div> </div> <div class="answer"> <a href="#"><div class="answer-box"> <span class="text-warning tag1">B</span>: <span class="ques-myy"><span>Darvin kumar</span> <span> डार्विन कुमार</span> </span> </div></a> <div class="ans-triangle-left"> <div class="ans-trianle-left-empty"></div> </div> <div class="ans-triangle-right"> <div class="ans-trianle-right-empty"></div> </div> </div> <!-- <hr class="aline-right"> <hr class="aline-left">--> <div class="answer"> <a href="#"> <div class="answer-box"> <span class="text-warning tag1">C</span>: <span class="ques-myy"><span>Darvin kumar</span> <span> डार्विन कुमार</span> </span> </div> </a> <div class="ans-triangle-left"> <div class="ans-trianle-left-empty"></div> </div> <div class="ans-triangle-right"> <div class="ans-trianle-right-empty"></div> </div> </div> <div class="answer"> <a href="#"> <div class="answer-box"> <span class="text-warning tag1">D</span>: <span class="ques-myy"><span>Darvin kumar</span> <span> डार्विन कुमार</span> </span> </div> </a> <div class="ans-triangle-left"> <div class="ans-trianle-left-empty"></div> </div> <div class="ans-triangle-right"> <div class="ans-trianle-right-empty"></div> </div> </div> <!--<hr class="aline-right">--> <center><button class="btn btn-primary2 btn-md">Next</button></center> </div> <br/><br/> </div> </div> </main> <div class="footer-fixed"> </div> <!-- JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script> $(document).ready(function() { $(".question-box").after.addClass(); }); $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> <script> document.getElementById('timer').innerHTML = 1 + ":" + 00; startTimer(); function startTimer() { var presentTime = document.getElementById('timer').innerHTML; var timeArray = presentTime.split(/[:]+/); var m = timeArray[0]; var s = checkSecond((timeArray[1] - 1)); if(s==59){m=m-1} //if(m<0){alert('timer completed')} document.getElementById('timer').innerHTML = m + ":" + s; console.log(m) setTimeout(startTimer, 1000); } function checkSecond(sec) { if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10 if (sec < 0) {sec = "59"}; return sec; } </script> <script> /* this javascript is only to change the "actpage" attribut on the .cdp div */ window.onload = function(){ var paginationPage = parseInt($('.cdp').attr('actpage'), 10); $('.cdp_i').on('click', function(){ var go = $(this).attr('href').replace('#!', ''); if (go === '+1') { paginationPage++; } else if (go === '-1') { paginationPage--; }else{ paginationPage = parseInt(go, 10); } $('.cdp').attr('actpage', paginationPage); }); }; </script> </body> </html>

Related: See More

Vuetify Material Dashboard

Questions / Comments: