The process for adding TTS to a rich popup is the same as adding TTS to a plain text popup glossary. To add TTS to a popup glossary, the glossary link must have a unique id
. Add an access element for that glossary link with the desired TTS pronunciation for the popup content, just as you would for any other element with TTS. You can include this access element anywhere in the inclusion order because it will only be read when the popup is open.
Here's an example of the markup for a sentence with a rich popup glossary link:
<p id="container">Look at the text in the <span id="glossary" class="keyword_glossary:idref" data-glossary-idref="glossary-image">picture</span>.</p>
Here's an example of the APIP access element for the rich popup glossary. Notice that the TTS pronunciation is the content of the rich popup glossary ("Picture of a sign that says: 'Never leave luggage unattended.'") rather than the text of actual element #p003
(just "picture").
Limitations: Rich popup glossary with TTS does not have the ability to add separate access elements for all of the content within the rich popup. There can be only one access element per popup glossary. For example, if there is both an image and descriptive text within a rich popup glossary, there must be only one access element.
<!-- access element for the rich popup glossary --> <apip:accessElement identifier="ae003"> <apip:contentLinkInfo qtiLinkIdentifierRef="glossary"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:spokenText contentLinkIdentifier="">Picture of a sign that says: "Never leave luggage unattended."</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Picture of a sign that says: "Never leave luggage unattended."</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Picture of a sign that says: "Never leave luggage unattended."</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <!-- access element for the sentence that contains the popup link --> <apip:accessElement identifier="ae004"> <apip:contentLinkInfo qtiLinkIdentifierRef="container"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:spokenText contentLinkIdentifier="">Look at the text in the picture.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Look at the text in the picture.</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Look at the text in the picture.</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement>
Here's an example of the inclusion order that includes this popup access element. Even though the popup access element is include amongst the other access elements, it will only be read/played when the popup is open; if the popup is closed, the access element will be skipped.
<apip:inclusionOrder> <apip:textGraphicsDefaultOrder> <apip:elementOrder identifierRef="ae002"> <apip:order>1</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae003"> <apip:order>2</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae004"> <apip:order>3</apip:order> </apip:elementOrder> </apip:apip:textGraphicsDefaultOrder> ... </apip:inclusionOrder>
Get Responses: | [ Click Get Responses ] |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" adaptive="false" identifier="popup-img-tts2" timeDependent="false" title="Popup with Image with TTS (2)" 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 id="p001">Look at the <span class="keyword_glossary:Popup%20with%20only%20text." id="p002">text</span> in the <span class="keyword_glossary:idref" data-glossary-idref="glossary-image" id="p003">picture</span>.</p> <choiceInteraction maxChoices="1" responseIdentifier="RESPONSE" shuffle="false"> <prompt id="p004">What does it say?</prompt> <simpleChoice id="p005" identifier="ChoiceA">You must stay with your luggage at all times.</simpleChoice> <simpleChoice id="p006" identifier="ChoiceB">Do not let someone else look after your luggage.</simpleChoice> <simpleChoice id="p007" identifier="ChoiceC">Remember your luggage when you leave.</simpleChoice> </choiceInteraction> </div> <div class="span6"> <h4 id="p008" style="text-align:center;">Examine the <span class="keyword_glossary:idref" data-glossary-idref="glossary-animation" id="p009">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" id="p011" src="images/sign.png" /> </div> <div class="glossary-element" id="glossary-animation"> <div id="p012"> <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> </div> </itemBody> <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" /> <apip:apipAccessibility xmlns="http://www.imsglobal.org/xsd/apip/apipv1p0/imsapip_qtiv1p0" xmlns:apip="http://www.imsglobal.org/xsd/apip/apipv1p0/imsapip_qtiv1p0"> <apip:inclusionOrder> <apip:textOnlyDefaultOrder> <apip:elementOrder identifierRef="ae001"> <apip:order>1</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae002"> <apip:order>2</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae004"> <apip:order>4</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae005"> <apip:order>5</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae006"> <apip:order>6</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae007"> <apip:order>7</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae008"> <apip:order>8</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae009"> <apip:order>9</apip:order> </apip:elementOrder> </apip:textOnlyDefaultOrder> <apip:textGraphicsDefaultOrder> <apip:elementOrder identifierRef="ae001"> <apip:order>1</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae002"> <apip:order>2</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae003"> <apip:order>3</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae004"> <apip:order>4</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae005"> <apip:order>5</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae006"> <apip:order>6</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae007"> <apip:order>7</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae008"> <apip:order>8</apip:order> </apip:elementOrder> <apip:elementOrder identifierRef="ae009"> <apip:order>9</apip:order> </apip:elementOrder> </apip:textGraphicsDefaultOrder> </apip:inclusionOrder> <apip:accessibilityInfo> <apip:accessElement identifier="ae001"> <apip:contentLinkInfo qtiLinkIdentifierRef="p001"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo1" mimeType="audio/mpeg"> <apip:fileHref>assets/db4018175ec7fa41b27f00660e78f305-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo2" mimeType="audio/ogg"> <apip:fileHref>assets/db4018175ec7fa41b27f00660e78f305-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo3" mimeType="application/xml"> <apip:fileHref>assets/db4018175ec7fa41b27f00660e78f305-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Look at the text in the picture.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Look at the text in the picture.</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Look at the text in the picture.</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae002"> <apip:contentLinkInfo qtiLinkIdentifierRef="p002"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Popup with only text.</apip:brailleTextString> </apip:brailleText> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo4" mimeType="audio/mpeg"> <apip:fileHref>assets/df03cbf1a162c36443349f17ead073bc-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo5" mimeType="audio/ogg"> <apip:fileHref>assets/df03cbf1a162c36443349f17ead073bc-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo6" mimeType="application/xml"> <apip:fileHref>assets/df03cbf1a162c36443349f17ead073bc-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Popup with only text.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Popup with only text.</apip:textToSpeechPronunciation> </apip:spoken> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae003"> <apip:contentLinkInfo qtiLinkIdentifierRef="p003"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo7" mimeType="audio/mpeg"> <apip:fileHref>assets/7ca03322cff92a42bfae76c38693607e-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo8" mimeType="audio/ogg"> <apip:fileHref>assets/7ca03322cff92a42bfae76c38693607e-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo9" mimeType="application/xml"> <apip:fileHref>assets/7ca03322cff92a42bfae76c38693607e-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Picture of a sign that says: "Never leave luggage unattended."</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Picture of a sign that says: "Never leave luggage unattended."</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Picture of a sign that says: "Never leave luggage unattended."</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae004"> <apip:contentLinkInfo qtiLinkIdentifierRef="p004"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo10" mimeType="audio/mpeg"> <apip:fileHref>assets/b8251edca53fe5a1943b4d95ddefe49b-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo11" mimeType="audio/ogg"> <apip:fileHref>assets/b8251edca53fe5a1943b4d95ddefe49b-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo12" mimeType="application/xml"> <apip:fileHref>assets/b8251edca53fe5a1943b4d95ddefe49b-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">What does it say?</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">What does it say?</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">What does it say?</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae005"> <apip:contentLinkInfo qtiLinkIdentifierRef="p005"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo13" mimeType="audio/mpeg"> <apip:fileHref>assets/6e3b467caa02d9c09777271b9d10d913-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo14" mimeType="audio/ogg"> <apip:fileHref>assets/6e3b467caa02d9c09777271b9d10d913-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo15" mimeType="application/xml"> <apip:fileHref>assets/6e3b467caa02d9c09777271b9d10d913-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">You must stay with your luggage at all times.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">You must stay with your luggage at all times.</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">You must stay with your luggage at all times.</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae006"> <apip:contentLinkInfo qtiLinkIdentifierRef="p006"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo16" mimeType="audio/mpeg"> <apip:fileHref>assets/35c5e8bfb30c39c2e8c8e388a88e7d66-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo17" mimeType="audio/ogg"> <apip:fileHref>assets/35c5e8bfb30c39c2e8c8e388a88e7d66-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo18" mimeType="application/xml"> <apip:fileHref>assets/35c5e8bfb30c39c2e8c8e388a88e7d66-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Do not let someone else look after your luggage.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Do not let someone else look after your luggage.</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Do not let someone else look after your luggage.</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae007"> <apip:contentLinkInfo qtiLinkIdentifierRef="p007"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo19" mimeType="audio/mpeg"> <apip:fileHref>assets/997f91052db8441d904d1c2b6a72c3ee-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo20" mimeType="audio/ogg"> <apip:fileHref>assets/997f91052db8441d904d1c2b6a72c3ee-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo21" mimeType="application/xml"> <apip:fileHref>assets/997f91052db8441d904d1c2b6a72c3ee-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Remember your luggage when you leave.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Remember your luggage when you leave.</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Remember your luggage when you leave.</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae008"> <apip:contentLinkInfo qtiLinkIdentifierRef="p008"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo22" mimeType="audio/mpeg"> <apip:fileHref>assets/365fd66d2bc059f4853c27c0297e50f5-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo23" mimeType="audio/ogg"> <apip:fileHref>assets/365fd66d2bc059f4853c27c0297e50f5-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo24" mimeType="application/xml"> <apip:fileHref>assets/365fd66d2bc059f4853c27c0297e50f5-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Examine the Tumbling Tetronimo</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Examine the Tumbling Tetronimo</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Examine the Tumbling Tetronimo</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> <apip:accessElement identifier="ae009"> <apip:contentLinkInfo qtiLinkIdentifierRef="p009"> <apip:objectLink/> </apip:contentLinkInfo> <apip:relatedElementInfo> <apip:spoken> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo25" mimeType="audio/mpeg"> <apip:fileHref>assets/98e8daed9893930e08f4b8b55992e995-is-3ef.mp3</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo26" mimeType="audio/ogg"> <apip:fileHref>assets/98e8daed9893930e08f4b8b55992e995-is-3ef.ogg</apip:fileHref> <apip:voiceType>Synthetic</apip:voiceType> <apip:voiceSpeed>Standard</apip:voiceSpeed> </apip:audioFileInfo> <apip:audioFileInfo contentLinkIdentifier="audioFileInfo27" mimeType="application/xml"> <apip:fileHref>assets/98e8daed9893930e08f4b8b55992e995-is-3ef.xml</apip:fileHref> </apip:audioFileInfo> <apip:spokenText contentLinkIdentifier="">Tumbling, tumbling, tumbling.</apip:spokenText> <apip:textToSpeechPronunciation contentLinkIdentifier="">Tumbling, tumbling, tumbling.</apip:textToSpeechPronunciation> </apip:spoken> <apip:brailleText> <apip:brailleTextString contentLinkIdentifier="">Tumbling, tumbling, tumbling.</apip:brailleTextString> </apip:brailleText> </apip:relatedElementInfo> </apip:accessElement> </apip:accessibilityInfo> </apip:apipAccessibility> </assessmentItem>
Look at the text in the picture.