Olá Matheus! Tudo bem?
Primeiramente, parabéns pelo seu projeto de TCC! Vamos por partes para tentar resolver suas dúvidas.
1. Criar a tela de teste funcional com blocos arrastáveis
Para criar uma interface interativa onde os blocos são arrastáveis, você pode utilizar a biblioteca HTML5 Drag and Drop API. Aqui está um exemplo básico de como você pode implementar isso:
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organize Frases</title>
<style>
.draggable {
width: 100px;
height: 50px;
background-color: blue;
color: white;
text-align: center;
line-height: 50px;
margin: 10px;
cursor: move;
}
.dropzone {
width: 200px;
height: 50px;
background-color: lightgray;
margin: 10px;
border: 2px dashed #ccc;
}
</style>
</head>
<body>
<div class="draggable" draggable="true" id="drag1">Bloco 1</div>
<div class="draggable" draggable="true" id="drag2">Bloco 2</div>
<div class="dropzone" id="dropzone1"></div>
<div class="dropzone" id="dropzone2"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
document.addEventListener('DOMContentLoaded', (event) => {
const draggables = document.querySelectorAll('.draggable');
const dropzones = document.querySelectorAll('.dropzone');
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});
});
dropzones.forEach(dropzone => {
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text');
const draggableElement = document.getElementById(id);
dropzone.appendChild(draggableElement);
});
});
});
2. Área de projetos
Para a área onde todos os projetos ficam salvos, você pode utilizar um banco de dados para armazenar as informações dos projetos e exibi-los dinamicamente na página. Uma maneira simples de fazer isso é usando Firebase.
Exemplo com Firebase
Configurar Firebase:
- Crie um projeto no Firebase Console.
- Adicione um aplicativo web ao seu projeto Firebase.
- Copie as configurações do Firebase para seu projeto.
HTML para exibir projetos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minhas Atividades</title>
</head>
<body>
<div id="projects"></div>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js"></script>
<script src="firebase-config.js"></script>
<script src="projects.js"></script>
</body>
</html>
Configuração do Firebase (firebase-config.js):
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
JavaScript para exibir projetos (projects.js):
document.addEventListener('DOMContentLoaded', (event) => {
const projectsDiv = document.getElementById('projects');
db.collection('projects').get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const project = doc.data();
const projectDiv = document.createElement('div');
projectDiv.textContent = project.name;
projectsDiv.appendChild(projectDiv);
});
Espero que isso o ajude!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
)
nessa imagem temos as opções de escolha de atividades
)
Nesse design fiz com que o usuário ao clicar na opção "organize frase" seja levado a um formulário onde ira configurar a atividade e logo em seguida pode testa-la e salva-la. Meu problema esta justamente ai não tenho ideia de como criar essa tela de teste funcional, mas queria que ela ficasse assim:
)
Essa e a área que todos os projetos ficariam salvas, até tenho uma noção de como fazer isso, mas oque tenho em mente é bem complicado e gostaria de opiniões.(detalhe: a parte de enviar para turmas não é tão necessário, meu tcc é apenas um protótipo)