Test example

by rob_teamworks

HTML

<section class="row test">
				<div class="columns">
					<div class="entry">

						<form class="form" method="POST" action="http://example.com/test-insert.php">
							
							<input type="hidden" value="teamworks" name="test-user">
							<input type="hidden" value="Introduction" name="test-name">

														<div class="form-row">
								<h1>Quiz | Introduction</h1>

								<div class="clear"></div>
								<div id="module-area">
									<div id="modules-top"></div>
									<div id="modules-repeat">
											<h2 class="training">1. Question 1</h2>

											<div class="question" data-max-answers="1">
																																				<div style="display:table-row;">
														<div style="display:table-cell;">
															<input class="correct correct-answer" data-progress="1" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 1">
														</div>
														<div style="display:table-cell;">
															<p>
																Answer 1															</p>
														</div>
													</div>
																																					<div style="display:table-row;">
														<div style="display:table-cell;">
															<input class="correct " data-progress="1" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 2">
														</div>
														<div style="display:table-cell;">
															<p>
																Answer 2															</p>
														</div>
													</div>
																																					<div style="display:table-row;">
														<div style="display:table-cell;">
															<input class="correct " data-progress="1" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 3">
														</div>
														<div style="display:table-cell;">
															<p>
																Answer 3															</p>
														</div>
													</div>
																							</div>
											<div class="inner"></div>
											<button class="next">Next...

CSS

.quiz-progress-circle {
	height:5px;
	width:5px;
	background-color:grey;
	display:inline-block;
	margin-right:10px;
}

.progress-correct {
	background-color:green!important;
}

.progress-incorrect {
	background-color:red!important;
}

.progress-current {
	background-color:blue!important;	
}

JavaScript

jQuery(function($) {
$(document).ready(function() {

  // prepend a 'previous' button to all form-rows except the first
  //$('<button>').text("<< Back").addClass('previous').appendTo($('.inner').not(':first'));

	//$('<button>').text("<< Back").addClass('back-training').appendTo($('.inner').first());

  // hide all form-rows, but not the first one
  $('.form-row').not(':first').hide();

  // hide on last step
  $('button.next').last().hide();



  // handle the previous button, we need to use 'on' here as the
  // previous buttons don't exist in the dom at page load
  /*$('.form-row').on('click', 'button.previous', function(e) {
    e.preventDefault();
    $(this).parents('div.form-row').hide().prev('div.form-row').show();
  });*/

	var score = 0;
  $('button.next, input.check').click(function(e) {
    // prevent the next buttons from submitting the form
    e.preventDefault();

		var item = $(this).parents('div.form-row').find('.correct:first').data('progress');
    if ($(this).parents('div.form-row').find('.correct:first').is(":checked") && $(this).parents('div.form-row').find('.correct:first').hasClass('correct-answer')) {
			$('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-incorrect");
			$('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-correct");
			score += Number(score+1);
		} else {
			$('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-correct");
      $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-incorrect");
    }

    // hide this form-row, and show the next one
    $(this).parents('div.form-row').hide().next('div.form-row').show();
		$('.finalscore').val(score);
	});

	// add the submit button to the last form-row
  $('<input>').addClass('check').prop('type', 'submit').appendTo($('.form-row:last'));

});
});


jQuery(function($) {
$(document).ready(function () {
    $("input[type=checkbox].correct").click(function (e) {
        if...