Rich popup glossary
To create a rich popup glossary containing content such as an image, you will first need to inject the desired popup content somewhere else in the item. The content must be wrapped in a div with a unique id and the class glossary-element. The glossary element will get moved into the popup glossary. All glossary-elements in your item can be wrapped in a div with class glossary-list hidden so that they stay hidden from view before the glossary is rendered.
<div class="glossary-list hidden">
<div class="glossary-element" id="glossary-image">
<img alt="NEVER LEAVE LUGGAGE UNATTENDED" src="images/sign.png"/>
</div>
</div>
Once you have the content that will be injected into the popup, create a popup glossary link with the class keyword_glossary:idref to signal that the glossary should contain another element, not plain text. Additionally, you must incude data-glossary-idref="{id}" to tell the glossary which element to contain. In this example, the glossary will contain the element with id "glossary-image" which is defined above.
<p>Look at the text in the <span class="keyword_glossary:idref" data-glossary-idref="glossary-image">picture</span>.</p>
Following the same pattern, you can inject other rich content, such as an animation, into a popup glossary. In a glossary-element div, include the object tag and code for the animation and reference it in the popup glossary link span. There is an example in the item on this page.
<h4>Examine the <span class="keyword_glossary:idref" data-glossary-idref="glossary-animation" id="glossary2">Tumbling</span> Tetronimo</h4>
Finally, it is possible to include multiple types of glossaries (plain text, rich content) in a single item, as seen in this sample markup.
<p>Look at the <span class="keyword_glossary:Popup%20with%20only%20text.">text</span> in the <span class="keyword_glossary:idref" data-glossary-idref="glossary-image">picture</span>.</p>
| Get Responses: | [ Click Get Responses ] |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Thie example adapted from the PET Handbook, copyright University of Cambridge ESOL Examinations -->
<assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" adaptive="false" identifier="popup-img" timeDependent="false" title="Popup with Image" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p0 imsqti_v2p0.xsd">
<responseDeclaration baseType="identifier" cardinality="single" identifier="RESPONSE">
<correctResponse>
<value>ChoiceA</value>
</correctResponse>
</responseDeclaration>
<outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE">
<defaultValue>
<value>0</value>
</defaultValue>
</outcomeDeclaration>
<itemBody>
<div class="row">
<div class="span6">
<p>Look at the <span class="keyword_glossary:Popup%20with%20only%20text.">text</span> in the <span class="keyword_glossary:idref" data-glossary-idref="glossary-image">picture</span>.</p>
<choiceInteraction maxChoices="1" responseIdentifier="RESPONSE" shuffle="false">
<prompt>What does it say?</prompt>
<simpleChoice identifier="ChoiceA">You must stay with your luggage at all times.</simpleChoice>
<simpleChoice identifier="ChoiceB">Do not let someone else look after your luggage.</simpleChoice>
<simpleChoice identifier="ChoiceC">Remember your luggage when you leave.</simpleChoice>
</choiceInteraction>
</div>
<div class="span6">
<h4 style="text-align:center;">Examine the <span class="keyword_glossary:idref" data-glossary-idref="glossary-animation" id="glossary2">Tumbling</span> Tetronimo</h4> </div>
</div>
<!-- define rich glossary content here -->
<div class="glossary-list hidden">
<div class="glossary-element" id="glossary-image">
<img alt="NEVER LEAVE LUGGAGE UNATTENDED" src="images/sign.png" />
</div>
<div class="glossary-element" id="glossary-animation">
<object data="null" type="text/plugin+xml">
<param name="markup" value="markup" valuetype="DATA">
<![CDATA[
<div id="tetronimo_container" class="bordered" style="width:225px;height:200px;margin:8px auto 18px;"></div>
]]>
</param>
<param name="script" value="script" valuetype="DATA">
<![CDATA[
jQuery(function () {
var paper = new Raphael(document.getElementById("tetronimo_container"), 225, 200);
var tetronimo = paper.path("M 188 150 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr({
"fill": "#526c7a",
"gradient": "90-#526c7a-#64a0c1",
"stroke": "#3b4449",
"stroke-width": "10",
"stroke-linejoin": "round",
"transform": "r -90"
});
function rotateTetronimo0() {
tetronimo.animate({transform: "r-180"}, 2500, rotateTetronimo360);
}
function rotateTetronimo360() {
tetronimo.animate({transform: "r360"}, 2500, rotateTetronimo0);
}
rotateTetronimo360();
});
]]>
</param>
<param name="scriptlibs" value="scriptlibs" valuetype="DATA">
<![CDATA[
{ "src":"public/javascripts/raphael-2.1.2.min.js","key":"raphael" }
]]>
</param>
</object>
</div>
</div>
</itemBody>
<responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>
Look at the text in the picture. What does it say?
