TN8 Item Styleguide ::: ASL with Catalog

Catalog with ASL Video

This is an example of an item with an ASL Video specified via a Catalog. Access to an item's ASL videos is via the sidebar button you see to the right of the screen. In this example, the ASL video is provided by IMS Global, and may not reflect the item content in this example.

Specifying Video Insertion Point and Video Labels

In order to "dock" an ASL video to a particular piece of item content, the best practice is to create a hidden (class="hidden") "docking div" containing a data-catalog-idref that "points" to the qti-catalog containing the ASL video(s) for that content. The AFA PNP support for ASL is "sign-language" <qti-card support="sign-language">. To label a video in the ASL video player, place your label inside this docking div. In this example, we place the following text: "ASL Video for Stem" inside the docking div.

<div class="hidden" data-catalog-idref="stem-catalog-ref">ASL Video for Stem</div>

Specifying Multiple Video Encodings

For cross-browser video playback, you'll need to specify both an .mp4-encoded and a .webm-encoded version of each ASL video in your item. The ASL video playback component automatically switches to the correct encoding. To specify both encodings, use two <source> elements inside the <video> element as in the following snippet:

<qti-catalog id="stem-catalog-ref">
  <qti-card support="sign-language">
    <qti-card-entry lang="ase">
      <qti-html-content>
        <video width="320" height="240">
          <source src="assets/apip_exemplar01.mp4" type="video/mp4" />
          <source src="assets/apip_exemplar01.webm" type="video/webm" />
        </video>
      </qti-html-content>
    </qti-card-entry>
  </qti-card>
</qti-catalog>

Item XML

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<qti-assessment-item 
    xmlns="http://www.imsglobal.org/xsd/qti/imsqtiasi_v3p0" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    adaptive="false" identifier="catalog-asl-example" time-dependent="false" title="Catalog ASL Example"  
    xsi:schemaLocation="http://www.imsglobal.org/xsd/qti/imsqti_itemv3p0_v1p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd">
    <qti-response-declaration base-type="identifier" cardinality="single" identifier="RESPONSE"/>
    <qti-outcome-declaration base-type="float" cardinality="single" identifier="SCORE"/>
    <qti-item-body>
        <div class="hidden" data-catalog-idref="stem-catalog-ref">ASL Video for Stem</div>
        <div id="div1">
            <img id="figure1" height="165" width="250"
                src="assets/images/apip_exemplar01_figure.svg"
                alt="Figure showing Rectangle ABCD divided into 12 equal boxes. 4 of the boxes are shaded."/>
            <span id="labelA">A</span>
            <span id="labelB">B</span>
            <span id="labelC">C</span>
            <span id="labelD">D</span>
        </div>
        <qti-choice-interaction response-identifier="RESPONSE" max-choices="1">
            <qti-prompt>In the figure above, what fraction of the rectangle <em data-catalog-idref="abcd">ABCD</em> is
                shaded?</qti-prompt>
            <qti-simple-choice identifier="A">
                <p>
                    <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="fraction one fifth">
                        <mfrac>
                            <mn>1</mn>
                            <mn>5</mn>
                        </mfrac>
                    </math>
                </p>
            </qti-simple-choice>
            <qti-simple-choice identifier="B">
                <p id="p4">
                    <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="fraction one fourth">
                        <mfrac>
                            <mn>1</mn>
                            <mn>4</mn>
                        </mfrac>
                    </math>
                </p>
            </qti-simple-choice>
            <qti-simple-choice identifier="C">
                <p>
                    <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="fraction one third">
                        <mfrac>
                            <mn>1</mn>
                            <mn>3</mn>
                        </mfrac>
                    </math>
                </p>
            </qti-simple-choice>
            <qti-simple-coice identifier="D">
                <p>
                    <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="fraction one half">
                        <mfrac>
                            <mn>1</mn>
                            <mn>2</mn>
                        </mfrac>
                    </math>
                </p>
            </qti-simple-choice>
        </qti-choice-interaction>
    </qti-item-body>
    <qti-catalog-info>
      <qti-catalog id="stem-catalog-ref">
        <qti-card support="sign-language">
          <qti-card-entry lang="ase">
            <qti-html-content>
              <video width="320" height="240">
                <source src="assets/apip_exemplar01.mp4" type="video/mp4" />
                <source src="assets/apip_exemplar01.webm" type="video/webm" />
              </video>
            </qti-html-content>
          </qti-card-entry>
        </qti-card>
      </qti-catalog>
    </qti-catalog-info>
</qti-assessment-item>

A B C D

In the figure above, what fraction of the rectangle ABCD is shaded?

A.

$\frac{1}{5}$
B.

$\frac{1}{4}$
C.

$\frac{1}{3}$
D.

$\frac{1}{2}$