Arquivos
CTAT/Examples/CTATComboBox.html
2017-01-03 16:29:58 -05:00

76 linhas
2.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CTATComboBox 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":'CTATComboBox.brd'});
};
</script>
<style type="text/css">
div.ctat_example { max-width: 45%; }
hr { width: 80%; }
</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>CTATComboBox Example</h1>
<p>A select example.</p>
<div>
<div class="ctat_example">
Select "yes":
<div id="combo1" class="CTATComboBox">
<option>----</option>
<option>yes</option>
<option>no</option>
</div>
</div>
<div class="ctat_code">
<pre>
&lt;div id="combo1" class="CTATComboBox"&gt;
&lt;option&gt;----&lt;/option&gt;
&lt;option&gt;yes&lt;/option&gt;
&lt;option&gt;no&lt;/option&gt;
&lt;/div&gt;</pre>
</div>
</div>
<hr/>
<div>
<div class="ctat_example">
<p>A select where the options are set with an attribute:</p>
Select "oui":
<div id="combo2" class="CTATComboBox" data-ctat-labels="----,oui,non">
</div>
</div>
<div class="ctat_code">
<pre>
&lt;div id="combo2" class="CTATComboBox"
data-ctat-labels="----,oui,non"&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div id="hint-box" style="margin:3px;text-align:right;">
<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>