40668
Adele says, "Hello," from the other side.
Look at the text in the picture. Does it say hello?
The keyword translation popup is structured similar to the rich popup glossary, but it uses different classes. The keyword translation content will need to be injected elsewhere in the item. There should be one div per language with data-lang="{language code}". The content must be wrapped in a div with a unique id and the class keyword-translation-element. The translation element will get moved into the popup glossary. All keyword-translation-elements in your item can be wrapped in a div with class keyword-translation-list hidden so that they stay hidden from view before the keywords are rendered.
Here is an example of the markup for keyword translation content:
<div class="keyword-translation-list hidden">
<div class="keyword-translation-element" id="keyword1">
<div data-lang="en">
<p>Hi there</p>
</div>
<div data-lang="es">
<p>Hola</p>
</div>
<div data-lang="cmn">
<p>Ni hao</p>
</div>
</div>
</div>
Once you have the content that will be injected into the popup, create a keyword link with the class keyword_translation:idref to signal that the keyword translation should contain another element, not plain text. Additionally, you must incude data-glossary-idref="{id}" to tell the keyword which element to contain. In this example, the keyword will contain the element with id="keyword1", which is defined above.
Note: multiple keyword links can use the same keyword-translation-element, as long as they include the same data-glossary-idref="{id}". In the example item below, two links show the translation of "hello."
<p>Adele says, "<span id="glossary" class="keyword_translation:idref" data-glossary-idref="keyword1">Hello</span>," from the other side.</p>
When the glossary is loaded in TN8, only one language's content will be visible if there is a PNP keyword language option defined; if not, the keyword translation will not appear at all. Popups that are not keyword translations will be visible regardless of the PNP option set for the student. In the sample item below, there are two keyword translation popups that use the same translation, and there is also a rich popup. Use the PNP settings in the header to change the keyword translation content.
The languages currently supported for keyword translation are:
| Supported Languages | |||
|---|---|---|---|
| ar | Arabic * | my | Burmese |
| cmn | Chinese (Mandarin) | om | Oromo |
| es | Spanish | pa | Punjabi |
| hmn | Hmong | ru | Russian |
| ht | Haitian Creole | so | Somali |
| ilo | Ilokano (8.16 Support) | tl | Tagalog |
| kar | Karen | uk | Ukranian |
| km | Khmer | vi | Vietnamese |
| ko | Korean | yue | Chinese (Cantonese) |
| lo | Lao |
This example item include 2 keyword translations, a rich popup glossary with an image, and a plain-text popup glossary.
| Get Responses: | [ Click Get Responses ] |
<?xml version="1.0" encoding="UTF-8" standalone="no"?><assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" adaptive="false" identifier="hello" lang="EN" timeDependent="false" title="Hello - keyword translation" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 imsqti_v2p1.xsd">
<responseDeclaration baseType="identifier" cardinality="single" identifier="RESPONSE">
<correctResponse>
<value>true</value>
</correctResponse>
</responseDeclaration><outcomeDeclaration baseType="integer" cardinality="single" identifier="SCORE" normalMaximum="1" normalMinimum="0">
<defaultValue>
<value>0</value>
</defaultValue>
</outcomeDeclaration>
<itemBody>
<p id="p001">Adele says, "<span id="glossary" class="keyword_translation:idref" data-glossary-idref="keyword1">Hello</span>," from the other side.</p>
<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>. Does it say <span id="glossary2" class="keyword_translation:idref" data-glossary-idref="keyword1">hello</span>?</p>
<choiceInteraction id="content1" maxChoices="1" minChoices="0" responseIdentifier="RESPONSE" shuffle="false">
<simpleChoice fixed="true" id="content8" identifier="true" showHide="show">
<p id="p005">True</p>
</simpleChoice>
<simpleChoice fixed="true" id="content4" identifier="false" showHide="show">
<p id="p006">False</p>
</simpleChoice>
</choiceInteraction>
<!-- 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>
<!-- define keyword translation content here -->
<div class="keyword-translation-list hidden">
<div class="keyword-translation-element" id="keyword1">
<div data-lang="en">
<p>Hi there (English)</p>
</div>
<div data-lang="es">
<p>Hola (Spanish)</p>
</div>
<div data-lang="so">
<p>Haye (Somali)</p>
</div>
<div data-lang="hmn">
<p>Nyob zoo (Hmong)</p>
</div>
<div data-lang="ar" dir="rtl">
<p>Marhabaan (Arabic)</p>
</div>
<div data-lang="cmn">
<p>Ni hao (Chinese, Mandarin)</p>
</div>
<div data-lang="kar">
<p>hgaw ler ah hgay (Karen)</p>
</div>
<div data-lang="km">
<p>suosdei (Khmer)</p>
</div>
<div data-lang="lo">
<p>Sa-bai-Dee (Lao)</p>
</div>
<div data-lang="om">
<p>Akkam (Oromo)</p>
</div>
<div data-lang="ru">
<p>Privet (Russian)</p>
</div>
<div data-lang="vi">
<p>Xin chao (Vietnamese)</p>
</div>
</div>
</div>
</itemBody>
<responseProcessing>
<responseCondition>
<responseIf>
<match>
<variable identifier="RESPONSE"/>
<correct identifier="RESPONSE"/>
</match>
<setOutcomeValue identifier="SCORE">
<baseValue baseType="integer">1</baseValue>
</setOutcomeValue>
</responseIf>
</responseCondition>
</responseProcessing>
</assessmentItem>
Adele says, "Hello," from the other side.
Look at the text in the picture. Does it say hello?
