7.2.2.3.1 Bereichshervorhebungen

[gesichtete Version][gesichtete Version]
Zeile 56: Zeile 56:


<loop_area type="websource">[https://icons.getbootstrap.com/ zur Icon-Übersicht in Booststrap (CSS-Code)]</loop_area>
<loop_area type="websource">[https://icons.getbootstrap.com/ zur Icon-Übersicht in Booststrap (CSS-Code)]</loop_area>
== alte Hervorhebungen im mooin 1.0 Kursdesign ==
Diese funktionieren immer noch, mit dem neuen Kursdesign wurden aber die neuen Bereichshervorhebungen definiert (s.o.).
===Aufgabe===
<loop_figure title="Bereichshervorhebung für Aufgaben" index="true" id="6128a3d989597">[[Datei:Task-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="task-blue"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Bibliothek/Links===
<loop_figure title="Bereichshervorhebung für Literaturquellen etc." index="true" id="6128a274e71b4">[[File:book-grey.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="book-grey"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Externer Link===
<loop_figure title="Bereichshervorhebung für Links" index="true" id="6128a1dd74334">[[File:link-pink.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="link-pink"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Termin===
<loop_figure title="Bereichshervorhebung für Termine" index="true" id="6128a20b24204">[[File:cal-green.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="cal-green"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Frage===
<loop_figure title="Bereichshervorhebung für Fragen" index="true" id="6128a24b2ff53">[[File:question-orange.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="quest-orange"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Beispiel===
<loop_figure title="Bereichshervorhebung für Beispiele" index="true" id="6128b868854ff">[[File:example-green.png]]
</loop_figure><loop_area type="sourcecode">
<source lang="xml"><div class="example-green"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Vertiefung===
<loop_figure title="Bereichshervorhebung für Vertiefungen" index="true" id="6128b8ad916f2">[[File:watch-turquoise.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="watch-turquoise"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Zitate===
<loop_figure title="Bereichshervorhebung für Zitate" index="true" id="6128b8e326222">[[File:zitat-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="zitat-blue"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Gesetze und Paragraphen===
<loop_figure title="Bereichshervorhebung für Paragrafen" index="true" id="6128b94f71f12">[[File:paragraph-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="paragraph-blue"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Quiz===
<loop_figure title="Bereichshervorhebung für Quiz" index="true" id="6128a41f3b87f">[[File:quiz-green.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="quiz-green"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Wichtig/Hinweis/Idee===
<loop_figure title="Bereichshervorhebung für wichtige Aussagen" index="true" id="6128a44c5a6e9">[[File:important-purple.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="important-purple"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Download===
<loop_figure title="Bereichshervorhebung für Downloads" index="true" id="6128b97a9c055">[[File:download-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="download-blue"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Bezahlen===
<loop_figure title="Bereichshervorhebung für kostenpflichtige Angebote" index="true" id="6128b9ab626fe">[[File:pay-green.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="pay-green"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Forum===
<loop_figure title="Bereichshervorhebung für Forenaufgaben" index="true" id="6128a48700a57">[[File:forum-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="forum-blue"><h4>Überschrift</h4><p>Text</p></div>
</source>
</loop_area>
===Zertifikat===
<loop_figure title="Bereichshervorhebung für Zertifikate" index="true" id="6128a56aa9ff3">[[File:certificate-yellow.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="certificate-yellow"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Online-Lernmaterial===
<loop_figure title="Bereichskennzeichnung für Lernmaterial" index="true" id="6128a5ab9d1c0">[[File:education-orange.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="education-orange"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Verlinkte Datei===
<loop_figure title="Bereichskennzeichnung für Dokumente" index="true" id="6128a5dd4b598">[[File:docs-grey.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="docs-grey"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>
===Formel===
<loop_figure title="Bereichskennzeichnung für Formeln" index="true" id="6128a614e0ad4">[[File:math-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<source lang="xml"><div class="math-blue"><h4>Überschrift</h4><p>Text</p></div></source>
</loop_area>


== Übersicht zur Überführung ==
== Übersicht zur Überführung ==

Version vom 27. Februar 2024, 09:32 Uhr

Hint-Box (❗ in türkis)

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

Info-Box (ℹ in dunkelblau)

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)

Ü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 custom-icon-box 
<div class="custom-icon-box" 
  style="--color: #D67E7A; --icon: '\F64E';">
    <h4>…</h4>
    <p>…</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 custom-icon-box 
<div class="custom-icon-box" 
  style="--color: #6688A6; --icon: '\F6B0';">
    <h4>…</h4>
    <p>…</p>
</div>
paragraph-blue custom-icon-box 
<div class="custom-icon-box" 
  style="--color: #6688A6; --icon: '\F6B0';">
    <h4>…</h4>
    <p>…</p>
</div>
quiz-green exercise-box 
<div class="exercise-box">
<h4>…</h4>
<p>…</p>
</div>
download-blue 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 info-box 
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
docs-grey info-box 
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
math-blue custom-icon-box 
<div class="custom-icon-box" 
  style="--color: #6688A6; --icon: '\F1E0';">
    <h4>…</h4>
    <p>…</p>
</div>
Abgerufen von „https://show.eduloop.de/mediawiki/index.php?title=Bereichshervorhebungen&oldid=1783“