Quiz de Prompts para IA<\/title>\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div id=\"start-screen\" class=\"quiz-screen\">\r\n <p>Teste seus conhecimentos sobre prompts eficazes para Intelig\u00eancia Artificial! Avalie se os prompts s\u00e3o bons ou ruins para obter melhores resultados com IAs.<\/p>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"player-name\"><i class=\"fas fa-user\"><\/i> Seu Nome:<\/label>\r\n <input type=\"text\" id=\"player-name\" placeholder=\"Digite seu nome para come\u00e7ar\" required>\r\n <\/div>\r\n \r\n <button id=\"start-button\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-play\"><\/i> Iniciar Quiz\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"question-screen\" class=\"quiz-screen hidden\">\r\n <h2>Pergunta <span id=\"question-number\">1<\/span>\/5<\/h2>\r\n <div class=\"progress-bar\">\r\n <div id=\"progress\" class=\"progress\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"question-container\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Avalie o prompt abaixo:<\/h3>\r\n <div class=\"prompt-box\" id=\"prompt-text\"><\/div>\r\n <p>Este prompt \u00e9:<\/p>\r\n <div class=\"options\">\r\n <button id=\"good-option\" class=\"btn option-btn\">\r\n <i class=\"fas fa-thumbs-up\"><\/i> Bom\r\n <\/button>\r\n <button id=\"bad-option\" class=\"btn option-btn\">\r\n <i class=\"fas fa-thumbs-down\"><\/i> Ruim\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div id=\"feedback-screen\" class=\"quiz-screen hidden\">\r\n <div id=\"feedback-correct\" class=\"feedback-result hidden\">\r\n <h2 class=\"feedback-title correct\"><i class=\"fas fa-check-circle\"><\/i> Correto!<\/h2>\r\n <p id=\"correct-explanation\"><\/p>\r\n <\/div>\r\n \r\n <div id=\"feedback-wrong\" class=\"feedback-result hidden\">\r\n <h2 class=\"feedback-title wrong\"><i class=\"fas fa-times-circle\"><\/i> Incorreto!<\/h2>\r\n <p id=\"wrong-explanation\"><\/p>\r\n <\/div>\r\n \r\n <button id=\"next-button\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-arrow-right\"><\/i> Pr\u00f3xima Pergunta\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"results-screen\" class=\"quiz-screen hidden\">\r\n <h2><i class=\"fas fa-trophy\"><\/i> Resultado Final<\/h2>\r\n <p>Parab\u00e9ns, <span id=\"result-name\" class=\"highlight\">Jogador<\/span>!<\/p>\r\n <div class=\"results-box\">\r\n <p>Voc\u00ea acertou <span id=\"correct-count\" class=\"highlight\">0<\/span> de 5 perguntas!<\/p>\r\n <div class=\"score-bar\">\r\n <div id=\"score-progress\" class=\"progress\"><\/div>\r\n <\/div>\r\n <p id=\"final-message\"><\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <script>\r\n \/\/ Banco de prompts para o quiz\r\nconst promptsDatabase = [\r\n {\r\n text: \"Explique o conceito de intelig\u00eancia artificial como se eu fosse uma crian\u00e7a de 10 anos.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque solicita uma explica\u00e7\u00e3o adaptada a um n\u00edvel espec\u00edfico de compreens\u00e3o (crian\u00e7a de 10 anos), o que ajuda a IA a ajustar o tom e a complexidade da resposta para o p\u00fablico-alvo.\"\r\n },\r\n {\r\n text: \"Fale sobre intelig\u00eancia artificial.\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque \u00e9 muito vago e amplo. N\u00e3o especifica que aspectos da IA s\u00e3o de interesse, nem o n\u00edvel de detalhe desejado, o que pode resultar em respostas gen\u00e9ricas ou muito longas.\"\r\n },\r\n {\r\n text: \"Crie uma an\u00e1lise detalhada do impacto da intelig\u00eancia artificial no mercado de trabalho nos pr\u00f3ximos 5 anos, incluindo estat\u00edsticas recentes e tend\u00eancias emergentes. Divida por setores como sa\u00fade, finan\u00e7as e educa\u00e7\u00e3o.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque \u00e9 espec\u00edfico, estabelece um escopo claro (pr\u00f3ximos 5 anos), solicita informa\u00e7\u00f5es espec\u00edficas (estat\u00edsticas recentes, tend\u00eancias) e fornece uma estrutura organizacional (dividir por setores).\"\r\n },\r\n {\r\n text: \"Me ajude.\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque n\u00e3o fornece contexto ou detalhes sobre o tipo de ajuda necess\u00e1ria. A IA n\u00e3o tem como saber qual o problema espec\u00edfico ou que tipo de informa\u00e7\u00e3o seria \u00fatil.\"\r\n },\r\n {\r\n text: \"Imagine que voc\u00ea \u00e9 um especialista em marketing digital. Analise estas m\u00e9tricas de campanha [CTR: 1.2%, Convers\u00e3o: 3.5%, CPC: $0.45] e sugira tr\u00eas estrat\u00e9gias espec\u00edficas para melhorar o desempenho.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque estabelece um contexto claro (especialista em marketing), fornece dados espec\u00edficos para an\u00e1lise e solicita um n\u00famero espec\u00edfico de sugest\u00f5es com foco em um objetivo claro (melhorar o desempenho).\"\r\n },\r\n {\r\n text: \"Quero que voc\u00ea me d\u00ea todas as informa\u00e7\u00f5es poss\u00edveis sobre tudo no universo.\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque solicita um escopo impossivelmente amplo. \u00c9 importante ser espec\u00edfico e delimitar claramente o que se deseja aprender para obter respostas \u00fateis e gerenci\u00e1veis.\"\r\n },\r\n {\r\n text: \"Compare e contraste as filosofias educacionais de Maria Montessori e Rudolf Steiner, destacando as principais diferen\u00e7as em rela\u00e7\u00e3o ao desenvolvimento infantil e metodologias de ensino.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque solicita uma compara\u00e7\u00e3o espec\u00edfica entre dois t\u00f3picos definidos, com \u00e1reas de foco claras (desenvolvimento infantil e metodologias). Isso permite uma resposta estruturada e informativa.\"\r\n },\r\n {\r\n text: \"Qual \u00e9 a melhor linguagem de programa\u00e7\u00e3o?\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque 'melhor' \u00e9 subjetivo e a pergunta n\u00e3o especifica para qual prop\u00f3sito, contexto ou requisitos a linguagem seria utilizada. \u00c9 importante fornecer contexto espec\u00edfico para perguntas de compara\u00e7\u00e3o.\"\r\n },\r\n {\r\n text: \"Crie um roteiro passo a passo para resolver o seguinte problema matem\u00e1tico, explicando cada etapa: 'Se 3x + 7 = 22, qual \u00e9 o valor de x?'\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque solicita um formato espec\u00edfico (roteiro passo a passo), sobre um problema bem definido, e pede explica\u00e7\u00f5es para cada etapa, o que resultar\u00e1 em um conte\u00fado educacional \u00fatil.\"\r\n },\r\n {\r\n text: \"Por que as pessoas s\u00e3o t\u00e3o est\u00fapidas \u00e0s vezes?\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque cont\u00e9m uma premissa carregada e generalizada (que as pessoas s\u00e3o 'est\u00fapidas'), o que pode levar a respostas igualmente tendenciosas. Prompts que fazem generaliza\u00e7\u00f5es negativas geralmente n\u00e3o produzem insights \u00fateis.\"\r\n }\r\n];\r\n\r\n\/\/ Vari\u00e1veis globais\r\nlet currentPlayer = \"\";\r\nlet usedPromptIndexes = [];\r\nlet currentQuestionIndex = 0;\r\nlet correctAnswers = 0;\r\nlet currentPrompt = null;\r\n\r\n\/\/ Elementos DOM\r\nconst startScreen = document.getElementById(\"start-screen\");\r\nconst questionScreen = document.getElementById(\"question-screen\");\r\nconst feedbackScreen = document.getElementById(\"feedback-screen\");\r\nconst resultsScreen = document.getElementById(\"results-screen\");\r\n\r\nconst playerNameInput = document.getElementById(\"player-name\");\r\nconst startButton = document.getElementById(\"start-button\");\r\nconst questionNumber = document.getElementById(\"question-number\");\r\nconst progressBar = document.getElementById(\"progress\");\r\nconst promptText = document.getElementById(\"prompt-text\");\r\nconst goodOption = document.getElementById(\"good-option\");\r\nconst badOption = document.getElementById(\"bad-option\");\r\nconst feedbackCorrect = document.getElementById(\"feedback-correct\");\r\nconst feedbackWrong = document.getElementById(\"feedback-wrong\");\r\nconst correctExplanation = document.getElementById(\"correct-explanation\");\r\nconst wrongExplanation = document.getElementById(\"wrong-explanation\");\r\nconst nextButton = document.getElementById(\"next-button\");\r\nconst resultName = document.getElementById(\"result-name\");\r\nconst correctCount = document.getElementById(\"correct-count\");\r\nconst scoreProgress = document.getElementById(\"score-progress\");\r\nconst finalMessage = document.getElementById(\"final-message\");\r\n\/\/ Removida a refer\u00eancia ao bot\u00e3o de jogar novamente\r\n\r\n\/\/ Inicializa o jogo\r\nstartButton.addEventListener(\"click\", startGame);\r\ngoodOption.addEventListener(\"click\", () => checkAnswer(true));\r\nbadOption.addEventListener(\"click\", () => checkAnswer(false));\r\nnextButton.addEventListener(\"click\", nextQuestion);\r\n\/\/ Removido o event listener para o bot\u00e3o de jogar novamente\r\n\r\n\/\/ Carregar fontes\r\ndocument.head.innerHTML += `\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`;\r\n\r\n\/\/ Fun\u00e7\u00e3o para adicionar anima\u00e7\u00e3o de pulso\r\nfunction addPulseAnimation(element) {\r\n element.classList.add('pulse');\r\n setTimeout(() => {\r\n element.classList.remove('pulse');\r\n }, 500);\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para iniciar o jogo\r\nfunction startGame() {\r\n \/\/ Valida nome do jogador\r\n if (!playerNameInput.value.trim()) {\r\n addPulseAnimation(playerNameInput);\r\n playerNameInput.focus();\r\n return;\r\n }\r\n \r\n \/\/ Configura o jogo\r\n currentPlayer = playerNameInput.value.trim();\r\n currentQuestionIndex = 0;\r\n correctAnswers = 0;\r\n usedPromptIndexes = [];\r\n \r\n \/\/ Mostra a tela de perguntas\r\n showScreen(questionScreen);\r\n \r\n \/\/ Carrega a primeira pergunta\r\n loadQuestion();\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para carregar uma pergunta\r\nfunction loadQuestion() {\r\n \/\/ Atualiza o n\u00famero da pergunta e a barra de progresso\r\n questionNumber.textContent = currentQuestionIndex + 1;\r\n progressBar.style.width = `${(currentQuestionIndex \/ 5) * 100}%`;\r\n \r\n \/\/ Seleciona um prompt aleat\u00f3rio que ainda n\u00e3o foi usado\r\n let randomIndex;\r\n do {\r\n randomIndex = Math.floor(Math.random() * promptsDatabase.length);\r\n } while (usedPromptIndexes.includes(randomIndex));\r\n \r\n \/\/ Adiciona o \u00edndice aos prompts usados\r\n usedPromptIndexes.push(randomIndex);\r\n currentPrompt = promptsDatabase[randomIndex];\r\n \r\n \/\/ Exibe o prompt\r\n promptText.textContent = currentPrompt.text;\r\n \r\n \/\/ Habilita os bot\u00f5es de op\u00e7\u00e3o\r\n goodOption.disabled = false;\r\n badOption.disabled = false;\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para verificar a resposta\r\nfunction checkAnswer(isGoodAnswer) {\r\n \/\/ Desabilita os bot\u00f5es para evitar m\u00faltiplas respostas\r\n goodOption.disabled = true;\r\n badOption.disabled = true;\r\n \r\n \/\/ Verifica se a resposta est\u00e1 correta\r\n const isCorrect = isGoodAnswer === currentPrompt.isGood;\r\n \r\n \/\/ Destaca o bot\u00e3o selecionado\r\n const selectedButton = isGoodAnswer ? goodOption : badOption;\r\n addPulseAnimation(selectedButton);\r\n \r\n \/\/ Atualiza contador de respostas corretas\r\n if (isCorrect) {\r\n correctAnswers++;\r\n }\r\n \r\n \/\/ Pequeno atraso para mostrar o feedback (efeito visual)\r\n setTimeout(() => {\r\n showFeedback(isCorrect);\r\n }, 500);\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para mostrar feedback\r\nfunction showFeedback(isCorrect) {\r\n \/\/ Oculta a tela de perguntas e mostra a tela de feedback\r\n showScreen(feedbackScreen);\r\n \r\n \/\/ Mostra o feedback apropriado\r\n if (isCorrect) {\r\n feedbackCorrect.classList.remove(\"hidden\");\r\n feedbackWrong.classList.add(\"hidden\");\r\n correctExplanation.textContent = currentPrompt.explanation;\r\n } else {\r\n feedbackCorrect.classList.add(\"hidden\");\r\n feedbackWrong.classList.remove(\"hidden\");\r\n wrongExplanation.textContent = currentPrompt.explanation;\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para ir para a pr\u00f3xima pergunta\r\nfunction nextQuestion() {\r\n \/\/ Incrementa o \u00edndice da pergunta atual\r\n currentQuestionIndex++;\r\n \r\n \/\/ Verifica se acabaram as perguntas\r\n if (currentQuestionIndex >= 5) {\r\n showResults();\r\n } else {\r\n \/\/ Mostra a pr\u00f3xima pergunta\r\n showScreen(questionScreen);\r\n loadQuestion();\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para criar confete (para pontua\u00e7\u00e3o perfeita)\r\nfunction createConfetti() {\r\n const confettiContainer = document.body;\r\n for (let i = 0; i < 100; i++) {\r\n const confetti = document.createElement('div');\r\n confetti.className = 'confetti';\r\n confetti.style.left = Math.random() * 100 + 'vw';\r\n confetti.style.animationDelay = Math.random() * 5 + 's';\r\n confettiContainer.appendChild(confetti);\r\n \r\n \/\/ Remover ap\u00f3s a anima\u00e7\u00e3o\r\n setTimeout(() => {\r\n confetti.remove();\r\n }, 5000);\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para mostrar os resultados\r\nfunction showResults() {\r\n \/\/ Exibe a tela de resultados\r\n showScreen(resultsScreen);\r\n \r\n \/\/ Atualiza as informa\u00e7\u00f5es\r\n resultName.textContent = currentPlayer;\r\n correctCount.textContent = correctAnswers;\r\n scoreProgress.style.width = `${(correctAnswers \/ 5) * 100}%`;\r\n \r\n \/\/ Define a mensagem final com base na pontua\u00e7\u00e3o\r\n if (correctAnswers === 5) {\r\n finalMessage.innerHTML = \"\ud83c\udfc6 <span class='highlight'>Excelente!<\/span> Voc\u00ea entende perfeitamente o que faz um bom prompt!\";\r\n \/\/ Adiciona efeito de confete para 100% de acerto\r\n setTimeout(createConfetti, 500);\r\n } else if (correctAnswers >= 3) {\r\n finalMessage.innerHTML = \"\ud83d\udc4d <span class='highlight'>Bom trabalho!<\/span> Voc\u00ea tem um bom entendimento sobre prompts eficazes.\";\r\n } else {\r\n finalMessage.innerHTML = \"\ud83d\udcaa Continue praticando para melhorar sua habilidade em criar prompts eficazes.\";\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o auxiliar para mostrar apenas uma tela e ocultar as outras\r\nfunction showScreen(screenToShow) {\r\n startScreen.classList.add(\"hidden\");\r\n questionScreen.classList.add(\"hidden\");\r\n feedbackScreen.classList.add(\"hidden\");\r\n resultsScreen.classList.add(\"hidden\");\r\n \r\n screenToShow.classList.remove(\"hidden\");\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 de Prompts para IA Teste seus conhecimentos sobre prompts eficazes para Intelig\u00eancia Artificial! Avalie se os prompts s\u00e3o bons ou ruins para obter melhores resultados com IAs. Seu Nome: Iniciar Quiz Pergunta 1\/5 Avalie o prompt abaixo: Este prompt \u00e9: Bom Ruim Correto! Incorreto! Pr\u00f3xima Pergunta Resultado Final Parab\u00e9ns, Jogador! Voc\u00ea acertou 0 de […]<\/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\/1106"}],"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=1106"}],"version-history":[{"count":6,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1106\/revisions"}],"predecessor-version":[{"id":1128,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1106\/revisions\/1128"}],"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=1106"}],"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 de Prompts para IA<\/title>\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div id=\"start-screen\" class=\"quiz-screen\">\r\n <p>Teste seus conhecimentos sobre prompts eficazes para Intelig\u00eancia Artificial! Avalie se os prompts s\u00e3o bons ou ruins para obter melhores resultados com IAs.<\/p>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"player-name\"><i class=\"fas fa-user\"><\/i> Seu Nome:<\/label>\r\n <input type=\"text\" id=\"player-name\" placeholder=\"Digite seu nome para come\u00e7ar\" required>\r\n <\/div>\r\n \r\n <button id=\"start-button\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-play\"><\/i> Iniciar Quiz\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"question-screen\" class=\"quiz-screen hidden\">\r\n <h2>Pergunta <span id=\"question-number\">1<\/span>\/5<\/h2>\r\n <div class=\"progress-bar\">\r\n <div id=\"progress\" class=\"progress\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"question-container\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Avalie o prompt abaixo:<\/h3>\r\n <div class=\"prompt-box\" id=\"prompt-text\"><\/div>\r\n <p>Este prompt \u00e9:<\/p>\r\n <div class=\"options\">\r\n <button id=\"good-option\" class=\"btn option-btn\">\r\n <i class=\"fas fa-thumbs-up\"><\/i> Bom\r\n <\/button>\r\n <button id=\"bad-option\" class=\"btn option-btn\">\r\n <i class=\"fas fa-thumbs-down\"><\/i> Ruim\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div id=\"feedback-screen\" class=\"quiz-screen hidden\">\r\n <div id=\"feedback-correct\" class=\"feedback-result hidden\">\r\n <h2 class=\"feedback-title correct\"><i class=\"fas fa-check-circle\"><\/i> Correto!<\/h2>\r\n <p id=\"correct-explanation\"><\/p>\r\n <\/div>\r\n \r\n <div id=\"feedback-wrong\" class=\"feedback-result hidden\">\r\n <h2 class=\"feedback-title wrong\"><i class=\"fas fa-times-circle\"><\/i> Incorreto!<\/h2>\r\n <p id=\"wrong-explanation\"><\/p>\r\n <\/div>\r\n \r\n <button id=\"next-button\" class=\"btn primary-btn\">\r\n <i class=\"fas fa-arrow-right\"><\/i> Pr\u00f3xima Pergunta\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"results-screen\" class=\"quiz-screen hidden\">\r\n <h2><i class=\"fas fa-trophy\"><\/i> Resultado Final<\/h2>\r\n <p>Parab\u00e9ns, <span id=\"result-name\" class=\"highlight\">Jogador<\/span>!<\/p>\r\n <div class=\"results-box\">\r\n <p>Voc\u00ea acertou <span id=\"correct-count\" class=\"highlight\">0<\/span> de 5 perguntas!<\/p>\r\n <div class=\"score-bar\">\r\n <div id=\"score-progress\" class=\"progress\"><\/div>\r\n <\/div>\r\n <p id=\"final-message\"><\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <script>\r\n \/\/ Banco de prompts para o quiz\r\nconst promptsDatabase = [\r\n {\r\n text: \"Explique o conceito de intelig\u00eancia artificial como se eu fosse uma crian\u00e7a de 10 anos.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque solicita uma explica\u00e7\u00e3o adaptada a um n\u00edvel espec\u00edfico de compreens\u00e3o (crian\u00e7a de 10 anos), o que ajuda a IA a ajustar o tom e a complexidade da resposta para o p\u00fablico-alvo.\"\r\n },\r\n {\r\n text: \"Fale sobre intelig\u00eancia artificial.\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque \u00e9 muito vago e amplo. N\u00e3o especifica que aspectos da IA s\u00e3o de interesse, nem o n\u00edvel de detalhe desejado, o que pode resultar em respostas gen\u00e9ricas ou muito longas.\"\r\n },\r\n {\r\n text: \"Crie uma an\u00e1lise detalhada do impacto da intelig\u00eancia artificial no mercado de trabalho nos pr\u00f3ximos 5 anos, incluindo estat\u00edsticas recentes e tend\u00eancias emergentes. Divida por setores como sa\u00fade, finan\u00e7as e educa\u00e7\u00e3o.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque \u00e9 espec\u00edfico, estabelece um escopo claro (pr\u00f3ximos 5 anos), solicita informa\u00e7\u00f5es espec\u00edficas (estat\u00edsticas recentes, tend\u00eancias) e fornece uma estrutura organizacional (dividir por setores).\"\r\n },\r\n {\r\n text: \"Me ajude.\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque n\u00e3o fornece contexto ou detalhes sobre o tipo de ajuda necess\u00e1ria. A IA n\u00e3o tem como saber qual o problema espec\u00edfico ou que tipo de informa\u00e7\u00e3o seria \u00fatil.\"\r\n },\r\n {\r\n text: \"Imagine que voc\u00ea \u00e9 um especialista em marketing digital. Analise estas m\u00e9tricas de campanha [CTR: 1.2%, Convers\u00e3o: 3.5%, CPC: $0.45] e sugira tr\u00eas estrat\u00e9gias espec\u00edficas para melhorar o desempenho.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque estabelece um contexto claro (especialista em marketing), fornece dados espec\u00edficos para an\u00e1lise e solicita um n\u00famero espec\u00edfico de sugest\u00f5es com foco em um objetivo claro (melhorar o desempenho).\"\r\n },\r\n {\r\n text: \"Quero que voc\u00ea me d\u00ea todas as informa\u00e7\u00f5es poss\u00edveis sobre tudo no universo.\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque solicita um escopo impossivelmente amplo. \u00c9 importante ser espec\u00edfico e delimitar claramente o que se deseja aprender para obter respostas \u00fateis e gerenci\u00e1veis.\"\r\n },\r\n {\r\n text: \"Compare e contraste as filosofias educacionais de Maria Montessori e Rudolf Steiner, destacando as principais diferen\u00e7as em rela\u00e7\u00e3o ao desenvolvimento infantil e metodologias de ensino.\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque solicita uma compara\u00e7\u00e3o espec\u00edfica entre dois t\u00f3picos definidos, com \u00e1reas de foco claras (desenvolvimento infantil e metodologias). Isso permite uma resposta estruturada e informativa.\"\r\n },\r\n {\r\n text: \"Qual \u00e9 a melhor linguagem de programa\u00e7\u00e3o?\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque 'melhor' \u00e9 subjetivo e a pergunta n\u00e3o especifica para qual prop\u00f3sito, contexto ou requisitos a linguagem seria utilizada. \u00c9 importante fornecer contexto espec\u00edfico para perguntas de compara\u00e7\u00e3o.\"\r\n },\r\n {\r\n text: \"Crie um roteiro passo a passo para resolver o seguinte problema matem\u00e1tico, explicando cada etapa: 'Se 3x + 7 = 22, qual \u00e9 o valor de x?'\",\r\n isGood: true,\r\n explanation: \"Este \u00e9 um bom prompt porque solicita um formato espec\u00edfico (roteiro passo a passo), sobre um problema bem definido, e pede explica\u00e7\u00f5es para cada etapa, o que resultar\u00e1 em um conte\u00fado educacional \u00fatil.\"\r\n },\r\n {\r\n text: \"Por que as pessoas s\u00e3o t\u00e3o est\u00fapidas \u00e0s vezes?\",\r\n isGood: false,\r\n explanation: \"Este \u00e9 um prompt ruim porque cont\u00e9m uma premissa carregada e generalizada (que as pessoas s\u00e3o 'est\u00fapidas'), o que pode levar a respostas igualmente tendenciosas. Prompts que fazem generaliza\u00e7\u00f5es negativas geralmente n\u00e3o produzem insights \u00fateis.\"\r\n }\r\n];\r\n\r\n\/\/ Vari\u00e1veis globais\r\nlet currentPlayer = \"\";\r\nlet usedPromptIndexes = [];\r\nlet currentQuestionIndex = 0;\r\nlet correctAnswers = 0;\r\nlet currentPrompt = null;\r\n\r\n\/\/ Elementos DOM\r\nconst startScreen = document.getElementById(\"start-screen\");\r\nconst questionScreen = document.getElementById(\"question-screen\");\r\nconst feedbackScreen = document.getElementById(\"feedback-screen\");\r\nconst resultsScreen = document.getElementById(\"results-screen\");\r\n\r\nconst playerNameInput = document.getElementById(\"player-name\");\r\nconst startButton = document.getElementById(\"start-button\");\r\nconst questionNumber = document.getElementById(\"question-number\");\r\nconst progressBar = document.getElementById(\"progress\");\r\nconst promptText = document.getElementById(\"prompt-text\");\r\nconst goodOption = document.getElementById(\"good-option\");\r\nconst badOption = document.getElementById(\"bad-option\");\r\nconst feedbackCorrect = document.getElementById(\"feedback-correct\");\r\nconst feedbackWrong = document.getElementById(\"feedback-wrong\");\r\nconst correctExplanation = document.getElementById(\"correct-explanation\");\r\nconst wrongExplanation = document.getElementById(\"wrong-explanation\");\r\nconst nextButton = document.getElementById(\"next-button\");\r\nconst resultName = document.getElementById(\"result-name\");\r\nconst correctCount = document.getElementById(\"correct-count\");\r\nconst scoreProgress = document.getElementById(\"score-progress\");\r\nconst finalMessage = document.getElementById(\"final-message\");\r\n\/\/ Removida a refer\u00eancia ao bot\u00e3o de jogar novamente\r\n\r\n\/\/ Inicializa o jogo\r\nstartButton.addEventListener(\"click\", startGame);\r\ngoodOption.addEventListener(\"click\", () => checkAnswer(true));\r\nbadOption.addEventListener(\"click\", () => checkAnswer(false));\r\nnextButton.addEventListener(\"click\", nextQuestion);\r\n\/\/ Removido o event listener para o bot\u00e3o de jogar novamente\r\n\r\n\/\/ Carregar fontes\r\ndocument.head.innerHTML += `\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`;\r\n\r\n\/\/ Fun\u00e7\u00e3o para adicionar anima\u00e7\u00e3o de pulso\r\nfunction addPulseAnimation(element) {\r\n element.classList.add('pulse');\r\n setTimeout(() => {\r\n element.classList.remove('pulse');\r\n }, 500);\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para iniciar o jogo\r\nfunction startGame() {\r\n \/\/ Valida nome do jogador\r\n if (!playerNameInput.value.trim()) {\r\n addPulseAnimation(playerNameInput);\r\n playerNameInput.focus();\r\n return;\r\n }\r\n \r\n \/\/ Configura o jogo\r\n currentPlayer = playerNameInput.value.trim();\r\n currentQuestionIndex = 0;\r\n correctAnswers = 0;\r\n usedPromptIndexes = [];\r\n \r\n \/\/ Mostra a tela de perguntas\r\n showScreen(questionScreen);\r\n \r\n \/\/ Carrega a primeira pergunta\r\n loadQuestion();\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para carregar uma pergunta\r\nfunction loadQuestion() {\r\n \/\/ Atualiza o n\u00famero da pergunta e a barra de progresso\r\n questionNumber.textContent = currentQuestionIndex + 1;\r\n progressBar.style.width = `${(currentQuestionIndex \/ 5) * 100}%`;\r\n \r\n \/\/ Seleciona um prompt aleat\u00f3rio que ainda n\u00e3o foi usado\r\n let randomIndex;\r\n do {\r\n randomIndex = Math.floor(Math.random() * promptsDatabase.length);\r\n } while (usedPromptIndexes.includes(randomIndex));\r\n \r\n \/\/ Adiciona o \u00edndice aos prompts usados\r\n usedPromptIndexes.push(randomIndex);\r\n currentPrompt = promptsDatabase[randomIndex];\r\n \r\n \/\/ Exibe o prompt\r\n promptText.textContent = currentPrompt.text;\r\n \r\n \/\/ Habilita os bot\u00f5es de op\u00e7\u00e3o\r\n goodOption.disabled = false;\r\n badOption.disabled = false;\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para verificar a resposta\r\nfunction checkAnswer(isGoodAnswer) {\r\n \/\/ Desabilita os bot\u00f5es para evitar m\u00faltiplas respostas\r\n goodOption.disabled = true;\r\n badOption.disabled = true;\r\n \r\n \/\/ Verifica se a resposta est\u00e1 correta\r\n const isCorrect = isGoodAnswer === currentPrompt.isGood;\r\n \r\n \/\/ Destaca o bot\u00e3o selecionado\r\n const selectedButton = isGoodAnswer ? goodOption : badOption;\r\n addPulseAnimation(selectedButton);\r\n \r\n \/\/ Atualiza contador de respostas corretas\r\n if (isCorrect) {\r\n correctAnswers++;\r\n }\r\n \r\n \/\/ Pequeno atraso para mostrar o feedback (efeito visual)\r\n setTimeout(() => {\r\n showFeedback(isCorrect);\r\n }, 500);\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para mostrar feedback\r\nfunction showFeedback(isCorrect) {\r\n \/\/ Oculta a tela de perguntas e mostra a tela de feedback\r\n showScreen(feedbackScreen);\r\n \r\n \/\/ Mostra o feedback apropriado\r\n if (isCorrect) {\r\n feedbackCorrect.classList.remove(\"hidden\");\r\n feedbackWrong.classList.add(\"hidden\");\r\n correctExplanation.textContent = currentPrompt.explanation;\r\n } else {\r\n feedbackCorrect.classList.add(\"hidden\");\r\n feedbackWrong.classList.remove(\"hidden\");\r\n wrongExplanation.textContent = currentPrompt.explanation;\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para ir para a pr\u00f3xima pergunta\r\nfunction nextQuestion() {\r\n \/\/ Incrementa o \u00edndice da pergunta atual\r\n currentQuestionIndex++;\r\n \r\n \/\/ Verifica se acabaram as perguntas\r\n if (currentQuestionIndex >= 5) {\r\n showResults();\r\n } else {\r\n \/\/ Mostra a pr\u00f3xima pergunta\r\n showScreen(questionScreen);\r\n loadQuestion();\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para criar confete (para pontua\u00e7\u00e3o perfeita)\r\nfunction createConfetti() {\r\n const confettiContainer = document.body;\r\n for (let i = 0; i < 100; i++) {\r\n const confetti = document.createElement('div');\r\n confetti.className = 'confetti';\r\n confetti.style.left = Math.random() * 100 + 'vw';\r\n confetti.style.animationDelay = Math.random() * 5 + 's';\r\n confettiContainer.appendChild(confetti);\r\n \r\n \/\/ Remover ap\u00f3s a anima\u00e7\u00e3o\r\n setTimeout(() => {\r\n confetti.remove();\r\n }, 5000);\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para mostrar os resultados\r\nfunction showResults() {\r\n \/\/ Exibe a tela de resultados\r\n showScreen(resultsScreen);\r\n \r\n \/\/ Atualiza as informa\u00e7\u00f5es\r\n resultName.textContent = currentPlayer;\r\n correctCount.textContent = correctAnswers;\r\n scoreProgress.style.width = `${(correctAnswers \/ 5) * 100}%`;\r\n \r\n \/\/ Define a mensagem final com base na pontua\u00e7\u00e3o\r\n if (correctAnswers === 5) {\r\n finalMessage.innerHTML = \"\ud83c\udfc6 <span class='highlight'>Excelente!<\/span> Voc\u00ea entende perfeitamente o que faz um bom prompt!\";\r\n \/\/ Adiciona efeito de confete para 100% de acerto\r\n setTimeout(createConfetti, 500);\r\n } else if (correctAnswers >= 3) {\r\n finalMessage.innerHTML = \"\ud83d\udc4d <span class='highlight'>Bom trabalho!<\/span> Voc\u00ea tem um bom entendimento sobre prompts eficazes.\";\r\n } else {\r\n finalMessage.innerHTML = \"\ud83d\udcaa Continue praticando para melhorar sua habilidade em criar prompts eficazes.\";\r\n }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o auxiliar para mostrar apenas uma tela e ocultar as outras\r\nfunction showScreen(screenToShow) {\r\n startScreen.classList.add(\"hidden\");\r\n questionScreen.classList.add(\"hidden\");\r\n feedbackScreen.classList.add(\"hidden\");\r\n resultsScreen.classList.add(\"hidden\");\r\n \r\n screenToShow.classList.remove(\"hidden\");\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 de Prompts para IA Teste seus conhecimentos sobre prompts eficazes para Intelig\u00eancia Artificial! Avalie se os prompts s\u00e3o bons ou ruins para obter melhores resultados com IAs. Seu Nome: Iniciar Quiz Pergunta 1\/5 Avalie o prompt abaixo: Este prompt \u00e9: Bom Ruim Correto! Incorreto! Pr\u00f3xima Pergunta Resultado Final Parab\u00e9ns, Jogador! Voc\u00ea acertou 0 de […]<\/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\/1106"}],"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=1106"}],"version-history":[{"count":6,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1106\/revisions"}],"predecessor-version":[{"id":1128,"href":"https:\/\/aprendaprogramar.macae.ufrj.br\/index.php\/wp-json\/wp\/v2\/pages\/1106\/revisions\/1128"}],"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=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}