Teste seu Estilo
Descubra qual é o seu estilo pessoal através deste quiz divertido! Responda às perguntas com base nas imagens e descubra se você é boho, moderno, sustentável, romântico ou outro estilo!
Seu Estilo é:
Seu estilo é moderno e sofisticado! Você valoriza peças atemporais, cores neutras e cortes precisos. Suas escolhas refletem elegância e praticidade.
// Dados do quiz
const quizData = [
{
question: "Qual desses looks você usaria em um dia casual?",
image: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
options: [
{ text: "Vestido fluido com estampa étnica", style: "boho" },
{ text: "Blazer com calça de alfaiataria", style: "moderno" },
{ text: "Roupas de segunda mão estilosas", style: "sustentavel" },
{ text: "Vestido com laços e rendas", style: "romantico" }
]
},
{
question: "Qual ambiente você prefere para relaxar?",
image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
options: [
{ text: "Um jardim com plantas e flores", style: "romantico" },
{ text: "Um loft minimalista e espaçoso", style: "moderno" },
{ text: "Uma praia deserta ao pôr do sol", style: "boho" },
{ text: "Uma casa com móveis reciclados", style: "sustentavel" }
]
},
{
question: "Como você descreveria sua bolsa ideal?",
image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
options: [
{ text: "Bolsa de palha com franjas", style: "boho" },
{ text: "Bolsa estrutural com design limpo", style: "moderno" },
{ text: "Mochila de tecido orgânico", style: "sustentavel" },
{ text: "Bolsa vintage com detalhes delicados", style: "romantico" }
]
},
{
question: "Qual dessas festas você mais gostaria de ir?",
image: "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
options: [
{ text: "Festival de música ao ar livre", style: "boho" },
{ text: "Coquetel em galeria de arte", style: "moderno" },
{ text: "Feira de produtos orgânicos", style: "sustentavel" },
{ text: "Jantar à luz de velas", style: "romantico" }
]
},
{
question: "Qual desses acessórios combina mais com você?",
image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
options: [
{ text: "Brincos grandes e coloridos", style: "boho" },
{ text: "Relógio minimalista", style: "moderno" },
{ text: "Joias feitas com materiais naturais", style: "sustentavel" },
{ text: "Colar delicado com pingente", style: "romantico" }
]
}
];
// Resultados possíveis
const results = {
boho: {
title: "Estilo Boho Chic",
description: "Você é livre, criativa e conectada com a natureza! Seu estilo mistura influências étnicas, peças artesanais e muito conforto. Você valoriza a individualidade e não tem medo de misturar texturas, cores e padrões.",
image: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
},
moderno: {
title: "Estilo Moderno",
description: "Seu estilo é sofisticado e atemporal! Você valoriza peças de qualidade, cortes precisos e uma paleta de cores neutras. Suas escolhas refletem elegância, praticidade e um olhar para tendências contemporâneas.",
image: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
},
sustentavel: {
title: "Estilo Sustentável",
description: "Você é consciente e autêntico! Seu estilo reflete seus valores éticos e ambientais. Você prefere marcas sustentáveis, roupas de segunda mão e peças atemporais que duram anos, não apenas uma temporada.",
image: "https://images.unsplash.com/photo-1520006403909-838d6b92c22e?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
},
romantico: {
title: "Estilo Romântico",
description: "Você é sonhadora e delicada! Seu estilo é marcado por detalhes femininos, tecidos fluidos e uma paleta de cores suaves. Você valoriza a elegância clássica e peças que contam uma história.",
image: "https://images.unsplash.com/photo-1519457431-44ccd64a579b?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80"
}
};
// Elementos DOM
const startScreen = document.getElementById('start-screen');
const quizScreen = document.getElementById('quiz-screen');
const resultScreen = document.getElementById('result-screen');
const startBtn = document.getElementById('start-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const restartBtn = document.getElementById('restart-btn');
const questionText = document.getElementById('question-text');
const questionImage = document.getElementById('question-image');
const optionsContainer = document.getElementById('options-container');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const resultTitle = document.getElementById('result-title');
const resultDescription = document.getElementById('result-description');
const resultStyleImage = document.getElementById('result-style-image');
// Variáveis do quiz
let currentQuestion = 0;
let userAnswers = [];
let selectedOption = null;
// Iniciar o quiz
startBtn.addEventListener('click', startQuiz);
restartBtn.addEventListener('click', restartQuiz);
function startQuiz() {
startScreen.style.display = 'none';
quizScreen.style.display = 'block';
loadQuestion();
}
function restartQuiz() {
resultScreen.style.display = 'none';
startScreen.style.display = 'block';
currentQuestion = 0;
userAnswers = [];
selectedOption = null;
}
// Carregar pergunta
function loadQuestion() {
const question = quizData[currentQuestion];
questionText.textContent = question.question;
questionImage.src = question.image;
questionImage.alt = `Imagem para: ${question.question}`;
// Atualizar progresso
const progressPercentage = ((currentQuestion + 1) / quizData.length) * 100;
progressBar.style.width = `${progressPercentage}%`;
progressText.textContent = `Pergunta ${currentQuestion + 1} de ${quizData.length}`;
// Limpar opções anteriores
optionsContainer.innerHTML = '';
// Adicionar novas opções
question.options.forEach((option, index) => {
const optionElement = document.createElement('div');
optionElement.classList.add('option');
optionElement.textContent = option.text;
optionElement.dataset.index = index;
optionElement.addEventListener('click', selectOption);
optionsContainer.appendChild(optionElement);
});
// Atualizar estado dos botões de navegação
prevBtn.disabled = currentQuestion === 0;
nextBtn.textContent = currentQuestion === quizData.length - 1 ? 'Ver Resultado' : 'Próxima';
// Restaurar seleção anterior, se existir
if (userAnswers[currentQuestion] !== undefined) {
const options = document.querySelectorAll('.option');
options[userAnswers[currentQuestion]].classList.add('selected');
selectedOption = userAnswers[currentQuestion];
} else {
selectedOption = null;
}
}
// Selecionar opção
function selectOption(e) {
const options = document.querySelectorAll('.option');
options.forEach(option => option.classList.remove('selected'));
e.target.classList.add('selected');
selectedOption = parseInt(e.target.dataset.index);
userAnswers[currentQuestion] = selectedOption;
}
// Navegação
prevBtn.addEventListener('click', () => {
if (currentQuestion > 0) {
currentQuestion--;
loadQuestion();
}
});
nextBtn.addEventListener('click', () => {
if (selectedOption === null) {
alert('Por favor, selecione uma opção antes de continuar.');
return;
}
if (currentQuestion < quizData.length - 1) { currentQuestion++; loadQuestion(); } else { showResult(); } }); // Mostrar resultado function showResult() { // Calcular estilo predominante const styleCount = {}; userAnswers.forEach((answer, index) => {
const style = quizData[index].options[answer].style;
styleCount[style] = (styleCount[style] || 0) + 1;
});
// Encontrar estilo com mais votos
let maxCount = 0;
let userStyle = 'moderno'; // padrão
for (const style in styleCount) {
if (styleCount[style] > maxCount) {
maxCount = styleCount[style];
userStyle = style;
}
}
// Exibir resultado
const result = results[userStyle];
resultTitle.textContent = result.title;
resultDescription.textContent = result.description;
resultStyleImage.src = result.image;
resultStyleImage.alt = `Imagem representando o estilo ${result.title}`;
quizScreen.style.display = 'none';
resultScreen.style.display = 'block';
}