Gap Match - with Gap-Table

Match interaction are those that operate in much the same way as multiple choice interaction, however the presentation is such that the student must move the items from an initial bay of selections into the proper bay locations. These interactions are the electronic kin to pen-and-paper matching questions where draw lines connecting items in a list on one side of the page to the corresponding items on the other side of the page.

A match interaction is comprised of two sets of of items (i.e., simpleAssociableChoice items) grouped within simpleMatchSet tags. The first set defines the draggers which will begin in a single origin bay. The second set defines the various target bays in which the draggers can be placed. Each dragger can be moved into a target bay to create a directedPair answer.

Starting with TN8 version 8.3, the draggers will maintain their initial order within the origin bay if they are removed from a target bay, dropped outside of the various defined bays, or returned to the origin bay.

Gap Tables

Sometimes you need to create gapMatch interactions where you need more control over gaps and gap sizes — particularly gap heights. In this case, the gapMatchInteraction with the Gap Table option may be just what you are looking for.

First, you trigger the extra gap formatting options by adding the gap-table class to your gapMatchInteraction, like this:

<gapMatchInteraction class="gap-table">

Then place your gaps into the cells of a table. This is legal, validatable QTI as long as you wrap each gap inside an inline element such as a p tag or a span tag.

For each gap, you can specify a width, and that you want the gap to have an elastic height (auto-height) and also a minimum height (gap-minheight-<height in pixels>) that will override the default minimum gap height. Normally with gapMatch's, the minimum and maximum height of the gap's is tightly controlled so that the surrounding text stays nicely formatted. With gap-table and the gap class overrides, you have a lot more control.

For example, a gap's width could be set to 100% of a table cell, it's minimum height set to 46 pixels, and height set to auto grow, as follows:

<gap identifier="gap1" class="gap-width-100% gap-minheight-46px auto-height" />

Everything else about gapMatch with class="gap-table" is the same as normal gapMatch (e.g., choices-left, right, bottom and sourcechoices-width).

Ignore Answer

If a gap match interaction is inside a composite item there is an option to have the gap match interaction be ignored when the answered status of the item is being determined. To do this, add the class ignore-answered to the interactions class attribute.
Example: <gapMatchInteraction class="gap-table sourcechoices-width-240px ignore-answered" responseIdentifier="RESPONSE">

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"
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd"
  identifier="gapMatch-gap-table" title="Gap Match - Gap Table" adaptive="false" timeDependent="false">
  <responseDeclaration baseType="directedPair" cardinality="multiple" identifier="RESPONSE">
  <correctResponse>
    <value>s1 t1</value>
    <value>s2 t2</value>
    <value>s3 t3</value>
  </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>
          <strong>Do You Know the Gettysburg Address Introduction?</strong>
        </p>
        <p>
          Use this nifty <em>gapMatchInteraction</em> with class="gap-table" to order sentence 
          fragments from the introductory sentences of the Gettysburg Address.
        </p>
        <p>
          The <em>gap's</em> are nested inside a table, which allows us to position them in a 
          tabular "block" fashion - even though the gapMatchInteraction typically displays 
          gaps inline.
        </p>
        <p>
          Drag each sentence fragment in the list to the right, into the correct position in the table.
        </p>
      </div>
      <div class="span6">

        <gapMatchInteraction class="gap-table sourcechoices-width-240px" responseIdentifier="RESPONSE">
          <gapText identifier="s1" matchMax="1">
            our fathers brought forth on this continent, a new 
            nation, conceived in Liberty,
          </gapText>
          <gapText identifier="s2" matchMax="1">
            and dedicated to the proposition that all men are created equal.
          </gapText>
          <gapText identifier="s3" matchMax="1">
            Now we are engaged in a great civil war,
          </gapText>
          <table class="fullWidth">
            <tbody>
              <tr>
                <td class="center bordered-dark pad8-24">STEPS IN PROCESS</td>
                <td class="center bordered-dark pad8-24">DETAILS FROM PASSAGE</td>
              </tr>
              <tr>
                <td class="center bordered-dark pad8-24">1. The First Part</td>
                <td class="center bordered-dark pad8-24">Four score and seven years ago</td>
              </tr>
              <tr>
                <td class="center bordered-dark pad8-24">2. The Second Part</td>
                <td class="center bordered-dark pad8">
                  <p class="margin0auto">
                    <gap class="gap-width-100% gap-minheight-46px auto-height" identifier="t1"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td class="center bordered-dark pad8-24">3. The Next Part</td>
                <td class="center bordered-dark pad8">
                  <p class="margin0auto">
                    <gap class="gap-width-100% gap-minheight-46px auto-height" identifier="t2"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td class="center bordered-dark pad8-24">4. The Next After the Previous </td>
                <td class="center bordered-dark pad8">
                  <p class="margin0auto">
                    <gap class="gap-width-100% gap-minheight-46px auto-height" identifier="t3"/>
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </gapMatchInteraction>

      </div>
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct.xml"/>
</assessmentItem>

Do You Know the Gettysburg Address Introduction?

Use this nifty gapMatchInteraction with class="gap-table" to order sentence fragments from the introductory sentences of the Gettysburg Address.

The gap's are nested inside a table, which allows us to position them in a tabular "block" fashion — even though the gapMatchInteraction typically displays gaps inline.

Drag each sentence fragment in the list to the right, into the correct position in the table.

  • 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,
STEPS INTRODUCTION PHRASE
1. The First Part Four score and seven years ago
2. The Second Part

3. The Next Part

4. The Next After the Previous