WorksheetsPENSAMENTO COMPUTACIONAL
Total questions: 10
Worksheet time: 5mins
Name
Class
Date
1.
Em uma competição de empreendedorismo escolar, os participantes criaram um aplicativo educacional com diferentes funcionalidades. Para organizar o desenvolvimento da interface, usaram um fluxograma com telas de boas-vindas, cadastro, acesso a conteúdo, avaliação de progresso e suporte.
Nesse contexto, como o uso do fluxograma contribuiu para melhorar a apresentação do conteúdo digital no projeto?
a)
A) Impediu que o grupo alterasse decisões durante o desenvolvimento do projeto.
b)
B) Facilitou a definição da linguagem de programação mais adequada para o projeto.
c)
C) Auxiliou no design gráfico do aplicativo, definindo cores e ilustrações para cada tela.
d)
D) Organizou a estrutura das telas, favorecendo a clareza na navegação pelo conteúdo.
e)
E) Tornou o aplicativo mais leve, reduzindo o tempo de carregamento de cada funcionalidade.
2.
Júlia criou um site com HTML e CSS para apresentar seus trabalhos de design. No arquivo index.html, ela incluiu um link para o arquivo style.css e outro para uma fonte personalizada do Google Fonts. Ela escolheu a fonte Bai Jamjuree para manter um design consistente e moderno.
Como a fonte Bai Jamjuree contribui para a exibição do conteúdo no site de Júlia?
a)
A) A aplicação de fontes externas impede que o site seja acessado offline, exigindo conexão com a internet.
b)
B) A fonte acelera o tempo de carregamento do site, tornando-o mais eficiente.
c)
C) A escolha da fonte permite ocultar o conteúdo textual do site, protegendo dados sensíveis.
d)
D) A fonte modifica a estrutura HTML da página, facilitando sua indexação nos buscadores.
e)
E) A escolha da fonte valoriza a apresentação do conteúdo, reforçando a identidade visual.
3.
Em uma empresa de tecnologia, uma equipe está desenvolvendo um assistente virtual para atendimento ao cliente. Cada etapa da conversa é representada por uma div, com textos e botões para direcionar o passo a seguir. O sistema utiliza JavaScript para alterar o conteúdo exibido com base na interação do usuário. Sempre que o botão de resposta é clicado, a etapa atual perde a classe "ativo" e a nova etapa recebe essa classe, sendo exibida na tela.
A estrutura desenvolvida pela equipe permite comunicar o fluxo de forma eficiente porque
a)
C) atualiza dinamicamente o conteúdo exibido, guiando o usuário entre as
b)
A) transforma as mensagens do assistente em arquivos visuais, evitando a interação com o texto.
c)
B) mostra todas as etapas simultaneamente, permitindo que o cliente visualize todas as respostas.
d)
etapas da conversa.
e)
D) utiliza o acesso com comandos de voz, respondendo aos clientes de forma automatizada.
4.
Uma startup de educação digital desenvolveu uma plataforma interativa em que o conteúdo é apresentado por meio de blocos visuais organizados em etapas. Para tornar a navegação mais fluida, a equipe de desenvolvimento integrou elementos HTML e JavaScript, permitindo que, ao clicar em um botão, a plataforma exiba automaticamente a próxima etapa do conteúdo.
A seguir, temos um trecho simplificado do código utilizado na navegação entre etapas:
a)
A) do atributo src que carrega uma imagem.
b)
B) da classe btn-proximo que estiliza o botão.
c)
C) do atributo data-proximo que vincula o botão ao próximo passo.
d)
D) do método querySelectorAll() que remove elementos da página.
e)
E) da função forEach() que duplica os blocos de conteúdo.
5.
Durante uma feira de profissões, estudantes do Ensino Médio desenvolveram um site interativo para apresentar diferentes carreiras. Na primeira tela, há uma introdução geral e botões para explorar áreas específicas, como "Tecnologia" ou "Saúde". Cada botão, ao ser clicado, deve ocultar a introdução e exibir o conteúdo relacionado à área escolhida, criando uma transição suave entre os blocos de informação.
A equipe utilizou a seguinte estrutura de código para controlar a exibição dos conteúdos:
a)
A) document.getElementById().innerHTML = "" e document.body.style.display = "none" para esconder os elementos manualmente.
b)
B) button.classList.add("novo-botão") e document.querySelectorAll('.btn-proximo'); para modificar a aparência e substituir o conteúdo.
c)
C) classList.remove('ativo') e classList.add('ativo') no próximo passo para alternar a visibilidade entre as seções.
d)
D) document.querySelectorAll('.passo') para aplicar um estilo direto a todos os blocos.
e)
E) alert("Avançando de etapa") para adicionar elementos dinamicamente.
6.
Estudantes criaram um portfólio digital com etapas do desenvolvimento de um projeto. Cada etapa (ideia, planejamento, protótipo e apresentação final) é exibida em uma tela separada, controlada por botões de navegação. Para que somente uma etapa apareça por vez, foi utilizado o seguinte código CSS:
a)
A) alterar a cor de fundo das divs.
b)
B) criar animações entre os passos.
c)
C) redimensionar automaticamente as imagens.
d)
D) transformar texto em áudio automaticamente.
e)
E) controlar quais etapas da narrativa são exibidas ao usuário.
7.
Uma equipe de estudantes do 3º ano está desenvolvendo uma plataforma digital com conteúdo interativo para ajudar colegas a se prepararem para o vestibular. A proposta é apresentar resumos de conteúdos por meio de narrativas visuais, combinando texto e imagens.
Na tela inicial do projeto, foi incluída uma imagem representando uma paisagem fictícia com símbolos que remetem a desafios e descobertas, usada para ambientar o estudante e despertar curiosidade. O trecho de código HTML abaixo mostra como a imagem foi adicionada:
a)
A) substituir o texto da narrativa por conteúdo visual.
b)
B) melhorar a experiência ao contextualizar a história.
c)
C) armazenar dados do usuário localmente.
d)
D) reduzir o tempo de carregamento da página.
e)
E) validar se o JavaScript está funcionando.
8.
Maria desenvolveu um site para organizar despesas pessoais usando registros mensais com tabelas, gráficos e imagens ilustrativas. Para tornar o visual mais atrativo, ela incluiu ícones personalizados (como compras.png, transporte.png e alimentação.png) nos blocos de conteúdo. Durante o processo, receberam a orientação de evitar nomes com espaços ou acentos nos arquivos das imagens.
A recomendação para evitar espaços e acentos nos nomes de arquivos de imagem está relacionada:
a)
A) às limitações do VSCode na edição de textos.
b)
B) às restrições de direitos autorais das imagens.
c)
C) à redução de erros em navegadores web.
d)
D) à exigência do método querySelectorAll().
e)
E) à necessidade de compressão das imagens.
9.
Janaina está participando de uma oficina sobre criação de portfólios digitais. Em uma das páginas, ela tentou exibir uma imagem representando seu país natal. Porém, ao visualizar a página no navegador, percebeu que a imagem não carregava corretamente. A seguir temos o trecho do código usado por ela:
a)
A) JavaScript não suporta imagens PNG.
b)
B) CSS bloqueou a exibição da imagem.
c)
C) arquivo de imagem estava corrompido.
d)
D) GitHub não aceita imagens com números no nome.
e)
E) atributo src no HTML não correspondia ao nome do arquivo.
10.
Cesar criou um site para apresentar textos e vídeos produzidos por sua escola durante a Olimpíada de Língua Portuguesa. Após organizar os arquivos com HTML, CSS e JavaScript, ele utilizou o recurso GitHub Pages para disponibilizar o conteúdo online. O processo foi realizado da seguinte forma:
* acessar o repositório do projeto;
* clicar na aba Pages;
* na seção Branch, selecionar a opção Main e depois clicar em Save.
A configuração do GitHub Pages permite que o projeto seja acessível publicamente porque
a)
A) converte o site em um aplicativo compatível com smartphones.
b)
B) hospeda os arquivos em um servidor web com link de acesso.
c)
C) conecta automaticamente o site às redes sociais da escola.
d)
D) compacta automaticamente os vídeos e textos da página.
e)
E) remove a necessidade de usar HTML e CSS.
100 %
