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 correctAnswers = $(this).siblings().find('.correct-answer').length;
	    var totalUserCorrectAnswers = $(this).siblings().find('.correct-answer:checked').length;
	    var totalCheckedAnswers = $(this).siblings().find('input:checked').length;

	    var item = $(this).parents('div.form-row').find('.correct:first').data('progress');
	    var resultBubble = $('.quiz-progress-circle[data-progress="' + item + '"]');

	    if(correctAnswers === totalUserCorrectAnswers  && totalUserCorrectAnswers === totalCheckedAnswers) {
	        resultBubble.removeClass("progress-incorrect");
	        resultBubble.addClass("progress-correct");

	        score += 1;
	    } else {
	        resultBubble.removeClass("progress-correct");
	        resultBubble.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);

			if($(this).hasClass('do-submit-after-check')) {
				$('form').trigger('submit');
			}
	});

	// add the submit button to the last form-row
 ...