Simple XML Quiz

This quiz allows for an unlimited number of questions and answers to be passed through a XML file. If there are more options for answering than fit the page, a scroll is automatically displayed.

Each question has exactly one correct answer, and in order to continue to the next question, it's mandatory for the user to choose one answer.

For each correct answer, the user receives one point. For each incorrect answer, the user receives zero points.

At the end of the quiz, based on the total number of accumulated points, the user receives a message set in the XML, and the results are saved in a text file.

The text file is scores.txt. For each user the results are saved on a new line. The information is formated like this:

USER IP, DATE, SCORE
USER IP, DATE, SCORE
USER IP, DATE, SCORE
USER IP, DATE, SCORE

This process is transparent to the user. Note you need a server with PHP support.


The final results passed to the user are calculated like this:

0 - 2 (0, 1, 2 points)
3 - 4 (3, 4 points)
5 - 6 (5, 6 points)
7 - 8 (7, 8 points)

Any values and any number of values can be passed here as long as the last is smaller than the total number of questions (since the maximum result can be equal to this number if the user answers all questions correctly).

In the settings XML file you can edit colors and sizes, and the XML is very intuitive. Please check the help tab for more information.

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Simple XML Quiz - change log

 2010.07.29 - version 1.0.1
- ofString XML setting fixed


 2009.08.03 - version 1.0
* First release!

Simple XML Quiz - tips and tricks

Introduction: 

     This is a fully customizable Simple XML Quiz, with support for unlimited questions and answers. Only one answer at a time can be the correct answer.

     Everything is customizable in the XML files, including the question’s height, text color, size and much more.

     This Simple XML Quiz contains a handful of features and settings. It is easy to use the quiz in your Flash projects or as an independent Flash Quiz Component on your html based website.

     If you want to use the quiz in a Flash file, importing it is as easy as moving some actionscript files around and dragging the movieclip containing the quiz in your Flash file.

     Skinning is very simple as well. To edit the file you don't need any Flash experience, because all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the size of the elements, the size of the quiz and much more.

     The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Simple XML Quiz such as the fonts, the .ai source files, and the .fla source file.

Features:

1. Customize the quiz through the XML file.
2. Add unlimited questions and answers.
3. Customize the colors from the XML file.
4. Supports scrolling.

 

Folder structure:

     Please navigate to the deploy folder, inside the project folder. This folder contains all the files you need to upload to your server to have the Flash XML Quiz work. Your server must support PHP.

     quiz/xml/settings.xml

     XML configuration file - This is where you make all changes to the look and feel of your Flash XML Quiz.

     quiz/xml/quiz.xml

     Questions/Answers XML configuration file - This is where you make all changes to the quiz questions and answers.

     js/swfobject.js

     Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.

     js/expressInstall.swf

     SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.

     preview.swf

     This is the component swf file which is embedded in your website.

     index.html

     HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file, using any text editor such as Notepad or Textedit.

 settings.xml structure: 

     Below you can see what each of the attributes in the XML file means:

<settings width="560"
height="420">

     Here you can define the quiz width and height if these are not defined in the HTML (for example when you use the quiz inside another Flash file).

<loader color="0xEEEFEF"/>

     Here you can define the loader's color.

<background strokeColor="0xC8CACC"
fillColor="0xF3F5F5"
contentMargin="15"
contentYPosition="10"/>

     Sets the poll background stroke color, fill color and width of the content margin, as well as the position from the top of the quiz of the questions.

<splash_screen strokeColor="0x27AAE1" 
fillColor="0x27AAE1" 
textColor="0xffffff" 
buttonFillColor="0xffffff" 
buttonStrokeColor="0x999999" 
buttonTextColor="0x333333" 
buttonText="Start quiz" 
buttonHeight="26" 
overButtonColor="0x27AAE1" 
overButonTextColor="0xffffff"/>

     The XML attributes are self explanatory. These control the splash page.

<questions_screen questionTextColor="0x231F20"
questionBackgroundFillColor="0xffffff"
questionBackgroundStrokeColor="0x2A2828"
answerActiveStrokeColor="0xEEEFEF"
answerActiveFillColor="0xF4F4F2"
answerInactiveTextColor="0xA7A9AC" 
answerActiveTextColor="0x231F20" 
answerInactiveStrokeColor="0xEEEFEF" 
answerInactiveFillColor="0xF8F8F8" 
questionInactiveCircleColor="0xEEEFEF" 
questionActiveCircleColor="0x27AAE1" 
questionPointColor="0x27AAE1" 
questionPositionColor="0x231F20" 
questionsPositionNumberColor="0x27AAE1" 
nextButtonFillInactiveColor="0xF6F7F7" 
nextButtonStrokeInactiveColor="0xE1E2E3" 
nextButtonTextInactiveColor="0xE6E7E8" 
nextButtonFillActiveColor="0xffffff" 
nextButtonStrokeActiveColor="0x2A2828" 
nextButtonTextActiveColor="0x231F20" 
nextButtonText="next" 
finishButtonText="finish" 
ofString="of" 
buttonHeight="20" 
overButtonColor="0x27AAE1"/>

     The XML attributes are self explanatory. These control the questions pages.

<final_screen strokeColor="0x27AAE1" 
fillColor="0x27AAE1" 
questionTextColor="0xffffff" 
resultsStrokeColor="0xA3A0A0" 
resultsFillColor="0xffffff" 
resultsTextColor="0x000000" 
pointsTextColor="0x27AAE1" 
pointsStringTextColor="0x231F20" 
pointsString="points"/>

      The XML attributes are self explanatory. These control the results page.

<scrollbar backgroundWidth="12" 
scrollerWidth="6" 
backgroundColor="0x27AAE1" 
scrollerColor="0xffffff"/>

     Sets the scroll width, background width, scroll background color and scroller's color. The scroll only appears when it's needed. (meaning you want to display more answers inside an area than fit)

<error textColor="0x27AAE1" 
visibilityTime="5" 
unselectedChoice="Please select an option"/>

     Self-explanatory attributes. Basically you add the strings for each textfield, on particular situations.

quiz.xml structure:

     This xml contains the quiz data. It has a node for the description:

<description><![CDATA[Do you miss all the incredible clothes worn by Carrie and Co. on "Sex and the City"? This "designer" quiz spans all six seasons. For fashion addicts only!]]></description>

     Several nodes for questions and answers like :

<item id="1" correct="1">
	<question><![CDATA[In season one's "The Power of Female Sex", in which fabulous store are Carrie and Amalita when Amalita states, "You can pay me back NEVER!"?]]></question>
	<answer id="1"><![CDATA[Christian Dior]]></answer>
	<answer id="2"><![CDATA[Jimmy Choo]]></answer>
	<answer id="3"><![CDATA[Manolo Blahnik]]></answer>
	<answer id="4"><![CDATA[Dolce & Gabbana]]></answer>
</item>

     Note each question has it's own id, as well as each answer. The correct attribute holds the value of the correct answer, as an id.

     There is one more node for the results screen text and user message:

<final_screen>	
	<limit value="4"><![CDATA[Congratulations!]]></limit>
	<limit value="8"><![CDATA[Congratulations!]]></limit>
</final_screen>

     The final results passed to the user are calculated like this:

<limit value="2"><![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></limit>
<limit value="4"><![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></limit>
<limit value="6"><![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></limit>
<limit value="8"><![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></limit>

0 - 2 (0, 1, 2 points)
3 - 4 (3, 4 points)
5 - 6 (5, 6 points)
7 - 8 (7, 8 points)

     Any values and any number of values can be passed here as long as the last is smaller than the total number of questions (since the maximum result can be equal to this number if the user answers all questions correctly). In this example the total number of questions is 8,  so the maximum value needs to be 8 as well.   

Flashvars:

     In the html file you can set some variables for the quiz like dimensions (width and height), the path to the files if you choose to put them in another location rather than the same folder of course, and the quiz data xml files.                        
     

flashvars.stageW = stageW;
flashvars.stageH = stageH;
            
flashvars.pathToFiles = "quiz/";
            
flashvars.settingsPath = "xml/settings.xml";     
flashvars.xmlPath = "xml/quiz.xml";

Support:

     If you need any help using the product, please contact us at support@flabell.com.