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

Arrastar Palavras

O aprendiz arrasta palavras de um banco para preencher lacunas em um texto. Avalia vocabulário e compreensão contextual com menor esforço de digitação.

Conhecimento e compreensão arrastar banco de palavras vocabulário drag

Experimente

Arraste ou selecione uma palavra e escolha a lacuna. Clique em uma palavra posicionada para devolvê-la ao banco:

observável ação sentimento subjetivo
Objetivos de aprendizagem bem escritos começam com um verbo de ___ mensurável e descrevem um comportamento ___ do aprendiz.

Código-fonte

PHP

Banco e lacunas

Apresenta as peças móveis e os destinos que podem recebê-las.

1 <?php // Exemplo didático reduzido: banco e lacunas recebem a mesma peça. ?>
2 <div class="atividade-drag-the-words">
3 <div class="banco-palavras">
4 <?php foreach ($q->banco as $palavra): ?>
5 <span class="palavra-banco" draggable="true"
6 data-id="<?= sanitizar($palavra->id) ?>"
7 data-texto="<?= sanitizar(t($palavra->texto)) ?>">
8 <?= t($palavra->texto) ?>
9 </span>
10 <?php endforeach; ?>
11 </div>
12
13 <span class="lacuna-alvo" data-resposta="<?= sanitizar(t($resposta)) ?>">
14 <span class="lacuna-texto">___</span>
15 </span>
16 </div>
CSS

Estados das peças

Destaca seleção, preenchimento e possibilidade de remoção.

1 .palavra-banco[data-estado="selecionada"] {
2 outline: 2px solid #818cf8;
3 }
4
5 .lacuna-alvo[data-estado="preenchida"] {
6 border-color: #6366f1;
7 }
8
9 .lacuna-alvo .palavra-banco {
10 cursor: pointer;
11 }
JavaScript

Movimentar palavras

Adiciona, substitui e devolve a mesma peça ao banco.

1 document.addEventListener('DOMContentLoaded', function () {
2 var banco = document.querySelector('.banco-palavras');
3 var lacuna = document.querySelector('.lacuna-alvo');
4 var palavraSelecionada = null;
5
6 function colocar(palavra) {
7 var anterior = lacuna.querySelector('.palavra-banco');
8 if (anterior) banco.appendChild(anterior);
9 lacuna.appendChild(palavra);
10 lacuna.dataset.estado = 'preenchida';
11 }
12
13 document.querySelectorAll('.palavra-banco').forEach(function (palavra) {
14 palavra.addEventListener('click', function () {
15 if (palavra.closest('.lacuna-alvo')) banco.appendChild(palavra);
16 else palavraSelecionada = palavra;
17 });
18 palavra.addEventListener('dragstart', function () { palavraSelecionada = palavra; });
19 });
20
21 lacuna.addEventListener('dragover', function (evento) { evento.preventDefault(); });
22 lacuna.addEventListener('drop', function () { if (palavraSelecionada) colocar(palavraSelecionada); });
23 lacuna.addEventListener('click', function () { if (palavraSelecionada) colocar(palavraSelecionada); });
24 });