SEPARAÇÃO DE MISTURAS ESCAPE RUM
import { useState, useEffect, useCallback } from 'react'
// Banco de 40 questões sobre Misturas e Separação de Misturas
const QUESTIONS_BANK = [
// Misturas Homogêneas e Heterogêneas (10 questões)
{
id: 1,
question: "O que é uma mistura homogênea?",
options: [
"Uma mistura onde não conseguimos distinguir os componentes",
"Uma mistura onde conseguimos distinguir os componentes",
"Uma mistura com apenas um componente",
"Uma mistura que sempre tem cor diferente"
],
correct: 0,
category: "homogenea_heterogenea"
},
{
id: 2,
question: "Qual das opções abaixo é uma mistura homogênea?",
options: [
"Água e óleo",
"Água e sal dissolvido",
"Sal e areia",
"Água e terra"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 3,
question: "O que caracteriza uma mistura heterogênea?",
options: [
"Tem apenas uma fase visível",
"Possui duas ou mais fases visíveis",
"É sempre líquida",
"Não tem componentes diferentes"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 4,
question: "Água com gelo é considerada:",
options: [
"Substância pura",
"Mistura homogênea",
"Mistura heterogênea",
"Elemento químico"
],
correct: 2,
category: "homogenea_heterogenea"
},
{
id: 5,
question: "O ar que respiramos é uma mistura:",
options: [
"Heterogênea",
"Homogênea",
"Pura",
"Sólida"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 6,
question: "Suco de laranja com polpa é:",
options: [
"Mistura homogênea",
"Mistura heterogênea",
"Substância pura",
"Elemento"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 7,
question: "Uma mistura de álcool e água é:",
options: [
"Heterogênea",
"Homogênea",
"Pura",
"Sólida"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 8,
question: "O granito é uma mistura:",
options: [
"Homogênea",
"Heterogênea",
"Pura",
"Gasosa"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 9,
question: "Quantas fases tem uma mistura homogênea?",
options: [
"Duas ou mais",
"Apenas uma",
"Três",
"Nenhuma"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 10,
question: "Vinagre é considerado:",
options: [
"Mistura heterogênea",
"Mistura homogênea",
"Substância pura",
"Elemento químico"
],
correct: 1,
category: "homogenea_heterogenea"
},
// Decantação (5 questões)
{
id: 11,
question: "A decantação é usada para separar:",
options: [
"Sólidos de mesmo tamanho",
"Líquidos de densidades diferentes",
"Gases de líquidos",
"Sólidos de gases"
],
correct: 1,
category: "decantacao"
},
{
id: 12,
question: "Qual princípio é usado na decantação?",
options: [
"Diferença de temperatura",
"Diferença de densidade",
"Diferença de cor",
"Diferença de cheiro"
],
correct: 1,
category: "decantacao"
},
{
id: 13,
question: "Na decantação, o material mais denso:",
options: [
"Fica no topo",
"Fica no fundo",
"Fica no meio",
"Desaparece"
],
correct: 1,
category: "decantacao"
},
{
id: 14,
question: "Água e óleo podem ser separados por:",
options: [
"Filtração",
"Decantação",
"Destilação",
"Catação"
],
correct: 1,
category: "decantacao"
},
{
id: 15,
question: "Qual instrumento facilita a decantação de líquidos?",
options: [
"Funil de decantação",
"Filtro de papel",
"Peneira",
"Ímã"
],
correct: 0,
category: "decantacao"
},
// Filtração (5 questões)
{
id: 16,
question: "A filtração separa:",
options: [
"Dois líquidos",
"Sólido de líquido",
"Dois gases",
"Dois sólidos"
],
correct: 1,
category: "filtracao"
},
{
id: 17,
question: "O que retém o filtro no processo de filtração?",
options: [
"Partículas sólidas",
"Líquidos",
"Gases",
"Água"
],
correct: 0,
category: "filtracao"
},
{
id: 18,
question: "Exemplo de filtração no dia a dia:",
options: [
"Fazer café",
"Cozinhar arroz",
"Misturar açúcar na água",
"Derreter gelo"
],
correct: 0,
category: "filtracao"
},
{
id: 19,
question: "Qual material é comum para fazer filtros?",
options: [
"Papel filtro",
"Madeira",
"Metal pesado",
"Plástico grosso"
],
correct: 0,
category: "filtracao"
},
{
id: 20,
question: "Na filtração, o líquido que passa pelo filtro é chamado de:",
options: [
"Resíduo",
"Filtrado",
"Sólido",
"Mistura"
],
correct: 1,
category: "filtracao"
},
// Destilação (5 questões)
{
id: 21,
question: "A destilação separa componentes por:",
options: [
"Diferença de cor",
"Diferença de ponto de ebulição",
"Diferença de tamanho",
"Diferença de cheiro"
],
correct: 1,
category: "destilacao"
},
{
id: 22,
question: "A destilação simples separa:",
options: [
"Dois sólidos",
"Sólido dissolvido em líquido",
"Dois gases",
"Dois líquidos imiscíveis"
],
correct: 1,
category: "destilacao"
},
{
id: 23,
question: "Na destilação, o líquido é:",
options: [
"Congelado",
"Evaporado e depois condensado",
"Misturado",
"Decantado"
],
correct: 1,
category: "destilacao"
},
{
id: 24,
question: "Qual aparelho é essencial na destilação?",
options: [
"Peneira",
"Alambique",
"Funil",
"Ímã"
],
correct: 1,
category: "destilacao"
},
{
id: 25,
question: "A destilação é usada para obter:",
options: [
"Água pura da água salgada",
"Sal da areia",
"Óleo da água",
"Pó de café"
],
correct: 0,
category: "destilacao"
},
// Catação e Peneiração (5 questões)
{
id: 26,
question: "A catação é um método de separação:",
options: [
"Automático",
"Manual",
"Químico",
"Térmico"
],
correct: 1,
category: "catacao_peneiracao"
},
{
id: 27,
question: "A peneiração separa sólidos por:",
options: [
"Cor",
"Tamanho",
"Peso",
"Cheiro"
],
correct: 1,
category: "catacao_peneiracao"
},
{
id: 28,
question: "Exemplo de catação no dia a dia:",
options: [
"Coar café",
"Separar pedras do feijão",
"Decantar água",
"Destilar álcool"
],
correct: 1,
category: "catacao_peneiracao"
},
{
id: 29,
question: "Para separar arroz de feijão, usamos:",
options: [
"Destilação",
"Filtração",
"Catação",
"Decantação"
],
correct: 2,
category: "catacao_peneiracao"
},
{
id: 30,
question: "A peneira é usada para separar:",
options: [
"Líquidos de gases",
"Sólidos de tamanhos diferentes",
"Dois líquidos",
"Gases de sólidos"
],
correct: 1,
category: "catacao_peneiracao"
},
// Questões adicionais mistas (10 questões)
{
id: 31,
question: "Qual método separaríamos areia de água?",
options: [
"Destilação",
"Filtração",
"Catação",
"Peneiração"
],
correct: 1,
category: "filtracao"
},
{
id: 32,
question: "Mistura de água e álcool é:",
options: [
"Heterogênea",
"Homogênea",
"Pura",
"Sólida"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 33,
question: "O soro caseiro é uma mistura:",
options: [
"Heterogênea",
"Homogênea",
"Pura",
"Sólida"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 34,
question: "Para separar serragem de água, usamos:",
options: [
"Destilação",
"Filtração",
"Decantação",
"Catação"
],
correct: 1,
category: "filtracao"
},
{
id: 35,
question: "O leite é uma mistura:",
options: [
"Homogênea",
"Heterogênea",
"Pura",
"Gasosa"
],
correct: 1,
category: "homogenea_heterogenea"
},
{
id: 36,
question: "A evaporação separa por:",
options: [
"Frio",
"Calor",
"Filtro",
"Ímã"
],
correct: 1,
category: "evaporacao"
},
{
id: 37,
question: "Sal da terra pode ser obtido por:",
options: [
"Evaporação da água do mar",
"Filtração",
"Catação",
"Peneiração"
],
correct: 0,
category: "evaporacao"
},
{
id: 38,
question: "O café coado é um exemplo de:",
options: [
"Destilação",
"Filtração",
"Decantação",
"Catação"
],
correct: 1,
category: "filtracao"
},
{
id: 39,
question: "Para separar limalha de ferro de areia, usamos:",
options: [
"Peneira",
"Ímã",
"Filtro",
"Água"
],
correct: 1,
category: "separacao_magnetica"
},
{
id: 40,
question: "A centrifugação separa por:",
options: [
"Calor",
"Força centrífuga",
"Filtro",
"Ímã"
],
correct: 1,
category: "centrifugacao"
}
]
// Palavras da senha final
const SECRET_WORD = "PROFINACIO"
const QUESTIONS_PER_PLAYER = 10
type Question = typeof QUESTIONS_BANK[0]
export default function App() {
const [gameState, setGameState] = useState<'start' | 'playing' | 'won' | 'lost'>('start')
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
const [score, setScore] = useState(0)
const [lives, setLives] = useState(3)
const [revealedLetterIndices, setRevealedLetterIndices] = useState([])
const [userPassword, setUserPassword] = useState('')
const [showPasswordModal, setShowPasswordModal] = useState(false)
const [playerQuestions, setPlayerQuestions] = useState([])
const [answeredQuestions, setAnsweredQuestions] = useState>(new Set())
const [currentQuestion, setCurrentQuestion] = useState(null)
const [showFeedback, setShowFeedback] = useState(false)
const [isCorrect, setIsCorrect] = useState(false)
const [timeLeft, setTimeLeft] = useState(900) // 15 minutos
// Timer
useEffect(() => {
if (gameState !== 'playing' || showPasswordModal) return
const timer = setInterval(() => {
setTimeLeft(prev => {
if (prev <= 1) {
setLives(0)
return 0
}
return prev - 1
})
}, 1000)
return () => clearInterval(timer)
}, [gameState, showPasswordModal])
// Verificar vidas
useEffect(() => {
if (lives === 0 && gameState === 'playing') {
setGameState('lost')
}
}, [lives, gameState])
// Embaralhar array
const shuffleArray = (array: T[]): T[] => {
const shuffled = [...array]
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = shuffled[i]
shuffled[i] = shuffled[j]
shuffled[j] = temp
}
return shuffled
}
// Iniciar jogo
const startGame = useCallback(() => {
setGameState('playing')
setCurrentQuestionIndex(0)
setScore(0)
setLives(3)
setRevealedLetterIndices([])
setUserPassword('')
setAnsweredQuestions(new Set())
setTimeLeft(900) // 15 minutos
setShowPasswordModal(false)
// Selecionar 10 questões aleatórias do banco de 40
const shuffledQuestions = shuffleArray(QUESTIONS_BANK)
const selectedQuestions = shuffledQuestions.slice(0, QUESTIONS_PER_PLAYER)
setPlayerQuestions(selectedQuestions)
// Carregar primeira questão
setCurrentQuestion(selectedQuestions[0])
}, [])
// Responder questão
const handleAnswer = (answerIndex: number) => {
if (!currentQuestion || showFeedback) return
const correct = answerIndex === currentQuestion.correct
setIsCorrect(correct)
setShowFeedback(true)
if (correct) {
setScore(prev => prev + 100)
setAnsweredQuestions(prev => new Set([...prev, currentQuestion.id]))
// Adicionar índice da letra revelada para exibição embaralhada
const totalCorrect = Array.from(answeredQuestions).length
const letterIndex = (totalCorrect - 1) % SECRET_WORD.length
setRevealedLetterIndices(prev => {
if (!prev.includes(letterIndex)) {
// Inserir em posição aleatória
const newIndex = [...prev]
const randomPos = Math.floor(Math.random() * (newIndex.length + 1))
newIndex.splice(randomPos, 0, letterIndex)
return newIndex
}
return prev
})
// Verificar se completou as 10 questões
if (currentQuestionIndex >= QUESTIONS_PER_PLAYER - 1) {
setTimeout(() => {
setShowPasswordModal(true)
setShowFeedback(false)
}, 1500)
} else {
setTimeout(() => {
setCurrentQuestionIndex(prev => prev + 1)
setShowFeedback(false)
// Carregar próxima questão
const nextQuestion = playerQuestions[currentQuestionIndex + 1]
setCurrentQuestion(nextQuestion)
}, 1500)
}
} else {
setLives(prev => prev - 1)
setTimeout(() => {
setShowFeedback(false)
if (lives - 1 === 0) {
setGameState('lost')
} else if (currentQuestionIndex >= QUESTIONS_PER_PLAYER - 1) {
setShowPasswordModal(true)
} else {
setCurrentQuestionIndex(prev => prev + 1)
const nextQuestion = playerQuestions[currentQuestionIndex + 1]
setCurrentQuestion(nextQuestion)
}
}, 1500)
}
}
// Verificar senha
const checkPassword = () => {
if (userPassword.toUpperCase().trim() === SECRET_WORD) {
setGameState('won')
} else {
alert('Senha incorreta! Tente novamente.')
setUserPassword('')
}
}
// Formatar tempo
const formatTime = (seconds: number) => {
const mins = Math.floor(seconds / 60)
const secs = seconds % 60
return `${mins}:${secs.toString().padStart(2, '0')}`
}
// Renderizar vidas
const renderLives = () => {
return Array(3).fill(0).map((_, i) => (
{i < lives ? '❤️' : '🖤'}
))
}
// Renderizar letras da senha em ordem embaralhada
const renderPasswordLetters = () => {
// Se não há letras reveladas, mostra todos como "?"
if (revealedLetterIndices.length === 0) {
return SECRET_WORD.split('').map((_, index) => (
?
))
}
// Mostra apenas as letras reveladas, em ordem aleatória
return revealedLetterIndices.map((letterIndex) => {
const letter = SECRET_WORD[letterIndex]
return (
{letter}
)
})
}
// Tela inicial
if (gameState === 'start') {
return (
)
}
// Tela de vitória
if (gameState === 'won') {
return (
)
}
// Tela de Game Over
if (gameState === 'lost') {
return (
)
}
// Modal de senha final
if (showPasswordModal) {
return (
)
}
// Tela de jogo
return (
)
}
🔬 Escape Room Científico 🔬
Misturas e Separação de Misturas
📋 Regras do Jogo:
- ❤️ Você tem 3 vidas. Se errar 3 vezes, volta ao início!
- ❓ Responda 10 questões aleatórias do banco de 40 questões
- 🔀 Cada aluno recebe questões diferentes e em ordem embaralhada
- 🔤 Cada resposta certa revela uma letra da senha secreta
- 🚪 Descubra a senha secreta para escapar do laboratório!
- ⏱️ Você tem 15 minutos para completar o jogo
🎉 PARABÉNS! 🎉
Você escapou do laboratório!
Pontuação Final: {score} pontos
Tempo Restante: {formatTime(timeLeft)}
Vidas Restantes: {lives} ❤️
Senha Correta:
{SECRET_WORD}
💀 GAME OVER 💀
Você perdeu todas as vidas!
Pontuação: {score} pontos
Não desanime! Tente novamente.
🔐 SENHA DA PORTA
Digite a senha secreta para escapar do laboratório!
Letras descobertas:
{renderPasswordLetters()}
setUserPassword(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && checkPassword()}
placeholder="Digite a senha..."
className="w-full px-6 py-4 text-xl text-center bg-white/20 border-2 border-white/30 rounded-xl text-white placeholder-white/50 focus:outline-none focus:border-cyan-400"
autoFocus
/>
{/* Placar */}
{/* Letras da senha */}
{/* Questão */}
{currentQuestion && (
)}
)}
Pontuação
{score}
Tempo
{formatTime(timeLeft)}
Vidas
{renderLives()}
Questão
{currentQuestionIndex + 1}/{QUESTIONS_PER_PLAYER}
Senha Secreta:
{renderPasswordLetters()}
{currentQuestion.question}
{currentQuestion.options.map((option, index) => {
let buttonClass = "bg-white/20 hover:bg-white/30 text-white border-2 border-white/30"
if (showFeedback) {
if (index === currentQuestion.correct) {
buttonClass = "bg-green-500 text-white border-green-600"
} else if (index === parseInt(currentQuestion.correct.toString()) && !isCorrect) {
buttonClass = "bg-red-500 text-white border-red-600"
} else {
buttonClass = "bg-white/10 text-gray-400 border-white/10"
}
}
return (
)
})}
{showFeedback && (
{isCorrect ? '✅ CORRETO!' : '❌ ERRADO!'}
{!isCorrect && (Resposta correta: {currentQuestion.options[currentQuestion.correct]}
)}
Comentários
Postar um comentário