CTATAudioButton - CMUCTAT/CTAT GitHub Wiki
The CTATAudioButton is meant to deliver an audio clip to the user. The reason to use this instead of just including the clip on your page is that this button works with our tutoring service and logging facilities.
<div id="audiobutton" class="CTATAudioButton"
data-ctat-src="audio.mp3">Listen</div>-
id: Required. The name of the component, must be a valid html id name. -
class: Required. The class list, must includeCTATAudioButtonand no other CTAT<component> classes. -
data-ctat-src: Required. The url of the audio file. It is suggested that mp3 files are used as they are the most supported. -
data-ctat-enabled:trueorfalse. Default istrue. Controls if the component will accept student interaction. -
data-ctat-tutor:trueorfalse. Default istrue. Controls if direct actions on the component trigger grading. -
data-ctat-show-feedback:trueorfalse. Default istrueunlessdata-ctat-tutor="false". Determines if grading feedback is shown on the component. -
data-ctat-show-hint-highlight:trueorfalse. Default istrue. Determines if hint highlighting is shown on the component. -
data-ctat-disable-on-correct:trueorfalse. Default istrue. Determines if the component becomes locked when it is graded as correct.
To set the label, add text or an <img> text to the content of the <div>. For example, the label on the example button above will be "Listen".
In addition to the common Actions listed in Often Used TPAs this component supports the following actions:
| Action | Input | Notes |
|---|---|---|
| play | Starts playing the audio file specified in data-ctat-src. |
|
| pause | Pauses playback. | |
| playClip | url | Plays the file from the url using the audio button. This does not change data-ctat-src so subsequent play actions will start the original audio file. |
| setSource | url | Sets data-ctat-src to the given url. |
| setText | value (String) | Sets the button label to the given value. |
.CTATAudioButton { display: inline-block; } /* size to the content of the button */See CTATButton for more information on how to style this button as it uses the same CSS classes.
Example for mass producing the button's audio file:
<div id="audiobutton" class="CTATAudioButton"
data-ctat-src="%(listen-src)%">Listen</div>