<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Chatbot de Biologia com Voz</title>
<style>
body{
font-family: Arial;
background:#f2f2f2;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.chat-container{
width:420px;
background:white;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
overflow:hidden;
}
.chat-header{
background:#2c7be5;
color:white;
padding:15px;
text-align:center;
font-weight:bold;
}
.chat-box{
height:380px;
padding:15px;
overflow-y:auto;
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-bottom:10px;
max-width:80%;
margin-left:auto;
}
.options{
padding:10px;
border-top:1px solid #ddd;
}
.options button{
width:100%;
margin:5px 0;
padding:10px;
border:none;
border-radius:5px;
background:#2c7be5;
color:white;
cursor:pointer;
}
.options button:hover{
background:#1a5dcc;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
Assistente de Biologia
</div>
<div id="chat" class="chat-box"></div>
<div id="options" class="options"></div>
</div>
<script>
const chat = document.getElementById("chat")
const options = document.getElementById("options")
function speak(text){
const speech = new SpeechSynthesisUtterance(text)
speech.lang="pt-BR"
speech.rate=1
speech.pitch=1
const voices = speechSynthesis.getVoices()
for(let voice of voices){
if(voice.lang==="pt-BR"){
speech.voice=voice
}
}
speechSynthesis.speak(speech)
}
function botMessage(text){
const div = document.createElement("div")
div.className="bot"
div.innerText=text
chat.appendChild(div)
chat.scrollTop=chat.scrollHeight
speak(text)
}
function userMessage(text){
const div = document.createElement("div")
div.className="user"
div.innerText=text
chat.appendChild(div)
chat.scrollTop=chat.scrollHeight
}
function showOptions(list){
options.innerHTML=""
list.forEach(op=>{
const btn=document.createElement("button")
btn.innerText=op.text
btn.onclick=()=>op.action()
options.appendChild(btn)
})
}
function start(){
botMessage("Olá, em que posso ajudar? Marque a opção da sua dúvida.")
showOptions([
{ text:"1) DNA", action:dnaMenu },
{ text:"2) RNA", action:rnaMenu },
{ text:"3) Proteína", action:proteinaMenu }
])
}
function dnaMenu(){
userMessage("DNA")
botMessage("Escolha uma opção sobre DNA.")
showOptions([
{
text:"1.1) O que é o DNA?",
action(){
userMessage("O que é o DNA")
botMessage("É formado por duas longas fitas helicoidais entrelaçadas formando uma dupla hélice.")
restart()
}
},
{
text:"1.2) Qual a função do DNA?",
action(){
userMessage("Função do DNA")
botMessage("Fornece as instruções chamadas genes para a produção de proteínas que são fundamentais para a estrutura e funcionamento das células.")
restart()
}
}
])
}
function rnaMenu(){
userMessage("RNA")
botMessage("Escolha uma opção sobre RNA.")
showOptions([
{
text:"2.1) O que é o RNA?",
action(){
userMessage("O que é o RNA")
botMessage("Geralmente é uma fita única o que o torna mais versátil e menos estável que o DNA.")
restart()
}
},
{
text:"2.2) Qual a função do RNA?",
action(){
userMessage("Função do RNA")
botMessage("Atua como intermediário copiando as instruções genéticas do DNA e levando essas informações para o citoplasma para produzir proteínas.")
restart()
}
}
])
}
function proteinaMenu(){
userMessage("Proteína")
botMessage("Escolha uma opção sobre proteínas.")
showOptions([
{
text:"3.1) O que é proteína?",
action(){
userMessage("O que é proteína")
botMessage("Proteínas são macromoléculas formadas por longas cadeias de aminoácidos ligadas por ligações peptídicas e são essenciais para a estrutura e funcionamento do organismo.")
restart()
}
},
{
text:"3.2) Qual a função da proteína?",
action(){
userMessage("Função da proteína")
botMessage("Função estrutural construção e reparação de tecidos como músculos pele e ossos.")
botMessage("Ação enzimática catalisam reações químicas do metabolismo.")
botMessage("Defesa imunológica produção de anticorpos que protegem o corpo.")
restart()
}
}
])
}
function restart(){
showOptions([
{
text:"Voltar ao menu principal",
action:start
}
])
}
start()
</script>
</body>
</html>