-
Notifications
You must be signed in to change notification settings - Fork 0
JavaScript quiz engine that supports JSON as data source. Has three result calculation algorithms.
License
cooldarkdryplace/jsCustomTest
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
JS Custom Test
ABOUT
JS Custom test is a universal quiz script that can be used for many purposes.
• Psychological tests
• Goods filter
• Simple polling script
• Sorting instrument
There are three algorithms that can be used to calculate result.
1) Points sum ("score")
Each answer has points. Sum of all points is used to determine which result to show
Example:
Question 1: How old are you?
Answer 1: 18 (5 points)
Answer 2: 21 (10 points)
Answer 3: 35 (15 points)
Question 2: How old is your brother?
Answer 1: 18 (5 points)
Answer 2: 21 (10 points)
Answer 3: 35 (15 points)
Result 1 (points 0-10) : You are young and ambitious.
Result 2 (points 11-20): You are young and you can buy alcohol.
Result 3 (points 21-30): You are young but it's time to stop drinking, seriously.
Default result: In case range is exceeded this result will show up.
2) Popular variant ("popular")
Each answer has an identifier. After quiz is passed script calculates what identifier is the most popular and shows a result with same identifier.
Example:
Question 1: How was your day?
Answer 1: Sold quiz script! (name “red_code”)
Answer 2: Refactored some code (name “yellow_code”)
Answer 3: Did nothing (name “black_code”)
Result 1 (name “red_code”) : He-he-he, nice.
Result 2 (name “yellow_code”): That's the spirit!
Result 3 (name “black_code”): I am not satisfied with your behaviour!
Default result: will never happen.
Note that if there are two or more variants with the same popularity script will show first matching result.
3) Answers combination
Each answer has a unique identifier. After quiz is passed you have a string which matches a result with a same string.
Example:
Question 1: What is your name?
Answer 1: Jack (id “jack_”)
Answer 2: Max ( id “max_”)
Answer 3: Hugo ( id “hugo_”)
Question 1: Where are you from?
Answer 1: London ( id “london”)
Answer 2: Sydney ( id “sydney”)
Answer 3: Paris ( id “paris”)
Result 1 ( id “jack_london”) : Thank you a lot John Griffith Chaney! Martin Eden is a great novel.
Result 2 ( id “max_sydney”): You are Max from Sydney.
Result 3 ( id “hugo_paris”): You are Jack from Paris.
Default result: any other combination that was not described in "predefined" results will lead to this option.
After all questions are answered script can act in different ways.
• Generate a page with result text paragraph, and optional links.
• Silently send result using AJAX and delete itself.
• Redirect to another page.
• Use a source HTML file to render result page.
HOW TO ADD SCRIPT TO YOUR PAGE
1. Copy files
2. Edit HTML header
3. Insert a DIV to your page
1) Copy file “jsCustomTest.xml” and “css”, “images”, “lib”, “js” folders to a directory with your HTML file, where you want to show test.
2) Edit your HTML header. Add this code inside <head></head> tags of your HTML file:
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jsCustomTest.js"></script>
3) Insert a blank DIV with id=”jsCustomTest” to your HTML page.
Example: <div id=”jsCustomTest”></div>
And a JS Custom Test will draw itself there.
HOW TO EDIT DATA
There are two supported formats to store your questions, answers and results.
• XML
• JSON
Both are standard formats. I suggest using text editors which support this formats and will analyse document structure.
You can also use instruments to validate you data files before deploying to server:
JSON - http://jsonlint.com/
XML - http://www.w3schools.com/xml/xml_validator.asp
XML editing tips:
1) All text data saved in one "jsCustomTest.xml" file. Edit jsCustomTest.xml to use your own questions, answers and results.
Do not forget that in XML file you can't use special symbols use equivalents:
& (&)
< (<)
> (>)
' (')
" (")
Or use numeric character reference, like "&".
More information about XML you can find here: http://en.wikipedia.org/wiki/XML
2) Test script can use any amount of questions with any amount of answers.
For example:
1. How are you? // Three answers for first question.
a) Good
b) Bad
c) Fine
2. What is your name? // But four answers for second question.
a) Sam
b) Craig
c) Max
d) Tom
3. How old are you? // And just two answers for third question.
a) 10-18
b) 18-100
3) You also can insert links to a test result.
For example:
If you are using this test to help your customers with choosing a perfume you can add links to goods that your customer will enjoy.
4) You can use your own design using CSS, most of elements have they ID's for your convenience.
Result pages may be fully customized if you will use HTML pages as a result option is script settings.
5) Adding and removing questions, answers and results are pretty simple.
Here is the example of question with answers:
<question>
<text>What color do you prefer?</text>
<picture>images/questions/qst_2.png</picture>
<answers>
<answer name="fresh" score="5" comb="likes_">Light blue</answer>
<answer name="2" score="10" comb="hates_">Yellow</answer>
<answer name="3" score="15" comb="loves_">Violet</answer>
<answer name="4" score="20" comb="prefers_">Red</answer>
</answers>
</question>
Picture is optional. If you don't use picture for a question don't put any text between <picture></picture> tags.
Each answer has three attributes. Depending on selected algorithm script will use one of them.
If you are using “popular” algorithm you'll need to “name” attribute. “comb” is used for combination algorithm and score for “points”. Just leave blank attribute you don't need it. (name=””).
Here is the example of result:
<result name="fresh" minScore="0" maxScore="10" comb="combination_of_identifiers_here">
<redirect>http://www.example.com/redirect_1</redirect>
<text>You are very sweet and romantic person. Floral scents are well suited to you. Choosing a perfume,
remember that they must be very soft and unobtrusive. Only you and people close to you should be aware
that you use perfume.
</text>
<HTMLPage>html_results/fresh.html</HTMLPage>
<twitter>I'm sweet and romantic =) According to test results.</twitter>
<links>
<link>
<linkText>Good Perfume</linkText>
<linkAddress>http://www.example.com/something_1.html</linkAddress>
<linkPicture>images/result/1.gif</linkPicture>
<shortDescription>Creating perfumes through reverse engineering with analytical techniques such as
GC/MS can reveal the "general" formula for any particular perfume. The difficulty of GC/MS
analysis arises due to the complexity of a perfume's ingredients.
</shortDescription>
</link>
<link>
<linkText>Another Good Perfume 1</linkText>
<linkAddress>http://www.example.com/something_2.html</linkAddress>
<linkPicture>images/result/2.gif</linkPicture>
<shortDescription>This is particularly due to the presence of natural essential oils and other
ingredients consisting of complex chemical mixtures. However, "anyone armed with good GC/MS
equipment and experienced in using this equipment can today, within days, find out a great deal
about the formulation of any perfume... customers and competitors can analyze most perfumes more
or less precisely."
</shortDescription>
</link>
</links>
</result>
Name is used for “popular” algorithm. “minScore” and “maxScore” for “points” algorithm. “Comb” for combination algorithm.
You can use as much links as you want. HTMLPage tag includes reference to an HTML page for current result.
Only one DIV will be used from HTMLPage source - DIV with id="resultNode".
Example of HTMLPage:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="resultNode">
<p>Fresh result</p>
</div>
</body>
</html>
Only <p>Fresh result</p> in this case will be used as a result.
SETTINGS
There are some simple settings that can be used to customize quiz behavior.
Common quiz settings:
"dataFile": "jsCustomTest.xml", // data file name must be on the same domain. XML or JSON format.
"formListener": "submit.php", // Script/Servlet name that listens for result data.
"targetDiv": "jsCustomTest", // Div where quiz will be build
"showQuestionsOneByOne": {
"enabled": true, // Show ony current question
"mode": "hide" // "hide" or "collapse" others
},
"useDefaultResult": true, // If no result was found use default. May be especially useful with calculation == "comb".
"calculation": "popular", // "popular", "score", "comb"
"resultPage": "default", // "default", "redirect", "silent", "HTMLPage"
Settings for result page generated by script "resultPage": "default":
"resultLinks": true, // Show result links or don't
"linksInNewPage": false, // Open links in new page
"resultParagraph": true, // Show result text or don't
"resultBackBtn": true, // Show repeat button or don't
"formResult": true, // Show form on result page or do not
"socialCallbacks": { // Creating buttons for posting to twitter and Facebook
"getTwitterPostButton": true, // show twitter button
"getFBPostButton": true // show Facebook button
},
Settings for "resultPage": "silent":
"selfDestruction": {
"enabled": true, // Delete quiz div from DOM after complete. (Works only if "resultPage" is set to "silent")
"destructionTimer": 5000 // Time before self-destruction initiated in ms. 1000ms = 1 second.
}
If you have questions or ideas - feel free to send me a letter: [email protected]
About
JavaScript quiz engine that supports JSON as data source. Has three result calculation algorithms.
Topics
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published