Change Background Color of Survey Half Way Through?

Question

Hi Sawtooth Forum,
  I am coding a survey in Sawtooth 7.  I am essentially coding two written surveys in one Sawtooth Survey. To make it obvious to the participant that they are transitioning to the second survey, I want to change the background color of the survey once the taker gets to the first page of questions for the second survey.  Is there a way to do this?

Thank you!
Elise

Answer 1

Good question.

You can change the background colour across the whole survey via the survey settings. This can be done via your CSS selected style or simply by changing the background colour setting.

On a question by question basis you can change the background colour by inserting some CSS code under the advanced headings as such (you may have to tweak some of this code?) ...

<style type="text/css">

body
{
    background-color: #FFFF66;
}

.page_header
{
    background-color: #FFFF66;
}

.page_footer
{
    background-color: #FFFF66;
}

.question, .submit_div, .progress_bar, .page_error
{
    background-color: #FFFF66;
}

</style>

You could also review this post - https://www.sawtoothsoftware.com/forum/2652/depending-on-uid-load-different-css-stylesheet?show=2652#q2652. It shows how you can load a new CSS file part way through the survey based on a condition. Your condition would be something that indicates the last question of survey 1 has been answered.

Another suggestion is you set up survey 1+2 separately and link them at the terminate page of survey 1. Survey 1 uses CSS style 1 and survey 2 uses CSS style 2. The only differences in the 2 CSS style files is the background colour settings.

Comments

Great!  Thank you Paul.  Your code was wonderful.  I have edited it to fit my needs.  Thank you, THank you!

---

Lodge a new post regarding the logos in the header. Another good question. Regards.