Topic: Ergebnisse von Drag and Drop mit HTML code in Listen übernehmen – geht das?

This topic has 0 replies, 1 voice, and was last updated 4 months, 3 weeks ago by Mariaanna.

Viewing 1 post (of 1 total)

Author

Posts
1. July 2024 at 22:03 #2128

Mariaanna
Participant

Hallo zusammen,

ich habe folgendes Problem: Für meine Studie sollen die Teilnehmer per Drag and Drop insgesamt 32 Kärtchen in vier Boxen ziehen. Die Drag and Drop-Funktion von Unipark stellt ja nur eine Box zur Verfügung, also habe ich mir einen HTML-Code von Chat-GPT generieren lassen, was auch gut funktioniert (ich kopiere ihn unten rein). Im Folgenden soll jeweils der Inhalt einer Box (also die Kärtchen, die die Teilnehmer zugeordnet haben) über einem Fragebogen angezeigt werden. Die Teilnehmer sollen also viermal den gleichen Fragbogen ausfüllen, nur dass jeweils der Inhalt einer anderen der vier Boxen darüber angezeigt wird. Ist das irgendwie möglich?

Hier ist der Code für das Drag and Drop:

<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”UTF-8″>
<title>Drag and Drop mit vier Drop-Zonen und editierbaren Textfeldern</title>
<style>
/* Flexibles Layout für die Container */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box-container {
width: 45%; /* Breite für die Box-Container anpassen */
margin-bottom: 20px;
padding: 10px;
background-color: #f9f9f9; /* Hintergrundfarbe für die Box-Container */
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.box {
min-height: 150px; /* Mindesthöhe für die Drop-Zone */
padding: 10px;
border: 2px dashed #ccc;
border-radius: 5px;
background-color: #f0f8ff; /* Hellblaue Hintergrundfarbe */
overflow-y: auto;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px; /* Abstand zwischen den Karten */
}
.card {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #e3e3e3;
cursor: grab;
display: block;
margin: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
}
.job-title-container {
margin-bottom: 5px;
}
.job-title {
width: 100%;
padding: 5px;
box-sizing: border-box;
background-color: #e6e6fa; /* Hellviolette Hintergrundfarbe */
border: 1px solid #ccc;
border-radius: 3px;
}
.hidden {
display: none;
}
.dragover {
background-color: #e0e0e0;
}
#cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 90%; /* Breite für die Aufgabenliste */
margin: 0 auto 20px; /* Zentrieren und Abstand nach unten */
}
.card-column {
width: 30%; /* Breite für die Spalten */
display: flex;
flex-direction: column;
gap: 5px; /* Abstand zwischen den Karten */
}
.job-header {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id=”cards” class=”container”></div>

<div class=”container”>
<div class=”box-container”>
<div class=”job-header”>Stelle für Person A</div>
<div class=”job-title-container”>
Jobtitel: <input type=”text” class=”job-title”>
</div>
<div class=”dropzone box” id=”box1″></div>
</div>
<div class=”box-container”>
<div class=”job-header”>Stelle für Person B</div>
<div class=”job-title-container”>
Jobtitel: <input type=”text” class=”job-title”>
</div>
<div class=”dropzone box” id=”box2″></div>
</div>
<div class=”box-container”>
<div class=”job-header”>Stelle für Person C</div>
<div class=”job-title-container”>
Jobtitel: <input type=”text” class=”job-title”>
</div>
<div class=”dropzone box” id=”box3″></div>
</div>
<div class=”box-container”>
<div class=”job-header”>Stelle für Person D</div>
<div class=”job-title-container”>
Jobtitel: <input type=”text” class=”job-title”>
</div>
<div class=”dropzone box” id=”box4″></div>
</div>
</div>

<script>
// Tätigkeiten in zufälliger Reihenfolge anzeigen
const activities = [
“Auf Kundenanfragen antworten und Informationen bereitstellen”,
“Bereitstellen von Dienstleistungen für Kunden, wie Bestellannahme oder Kontoinformationen”,
“Informationen, Materialien oder Dokumentationen versenden”,
“Kunden an die zuständigen Personen verweisen”,
“Auf Kundenprobleme oder Beschwerden reagieren”,
“Arbeitspläne für Mitarbeiter erstellen”,
“Termine vereinbaren”,
“Wartungs- oder Geräteprobleme an die zuständigen Mitarbeiter melden”,
“Bestandsaufzeichnungen führen”,
“Digitale Dokumente oder Aufzeichnungen ablegen”,
“Informationen aus Besprechungen oder anderen formellen Vorgängen protokollieren”,
“Gesprochene oder geschriebene Informationen transkribieren”,
“Daten oder Dokumentationen zusammenstellen”,
“Dateien, Datenbanken oder Referenzmaterialien durchsuchen, um benötigte Informationen zu erhalten”,
“Informationen in Datenbanken oder Softwareprogramme eingeben”,
“Personalinformationen erfassen”,
“Einlagen, Zahlungen oder Gebühren einziehen”,
“Verkäufe oder andere finanzielle Transaktionen durchführen”,
“Einzahlungs- oder Auszahlungstransaktionen vorbereiten”,
“Dokumentation für Verträge, Transaktionen oder regulatorische Compliance vorbereiten”,
“Gewichte, Volumina oder andere Eigenschaften von Materialien berechnen”,
“Reise-, Unterbringungs- oder Unterhaltungsarrangements für andere treffen”,
“Organisationsrichtlinien oder -programme entwickeln”,
“Kundenservice-Management-System zur besseren Kundenbetreuung entwickeln”,
“Ideen für die Verbesserung des digitalen Ablagesystems entwickeln”,
“Neues Buchhaltungssystem implementieren”,
“Social-Media-Strategie erstellen und umsetzen”,
“Besprechungen oder besondere Veranstaltungen planen”,
“Arbeitsergebnisse des Teams und einzelner Teammitglieder kontrollieren”,
“Strategie für eine effizienteren Terminplanung entwickeln”,
“Koordinieren von operativen Aktivitäten”,
“Budgetplanung für das kommende Geschäftsjahr durchführen”
];

// Zufällige Reihenfolge der Tätigkeiten erstellen
activities.sort(() => Math.random() – 0.5);

// Aufgaben in Spalten aufteilen
const columnCount = 3;
const cardColumns = [];

for (let i = 0; i < columnCount; i++) {
const column = document.createElement(‘div’);
column.className = ‘card-column’;
cardColumns.push(column);
document.getElementById(‘cards’).appendChild(column);
}

// Tätigkeitenkarten erstellen und in Spalten anzeigen
activities.forEach((activity, index) => {
const card = document.createElement(‘div’);
card.textContent = activity;
card.className = ‘card’;
card.id = ‘card’ + index;
card.draggable = true;
cardColumns[index % columnCount].appendChild(card);
});

// Event-Listener für das Drag-and-Drop Verhalten
const cards = document.querySelectorAll(‘.card’);
const dropzones = document.querySelectorAll(‘.dropzone’);

cards.forEach(card => {
card.addEventListener(‘dragstart’, dragStart);
});

dropzones.forEach(zone => {
zone.addEventListener(‘dragover’, dragOver);
zone.addEventListener(‘drop’, drop);
});

function dragStart(event) {
event.dataTransfer.setData(‘text/plain’, event.target.id);
setTimeout(() => {
event.target.classList.add(‘hidden’);
}, 0);
}

function dragOver(event) {
event.preventDefault();
event.target.classList.add(‘dragover’);
}

function drop(event) {
event.preventDefault();
event.target.classList.remove(‘dragover’);

const cardId = event.dataTransfer.getData(‘text/plain’);
const card = document.getElementById(cardId);

if (card) {
event.target.appendChild(card);
card.classList.remove(‘hidden’);
}
}
</script>
</body>
</html>
Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.