Quiz Regress\u00e3o<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&family=Source+Code+Pro&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div id=\"welcome-screen\" class=\"quiz-screen active\">\r\n <p>Teste seus conhecimentos sobre os pre\u00e7os de sorvetes!<\/p>\r\n <div class=\"question-container\">\r\n <img src=\"https:\/\/cdn.awsli.com.br\/800x800\/1011\/1011926\/produto\/39105544\/casquinha-de-sorvete-biscoito-doce-conny-d56edf5d.jpg\" alt=\"Sorvetes diversos\" class=\"quiz-image\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"player-name\">Digite seu nome:<\/label>\r\n <input type=\"text\" id=\"player-name\" placeholder=\"Seu nome\">\r\n <\/div>\r\n <button id=\"start-btn\" class=\"btn primary-btn\">Jogar<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"question-1\" class=\"quiz-screen hidden\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress\" style=\"width: 33%\"><\/div>\r\n <\/div>\r\n <h2>Pergunta 1<\/h2>\r\n <div class=\"question-container\">\r\n <p>Qual o valor do sorvete de 250g?<\/p>\r\n <img src=\"https:\/\/github.com\/lauraemmanuella\/educacaoIA\/blob\/main\/imagens\/Sorvete1.png?raw=true\" class=\"quiz-image\">\r\n \r\n <div class=\"options\">\r\n <div class=\"option-btn\" data-value=\"25\">R$ 25,00<\/div>\r\n <div class=\"option-btn\" data-value=\"26\">R$ 26,00<\/div>\r\n <div class=\"option-btn\" data-value=\"28\">R$ 28,00<\/div>\r\n <div class=\"option-btn\" data-value=\"30\">R$ 30,00<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"feedback-1\" class=\"feedback-result\"><\/div>\r\n <button id=\"next-1\" class=\"btn primary-btn next-btn\" disabled>Pr\u00f3xima pergunta<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"question-2\" class=\"quiz-screen hidden\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress\" style=\"width: 66%\"><\/div>\r\n <\/div>\r\n <h2>Pergunta 2<\/h2>\r\n <div class=\"question-container\">\r\n <p>Qual o valor do sorvete de 300g?<\/p>\r\n <img src=\"https:\/\/github.com\/lauraemmanuella\/educacaoIA\/blob\/main\/imagens\/Sorvete2.png?raw=true\" alt=\"Sorvete de 350g\" class=\"quiz-image\">\r\n \r\n <div class=\"options\">\r\n <div class=\"option-btn\" data-value=\"32.5\">R$ 32,50<\/div>\r\n <div class=\"option-btn\" data-value=\"35.5\">R$ 35,50<\/div>\r\n <div class=\"option-btn\" data-value=\"37.5\">R$ 37,50<\/div>\r\n <div class=\"option-btn\" data-value=\"39.5\">R$ 39,50<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"feedback-2\" class=\"feedback-result\"><\/div>\r\n <button id=\"next-2\" class=\"btn primary-btn next-btn\" disabled>Pr\u00f3xima pergunta<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"question-3\" class=\"quiz-screen hidden\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress\" style=\"width: 100%\"><\/div>\r\n <\/div>\r\n <h2>Pergunta 3<\/h2>\r\n <div class=\"question-container\">\r\n <p>Qual o valor do sorvete de 350g?<\/p>\r\n <img src=\"https:\/\/github.com\/lauraemmanuella\/educacaoIA\/blob\/main\/imagens\/Sorvete3.png?raw=true\" alt=\"Sorvete de 300g\" class=\"quiz-image\">\r\n \r\n <div class=\"options\">\r\n <div class=\"option-btn\" data-value=\"34\">R$ 34,00<\/div>\r\n <div class=\"option-btn\" data-value=\"36.5\">R$ 36,50<\/div>\r\n <div class=\"option-btn\" data-value=\"38\">R$ 38,00<\/div>\r\n <div class=\"option-btn\" data-value=\"40\">R$ 40,00<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"feedback-3\" class=\"feedback-result\"><\/div>\r\n <button id=\"finish-btn\" class=\"btn primary-btn\" disabled>Ver resultado<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"result-screen\" class=\"quiz-screen hidden\">\r\n <h2>Resultado Final<\/h2>\r\n <div class=\"results-box\">\r\n <p>Jogador: <span id=\"result-name\" class=\"highlight\"><\/span><\/p>\r\n <p>Pontua\u00e7\u00e3o: <span id=\"score\" class=\"highlight\"><\/span> de 3<\/p>\r\n <div class=\"score-bar\">\r\n <div id=\"score-progress\"><\/div>\r\n <\/div>\r\n <div id=\"final-message\"><\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Elementos da tela inicial\r\n const welcomeScreen = document.getElementById('welcome-screen');\r\n const playerNameInput = document.getElementById('player-name');\r\n const startBtn = document.getElementById('start-btn');\r\n \r\n \/\/ Elementos das perguntas\r\n const question1Screen = document.getElementById('question-1');\r\n const question2Screen = document.getElementById('question-2');\r\n const question3Screen = document.getElementById('question-3');\r\n \r\n \/\/ Elementos dos bot\u00f5es de navega\u00e7\u00e3o\r\n const next1Btn = document.getElementById('next-1');\r\n const next2Btn = document.getElementById('next-2');\r\n const finishBtn = document.getElementById('finish-btn');\r\n \r\n \/\/ Elementos de feedback\r\n const feedback1 = document.getElementById('feedback-1');\r\n const feedback2 = document.getElementById('feedback-2');\r\n const feedback3 = document.getElementById('feedback-3');\r\n \r\n \/\/ Elementos da tela de resultado\r\n const resultScreen = document.getElementById('result-screen');\r\n const resultName = document.getElementById('result-name');\r\n const scoreElement = document.getElementById('score');\r\n const scoreProgress = document.getElementById('score-progress');\r\n const finalMessage = document.getElementById('final-message');\r\n \/\/ Bot\u00e3o de reiniciar removido\r\n \/\/ const restartBtn = document.getElementById('restart-btn');\r\n \r\n \/\/ Vari\u00e1veis do jogo\r\n let playerName = '';\r\n let score = 0;\r\n \r\n \/\/ Respostas corretas\r\n const correctAnswers = {\r\n question1: '25',\r\n question2: '32.5',\r\n question3: '40'\r\n };\r\n\r\n \/\/ Explica\u00e7\u00f5es para respostas\r\n const explanations = {\r\n question1: `<h3>Explica\u00e7\u00e3o:<\/h3>\r\n <p>O pre\u00e7o do sorvete segue o padr\u00e3o: <strong>R$ 5,00 a mais a cada 50g<\/strong>.<\/p>`,\r\n \r\n question2: `<h3>Explica\u00e7\u00e3o:<\/h3>\r\n <p><strong>Definimos o pre\u00e7o base (sem cobertura)<\/strong><\/p>\r\n <ul>\r\n <li>O padr\u00e3o \u00e9 <strong>R$ 5,00 a mais a cada 50g<\/strong><\/li>\r\n <li>Assim, o pre\u00e7o base seria:\r\n <ul>\r\n <li><strong>50g \u2192 R$ 5,00<\/strong><\/li>\r\n <li><strong>100g \u2192 R$ 10,00<\/strong><\/li>\r\n <li><strong>150g \u2192 R$ 15,00<\/strong><\/li>\r\n <li><strong>200g \u2192 R$ 20,00<\/strong><\/li>\r\n <li><strong>250g \u2192 R$ 25,00<\/strong><\/li>\r\n <li><strong>300g \u2192 R$ 30,00<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>Adicionamos o valor da cobertura ao pre\u00e7o final do sorvete:<\/strong>\r\n <ul>\r\n <li><strong> Chocolate (+R$ 3,00)<\/strong><\/li>\r\n <li><strong>Morango (+R$ 2,25)<\/strong><\/li>\r\n <li><strong>Caramelo (+R$ 2,50)<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>`,\r\n \r\n question3: `<h3>Explica\u00e7\u00e3o:<\/h3>\r\n <p><strong>Definimos o pre\u00e7o base (sem cobertura)<\/strong><\/p>\r\n <ul>\r\n <li>O padr\u00e3o \u00e9 <strong>R$ 5,00 a mais a cada 50g<\/strong><\/li>\r\n <li>Assim, o pre\u00e7o base seria:\r\n <ul>\r\n <li><strong>50g \u2192 R$ 5,00<\/strong><\/li>\r\n <li><strong>100g \u2192 R$ 10,00<\/strong><\/li>\r\n <li><strong>150g \u2192 R$ 15,00<\/strong><\/li>\r\n <li><strong>200g \u2192 R$ 20,00<\/strong><\/li>\r\n <li><strong>250g \u2192 R$ 25,00<\/strong><\/li>\r\n <li><strong>300g \u2192 R$ 30,00<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>Adicionamos o valor da cobertura ao pre\u00e7o final do sorvete:<\/strong>\r\n <ul>\r\n <li><strong> Chocolate (+R$ 3,00)<\/strong><\/li>\r\n <li><strong>Morango (+R$ 2,25)<\/strong><\/li>\r\n <li><strong>Caramelo (+R$ 2,50)<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>Adicionamos o valor do adicional ao pre\u00e7o final do sorvete:<\/strong>\r\n <ul>\r\n <li><strong> Granulado (+R$ 2,00)<\/strong><\/li>\r\n <li><strong> Marshmallow (+R$ 1,00)<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>`\r\n };\r\n \r\n \/\/ Iniciar o jogo\r\n startBtn.addEventListener('click', function() {\r\n playerName = playerNameInput.value.trim();\r\n \r\n if (playerName === '') {\r\n alert('Por favor, digite seu nome para come\u00e7ar.');\r\n return;\r\n }\r\n \r\n showScreen(question1Screen);\r\n });\r\n \r\n \/\/ Configurar op\u00e7\u00f5es das perguntas\r\n setupOptions(question1Screen, 1);\r\n setupOptions(question2Screen, 2);\r\n setupOptions(question3Screen, 3);\r\n \r\n \/\/ Bot\u00f5es de navega\u00e7\u00e3o\r\n next1Btn.addEventListener('click', function() {\r\n showScreen(question2Screen);\r\n });\r\n \r\n next2Btn.addEventListener('click', function() {\r\n showScreen(question3Screen);\r\n });\r\n \r\n finishBtn.addEventListener('click', function() {\r\n showResults();\r\n });\r\n \r\n \/\/ Bot\u00e3o de reiniciar removido\r\n \/\/ restartBtn.addEventListener('click', function() {\r\n \/\/ resetGame();\r\n \/\/ });\r\n \r\n \/\/ Fun\u00e7\u00f5es auxiliares\r\n function setupOptions(questionScreen, questionNumber) {\r\n const options = questionScreen.querySelectorAll('.option-btn');\r\n const feedbackElement = document.getElementById(`feedback-${questionNumber}`);\r\n const nextButton = document.getElementById(questionNumber === 3 ? 'finish-btn' : `next-${questionNumber}`);\r\n \r\n options.forEach(option => {\r\n option.addEventListener('click', function() {\r\n \/\/ Adicionar efeito de pulso\r\n this.classList.add('pulse');\r\n \r\n \/\/ Desabilitar todas as op\u00e7\u00f5es ap\u00f3s a escolha\r\n options.forEach(opt => {\r\n opt.style.pointerEvents = 'none';\r\n });\r\n \r\n const selectedValue = this.getAttribute('data-value');\r\n const correctValue = correctAnswers[`question${questionNumber}`];\r\n \r\n setTimeout(() => {\r\n if (selectedValue === correctValue) {\r\n \/\/ Resposta correta\r\n this.classList.add('correct');\r\n feedbackElement.innerHTML = `\r\n <h3 class=\"feedback-title correct\">Correto!<\/h3>\r\n <div class=\"success-message\">Parab\u00e9ns! Voc\u00ea acertou!<\/div>\r\n <div class=\"explanation\">${explanations[`question${questionNumber}`]}<\/div>\r\n `;\r\n feedbackElement.classList.add('success');\r\n feedbackElement.id = 'feedback-correct';\r\n score++;\r\n } else {\r\n \/\/ Resposta incorreta\r\n this.classList.add('incorrect');\r\n \r\n \/\/ Destacar a resposta correta\r\n options.forEach(opt => {\r\n if (opt.getAttribute('data-value') === correctValue) {\r\n opt.classList.add('correct');\r\n }\r\n });\r\n \r\n \/\/ Mostrar explica\u00e7\u00e3o detalhada\r\n feedbackElement.innerHTML = `\r\n <h3 class=\"feedback-title wrong\">Incorreto<\/h3>\r\n <div class=\"error-message\">Ops! Essa n\u00e3o \u00e9 a resposta correta.<\/div>\r\n <div class=\"explanation\">${explanations[`question${questionNumber}`]}<\/div>\r\n `;\r\n feedbackElement.classList.add('error');\r\n feedbackElement.id = 'feedback-wrong';\r\n }\r\n \r\n \/\/ Mostrar feedback com anima\u00e7\u00e3o\r\n feedbackElement.style.display = 'block';\r\n \r\n \/\/ Habilitar o bot\u00e3o de pr\u00f3xima pergunta\r\n nextButton.disabled = false;\r\n }, 300);\r\n });\r\n });\r\n }\r\n \r\n function showScreen(screen) {\r\n \/\/ Esconder todas as telas\r\n const screens = document.querySelectorAll('.quiz-screen');\r\n screens.forEach(s => {\r\n s.classList.add('hidden');\r\n s.classList.remove('active');\r\n });\r\n \r\n \/\/ Mostrar a tela desejada com anima\u00e7\u00e3o\r\n screen.classList.remove('hidden');\r\n screen.classList.add('active');\r\n \r\n \/\/ Scroll para o topo\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n \r\n function showResults() {\r\n \/\/ Atualizar informa\u00e7\u00f5es na tela de resultado\r\n resultName.textContent = playerName;\r\n scoreElement.textContent = score;\r\n \r\n \/\/ Atualizar a barra de progresso\r\n const percentage = (score \/ 3) * 100;\r\n scoreProgress.style.width = percentage + '%';\r\n \r\n \/\/ Adicionar confetes para pontua\u00e7\u00e3o perfeita\r\n if (score === 3) {\r\n createConfetti();\r\n }\r\n \r\n \/\/ Mensagem personalizada baseada na pontua\u00e7\u00e3o\r\n if (score === 3) {\r\n finalMessage.textContent = 'Excelente! Voc\u00ea acertou todas as perguntas!';\r\n finalMessage.style.color = '#27ae60';\r\n } else if (score >= 1) {\r\n finalMessage.textContent = 'Bom trabalho! Continue praticando.';\r\n finalMessage.style.color = '#f39c12';\r\n } else {\r\n finalMessage.textContent = 'N\u00e3o desanime, cada tentativa \u00e9 uma oportunidade de aprendizado!';\r\n finalMessage.style.color = '#e74c3c';\r\n }\r\n \r\n \/\/ Mostrar tela de resultado\r\n showScreen(resultScreen);\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o resetGame mantida por completude, mas n\u00e3o \u00e9 mais utilizada\r\n function resetGame() {\r\n \/\/ Resetar pontua\u00e7\u00e3o\r\n score = 0;\r\n \r\n \/\/ Limpar campos e classes\r\n const options = document.querySelectorAll('.option-btn');\r\n options.forEach(opt => {\r\n opt.classList.remove('correct', 'incorrect', 'pulse');\r\n opt.style.pointerEvents = 'auto';\r\n });\r\n \r\n \/\/ Esconder feedback\r\n const feedbackElements = document.querySelectorAll('[id^=\"feedback-\"]');\r\n feedbackElements.forEach(el => {\r\n el.style.display = 'none';\r\n el.classList.remove('success', 'error');\r\n el.innerHTML = '';\r\n });\r\n \r\n \/\/ Desabilitar bot\u00f5es de navega\u00e7\u00e3o\r\n next1Btn.disabled = true;\r\n next2Btn.disabled = true;\r\n finishBtn.disabled = true;\r\n \r\n \/\/ Voltar para a tela inicial\r\n showScreen(welcomeScreen);\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o para criar efeito de confete\r\n function createConfetti() {\r\n const confettiContainer = document.createElement('div');\r\n confettiContainer.className = 'confetti-container';\r\n document.body.appendChild(confettiContainer);\r\n \r\n const colors = ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', '#e74c3c'];\r\n \r\n \/\/ Criar 50 confetes\r\n for (let i = 0; i < 50; i++) {\r\n const confetti = document.createElement('div');\r\n confetti.className = 'confetti';\r\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\r\n confetti.style.left = Math.random() * 100 + 'vw';\r\n confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n confetti.style.animationDelay = Math.random() * 2 + 's';\r\n confettiContainer.appendChild(confetti);\r\n }\r\n \r\n \/\/ Remover os confetes ap\u00f3s a anima\u00e7\u00e3o\r\n setTimeout(() => {\r\n confettiContainer.remove();\r\n }, 5000);\r\n }\r\n \r\n \/\/ Inicializar o jogo\r\n function initGame() {\r\n \/\/ Mostrar a tela inicial\r\n showScreen(welcomeScreen);\r\n \r\n \/\/ Desabilitar bot\u00f5es de navega\u00e7\u00e3o at\u00e9 que as perguntas sejam respondidas\r\n next1Btn.disabled = true;\r\n next2Btn.disabled = true;\r\n finishBtn.disabled = true;\r\n }\r\n \r\n \/\/ Iniciar o jogo quando a p\u00e1gina carregar\r\n initGame();\r\n});\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Quiz Regress\u00e3o Teste seus conhecimentos sobre os pre\u00e7os de sorvetes! Digite seu nome: Jogar Pergunta 1 Qual o valor do sorvete de 250g? R$ 25,00 R$ 26,00 R$ 28,00 R$ 30,00 Pr\u00f3xima pergunta Pergunta 2 Qual o valor do sorvete de 300g? R$ 32,50 R$ 35,50 R$ 37,50 R$ 39,50 Pr\u00f3xima pergunta Pergunta 3 Qual […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":132,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1115"}],"collection":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/comments?post=1115"}],"version-history":[{"count":8,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1115\/revisions"}],"predecessor-version":[{"id":1172,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1115\/revisions\/1172"}],"up":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/132"}],"wp:attachment":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/media?parent=1115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Quiz Regress\u00e3o<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&family=Source+Code+Pro&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div id=\"welcome-screen\" class=\"quiz-screen active\">\r\n <p>Teste seus conhecimentos sobre os pre\u00e7os de sorvetes!<\/p>\r\n <div class=\"question-container\">\r\n <img src=\"https:\/\/cdn.awsli.com.br\/800x800\/1011\/1011926\/produto\/39105544\/casquinha-de-sorvete-biscoito-doce-conny-d56edf5d.jpg\" alt=\"Sorvetes diversos\" class=\"quiz-image\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"player-name\">Digite seu nome:<\/label>\r\n <input type=\"text\" id=\"player-name\" placeholder=\"Seu nome\">\r\n <\/div>\r\n <button id=\"start-btn\" class=\"btn primary-btn\">Jogar<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"question-1\" class=\"quiz-screen hidden\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress\" style=\"width: 33%\"><\/div>\r\n <\/div>\r\n <h2>Pergunta 1<\/h2>\r\n <div class=\"question-container\">\r\n <p>Qual o valor do sorvete de 250g?<\/p>\r\n <img src=\"https:\/\/github.com\/lauraemmanuella\/educacaoIA\/blob\/main\/imagens\/Sorvete1.png?raw=true\" class=\"quiz-image\">\r\n \r\n <div class=\"options\">\r\n <div class=\"option-btn\" data-value=\"25\">R$ 25,00<\/div>\r\n <div class=\"option-btn\" data-value=\"26\">R$ 26,00<\/div>\r\n <div class=\"option-btn\" data-value=\"28\">R$ 28,00<\/div>\r\n <div class=\"option-btn\" data-value=\"30\">R$ 30,00<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"feedback-1\" class=\"feedback-result\"><\/div>\r\n <button id=\"next-1\" class=\"btn primary-btn next-btn\" disabled>Pr\u00f3xima pergunta<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"question-2\" class=\"quiz-screen hidden\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress\" style=\"width: 66%\"><\/div>\r\n <\/div>\r\n <h2>Pergunta 2<\/h2>\r\n <div class=\"question-container\">\r\n <p>Qual o valor do sorvete de 300g?<\/p>\r\n <img src=\"https:\/\/github.com\/lauraemmanuella\/educacaoIA\/blob\/main\/imagens\/Sorvete2.png?raw=true\" alt=\"Sorvete de 350g\" class=\"quiz-image\">\r\n \r\n <div class=\"options\">\r\n <div class=\"option-btn\" data-value=\"32.5\">R$ 32,50<\/div>\r\n <div class=\"option-btn\" data-value=\"35.5\">R$ 35,50<\/div>\r\n <div class=\"option-btn\" data-value=\"37.5\">R$ 37,50<\/div>\r\n <div class=\"option-btn\" data-value=\"39.5\">R$ 39,50<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"feedback-2\" class=\"feedback-result\"><\/div>\r\n <button id=\"next-2\" class=\"btn primary-btn next-btn\" disabled>Pr\u00f3xima pergunta<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"question-3\" class=\"quiz-screen hidden\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress\" style=\"width: 100%\"><\/div>\r\n <\/div>\r\n <h2>Pergunta 3<\/h2>\r\n <div class=\"question-container\">\r\n <p>Qual o valor do sorvete de 350g?<\/p>\r\n <img src=\"https:\/\/github.com\/lauraemmanuella\/educacaoIA\/blob\/main\/imagens\/Sorvete3.png?raw=true\" alt=\"Sorvete de 300g\" class=\"quiz-image\">\r\n \r\n <div class=\"options\">\r\n <div class=\"option-btn\" data-value=\"34\">R$ 34,00<\/div>\r\n <div class=\"option-btn\" data-value=\"36.5\">R$ 36,50<\/div>\r\n <div class=\"option-btn\" data-value=\"38\">R$ 38,00<\/div>\r\n <div class=\"option-btn\" data-value=\"40\">R$ 40,00<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"feedback-3\" class=\"feedback-result\"><\/div>\r\n <button id=\"finish-btn\" class=\"btn primary-btn\" disabled>Ver resultado<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"result-screen\" class=\"quiz-screen hidden\">\r\n <h2>Resultado Final<\/h2>\r\n <div class=\"results-box\">\r\n <p>Jogador: <span id=\"result-name\" class=\"highlight\"><\/span><\/p>\r\n <p>Pontua\u00e7\u00e3o: <span id=\"score\" class=\"highlight\"><\/span> de 3<\/p>\r\n <div class=\"score-bar\">\r\n <div id=\"score-progress\"><\/div>\r\n <\/div>\r\n <div id=\"final-message\"><\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Elementos da tela inicial\r\n const welcomeScreen = document.getElementById('welcome-screen');\r\n const playerNameInput = document.getElementById('player-name');\r\n const startBtn = document.getElementById('start-btn');\r\n \r\n \/\/ Elementos das perguntas\r\n const question1Screen = document.getElementById('question-1');\r\n const question2Screen = document.getElementById('question-2');\r\n const question3Screen = document.getElementById('question-3');\r\n \r\n \/\/ Elementos dos bot\u00f5es de navega\u00e7\u00e3o\r\n const next1Btn = document.getElementById('next-1');\r\n const next2Btn = document.getElementById('next-2');\r\n const finishBtn = document.getElementById('finish-btn');\r\n \r\n \/\/ Elementos de feedback\r\n const feedback1 = document.getElementById('feedback-1');\r\n const feedback2 = document.getElementById('feedback-2');\r\n const feedback3 = document.getElementById('feedback-3');\r\n \r\n \/\/ Elementos da tela de resultado\r\n const resultScreen = document.getElementById('result-screen');\r\n const resultName = document.getElementById('result-name');\r\n const scoreElement = document.getElementById('score');\r\n const scoreProgress = document.getElementById('score-progress');\r\n const finalMessage = document.getElementById('final-message');\r\n \/\/ Bot\u00e3o de reiniciar removido\r\n \/\/ const restartBtn = document.getElementById('restart-btn');\r\n \r\n \/\/ Vari\u00e1veis do jogo\r\n let playerName = '';\r\n let score = 0;\r\n \r\n \/\/ Respostas corretas\r\n const correctAnswers = {\r\n question1: '25',\r\n question2: '32.5',\r\n question3: '40'\r\n };\r\n\r\n \/\/ Explica\u00e7\u00f5es para respostas\r\n const explanations = {\r\n question1: `<h3>Explica\u00e7\u00e3o:<\/h3>\r\n <p>O pre\u00e7o do sorvete segue o padr\u00e3o: <strong>R$ 5,00 a mais a cada 50g<\/strong>.<\/p>`,\r\n \r\n question2: `<h3>Explica\u00e7\u00e3o:<\/h3>\r\n <p><strong>Definimos o pre\u00e7o base (sem cobertura)<\/strong><\/p>\r\n <ul>\r\n <li>O padr\u00e3o \u00e9 <strong>R$ 5,00 a mais a cada 50g<\/strong><\/li>\r\n <li>Assim, o pre\u00e7o base seria:\r\n <ul>\r\n <li><strong>50g \u2192 R$ 5,00<\/strong><\/li>\r\n <li><strong>100g \u2192 R$ 10,00<\/strong><\/li>\r\n <li><strong>150g \u2192 R$ 15,00<\/strong><\/li>\r\n <li><strong>200g \u2192 R$ 20,00<\/strong><\/li>\r\n <li><strong>250g \u2192 R$ 25,00<\/strong><\/li>\r\n <li><strong>300g \u2192 R$ 30,00<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>Adicionamos o valor da cobertura ao pre\u00e7o final do sorvete:<\/strong>\r\n <ul>\r\n <li><strong> Chocolate (+R$ 3,00)<\/strong><\/li>\r\n <li><strong>Morango (+R$ 2,25)<\/strong><\/li>\r\n <li><strong>Caramelo (+R$ 2,50)<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>`,\r\n \r\n question3: `<h3>Explica\u00e7\u00e3o:<\/h3>\r\n <p><strong>Definimos o pre\u00e7o base (sem cobertura)<\/strong><\/p>\r\n <ul>\r\n <li>O padr\u00e3o \u00e9 <strong>R$ 5,00 a mais a cada 50g<\/strong><\/li>\r\n <li>Assim, o pre\u00e7o base seria:\r\n <ul>\r\n <li><strong>50g \u2192 R$ 5,00<\/strong><\/li>\r\n <li><strong>100g \u2192 R$ 10,00<\/strong><\/li>\r\n <li><strong>150g \u2192 R$ 15,00<\/strong><\/li>\r\n <li><strong>200g \u2192 R$ 20,00<\/strong><\/li>\r\n <li><strong>250g \u2192 R$ 25,00<\/strong><\/li>\r\n <li><strong>300g \u2192 R$ 30,00<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>Adicionamos o valor da cobertura ao pre\u00e7o final do sorvete:<\/strong>\r\n <ul>\r\n <li><strong> Chocolate (+R$ 3,00)<\/strong><\/li>\r\n <li><strong>Morango (+R$ 2,25)<\/strong><\/li>\r\n <li><strong>Caramelo (+R$ 2,50)<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>Adicionamos o valor do adicional ao pre\u00e7o final do sorvete:<\/strong>\r\n <ul>\r\n <li><strong> Granulado (+R$ 2,00)<\/strong><\/li>\r\n <li><strong> Marshmallow (+R$ 1,00)<\/strong><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>`\r\n };\r\n \r\n \/\/ Iniciar o jogo\r\n startBtn.addEventListener('click', function() {\r\n playerName = playerNameInput.value.trim();\r\n \r\n if (playerName === '') {\r\n alert('Por favor, digite seu nome para come\u00e7ar.');\r\n return;\r\n }\r\n \r\n showScreen(question1Screen);\r\n });\r\n \r\n \/\/ Configurar op\u00e7\u00f5es das perguntas\r\n setupOptions(question1Screen, 1);\r\n setupOptions(question2Screen, 2);\r\n setupOptions(question3Screen, 3);\r\n \r\n \/\/ Bot\u00f5es de navega\u00e7\u00e3o\r\n next1Btn.addEventListener('click', function() {\r\n showScreen(question2Screen);\r\n });\r\n \r\n next2Btn.addEventListener('click', function() {\r\n showScreen(question3Screen);\r\n });\r\n \r\n finishBtn.addEventListener('click', function() {\r\n showResults();\r\n });\r\n \r\n \/\/ Bot\u00e3o de reiniciar removido\r\n \/\/ restartBtn.addEventListener('click', function() {\r\n \/\/ resetGame();\r\n \/\/ });\r\n \r\n \/\/ Fun\u00e7\u00f5es auxiliares\r\n function setupOptions(questionScreen, questionNumber) {\r\n const options = questionScreen.querySelectorAll('.option-btn');\r\n const feedbackElement = document.getElementById(`feedback-${questionNumber}`);\r\n const nextButton = document.getElementById(questionNumber === 3 ? 'finish-btn' : `next-${questionNumber}`);\r\n \r\n options.forEach(option => {\r\n option.addEventListener('click', function() {\r\n \/\/ Adicionar efeito de pulso\r\n this.classList.add('pulse');\r\n \r\n \/\/ Desabilitar todas as op\u00e7\u00f5es ap\u00f3s a escolha\r\n options.forEach(opt => {\r\n opt.style.pointerEvents = 'none';\r\n });\r\n \r\n const selectedValue = this.getAttribute('data-value');\r\n const correctValue = correctAnswers[`question${questionNumber}`];\r\n \r\n setTimeout(() => {\r\n if (selectedValue === correctValue) {\r\n \/\/ Resposta correta\r\n this.classList.add('correct');\r\n feedbackElement.innerHTML = `\r\n <h3 class=\"feedback-title correct\">Correto!<\/h3>\r\n <div class=\"success-message\">Parab\u00e9ns! Voc\u00ea acertou!<\/div>\r\n <div class=\"explanation\">${explanations[`question${questionNumber}`]}<\/div>\r\n `;\r\n feedbackElement.classList.add('success');\r\n feedbackElement.id = 'feedback-correct';\r\n score++;\r\n } else {\r\n \/\/ Resposta incorreta\r\n this.classList.add('incorrect');\r\n \r\n \/\/ Destacar a resposta correta\r\n options.forEach(opt => {\r\n if (opt.getAttribute('data-value') === correctValue) {\r\n opt.classList.add('correct');\r\n }\r\n });\r\n \r\n \/\/ Mostrar explica\u00e7\u00e3o detalhada\r\n feedbackElement.innerHTML = `\r\n <h3 class=\"feedback-title wrong\">Incorreto<\/h3>\r\n <div class=\"error-message\">Ops! Essa n\u00e3o \u00e9 a resposta correta.<\/div>\r\n <div class=\"explanation\">${explanations[`question${questionNumber}`]}<\/div>\r\n `;\r\n feedbackElement.classList.add('error');\r\n feedbackElement.id = 'feedback-wrong';\r\n }\r\n \r\n \/\/ Mostrar feedback com anima\u00e7\u00e3o\r\n feedbackElement.style.display = 'block';\r\n \r\n \/\/ Habilitar o bot\u00e3o de pr\u00f3xima pergunta\r\n nextButton.disabled = false;\r\n }, 300);\r\n });\r\n });\r\n }\r\n \r\n function showScreen(screen) {\r\n \/\/ Esconder todas as telas\r\n const screens = document.querySelectorAll('.quiz-screen');\r\n screens.forEach(s => {\r\n s.classList.add('hidden');\r\n s.classList.remove('active');\r\n });\r\n \r\n \/\/ Mostrar a tela desejada com anima\u00e7\u00e3o\r\n screen.classList.remove('hidden');\r\n screen.classList.add('active');\r\n \r\n \/\/ Scroll para o topo\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n \r\n function showResults() {\r\n \/\/ Atualizar informa\u00e7\u00f5es na tela de resultado\r\n resultName.textContent = playerName;\r\n scoreElement.textContent = score;\r\n \r\n \/\/ Atualizar a barra de progresso\r\n const percentage = (score \/ 3) * 100;\r\n scoreProgress.style.width = percentage + '%';\r\n \r\n \/\/ Adicionar confetes para pontua\u00e7\u00e3o perfeita\r\n if (score === 3) {\r\n createConfetti();\r\n }\r\n \r\n \/\/ Mensagem personalizada baseada na pontua\u00e7\u00e3o\r\n if (score === 3) {\r\n finalMessage.textContent = 'Excelente! Voc\u00ea acertou todas as perguntas!';\r\n finalMessage.style.color = '#27ae60';\r\n } else if (score >= 1) {\r\n finalMessage.textContent = 'Bom trabalho! Continue praticando.';\r\n finalMessage.style.color = '#f39c12';\r\n } else {\r\n finalMessage.textContent = 'N\u00e3o desanime, cada tentativa \u00e9 uma oportunidade de aprendizado!';\r\n finalMessage.style.color = '#e74c3c';\r\n }\r\n \r\n \/\/ Mostrar tela de resultado\r\n showScreen(resultScreen);\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o resetGame mantida por completude, mas n\u00e3o \u00e9 mais utilizada\r\n function resetGame() {\r\n \/\/ Resetar pontua\u00e7\u00e3o\r\n score = 0;\r\n \r\n \/\/ Limpar campos e classes\r\n const options = document.querySelectorAll('.option-btn');\r\n options.forEach(opt => {\r\n opt.classList.remove('correct', 'incorrect', 'pulse');\r\n opt.style.pointerEvents = 'auto';\r\n });\r\n \r\n \/\/ Esconder feedback\r\n const feedbackElements = document.querySelectorAll('[id^=\"feedback-\"]');\r\n feedbackElements.forEach(el => {\r\n el.style.display = 'none';\r\n el.classList.remove('success', 'error');\r\n el.innerHTML = '';\r\n });\r\n \r\n \/\/ Desabilitar bot\u00f5es de navega\u00e7\u00e3o\r\n next1Btn.disabled = true;\r\n next2Btn.disabled = true;\r\n finishBtn.disabled = true;\r\n \r\n \/\/ Voltar para a tela inicial\r\n showScreen(welcomeScreen);\r\n }\r\n \r\n \/\/ Fun\u00e7\u00e3o para criar efeito de confete\r\n function createConfetti() {\r\n const confettiContainer = document.createElement('div');\r\n confettiContainer.className = 'confetti-container';\r\n document.body.appendChild(confettiContainer);\r\n \r\n const colors = ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', '#e74c3c'];\r\n \r\n \/\/ Criar 50 confetes\r\n for (let i = 0; i < 50; i++) {\r\n const confetti = document.createElement('div');\r\n confetti.className = 'confetti';\r\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\r\n confetti.style.left = Math.random() * 100 + 'vw';\r\n confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n confetti.style.animationDelay = Math.random() * 2 + 's';\r\n confettiContainer.appendChild(confetti);\r\n }\r\n \r\n \/\/ Remover os confetes ap\u00f3s a anima\u00e7\u00e3o\r\n setTimeout(() => {\r\n confettiContainer.remove();\r\n }, 5000);\r\n }\r\n \r\n \/\/ Inicializar o jogo\r\n function initGame() {\r\n \/\/ Mostrar a tela inicial\r\n showScreen(welcomeScreen);\r\n \r\n \/\/ Desabilitar bot\u00f5es de navega\u00e7\u00e3o at\u00e9 que as perguntas sejam respondidas\r\n next1Btn.disabled = true;\r\n next2Btn.disabled = true;\r\n finishBtn.disabled = true;\r\n }\r\n \r\n \/\/ Iniciar o jogo quando a p\u00e1gina carregar\r\n initGame();\r\n});\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Quiz Regress\u00e3o Teste seus conhecimentos sobre os pre\u00e7os de sorvetes! Digite seu nome: Jogar Pergunta 1 Qual o valor do sorvete de 250g? R$ 25,00 R$ 26,00 R$ 28,00 R$ 30,00 Pr\u00f3xima pergunta Pergunta 2 Qual o valor do sorvete de 300g? R$ 32,50 R$ 35,50 R$ 37,50 R$ 39,50 Pr\u00f3xima pergunta Pergunta 3 Qual […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":132,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1115"}],"collection":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/comments?post=1115"}],"version-history":[{"count":8,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1115\/revisions"}],"predecessor-version":[{"id":1172,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1115\/revisions\/1172"}],"up":[{"embeddable":true,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/132"}],"wp:attachment":[{"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/media?parent=1115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}