Cómo cambiar los colores del mensaje del feedback y de respuesta de un quiz por CSS

1. Introducción.

Cuando creas un quiz con Cool Tabs, puedes habilitar la opción de dar feedback al participante. En concreto, en los quizzes por puntos, puedes configurar que la respuesta correcta se marque en verde y las incorrectas en rojo. 

Los colores del mensaje de feedback y de las respuestas del quiz vienen configurados por defecto:

• Acierto: #00C853
• Fallo: #E91E63

Puedes modificarlos mediante CSS.

2. Paso a paso.

Para realizar los cambios, ve a la previsualización de la campaña, activa la opción CSS personalizada, pega el CSS personalizado que te mostramos a continuación y reemplaza el código del color por el que quieras. 

• Si solo has habilitado feedback, sin mensaje, añade el CSS:

/* Opciones respuestas del quiz */

/* Respuesta incorrecta */
.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;
}
 /* Respuesta OK */
.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;
}

• Si has personalizado un mensaje de feedback, debes incluir también:

/* Mensaje feedback */

 /* Respuesta incorrecta */
.js_answer_ko {
  background-color: #FF6347 !important;
}
.js_answer_ko p {
  color: #ffffff !important;
}
 /* Respuesta OK */
.js_answer_ok {
  background-color: #4bad4b !important;
}
.js_answer_ok p {
  color: #ffffff !important;
}

3. Otras especificaciones.

Si tienes alguna duda durante el proceso, puedes contactarnos en el email soporte@cool-tabs.com

4. Contenido relacionado. 

Cómo configurar la CSS personalizada de una campaña >>

Cómo configurar la CSS personalizada de una campaña con diseño clásico (campañas antiguas) >>