The Tabbed Passage Widget enables you to add a tabbed interface containing scrolling passages and/or HTML content to an item. Only one scrolling passage is permitted per tab.
To create a Tabbed Passage widget, create the tabs using an unordered list (<ul>) with the
following signature: <ul id="tabControl" class="nav nav-tabs tabbed-passages">.
Inside this list, create list elements (<li>) to label each tab.
After creating the list of tabs, create the tab panes - the div containers which wrap each passage or artifact.
All tab panes must be contained within another div with this signature: <div class="tab-content">.
Each tab pane may contain HTML and/or a scrolling passage. If you decide to place a
scrolling passage inside a tab pane, make sure you specify <div class="tab-scrolling">.
To choose which tab is displayed by default, define the active tab: <li class="active">. Note: you must define an active tab.
If the tabbed passage is part of an item set, and you want the current tab to stay open when the user navigates between items in the set, add
the class "active-tab-override" to the tabControl element:
<ul id="tabControl" class="nav nav-tabs tabbed-passages active-tab-override">
This will override the active tab defined in the item. Note: this only works when the
"active-tab-override" class is defined and the tabbed passage is part of an item set.
The following is a complete example of a Tabbed Passage with two tabs. The first tab contains a scrolling passage and the second tab contains HTML markup.
<!-- Create the Tabs and Tabbed Passage with a <ul class="nav nav-tabs tabbed-passages" ../> -->
<ul id="tabControl" class="nav nav-tabs tabbed-passages">
<li class="active">
<a href="#firstStimulus">First</a>
</li>
<li>
<a href="#secondStimulus">Second</a>
</li>
</ul>
<!-- Create the Tabbed Content with a <div class="tab-content"> -->
<div class="tab-content">
<!-- Each Tab Pane is a div with class="tab-pane" -->
<!-- Start the First Tab Pane -->
<div class="tab-pane active" id="firstStimulus">
<!-- Scrolling Passages within Tabs are triggered with the "tab-scrolling" class -->
<div class="tab-scrolling passage440">
<p>I'm content in a scrolling passage</p>
</div>
</div>
<!-- Start the Second Tab Pane -->
<div class="tab-pane" id="secondStimulus">
<p>
I'm just plain item markup (no embedded passage component).
</p>
</div>
<!-- End all Tabbed Content -->
</div>
| 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="tabbed-passage-example" timeDependent="false" title="Tabbed Passage with Three Tabs"
xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
<responseDeclaration baseType="directedPair" cardinality="multiple" identifier="RESPONSE">
<correctResponse>
<value>C R</value>
<value>D M</value>
<value>L M</value>
<value>P T</value>
</correctResponse>
<mapping defaultValue="0">
<mapEntry mapKey="C R" mappedValue="1"/>
<mapEntry mapKey="D M" mappedValue="0.5"/>
<mapEntry mapKey="L M" mappedValue="0.5"/>
<mapEntry mapKey="P T" mappedValue="1"/>
</mapping>
</responseDeclaration>
<outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE"/>
<itemBody>
<div class="row">
<div class="span6">
<!-- Begin Tab Definition -->
<ul id="tabControl" class="nav nav-tabs tabbed-passages">
<li class="active">
<a href="#firstStimulus">First</a>
</li>
<li>
<a href="#secondStimulus">Second</a>
</li>
</ul>
<!-- Begin Tab Panes -->
<div class="tab-content">
<!-- Begin First Tab Pane -->
<div class="tab-pane active" id="firstStimulus">
<!-- Begin Scrolling Passage -->
<div class="tab-scrolling passage440">
<p>When in the Course of human events, it becomes necessary
for one people to dissolve the political bands which have
connected them with another, and to assume among the powers
of the earth, the separate and equal station to which the Laws
of Nature and of Nature's God entitle them, a decent respect
to the opinions of mankind requires that they should declare
the causes which impel them to the separation.</p>
<p>We hold these truths to be self-evident, that all men are
created equal, that they are endowed by their Creator with
certain unalienable Rights, that among these are Life, Liberty,
and the pursuit of Happiness. That to secure these rights,
Governments are instituted among Men, deriving their just powers
from the consent of the governed, That whenever any Form of
Government becomes destructive of these ends, it is the Right of
the People to alter or to abolish it, and to institute new
Government, laying its foundation on such principles and
organizing its powers in such form, as to them shall seem most
likely to effect their Safety and Happiness. Prudence, indeed,
will dictate that Governments long established should not be
changed for light and transient causes; and accordingly all
experience hath shewn, that mankind are more disposed to suffer,
while evils are sufferable, than to right themselves by abolishing
the forms to which they are accustomed. But when a long train of
abuses and usurpations, pursuing invariably the same Object evinces
a design to reduce them under absolute Despotism, it is their right,
it is their duty, to throw off such Government, and to provide new
Guards for their future security.</p>
</div>
<!-- end tab-scrolling -->
</div> <!-- end first tab pane -->
<!-- Begin Second Tab Pane -->
<div class="tab-pane" id="secondStimulus">
<p>
I'm just plain 'ole item markup (no embedded passage component). Please
look at the Table below:
</p>
<div class="center">
<table class="table table-bordered" style="width:260px;margin: 28px auto;">
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;">Color<br/>of Dogs</th>
<th style="text-align:center;">Number<br/>of Dogs</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;">Mixed</td>
<td style="text-align:center;">9</td>
</tr>
<tr>
<td style="text-align:center;">White</td>
<td style="text-align:center;">2</td>
</tr>
<tr>
<td style="text-align:center;">Black</td>
<td style="text-align:center;">3</td>
</tr>
<tr>
<td style="text-align:center;">Other</td>
<td style="text-align:center;">6</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- end second tab pane -->
</div> <!-- end tab -->
</div>
<div class="span6">
<matchInteraction maxAssociations="4" responseIdentifier="RESPONSE" shuffle="true">
<prompt>Match the following characters to the Shakespeare play they appeared in:</prompt>
<simpleMatchSet>
<simpleAssociableChoice identifier="C" matchMax="1">Capulet</simpleAssociableChoice>
<simpleAssociableChoice identifier="D" matchMax="1">Demetrius</simpleAssociableChoice>
<simpleAssociableChoice identifier="L" matchMax="1">Lysander</simpleAssociableChoice>
<simpleAssociableChoice identifier="P" matchMax="1">Prospero</simpleAssociableChoice>
</simpleMatchSet>
<simpleMatchSet>
<simpleAssociableChoice identifier="M" matchMax="4">A Midsummer-Night's Dream</simpleAssociableChoice>
<simpleAssociableChoice identifier="R" matchMax="4">Romeo and Juliet</simpleAssociableChoice>
<simpleAssociableChoice identifier="T" matchMax="4">The Tempest</simpleAssociableChoice>
</simpleMatchSet>
</matchInteraction>
</div>
</div>
</itemBody>
<responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/map_response"/>
</assessmentItem>
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.
I'm just plain 'ole item markup (no embedded passage) ...Please look at the HTML Table below:
| Color of Dogs |
Number of Dogs |
|---|---|
| Mixed | 9 |
| White | 2 |
| Black | 3 |
| Other | 6 |