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.
118 linhas
3.6 KiB
HTML
118 linhas
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CTATDragNDrop Example</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>
|
|
<!-- cdn.rawgit.com/CMUCTAT/CTAT/<tag>/Examples/ctat.min.js -->
|
|
<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":'CTATDragNDrop.brd'});
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
.CTATDragNDrop { padding: 5px; }
|
|
</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>CTATDragNDrop Example</h1>
|
|
<p>
|
|
A simple Drag-N-Drop example for showing some basic functionality.
|
|
As it is currently configured, Sink can only have a single item
|
|
dragged to it.
|
|
The correct answer is the blue circle.
|
|
Use the submit button to submit Sink for grading.
|
|
Drag items to Text Items to see per item grading,
|
|
the words are the correct answers.
|
|
</p>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Source:
|
|
<div id="source" class="CTATDragNDrop"
|
|
data-ctat-tutor="false" name="DragNDropGroup">
|
|
<img id="dndimg" src="skindata/CTAT-icon.svg"/>
|
|
<div id="dndcircle" style="width:48px;height:48px;">
|
|
<svg width="48" height="48">
|
|
<circle cx="24" cy="24" r="20"
|
|
stroke="darkblue" fill="blue" stroke-width="2px"/>
|
|
</svg>
|
|
</div>
|
|
<div id="dndtext" class="unselectable">Square</div>
|
|
<span id="dndtri" class="unselectable">triangle</span>
|
|
</div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre>
|
|
Source:
|
|
<div id="source" class="CTATDragNDrop"
|
|
data-ctat-tutor="false" name="DragNDropGroup">
|
|
<div id="dndcircle" style="width:48px;height:48px;">
|
|
<svg width="48" height="48">
|
|
<circle cx="24" cy="24" r="20" stroke="darkblue"
|
|
fill="blue" stroke-width="2px"/>
|
|
</svg>
|
|
</div>
|
|
<div id="dndtext" class="unselectable">Square</div>
|
|
<img id="dndimg" src="skindata/CTAT-icon.svg"/>
|
|
<span id="dndtri" class="unselectable">triangle</span>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="ctat_example">
|
|
Sink:
|
|
<div id="sink" class="CTATDragNDrop" name="DragNDropGroup"
|
|
data-ctat-max-cardinality="1" data-ctat-tutor="false">
|
|
</div>
|
|
<div id="submit" class="CTATSubmitButton"
|
|
data-ctat-target="sink">Submit</div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre>
|
|
Sink:
|
|
<div id="sink" class="CTATDragNDrop" name="DragNDropGroup"
|
|
data-ctat-max-cardinality="1"
|
|
data-ctat-tutor="false">
|
|
</div>
|
|
<div id="submit" class="CTATSubmitButton"
|
|
data-ctat-target="sink">Submit</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Text Items:
|
|
<div id="textsink" class="CTATDragNDrop" name="DragNDropGroup"
|
|
data-ctat-tutor="true"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre>
|
|
Text Items:
|
|
<div id="textsink" class="CTATDragNDrop" name="DragNDropGroup"
|
|
data-ctat-tutor="true"></div>
|
|
</pre>
|
|
</div>
|
|
<div id="hint-box">
|
|
<div id="HintWindow" class="CTATHintWindow"></div>
|
|
<div style="float: right;">
|
|
<div id="hint-button" class="CTATHintButton"></div>
|
|
<div id="done" class="CTATDoneButton"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|