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.
146 linhas
4.1 KiB
HTML
146 linhas
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CTATImageButton 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":'CTATButton.brd'});
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
hr { width: 80%; }
|
|
#button3 {
|
|
display:flex;
|
|
flex-direction:column;
|
|
border:1px solid black;
|
|
border-radius:5px;
|
|
justify-content:space-around;
|
|
align-items:center;
|
|
width:66px;
|
|
height:66px;
|
|
background-color: blue;
|
|
}
|
|
#button3.CTAT-button--hover {
|
|
background-color: darkblue;
|
|
border: 1px solid black;
|
|
}
|
|
#button3.CTAT-button--clicked {
|
|
background-color: skyblue;
|
|
border: 1px solid blue;
|
|
}
|
|
#button3:disabled {
|
|
background-color: #EDEDED;
|
|
border: 1px solid darkgrey;
|
|
text-color: #9A9A9A;
|
|
cursor: default;
|
|
}
|
|
</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>CTATImageButton Example</h1>
|
|
<p>A simple image button example.</p>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Click this button:
|
|
<div id="button1" style="width:66px;height:66px;"
|
|
class="CTATImageButton"
|
|
data-ctat-image-hover="skindata/Default-Hover.png"
|
|
data-ctat-image-clicked="skindata/Default-Click.png"
|
|
data-ctat-image-default="skindata/Default-Default.png"
|
|
data-ctat-image-disabled="skindata/Default-Disabled.png"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre><div id="button1" class="CTATImageButton"
|
|
style="width: 66px; height: 66px;"
|
|
data-ctat-image-hover="skindata/Default-Hover.png"
|
|
data-ctat-image-clicked="skindata/Default-Click.png"
|
|
data-ctat-image-default="skindata/Default-Default.png"
|
|
data-ctat-image-disabled="skindata/Default-Disabled.png">
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div><hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
Simple Clickable button:
|
|
<div id="button2" class="CTATImageButton" style="display:inline-block;width:15px;height:15px;"><img src="skindata/CTAT-icon.svg"></div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
<pre>
|
|
<div id="button2" class="CTATImageButton">
|
|
<img src="skindata/CTAT-icon.svg">
|
|
</div></pre>
|
|
</div>
|
|
</div><hr/>
|
|
<div>
|
|
<div class="ctat_example">
|
|
CTAT-like button:
|
|
<div id="button3" class="CTATImageButton unselectable" style="">
|
|
<div style="font-size:36px;pointer-events:none;">✔</div>
|
|
<div style="pointer-events:none;">Wow</div>
|
|
</div>
|
|
</div>
|
|
<div class="ctat_code">
|
|
In style tag or css:
|
|
<pre>
|
|
#button3 {
|
|
display:flex;
|
|
flex-direction:column;
|
|
border:1px solid black;
|
|
border-radius:5px;
|
|
justify-content:space-around;
|
|
align-items:center;
|
|
width:66px;
|
|
height:66px;
|
|
background-color: blue;
|
|
}
|
|
#button3.CTAT-button--hover {
|
|
background-color: darkblue;
|
|
border: 1px solid black;
|
|
}
|
|
#button3.CTAT-button--clicked {
|
|
background-color: skyblue;
|
|
border: 1px solid blue;
|
|
}
|
|
#button3:disabled {
|
|
background-color: #EDEDED;
|
|
border: 1px solid darkgrey;
|
|
text-color: #9A9A9A;
|
|
cursor: default;
|
|
}
|
|
</pre>
|
|
In page:
|
|
<pre>
|
|
<div id="button3" class="CTATImageButton">
|
|
<div style="font-size:36px;pointer-events:none;">✔</div>
|
|
<div style="pointer-events:none;">Wow</div>
|
|
</div></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>
|