Testing CTAT Components with CodePen

Skip to first unread message

Vasudeva Rao Aravind

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:

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,

Jonathan Sewall

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!

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

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. 

To unsubscribe from this group and stop receiving emails from it, send an email to ctat-...@googlegroups.com.
Reply all
Reply to author
0 new messages