How to change the feedback message and correct/incorrect answer colors in a quiz using CSS

1. Introduction.

In Cool Tabs' points-based quizzes, when a participant selects an answer, the platform can display visual feedback with colors to indicate whether the answer is correct or incorrect. This feedback can include two elements:

• The color of the answer options: the selected option changes color to indicate if it was a correct or incorrect choice.

• The feedback message (optional): a text that appears after answering, such as "Correct!" or "You missed it", with a colored background.

By default, the correct and incorrect colors are configured as follows:

• Correct answer: green (#00C853)

• Incorrect answer/failure/error: red (#E91E63)

If you want to change these colors (for example, use purple instead of red for incorrect answers, or blue instead of green for correct answers), you can do so by adding custom CSS. Here’s how.

2. Step by step.

2.1. Access the CSS editor.

1. Go to the preview of your quiz campaign.
2. Enable the "Custom CSS" option.
3. Paste the relevant CSS code according to your case (see below).
4. Replace the color codes with the colors you want.

2.2. CSS to change the quiz answer option colors.

If you have only enabled visual feedback (the option colors change after answering, without an additional text message), paste the following CSS. Replace the indicated colors with your preferred ones.
 

/* ANSWER OPTIONS */

/* INCORRECT ANSWER / FAILURE / ERROR */
/* CHANGE #FF6347 to the color you want */

.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_question_ko input:not(:checked) ~ label.m_option_label:hover {
  background-color: #FF6347 !important;
  color: #ffffff !important;
}

/* CORRECT ANSWER / SUCCESS */
/* CHANGE #4BAD4B to the color you want */

.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: #ffffff !important;
}

What should you modify?

• To change the color of incorrect answers (failures): replace all occurrences of #FF6347 with your desired color.
• To change the color of correct answers (successes): replace all occurrences of #4BAD4B with your desired color.

2.3. CSS to change the feedback message colors.

If you have also set up a custom feedback message that appears after answering (for example, "Correct!" or "Incorrect answer, the answer was..."), in addition to the CSS from section 2.2, you must also add the following CSS:

/* FEEDBACK MESSAGE */

/* INCORRECT ANSWER MESSAGE / FAILURE / ERROR */
/* CHANGE #FF6347 to the background color for the incorrect message */

.js_answer_ko {
  background-color: #FF6347 !important;
}
.js_answer_ko p {
  color: #ffffff !important;
}

/* CORRECT ANSWER MESSAGE / SUCCESS */
/* CHANGE #4BAD4B to the background color for the correct message */

.js_answer_ok {
  background-color: #4BAD4B !important;
}
.js_answer_ok p {
  color: #ffffff !important;
}

3. Practical example.

Scenario: You want correct answers to be shown in blue and incorrect answers in purple.

In the CSS, replace:

• #4BAD4B → with #2196F3 (blue, for correct answers/success).

• #FF6347 → with #9C27B0 (purple, for incorrect answers/failures).

This will apply to both the answer options and the feedback message (if you have included both CSS blocks).

4. FAQ.

Can I change only the color of incorrect answers and leave the correct answers as they are?

Yes. Copy the CSS part corresponding to the element you want to change (the "incorrect/failure" section) and leave the other color at its default value.

Can I also change the text color of the options?

Yes. The color property inside each CSS rule controls the text color. By default, it is set to #ffffff (white), but you can change it to any other color.

What types of quizzes does this apply to?

This CSS applies to points-based quizzes that have the feedback option enabled for participants.

5. Other specifications.

If you have any questions during the process, you can contact us at help@cool-tabs.com.

6. Related content. 

How to configure custom CSS for a campaign.