mirror of
https://github.com/edufeed-org/ki-kompetenzen.git
synced 2025-12-08 06:04:31 +00:00
97215089df
💬 Neue Workshop-Eingabeseite: Beiträge posten als Nostr-Kind1-Notiz mit relilab-Profilvorschau
- Formular vereinfacht: Markdown entfernt, reine Texteingabe
- Vorschau zeigt formatierte Hashtags gemäß Kompetenz/Stufe
- Nach dem Absenden: Profilbild & Link zu relilab-Workshop-TN auf Primal.net
- Klarere Nutzerführung für erste Beteiligung über Nostr
201 lines
6 KiB
HTML
201 lines
6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Workshop-Beitrag posten</title>
|
||
<style>
|
||
body {
|
||
font-family: sans-serif;
|
||
max-width: 800px;
|
||
margin: auto;
|
||
padding: 1em;
|
||
}
|
||
textarea, input {
|
||
width: 100%;
|
||
margin-bottom: 1em;
|
||
font-size: 1em;
|
||
}
|
||
.success { color: green; }
|
||
.error { color: red; }
|
||
.preview {
|
||
border: 1px solid #ccc;
|
||
padding: 1em;
|
||
background: #f9f9f9;
|
||
min-height: 5em;
|
||
white-space: pre-wrap;
|
||
}
|
||
.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>🗣 Workshop-Beitrag posten</h1>
|
||
<p>Schreibe hier deinen Kommentar, deine Idee oder eine Notiz zum Workshop. Dein Beitrag wird auf Nostr als öffentliche Notiz veröffentlicht.</p>
|
||
|
||
<form id="taskForm">
|
||
<label>Beitrag:<br>
|
||
<textarea name="content" rows="6" 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 (optional):</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>Weitere Tags (optional, Komma getrennt):<br>
|
||
<input type="text" name="tags" value="relilab">
|
||
</label><br>
|
||
|
||
<button type="submit">✅ Beitrag senden</button>
|
||
</form>
|
||
|
||
<h2>📄 Vorschau</h2>
|
||
<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');
|
||
|
||
const kompetenzEmoji = {
|
||
"verstehen": "🟢",
|
||
"anwenden": "🔵",
|
||
"reflektieren": "🟠",
|
||
"gestalten": "🟣"
|
||
};
|
||
|
||
const stufenEmoji = {
|
||
"reproduktion": "1️⃣",
|
||
"rekonstruktion": "2️⃣",
|
||
"konstruktion": "3️⃣"
|
||
};
|
||
|
||
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(', ');
|
||
updatePreview();
|
||
}
|
||
|
||
function updatePreview() {
|
||
const data = new FormData(form);
|
||
const content = data.get("content") || "";
|
||
const tagString = data.get("tags") || "";
|
||
const tagList = tagString.split(',').map(t => t.trim()).filter(Boolean);
|
||
|
||
const hashtags = [];
|
||
const used = new Set();
|
||
|
||
if (tagList.includes("relilab")) {
|
||
hashtags.push("#relilab");
|
||
used.add("relilab");
|
||
}
|
||
|
||
for (const k in kompetenzEmoji) {
|
||
if (tagList.includes(k)) {
|
||
hashtags.push(`${kompetenzEmoji[k]} #${k}`);
|
||
used.add(k);
|
||
break;
|
||
}
|
||
}
|
||
|
||
for (const s in stufenEmoji) {
|
||
if (tagList.includes(s)) {
|
||
const emoji = stufenEmoji[s];
|
||
if (tagList.includes(emoji)) {
|
||
hashtags.push(`#${s} ${emoji}`);
|
||
used.add(s);
|
||
used.add(emoji);
|
||
} else {
|
||
hashtags.push(`#${s}`);
|
||
used.add(s);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
for (const t of tagList) {
|
||
if (used.has(t)) continue;
|
||
if (/^[a-zA-Z0-9_äöüÄÖÜ]+$/.test(t)) {
|
||
hashtags.push(`#${t}`);
|
||
} else {
|
||
hashtags.push(t);
|
||
}
|
||
}
|
||
|
||
preview.textContent = content.trim() + "\n\n" + hashtags.join(" ");
|
||
}
|
||
|
||
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/create-learning-task', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(json)
|
||
});
|
||
|
||
if (res.ok) {
|
||
result.innerHTML = `
|
||
✅ Beitrag erfolgreich gesendet!<br><br>
|
||
<a href="https://primal.net/p/nprofile1qqswm0d4efjt7japeqfx77k09mffw0udn0xyduxad7sn4xgw5grkm4cdk2e0h" target="_blank" style="display:inline-flex; align-items:center; gap:0.5em; text-decoration:none; font-weight:bold; font-size:1.1em;">
|
||
<img src="https://r2.primal.net/cache/b/5e/a1/b5ea1a98582537806b9c2b1c27542b4fcdd3983e0c5c9d9a0664d12bba40098c.png" alt="relilab-TN" style="height: 2em; border-radius: 50%;">
|
||
relilab-Workshop-TN auf Primal ansehen
|
||
</a>
|
||
`;
|
||
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>
|