Understanding the Quiz Engine Quiz Engine guide v2.5 2
Table of Contents Guide to the quiz demo ...... 3
Files and folder structure ...... 7
XML Schema Overview ...... 8 id ...... 10 position ...... 10 x ...... 10 y ...... 10 target...... 10 width ...... 11 height ...... 11 scroll ...... 11 anim ...... 11 animtime...... 12 animdelay ...... 12 animcomplete ...... 12 ease ...... 12 class ...... 13 event ...... 13 Text element example ...... 14 Image element example ...... 14 Div element example ...... 14 Button element example ...... 15 Screen element example ...... 15 Loading the elements ...... 15
Contact ...... 15
16/07/19 Quiz Engine guide v2.5 3
Guide to the quiz demo
1. A containing div is defned in the body of the html page. This containing div is sized and positioned in a css fle. The container can be located anywhere within your website or be a single container in a standalone page.
2. The init() function in index.html reads in an xml fle (eg lib/xml/quiz_leftaligned.xml) and creates a JavaScript screen object.
The screen object has a load() method to load all the elements defned in the xml fle.
//create screen object which loads the xml and creates all screen elements quiz = new Screen({id:"myQuiz", xmlPath:"lib/xml/quiz_leftaligned.xml"});
//choose a target div var targetDiv = get("quiz_container");
//load it quiz.load(targetDiv,false);
Important note: By default, Google Chrome, Internet Explorer, Firefox (version 68 and above) and Opera will not read in XML fles when testing locally. The local security policy of these Browsers will not apply when running on a webserver. When testing the Quiz offline, you can use Firefox (version 67 or lower), Safari (with local fle restrictions turned off from the Develop menu) or Chrome (using the --allow-fle-access-from-fles terminal command).
3. The xml fle defnes all the elements that make up the quiz. Open the xml fle in your text editor of choice.
4. See the XML schema section of this document for an overview of the supported elements and attributes. You can add, position, style and animate any div, text, button or image element onto the page.
5. The custom node defnes all the elements in the quiz. It has a type attribute of “quiz”. This is required to identify the custom tag as a quiz and should not be changed.
16/07/19 Quiz Engine guide v2.5 4
6. The settings node has a number of attributes:
cheatmode=“true” or “false” shows the correct options on question load (useful for testing) timer=“true” or “false” turns the quiz timer on/off radiobutton=“true” or “false” shows a radio button style icon in the options radiobuttonx=“10” controls the left position of the radio button radiobuttony=“10” controls the top position of the radio button correctx=“calc(100% - 30px)” controls the left position of the tick icon (which will display next to any correctly selected options) correcty=“5” controls the top position of the tick icon attempts=“1” defnes the number of question attempts before a See correct answer button is shown. This functionality is only relevant if a Confrm, Reset and See correct answer button is used within the quiz.
7. Each question is defned within a question node. e.g.
The id for each question node should be unique.
If a timer has been included (using timer=”true” in the settings), the time attribute defnes the amount of time (in seconds) to answer the question. If the time runs out, the question will be hidden and the contents of the “timeout” node are displayed.
8. For each question you can defne images, text, a variable number of options, confrm, reset, see correct answer buttons (if required) and feedback text/images/buttons. To add a question, copy and paste a question node and change the question id.
Elements can be rendered inside other elements by using a target attribute, e.g.
You can also use the “div” element for grouping and nesting elements.
16/07/19 Quiz Engine guide v2.5 5
9. Multiple choice options are defned inside an option node. Options can be text or image elements. Mark an option as correct using correct=”true”, e.g.
]]>Note the events called on the option elements. Events are defned at the top of the XML fle and control rollover, rollout and click events.
The “selectandsubmit” event selects the option and immediately submits the answer. If you prefer for the user to confrm their selection(s) using a “Confrm” button, you can just call the “select” event from the option element and include a Confrm button to call the “submit” event, e.g.
Note that multiple events can be added to an element using a comma separated list, e.g.
See the XML schema overview section for more details about defning events.
10. Defne the pass, partial and fail feedbacks, i.e.
You can add as many questions as you like.
]]>Any elements defned within a
16/07/19 Quiz Engine guide v2.5 6
Any elements defned within a
Any elements defned within a
11. If using a timer, defne the timeout elements inside the timeout node.
12. Defne the quiz passing and failing feedback elements inside a score node. Defne the masteryscore (the percentage required to pass) in the masteryscore attribute, e.g. masteryscore=”80” (which is a passmark of 80%)
16/07/19 Quiz Engine guide v2.5 7
Files and folder structure
Multiple demo launcher fles are provided as examples: Index.htm (select a demo) quiz_2columns_timer_bootstrap_insitu.html quiz_2columns_timer_bootstrap.html quiz_branch.html quiz_centered.html quiz_leftaligned_insitu.html quiz_leftaligned_timer.html quiz_leftaligned.html quiz_with_form.html single_question.html
Each demo uses a css and xml fle with the same name for ease of identifcation. It is recommended that you keep a backup of the demo folder so you can refer back to the original fles. lib/assets folder Contains all the images used in the demo. The developer can add new images as needed. lib/css folder Contains all the stylesheets used in the demo. The developer should add/change styles as needed. lib/js folder Contains all the JavaScript fles used in the demo. The demo html fles all link to the same js fles. essemble_core.min.js jquery.easing.1.3.js jquery.js (version 3.1.1) jquery.transit.min.js mcq.js quiz.js
16/07/19 Quiz Engine guide v2.5 8
XML Schema Overview
The XML schema allows common HTML “elements” to be defned with animation and event properties. The engine reads the schema and creates standardised and dynamic, cross-browser, multi- device HTML.
The schema defnes the following element types:
• Text (sizes, positions and animates a container populated with text, or any other HTML) • Image (sizes, positions and animates an image) • Button (sizes, positions and animates a button) • Div (sizes, positions and animates a container which can contain a group of elements) • Screen (sizes and positions a div and reads in another XML fle which populates that div. Used for complex layout and interactivity) • Custom (quiz settings, questions and feedbacks).
16/07/19 Quiz Engine guide v2.5 9
Note: the engine allows the following css properties to be added to an element:
id padding-right align-content class padding-bottom align-self position padding-left justify-content x (left) z-index order y (top) cursor z-index right min-width foat bottom max-width clear width min-height display height max-height overfow margin vertical-align overfow-x margin-top text-align overfow-y margin-right fex style margin-bottom fex-wrap tabindex margin-left fex-fow role padding fex-grow aria-label padding-top align-items
If no position attribute is defned, positioning is relative.
Here is an example of creating a text element which animates in from the left, taking 1 second, with no delay:
Welcome to my page!
Each element has common attributes to defne size, position, animation, css and events. Let’s look at each attribute in turn.
16/07/19 Quiz Engine guide v2.5 10 id Welcome to my page!
This is optional. If included it should be a unique identifer. This becomes the HTML element id. Events can be setup to animate a batch of elements by referencing their id.
position Welcome to my page!
If not included, the default positioning is relative.
x Welcome to my page!
The left position (in accordance with relative or absolute positioning). You can also use margin-left and padding-left.
y Welcome to my page!
The top position (in accordance with relative or absolute positioning). You can also use margin-top and padding-top.
target Welcome to my page!
Use a target attribute if you wish to create an element inside another element (also checkout the “div” element for grouping and nesting elements). Specify the id of the element you wish to target. The target element becomes the parent container and x and y co-ordinates will be relative to the target element.
16/07/19 Quiz Engine guide v2.5 11
width Welcome to my page!
The width of the element. If omitted or left empty, the width is set to auto. Percentages and calc values are supported, e.g. width=”100%” or width=“calc(100% - 50px)” min-width and max-width are supported, e.g. min-width=”200”.
height Welcome to my page!
The height of the element. If omitted or left empty, the height is set to auto. Percentages and calc values are supported, e.g. height=”100%” or height=“calc(100vh - 50px)”. min-height and max-height are supported, e.g. min-height=”100”. The overfow property can also be specifed in the element xml, e.g. overfow=”hidden”.
scroll Welcome to my page! Lorum ipsum.
If a height value is included on a text element and scroll is set to true, the text will scroll within it’s container (i.e. the container is set to the overfow:auto). You can also use overfow=“auto”, overfow- y=“auto”, overfow-x=“auto”.
anim Welcome to my page!
The anim attribute defnes how the element should build onto the page. Supported animations are “none”, “top”, “right”, “bottom”, “left”, “show”, “hide”, “disable”, “scaleup”, “drop”, “left_value”, “left_+=value”, “top_value”, “top_+=value”, “scale_value”.
16/07/19 Quiz Engine guide v2.5 12
animtime Welcome to my page!
The animation time (in seconds).
animdelay Welcome to my page!
The animation delay (in seconds). Used to stagger animations.
animcomplete Welcome to my page!
The id of an event to call when the animation completes. Used for sequencing animations with other animations and events.
ease Welcome to my page!
The style of animation ease, e.g. Regular.easeOut, Regular.easeIn, Bounce.easeOut, Elastic.easeOut, Elastic.easeIn
16/07/19 Quiz Engine guide v2.5 13
class Welcome to my page!
Applies a css class to the element. The #elementId css method can also be used to apply styles to an element with the matching id. Note you can apply multiple styles by including a space between names, e.g. class=”myFirstStyle mySecondStyle”
event Welcome to my page!
Events can be used to hide, show, disable, enable or animate elements. They can also swap css classNames on elements and call JavaScript functions. Events are defned within rollover, rollout or click nodes:
16/07/19 Quiz Engine guide v2.5 14
Note that “this” can be used to apply the event to the element that called the event.
Multiple events can be attached to an element using a comma separated list:
Events can also affect multiple elements using a comma separated list:
Note that rollover/rollout and click events can be kept separate or combined as needed, as shown in the “over” and “animateMap” example above, where rollovers are assigned by one event and the click is assigned by another event.
Text element example Welcome to my page!
Image element example
Div element example
San Francisco, CA
USA
16/07/19 Quiz Engine guide v2.5 15
Button element example
Screen element example
Loading the elements The engine will queue all the images defned in the XML fle and load them in a batch. A preloader (css3) is shown while the images are loading. Once the image batch is fully loaded, the preloader is removed and each individual element is built on to the page according to it’s own animation properties. Only when all elements have completed animating will any rollover, rollout or click events be applied (in case the element is hovered over or clicked during it’s initial animation this prevents any size and positioning issues).
Contact
For further information or support please email: [email protected]
16/07/19