Como criar perguntas com respostas exatas e não aleatórias? | Lógica de programação

como fazer com que a pergunta "Como excluir figurinhas do WhatsApp?" tenha a resposta "Segure com o dedo na figurinha do WhatsApp e depois clique em remover"

segue o código javascript

const elementoResposta = document.querySelector('#resposta')
const inputPergunta = document.querySelector('#inputPergunta')

var respostas = [

  'Segure com o dedo na figurinha do WhatsApp e depois clique em remover',
  'Clique na Play Store, depois digite na parte superior o nome do Aplicativo que você quer baixar',

]

function fazerPergunta() {

  if(inputPergunta.value == 'Como excluir figurinhas do WhatsApp?' ) {
    var respostas = [0]
    return
  }

  const totalRespostas = respostas.length
  const numeroAleatorio = Math.floor(Math.random() * totalRespostas)

  elementoResposta.innerHTML = respostas[numeroAleatorio]
  setTimeout(function() {
    elementoResposta.style.opacity = 0
  }, 5000)
}

Oi, Rodrigo! Tudo certo?

Perdão pela demora em te dar um retorno.

Primeiramente, vamos aos códigos!

O HTML ficaria desta forma:

<input type='text' placeholder='Digite a pergunta:' id="inputPergunta" onchange='fazerPergunta()'/>

<p id="resposta"> </p>

E o JavaScript, assim:

const elementoResposta = document.querySelector('#resposta')
const inputPergunta = document.querySelector('#inputPergunta')

var respostas = ["Segure com o dedo na figurinha do WhatsApp e depois clique em remover", "Clique na Play Store, depois digite na parte superior o nome do Aplicativo que você quer baixar"]

function fazerPergunta() {
  if(inputPergunta.value == 'Como excluir figurinhas do WhatsApp?' ) {
    elementoResposta.innerHTML = respostas[0]
  }
}

Com o innerHTML nós conseguimos devolver o elementoResposta do array. Já o onchange fará uma ação após determinada mudança.

Fora isso, criamos um elemento "p" de parágrafo que está vazio a princípio e possui um "id" de identificação, mas que assim que a função fazerPergunta() for disparada, ele será preenchido. Juntos, eles ficam como mostrado acima no bloco de código do HTML: <p id="resposta"> </p>.

E, prontinho! Ao escrever a pergunta de exemplo, nosso programa retornará a resposta que queríamos.

Além disso, vou deixar como sugestão os seguintes cursos para se aprofundar em HTML e manipulação na DOM (Document Object Model, do inglês, Modelo de Documento por Objetos. Temos um artigo da Alura sobre o assunto!):

E vou deixar também uma formação de JavaScript para Front-End: JavaScript para Front-end

Caso as dúvidas persistirem, estamos à disposição. :)

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.

Chegou a hora de transformar