COLOR MIX
Guess the result to unlock your reward.
Round 1 of 5
?
Select the result:
Quiz Completed!
🎨
Final Score:
0 / 5
Generating reward…
3
s
Redirecting automatically…
You need a perfect score (5/5) to unlock the reward!
` }, { c1: "bg-red-600", c2: "bg-blue-600", correct: 'A', htmlA: `
ADVERTISEMENT
`, htmlB: `
` }, { c1: "bg-red-600", c2: "bg-white border-2 border-gray-200", correct: 'B', htmlA: `
`, htmlB: `
` }, { c1: "bg-black", c2: "bg-white border-2 border-gray-200", correct: 'A', htmlA: `
`, htmlB: `
` }, { c1: "bg-orange-500", c2: "bg-white border-2 border-gray-200", correct: 'B', htmlA: `
`, htmlB: `
` }, { c1: "bg-red-600", c2: "bg-green-500", correct: 'A', htmlA: `
`, htmlB: `
` }, { c1: "bg-blue-600", c2: "bg-white border-2 border-gray-200", correct: 'B', htmlA: `
`, htmlB: `
` }, { c1: "bg-yellow-400", c2: "bg-red-600", correct: 'A', htmlA: `
`, htmlB: `
` }, { c1: "bg-green-500", c2: "bg-yellow-400", correct: 'B', htmlA: `
`, htmlB: `
` }, { c1: "bg-purple-600", c2: "bg-white border-2 border-gray-200", correct: 'A', htmlA: `
`, htmlB: `
` }, { c1: "bg-blue-800", c2: "bg-yellow-400", correct: 'B', htmlA: `
`, htmlB: `
` } ];
let gameQuestions = []; let currentQIndex = 0; let isAnswered = false; let score = 0;
// Elementos del DOM const gameArea = document.querySelector('#game-area'); const endScreen = document.querySelector('#end-screen'); const color1El = document.querySelector('#color-1'); const color2El = document.querySelector('#color-2'); const optionAEl = document.querySelector('#option-a'); const optionBEl = document.querySelector('#option-b'); const resultAContainer = document.querySelector('#result-a-container'); const resultBContainer = document.querySelector('#result-b-container'); const resultMsg = document.querySelector('#result-message'); const nextBtn = document.querySelector('#next-btn'); const currentRoundEl = document.querySelector('#current-round'); const finalScoreEl = document.querySelector('#final-score'); const finalFeedbackEl = document.querySelector('#final-feedback'); const countdownTimerEl = document.querySelector('#countdown-timer'); const successContainer = document.querySelector('#success-container'); const failureContainer = document.querySelector('#failure-container');
if (gameArea && endScreen) { initGame(); }
function initGame() { const shuffled = [...fullColorPool].sort(() => 0.5 - Math.random()); gameQuestions = shuffled.slice(0, 5); currentQIndex = 0; score = 0; isAnswered = false;
gameArea.classList.remove('hidden'); endScreen.classList.add('hidden'); loadQuestion(); }
function loadQuestion() { const q = gameQuestions[currentQIndex]; isAnswered = false;
resultMsg.className = "hidden mt-3 p-2 rounded-lg text-center font-bold text-sm sm:text-lg"; nextBtn.classList.add('hidden');
if (currentQIndex === gameQuestions.length - 1) { nextBtn.textContent = "Finish"; nextBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700'); nextBtn.classList.add('bg-green-600', 'hover:bg-green-700'); } else { nextBtn.textContent = "Next Round →"; nextBtn.classList.remove('bg-green-600', 'hover:bg-green-700'); nextBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700'); }
[optionAEl, optionBEl].forEach(el => { el.className = "quiz-card cursor-pointer bg-white rounded-xl p-2 sm:p-8 border-4 border-gray-300 flex items-center justify-center h-32 sm:h-56 relative group hover:border-indigo-300"; el.classList.remove('opacity-50', 'pointer-events-none'); el.classList.remove('border-green-500', 'bg-green-50', 'border-red-500', 'bg-red-50', 'pop', 'shake'); });
color1El.className = `color-circle ${q.c1}`; color2El.className = `color-circle ${q.c2}`; currentRoundEl.textContent = currentQIndex + 1; resultAContainer.innerHTML = q.htmlA; resultBContainer.innerHTML = q.htmlB; }
window.checkColorAnswer = function(selectedOption) { if (isAnswered) return; isAnswered = true;
const q = gameQuestions[currentQIndex]; const isCorrect = selectedOption === q.correct; const selectedEl = selectedOption === 'A' ? optionAEl : optionBEl; const correctEl = q.correct === 'A' ? optionAEl : optionBEl; const otherEl = selectedOption === 'A' ? optionBEl : optionAEl;
otherEl.classList.add('pointer-events-none'); selectedEl.classList.remove('border-gray-300', 'bg-white', 'hover:border-indigo-300');
if (isCorrect) { score++; selectedEl.classList.add('border-green-500', 'bg-green-50', 'pop'); otherEl.classList.add('opacity-50'); resultMsg.textContent = "Correct! ✅"; resultMsg.classList.remove('hidden'); resultMsg.classList.add('bg-green-100', 'text-green-700'); } else { selectedEl.classList.add('border-red-500', 'bg-red-50', 'shake'); correctEl.classList.remove('border-gray-300'); correctEl.classList.add('border-green-500', 'ring-2', 'ring-green-200'); resultMsg.textContent = "Oops! Wrong. ❌"; resultMsg.classList.remove('hidden'); resultMsg.classList.add('bg-red-100', 'text-red-700'); } nextBtn.classList.remove('hidden'); }
window.nextColorQuestion = function() {
if (currentQIndex < gameQuestions.length - 1) {
currentQIndex++;
loadQuestion();
} else {
showEndScreen();
}
}
function showEndScreen() {
gameArea.classList.add('hidden');
endScreen.classList.remove('hidden');
finalScoreEl.textContent = score;
// Reset visibility
successContainer.classList.add('hidden');
failureContainer.classList.add('hidden');
if (score === 5) {
// ÉXITO TOTAL: Redirigir
finalFeedbackEl.textContent = "Master Artist! Perfect vision.";
successContainer.classList.remove('hidden');
let timeLeft = 3;
countdownTimerEl.textContent = timeLeft;
const timerInterval = setInterval(() => {
timeLeft--;
countdownTimerEl.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerInterval);
window.location.href = REDIRECT_LINK;
}
}, 1000);
} else {
// FALLO: Mostrar botón de reintentar
if (score >= 3) {
finalFeedbackEl.textContent = "Good job! But you need 5/5.";
} else {
finalFeedbackEl.textContent = "Keep mixing! You need 5/5.";
}
failureContainer.classList.remove('hidden');
}
}
})();
¿Eres un Maestro del Color? ¡Pon a Prueba tu Matemática Visual! 🎨
Todos aprendimos en el jardín de niños que rojo más amarillo es igual a naranja. Suena simple, ¿verdad? Pero la teoría del color es en realidad una ciencia compleja que engaña a nuestros cerebros más a menudo de lo que pensamos.
Bienvenido al Desafío de Mezcla de Colores, un rompecabezas visual diseñado para probar si realmente sabes cómo interactúan los colores. Antes de empezar para desbloquear tu recompensa, profundicemos en por qué mezclar colores es más que un juego de niños.
La «Matemática Visual» de tu Cerebro 🧠
Cuando mezclas dos colores, esencialmente estás haciendo una ecuación matemática, pero con luz y pigmento en lugar de números.
- Rojo + Azul = ?
- Azul + Amarillo = ?
Tu cerebro tiene que simular el proceso de mezcla al instante. Artistas y diseñadores entrenan durante años para desarrollar esta «intuición del color», permitiéndoles predecir exactamente qué tono aparecerá antes de que el pincel toque el lienzo.
¿Por qué es engañoso? (RYB vs. RGB)
Aquí es donde se pone interesante. Vivimos en un mundo digital donde las pantallas usan luz (RGB: Rojo, Verde, Azul) para crear colores. En ese mundo, mezclar Rojo y Verde te da… ¡Amarillo!
Pero nuestro quiz sigue las Reglas Clásicas del Pintor (RYB). Volvemos a lo básico: la lógica física de la pintura. En este desafío, necesitas pensar como un artista sosteniendo una paleta, no como un programador. Si mezclas Rojo y Verde aquí, no obtendrás luz amarilla; obtendrás un Marrón turbio.
🌈 El Desafío: 5 Rondas de Rompecabezas de Pigmentos
Hemos preparado 5 rondas de ecuaciones de color que van desde lo básico hasta algunas mezclas secundarias complicadas.
Cómo ganar:
- Analiza la Ecuación: Mira los dos colores primarios que se están sumando.
- Predice el Resultado: Imagina mezclar dos cubos de pintura en tu cabeza.
- Selecciona la Coincidencia: Elige el círculo que muestra el tono resultante correcto.
¡Ten cuidado! Hemos incluido algunas respuestas trampa que podrían parecer correctas si estás pensando en «modo digital» en lugar de «modo pintura».
ADVERTISEMENT
Deja una respuesta
Big Baby llega mañana a Shudder: el slasher más raro del año
Mañana se estrena en Shudder Big Baby: el meta-slasher de Spider One sobre un asesino con máscara de bebé, con...
Read moreDetails
ADVERTISEMENT