demisk
f9b802879d
Fix hints in CTATGroupingComponent graph. Add a tutored step for CTATTable example. Update description for CTATTextField example. Point to jquery library on our CDN in tutorial example.
290 linhas
9.7 KiB
HTML
290 linhas
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CTATNumberLine Examples</title>
|
|
|
|
<link rel="stylesheet" href="https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.min.css"/>
|
|
<link rel="stylesheet" href="css/ctat_example.css"/>
|
|
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
|
|
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
|
|
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>
|
|
<script>
|
|
function ctatOnload() {
|
|
initTutor({"question_file":'CTATNumberLine.brd'});
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
div.tutor_window { width: 800px; }
|
|
hr { width: 85%; }
|
|
div[data-ctat-rotation] .CTAT-number-line--large-tickmark-label { fill:maroon; transform: translate(7px,3px); }
|
|
div[data-ctat-rotation] .CTAT-number-line--small-tickmark-label { fill:purple; transform: translate(7px,3px); }
|
|
.small_button { font-size:10px; }
|
|
.CTAT-numeric-stepper::-webkit-inner-spin-button,
|
|
.CTAT-numeric-stepper::-webkit-outer-spin-button { opacity: 1; }
|
|
#hint-box {
|
|
position:fixed;
|
|
bottom:10px;
|
|
background-color: cornsilk;
|
|
border: 1px solid grey;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tutor_window">
|
|
<a href="http://ctat.pact.cs.cmu.edu/">
|
|
<img id="CTATBanner"
|
|
alt="CTAT: Cognitive Tutor Authoring Tools"
|
|
src="skindata/CTAT_Banner.svg">
|
|
</a>
|
|
<h1>CTATNumberLine Example</h1>
|
|
<p>Some CTATNumberLine examples that show some of its basic functionality.</p>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
CTATNumberLine with default settings:
|
|
<div id="numberLineDefault" class="CTATNumberLine"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre>
|
|
<div id="numberLineDefault" class="CTATNumberLine">
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting minimum and maximum values:
|
|
<div id="numberLineMinMax" class="CTATNumberLine"
|
|
data-ctat-minimum="-2" data-ctat-maximum="2"
|
|
data-ctat-enabled="false"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineMinMax" class="CTATNumberLine"
|
|
data-ctat-minimum="-2"
|
|
data-ctat-maximum="2"
|
|
data-ctat-enabled="false">
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting step values:
|
|
<div id="numberLineStep" class="CTATNumberLine"
|
|
data-ctat-minimum="0" data-ctat-maximum="1"
|
|
data-ctat-enabled="false"
|
|
data-ctat-large-tick-step="0.4"
|
|
data-ctat-small-tick-step="1/3"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineStep" class="CTATNumberLine"
|
|
data-ctat-enabled="false"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="0.4"
|
|
data-ctat-small-tick-step="1/3">
|
|
</div>
|
|
</pre>
|
|
<p>Please note that the tick mark labels can display either decimals or fractions depending on the values of the data-ctat-*-tick-step attribute. If fractions in the form of 1/3 are used, then the labels will also be fractions.</p>
|
|
<p>Also, if different tick marks overlap, then the largest tick mark will be displayed. For example in the default example, at 1, the large tick mark is "1" while the small tick mark would be "2/2" and "1" is displayed</p>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting denominator:
|
|
<div id="numberLineDenom" class="CTATNumberLine"
|
|
data-ctat-enabled="false"
|
|
data-ctat-minimum="0" data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="0"
|
|
data-ctat-small-tick-step="1"
|
|
data-ctat-denominator="4"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineDenom" class="CTATNumberLine"
|
|
data-ctat-enabled="false"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="0"
|
|
data-ctat-small-tick-step="1"
|
|
data-ctat-denominator="4">
|
|
</div>
|
|
</pre>
|
|
<p>data-ctat-denominator is different from the other tick mark
|
|
parameters in that it shows tick marks at an interval of 1/value.
|
|
This is often used in conjunction with data-ctat-ctrl-denominator.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting point size:
|
|
<div id="numberLinePoint" class="CTATNumberLine"
|
|
data-ctat-minimum="0" data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="0"
|
|
data-ctat-small-tick-step="1"
|
|
data-ctat-tutor="false"
|
|
data-ctat-point-size="12"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLinePoint" class="CTATNumberLine"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="0"
|
|
data-ctat-small-tick-step="1"
|
|
data-ctat-tutor="false"
|
|
data-ctat-point-size="12">
|
|
</div>
|
|
</pre>
|
|
<p>This setting will adjust both the point cursor and the drawn
|
|
points.</p>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting snap to tickmarks:
|
|
<div id="numberLineSnap" class="CTATNumberLine"
|
|
data-ctat-minimum="0" data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="1"
|
|
data-ctat-small-tick-step="1/3"
|
|
data-ctat-snap="true"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineSnap" class="CTATNumberLine"
|
|
data-ctat-minimum="0" data-ctat-maximum="1"
|
|
data-ctat-large-tick-step="1"
|
|
data-ctat-small-tick-step="1/3"
|
|
data-ctat-snap="true">
|
|
</div>
|
|
</pre>
|
|
<p>When data-ctat-snap="true", CTATNumberLine will report the value
|
|
of the tick mark as the input in the posted SAI.</p>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting rotation:
|
|
<div id="numberLineRot" class="CTATNumberLine"
|
|
style="width:180px;height:200px"
|
|
data-ctat-tutor="false"
|
|
data-ctat-rotation="60"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineRot" class="CTATNumberLine"
|
|
data-ctat-tutor="false"
|
|
data-ctat-rotation="60">
|
|
</div>
|
|
</pre>
|
|
<p>Rotate the number line clockwise around the center point
|
|
in degrees.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Controlling minimum and maximum:
|
|
<div id="numberLineBounds" class="CTATNumberLine"
|
|
data-ctat-tutor="true"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="3"
|
|
data-ctat-ctrl-min="numberLineBounds_min"
|
|
data-ctat-ctrl-max="numberLineBounds_max"></div>
|
|
<div style="display: flex; justify-content: space-around;">
|
|
<div>Minimum: <div id="numberLineBounds_min" class="CTATNumericStepper" data-ctat-tutor="false" style="width:40px;display:inline-block;" value="0" min="-3" max="2"></div><!--<br><div id="nlbs" class="CTATSubmitButton" data-ctat-target="numberLineBounds">Submit</div>--></div>
|
|
<div>Maximum: <div id="numberLineBounds_max" class="CTATNumericStepper" data-ctat-tutor="false" style="width:40px;display:inline-block;" value="3" min="2" max="10"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineRot" class="CTATNumberLine"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="3"
|
|
data-ctat-ctrl-min="numberLineBounds_min"
|
|
data-ctat-ctrl-max="numberLineBounds_max">
|
|
</div>
|
|
</pre>
|
|
<p>If you are using something like a CTATNumericSpinner, do not
|
|
forget to set its value and the corresponding CTATNumberLine
|
|
attribute to the same initial value.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Controlling tick marks:
|
|
<div id="numberLineCTick" class="CTATNumberLine"
|
|
data-ctat-tutor="false" data-ctat-enabled="false"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="3"
|
|
data-ctat-large-tick-step="1"
|
|
data-ctat-small-tick-step="1/2"
|
|
data-ctat-ctrl-large-tick="nlTick_inc;nlTick_dec"
|
|
data-ctat-ctrl-small-tick="nlTick_small"
|
|
data-ctat-ctrl-denominator="nlTick_denom">
|
|
</div>
|
|
<div style="display: flex; justify-content: space-around;">
|
|
<div>Large: <div style="display:inline-block;">
|
|
<div id="nlTick_inc" class="CTATButton small_button" data-ctat-tutor="false" value="1">+</div><br/>
|
|
<div id="nlTick_dec" class="CTATButton small_button" data-ctat-tutor="false" value="-1">−</div>
|
|
</div>
|
|
</div>
|
|
<div>Small: <div id="nlTick_small" class="CTATTextInput" data-ctat-tutor="false" style="width:25px;" value="1/2"></div></div>
|
|
<div>Denominator: <div id="nlTick_denom" class="CTATNumericStepper" data-ctat-tutor="false" style="width:30px;display:inline-block;" value="0" min="0" max="10"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineRot" class="CTATNumberLine"
|
|
data-ctat-tutor="false"
|
|
data-ctat-enabled="false"
|
|
data-ctat-minimum="0"
|
|
data-ctat-maximum="3"
|
|
data-ctat-large-tick-step="1"
|
|
data-ctat-small-tick-step="1/2"
|
|
data-ctat-ctrl-large-tick="nlTick_inc;nlTick_dec"
|
|
data-ctat-ctrl-small-tick="nlTick_small"
|
|
data-ctat-ctrl-denominator="nlTick_denom">
|
|
</div>
|
|
</pre>
|
|
<p>If you are using something like a CTATNumericSpinner, do not
|
|
forget to set its value and the corresponding CTATNumberLine
|
|
attribute to the same initial value.</p>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Setting multi-point entry:
|
|
<div id="numberLineNumPoints" class="CTATNumberLine"
|
|
data-ctat-max-points="3"
|
|
data-ctat-snap="true"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="numberLineNumPoints" class="CTATNumberLine"
|
|
data-ctat-max-points="3"></div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height:200px;"></div>
|
|
<div id="hint-box">
|
|
<div id="HintWindow" class="CTATHintWindow"></div>
|
|
<div>
|
|
<div id="hint-button" class="CTATHintButton"></div>
|
|
<div id="done" class="CTATDoneButton"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|