Recuperação Av1

Questão 1

Durante a criação de uma página de receitas, um grupo de estudantes utilizou a seguinte estrutura HTML para exibir o conteúdo: 
 
```html 
<div> 
  <div>Receita de bolo</div> 
  <div>Ingredientes: farinha, ovos, açúcar</div> 
  <div>Modo de preparo: misture tudo e leve ao forno</div> 
</div> 
``` 
 
Ao observar a estrutura apresentada, qual mudança tornaria o código melhor estruturado, em termos de organização e significado do conteúdo? 

• A) Substituir os elementos “div” por “span”, tornando o carregamento do código mais leve no navegador. 

• B) Utilizar elementos semânticos como “section” e “h2”, indicando a função de cada parte da receita. 

• C) Inserir tags “strong” e “br” no texto, aprimorando a aparência visual do resultado no navegador. 

• D) Adicionar comentários “” em cada linha do HTML, explicando o conteúdo da receita. 

• E) Aplicar estilos nos elementos “div”, destacando-os para que pareçam seções diferentes na tela. 

Questão 2

Rodrigo está desenvolvendo um jogo da memória digital e criou o seguinte algoritmo para controlar os cartões: 
 
```js 
function viraCarta() { 
  cartaVirada = !cartaVirada; 
  carta.classList.toggle("visivel", cartaVirada); 
} 
 
carta.addEventListener("click", viraCarta); 
``` 
 
Com base no código acima, o que acontece quando a função viraCarta é executada após um clique na carta? 

• A) A carta é virada para cima, e a classe `"visivel"` é adicionada a cada clique na tela. 

• B) A carta muda seu estado para não virada, mas permanece com a classe `"visivel"` aplicada. 

• C) A função cria uma nova carta a cada clique, e adiciona a classe `"visivel"` para exibi-la na tela. 

• D) A carta muda seu estado entre virada e não virada, e a classe `"visivel"` é adicionada ou removida conforme esse estado. 

• E) A função evita que a carta seja clicada mais de uma vez, e a classe `"visivel"` é removida logo após o primeiro clique. 

Questão 3 

Um sistema de automação residencial pode ser configurado com diferentes modos de funcionamento, de acordo com o momento ou a situação da casa. Os modos programados são: 
 
 

Acordar 

Fim de tarde 

Dormir 

Ninguém em casa 

Festa 

 

 

Cada modo irá ativar ações específicas, que ajudam a casa a se adaptar automaticamente a cada situação. 
 
Pensando nisso, qual sequência representa um detalhamento para o modo Acordar? 

• A) Ativar luzes coloridas e aumentar o volume do som. 

• B) Diminuir o volume da música e desligar o roteador. 

• C) Fechar cortinas, apagar luzes internas e ligar o alarme. 

• D) Ligar cafeteira, abrir cortinas e desligar luzes externas. 

• E) Fechar todas as portas, desligar televisões e reduzir a iluminação. 

Questão 4 

Para um site de curiosidades sobre diferentes áreas do conhecimento, uma equipe de estudantes criou cartões informativos com perguntas e respostas. Como refinamento, decidiram colocar as informações em um arquivo separado do código que monta os cartões. 
 
 

Arquivo curiosidades.js 

 

 

```js 
criaCartao( 
  "Ciência", 
  "O que é fotossíntese?", 
  "É o processo em que plantas produzem energia a partir da luz do sol." 
); 
``` 
 
Com base nisso, qual é a vantagem de guardar as perguntas e respostas em um arquivo separado do código que monta os cartões? 

• A) Reduzir a complexidade de código e visual da aplicação. 

• B) Organizar os dados e separar responsabilidades no site. 

• C) Evitar que o conteúdo seja reutilizado em projetos de outras pessoas. 

• D) Facilitar a manutenção de estilos e atualização de conteúdo do projeto. 

• E) Garantir que o conteúdo seja carregado automaticamente ao iniciar o site. 

Questão 5

Um grupo de estudantes decidiu refinar seu projeto, criando cards interativos com JavaScript. Observe: 
 
```js 
function criaCartao(categoria, pergunta, resposta) { 
  let container = document.getElementById("container"); 
  let cartao = document.createElement("p"); 
  cartao.className = "cartao"; 
 
  cartao.innerHTML = ( 
    <div class="cartao__conteudo"> 
      <h3>${categoria}</h3> 
      <div class="cartao__conteudo__pergunta"> 
        <p>${pergunta}</p> 
      </div> 
      <div class="cartao__conteudo__resposta"> 
        <p>${resposta}</p> 
      </div> 
    </div> 
  ); 
 
  container.appendChild(cartao); 
} 
``` 
 
No entanto, após o refinamento, os cards apareceram incorretamente na tela do projeto.

 
 
 
A partir da análise desse código e do card que seria gerado por ele, qual alteração deve ser feita no código para que os elementos sejam criados corretamente? 

• A) Substituir o método innerHTML por querySelector, para acessar elementos diretamente. 

• B) Usar aspas duplas ("") no conteúdo HTML, para evitar erros de interpretação da string. 

• C) Trocar createElement("p") por createElement("article"), para criar um agrupamento de tags no HTML. 

• D) Adicionar style.display = "block" ao elemento cartao, para garantir o alinhamento correto dos elementos. 

• E) Remover o parâmetro categoria da função principal e do innerHTML, para simplificar a exibição dos cartões. 

Questão 6

Camila está criando um site para uma galeria virtual com obras de artistas independentes. Ela quer que as imagens fiquem bem distribuídas na tela e utilizou Flexbox para isso. 
 
```css 
.galeria { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  gap: 2rem; 
} 
``` 
 
O que aconteceria com a organização dos elementos da galeria se a propriedade “flex-wrap” fosse removida? 

• A) As imagens ficariam mais próximas, reduzindo o espaçamento entre elas. 

• B) Os elementos passariam a ser empilhados verticalmente, um abaixo do outro. 

• C) As imagens diminuiriam automaticamente para se ajustar ao tamanho da tela. 

• D) Os elementos ocupariam uma única linha, podendo sair da área visível da tela. 

• E) As imagens deixariam de ser exibidas, comprometendo o carregamento do layout da galeria. 

Questão 7

Rafaela está criando um site para um clube de astronomia. Para manter o estilo visual, ela usou a mesma paleta de cores em várias seções da página. Observe: 
 
```css 
.cabecalho { 
  background-color: #0d1b2a; 
  color: #e0e1dd; 
  border-bottom: 4px solid #e0e1dd; 
} 
 
.menu { 
  background-color: #1b263b; 
  color: #e0e1dd; 
} 
 
.rodape { 
  background-color: #0d1b2a; 
  color: #e0e1dd; 
  border-top: 2px solid #e0e1dd; 
} 
``` 
 
O que Rafaela deve fazer para tornar seu código mais organizado e facilitar a manutenção das cores em todo o site? 

• A) Substituir os valores hexadecimais por nomes como “blue” e “white”, facilitando a identificação das cores. 

• B) Agrupar as propriedades semelhantes em um único seletor CSS, melhorando a exibição das informações. 

• C) Aplicar classes com nomes genéricos para os elementos principais, tornando o estilo mais dinâmico. 

• D) Definir as cores dinamicamente via DOM no JavaScript, evitando repetições de estilo no CSS. 

• E) Criar uma cartela de variáveis CSS, representando as cores utilizadas com frequência. 

Questão 8

Durante a criação de um painel de informações para uma viagem escolar, os estudantes construíram cartões informativos que exibem o destino, a data e o responsável por cada saída. Para refinar o código inicial, utilizaram a interpolação de variáveis com “${}”. 
 
Observe: 
 
```js 
function criarCartaoViagem(destino, data, responsavel) { 
  const cartao = document.createElement("div"); 
 
 
  cartao.innerHTML = ` 
    <div class="viagem__info"> 
      <h4>${destino}</h4> 
      <p>Data: ${data}</p> 
      <p>Responsável: ${responsavel}</p> 
    </div> 
  `; 
 
  return cartao; 
} 
``` 
 
Com base no código desenvolvido, qual é o papel da interpolação de variáveis “${}” no refinamento do algoritmo? 

• A) Substituir variáveis em texto por ícones visuais, aprimorando a visualização na tela principal do projeto. 

• B) Alternar a aparência de classes CSS nos elementos do painel, definindo quais devem ou não aparecer na tela. 

• C) Facilitar a criação de textos dinâmicos, incorporando variáveis diretamente dentro de uma estrutura de HTML. 

• D) Ocultar os dados sensíveis antes de enviá-los ao navegador, analisando caso a caso com uma estrutura condicional. 

• E) Formatar as datas automaticamente no padrão internacional, permitindo a visualização em diversos dispositivos. 

Questão 9 

Um grupo de estudantes está montando um catálogo online de livros e, para otimizar o processo de criação dos cartões, desenvolveu o seguinte código: 
 
```js 
function criarCartaoLivro(titulo) { 
  const cartao = document.createElement("div"); 
  cartao.className = "livro"; 
 
  const tituloElemento = document.createElement("h3"); 
  tituloElemento.textContent = titulo; 
  cartao.appendChild(tituloElemento); 
 
  return cartao; 
} 
``` 
 
Com base no código, de que forma o método “createElement” melhora a construção do catálogo de livros? 

• A) Facilita a criação de novos livros na página, evitando a edição constante no código HTML. 

• B) Armazena os elementos de forma automática, garantindo que fiquem guardados em um servidor. 

• C) Retorna o resultado da função no projeto, executando o comando criado na tela principal. 

• D) Salva os livros em um arquivo externo, permitindo que sejam acessados futuramente pelo navegador. 

• E) Verifica uma condição de parada, evitando que usuários vejam o conteúdo antes dos dados serem validados. 

Questão 10

Durante a criação de um álbum de fotos interativo, os alunos perceberam que estavam repetindo o mesmo código várias vezes para ampliar ou recolher imagens. Para deixar o código mais simples e organizado, criaram uma função reutilizável que controla a visibilidade da imagem usando uma classe de estilo. 
 
Veja o trecho do código: 
 
```js 
function alternaFoto() { 
  imagemEstaVisivel = !imagemEstaVisivel; 
  miniatura.classList.toggle("ampliada", imagemEstaVisivel); 
} 
miniatura.addEventListener("click", alternaFoto); 
``` 
 
Com base no código apresentado, qual é o papel do método “toggle” dentro da função? 

• A) Criar uma lista com todas as imagens, facilitando o controle e manuseio no código. 

• B) Organizar o código, unificando o comportamento de várias imagens em uma única função. 

• C) Ativar uma repetição automática da ação de clique, baseando-se em intervalos de tempo. 

• D) Verificar se o valor de uma variável é negativo, utilizando um operador lógico de negação. 

• E) Controlar a adição e remoção de classes, definindo um estilo aplicado ao elemento de imagem.