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

CSS for JavaScript Task, but not the whole survey?

  • March 4, 2022
  • 4 replies
  • 50 views
E
Forum|alt.badge.img

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

Best answer by Rudi

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

4 replies

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • March 9, 2022

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

E
Forum|alt.badge.img
  • E4568
  • Author
  • March 10, 2022

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

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • Answer
  • March 11, 2022

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

E
Forum|alt.badge.img
  • E4568
  • Author
  • March 14, 2022

The CSS is working now, thank you so much!

Terms & ConditionsAccessibility statement