WorksheetsPensamento Computacional
Total questions: 30
Worksheet time: 31mins
Nesta aula, criamos uma lista de filmes para ser usada em um programa
que recomenda filmes para as pessoas. O ponto-chave dessa lista foi incluir
a categoria e classificação indicativa dos filmes. Pensando nisso, escolha a
alternativa correta:
Adicionar informações específicas nos filmes permite que o programa
recomende os filmes mais populares para as pessoas.
Adicionar informações específicas nos filmes não é essencial. É possível
recomendar bons filmes com informações mais gerais.
Adicionar informações específicas nos filmes garante que eles sejam
recomendados apropriadamente para a faixa etária e os interesses das
pessoas que vão utilizar o recomendador.
Agora, vamos refrescar a memória com alguns pontos importantes que precisam ser considerados no projeto:
• Explorar diferentes categorias e faixas etárias de filmes pode enriquecer ainda mais o projeto;
• Uma forma de incluir características sobre os filmes é utilizando palavras-chave;
• Na recomendação, a categoria do filme é levada mais em conta do que a faixa etária;
• O usuário pode gostar de mais de uma categoria, mas os filmes não podem se encaixar em mais de uma delas. Agora, analise cada uma das afirmações e ordene todos os blocos, identificando
quais são verdadeiras e quais são falsas.
Escreva a sequência correta de blocos a seguir:
verdadeira
verdadeira
falsa
falsa
No arquivo JavaScript, usamos (a) para listar os filmes em forma de
comentário. Em seguida, buscamos informações mais específicas relacionadas
aos filmes. Essas informações foram obtidas pela plataforma (b) .
Em ordem de prioridade, duas características serão consideradas na
recomendação: (c) e . (d)
Nesta aula, desenhamos um fluxograma levando em conta a faixa etária e a categoria dos filmes da nossa lista. A partir disso, conseguimos compreender um pouco sobre o que é um fluxograma na prática. Escolha a alternativa correta:
Um fluxograma mostra de forma visual e organizada um fluxo de pensamento, mas tem como desvantagem ser difícil de entender em relação a outros métodos de explicação.
Um fluxograma representa de forma visual um fluxo de pensamento, e para criá-lo é necessário utilizarmos uma ferramenta digital.
Um fluxograma mostra as etapas essenciais de um fluxo de pensamento, sem precisar considerar uma sequência lógica.
Um fluxograma é uma representação visual de um fluxo de pensamento, mostrando suas etapas em uma sequência lógica e usando símbolos específicos para isso, como formas geométricas e setas.
Observe o fluxograma a seguir, que tem como objetivo representar o processo de aprovação/recuperação de um estudante com base na nota da prova.
Para que o estudante saia de férias, é necessário que a nota final seja maior que 7. Do contrário, ele deverá fazer a prova de recuperação.
Agora, observe os campos numerados e identifique quais dos blocos abaixo
devem ser inseridos no fluxograma para completar o processo.
Para isso, ordene todos os blocos abaixo.
Escreva a sequência correta de blocos nas linhas a seguir:
férias | a nota foi maior que 7?| recuperação
férias
recuperação
a nota foi maior que 7?
Analise o fluxograma a seguir que representa o processo de recebimento de
uma compra via aplicativo.
Quando pedimos algo, ficamos ansiosos pela entrega, mas é necessário
esperar. Quando a pessoa entregadora chega, é comum termos que informar
um código para que a pessoa libere o pedido. Às vezes, erramos esse código e o
pedido só pode ser liberado após o código correto ser informado.
Dito isto, ordene todos os blocos abaixo para completar os campos do
fluxograma.
Escreva a sequência correta de blocos nas linhas a seguir:
aguardar
informar o código
pedido chegou?
retira o pedido
Conhecendo a lógica das funções
Nesta aula, além de manipularmos as funções draw() e setup(), criamos uma
nova função chamada geraRecomendacao().
Agora responda: Porque foi necessário criar uma nova função ao invés de
utilizarmos as que já existiam no editor?
Escolha uma alternativa correta:
As funções draw() e setup() são reservadas para a lógica de manipulação
de elementos gráficos e configurações de tela, não para a lógica de gerar
recomendações de filmes.
As funções draw() e setup() não têm a capacidade de processar e gerar a
lógica de recomendações de filmes com base em critérios específicos, como
idade e preferências.
Na verdade, utilizar as funções draw() e setup() seria uma abordagem
eficiente, pois já são usadas para manipulação de elementos gráficos,
podendo ser adaptadas para gerar recomendações de filmes.
A criação de uma nova função específica para gerar recomendações evita
a mistura da lógica de manipulação de elementos gráficos com a de
recomendações de filmes, garantindo um código mais organizado e fácil de
manter.
Relacionando conceitos fundamentais de
programação Observe os conceitos abaixo:
• Função usada para criar um campo onde se pode inserir dados, como
texto ou números. Esses dados servem para realizar diversas operações
dentro do código;
• Um método usado para pegar o valor inserido em um campo de entrada,
como um campo de texto, e usá-lo em diversas operações;
• São usadas para tomar decisões com base em certas condições,
permitindo que o programa tome diferentes caminhos de acordo com
elas;
• Possuem nomes específicos e são usadas para armazenar e manipular
dados com diferentes tipos de informações, como números, textos ou
valores tipo verdadeiro ou falso.
Abaixo, temos quatro identificações que representam cada um desses
conceitos. Ordene todos os blocos para relacionar cada identificação ao
conceito correspondente.
Escreva a sequência correta de blocos nas linhas a seguir:
createInput()
.value()
If() else()
variáveis
Descobrindo a sorte dentro da função
Você criou uma função que verifica se o número sorteado por uma pessoa é o
número da sorte com base em alguns valores predefinidos. Para que a função
seja executada, será preciso adicionar alguns códigos dentro dela.
Agora, ordene todos os blocos abaixo para completar as lacunas do código e
executar corretamente a função verificarNumeroDaSorte.
Escreva a sequência correta de blocos nas linhas a seguir:
numero
if
return
else
Adicionando métodos de entrada e verificação
Você precisa adicionar dois métodos à página de inscrição de um site:
• Um método para ler o que é digitado em um campo de texto.
• Outro método para verificar se uma caixa de seleção está marcada ou não.
Agora, escolha a alternativa correta que representa os métodos a serem
adicionados no código da página.
.getText() e .isChecked().
.value() e .checked().
.setValue() e .checked().
.value() e .isChecked().
Avaliando notas com if e else
Um programa foi desenvolvido para exibir uma mensagem de aprovação ou
reprovação com base na nota do aluno.
Agora, analise os blocos abaixo e crie o algoritmo responsável por reproduzir o
programa de notas. Para isso, ordene todos os blocos.
‘Você foi aprovado!’) if(nota < 7){
return (background(‘red’), ‘Você não foi aprovado!’)
} else { return (background(‘lightgreen’),
Reordenar o seguinte a sequência correta de blocos nas linhas a seguir:
if(nota < 7){
return (background(‘red’), ‘Você não foi aprovado!’)
} else {
return (back-
ground(‘lightgreen’)
’Você foi aprovado!’) ;
Identificando as condições no jogo
A função abaixo avalia o desempenho de um jogador com base na sua
pontuação e em seu nível de habilidade. Para que a função seja executada, será
necessário adicionar alguns trechos de código nas lacunas.
Identifique onde precisam ser adicionados os trechos abaixo, ordenando todos
os blocos.
>= 100 | nivel | (nivel === ‘intermediario’) |
“Você está progredindo, mas precisa melhorar sua pontuação.”
Reordene a seguinte sequência correta de blocos nas linhas a seguir:
nivel | (nivel === ‘intermediario’)
>= 100
“Você está progredindo, mas precisa melhorar
sua pontuação.”
Explorando métodos de estilização
As afirmações abaixo descrevem alguns métodos de estilização do JavaScript.
Analise as afirmações com atenção e escolha a alternativa correta que contém
os métodos que realizam as seguintes estilizações, respectivamente:
• Define a cor de preenchimento de formas, texto e outros elementos
gráficos;
• Ajusta o tamanho das letras para torná-las maiores ou menores;
• Alinha o texto horizontalmente e/ou verticalmente em relação a uma área;
• Cria cores com diferentes tons de vermelho, verde e azul.
fill(), textSize(), textAlign() e color().
color(), textSize(), textAlign() e fill().
fillStyle(), fontSize(), textAlign() e color().
color(), fontSize(), textStyle() e rgb().
Estilizando uma área de desenho
Queremos criar uma área de desenho com as seguintes propriedades:
• Cor de fundo da área de desenho: azul
• Tamanho da fonte do texto: 31
• Alinhamento do texto: centralizado
Agora é com você! Ordene todos os blocos que representam a aplicação
dessas propriedades. textSize(31) | background(“blue”) |
textAlign(CENTER, CENTER)
Reordenar o seguinte sequência correta de blocos nas linhas a seguir:
background(“blue”)
textSize(31)
textAlign(CENTER, CENTER)
Identificando propriedades visuais
Na imagem abaixo, estão especificadas as propriedades que representam
a cor de fundo, a cor do texto e o texto que indica o conteúdo do campo de
preenchimento. Agora precisamos montar o código que programa, na ordem do enunciado, os
elementos destacados na imagem acima. Para isso, ordene todos os blocos.
fill( | background(“#8A71C9”) | createSpan( | “Nome:”) | color(153, 255, 255))
Reordenar o seguinte sequência correta de blocos nas linhas a seguir:
background(“#8A71C9”)
fill(
color(153, 255, 255))
createSpan(
“Nome:”)
Identificando as propriedades CSS
Observe o código ao lado.
O que esse código está gerando? Identifique as principais funcionalidades desse trecho de código e escolha a alternativa correta.
O código está definindo margens de 0 pixel para todos os elementos HTML e
aplicando a cor azul-claro no fundo da página.
A propriedade margin está controlando as margens, determinando um
espaço de 20 pixels entre os elementos da página.
Nesse trecho de código, a propriedade background-color está criando um
desenho na tela.
Desafiando seu conhecimento
Na aula, nós aprendemos:
• Como adicionar um título na página do recomendador de filmes;
• Os diferentes níveis de títulos que podemos escolher de acordo com sua
importância;
• A identificar um arquivo de estilização;
• Sobre o sistema de cores primárias, ou seja, vermelho, verde e azul.
Agora é com você! Ordene todos os blocos abaixo que estão relacionados com
cada tópico acima, respectivamente.
h1 – h6 | rgb | createElement() | style.css
Reordenar a seguinte sequência correta de blocos nas linhas a seguir:
createElement()
h1 – h6
style.css
rgb
Adicionando fundo verde e espaçamentos
Construa a seguinte estilização:
Crie uma propriedade para colocar a cor de fundo verde em uma página;
Aumente o espaço entre elementos da página em 10 pixels.
Para isso, ordene todos os blocos abaixo seguindo a ordem dos tópicos acima.
margin: | background-color: | rgb(0, 255, 0); | 10px;
Reordenar a seguinte sequência correta de blocos nas linhas a seguir:
background-color:
rgb(0, 255, 0);
margin:
10px;
Lidando com operador lógico
Em JavaScript utilizamos o símbolo || para verificar se pelo menos uma das
condições é verdadeira em uma expressão, como podemos observar no código
ao lado.
Analise o código e escolha a alternativa que interpreta corretamente o comando dele:
Retorna “Você pode dirigir!” apenas se a idade for maior ou igual a 18
anos e possuir permissão.
Retorna “Você pode dirigir!” apenas se a idade for maior ou igual a 18
anos, independente de possuir permissão.
Retorna “Você não pode dirigir”. apenas se a idade for menor que 18
anos, mesmo se possuir permissão.
Retorna “Você pode dirigir!” se a idade for maior ou igual a 18 anos ou
se possuir permissão.
Verificando o acesso de um usuário
A função abaixo verifica o tipo de acesso de uma plataforma escolar, onde
estudantes e professores conseguem acessar suas contas. Para que a função
funcione, será necessário adicionar alguns trechos de código dentro dela.
Identifique onde precisam ser adicionados os trechos abaixo e ordene todos os
blocos, na mesma sequência em que devem aparecer no código.
else | return | if | ||
Reordenar a seguinte sequência correta de blocos nas linhas a seguir:
if
||
else
return
Aplicando fluxograma em um código, análise o fluxograma ao lado, que mostra um recomendador de receitas culinárias.
Agora, responda à seguinte questão: como podemos aplicar esse fluxograma em um código?
Escolha a afirmação que responde corretamente.
Para colocar em código, a função não precisa de condicionais, pois
o fluxograma segue uma sequência linear sobre o processo de fazer
brigadeiro.
Para colocar em código, deve ser criada apenas uma checkbox, que
servirá para obter a informação de se a pessoa quer ou não uma receita de
brigadeiro.
Para colocar em código, existem três variáveis passadas como parâmetro
na função para armazenar as informações: receita de doce, receita de
brigadeiro e encerrar a recomendação.
Para colocar em código, devemos seguir a sequência
das afirmações verdadeiras, da receita de doce até o
passo a passo sobre como fazer o brigadeiro, para aplicar
condicionais dentro de condicionais.
Arquivo index.html
Durante a aula, você criou um arquivo chamado index.html para iniciar a
construção do conteúdo da sua página. Sobre as tags que foram utilizadas, é
correto afirmar:
A tag <p> é utilizada para criar títulos.
A tag <header> define o conteúdo da página.
A tag <h1> é utilizada para criar textos menores.
A tag <body> define o conteúdo da página.
Tags de texto
Observe a estrutura da seguinte página ao lado. Cada um dos textos foi escrito utilizando uma tag HTML. Ordene todos os blocos que representam, na hierarquia correta, as tags utilizadas.
<h1></h1> | <p></p> | <header></header> | <p></p>
Reordenar a seguinte sequência correta de números nas linhas a seguir:
<header></header>
<h1></h1>
<p></p>
<p></p>;
Organizando o material da escola
José está criando uma página para organizar o conteúdo que ele precisa estudar para as disciplinas da escola. Até o momento, a página está assim, conforme mostra a imagem ao lado. Ordene todos os blocos e ajude José a continuar desenvolvendo a página ao
fazer o mesmo processo para as disciplinas de Biologia.
</p> | <h1>Biologia | </h1> | <p>3o trimestre
Reordene a seguinte sequência correta de blocos nas linhas a seguir:
<h1>Biologia
</h1>
<p>3º trimestre
</p>
Mais tags HTML
Durante a aula, você aprendeu a funcionalidade de mais algumas tags importantes na estrutura de uma página. Sobre tags, é correto afirmar:
Usamos a tag <title> para criar o título da página que é exibido na aba
no navegador.
Por ser uma tag de organização, a tag <div> não precisa de fechamento, ou
seja, de </>.
Assim como no arquivo HTML, ao utilizarmos uma tag no arquivo CSS,
usamos os caracteres <>.
A tag <title> é responsável por definir o idioma do conteúdo da página.
Página de esportes
Helena está criando uma página de esportes e, para mantê-la organizada,
criou uma grande seção para todos os esportes. Dentro dessa seção, ela criou a
primeira categoria: esportes com bola. Ordene todos os blocos que programam corretamente a página descrita.
<div>esportes com bola | </section> | <section> | </div>
Reordenar a seguinte sequência correta de blocos nas linhas a seguir:
<section>
<div>esportes com bola
</div
</section>
Espaçamentos
Durante a aula, aprendemos sobre dois tipos de espaçamento: o padding
e margin. Agora, colocaremos esses conhecimentos em prática! Vamos desenvolver o seguinte código:
• Um título com um espaçamento interno de 2 pixels igualmente para todos os lados;
• O mesmo título com um espaçamento externo superior de 5 pixels.
Qual dos códigos abaixo representa corretamente essas modificações?
h1 {
font-size: 40px;
padding-right: 2px;
margin: 5px;
}
h1 {
font-size: 40px;
padding: 2px;
margin-left: 5px;
}
h1 {
font-size: 40px;
padding-bottom: 2px;
margin: 5px;
}
h1 {
font-size: 40px;
padding: 2px;
margin-top: 5px;
}
Classes no CSS
Durante a aula, você aprendeu a utilizar classes para personalizar elementos da
página HTML. Sobre as características de uma classe, é correto afirmar:
Uma classe tem como função personalizar apenas um elemento da página,
como o título.
Para inserir uma classe no arquivo CSS, utilizamos o seletor . (ponto) antes
de seu nome.
Para criar uma classe no arquivo HTML, utilizamos a palavra classe.
Ao criar uma classe no CSS, o arquivo index.html inclui automaticamente
essa classe na página.
Alterando fontes
Caio desenvolveu o seguinte código:
<body>
<h1>Meu projeto escolar</h1>
<p>Tema: programação</p>
</body>
Ele importou a fonte Roboto e quer que ela seja aplicada em todos os elementos.
Qual comando abaixo é responsável por executar essa ação?
h1 { font-family: “Roboto”, sans-serif; }
head { font-family: “Roboto”, sans-serif; }
p { font-family: “Roboto”, sans-serif; }
body { font-family: “Roboto”, sans-serif; }
Ajustando o layout
Agora que já sabemos como incluir imagens clicáveis, ajustaremos o layout
para que elas fiquem dispostas horizontalmente e tenham um espaçamento
entre si. A partir do código abaixo, qual é a maneira correta de organizar o
layout usando um display flexível?
<section class=”categoria”>
<h2>Filmes e séries</h2>
<div class=”categoria-videos”>
</div>
</section>
Selecione uma alternativa.
.categoria-videos {
display: flex;
overflow-x: auto;
gap: 10px;
}
.categoria-videos {
display: grid;
grid-gap: 10px;
}
.categoria-videos {
display: inline;
margin: 10px;
}
.categoria-videos {
display: block;
padding: 10px;
}
