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. <div id="quiz_container"></div> 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. <custom type="quiz" id="quiz" width="100%"> <settings cheatmode="false" timer="false" radiobutton="true" radiobuttonx="10" radiobuttony="10" correctx="calc(100% - 30px)" correcty="5" attempts="1"/> 16/07/19 Quiz Engine guide v2.5 4 6. The settings node has a number of attributes: <settings cheatmode="false" timer="false" radiobutton="true" radiobuttonx="10" radiobuttony="10" correctx="calc(100% - 30px)" correcty="5" attempts="1"/> 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. <question id="q1" time="15" event=""> … </question> 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. <button target="footer_next" anim="none" event="btnover,loadNextQuestion"><! [CDATA[Next]]></button> 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. <option correct="true"> <text margin-bottom="5" anim="show" animtime=“1" event="optionover,selectandsubmit" class="optionBox"><![CDATA[<p>No</p>]]></ text> </option> 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. <button id="submitBtn" margin-top="20" margin-right="10" anim="disable" event="btnover,submit"><![CDATA[Confirm]]></button> Note that multiple events can be added to an element using a comma separated list, e.g. <button id="submitBtn" margin-top="20" margin-right="10" anim="disable" event=“event1,event2,event3"><![CDATA[Confirm]]></button> See the XML schema overview section for more details about defning events. 10. Defne the pass, partial and fail feedbacks, i.e. <fb id="pass" event=""> <text anim="none" margin-top="30" margin-bottom="30"><![CDATA[<p class="p_24">Correct!</p><p>You can add as many questions as you like.</p>]]></ text> <button target="footer_next" anim="none" event="btnover,loadNextQuestion"><![CDATA[Next]]></button> </fb> Any elements defned within a <fb=“pass”> node, will be animated on screen if the user matches all items correctly. Use text and/or images. An optional event can also be included. 16/07/19 Quiz Engine guide v2.5 6 Any elements defned within a <fb=“partial”> node, will be animated on screen if the user matches one or more of the items correctly. Use text and/or images. An optional event can also be included. Any elements defned within a <fb=“fail”> node, will be animated on screen if the user matches none of the items correctly. Use text and/or images. An optional event can also be included in the feedback node and this is triggered when the feedback is shown. 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