Read Microsoft Word - Xerte Dynamic Templates.doc text version

Dynamic Templates with Xerte

Advanced Interactive Development Julian Tenney August 2007

Introduction....................................................................................................................3 A Simple Quiz Template ...........................................................................................4 Step One: Create the Project Files .............................................................................4 Step Two: Create the XML Template........................................................................4 Step Three: Load the XML into Xerte.......................................................................5 Step Four: Create the Wizard.....................................................................................5 Step Five: Create the Template..................................................................................7 Set up the Background Image ................................................................................8 Setup the Introductory Text ..................................................................................9 Create the Right Number of Questions..................................................................9 Create the Prototypical Question Page ................................................................10 Create the Feedback Page ....................................................................................13 Packaging and Distributing the Template................................................................13 Installing a Template Package .................................................................................14 Creating a New template Project .............................................................................14 Appendix One: .xwd Syntax ....................................................................................16

2

Introduction

Xerte supports a powerful workflow for creating, distributing and using dynamic templates. Developers can easily create dynamic templates that are driven by xml data. The template will read in the xml data and script in the template will dynamically produce the required content as the template runs. The template is entirely self-contained: a new instance of the template only requires changes to the xml file. As editing xml by hand is not for everyone, Xerte also makes it easy to create a wizard to edit the xml file using friendly controls. For example, consider a simple quiz. The quiz contains a number of questions, and each question contains a number of different options. Some of those options are correct and some are incorrect. All of the data for the quiz is held in an xml file. When the template is designed, we do not know how many questions are in the quiz, how many options each question might have, or which options for each question are correct. The template must read in the xml file and create the content based on the information it finds there. Xerte makes this quite straightforward. With a template created, the only thing that needs to change each time you want a new version of the template is the content in the xml file. This is much easier than adapting an entire Xerte project for re-use. The xml file contains only the information that might change each time. The Xerte template contains the logic that never changes. By separating these two elements, re-use is far simpler. As changing the xml by hand requires a degree of technical skill, and in any case is error prone. Xerte allows you to easily create a wizard that will edit the xml file for you. This is done by creating a type of style sheet that accompanies the xml file, and allows Xerte to dynamically create the required wizard. This greatly simplifies the effort involved in creating friendly wizards for each template you create. In this document we'll look at a simple example that will help get you up and running with Xerte's templates quickly. You'll soon see that the workflow is quite simple, and facilitates powerful productivity. Files to accompany the example in this document can be found at: http://www.nottingham.ac.uk/xerte/manual/templates.zip

3

A Simple Quiz Template

In this example we'll work through the scenario outlined in the introduction, and create a simple dynamic quiz application. We'll use the default Xerte interface to provide a sequence of questions to the user. Each question will have a number of options, one of which will be correct. The user will see some introductory information, take the quiz, and then see their result. There will be a background graphic visible throughout the quiz.

Step One: Create the Project Files

First of all create the three files you'll need for your project. You'll need a new Xerte file quiz.rlo; an xml file quiz.xml and a style sheet for the wizard quiz.xwd (this is simply an empty text file).

Step Two: Create the XML Template

Now we need to start creating the XML we will need for our template. Open quiz.xml in an editor of your choice. We need information for the introduction to the quiz, and information for each question. For each question, we need a number of options. The xml should look something like this:

4

The xml contains a quiz. The quiz has a background attribute. Inside the quiz is some introductory text, and one question. The question contains two options, and each option has an attribute defining whether that option or correct or not. This is all we need in our xml file.

Step Three: Connect the Template to the XML File

Open quiz.rlo in Xerte. On the Learning Object icon, add the property `templateData' and set it to point to the xml file we just created:

Notice the Learning Object icon now contains a small cogwheel icon. This tells you that this is a template. When we have created the wizard, you'll be able to double-click the Learning Object icon to open the wizard to edit the xml. We'll create the wizard next.

Step Four: Create the Wizard

We need to create a style sheet which will tell Xerte how we want our wizard to appear. This is the quiz.xwd file. Double-click the file to begin creating the wizard's style sheet. The .xwd file is an xml file. It must have the same name as

5

the xml it edits (in this example quiz.xml and quiz.xwd). It always starts with an opening <wizard> tag which surrounds the style information. The xwd file contains an entry for each type of node you have in the xml file. This defines the type of control you want to use to edit that information in the wizard. It is helpful to refer to the xml file as you create the style sheet. The XML File:

The Wizard Style Sheet:

Take a look at how the style sheet is created. For each type of xml node in the xml file, there is a corresponding node in the style sheet. This node defines: The type of control used to edit the xml file for that node or one of its attributes. For some controls you will also specify their properties, such as height or width. Whether the user can duplicate that node or not. In this example some items are not allowed to be duplicated ­ for example, there will only be one introductory text. Other items can be duplicated by the user ­ for

6

example, there can be as many questions as the user wants, and as many options in each question. Help for each type of node. This provides help to the end-user whilst using the wizard.

Now we can double click the Learning Object icon in Xerte to open the wizard and begin editing our xml file:

You can see the xml represented by the tree on the left hand side. When a node is selected it can be duplicated or deleted using the icons next to it in the tree. As each node is selected in the tree, the controls on the right hand side allow the user to edit the xml using the controls specified in the style sheet (.xwd) file. The help defined in the style sheet is shown below the controls. That's it. You have a functioning wizard with which to make all the necessary edits to the xml. You can browse for a background image and have it added to your project files. You can write the introductory text. You can duplicate as many questions as you want, and add options to each question, and set which options are correct, and you get help and guidance along the way.

Step Five: Create the Template

Now we need to create a dynamic Xerte template that can consume this xml and produce the quiz. Let's return to the Xerte file. We need to think through what we want to achieve now. We want to: Load the Background Image

7

Create the intro text Create the right number of questions. Each question will be in a top-level Xerte page. Each question must produce the right number of options, and it should judge whether the user got the answer correct, and keep score. At the end of the quiz, the user should get some feedback on their performance.

This shows the initial structure of the file. We have some script that will run to set the piece up, an entry-frame for the background image, a introduction page, a page for a prototypical question that we will duplicate and a page for feedback, which the template will generate based on the user's score. Let's take those items one at a time:

Set up the Background Image

8

This is easy. Just add a graphic icon to the entry frame and set the url property to use our xml data, and set the x and y properties to position the image. We are assuming that our background images will be 350 x 450 pixels. This is something that should go in the help for the quiz.

Setup the Introductory Text

This is very similar to setting up the background image.

Add a text icon to the intro page. In the text for the icon, add an expression that will return the introductory text from the xml, and then set the properties to position the text.

Create the Right Number of Questions

This is done using the setup script icon. (To add a setup script icon, you must right-click the learning object icon and select `Add Setup Script...' from the context menu).

9

Code in a setup script icon will only run once. It is useful for initialising your template. This is where things start to get interesting. First of all we use some code to find out how many questions are in our xml file. We store this value in the variable quesCount. Then we use this value to create the right number of pages in the Xerte file using the expression icon.nextSibling.firstChild.duplicate(value). Important! What's going on here? Remember that a Xerte file is an xml file. It is parsed by the Xerte engine at runtime and the content is created, icon by icon. When this setup script runs, the rest of the xml in the .rlo file has not been parsed yet. That means it is possible to manipulate the xml and create the structure that we ultimately want the engine to parse. What this code does is to duplicate the prototypical question page in the Xerte file as many times as there are questions in the xml file minus one (because we have one prototypical page to begin with). This is an important concept when developing dynamic templates in Xerte.

Create the Prototypical Question Page

This is the most difficult part of our project. In our question page (the one that will be duplicated as many times as there are questions in the xml) we need a prompt, and an interaction icon with as many responses as the question has options. Some script needs to judge whether the question is correct.

10

Firstly we add a script to the page and use it to get the current question number. This will be useful in expressions later. Secondly, we set up the prompt. We use an expression to read the text from the right part of the xml file.

Thirdly we use some script to build the interaction. This is very similar to the script we used earlier to create the question pages.

11

Notice that we use some logic to make sure this operation is only carried out once. If the user returns to this page, then we don't want another set of responses being added to the question. Then we use some script to judge the user's response. This is generic code that can work in any question, under any response, so we can happily duplicate the icons. We use expressions to return the current index of the chosen option.

We also want to show the user which answer they chose if they return to a page they previously answered a question on:

12

Create the Feedback Page

We do this using a text icon containing an expression to show some feedback.

Our template is complete.

Packaging and Distributing the Template

Now the template is complete, you can package it and distribute it to other Xerte users. Follow these steps:

13

Rename the quiz.rlo file to quiz.rlt. The .rlt extension tells Xerte there is a wizard attached to the file and Xerte will then open the wizard when it opens the file. Select `Create template Package' from the templates menu. You will be asked for a file name. In this example `simpleQuiz.xtp' would be appropriate.

The .xtp file can now be distributed to all Xerte users.

Installing a Template Package

To install a template package created by other Xerte users, select `Install Template Package' from the templates menu. Browse to the file you've been sent, and Xerte will install it.

Creating a New template Project

To create a new project based on a template package, select `New Template Project' from the file menu. Browse to the template package you want to use.

14

You'll then be asked for a location for the new project (you can make a new folder at this point of you wish). Xerte will then unpack the template and associated files, and open the wizard for editing.

15

Appendix One: .xwd Syntax

The .xwd file contains information that allows Xerte to create the wizard interface for your xml data. The .xwd file always starts with the <wizard> tag. For each type of node in the xml file, you create a node in the xwd file. This tells Xerte how you would like users to edit the xml data. The following nodes are valid .xwd: <node /> <node type="text" label="Write text here"> <node type="drawing" label="Diagram"> For each type of node you create, create a child node for each attribute, defining the control the user will use to edit the attribute. The following are valid definitions for attributes: <attName type="CheckBox" label="Feedback"/> <attName type="ColourPicker" label="colour"/> <attName type="ComboBox" label="Options" options="One,Two,Three" width="100"/> <attName type="DataGrid" label="items" width="390" height="200"/> <attName type="Media" label="Image File"/> <attName type="NumericStepper" label="Max Attempts" min="0" max="3" step="1"/> <attName type="TextInput" label="Prompt"/> <attName type="TextArea" label="Feedback" height="200"/> You can also add help to each node. Help will be shown at the bottom of the form, after all the controls have been built, and can display an optional image: <help image="assets/screenshot.jpg"><![CDATA[Here is some help]]><help>

16

Information

Microsoft Word - Xerte Dynamic Templates.doc

16 pages

Find more like this

Report File (DMCA)

Our content is added by our users. We aim to remove reported files within 1 working day. Please use this link to notify us:

Report this file as copyright or inappropriate

627222


You might also be interested in

BETA
Microsoft Word - Xerte Dynamic Templates.doc