Testing CTAT Components with CodePen

Vasudeva Rao Aravind

unread,

Jan 28, 2020, 11:07:45 PM1/28/20

to CTAT Users

Hi CTAT Team,

I am trying to play around with CTAT HTML components using CodePen. I included these in CodePen CSS External Stylesheets:

https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.min.css and

https://cdn.ctat.cs.cmu.edu/releases/CTAT_4_3_0/CTAT.css

However, I am unable to display CTAT components. For example, I tried displaying a CTATTextInput and it wouldn't show up. Can you please advise how I should include the CTAT css files to display CTAT HTML components?

Thank you,

Vasu

Jonathan Sewall

unread,

Jan 29, 2020, 8:19:33 AM1/29/20

to ctat-...@googlegroups.com

Greetings, Prof Aravind,

The CTAT components are, initially, empty <div> elements with CTAT-specific class attributes that you arrange on your student interface's HTML. The CTAT runtime code in ctat.min.js (that you include with a <script> tag in your HTML <head>) reads the document once the page is loaded and, for each <div> with a CTAT class (CTATTextInput, CTATButton, etc), invokes constructor code that dynamically adds actual HTML components (<input>, <button>, ...) as child elements of the original <div>s.

The code that usually invokes the CTAT runtime in ctat.min.js is in ctatloader.js (also included via a <script> tag in the HTML <head>). This separate JavaScript file tries to determine the LMS environment (is this invocation for OLI, edX, Tutorshop, no LMS, ...) in order to call the runtime initializer function initTutor() properly for that situation.

Hence in addition to the CSS files, you'll need to ensure that ctat.min.js is included and initTutor() is called on or after the onload event. See this MDN page for info re: onload. Thanks!

Jonathan

--
You received this message because you are subscribed to the Google Groups "CTAT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ctat-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ctat-users/abacc662-0901-4efd-9154-932d7dd01368%40googlegroups.com.

Vasudeva Rao Aravind

unread,

Jan 30, 2020, 1:21:33 PM1/30/20

to CTAT Users

Thank you very much for the reply, Jonathan. I will try to include those JS and see if I can test it out on CodePen.

Best

Vasu

To unsubscribe from this group and stop receiving emails from it, send an email to ctat-...@googlegroups.com.

Reply all

Reply to author

Forward