How to change the feedback message and quiz answer colors with CSS

1. Introduction.

When you configure a quiz with Cool Tabs, you can enable the option to give feedback to the participant. In particular, in point-based quizzes, you can set the correct answer to be marked in green and the incorrect ones in red.

The colors of the feedback message and the quiz answers are set by default:

• Right answer: #00C853
• Wrong answers: #E91E63

You can change them using CSS.

2. Step by step.

To make changes to the colors, go to the campaign preview, activate the custom CSS option, paste the custom CSS shown below, and replace the color code with the one you want.

• If you have only enabled feedback, no message, add the following CSS:

/* Quiz answer options */

/* Wrong answer */
.js_quizz_question_ko label.m_option_label {
background-color: #FF6347 !important;
}
.control-checks.js_quizz_question_ko input:not(:checked) ~ label.m_option_label,
.control-checks.js_quizz_quizz_question_ko input:not(:checked) ~ label.m_option_label:hover {
background-color: #FF6347 !important;
color: #ffffffff !important;
}
/* Correct answer */
.js_quizz_question_ok label.m_option_label {
background-color: #4bad4b !important;
}
.control-checks.js_quizz_question_ok input:checked ~ label.m_option_label,
.control-checks.js_quizz_question_ok input:not(:checked) ~ label,
.control-checks.js_quizz_question_ok input:checked ~ label.m_option_label:hover {
background-color: #4bad4b !important;
color: #ffffffff !important;
}

• If you have customized a feedback message, you must also include:

/* Feedback message */

/* Wrong answers */
.js_answer_ko {
background-color: #FF6347 !important;
}
.js_answer_ko p {
color: #ffffffff !important;
}
/* Correct answer */
.js_answer_ok {
background-color: #4bad4b !important;
}
.js_answer_ok p {
color: #ffffffff !important;
}

3. Other specifications.

If you have any questions, you can contact us by email at help@cool-tabs.com.

4. Related content.

How to configure custom CSS for your campaign.