< >

frage-antwort-spiel-mit-css.php


Quell Code


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
  
  *{
    margin:0px;
    padding:0px;
}

div.quiz-content{
    color:#444444;
    font-size:13px;
    font-family:"Century Gothic", Helvetica, sans-serif;
    text-align:center;
    width:600px;
    position:relative;
    height:100%;
    margin: 20px auto 20px auto; /* centered */
}

div.quiz-wrapper{
    width:600px;
    overflow:hidden;
	opacity: 0.9;
    background: #fff;
    border-radius: 4px;
    color: #7e7975;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.2),
        0 1px 5px rgba(0,0,0,0.2),
        0 0 0 12px rgba(255,255,255,0.4);
}

.progress-container {
    background-color: #3DAEE3;
	width: 600px;
	height: 30px;
	padding: 10px 20px 0px 20px;
}

.progress-container .progress {
	width: 0;
	height: 10px;
	color: #4c4c4c;
	background: #fff;
	content: "";
	background-image:
	   -webkit-gradient(linear, 0 0, 100% 100%,
	      color-stop(.25, rgba(255, 255, 255, .2)),
	      color-stop(.25, transparent), color-stop(.5, transparent),
	      color-stop(.5, rgba(255, 255, 255, .2)),
	      color-stop(.75, rgba(255, 255, 255, .2)),
	      color-stop(.75, transparent), to(transparent)
	   );
	background-image: -webkit-linear-gradient(-45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent);
	background-image:
		-moz-linear-gradient(
		  -45deg,
	      rgba(255, 255, 255, .2) 25%,
	      transparent 25%,
	      transparent 50%,
	      rgba(255, 255, 255, .2) 50%,
	      rgba(255, 255, 255, .2) 75%,
	      transparent 75%,
	      transparent
	   );
	background-image:
		-ms-linear-gradient(
		  -45deg,
	      rgba(255, 255, 255, .2) 25%,
	      transparent 25%,
	      transparent 50%,
	      rgba(255, 255, 255, .2) 50%,
	      rgba(255, 255, 255, .2) 75%,
	      transparent 75%,
	      transparent
	   );
	background-image:
		-o-linear-gradient(
		  -45deg,
	      rgba(255, 255, 255, .2) 25%,
	      transparent 25%,
	      transparent 50%,
	      rgba(255, 255, 255, .2) 50%,
	      rgba(255, 255, 255, .2) 75%,
	      transparent 75%,
	      transparent
	   );

	-webkit-background-size: 50px 50px;
	-moz-background-size:    50px 50px;
	background-size:         50px 50px;
	-webkit-animation: move 2s linear infinite;
	   -webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	       -moz-border-radius-topright: 20px;
	    -moz-border-radius-bottomright: 20px;
	           border-top-right-radius: 20px;
	        border-bottom-right-radius: 20px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
}


div.steps{
    width:600px;
    /*margin-top:40px;*/
    overflow:hidden;
}
.step{
    float:left;
    width:600px;
    /*height:320px;*/
}
div.steps form fieldset{
    /*background: url('../img/bg.gif');*/
    border:none;
    padding-bottom:20px;
	min-height: 200px;
}

div.steps form .resultset,
div.steps form legend{
	background: #3DAEE3;
    text-align:left;
    color:#fff;
    font-size:22px;
    font-weight:bold;
    float:left;
    width:100%;
    padding:5px 0px 10px 10px;
    margin:10px 0px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
    text-shadow: 0px 0px 1px rgba(0,0,0,.4);
    font-family: "Trebuchet MS", sans-serif;
}
div.steps form .resultset{
	background: none;
    text-align:center;
}
div.steps form .resultset a.active{
    text-decoration: underline;
	font-style: italic;
}

div.steps h3{
    background-color:transparent;
    text-align:center;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
    color:#666;
    width:100%;
    padding:5px 0px 0px 10px;
    font-size:22px;
}

div.steps h3.skill{
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
    background-color:#595959;
    text-align:center;
    text-shadow:1px 0px 0px #fff;
    font-weight:bold;
    color:#fff;
    width:100%;
    padding:10px;
    font-size:22px;
}

div.steps form div.the-answer,
div.steps form p{
    cursor:pointer;
    text-align:left;
    float:left;
    clear:both;
    margin:5px 0px;
    background-color:#f4f4f4;
    width:420px;
    padding:10px;
    margin-left:80px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border:2px solid #aaa;
	color: #000;
	-moz-box-shadow: 0 0 2px 2px #f4f4f4;
	-webkit-box-shadow: 0 0 2px 2px #f4f4f4;
	box-shadow: 0 0 2px 2px #f4f4f4;
}

/*div.steps form p.selected:hover,*/
div.steps form p.selected:active,
div.steps form p.selected.active,
div.steps form p.selected.disabled,
div.steps form p.selected[disabled] {
  background-color: #2f96b4;
  *background-color: #2a85a0;
}

div.steps form div.the-answer-selected, div.steps form p.selected, div.steps form p.right {
	background: #005375;
	border: 2px solid white;
	border-radius: 7px;
	color: white;
	-moz-box-shadow: 0 0 2px 2px #888;
	-webkit-box-shadow: 0 0 2px 2px #888;
	box-shadow: 0 0 2px 2px #888;
}
div.steps form div.the-answer,
div.steps form div.the-answer-selected{
	position: relative;
	overflow: hidden;
}
div.steps form p.right:hover {

}

div.steps form p.wrong{
    color: #FFFFFF;
    background-color: #da4f49;
}
div.steps form p.wrong:hover {
	background-color:#da4f49;
}

div.steps form .final-result{
    display:none;
}
div.steps form #your-score{
    display:block;
}
#quiz-notice{
    color: #FF0000;
    text-align:center;
    display:none;
    padding-bottom: 10px;
}

#quiz-navigation{
    height:45px;
    background-color:#FFFAF6;
    border-top:1px solid #595959;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;

}
#quiz-navigation ul{
    list-style:none;
    float:left;
    margin-left:22px;
    margin-bottom: 0px;
}
#quiz-navigation ul li{
    float:left;
    /*border-right:1px solid #ccc;
    border-left:1px solid #ccc;*/
    position:relative;
    margin:0px 2px 0px 0px;
}
#quiz-navigation ul li a{
    display:block;
    color:white;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    padding:0px 20px;
	margin-top: 7px;
	line-height: 30px;
	height: 30px;
	background:#3DAEE3;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
    border-radius: 8px;
}

#quiz-navigation ul li a:hover,
#quiz-navigation ul li.selected a{
    background:#3597c5;
    color:#f0f0f0;
}

#quiz-navigation ul li.disabled a{
    opacity: 0;
	-moz-opacity:0;
	filter:alpha(opacity=0);
    cursor: default;
}



#quiz-navigation ul li.page-number {
    margin: 0px 170px 0px 160px;
	border: none;
}

#quiz-navigation ul li.page-number  a{
    cursor: default;
    font-weight: normal;
    background: none;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 2px 2px 2px #666;
	-webkit-box-shadow: 2px 2px 2px #666;
	box-shadow: 2px 2px 2px #666;
	color: #666;
	border: 1px solid #D9D9D9;
}

span.ribbon {
	position: absolute;
	right: -14px;
	top: 0px;
	display: inline-block;
	color:#fff;
	text-align: center;
	text-transform: uppercase;
	background: #fff;
	width: 30px;
	padding: 3px 10px;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
.ribbon span.green{
	background-color: #468847;
}

span.label {
    background-color: #999999;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    font-size: 9.75px;
    font-weight: bold;
    padding: 5px 3px 5px 3px;
    text-shadow: none;
    margin-right: 5px;
    display:inline-block !important;
}

span.label a{
    text-decoration: none;
}

span.label a:hover{
    text-decoration: underline;
}

span.label-important {
    background-color: #B94A48;
}

span.label-info {
    background-color: #3A87AD;
}
span.label-success {
    background-color: #468847;
}
span.label-warning {
    background-color: #F89406;
}

span.link-white a{
    color: #fff;
	padding-bottom: 5px;
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.alert-heading {
  color: inherit;
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}

.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

[class^="qicon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
vertical-align: text-top;
width: 14px;
}
.qicon-ok {
    background-position: -288px 0;
}
.qicon-remove {
    background-position: -312px 0;
}
.qicon-exclamation-sign {
    background-position: 0 -120px;
}
.qicon-backward {
  background-position: -240px -72px;
}
.qicon-asterisk {
  background-position: -456px -96px;
}
.qicon-forward {
  background-position: -336px -72px;
}
.qicon-star {
background-position: -120px 0;
}
.qicon-white {
    background-image: url("../img/glyphicons-halflings-white.png");
}
.qicon-info-sign {
background-position: -120px -96px;
}

.quiz-explain{
    clear: both;
    display: block;
    padding-top: 10px;
}

.simple-modal-link{
    color: #000000;
    height: 25px;
    padding-top: 2px;
    text-decoration: none;
}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}


/**Form**/
.competition-form{
    padding: 0px 20px 0px 20px;
    color: #005375;
}

.competition-form .headerText{
    padding: 10px 0px 0px 15px;
}

.competition-form a{
    color: #005375;
    text-decoration: underline;
}
.competition-form a.ajax-load,
.competition-form a.button{
    text-decoration: none;
    padding: 10px 120px 10px 10px;
    margin: 20px 20px 0px 0px;
}

.competition-form input[type=text], textarea{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #005375;
    height: 25px;
}
.competition-form textarea{
  height: 70px;
}
.competition-form .fieldset{
    padding: 10px 20px 0px 10px;
}
.competition-form .box{
    padding: 20px 10px;
    border-radius: 4px;
    border: 1px solid #005375;
    margin-top : 18px;
}

#quiz-navigation ul li a#show-submit-score,
#quiz-navigation ul li a#btn-submit-score{
    margin-right:20px;
}
#quiz-navigation ul li a#btn-submit-score{
    display:none;
}

#ajax-loader{
  display: none;
  margin-top: 7px;
}

.red {
   background-color: red;
}

.show_container{
	display: block;
}

.hide_container{
	display: none;
}


/********************
* Smoke js
*********************/
.smoke-base {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  -moz-transition: all .3s;
  -webkit-transition: opacity .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.smoke-base.smoke-visible {
  opacity: 1;
  visibility: visible;
}

.smokebg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.smoke-base .dialog {
  position: absolute
}

.dialog-prompt {
  margin-top: 5px;
  text-align: center;
}

.dialog-buttons {
  margin: 10px 0 5px 0
}

.smoke {
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  line-height: 130%;
}

.dialog-buttons button {
  display: inline-block;
  vertical-align: baseline;
  cursor: pointer;
  font-family: sans-serif;
  font-style: normal;
  text-decoration: none;
  border: 0;
  outline: 0;
  margin: 0 5px;
  -webkit-background-clip: padding-box;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  padding: 9px 12px;
}

.dialog-prompt input {
  margin: 0;
  border: 0;
  font-family: sans-serif;
  outline: none;
  border: 1px solid #333;
  width: 97%;
  background-color: #fff;
  font-size: 15px;
  padding: 5px;
}

.smoke-base {
  background: rgba(0,0,0,.3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000);
}

.smoke-base .dialog {
  top: 25%;
  left: 25%;
  width: 50%;
}

.smoke-base .dialog-inner {
  padding: 15px
}

.smoke-base .dialog-inner h3{
    background-color:transparent;
    text-align:center;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
    color:#666;
    padding:5px 0px 0px 10px;
    font-size:22px;
}

.smoke-base .dialog-inner p{
    cursor:pointer;
    text-align:left;
    clear:both;
    margin:5px 0px;
    background-color:rgb(187, 187, 187);
    padding:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border:1px solid #005375;
    color: #000;
    -moz-box-shadow: 0 0 2px 2px #f4f4f4;
    -webkit-box-shadow: 0 0 2px 2px #f4f4f4;
    box-shadow: 0 0 2px 2px #f4f4f4;
    font-size:14px;
}

.smoke-base .dialog-inner p{
  border: none;
  border-left: 40px solid rgb(80, 136, 66);
}
.smoke-base .dialog-inner p.wrong{
    color: #FFFFFF;
    background-color: rgb(136, 66, 66);
    /*border:1px solid rgb(136, 45, 41);*/
}
.smoke-base .dialog-inner p.right{
    color: #FFFFFF;
    background: #005375;
}
.smoke-base .dialog-inner p span.weight{
  margin-left: -35px;
  padding-right: 25px;
  color: #FFFFFF;
  position: absolute;
}
.smoke-base .dialog-inner p.explanation-text{
    font-size: 12px;
    padding:5px;
    border: 0;
    background: none;
    box-shadow: none;
}

.smoke {
  text-transform: uppercase;
  background-color: rgba(255,255,255,1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ffffff);
}

.dialog-buttons button {
  border-radius: 5px;
  text-transform: uppercase;
  background-color: rgba(0,0,0,.9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#222222,endColorstr=#222222);
  color: #fff;
}

button.cancel {
  background-color: rgba(0,0,0,.7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444);
}

.queue{
    display:none;
}


.smoke-base {
    background: none;
}

.smoke-base .dialog {
  top: 25%;
  left: 30%;
  width: 40%;
}

.smoke-base .dialog-inner {
    padding: 10px;
}

.smoke {
    text-transform: none;
    color:#555;
    font-weight: normal;
    background-color: #fff;
    border-radius: 10px;
    border:10px solid #3DAEE3;
    font-size:24px;
}

.smoke h2,
.smoke p{
    margin: 10px 0;
}

.dialog-buttons {
    margin: 0;
    float:right;
    position: absolute;
    top:0;
    right:0;
}

.dialog-buttons button {
    border-radius: 50%;
    text-transform: uppercase;
    background-color: #3DAEE3;
    color: #fff;
    font-size:11px;
    padding:6px 9px;
}

button.cancel {
    background-color: #777;
    color:#fff;
}

.dialog-prompt input{
    width:300px;
    text-align:center;
    background-color:#ccc;
}
</style>

<link rel="stylesheet" href="https://www.cssportal.com/css/bootstrap.css">
<link rel="stylesheet" href="https://www.cssportal.com/css/font-awesome.min.css">
<!--
<link rel="stylesheet" href="https://www.cssportal.com/css/menu/effects/fading.css">

	<link rel="stylesheet" type="text/css" href="https://www.cssportal.com/css/main.css">
-->
  <!--
		<script  src="https://www.cssportal.com/js/vendor/selectivizr.min.js"></script>
		<script src="https://www.cssportal.com/js/vendor/respond.min.js"></script>
	<script src="https://www.cssportal.com/js/vendor/modernizr.min.js"></script>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://www.cssportal.com/js/vendor/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://www.cssportal.com/css-quiz/css/sliding.quiz.css">
 
<script src="https://www.cssportal.com/css-quiz/js/sliding.quiz2.js"></script>

	<div class="layout">
		<div class="main">
			<div class="container">
				<div class="row">
          
					<div class="col-md-8">

	<div class="content">

    <div class="page">
      -->
		<div id="quiz-content"></div>
		<div class="clear"></div>
	
		<script>
 
		</script>
 <!--
								    </div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="https://www.cssportal.com/js/plugins.js"></script>
	<script src="https://www.cssportal.com/js/main.js"></script>
-->
</body>
</html>
<script>
  
  $(function() {
    $.sliding_quiz = {
        version: '1.0'
    };
    $.fn.sliding_quiz = function(config){
        config = $.extend({}, {
            instruction: null,
            questions: null,
            locale: null,
            when_finish_submit_url : '',
			contact_form_submit_url : '',
            effect: 'slide',
            callback: function() {}
        }, config);

        //check question
        if(config.questions == null || config.questions == undefined){
            return false;
        }
        // initial container object
        var container = $(this);
        container.addClass('quiz-content');
        // number of questions
        var numOfQuestions = config.questions.length;
        // array user choice answer
        var userAnswers = [];
        // array user choice answer for email
        var userAnswersForEmail = [];
        /*
        current position of fieldset / navigation link
        */
        var current 	= 1;

        //set locale
        var locale = {
            'msg_not_found' : 'Cannot find questions',
            'msg_please_select_an_option' : 'Please select an option',
            'msg_question' : 'Question',
            'msg_you_scored' : 'You scored',
            'msg_click_to_review' : 'Click to Question button to review your answers',
            'bt_start' : 'Start',
            'bt_next' : 'Next',
            'bt_back' : 'Back',
            'bt_finish' : 'Finish',
            'contact_heading' : 'Submit Your Score',
            'contact_name' : 'Name',
            'contact_email' : 'Email',
            'contact_phone' : 'Phone',
            'contact_message' : 'Message',
            'contact_show_form_button' : 'Submit Your Score',
            'contact_submit_button' : 'Submit',
            'contact_thankyou' : 'Thank you for your submission.'
        };
        if(config.locale != null){
            $.each(locale, function(index, value) {
                if(config.locale[index] == undefined){
                    config.locale[index] = value;
                }
            })
        }else{
            config.locale = locale;
        }

        /*Initial question*/
        if (numOfQuestions === 0) {
            container.html('<div class="quiz-wrapper"><div class="steps"><form id="formElem" name="formElem" action="" method="post"><fieldset class="step"><legend>'+config.locale['msg_not_found']+'</legend></fieldset></form></div></div>');
            return;
        }

        /*Instruction Page*/
		var welcomePage = '';
		if(config.instruction != null){
			welcomePage = '<div class="quiz-wrapper" id="quiz-instruction-container">\n\
                    <div class="steps">\n\
                    <form>\n\
                    <fieldset class="step"><legend>' + config.instruction['title']+'</legend><div style="padding: 20px 10px;">'+config.instruction['description']+'</div></fieldset></form></div>\n\
                    <div id="quiz-navigation" style=""><ul style="float:right;margin-right:20px;"><li><a href="javascript:;;" id="btn-start-quiz">'+config.locale['bt_start']+'</a></ul></div>\n\
                    </div>';
		}

        /*Contact Page Form*/
		var competitionForm = '<fieldset class="step" style="display:none">\n\
        <legend>'+config.locale['contact_heading']+'</legend>\n\
                <table width="100%" class="competition-form" border="0" cellpadding="0" cellspacing="10">\n\
                    <tr><td width="1%" nowrap="">'+config.locale['contact_name']+'</td><td align="right"><input type="text" class="required letters_only" id="competitionName"/></td></tr>\n\
                    <tr><td width="1%" nowrap="">'+config.locale['contact_email']+'</td><td align="right"><input type="text" id="competitionEmail"/></td></tr>\n\
                    <tr><td width="1%" nowrap="">'+config.locale['contact_phone']+'</td><td align="right"><input type="text" id="competitionPhone"/></td></tr>\n\
                    <tr><td width="1%" nowrap="">'+config.locale['contact_message']+'</td><td align="right"><textarea id="competitionMessage"/></textara></td></tr>\n\
                </table>\n\
        </fieldset>';

		var showQuiz = (welcomePage == '')  ? 'show_container' : 'hide_container';
        var quizContent = '<div class="quiz-wrapper '+showQuiz+'"><div class="steps"><form id="formElem" name="formElem" action="" method="post">';
        for (questionIdx = 0; questionIdx < numOfQuestions; questionIdx++) {
            if(config.questions[questionIdx] != undefined){
                show = (questionIdx==0) ? "show" : "";
                quizContent += '<fieldset class="step '+show+'" question="'+(questionIdx+1)+'" choice=""><legend>'+config.questions[questionIdx].question+'</legend>';
                for (answerIdx = 0; answerIdx < config.questions[questionIdx].answers.length; answerIdx++) {
                    quizContent += '<p answer="'+(answerIdx+1)+'">'+config.questions[questionIdx].answers[answerIdx]+'</p>';
                }
                quizContent += '</fieldset>';
            };
        }
        NextFinishButton = '<a href="#" id="next-quiz">'+config.locale['bt_next']+'</a><a href="#" id="finish-quiz" style="display: none;"><i class="qicon-asterisk qicon-white"></i>&nbsp;'+config.locale['bt_finish']+'</a>';
        if(numOfQuestions == 1){
            NextFinishButton = '<a href="#" id="finish-quiz"><i class="qicon-asterisk"></i>&nbsp;'+config.locale['bt_finish']+'</a>';
        }
        quizContent += '</form></div><div id="quiz-notice"><span class="label label-important"><i class="qicon-exclamation-sign qicon-white"></i>&nbsp;'+config.locale['msg_please_select_an_option']+'</span></div><div id="quiz-navigation" style="display:none;"><ul><li class="disabled"><a href="#" id="back-quiz">'+config.locale['bt_back']+'</a></li><li class="page-number"><a href="#">1/'+numOfQuestions+'</a></li><li class="">'+NextFinishButton+'</li></ul></div><div class="progress-container"><div class="progress"></div></div></div></div>';
        container.html(welcomePage+quizContent);

        /*Initial object*/
		// initial progress object
		var progress = container.find('.progress');
		var progressContainer = container.find('.progress-container');
        var progressWidth = progressContainer.width() - 40;
        // initial steps object
        var steps = container.find('.steps'),
        notice = container.find('#quiz-notice'),
        page_number = container.find(".page-number a"),
        next_button = container.find("#next-quiz"),
        back_button = container.find("#back-quiz"),
        finish_button = container.find("#finish-quiz");
        var $totalWeightage = 0;
        var $finalWeightageArray = Array();
        /*
        sum and save the widths of each one of the fieldsets
        set the final sum as the total width of the steps element
        */
        var stepsWidth	= 0;
        var widths 		= new Array();
        steps.find('.step').each(function(i){
            var $step 		= $(this);
            widths[i]  		= stepsWidth;
            stepsWidth	 	+= $step.width();//600
        });
        steps.width(stepsWidth);

        // Function to get the Max value in Array
        Array.max = function( array ){
            return Math.max.apply( Math, array );
        };
        /**
         * Get max length of weightage array
         */
        var $listWeightageLength = Array();
        for (var i = 0, toLoopTill = config.questions.length; i < toLoopTill; i++) {
            $totalWeightage += parseFloat(Array.max(config.questions[i].weight));
            $weightageLength = config.questions[i].weight.length;
            $listWeightageLength[i] = $weightageLength;
        }
        var $maxWeightageLength = Array.max($listWeightageLength);
//console.log('Max Array Length: '+$maxWeightageLength);
        /*
        Answer selected
        */
        container.find('p').click(function () {
            var thisAnswer = $(this);

            if (thisAnswer.hasClass('selected')) {
                thisAnswer.removeClass('selected');
                thisAnswer.parents('.step').attr('choice', '');
            } else {
                thisAnswer.parents('.step').children('p').removeClass('selected');
                thisAnswer.addClass('selected');
                thisAnswer.parents('.step').attr('choice', thisAnswer.attr('answer'));
            }
        });

        /*
		show the navigation bar
		*/
        container.find('#quiz-navigation').show();

		/*
		*bind Start button click
		*/
		container.find('#btn-start-quiz').bind('click', function(){
            container.find('#quiz-instruction-container').fadeOut(500, function() {
				$(this).next().fadeIn(500);
				$(this).next().find('#quiz-navigation').show();
			});
		});
        /*
		when clicking on a next link
		the form slides to the next corresponding fieldset
		*/
        next_button.click(function(e){
            current = steps.find(".show");

            //calculate index
            index   = current.index() + 1;
            index ++;
            slider.next(index);

            e.preventDefault();
        });

        /*
		when clicking on a back link
		the form slides to the back corresponding fieldset
		*/
        back_button.click(function(e){

            current = steps.find(".show");

            //calculate index
            index   = current.index() + 1;
            index--;
            slider.back(index);

            e.preventDefault();
        });

        /*
		when clicking on a finish link
		show the user results
		*/
        finish_button.click(function(e){
            slider.finish();
            e.preventDefault();
        });

        var slider = {
            next: function(index){
                if (container.find('.show').attr('choice').length === 0) {
                    notice.slideDown(300);
                    return false;
                };
                notice.slideUp();
                if(widths[index-1] != undefined && config.effect == 'slide'){
                    steps.stop().animate({
                        marginLeft: '-' + widths[index-1] + 'px'
                    },500,function(){
                        //mark current slide as show
                        steps.find(".show").removeClass('show');
                        current.next('fieldset').addClass('show');

                        //increase page number
                        page_number.html(index+"/"+numOfQuestions);

                        //enable first back button
                        back_button.parent().removeClass("disabled");
                        //last next button become finish
                        if(numOfQuestions == index){
                            next_button.hide();
                            finish_button.show();
                        }
                    });
                }else{
    				steps.find(".show").fadeOut(500, function() {
    					//mark current slide as show
    					$(this).removeClass('show');
    					current.next('fieldset').addClass('show');
    					current.next('fieldset').fadeIn(500);

    					//increase page number
    					page_number.html(index+"/"+numOfQuestions);

    					//enable first back button
    					back_button.parent().removeClass("disabled");
    					//last next button become finish
    					if(numOfQuestions == index){
    						next_button.hide();
    						finish_button.show();
    					}

                    });
                }
				//Calculate & Animate progress bar
				progress.animate({width: progress.width() + Math.round(progressWidth / numOfQuestions)}, 300);
            },
            back: function(index){
                notice.slideUp();

                if(index-1 >= 0 && config.effect == 'slide'){
                    steps.stop().animate({
                        marginLeft: '-' + widths[index-1] + 'px'
                    },500,function(){
                        //mark current slide as show
                        steps.find(".show").removeClass('show');
                        current.prev('fieldset').addClass('show');

                        //decrease page number
                        page_number.html(index+"/"+numOfQuestions);

                        //disabled first back button
                        if((index - 1) <= 0){
                            back_button.parent().addClass("disabled");
                        }
                        //enabled last next button
                        if(numOfQuestions > index){
                            finish_button.hide();
                            next_button.show();
                            next_button.parent().removeClass("disabled");
                        }
                    });
                }else{
    				steps.find(".show").fadeOut(500, function() {
    					//mark current slide as show
    					$(this).removeClass('show');
    					current.prev('fieldset').addClass('show');
    					current.prev('fieldset').fadeIn(500);

    					//decrease page number
    					page_number.html(index+"/"+numOfQuestions);

    					//disabled first back button
    					if((index - 1) <= 0){
    						back_button.parent().addClass("disabled");
    					}
    					//enabled last next button
    					if(numOfQuestions > index){
    						finish_button.hide();
    						next_button.show();
    						next_button.parent().removeClass("disabled");
    					}


                    });
                }
				//Calculate & Animate progress bar
				progress.animate({width: progress.width() - Math.round(progressWidth / numOfQuestions)}, 300);

            },
            finish: function(){
                if (container.find('.show').attr('choice').length === 0) {
                    notice.slideDown(300);
                    return false;
                };

                //get user answer
                container.find('.step').each(function (index) {
                    questionNumber = $(this).attr('question');
                    userSelect = $(this).attr('choice');
                    userAnswers[questionNumber] = userSelect;
                });

                //quiz result
                var numOfRightAnswer = 0;
                var finalScore = 0,
                questionList = '',
                answerList = '';

                for (i = 0; i < numOfQuestions; i++) {
                    if(config.questions[i] == undefined) {
                        continue;
                    }

                    $userScore = config.questions[i].weight[(userAnswers[i+1]-1)];
                    $maxScore = Array.max(config.questions[i].weight);

                    bt_rightOrwrong = 'label-important';
                    sign_rightOrwrong = '&nbsp;<i class="qicon-remove qicon-white"></i>';
                    if ($userScore == $maxScore) {
                        numOfRightAnswer++;
                        bt_rightOrwrong = 'label-success';
                        sign_rightOrwrong = '&nbsp;<i class="qicon-ok qicon-white"></i>';
                    }

                    questionList += '<span class="label '+bt_rightOrwrong+' link-white"><a href="#q' + (i + 1)+'" questionNumber="' + (i + 1)+'" onclick="return false;" class="quiz-result">'+config.locale['msg_question']+' ' + (i + 1)+'</a>'+sign_rightOrwrong +'</span>';
                    answerList += '<div id="q' + (i + 1)+'" class="final-result">';
                    answerList += '<h3>'+config.questions[i].question+'</h3>';
                    var emailContentList = {};
                     //add question and user ans to email content
                    emailContentList['question_id'] = config.questions[i].id;
                    emailContentList['question'] = config.questions[i].question;

                    for (answersIndex = 0; answersIndex < $maxWeightageLength; answersIndex++) {
                        var rightOrwrong = '';


                        if (config.questions[i].weight[answersIndex] == $maxScore) {
                            rightOrwrong += 'right';
                        }

                        if (userAnswers[i+1] == (answersIndex + 1) ) {
                            rightOrwrong = 'selected '+rightOrwrong;

                            emailContentList['answer'] = config.questions[i].answers[answersIndex];

                            if ($userScore < $maxScore) {
                                rightOrwrong += ' wrong';
                            }

                            //sum score
                            finalScore += parseFloat($userScore);

                            emailContentList['score'] = config.questions[i].weight[answersIndex];
                        }

                        if(typeof config.questions[i].answers[answersIndex] === "undefined"){
                            //do nothing
                        }else{
                            answerList += '<p class="' + rightOrwrong + '">' + config.questions[i].answers[answersIndex] + '</p>';
                        }
                    }
                    //add to email content
                    userAnswersForEmail.push(emailContentList);

                    //explanation
                    expId = 'inline'+i;
                    expLink = 'href="#inline'+i+'"';
                    explain = config.questions[i].explanation;
                    if(typeof explain == 'undefined' || explain == ''){
                        explain = '';
                    }else{
                        explain = '<div id="'+expId+'" class="explanation-text" style="display: none;">'+config.questions[i].explanation+'</div>';
                        //explain +='<a title="Explanation" class="simple-modal-link" '+expLink+' >'+config.locale['msg_explanation']+'</a>';
                    }
                    answerList += '<div class="quiz-explain">'+explain+'</div></div>';

                }
//console.log($theWeightage);
//console.log('total score:'+finalScore);
//console.log(userAnswersForEmail);
                var score = finalScore;
				var contact_button = (config.contact_form_submit_url != '') ? '<li><a href="./" id="show-submit-score"><i class="qicon-asterisk qicon-white"></i>&nbsp;Start Again</a></li>' : '';
                var resultContent = '<div class="quiz-wrapper">\n\
                    <div class="steps">\n\
                    <form id="competitionForm" name="competitionForm" action="submit_answers.php" method="post">\n\
                    <input type="hidden" value="'+score+'" id="quiz_user_score">\n\
                    <h3 class="skill">' +config.locale['msg_you_scored']+' '+score+'/'+$totalWeightage+'</h3>\n\
                    <fieldset class="step">\n\
                    <div class="resultset">'+questionList+'</div>\n\
                    <div id="your-score" class="final-result">\n\
                        <span class="label label-warning"><i class="qicon-exclamation-sign qicon-white"></i> '+config.locale['msg_click_to_review']+'</span>\n\
                    </div>'+answerList+'</fieldset>'+competitionForm+'</form></div>\n\
                    <div id="quiz-navigation" style=""><ul style="float:right"><li><a href="#" id="btn-submit-score">'+config.locale['contact_submit_button']+'</a><img src="img/ajax-loader.gif" alt="loading" id="ajax-loader"></li>'+contact_button+'</ul></div>\n\
                    </div>';

                //parse HTML
                container.html(resultContent);

                //when click finish - submit score to server
                if(config.when_finish_submit_url != ''){
                    var params = {
                        'user_score': score,
                        'results': userAnswersForEmail
                    };

                    jQuery.ajax({
                        type:'POST',
                        data: params,
                        url: config.when_finish_submit_url,
                        success: function(response) {
                            //console.log(response);
                            $('#server-response').html(response);
                        }
                    });
                }


                //unbind select answer
                container.find('p').unbind('click');
                //bind explanation click event
                container.find('.simple-modal-link').click(function (e) {
                    $this = $(this);
                    $href = $this.attr('href');
                    $($href).modal();
                    return false;

                });

                //validate form
                var competition = {
                    isValidEmailAddress : function(emailAddress){
                        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
                        return pattern.test(emailAddress);
                    },
                    validate : function(){
                        var error = 1;
                        var hasError = false;

                        $('#competitionForm').find(':input:not(button)').each(function(){
                            var $this       = $(this);

                            if($this.hasClass('required') && !$this.is(':disabled')){
                                var valueLength = jQuery.trim($this.val()).length;

                                if(valueLength == '' || (!$this.prop("checked") && $this.attr('type') == 'checkbox') ){
                                    $this.css('background-color','#FFEDEF');
                                    if($this.attr('type') == 'checkbox'){
                                        $this.parent().addClass('red');
                                    }
                                    hasError = true;
                                }else{
                                    $this.css('background-color','#FFFFFF');
                                    if($this.attr('type') == 'checkbox'){
                                        $this.parent().removeClass('red');
                                    }
                                }
                            }
                        });

                        if($('#competitionName').hasClass('letters_only')){
                            var $this = $('#competitionName');
                            var valueLength = jQuery.trim($this.val()).length;
                            var letterOnly = /^[a-zA-Z ]+$/;

                            if (valueLength == '' || !letterOnly.test($this.val())) {
                                $this.css('background-color','#FFEDEF');
                                hasError = true;
                            }else{
                                $this.css('background-color','#FFFFFF');
                            }
                        }

                        if(competition.isValidEmailAddress($('#competitionEmail').val()) == false){
                            $('#competitionEmail').css('background-color','#FFEDEF');
                            $('#competitionEmail').focus();
                            hasError = true;
                        }else{
                            $('#competitionEmail').css('background-color','#FFFFFF');
                        }

                        if(hasError){
                            error = -1;
                        }
                        return error;
                    }
                }

                //submit score and send to email
                container.find('#btn-submit-score').bind('click', function(){
                    $this = $(this);
                    $ajaxLoader = $('#ajax-loader');

                    $ajaxLoader.show();
                    $this.hide();

                    noError = competition.validate();
                    if(noError == 1){
                        var params = {
                            'name': $('#competitionName').val(),
                            'email': $('#competitionEmail').val(),
                            'phone': $('#competitionPhone').val(),
                            'message': $('#competitionMessage').val(),
							'user_score': $('#quiz_user_score').val(),
							'results': userAnswersForEmail
                        };
                        url = config.contact_form_submit_url;

                        jQuery.ajax({
                            type:'POST',
                            data:params,
                            url: url,
                            success: function(response) {
                                //console.log(response);
                                var thanksContent = '<div class="quiz-wrapper">\n\
                                    <div class="steps">\n\
                                    <form id="competitionForm" name="competitionForm" action="quiz_submit_score.php" method="post">\n\
                                    <fieldset class="step" style="display:block">\n\
                                    <legend>'+config.locale['contact_thankyou']+'</legend>\n\
                                    </fieldset></form></div>\n\
                                    </div>';

                                //parse HTML
                                container.html(thanksContent);
                            }
                        });
                    }else{
                        $ajaxLoader.hide();
                        $this.show();
                    }
                });

                //bind show submit score form
                container.find('#show-submit-score').bind('click', function(){
                    $(this).hide();
                    container.find('.step:first').fadeOut(500, function() {
                        $('#btn-submit-score').attr('style', 'display: block');
                        $(this).next().fadeIn(500);
                    });
                });

                //bind show result event
                container.find('.quiz-result').bind('click', function(){
                    container.find('.final-result').hide();
                    $('.quiz-result').removeClass('active');
                    $(this).addClass('active');
                    questionNumber = $(this).attr('questionNumber');
                    container.find('#q' + questionNumber).show();
                });
				//if(numOfQuestions == 1){ container.find('.quiz-result').trigger('mouseenter'); }
            }
        };
    };
});

























		$(function()
		    {

      
		        $("#quiz-content").sliding_quiz ({
					 'instruction':
					 {
					 	'title': 'CSS Quiz',
					 	'description' : 'Test your knowledge of CSS with our CSS Quiz, the test currently contains 20 questions. You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points. If you don\'t get the full score, you\'ll have an option to try again.<br /><br />Start the quiz now by clicking on the button below.'
					 },
					'questions':
					[
                         {
                            'id'        : 1,
                            'question'  : 'What is the correct CSS syntax for making all the &lt;span&gt; elements bold?',
                            'answers'   : ['span {text-size:bold}','span {font-weight:bold}','&lt;span style=&quot;font-size:bold&quot;&gt;','&lt;span style=&quot;text-size:bold&quot;&gt;'],
                            'weight'     : [0, 1, 0, 0],
                        },
                        {
                            'id'        : 2,
                            'question'  : 'In the following code snippet, what value is given for the left margin:<br>margin: 5px 10px 3px 8px;',
                            'answers'   : ['3px','10px','8px','5px'],
                            'weight'     : [0, 0, 1, 0],
                        },
                        {
                            'id'        : 3,
                            'question'  : 'How do you add a comment in a CSS file?',
                            'answers'   : ['/* this is a comment */','// this is a comment //','// this is a comment','&lt;! this is a comment&gt;'],
                            'weight'     : [1, 0, 0, 0],
                        },
                        {
                            'id'        : 4,
                            'question'  : 'What property is used to change the text color of an element?',
                            'answers'   : ['fontcolor:','textcolor:','color:','font-color:'],
                            'weight'     : [0, 0, 1, 0],
                        },
                        {
                            'id'        : 5,
                            'question'  : 'What does CSS stand for?',
                            'answers'   : ['Custom Style Sheets','Colorful Style Sheets','Computer Style Sheets','Cascading Style Sheets'],
                            'weight'     : [0, 0, 0, 1],
                        },
                        {
                            'id'        : 6,
                            'question'  : 'The # symbol specifies that the selector is?',
                            'answers'   : ['class','tag','first','id'],
                            'weight'     : [0, 0, 0, 1],
                        },
                        {
                            'id'        : 7,
                            'question'  : 'Which is the correct CSS syntax?',
                            'answers'   : ['{p:color=black(p}','p {color: black;}','{p;color:black}','p:color=black'],
                            'weight'     : [0, 1, 0, 0],
                        },
                        {
                            'id'        : 8,
                            'question'  : 'Which of the following would be used to create an ID called header which has a width of 750px, a height of 30px and the color of the text is black?',
                            'answers'   : ['#header { height: 30px; width: 750px; color: black; }','.header { height: 30px; width: 750px; colour: black; }','#header { height: 30px; width: 750px; text: black; }','.header { height: 30px; width: 750px; color: black; }'],
                            'weight'     : [1, 0, 0, 0],
                        },
                        {
                            'id'        : 9,
                            'question'  : 'Which snippet of CSS is commonly used to center a website horizontally?',
                            'answers'   : ['site-align: center;','margin: center;','margin: auto 0;','margin: 0 auto;'],
                            'weight'     : [0, 0, 0, 1],
                        },
                        {
                            'id'        : 10,
                            'question'  : 'How do you make a list not display bullet points?',
                            'answers'   : ['list-style-type: no-bullet','list: none','bulletpoints: none','list-style-type: none'],
                            'weight'     : [0, 0, 0, 1],
                        },
                        {
                            'id'        : 11,
                            'question'  : 'What is the correct CSS syntax to change the font name?',
                            'answers'   : ['font-name:','font:','font-family:','fontname:'],
                            'weight'     : [0, 0, 1, 0],
                        },
                        {
                            'id'        : 12,
                            'question'  : 'What is the correct Syntax for importing a stylesheet in CSS?',
                            'answers'   : ['@import url(css/example.css);','@import-stylesheet url(css/example.css);','import-css url(css/example.css);','@import-style url(css/example.css);'],
                            'weight'     : [1, 0, 0, 0],
                        },
                        {
                            'id'        : 13,
                            'question'  : 'Which HTML attribute is used to define inline CSS styles?',
                            'answers'   : ['css','style','type','id'],
                            'weight'     : [0, 1, 0, 0],
                        },
                        {
                            'id'        : 14,
                            'question'  : 'How do you make each word in a text start with a capital letter?',
                            'answers'   : ['text-transform:capitalize','text-transform:uppercase','You can\'t do that with CSS','text:capitalize'],
                            'weight'     : [1, 0, 0, 0],
                        },
                        {
                            'id'        : 15,
                            'question'  : 'What is the correct CSS syntax for making all the &lt;p&gt; tag\'s font size 14px?',
                            'answers'   : ['p {14px}','p {font-size: 14px;}','p {text-size: 14px;}','p {font: 14px;}'],
                            'weight'     : [0, 1, 0, 0],
                        },
                        {
                            'id'        : 16,
                            'question'  : 'A declaration is terminated by?',
                            'answers'   : ['. - period','! - exclamation mark','; - semi colon',': - colon'],
                            'weight'     : [0, 0, 1, 0],
                        },
                        {
                            'id'        : 17,
                            'question'  : 'Which CSS property controls the text size?',
                            'answers'   : ['font-height','text-size','font-size','text-style'],
                            'weight'     : [0, 0, 1, 0],
                        },
                        {
                            'id'        : 18,
                            'question'  : 'How do you insert padding so that it is:<br />10 pixels at the top<br />15 pixels at the bottom<br />5 pixels at the right<br />10 pixels to the left?',
                            'answers'   : ['padding:10px 15px 5px 10px;','padding:15px 5px 10px 10px;','padding:10px 5px 10px 15px;','padding:10px 5px 15px 10px;'],
                            'weight'     : [0, 0, 0, 1],
                        },
                        {
                            'id'        : 19,
                            'question'  : 'Which property is used to change the background color?',
                            'answers'   : ['background-color:','bg-color:','bground:','b-color:'],
                            'weight'     : [1, 0, 0, 0],
                        },
                        {
                            'id'        : 20,
                            'question'  : 'How do you display hyperlinks without an underline?',
                            'answers'   : ['a {decoration:no underline}', 'a {text-decoration:none}','a {hyperlink:no underline}', 'a {text-decoration:no underline}'],
                            'weight'     : [0, 1, 0, 0],
                        }
					],
					'locale': //optional
					{
						'msg_not_found' : 'Cannot find questions',
						'msg_please_select_an_option' : 'Please select an answer',
						'msg_question' : 'Question',
						'msg_you_scored' : 'You scored',
						'msg_click_to_review' : 'Click the question button to review your answers',
						'bt_next' : 'Next',
						'bt_back' : 'Back',
						'bt_finish' : 'Finish',
						'bt_contact' : 'Submit Your Score',
						'contact_heading' : 'Submit Your Score'
					},
					'when_finish_submit_url': '',
					'contact_form_submit_url': '',
					//'effect': 'fade'
				});
			});


  
</script>

Add Comment

* Required information
1000
Powered by Commentics

Comments (1)

Gravatar
Admin
Sascha65says...

Die Canvas Balken Uhr ist ja mal Fett