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>
You can also add an audio clip to your glossary definition by providing a reference to the audio media file. As above, simply change the id to {id="glossary-audio"}.
<div class="glossary-list hidden">
<div class="glossary-element" id="glossary-audio">
<object class="simpleplayer" data="assets/Tetronimo.mp3" type="audio/mp3"></object>
</div>
</div>
In this example, the glossary will contain the element with id "glossary-audio" which is defined above.
<p>Click Listen to play the glossary definition of <span class="keyword_glossary:idref" data-glossary-idref="glossary-audio">dystopia</span>.</p>
When properly formatted, the system automatically provides the simple audio player which, when clicked, plays back the audio of the provided audio element. There is an example in the item on this page.
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> <span class="keyword_glossary:idref" data-glossary-idref="n6nSo"/>Tetronimo</span></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 class="glossary-element" id="n6nSo">
<object class="simpleplayer" data="assets/Tetronimo.mp3" type="audio/mp3"/>
</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?
