TN8 Item Styleguide ::: Exhibits

Exhibits

To create an Exhibit Window, start by adding the following markup to the item:

<div class="exhibits-list hidden" tabindex="-1">

Inside the exhibits-list div, add nested divs for each exhibit using the signature <div class="exhibit" label="My First Exhibit">. Exhibits are displayed in a movable window with a tab for each exhibit. The exhibit div's label attribute is used to specify the text displayed on the exhibit's tab.

Exhibit Window Resizing

There are options for specifying an exhibit window's default width and height, and also window height/width minimums. These properties are set by using data- attributes on the <div class="exhibits-list"> element.

data-window-minheight="100px"
data-window-minwidth="200px"
data-window-defaultheight="200px"
data-window-defaultwidth="400px"

Example

The following demonstrates an exhibit window with two exhibits. The first contains HTML markup. The second contains a scrolling passage. Note: There can be only one scrolling passage in each exhibit.

<!-- Create the Exhibits container with a <div class="exhibits-list hidden" tabindex="-1"/> -->
<div class="exhibits-list hidden" tabindex="-1">
  <!-- First Exhibit -->
  <div class="exhibit" label="My First Exhibit">
    <div class="center">
      <img alt="timeline" src="images/timeline-558.png"/>
    </div>
  </div>
  <!-- Second Exhibit -->
  <div class="exhibit" label="Second Exhibit Label">
    <!-- Scrolling Passages within an Exhibit are triggered with the "tab-scrolling" class -->
    <div class="tab-scrolling">
      <p>I'm content in a scrolling passage</p>
    </div>
  </div>
</div>

Get Responses:

[ Click Get Responses ]

Item XML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<assessmentItem 
  xmlns="http://www.imsglobal.org/xsd/apipv1p0/imsqti_v2p1" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  adaptive="false" identifier="grud-gift-sample" timeDependent="false" title="Choice Interaciont with Exhibits" 
  xsi:schemaLocation="http://www.imsglobal.org/xsd/apipv1p0/imsqti_v2p1 ../../controlxsds/apipv1p0_imsqti_v2p1_v1p0.xsd">
  <responseDeclaration baseType="identifier" cardinality="multiple" identifier="RESPONSE">
    <correctResponse>
      <value>R</value>
      <value>Y</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE"/>
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>
          Sarah has eight dollars.  She wants to buy as many boxes of chocolates as she can.
        </p>
        <p>
          The blue box of chocolates cost two dollars and the red box cost three dollars.  The yellow box of
          chocolates is three dollars more than the blue box.  The purple box costs twice as much as the 
          blue box.
        </p>
        <p>
          If Sarah spends all eight dollars and only buys two different boxes of chocolates, which chocolates can
          she buy?  Click on the boxes of chocolates to select the boxes that she buys.
        </p>
      </div>
      <div class="span6">
        <div class="well">
          <div class="whitebg pad8">
            <choiceInteraction class="two-up" maxChoices="0" responseIdentifier="RESPONSE" shuffle="true">
              <simpleChoice identifier="B">
                <span><img alt="blue box" height="100" src="assets/images/bluebox.png" width="88"/></span>
              </simpleChoice>
              <simpleChoice identifier="R">
                <span><img alt="red box" height="100" src="assets/images/redbox.png" width="72"/></span>
              </simpleChoice>
              <simpleChoice identifier="Y">
                <span><img alt="yellow box" height="100" src="assets/images/yellowbox.png" width="102"/></span>
              </simpleChoice>
              <simpleChoice identifier="P">
                <span><img alt="purple box" height="100" src="assets/images/purplebox.png" width="105"/></span>
              </simpleChoice>
            </choiceInteraction>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Start Exhibits List -->	
    <div class="exhibits-list hidden" tabindex="-1">
      <div class="exhibit" label="Exhibit 1">
        <h5>Text Without Any Passage Container</h5>
        <p>This should just scroll within the first tab pane.  No special scrollers.</p>
        <p>We the People of the United States, in Order to form a more perfect Union, establish 
        Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, 
        and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this 
        Constitution for the United States of America. </p>
        <p>All legislative Powers herein granted shall be vested in a Congress of the United States, which 
        shall consist of a Senate and House of Representatives. </p>
        <p>The House of Representatives shall be composed of Members chosen every second Year by the People 
        of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the 
        most numerous Branch of the State Legislature. </p>
        <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, 
        and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that 
        State in which he shall be chosen. </p>
        <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, 
        and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that 
        State in which he shall be chosen. </p>
        <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, 
        and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that 
        State in which he shall be chosen. </p>
        <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, 
        and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that 
        State in which he shall be chosen. </p>
      </div>
      
      <div class="exhibit" label="Scrolling Passage">
        <div class="tab-scrolling">      	     
          <p>We the People of the United States, in Order to form a more perfect Union, establish Justice, insure 
          domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings 
          of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. </p>
          <p>All legislative Powers herein granted shall be vested in a Congress of the United States, which shall 
          consist of a Senate and House of Representatives. </p>
          <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the 
          several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most 
          numerous Branch of the State Legislature. </p>
          <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been 
          seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in 
          which he shall be chosen. </p>
          <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been 
          seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in 
          which he shall be chosen. </p>
          <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been 
          seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in 
          which he shall be chosen. </p>
          <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been 
          seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in 
          which he shall be chosen. </p>
        </div>
      </div>

      <div class="exhibit" label="Big Buck Bunny">
        <object data="assets/big_buck_bunny.mp4" id="myVideo" type="video/mp4">
          <param name="webmSource" value="assets/big_buck_bunny.webm" valuetype="REF"/>
          <param name="thumbnail" value="assets/bbb_splash_thumbnail.png" valuetype="REF"/>
        </object>
      </div>

      <div class="exhibit" label="Timeline">
        <div class="center">
          <img alt="timeline" src="assets/images/timeline-558.png"/>
        </div>
      </div>

        <div class="exhibit" label="Gettysburg Address">
            <div class="tab-scrolling">
                <p>Four score and seven years ago our fathers brought forth on this continent a new nation,
                conceived in liberty, and dedicated to the proposition that all men are created equal.</p>
                <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure.
                We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those
                who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>

                <p>But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead,
                who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what
                we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work
                which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us
                — that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion
                — that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom
                — and that government of the people, by the people, for the people, shall not perish from the earth.</p>
            </div>
        </div>

      <div class="exhibit" label="Tiger SVG">
        <p>A vicious SVG Tiger!</p>
        <div class="center">
          <object data="assets/images/tiger.svg" height="310" type="image/svg+xml" width="500"/>
        </div>
      </div>

    <!-- End Exhibits List -->
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct"/>
</assessmentItem>

Sarah has eight dollars. She wants to buy as many boxes of chocolates as she can.

The blue box of chocolates cost two dollars and the red box cost three dollars. The yellow box of chocolates is three dollars more than the blue box. The purple box costs twice as much as the blue box.

If Sarah spends all eight dollars and only buys two different boxes of chocolates, which chocolates can she buy? Click on the boxes of chocolates to select the boxes that she buys.

Text Without Any Passage Container

This should just scroll within the first tab pane. No special scrollers.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.

The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.

No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.

All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.

Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us — that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion — that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom — and that government of the people, by the people, for the people, shall not perish from the earth.

A vicious SVG Tiger!