<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Chatbot de Biologia</title>
<style>
body{
font-family:Arial;
background:#eef2f7;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.chat{
width:420px;
background:white;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
overflow:hidden;
}
.header{
background:#2c7be5;
color:white;
padding:15px;
text-align:center;
font-weight:bold;
}
.box{
height:380px;
overflow-y:auto;
padding:15px;
background:#fafafa;
}
.bot{
background:#e4e6eb;
padding:10px;
border-radius:10px;
margin-bottom:10px;
max-width:80%;
}
.user{
background:#2c7be5;
color:white;
padding:10px;
border-radius:10px;
margin-left:auto;
margin-bottom:10px;
max-width:80%;
}
.options{
padding:10px;
border-top:1px solid #ddd;
}
.options button{
width:100%;
margin:5px 0;
padding:10px;
border:none;
border-radius:6px;
background:#2c7be5;
color:white;
cursor:pointer;
}
.options button:hover{
background:#1b5fc0;
}
</style>
</head>
<body>
<div class="chat">
<div class="header">
Assistente de Biologia
</div>
<div id="chat" class="box"></div>
<div id="options" class="options"></div>
</div>
<script>
const chat=document.getElementById("chat")
const options=document.getElementById("options")
function speak(text){
let msg=new SpeechSynthesisUtterance(text)
msg.lang="pt-BR"
speechSynthesis.speak(msg)
}
function bot(text){
let div=document.createElement("div")
div.className="bot"
div.innerText=text
chat.appendChild(div)
chat.scrollTop=chat.scrollHeight
speak(text)
}
function user(text){
let div=document.createElement("div")
div.className="user"
div.innerText=text
chat.appendChild(div)
chat.scrollTop=chat.scrollHeight
}
function buttons(list){
options.innerHTML=""
list.forEach(item=>{
let b=document.createElement("button")
b.innerText=item.text
b.onclick=item.action
options.appendChild(b)
})
}
function start(){
bot("Olá! Escolha uma opção.")
buttons([
{ text:"Assistente de dúvidas", action:menuBio },
{ text:"Modo Quiz", action:startQuiz }
])
}
function menuBio(){
bot("Escolha um tema")
buttons([
{ text:"DNA", action:()=>answer("DNA","DNA é formado por duas fitas em dupla hélice.") },
{ text:"RNA", action:()=>answer("RNA","RNA geralmente possui fita simples.") },
{ text:"Proteína", action:()=>answer("Proteína","Proteínas são cadeias de aminoácidos.") }
])
}
function answer(q,a){
user(q)
bot(a)
buttons([
{ text:"Voltar", action:start }
])
}
let quiz=[
{
q:"Qual molécula possui dupla hélice?",
a:["DNA","RNA","Proteína"],
c:0
},
{
q:"Qual molécula leva informação genética para produzir proteínas?",
a:["DNA","RNA","Lipídio"],
c:1
},
{
q:"Proteínas são formadas por:",
a:["Açúcares","Aminoácidos","Ácidos graxos"],
c:1
}
]
let index=0
let score=0
function startQuiz(){
index=0
score=0
bot("Vamos começar o quiz!")
nextQuestion()
}
function nextQuestion(){
if(index>=quiz.length){
bot("Quiz finalizado. Sua pontuação foi "+score+" de "+quiz.length)
buttons([
{ text:"Recomeçar", action:startQuiz },
{ text:"Menu", action:start }
])
return
}
let q=quiz[index]
bot(q.q)
buttons(
q.a.map((alt,i)=>({
text:alt,
action(){
user(alt)
if(i===q.c){
bot("Resposta correta!")
score++
}else{
bot("Resposta incorreta.")
}
index++
setTimeout(nextQuestion,1000)
}
}))
)
}
start()
</script>
</body>
</html>