English
资源说明：Play interactive quizzes on STLtoday.com
---------------------------------------------------------------------------------------
Script Name: HTML Quiz Reader
Description: A Javascript/jQuery reader to power HTML quizzes in the new PD quiz format
Author: Josh Renaud
Version: 0.3a
Date: 2014-01-25
---------------------------------------------------------------------------------------
This script expects some JS variables to be included in the individual quiz's HTML file.
These variables are generated by the Quiz Converter (XML -> HTML) or the HTML Quiz Maker.
totalQuestions
scoringRange[]
scoringEvaluation[]
These variables are optional. Set them to true to activate features:
randomTrueFalse -- Causes t/f answers to be randomized (useful w/ custom labels)
hasFlash -- (to be supported in a future version)
These HTML classes are optional for each question, and enable special effects:
.effect-dissolve -- Dissolves FG image into a different BG image on answer
.effect-sound -- Allows sound effects to play before and/or after answer
.effect-zoom-out -- Zooms out from an blown-up image on answer (most common)
.effect-zoom-in -- Zooms into an image on answer
.effect-dissolve -- Dissolves FG image into a different BG image on answer
.transition-scroll -- Scroll FG from one x,y position to another on answer
.transition-bg -- Adds BG image (name in form 00b-fade.jpg). Use with transparent FG img.
---------------------------------------------------------------------------------------
CHANGELOG
2015-12-03-- v0.3b
* Added support for effect-dissolve with multiPhotos to quizReader.
+ This fix is backwards-compatible with multiPhotos that are NOT inside a div.layer.
+ Need to update quizMaker to output multiPhotos inside of a div.layer by default.
2014-01-25-- v0.3a
* Added support for zooming effects in CSS3 browsers ("effect-zoom-in, effect-zoom-out" classes).
* Commented some old code from effect-dissolve which I forgot to remove when I added support for multiple dissolves.
2014-01-13-- v0.3
Major new features:
* Added support for sound effects in HTML5 browsers ("effect-sound" class).
+ Sound effects can be played when a question is displayed, and/or when user answers
+ A sound effect played on answer will be paused if the user immediately clicks "continue"
* Added support for quiz "cover" and play button.
+ This is necessary to keep sounds from playing immediately in office environments, etc.
+ Old quizzes without cover/play button will continue to work just fine.
* Revamped effect-dissolve to allow multiple images to dissolve in succession. Now also works on judgment screen.
* Revamped CSS code to use Roboto font and to create consistent, better-looking buttons.
Tweaks:
* Reader adds "no-touch" class on non-mobile platforms. (This helps hide :hover classes from mobile)
* Further CSS improvements for mobile.
* Instead of passing the variables i or quesNum to special effect functions such as checkSound(), now I am passing the jQuery object for a particular question. This allows me to pass non-questions as well, such as the jQuery object for #scoring. I also went throughout the script and replaced instances of $('#ques' + i) with a reference variable called $thisQuestion.
2013-12-09-- v0.2h
* Added new media queries to CSS for mobile/iOS template.
* Slightly changed handling of answered questions in quizReader.js so that I can hide answer buttons on iOS once a question has been answered.
2013-11-11-- v0.2g
* Fixed page title cleaning routine since TownNews updated the HTML asset template.
2012-11-05-- v0.2f
* Added code to clean the page title (remove extra bits added by the STLtoday HTML asset template).
* Fixed the "Play Again" button, which was broken in v0.2e.
2012-10-29-- v0.2e
"Transitions" are becoming "Effects." What was called "Fade" is now more accurately called "Dissolve,"
and it is implemented in quizMaker. quizReader has been updated to work with the Dissolve Effect.
The other transitions will slowly be implemented in quizMaker, but probably will keep their names.
2012-04-02-- v0.2d
Updated some routines to eliminate the need for the quesType[] array. All the questions had
classes already, so this array was redundant.
2012-03-05-- v0.2c
Updated the Scroll routines to allow more granular control. Now you can specify in HTML these
attributes: xScrollFrom, yScrollFrom, xScrollTo, yScrollTo. These are coordinates in terms of
the image's upper left corner. All are optional.
The script assumes (if nothing is specified) that the image will start at position 0,0
(top: 0, left: 0). It also assumes (if nothing is specified) that the image will scroll to
the offset between the image's height and a normal height (358), and the offset between the
image's width and a normal width (600).
2012-02-23-- v0.2b
Changing the judgment screen to include a "Share your score on Facebook / Twitter feature"
2012-02-14-- v0.2a
Adding class that allows for background image. For now, background must be in form: 00b-fade.jpg
.transition-bg
Also adding support for randomized true/false answers. Normally you wouldn't want this,
but if you use custom labels for True/False (as in the Mardi Gras masks quiz), you might.
This is triggered adding var randomTrueFalse = "true";
2012-02-06 -- v0.2
Adding support for question transitions including:
* FADE: Adds a background images to div.photos, then fades the foreground image(s)
when question is answered
* SCROLL: Scrolls the foreground image from one side to another (top to bottom, left to right, etc)
These transitions are indicated by adding classes to the question's div.questions:
.transition-fade or .transition-scroll
Transitions are not yet implemented in QuizMaker and have to be created by hand.
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
