style.css
Quiz de Filmes
Qual filme mais combina com você?
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: #1a1a2e;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.quiz-container {
background: #162447;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
text-align: center;
}
.title {
color: #e43f5a;
font-size: 2.5em;
margin-bottom: 20px;
font-weight: 600;
}
#question {
font-size: 1.5em;
margin-bottom: 25px;
color: #fff;
}
.options-container {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
}
.option {
background: #283c63;
border: none;
color: #fff;
padding: 15px;
border-radius: 10px;
cursor: pointer;
font-size: 1.1em;
transition: background 0.3s, transform 0.2s;
text-align: left;
}
.option:hover {
background: #3e5c94;
transform: translateY(-2px);
}
.option:active {
transform: translateY(0);
}
.btn {
background: #e43f5a;
color: #fff;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 1.2em;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.btn:hover {
background: #c72c43;
transform: scale(1.05);
}
.result-container {
display: flex;
flex-direction: column;
align-items: center;
}
#result-title {
color: #e43f5a;
font-size: 2em;
margin-bottom: 10px;
}
#result-description {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 20px;
}
/* Responsividade */
@media (max-width: 480px) {
.quiz-container {
padding: 20px;
}
.title {
font-size: 2em;
}
#question {
font-size: 1.2em;
}
.option, .btn {
font-size: 1em;
padding: 10px;
}
}
script.js
// Estrutura de dados para o quiz
const quizData = [
{
question: "Qual tipo de gênero de filme você prefere?",
options: [
{ text: "Ação e aventura", score: { action: 1 } },
{ text: "Comédia romântica", score: { romanticComedy: 1 } },
{ text: "Ficção científica e fantasia", score: { sciFi: 1 } },
{ text: "Drama e suspense", score: { drama: 1 } }
]
},
{
question: "Como você prefere passar uma tarde de sábado?",
options: [
{ text: "Explorando uma nova cidade", score: { action: 1, sciFi: 1 } },
{ text: "Em um encontro romântico", score: { romanticComedy: 1 } },
{ text: "Assistindo a um documentário", score: { drama: 1 } },
{ text: "Lendo um livro de ficção", score: { sciFi: 1 } }
]
},
{
question: "Qual o seu maior valor em uma amizade?",
options: [
{ text: "Lealdade e coragem", score: { action: 1 } },
{ text: "Humor e alegria", score: { romanticComedy: 1 } },
{ text: "Curiosidade e imaginação", score: { sciFi: 1 } },
{ text: "Apoio e sinceridade", score: { drama: 1 } }
]
}
];
// Resultados dos filmes
const movieResults = {
action: {
title: "Indiana Jones",
description: "Você é uma pessoa aventureira e corajosa, que adora uma boa dose de adrenalina e exploração. Indiana Jones é o filme perfeito para você!"
},
romanticComedy: {
title: "Como se fosse a primeira vez",
description: "Você é romântico e adora uma boa risada. Gosta de histórias que aquecem o coração e mostram o poder do amor. Este filme é a sua cara!"
},
sciFi: {
title: "Matrix",
description: "Você tem uma mente curiosa e gosta de questionar o mundo ao seu redor. Adora desafios intelectuais e explorações de universos complexos. Matrix é a sua escolha!"
},
drama: {
title: "A espera de um milagre",
description: "Você é uma pessoa empática e profunda, que valoriza narrativas emocionais e personagens complexos. Gosta de filmes que fazem você pensar e sentir. Este filme é ideal para você."
}
};
let currentQuestionIndex = 0;
let scores = {
action: 0,
romanticComedy: 0,
sciFi: 0,
drama: 0
};
// Referências aos elementos do DOM
const quizContainer = document.getElementById('quiz');
const resultContainer = document.getElementById('result');
const questionElement = document.getElementById('question');
const optionsContainer = document.getElementById('options');
const nextBtn = document.getElementById('next-btn');
const resultTitle = document.getElementById('result-title');
const resultDescription = document.getElementById('result-description');
const restartBtn = document.getElementById('restart-btn');
// Função para carregar a próxima pergunta
function loadQuestion() {
const currentQuiz = quizData[currentQuestionIndex];
questionElement.textContent = currentQuiz.question;
optionsContainer.innerHTML = ''; // Limpa as opções anteriores
currentQuiz.options.forEach(option => {
const button = document.createElement('button');
button.textContent = option.text;
button.classList.add('option');
button.addEventListener('click', () => selectOption(option));
optionsContainer.appendChild(button);
});
nextBtn.style.display = 'none'; // Esconde o botão "Próxima" até uma opção ser selecionada
}
// Função para lidar com a seleção de uma opção
function selectOption(option) {
// Adiciona a pontuação da opção ao placar
for (const key in option.score) {
scores[key] += option.score[key];
}
// Desabilita os botões para evitar múltiplas seleções
Array.from(optionsContainer.children).forEach(btn => {
btn.disabled = true;
});
nextBtn.style.display = 'block';
}
// Função para avançar para a próxima pergunta ou mostrar o resultado
nextBtn.addEventListener('click', () => {
currentQuestionIndex++;
if (currentQuestionIndex < quizData.length) {
loadQuestion();
} else {
showResult();
}
});
// Função para exibir o resultado final
function showResult() {
quizContainer.style.display = 'none';
resultContainer.style.display = 'block';
// Encontra o filme com a pontuação mais alta
let maxScore = 0;
let resultMovie = '';
for (const movie in scores) {
if (scores[movie] > maxScore) {
maxScore = scores[movie];
resultMovie = movie;
}
}
// Caso de empate, pode-se implementar uma lógica mais complexa
if (maxScore === 0) {
resultMovie = 'romanticComedy'; // Define um resultado padrão
}
const finalResult = movieResults[resultMovie];
resultTitle.textContent = `Seu filme é: ${finalResult.title}`;
resultDescription.textContent = finalResult.description;
}
// Função para recomeçar o quiz
restartBtn.addEventListener('click', () => {
currentQuestionIndex = 0;
scores = {
action: 0,
romanticComedy: 0,
sciFi: 0,
drama: 0
};
quizContainer.style.display = 'block';
resultContainer.style.display = 'none';
loadQuestion();
});
// Inicia o quiz ao carregar a página
loadQuestion();