edufeed-org/ki-kompetenzen
2
0
Fork 0
mirror of https://github.com/edufeed-org/ki-kompetenzen.git synced 2025-12-09 22:54:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create index.html

Browse source
This commit is contained in:
Jörg Lohrer 2025-05-21 08:09:25 +02:00 • committed by GitHub
parent e6323a49ac
commit 0453d79b98
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 143 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

143
docs/index.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Lernaufgabe erstellen</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body {
font-family: sans-serif;
max-width: 800px;
margin: auto;
padding: 1em;
}
textarea, input {
width: 100%;
margin-bottom: 1em;
}
.success { color: green; }
.error { color: red; }
.preview {
border: 1px solid #ccc;
padding: 1em;
background: #f9f9f9;
min-height: 5em;
}
.tag-buttons button {
margin: 0.2em;
}
button[type="submit"] {
background-color: #444;
color: white;
border: none;
padding: 1em 2em;
font-size: 1.2em;
border-radius: 10px;
cursor: pointer;
box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
transition: background-color 0.2s ease;
}
button[type="submit"]:hover {
background-color: #222;
}
</style>
</head>
<body>
<h1>📝 Lernaufgabe eingeben</h1>
<form id="taskForm">
<label>Inhalt (Markdown möglich):<br>
<textarea name="content" rows="10" required></textarea>
</label><br>
<div class="tag-buttons">
<strong>Kompetenzbereich wählen:</strong><br>
<button type="button" onclick="addTag('verstehen')">🟢 Verstehen</button>
<button type="button" onclick="addTag('anwenden')">🔵 Anwenden</button>
<button type="button" onclick="addTag('reflektieren')">🟠 Reflektieren</button>
<button type="button" onclick="addTag('gestalten')">🟣 Gestalten</button>
<br><strong>Niveaustufe wählen:</strong><br>
<button type="button" onclick="addTag('1️⃣', 'reproduktion')">1️⃣ Reproduktion</button>
<button type="button" onclick="addTag('2️⃣', 'rekonstruktion')">2️⃣ Rekonstruktion</button>
<button type="button" onclick="addTag('3️⃣', 'konstruktion')">3️⃣ Konstruktion</button>
</div>
<label>Eigene Tags (Komma getrennt):<br>
<input type="text" name="tags" value="relilab">
</label><br>
<button type="submit">✅ Lernaufgabe absenden</button>
</form>
<h2>📄 Vorschau</h2>
<button onclick="toggleRaw()">🔄 Vorschau umschalten</button>
<div id="preview" class="preview"></div>
<p id="result"></p>
<script>
const form = document.getElementById('taskForm');
const result = document.getElementById('result');
const preview = document.getElementById('preview');
let rawMode = false;
function toggleRaw() {
rawMode = !rawMode;
updatePreview();
}
function addTag(...tagsToAdd) {
const tagInput = form.querySelector('[name="tags"]');
const currentTags = tagInput.value.split(',').map(t => t.trim()).filter(Boolean);
for (const tag of tagsToAdd) {
if (!currentTags.includes(tag)) {
currentTags.push(tag);
}
}
tagInput.value = currentTags.join(', ');
}
function updatePreview() {
const data = new FormData(form);
const content = data.get("content");
preview[rawMode ? 'textContent' : 'innerHTML'] = rawMode ? content : marked.parse(content);
}
form.addEventListener('input', updatePreview);
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const json = {
content: formData.get('content'),
tags: formData.get('tags')
};
try {
const res = await fetch('https://n8n.rpi-virtuell.de/webhook-test/create-learning-task', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(json)
});
if (res.ok) {
result.textContent = '✅ Lernaufgabe erfolgreich übermittelt!';
result.className = 'success';
form.reset();
updatePreview();
} else {
const errorText = await res.text();
result.textContent = `❌ Fehler: ${res.status} – ${errorText}`;
result.className = 'error';
}
} catch (err) {
result.textContent = '❌ Netzwerkfehler oder CORS-Problem';
result.className = 'error';
}
});
updatePreview();
</script>
</body>
</html>