Questionmark's Open Assessment Platform

Adobe Flex

Adobe Flex is a powerful application that allows programers and designers to build highly interactive applications or websites based on the Flex framework using Actionscript and Flash.

The following section shows how you can add iframes to your Flex projects to show assessments to your users.

The iFrame Actionscript used in this example was developed by Alistair Rutherford at www.netthreads.co.uk.

If is recommended that you download the example project and experiment by modifying this before you attempt to add this functionality to your own application.

An example project created by Alistair Rutherford can be downloaded here.

Load the example project in to your Flex Builder application. The steps below assume you are using Flex Builder 3:

  1. ​Download the example zip file from this site.
  2. Load Flex Builder 3 or Flash Builder 4.
  3. Click Import > Flex project from the File menu.
  4. Click Browse and locate the zip file you downloaded previously.
  5. Click Finish.

Now that the example project has been loaded you can experiment with modifying it to show your assessments. To insert assessments in to the Flex application:

  1. ​Locate the src folder in the project.
  2. Double-click on the HTMLTest.mxml file.
  3. Locate the following section of code:

    <mx:TabNavigator id="tab"
    width="100%"
    height="100%">

    <local:iFrame id="test1"
    label="Google"
    source="http://www.google.co.uk"
    width="100%"
    height="100%"
    />

    <local:iFrame id="test2"
    label="Yahoo"
    source="http://www.yahoo.co.uk"
    width="100%"
    height="100%"
    />

    </mx:TabNavigator>

  4. Replace the label text in the test1 and test2 sections with a name you want to use to refer to the assessment.
  5. Change the source text in the test1 and test2 sections to link directly to an assessment. Making these changes should result in something similar to:

    <mx:TabNavigator id="tab"
    width="100%"
    height="100%">

    <local:IFrame id="test1"
    label="Quiz on hardware"
    source="http://myperceptionserver/perception5/open.php?SESSION=1272364578712396&amp;NAME=Anon"
    width="100%"
    height="100%"
    />

    <local:IFrame id="test2"
    label="Quiz on software"
    source="http://myperceptionserver/perception5/open.php?SESSION=5463763458734561&amp;NAME=Anon"
    width="100%"
    height="100%"
    />

    </mx:TabNavigator>

  6. Build the application.

It is possible to customize the layout and how your assessments are launched by making some simple changes in the code. For example:

  1. Locate the src folder in the project.
  2. Double-click on the HTMLTest.mxml file.
  3. Replace the following code:

    <mx:TabNavigator id="tab"
    width="100%"
    height="100%">

    <local:IFrame id="test1"
    label="Google"
    source="http://www.google.co.uk"
    width="100%"
    height="100%"
    />

    <local:IFrame id="test2"
    label="Yahoo"
    source="http://www.yahoo.co.uk"
    width="100%"
    height="100%"
    />

    </mx:TabNavigator>

  4. ...with this code:

    <mx:Accordion x="0" y="0" width="90%" height="90%">
    <mx:Canvas label="Assessment 1" width="100%" height="100%">
    <local:IFrame id="test1"
    label="Quiz 1"
    source="http://myperceptionserver/perception5/open.php?SESSION=5463763458734561&amp;NAME=Anon"
    width="100%"
    height="100%"
    />
    </mx:Canvas>
    <mx:Canvas label="Assessment 2" width="100%" height="100%">
    <local:IFrame id="test2"
    label="Quiz 2"
    source="http://myperceptionserver/perception5/open.php?SESSION=1363456258734964&amp;NAME=Anon"
    width="100%"
    height="100%"
    />
    </mx:Canvas>
    </mx:Accordion>

  5. Modify the label and source sections with your specific details and links.
  6. Build the application.