Bereichshervorhebungen

Hint-Box (❗ in türkis)

Code

<div class="hint-box">
<h4>…</h4>
<p>…</p>
</div>

Info-Box (ℹ in dunkelblaub)

Code

<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>

Link-Box (🔗 in gelb)

Code

<div class="link-box">
<h4>…</h4>
<p>…</p>
</div>

Important-Box (🚩 in rot)

Code

<div class="important-box">
<h4>…</h4>
<p>…</p>
</div>

Excercise-Box (🖊 in grün)

Code

<div class="exercise-box">
<h4>…</h4>
<p>…</p>
</div>

Custom-Box

Code

<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';">
    <h4>Custom Box</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p>
</div>

Websource

zur Icon-Übersicht in Booststrap (CSS-Code)

alte Hervorhebungen im mooin 1.0 Kursdesign

Diese funktionieren immer noch, mit dem neuen Kursdesign wurden aber die neuen Bereichshervorhebungen definiert (s.o.).

Aufgabe

 Abb. : Bereichshervorhebung für Aufgaben

Code

<div class="task-blue"><h4>Überschrift</h4><p>Text</p></div>

Bibliothek/Links

 Abb. : Bereichshervorhebung für Literaturquellen etc.

Code

<div class="book-grey"><h4>Überschrift</h4><p>Text</p></div>

Externer Link

 Abb. : Bereichshervorhebung für Links

Code

<div class="link-pink"><h4>Überschrift</h4><p>Text</p></div>

Termin

 Abb. : Bereichshervorhebung für Termine

Code

<div class="cal-green"><h4>Überschrift</h4><p>Text</p></div>

Frage

 Abb. : Bereichshervorhebung für Fragen

Code

<div class="quest-orange"><h4>Überschrift</h4><p>Text</p></div>

Beispiel

 Abb. : Bereichshervorhebung für Beispiele

Code

<div class="example-green"><h4>Überschrift</h4><p>Text</p></div>

Vertiefung

 Abb. : Bereichshervorhebung für Vertiefungen

Code

<div class="watch-turquoise"><h4>Überschrift</h4><p>Text</p></div>

Zitate

 Abb. : Bereichshervorhebung für Zitate

Code

<div class="zitat-blue"><h4>Überschrift</h4><p>Text</p></div>

Gesetze und Paragraphen

 Abb. : Bereichshervorhebung für Paragrafen

Code

<div class="paragraph-blue"><h4>Überschrift</h4><p>Text</p></div>

Quiz

 Abb. : Bereichshervorhebung für Quiz

Code

<div class="quiz-green"><h4>Überschrift</h4><p>Text</p></div>

Wichtig/Hinweis/Idee

 Abb. : Bereichshervorhebung für wichtige Aussagen

Code

<div class="important-purple"><h4>Überschrift</h4><p>Text</p></div>

Download

 Abb. : Bereichshervorhebung für Downloads

Code

<div class="download-blue"><h4>Überschrift</h4><p>Text</p></div>

Bezahlen

 Abb. : Bereichshervorhebung für kostenpflichtige Angebote

Code

<div class="pay-green"><h4>Überschrift</h4><p>Text</p></div>

Forum

 Abb. : Bereichshervorhebung für Forenaufgaben

Code

<div class="forum-blue"><h4>Überschrift</h4><p>Text</p></div>

Zertifikat

 Abb. : Bereichshervorhebung für Zertifikate

Code

<div class="certificate-yellow"><h4>Überschrift</h4><p>Text</p></div>

Online-Lernmaterial

 Abb. : Bereichskennzeichnung für Lernmaterial

Code

<div class="education-orange"><h4>Überschrift</h4><p>Text</p></div>

Verlinkte Datei

 Abb. : Bereichskennzeichnung für Dokumente

Code

<div class="docs-grey"><h4>Überschrift</h4><p>Text</p></div>

Formel

 Abb. : Bereichskennzeichnung für Formeln

Code

<div class="math-blue"><h4>Überschrift</h4><p>Text</p></div>

Übersicht zur Überführung

Wichtig

Dieser Bereich ist noch Diskussionsgrundlage und noch keine finale Empfehlung

Bei der Umstellung von Kursformaten können auch weiterhin die Bereichshervorhebungen des alten Kursdesigns verwendet werden. Sollen die neuen Bereichshervorhebungen verwendet werden, schlagen wir folgende Umformatierung vor:

Altes Kursdesign	Neues Kursdesign	Code
important-purple	hint-box	<div class="hint-box"> <h4>…</h4> <p>…</p> </div>
link-pink	link-box	<div class="link-box"> <h4>…</h4> <p>…</p> </div>
task-blue	exercise-box	<div class="exercise-box"> <h4>…</h4> <p>…</p> </div>
book-grey	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
cal-green	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
quest-orange	?	<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';"> <h4>Custom Box</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p> </div>
example-green	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
watch-turquoise	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
zitat-blue	?	<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';"> <h4>Custom Box</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p> </div>
paragraph-blue	?	<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';"> <h4>Custom Box</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p> </div>
quiz-green	exercise-box	<div class="exercise-box"> <h4>…</h4> <p>…</p> </div>
download-blue	? Ev. link-box	<div class="link-box"> <h4>…</h4> <p>…</p> </div>
pay-green	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
forum-blue	exercise-box	<div class="exercise-box"> <h4>…</h4> <p>…</p> </div>
certificate-yellow	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
education-orange	(fällt weg?)	<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';"> <h4>Custom Box</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p> </div>
docs-grey	info-box	<div class="info-box"> <h4>…</h4> <p>…</p> </div>
math-blue	?	<div class="custom-icon-box" style="--color: #FF8000; --icon: '\F189';"> <h4>Custom Box</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr[...]</p> </div>

die MOOC-Plattform der Fachhochschule Lübeck