<div class="container">
<h1>Tech Quiz Desconto</h1>
<p>Responda às perguntas e ganhe até 50% de desconto na loja!</p>
<div id="quiz"></div>
<button id="submit" onclick="submitQuiz()">Enviar Respostas</button>
<div id="result"></div>
</div>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 600px;
width: 100%;
}
h1 {
color: #333;
}
p {
color: #666;
}
.question {
margin: 20px 0;
text-align: left;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 18px;
color: #28a745;
}
const quizData = [
{
question: "Um SSD é mais rápido que um HD tradicional. Verdadeiro ou falso?",
options: ["Verdadeiro", "Falso"],
answer: "Verdadeiro"
},
{
question: "Qual desses é um sistema operacional?",
options: ["Windows", "Photoshop", "Google"],
answer: "Windows"
},
{
question: "Quantos GB tem 1 TB?",
options: ["100", "500", "1000"],
answer: "1000"
},
{
question: "O que significa 'CPU'?",
options: ["Central Processing Unit", "Computer Power Unit", "Control Process Utility"],
answer: "Central Processing Unit"
},
{
question: "Qual é a função da RAM?",
options: ["Armazenar dados permanentemente", "Memória temporária para processamento", "Gerenciar a energia"],
answer: "Memória temporária para processamento"
},
{
question: "O Wi-Fi 6 é mais rápido que o Wi-Fi 5?",
options: ["Sim", "Não"],
answer: "Sim"
},
{
question: "Qual empresa fabrica os processadores Ryzen?",
options: ["Intel", "AMD", "NVIDIA"],
answer: "AMD"
},
{
question: "O que é um GPU?",
options: ["Unidade de processamento gráfico", "Unidade de energia", "Disco de armazenamento"],
answer: "Unidade de processamento gráfico"
},
{
question: "Qual é o sistema operacional mais usado em smartphones?",
options: ["iOS", "Android", "Windows Phone"],
answer: "Android"
},
{
question: "Um monitor 4K tem mais pixels que um Full HD?",
options: ["Sim", "Não"],
answer: "Sim"
}
];
const quizContainer = document.getElementById('quiz');
function loadQuiz() {
let quizHTML = '';
quizData.forEach((item, index) => {
quizHTML += `
<div class="question">
<p>${index + 1}. ${item.question}</p>
${item.options.map(option => `
<label>
<input type="radio" name="question${index}" value="${option}">
${option}
</label><br>
`).join('')}
</div>
`;
});
quizContainer.innerHTML = quizHTML;
}
function submitQuiz() {
let score = 0;
quizData.forEach((item, index) => {
const selected = document.querySelector(`input[name="question${index}"]:checked`);
if (selected && selected.value === item.answer) {
score++;
}
});
const discount = score * 5;
const couponCode = `TECH${discount}`;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
Você acertou ${score} de 10 perguntas!<br>
Seu desconto: ${discount}%<br>
Código: ${couponCode}<br>
Envie este código para o WhatsApp da loja para validar!
`;
}
loadQuiz();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.