Complex Slider
Complex Slider is a very sophisticated interaction that permits an author to overlay a slider on top of a background image, with many styling options, thus creating the appearance of a manipulative but retaining essential QTI sliderInteraction characteristics.
The main components of a Complex Slider are: 1) a background image, and 2) a slider component definition. A Complex Slider also permits you to define graphical assets (used as background images) that can be injected into the slider's "track" and "handle" objects.
The following is an example of how the Complex Slider interaction in the left column below was described.
<customInteraction class="tei-complexslider" responseIdentifier="RESPONSE">
<!-- This is the background over which we draw the slider itself -->
<object alt="thermometer" data="assets/thermometer_pdclip.png" type="image/png" height="302" width="113"/>
<!-- This is where we define all of the properties and callbacks for the slider component. -->
<customOption><![CDATA[
{
/* Get a handle on the slider and handle background(s) */
trackImageSelector: '#trackImage',
handleImageSelector: '#handleImage',
/* initialize the slider size, min/max, orientation and initial value */
sliderLength: '250px',
orientation: 'vertical',
value: 100,
min: 45,
range: 'min',
max: 105,
step: 5,
/* We use the createFunction to initialize the tooltip */
createFunction: function (event, ui) {
$("#leftSideTooltip").text('100');
},
/* We use the slideFunction to update the tooltip */
slideFunction: function (event, ui) {
$("#leftSideTooltip").text(ui.value);
},
sliderStyles: {
/* These are styles for the slider */
"top": "6px",
"left": "17px",
"width": "18px",
"background-repeat": "repeat",
"background-position": "top left",
"border-width": "0px",
"border-style": "solid",
"border-color": "#333 #333 #777 #333",
"border-top-left-radius": "7px",
"border-top-right-radius": "7px",
"border-bottom-left-radius": "0px",
"border-bottom-right-radius": "0px",
"position": "absolute",
"handleStyles": {
/* These are styles for the slider handle */
"cursor": "pointer",
"left": "-20px",
"background-color": "transparent",
"states": {
"default": {
"border": "none"
},
"hover": {
"border": "none"
},
"focus": {
"border": "none"
}
}
},
"rangeStyles": {
/* These are styles for the mercury of the therm */
"background": "#CB0101 no-repeat",
"border-bottom-left-radius": "0px",
"border-bottom-right-radius": "0px",
"border-top-left-radius": "7px",
"border-top-right-radius": "7px"
}
}
}
]]></customOption>
</customInteraction>
| 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"
title="Thermometer Slider" identifier="complex-slider-1"
adaptive="false" timeDependent="false"
xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
<responseDeclaration baseType="float" cardinality="single" identifier="RESPONSE">
<correctResponse>
<value>60</value>
</correctResponse>
</responseDeclaration>
<outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE"/>
<itemBody>
<!--
We will use the following two images for slider assets. Note how they are hidden.
The trackImage asset will be used as a background for the slider track.
The handleImage asset will be used as the background icon for the slider handle.
-->
<object id="trackImage" class="hidden" data="assets/bg-track.png" type="image/png" height="25" width="25" alt="track"/>
<object id="handleImage" class="hidden" data="assets/arrows-pr2.png" type="image/png" height="33" width="32" alt="handle"/>
<p>
This is my complex slider value: <span class="label label-important" id="leftSideTooltip"/>
</p>
<customInteraction class="tei-complexslider" responseIdentifier="RESPONSE">
<!-- This is the background over which we draw the slider itself -->
<object alt="thermometer" data="assets/thermometer_pdclip.png" type="image/png" height="302" width="113"/>
<customOption><![CDATA[
{
/* Get a handle on the slider and handle background(s) */
trackImageSelector: '#trackImage',
handleImageSelector: '#handleImage',
/* initialize the slider size, min/max, orientation and initial value */
sliderLength: '250px',
orientation: 'vertical',
value: 100,
min: 45,
range: 'min',
max: 105,
step: 5,
/* We use the createFunction to initialize the tooltip */
createFunction: function (event, ui) {
$("#leftSideTooltip").text('100');
},
/* We use the slideFunction to update the tooltip */
slideFunction: function (event, ui) {
$("#leftSideTooltip").text(ui.value);
},
sliderStyles: {
/* These are styles for the slider */
"top": "6px",
"left": "17px",
"width": "18px",
"background-repeat": "repeat",
"background-position": "top left",
"border-width": "0px",
"border-style": "solid",
"border-color": "#333 #333 #777 #333",
"border-top-left-radius": "7px",
"border-top-right-radius": "7px",
"border-bottom-left-radius": "0px",
"border-bottom-right-radius": "0px",
"position": "absolute",
"handleStyles": {
/* These are styles for the slider handle */
"cursor": "pointer",
"left": "-20px",
"background-color": "transparent",
"states": {
"default": {
"border": "none"
},
"hover": {
"border": "none"
},
"focus": {
"border": "none"
}
}
},
"rangeStyles": {
/* These are styles for the mercury of the therm */
"background": "#CB0101 no-repeat",
"border-bottom-left-radius": "0px",
"border-bottom-right-radius": "0px",
"border-top-left-radius": "7px",
"border-top-right-radius": "7px"
}
}
}
]]></customOption>
</customInteraction>
</itemBody>
<responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct"/>
</assessmentItem>
This is my left side value:
This is my right side value: