Channels ▼
RSS

Tools

XLEFF, Flash, and XML


Creating Your Own Exam System

As presented here, the exam program uses the dataset and xmlconnector components in Flash, which requires Flash Professional. I used Flash 8, but compatible versions include MX 2004 and CS3. Instead of Professional, the basic version of Flash can be used if you substitute arrays for the datasets and download and parse the XML files directly instead of using xmlconnector.

In addition to Flash, you need XLEFF. Follow the directions for proper installation, remembering to change the path in your Flash (.fla) to find the directory where you installed XLEFF. You may want to use an editor like Notepad for editing outside of the Flash environment. Using Perl to process the backend is arbitrary; PHP, ASP, or Python work just as well.

Along with the files previously mentioned, you need: an exam fla, Exam.as, preloader_frame1.as, and preloader_frame2.as. The preloader class files can be coded directly into the Flash FLA. However, one possible function of the preloader is to preload variables such as the paths to XML and URLs, and it is convenient to do so without modifying the FLA directly. For example, instead of using FlashVars to preload bio101questions.xml and bio101answers.xml, you can hardcode them into preload-frame2.as.

The easiest way to create your own exam FLA is to either modify exam.fla or the simpleSampler.fla on the XLEFF website. If you decide to modify either FLA, add the component architecture as described in "How To Implement The XLEFF Sampler" (www.xleff.org). If you are using dataset and/or xmlconnector, you might want to link to the professional components of Flash in addition to the basic ones.

Once you've set up the Flash software, you should perform a simple requirements analysis. Asking yourself questions such as "Who is the intended end user?" makes the design process easier. Additional techniques such as storyboarding and UML design also make it easier to keep track of software changes as your program grows.

Exam.as (available here) initializes the necessary variables and contains references to the XML files it needs to create the UI. Notice that the schema and initialization for the dataset connectors are set in the SafeInit section; this must be done because the XLEFF software does not yet contain XML code for the Professional components in Flash. You can use arrays directly instead of datasets. Datasets are convenient because they use the transfer-value pattern like Java. If you have large files with over 1000 elements in a dataset, you should use arrays directly. The number of elements in the dataset affects the size and performance of the SWF. This may be critical if the projected end user is using a dial-up connection to the Internet. When you test the movie in Flash, you should select "view", then "simulate download" to estimate how a large dataset affects your SWF.

For simplicity, Exam.as has minimal references to external class files. The major internal class files used are for button navigation, dataset traversal/parsing, test timing, and component appearance/disappearance. A databinding class, courtesy of Peter Elst, can also be used to bind the components to elements in the dataset instead of linking them directly.

For debugging, I've included two extra components in the program: A Last button, which lets you go to the last question in the dataset; and three gridsets, which let you see how the dataset fills up with questions and answers. To use the Last button, unrem the code in test-view.xml. To use the gridsets, unrem the code in test-view and in Main.as where indicated, as they are disabled by default.

Again, Exam.as sets the maximum allowed number of questions and answers to 18. It also limits the type of questions allowed. By default, the answers must be in the form of single choice, multiple choice, or text boxes. This can be modified to allow other forms such as drag-and-drop.

Once the exam is finished, the endTest function calls up the submission form. I've included code to let users review selected answers. The Submission button collects the data from the dataset (or arrays, if you are using them) and sends them to the backend via a URL you specify. The arrays are sent individually, but you may combine them instead. To do so, unrem the answerTempArray code provided.

Process.pl (here) is a possible Perl backend that is a modification of example1.pl on the Adobe website. The script uses the default submission code and parses the variables individually to send to a location that you need to specify on your hard drive. The script also sends messages to the browser indicating whether the submission was successful.

Conclusion

Because of browser and Flash limitations, security must be handled on the backend. Fortunately, there are freeware scripts in Perl, PHP, and ASP that you can use. The exam client presented here uses the XML files directly. You may wish to use databases such as MySQL and web services written in Java or some other language, instead. This adds increased security.

Future versions of the software will allow login capabilities and more flexibility to the interfaces. Be sure to periodically check out examcomposer.com for updates.

Acknowledgment

Thanks to Laura Sergovic for her design of the UI.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video