Ok, you want know if you are a positive or negative person. Or maybe you want to know if your death is close. Or you just want a personality test. Anyway, you are here because you need to build an online test to see results. Here you’ll learn how to write a paged testing system with jQuery.

Screen Shot 2015-09-07 at 11.41.10 am

As always, I’ll drop all the code here of a working example for you to read and learn:

index.php

<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS Test</title>
<meta name="description" content="Bootstrap basic example by roura356a">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

<?php
$pages      = 9;
$i          = 1;
$categories = array(
'A',
'B',
'C',
'D',
'E'
); ?>

<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
var options = <?php echo json_encode($categories);?>;
</script>

<?php while ( $i <= $pages ) { ?>
<section class="page hide">
<div class="container">
<?php echo '<p><strong>' . $i . ' / ' . $pages . '</strong></p>';
shuffle( $categories );
foreach ( $categories as $category ) {
echo '<button class="save-profile btn btn-default" data-info="' . $category . '">' . $category . '</button>';
} ?>
</div>
</section>
<?php $i ++;
} ?>

<section>
<div class="container">
<button class="reset btn btn-danger">RESET</button>
</div>
</section>

<div class="container results"></div>

</body>
</html>

 

styles.css

section {
    background: #eee;
    padding: 15px 0;
    margin: 15px 0;
}

 

main.js

$(function () {
    profiler.init();
});

var profiler = {
    init: function (e) {
        profile = [];
        results = [];
        $('.results').empty();
        $('.page').addClass('hide').first().removeClass('hide');
        !e && profiler.events();
    },
    events: function () {
        $('.save-profile').on('click', function () {
            profile.push($(this).attr('data-info'));
            $(this).parents('section').addClass('hide').next('section').removeClass('hide');
        });
        $('.page').last().on('click', function () {
            $(options).each(function (index, value) {
                var occurrences = $.grep(profile, function (element) {
                    return element === value;
                }).length;
                results[value] = occurrences;
            });
            max_value = -1;
            for (item in results) {
                if (results[item] > max_value) {
                    max_value = results[item];
                    result = item;
                }
            }
            $('.results').html('<strong>' + result + '</strong>');
        });
        $('.reset').on('click', function () {
            profiler.init(1);
        });
    }
};

 

And thats it! Now you can download the attached ZIP and play!