CSS for JavaScript Task, but not the whole survey? | XM Community
Skip to main content

Hi everyone,
I have an experiment with an experimental task programmed with JavaScript including two tables. One table of option 1 and one of option 2 are shown simultaneously. For the table I used following html code and set the custom CSS via Qualtrics.
Since questionnaires are also part of the experiment, the questionnaires are set with the same CSS code as the experimental task. I tried a lot, for example building a class for the experimental tables, putting each table seperatly but also the divs in classes, but I´m very much a beginner with CSS and it didn´t work. Is there any way I can change the code so the CSS just works for my experimental task and not for the whole survey?
Thank you very much in advance!
CSS:
table, th, td {font color: black; border: 1px solid black; width: 40%; height: 25px; border-collapse: collapse; text-align: center; margin-right: 100px }

Bild1.pngBild2.png

Hi there,
you could try adding ids(if only used once) or classes to the tr, th, td -tags and define them accordingly in the style css .

Best regards

Rudi


Thanks for your answer!
I already tried that, but the css code is not applied to the tags.


Hi I tried this in one of my surveys and the below CSSworked,
I defined a table class test and then defined each tag.
same should work with id when substituting .preview with #test
.test tr{
min-width: 100%;
max-width: 100%;
text-align: center;
background-color:#1e1e1e
}
.test td{

min-width: 50%;
max-width: 50%;
text-align: left;
padding: 10px;
}

Best regards


The CSS is working now, thank you so much!


Leave a Reply