:root { –jgu-rot: #C1002A; –jgu-graphite: #636363; –signalgrau: #9B9B9B; –gold: #F1C645; –blaugruen: #046380; –asphaltblau: #004570; –blaugrau: #5A7194; } .comic-board { position: relative; width: 600px; height: 600px; margin: 0 auto; } .chapter-comic { position: absolute; width: 130px; height: 130px; background: #f0f0f0; border: 2px solid var(–jgu-graphite); border-radius: 10px; text-align: center; padding: 10px; cursor: pointer; transition: transform 0.2s, background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(–signalgrau); } .chapter-comic:hover { transform: none; } /* Positionen */ .chapter1 { top: 0; left: 50%; transform: none; } .chapter2 { top: 25%; right: 0; transform: none; } .chapter3 { top: 75%; right: 0; transform: none; } .chapter4 { bottom: 0; left: 50%;; transform: none; } .chapter5 { top: 75%; left: 0; transform: none; } .chapter6 { top: 25%; left: 0transform: none; } /* Hover-Farben individuell */ .chapter1:hover { background: var(–jgu-rot); color: white; } .chapter2:hover { background: var(–blaugruen); color: white; } .chapter3:hover { background: var(–gold); color: var(–jgu-graphite); } .chapter4:hover { background: var(–asphaltblau); color: white; } .chapter5:hover { background: var(–jgu-graphite); color: white; } .chapter6:hover { background: var(–blaugrau); color: white; } /* Maskottchen */ .mascot-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .mascot-center img { width: 80px; transition: opacity 0.3s ease; } #speech { margin-top: 10px; font-style: italic; font-size: 14px; background: #fff; border: 1px solid var(–jgu-graphite); padding: 8px 10px; border-radius: 12px; max-width: 160px; color: var(–jgu-graphite); } /* Kapitel-Content */ .chapter-content { display: none; padding: 20px; border-top: 2px solid var(–jgu-graphite); max-width: 800px; margin: 0 auto; } .chapter-content.active { display: block; } .artefakt { background: #f9f9f9; margin: 10px 0; padding: 10px; border-left: 4px solid var(–blaugruen); border-radius: 4px; color: var(–jgu-graphite); } .chapter-content h2 { color: var(–jgu-rot); }
1. Über das Portfolio
2. Portfolio mit Mahara
3. Artefakte des Projekts
4. Studentische Perspektive
5. Transfer und Forschung
6. Kontakt
Maskottchen
Hallo, ich bin der rote Faden! Folge mir, für mehr Überblick!

1. Über das Portfolio

Einführungstext oder Video
function showChapter(id) { document.querySelectorAll(‚.chapter-content‘).forEach(c => c.classList.remove(‚active‘)); document.getElementById(id).classList.add(‚active‘); const mascotImage = https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png; const speech = document.getElementById(’speech‘); const reactions = { kap1: { https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png; text: ‚Willkommen‘ }, kap2: { img: https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png text: ‚Portfolio mit mahara‘ }, kap3: { img: https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png text: ‚Unsere Artefakte entdecken‘ }, kap4: { img: https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png text: ‚Studentische Perspektive‘ }, kap5: { img: https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png text: ‚Forschung & Transfer im Fokus‘ }, kap6: { img: https://bildungswissenschaften.psychologie.sowi.uni-mainz.de/wp-content/uploads/sites/339/2025/07/Roter-Faden.png text: ‚Kontakt‘ } }; mascotImage.src = reactions[id].img; speech.innerText = reactions[id].text; }

Ich bin Teil des Teams des Feedback-Portfolios und begleite Dich auf der Homepage, damit Du bei allem gleich Bescheid weißt! Ich bin von Anfang an als Masskottchen des Projekts dabei und begleite das Team auf unterschiedliche Veranstaltungen, wie auf Studierenden-Tage und Dozierenden-Retreats. Dabei ist meine Aufgabe immer wieder den Fokus darauf zu legen, dass Verbindungslinien der Bildungswissenschaften sichtbar werden und wir an einem Strang ziehen.

Ziel des Tools:

Entwicklung eines nachhaltigen, digitalen Feedback-Portfolios
Begleitung der Studierenden vom ersten Semester bis ins Referendariat
Reflexion des individuellen Entwicklungswegs
Potenzielle Nutzung für Prüfungen oder Forschungsfragen

Lust auf praktische Einblicke? Hier zeigen wir dir, wie Theorie in der Praxis lebendig wird.

BEST PRACTICES?!

Mahara Beispielseiten?

Hier gibts noch mehr im Downloadbereich!!!

Leitfaden für mahara für Dozierende?

Meinen ersten Aufrtitt hatte ich mit dem Team 2022 bei der zweiten Tagung in Bamberg bei der DiKuLe. Auch zur letzten Tagung durfte ich zur DiKuLe mitreisen. Das Team hat viele Dateien erstellt, Podcasts sogar mit catalyst-Mitarbeiterin Kristine Höppner geführt. Entdecke spannende Videos und Podcasts! Hör und schau gern mal rein!

Franzis Plakate Büro ?!

ERGEBNISSE RETREATS?!

UND HIER NOCH MAL TEXT?!?!

Neugierig auf die neuesten Erkenntnisse? Hier findest du unsere Forschungsergebnisse.

Neugierig geworden, wer hinter dem Projekt steckt? Hier kannst du uns erreichen!