Component 0 - Copy this Html, Bootstrap Component to your project
Melhora esse sistema de quiz deixando mais sofisticado e com todas opcao de montagem de quiz, animacoes, opcao de anexar foto no quiz, botoes etc:<!DOCTYPE html> <html lang="pt BR"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Quiz Nutracêuticos Criador & Visualizador</title> <style> body { font family: Arial, sans serif; margin: 0; padding: 0; background: #f4f4f4; } .container { max width: 800px; margin: auto; padding: 20px; } h1, h2 { text align: center; } .card { background: white; padding: 20px; margin bottom: 20px; border radius: 10px; box shadow: 0 0 10px rgba(0,0,0,0.1); } input, textarea, button, select { width: 100%; padding: 10px; margin: 10px 0; border radius: 5px; border: 1px solid #ccc; } .hidden { display: none; } .quiz question { font weight: bold; } .option { margin left: 20px; } .btn { background color: #28a745; color: white; border: none; cursor: pointer; transition: 0.3s; } .btn:hover { background color: #218838; } .progress { height: 10px; background: #ddd; border radius: 5px; overflow: hidden; } .progress bar { height: 10px; background: #28a745; width: 0%; transition: width 0.3s; } </style> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase app.js"; import { getFirestore, collection, doc, setDoc, getDoc, addDoc } from "https://www.gstatic.com/firebasejs/9.22.1/firebase firestore.js"; // AVISO: Substitua com suas credenciais reais do Firebase abaixo: const firebaseConfig = { apiKey: "AIzaSyBZ6IqHZ1pZNiV5rd GfxMjpqVpZMlPliw", authDomain: "criativos fy.firebaseapp.com", projectId: "criativos fy", storageBucket: "criativos fy.firebasestorage.app", messagingSenderId: "794039027828", appId: "1:794039027828:web:de4448ea7e4cf17d05e921" }; // Validação das credenciais antes de usar if (!firebaseConfig.apiKey || firebaseConfig.apiKey.includes("***")) { alert("⚠️ Configure suas credenciais reais do Firebase no código para continuar."); throw new Error("Credenciais Firebase não configuradas."); } const app = initializeApp(firebaseConfig); const db = getFirestore(app); let currentQuiz = { questions: [] }; let currentQuestion = 0; let answers = []; window.addQuestion = function () { const container = document.getElementById('questionsContainer'); const index = currentQuiz.questions.length; const qHTML = ` <div class="card"> <input type="text" placeholder="Pergunta" onchange="updateQuestion(${index}, this.value)" /> <input type="text" placeholder="Opção 1" onchange="updateOption(${index}, 0, this.value)" /> <input type="text" placeholder="Opção 2" onchange="updateOption(${index}, 1, this.value)" /> <input type="text" placeholder="Opção 3" onchange="updateOption(${index}, 2, this.value)" /> <input type="text" placeholder="Opção 4" onchange="updateOption(${index}, 3, this.value)" /> </div>`; container.insertAdjacentHTML('beforeend', qHTML); currentQuiz.questions.push({ question: '', options: ['', '', '', ''] }); } window.updateQuestion = function (index, text) { currentQuiz.questions[index].question = text; } window.updateOption = function (qIdx, oIdx, text) { currentQuiz.questions[qIdx].options[oIdx] = text; } window.saveQuiz = async function () { try { currentQuiz.title = document.getElementById('quizTitle').value; currentQuiz.finalMessage = document.getElementById('finalMessage').value; currentQuiz.redirectUrl = document.getElementById('redirectUrl').value; await setDoc(doc(db, "quizzes", "nutraceuticos"), currentQuiz); alert("Quiz salvo com sucesso!"); document.getElementById('displayQuizTitle').innerText = currentQuiz.title; } catch (error) { console.error("Erro ao salvar quiz:", error); alert("Erro ao salvar quiz. Verifique o console."); } } window.startQuiz = async function () { try { const docSnap = await getDoc(doc(db, "quizzes", "nutraceuticos")); if (docSnap.exists()) { currentQuiz = docSnap.data(); document.getElementById('startQuiz').classList.add('hidden'); document.getElementById('quizContainer').classList.remove('hidden'); loadQuestion(); } else { alert("Quiz não encontrado."); } } catch (error) { console.error("Erro ao carregar quiz:", error); alert("Erro ao iniciar quiz. Verifique o console."); } } function loadQuestion() { const q = currentQuiz.questions[currentQuestion]; document.getElementById('questionText').innerText = q.question; const container = document.getElementById('optionsContainer'); container.innerHTML = ''; q.options.forEach((opt, i) => { container.innerHTML += `<div class='option'><input type='radio' name='answer' value='${opt}'> ${opt}</div>`; }); document.getElementById('progressBar').style.width = ((currentQuestion + 1) / currentQuiz.questions.length * 100) + '%'; } window.nextQuestion = function () { const selected = document.querySelector('input[name="answer"]:checked'); if (!selected) return alert("Selecione uma opção"); answers.push(selected.value); currentQuestion++; if (currentQuestion >= currentQuiz.questions.length) { showResult(); } else { loadQuestion(); } } async function showResult() { try { await addDoc(collection(db, "respostas"), { quiz: "nutraceuticos", respostas: answers, data: new Date() }); document.getElementById('quizContainer').classList.add('hidden'); document.getElementById('resultContainer').classList.remove('hidden'); document.getElementById('finalText').innerText = currentQuiz.finalMessage; } catch (error) { console.error("Erro ao salvar respostas:", error); alert("Erro ao salvar respostas. Verifique o console."); } } window.redirectUser = function () { window.location.href = currentQuiz.redirectUrl; } </script> </head> <body> <div class="container"> <div class="card" id="adminPanel"> <h2>Painel de Edição do Quiz</h2> <input type="text" id="quizTitle" placeholder="Título do quiz" /> <div id="questionsContainer"></div> <button class="btn" onclick="addQuestion()">Adicionar Pergunta</button> <input type="text" id="finalMessage" placeholder="Mensagem final personalizada" /> <input type="text" id="redirectUrl" placeholder="URL de redirecionamento" /> <button class="btn" onclick="saveQuiz()">Salvar Quiz</button> </div> <div class="card" id="startQuiz"> <h2 id="displayQuizTitle"></h2> <button class="btn" onclick="startQuiz()">Começar Quiz</button> </div> <div class="card hidden" id="quizContainer"> <div class="progress"><div class="progress bar" id="progressBar"></div></div> <div id="questionText" class="quiz question"></div> <div id="optionsContainer"></div> <button class="btn" onclick="nextQuestion()">Próxima</button> </div> <div class="card hidden" id="resultContainer"> <h2>Resultado</h2> <p id="finalText"></p> <button class="btn" onclick="redirectUser()">Ir para recomendação</button> </div> </div> </body> </html>