"Multiple Choice Quiz (Version 1.0)"
Bootstrap 3.3.0 Snippet by dataweby

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"><br> <span class="image-position"><a href="https://www.facebook.com/meuix/?ref=settings" target="_blank"> <img src="https://lh4.googleusercontent.com/fLEIj3iQb7O1FhjOpLFbJtHmsMlLGmLynSWUvAP70qF0HLEBty-FANvwweg7Sv2XqSpzOKNI=w1366-h638"></a> </span> </div> <div class="row"><br><br> <div class="col-sm-8 col-sm-offset-2"> <div class="loader"> <div class="col-xs-3 col-xs-offset-5"> <div id="loadbar" style="display: none;"> <img src="https://8finatics.s3.amazonaws.com/static/reload_emi.gif" alt="Loading" class="center-block loanParamsLoader" style=""> </div> </div> <div id="quiz"> <div class="question"> <h3><span class="label label-warning" id="qid">1</span> <span id="question"> How can you add a single line comment in a JavaScript?</span> </h3> </div> <ul> <li> <input type="radio" id="f-option" name="selector" value="1"> <label for="f-option" class="element-animation">/*-- comment --*/</label> <div class="check"></div> </li> <li> <input type="radio" id="s-option" name="selector" value="2"> <label for="s-option" class="element-animation">comment //</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="t-option" name="selector" value="3"> <label for="t-option" class="element-animation">comment [ ]</label> <div class="check"><div class="inside"></div></div> </li> </ul> </div> </div> <div class="text-muted"> <span id="answer"></span> </div> </div> </div> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div id="result-of-question" class="pulse animated" style="display: none;"> <span id="totalCorrect" class="pull-right"></span> <table class="table table-hover table-responsive" > <thead> <tr> <th>Question No.</th> <th>Our answer</th> <th>Your answer</th> <th>Result</th> </tr> </thead> <tbody id="quizResult"></tbody> </table> </div> </div> </div> </div>
body, html{ height: 100%; background: #222222; font-family: 'Lato', sans-serif; } .image-position{ position: absolute; left: 3%; } .image-position img{ width: 70%; } .center-block{ width: 100%; } h2 { color: #AAAAAA; font-weight: normal; } .bg-for-submit-name { background: url('https://lh4.ggpht.com/GLT1kYMvi4oiguL9FOc1eM5q7sW0AvVJNWyBZ26iMq-BSm3Kpi9CPDR2UGoVlYrVwA=h900') fixed; background-size: cover; padding: 0; margin: 0; } .margin-top{ margin-top: 270px; } .wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } p.form-title { font-family: 'Open Sans' , sans-serif; font-size: 20px; font-weight: 600; text-align: center; color: #FFFFFF; margin-top: 5%; text-transform: uppercase; letter-spacing: 4px; } form { width: 250px; margin: 0 auto; } form.login input[type="text"], form.login input[type="password"] { width: 100%; margin: 0; padding: 5px 10px; background: #fff; border: 0; border-bottom: 3px solid #75ba48; outline: 0; font-size: 15px; font-weight: 400; letter-spacing: 1px; margin-bottom: 10px; color: #000; outline: 0; } form.login input[type="submit"] { width: 100%; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 16px; outline: 0; cursor: pointer; letter-spacing: 1px; } form.login input[type="submit"]:hover { transition: background-color 0.5s ease; } .btn-success { color: #fff; background-color: #75ba48; border-color: #75ba48; width: 100%; /* font-weight: 600 !important; */ padding: 7px 10px; font-size: 15px !important; border-radius: 0px; word-spacing: 4px; letter-spacing: 1px; } .btn-success:hover { color: #fff !important; background-color: #2FC0AE !important; border-color: #2FC0AE !important; } form.login label, form.login a { font-size: 12px; font-weight: 400; color: #FFFFFF; } form.login a { transition: color 0.5s ease; } form.login a:hover { color: #2ecc71; } .pr-wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 999; display: none; } .show-pass-reset { display: block !important; } .pass-reset { margin: 0 auto; width: 250px; position: relative; margin-top: 22%; z-index: 999; background: #FFFFFF; padding: 20px 15px; } .pass-reset label { font-size: 12px; font-weight: 400; margin-bottom: 15px; } .pass-reset input[type="email"] { width: 100%; margin: 5px 0 0 0; padding: 5px 10px; background: 0; border: 0; border-bottom: 1px solid #000000; outline: 0; font-style: italic; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; color: #000000; outline: 0; } .pass-reset input[type="submit"] { width: 100%; border: 0; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 10px; outline: 0; cursor: pointer; letter-spacing: 1px; } /*----------quiz.css---------------*/ .loanParamsLoader { top: 143px; margin: auto; position: absolute; right: 17%; width: 135%; } .question{ background: #75ba48; padding: 20px; color: #fff; border-bottom-right-radius: 55px; border-top-left-radius: 55px; } #qid{ margin-right: 22px; background-color: #ffffff; color: #aaaaaa; } .container ul{ list-style: none; margin: 0; padding: 0; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #111111; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 25px 25px 25px 80px; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #FFFFFF; } ul li .check{ display: block; position: absolute; border: 5px solid #AAAAAA; border-radius: 100%; height: 30px; width: 30px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #FFFFFF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 14px; width: 14px; top: 3px; left: 3px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #00FF00; } input[type=radio]:checked ~ .check::before{ background: #00FF00;/*attr('data-background');*/ } input[type=radio]:checked ~ label{ color: #00FF00; } #result-of-question th{ text-align: center; background: #75ba48; color: #fff; padding: 18px; font-size: 18px; border: none; } #result-of-question td{ text-align: center; color: #222; background-color: #fff; padding: 18px; font-size: 15px; font-weight: 600; border: 1px solid #75ba48; } #totalCorrect{ color: #fff; background: #75ba48; padding: 22px 20px; border-radius: 1px; font-stretch: expanded; font-size: 28px; font-weight: bold; border-top-right-radius: 25px; border-top-left-radius: 25px; } #alert{ /* Position fixed */ position:fixed; /* Center it! */ top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } /*----------riple bubble-----------------*/ ul { margin: 0 auto; } /*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/ .ink { display: inline; position: absolute; background: #75ba48; border-radius: 100%; transform: scale(0); } /*animation effect*/ .ink.animate {animation: ripple 0.65s linear;} @keyframes ripple { /*scale the element to 250% to safely cover the entire link and fade it out*/ 100% {opacity: 0; transform: scale(2.5);} }
/*--------loader script-----------*/ $(function(){ var loading = $('#loadbar').hide(); $(document) .ajaxStart(function () { loading.show(); }).ajaxStop(function () { loading.hide(); }); var questionNo = 0; var correctCount = 0; var q = [ {'Q':'How do you write "Hello World" in an alert box?', 'A':2,'C':['msg("Hello World");','alert("Hello World");','alertBox("Hello World");']}, {'Q':'How do you create a function in JavaScript?', 'A':3,'C':['function:myFunction()','function = myFunction()','function myFunction()']}, {'Q':'How to write an IF statement in JavaScript?', 'A':1,'C':['if (i == 5)','if i = 5 then','if i == 5 then']}, {'Q':'How does a FOR loop start?', 'A':2,'C':['for (i = 0; i <= 5)','for (i = 0; i <= 5; i++)','for i = 1 to 5']}, {'Q':'What is the correct way to write a JavaScript array?', 'A':3,'C':['var colors = "red", "green", "blue"','var colors = (1:"red", 2:"green", 3:"blue")','var colors = ["red", "green", "blue"]']} ]; $(document.body).on('click',"label.element-animation",function (e) { //ripple start var parent, ink, d, x, y; parent = $(this); if(parent.find(".ink").length == 0) parent.prepend("<span class='ink'></span>"); ink = parent.find(".ink"); ink.removeClass("animate"); if(!ink.height() && !ink.width()) { d = Math.max(parent.outerWidth(), parent.outerHeight()); ink.css({height: "100px", width: "100px"}); } x = e.pageX - parent.offset().left - ink.width()/2; y = e.pageY - parent.offset().top - ink.height()/2; ink.css({top: y+'px', left: x+'px'}).addClass("animate"); //ripple end var choice = $(this).parent().find('input:radio').val(); console.log(choice); var anscheck = $(this).checking(questionNo, choice);//$( "#answer" ).html( ); q[questionNo].UC = choice; if(anscheck){ correctCount++; q[questionNo].result = "Correct"; } else { q[questionNo].result = "Incorrect"; } console.log("CorrectCount:" + correctCount); setTimeout(function(){ $('#loadbar').show(); $('#quiz').fadeOut(); questionNo++; if((questionNo + 1) > q.length){ alert("Quiz completed, Now click ok to get your answer"); $('label.element-animation').unbind('click'); setTimeout(function(){ var toAppend = ''; $.each(q, function(i, a){ toAppend += '<tr>' toAppend += '<td>'+(i+1)+'</td>'; toAppend += '<td>'+a.A+'</td>'; toAppend += '<td>'+a.UC+'</td>'; toAppend += '<td>'+a.result+'</td>'; toAppend += '</tr>' }); $('#quizResult').html(toAppend); $('#totalCorrect').html("Total correct: " + correctCount); $('#quizResult').show(); $('#loadbar').fadeOut(); $('#result-of-question').show(); $('#graph-result').show(); chartMake(); }, 1000); } else { $('#qid').html(questionNo + 1); $('input:radio').prop('checked', false); setTimeout(function(){ $('#quiz').show(); $('#loadbar').fadeOut(); }, 1500); $('#question').html(q[questionNo].Q); $($('#f-option').parent().find('label')).html(q[questionNo].C[0]); $($('#s-option').parent().find('label')).html(q[questionNo].C[1]); $($('#t-option').parent().find('label')).html(q[questionNo].C[2]); } }, 1000); }); $.fn.checking = function(qstn, ck) { var ans = q[questionNo].A; if (ck != ans) return false; else return true; }; // chartMake(); function chartMake(){ var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "dark", "dataProvider": [{ "name": "Correct", "points": correctCount, "color": "#00FF00", "bullet": "http://i2.wp.com/img2.wikia.nocookie.net/__cb20131006005440/strategy-empires/images/8/8e/Check_mark_green.png?w=250" }, { "name": "Incorrect", "points":q.length-correctCount, "color": "red", "bullet": "http://4vector.com/i/free-vector-x-wrong-cross-no-clip-art_103115_X_Wrong_Cross_No_clip_art_medium.png" }], "valueAxes": [{ "maximum": q.length, "minimum": 0, "axisAlpha": 0, "dashLength": 4, "position": "left" }], "startDuration": 1, "graphs": [{ "balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>", "bulletOffset": 10, "bulletSize": 52, "colorField": "color", "cornerRadiusTop": 8, "customBulletField": "bullet", "fillAlphas": 0.8, "lineAlpha": 0, "type": "column", "valueField": "points" }], "marginTop": 0, "marginRight": 0, "marginLeft": 0, "marginBottom": 0, "autoMargins": false, "categoryField": "name", "categoryAxis": { "axisAlpha": 0, "gridAlpha": 0, "inside": true, "tickLength": 0 } }); } });

Related: See More


Questions / Comments: