Image button: default image is always invisible

33 views
Skip to first unread message

Helena Kilger

unread,
Dec 21, 2023, 12:17:03 PM12/21/23
to CTAT Users
Hello everyone,
I am a very new CTAT user and run into a problem. I want to use the image buttons. I already created some image buttons and uploaded different images for the different stages (e.g., default and hover). As a test I also changed the background color of one button to red. You can see all of this in the screenshot attached. In this interface everything looks correct.
But once I load the html with the CTAT app (File -> Launch HTML interface) the default images are not visible. As you can see in the attached video, the other states (e.g., hover) are working, so the buttons only appear once I hover over them. The image files seem not to be the problem (I can see them when including them as simple images outside of image buttons). Also, the buttons don't seem to be completely invisible, because the red background of the test one is still shown. Only the default image is not loaded/shown.
Any idea what I can do about that?
CTAT-image-button-invisible.mp4
CTAT-image-button-creation.png

Jonathan Sewall

unread,
Dec 21, 2023, 4:09:53 PM12/21/23
to ctat-...@googlegroups.com
Greetings,

I encourage you to try our web-based reimplementation of the CTAT tools. Though the desktop Java-based version remains available, our recent development efforts have been on a web application that requires no installation on your local machine. To this end, I created an account for you on our school.tutorshop site. You should receive an email with login credentials. Tutorshop is a learning management system specialized for deploying tutors built with CTAT; this is our site where most tutor development occurs, and you would normally want to deploy your tutor on a Tutorshop site for user testing. After you login, choose the Packages link at the left, then click the New Package button at the bottom right to create a new package. From your package's Assets tab you can upload your image files or other files (to path HTML/Assets/) and any .brd files (to path FinalBRDs/) with the Load Assets button. Then click the Edit Assets button at the lower right; the new CTAT tools will open in a new browser tab. 

For some videos showing use of the new tool, see this Google folder, starting with 01 Overview (no bgm).mp4. The new HTML interface editor is somewhat similar to the old one, but it lets you also create containers for your interactive elements. For the CTAT Image button, enter your image file location relative to the package's HTML subfolder. 

Tutorshop and CTAT are available free for noncommercial research and educational use. If you plan to have commercial activity, such as charging for content built or deployed on the site, please contact us for a commercial license. By default, your tutors will log to the QA DataShop, which is appropriate for test data. If you wish to start collecting data to publish, run real-world users or otherwise scale up, please let us know so we can set you up for production use. Thanks for your interest in CTAT and Tutorshop,

Jonathan Sewall
Human-Computer Interaction Institute
Carnegie Mellon University

--
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/5c383dcd-47d0-4a43-adab-906a6e28b876n%40googlegroups.com.

Helena Kilger

unread,
Dec 22, 2023, 4:01:43 AM12/22/23
to CTAT Users
Thank you so much for the very fast answer :)
My registration was successful and I will try out the new implementation soon. 
Greetings from Germany and Merry Christmas!
Helena Kilger
Reply all
Reply to author
Forward
0 new messages