<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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.