Pretty & Dynamic Quizzes Plugin - SlickQuiz
| File Size: | 94.5 KB |
|---|---|
| Views Total: | 14015 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
SlickQuiz is a jQuery Plugin for creating pretty and dynamic quizzes.
Basic Usage:
1. Include jQuery Library and necessary javascripts:
<script src="js/jquery-1.7.min.js"></script> <script src="js/slickQuiz-config.js"></script> <script src="js/slickQuiz.js"></script> <script src="js/master.js"></script>
2. CSS
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/slickQuiz.css" media="screen" rel="stylesheet" type="text/css"> <link href="css/master.css" media="screen" rel="stylesheet" type="text/css">
3. HTML
<body id="slickQuiz">
<h1 class="quizName"></h1>
<div class="quizArea">
<div class="quizHeader">
<a class="startQuiz" href="">Get Started!</a>
</div>
</div>
<div class="quizResults">
<h3 class="quizScore">You Scored: <span></span></h3>
<h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
<div class="quizResultsCopy"></div>
</div>
</body>
4. Config Options
// See js/slickQuiz-config.js
var quizJSON = {
"info": {
"name": "The Quiz Header",
"main": "The Quiz Description Text",
"results": "The Quiz Results Copy",
"level1": "The highest ranking",
"level2": "The almost highest ranking",
"level3": "The middle ranking",
"level4": "The almost lowest ranking",
"level5": "The lowest ranking"
},
"questions": [
{
"q": "The Question?",
"a": [
{"option": "an incorrect answer", "correct": false},
{"option": "a correct answer", "correct": true},
{"option": "another correct answer", "correct": true}
],
"correct": "The Correct Response Message",
"incorrect": "The Incorrect Response Message"
}
]
}
This awesome jQuery plugin is developed by jewlofthelotus. For more Advanced Usages, please check the demo page or visit the official website.
