Referencial de Atividades
Todas as atividades
Quiz e Avaliação

Estimativa e Aproximação

O aprendiz estima um valor numérico sem opções predefinidas. Desenvolve senso de magnitude, raciocínio proporcional e pensamento quantitativo.

Aplicação estimativa numérico raciocínio estimation

Experimente

Quantos tipos de atividades interativas estão catalogados neste referencial?

atividades

Código-fonte

PHP

Stepper numérico

Integra decremento, valor, unidade e incremento em um controle.

1 <?php // Exemplo didático: stepper persistente com unidade integrada. ?>
2 <div class="atividade-estimation" data-resposta="95" data-tolerancia="10">
3 <div class="estimativa-stepper" role="group" aria-label="Controle da estimativa">
4 <button class="estimativa-decrementar" aria-label="Diminuir estimativa">−</button>
5 <div class="estimativa-valor">
6 <input type="number" class="estimativa-input" min="0" step="1"
7 aria-label="Valor estimado">
8 <span class="estimativa-unidade">atividades</span>
9 </div>
10 <button class="estimativa-incrementar" aria-label="Aumentar estimativa">+</button>
11 </div>
12 </div>
CSS

Layout do stepper

Centraliza o valor e mantém os controles sempre visíveis.

1 .estimativa-stepper {
2 display: grid;
3 grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
4 border: 2px solid #6366f1;
5 border-radius: .875rem;
6 overflow: hidden;
7 }
8
9 .estimativa-valor {
10 display: flex;
11 align-items: center;
12 justify-content: center;
13 gap: .5rem;
14 }
15
16 .estimativa-input { width: 6ch; text-align: right; appearance: textfield; }
17 .estimativa-unidade { font-size: 1rem; font-weight: 600; }
JavaScript

Incrementar e decrementar

Atualiza o valor sem permitir números abaixo do mínimo.

1 document.addEventListener('DOMContentLoaded', function () {
2 var input = document.querySelector('.estimativa-input');
3 var diminuir = document.querySelector('.estimativa-decrementar');
4 var aumentar = document.querySelector('.estimativa-incrementar');
5
6 function valor() {
7 var atual = parseInt(input.value, 10);
8 return Number.isNaN(atual) ? 0 : atual;
9 }
10
11 diminuir.addEventListener('click', function () {
12 input.value = Math.max(0, valor() - 1);
13 input.focus();
14 });
15
16 aumentar.addEventListener('click', function () {
17 input.value = valor() + 1;
18 input.focus();
19 });
20 });