Custom CSS for only one block of questions | XM Community
Skip to main content

This is sort of a follow up to a previous question I asked here. 

 

I wanted to reformat a matrix question, and I was told this was possible through CSS and Javascript.  My previous study was coded in python and CSS, so I have been trying to implement the CSS portion over here on Qualtrics.  When I go to look and feel, and then custom CSS however, it seems to impact all matrix style questions.  Since I use matrix questions in multiple places, I only want the custom CSS to apply to one block of 10 questions.  This might be due to the fact that I am only passingly familiar with CSS, and not at all familiar with Javascript, but how do you specify which questions in Qualtrics, the custom CSS should apply to? 

I did find this thread as well, and it seems like the answer may be to apply CSS to one page at a time, but for some reason the way to do that does not appear in the answer.  It simply says “ try including the below in the Question Text on any question on that page: “ and there is nothing below.
 


I also found the following discussion which links to a page describing how to add custom CSS for one page, but that link appears to be dead.

https://community.qualtrics.com/fid-70/tid-1538?postid=4953#post4953
 

I would also like to record all of their answers and then auto fill a table for them to confirm at the end.  The idea is they would get each of the 10 questions one at a time at random, then a table showing all their answers they could then edit or confirm as correct. I imagine that can be done with pipped text, but I am less sure how that interacts with the custom elements.

 

For reference here is my old code I am trying to update for this project.  The “{{ form.q1.0 }}“ are calling information from the python script where most of the actual work is done.  I am still not clear where javascript is needed in this process. 

 

 

{{ block title }}
    Please indicate which of the following distributions you prefer.
{{ endblock }}
{{ block content }}

{% block styles %}
   <style>
      input&type=radio] {
        transform: scale(1.25);
        margin:10px;
      }
   </style>
{% endblock %}


<p>
  After everyone has answered all question, you will be randomly matched with one other participant.  One of you will be
    assigned the role of dictator and the other recipient.  One of the dictator's choices will be implemented, and the
    division of money in that choice will be paid out. Each decision is equally likely to be selected.

</p>


<style>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
    margin-left: 2.5em;
    margin-bottom: 3em;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
td, th {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}
table tr#ROW1  {background-color:#0d6efd; color:white;}
</style>


<table class="center">
    <tr id="ROW1" ><td></td> <td>You Receive </td> <td>Other Receives </td></tr>
    <tr> <td> {{ form.q1.0 }} </td> <td> ${{dis_1a }}</td>  <td> ${{dis_1b}}</td> </tr>
    <tr> <td> {{ form.q1.1 }} </td> <td> ${{even}}</td>  <td> ${{even}}</td> </tr>
</table>
 

 {{ next_button }}

{{ endblock }}

Ultimately the goal is to produce 10 tables, shown 1 at a time like this. 

 

You can add CSS to question text by putting it inside a <style> tag.  If you do that, then the styles will apply to all questions on that page for which the CSS rules apply:

This is the question text.
<style>
/* Page specific CSS rules go here */
</style>

Another, probably preferable method, would be to add rules to Custom CSS that are specific to a class, then add that class to the question using JavaScript. For example:

CSS:

.myMatrix table { /* etc. */

JS:

jQuery(this.questionContainer).addClass("myMatrix");

 

Ok, thanks so much for your response Tom.  It sounds like I want the second option rather than the first, since I not only wish to format the question text, but also the placement of the radio buttons.   I have little to no knowledge of javascript, so I wish to clarify, the JS code goes here like this right?

 

 

Ok as a follow up, I tested this with a simple CSS class to change text color and that worked.  I guess I know less about CSS than I thought though, as my custom CSS class for the table is not working. I am not sure how to move around the existing buttons in the matrix table using a CSS class. Or should I be making new buttons?

I can recreate the table using the <style> method, though the radio buttons do not appear in the preview.  

Ok, thanks so much for your response Tom.  It sounds like I want the second option rather than the first, since I not only wish to format the question text, but also the placement of the radio buttons.   I have little to no knowledge of javascript, so I wish to clarify, the JS code goes here like this right?

 

 

CSS you place in a style tag in the question text will apply to the whole page, not just the question text.

Yes, your JS is correct.

Ok as a follow up, I tested this with a simple CSS class to change text color and that worked.  I guess I know less about CSS than I thought though, as my custom CSS class for the table is not working. I am not sure how to move around the existing buttons in the matrix table using a CSS class. Or should I be making new buttons?

I can recreate the table using the <style> method, though the radio buttons do not appear in the preview.  

You can’t move elements with CSS,  you can only format them.  If you want to move elements use JavaScript.

The approach of using your ‘old code’ to create questions is very suspect. If you create your own form or form elements Qualtrics isn’t going to record the answers. It only records answer to questions created in Qualtrics.

Ok as a follow up, I tested this with a simple CSS class to change text color and that worked.  I guess I know less about CSS than I thought though, as my custom CSS class for the table is not working. I am not sure how to move around the existing buttons in the matrix table using a CSS class. Or should I be making new buttons?

I can recreate the table using the <style> method, though the radio buttons do not appear in the preview.  

You can’t move elements with CSS,  you can only format them.  If you want to move elements use JavaScript.

The approach of using your ‘old code’ to create questions is very suspect. If you create your own form or form elements Qualtrics isn’t going to record the answers. It only records answer to questions created in Qualtrics.

hi Tom,

 

Thank you again for your response.  The old code used python on the back end via the oTree package, which uses django so I did not have to previously use javascript myself.  It seems I need to either learn Javascript, or accept a different format for this question. 

Leave a Reply


Terms & Conditions