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

1. Introducción.

En los quizzes por puntos de Cool Tabs, cuando un participante selecciona una respuesta, la plataforma puede mostrar un feedback visual con colores para indicar si la respuesta es correcta o incorrecta. Este feedback puede incluir dos elementos:

• El color de las opciones de respuesta: la opción seleccionada cambia de color para indicar si fue un acierto (correcta) o un fallo (incorrecta).

• El mensaje de feedback (opcional): un texto que aparece tras responder, como "¡Correcto!" o "Has fallado", con un fondo de color.

Por defecto, los colores de acierto y fallo vienen así configurados:

• Respuesta correcta / acierto: verde (#00C853)

• Respuesta incorrecta / fallo / error: rojo (#E91E63)

Si quieres cambiar estos colores (por ejemplo, usar morado en lugar de rojo para las incorrectas, o azul en lugar de verde para las correctas), puedes hacerlo añadiendo CSS personalizado. A continuación te explicamos cómo.

2. Paso a paso.

2.1. Accede al editor CSS.

1. Ve a la previsualización de tu campaña de quiz.
2. Activa la opción "CSS personalizada".
3. Pega el código CSS que corresponda según tu caso (ver más abajo).
4. Reemplaza los códigos de color por los colores que quieras.

2.2. CSS para cambiar los colores de las opciones de respuesta del quiz.

Si solo has habilitado el feedback visual (el color de las opciones cambia al responder, sin un mensaje de texto adicional), pega el siguiente CSS. Sustituye los colores indicados por los que quieras.
 

/* OPCIONES DE RESPUESTA */

/* RESPUESTA INCORRECTA / FALLO / ERROR */
/* CAMBIA #FF6347 por el color que quieras */

.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 CORRECTA / ACIERTO */
/* CAMBIA #4BAD4B por el color que quieras */

.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;
}

¿Qué debes modificar?

• Para cambiar el color de las respuestas incorrectas (fallos): reemplaza todas las apariciones de #FF6347 por tu color deseado.
• Para cambiar el color de las respuestas correctas (aciertos): reemplaza todas las apariciones de #4BAD4B por tu color deseado.

2.3. CSS para cambiar los colores del mensaje de feedback.

Si además has configurado un mensaje de feedback personalizado que aparece al responder (por ejemplo, "¡Correcto!" o "Respuesta incorrecta, la respuesta era…"), además del CSS del apartado 2.2, debes añadir también el siguiente CSS:

/* MENSAJE DE FEEDBACK */

/* MENSAJE DE RESPUESTA INCORRECTA / FALLO / ERROR */
/* CAMBIA #FF6347 por el color de fondo del mensaje de fallo */

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

/* MENSAJE DE RESPUESTA CORRECTA / ACIERTO */
/* CAMBIA #4BAD4B por el color de fondo del mensaje de acierto */

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

3. Ejemplo práctico.

Escenario: quieres que las respuestas correctas se muestren en azul y las incorrectas en morado.

En el CSS, simplemente hay que reemplazar:

• #4BAD4B → por #2196F3 (azul, para aciertos/correctas).

• #FF6347 → por #9C27B0 (morado, para fallos/incorrectas).

Esto aplicará tanto a las opciones de respuesta como al mensaje de feedback (si has incluido ambos bloques de CSS).

4. FAQ.

¿Puedo cambiar solo el color de las incorrectas y dejar las correctas como están?

Sí. Copia solo la parte del CSS que corresponde al elemento que quieres cambiar (la sección de "incorrecta/fallo") y deja el otro color con su valor por defecto.

¿Puedo cambiar también el color del texto de las opciones?

Sí. La propiedad color dentro de cada regla CSS controla el color del texto. Por defecto está en #ffffff (blanco), pero puedes cambiarlo por cualquier otro color.

¿A qué tipos de quiz aplica?

Este CSS aplica a los quizzes por puntos que tengan habilitada la opción de feedback al participante.

5. Otras especificaciones.

Si tienes alguna duda durante el proceso, puedes contactarnos a help@cool-tabs.com.

6. Contenido relacionado. 

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