A simple yet customizable client-side knowledge tests maker based on jQuery
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lang
tests
.gitignore
README.md
jquery-ktest.js

README.md

jquery-ktest

jquery-ktest is a simple yet customizable client-side knowledge tests maker based on jQuery. It allows jQuery users to quickly pusblish knowledge tests (quiz, questionnaires...) for end-users.

Requirements

Example

jquery-ktest example

Installation

  1. Download jquery-ktest and make it accessible in your assets directory.

  2. Include jQuery and jquery-ktest in your page (preferably at the end, just before </body>):

    <script src="jquery.js"></script>
    <script src="jquery-ktest.js"></script>
  3. jquery-ktest default language is English. If needed, you can also include a language pack in order to get your content translated:

    <script src="jquery-ktest/lang/fr.js"></script>
  4. Create your first knowledge test. jquery-ktest tests declaration are just simple HTML content: a div containing .question divs.

    <div id="my_test">
        <div class="question">
            <div class="statement">What notes a G major chord is made of?</div>
            <ul class="answers">
                <li>A B C</li>
                <li data-correct="true">G B D</li>
                <li>F E A</li>
            </ul>
        </div>
        <div class="question">
            <div class="statement">Who is or has been a guitar player part of the Rolling Stones band?</div>
            <ul class="answers">
                <li data-correct="true">Mick Taylor</li>
                <li>Django Reinhardt</li>
                <li data-correct="true">Keith Richards</li>
                <li>Charlie Watts</li>
                <li>Mike Mills</li>
            </ul>
        </div>
    </div>
  5. Ktestify your content:

    $(function () {
    	$('#my_test').ktest();
    });

Settings

A couple of optional settings are available.

###Content customization

####Test difficulty

The test difficulty is a [1..3] number. It will be displayed on the test welcome screen as Simple/Medium/Hard. Just add a data-difficulty attribute to your ktest div:

<div id="my_test" data-difficulty="2">
	...
</div>

####Test estimated time

The test estimated time is an integer number, representing a time in minutes. It will be displayed on the test welcome screen. Just add a data-time attribute to your ktest div:

<div id="my_test" data-time="10">
	...
</div>

####Test description

The test description is displayed on top of the test welcome block. Just add a .description div in your ktest declaration:

<div id="my_test">
	<div class="description">
		<p>This test will allow you to check your guitaristic knowledge!</p>
	</div>
	...
</div>

####Question hints

For each question defined in a test, you can specify a hint text, which will be shown after the user validated his answer. Just add a .infos div to your question definition:

<div class="question">
	...
	<div class="infos">
		<p>Here are some explanation on this subject...</p>
	</div>
</div>

###Plugin options

Options can be passed to the plugin using a dictionnary:

$('#my_test').ktest({
	option_1: 'value',
	option_2: 'other value',
	...
});

The available options are listed in the table bellow:

Option Type Default value Function
push_ga_events boolean false When set to true, jquery-ktest will push an event to Google Analytics each time a user validates an answer. Of course, GA should be paramed on your page, so that the _gaq object is available. Generated code for the event: _gaq.push(['_trackEvent', 'jquery-ktest', <QUESTION>, <NUMBER OF MISTAKES THE USER DID>])

Miscellaneous

Bootstrap integration

Even if Bootstrap front-end framework is not required to run jquery-ktest, it integrates well with it. If you use Bootstrap on your pages, your tests should look quite sweet without writing extra CSS.