7.2.2.3.1 Bereichshervorhebungen

[gesichtete Version][gesichtete Version]
 
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<loop_figure title="Bereichshervorhebungen" index="true" id="65dda26178b65">[[Datei:Boxes.png|500px|left]]</loop_figure>
== Hint-Box (❗ in türkis) ==
== Hint-Box (❗ in türkis) ==
<loop_area type="sourcecode">
<loop_area type="sourcecode">
Zeile 8: Zeile 10:
</source>  
</source>  
</loop_area>
</loop_area>
== Info-Box (ℹ in dunkelblaub) ==
== Info-Box (ℹ in dunkelblau) ==
<loop_area type="sourcecode">
<loop_area type="sourcecode">
<source lang="xml">
<source lang="xml">
Zeile 17: Zeile 19:
</source>  
</source>  
</loop_area>
</loop_area>
== Link-Box (🔗 in gelb) ==
== Link-Box (🔗 in gelb) ==
<loop_area type="sourcecode">
<loop_area type="sourcecode">
Zeile 56: Zeile 59:
<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 ==
=== Beispiele für Custom Boxes ===
Diese funktionieren immer noch, mit dem neuen Kursdesign wurden aber die neuen Bereichshervorhebungen definiert (s.o.).
<loop_figure title="Bereichshervorhebung für Aufgaben" index="true" id="65dda4866bef2">[[Datei:Custom-boxes.png|500px|links|Beispiele für Custom-Boxes]]</loop_figure>
===Aufgabe===
==== Question ====
<loop_figure title="Bereichshervorhebung für Aufgaben" index="true" id="6128a3d989597">[[Datei:Task-blue.png]]</loop_figure>
<loop_area type="sourcecode">
<loop_area type="sourcecode">
<source lang="xml"><div class="task-blue"><h4>Überschrift</h4><p>Text</p></div></source>  
<source lang="xml">
<div class="custom-icon-box" style="--color: #D67E7A; --icon: '\F64E';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #D67E7A; --icon: '\F64E';"</p>
</div>
</source>  
</loop_area>
</loop_area>
 
==== Quotes ====
 
===Bibliothek/Links===
<loop_figure title="Bereichshervorhebung für Literaturquellen etc." index="true" id="6128a274e71b4">[[File:book-grey.png]]</loop_figure>
<loop_area type="sourcecode">
<loop_area type="sourcecode">
<source lang="xml"><div class="book-grey"><h4>Überschrift</h4><p>Text</p></div></source>
<source lang="xml">
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F6B0';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F6B0';"</p>
</div>
</source>  
</loop_area>
</loop_area>
 
==== Literature ====
 
===Externer Link===
<loop_figure title="Bereichshervorhebung für Links" index="true" id="6128a1dd74334">[[File:link-pink.png]]</loop_figure>
<loop_area type="sourcecode">
<loop_area type="sourcecode">
<source lang="xml"><div class="link-pink"><h4>Überschrift</h4><p>Text</p></div></source>
<source lang="xml">
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F194">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F194"</p>
</div>
</source>  
</loop_area>
</loop_area>
 
==== Math ====
 
===Termin===
<loop_figure title="Bereichshervorhebung für Termine" index="true" id="6128a20b24204">[[File:cal-green.png]]</loop_figure>
<loop_area type="sourcecode">
<loop_area type="sourcecode">
<source lang="xml"><div class="cal-green"><h4>Überschrift</h4><p>Text</p></div></source>
<source lang="xml">
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F1E0';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F1E0';"</p>
</div>
</source>  
</loop_area>
</loop_area>
 
==== OER ====
 
===Frage===
<loop_figure title="Bereichshervorhebung für Fragen" index="true" id="6128a24b2ff53">[[File:question-orange.png]]</loop_figure>
<loop_area type="sourcecode">
<loop_area type="sourcecode">
<source lang="xml"><div class="quest-orange"><h4>Überschrift</h4><p>Text</p></div>
<source lang="xml">
</source>
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F7E7';">
</loop_area>
    <h4>Überschrift</h4>
 
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F7E7';"</p>
 
===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 ==
<loop_area type="important">Dieser Bereich ist noch Diskussionsgrundlage und noch keine finale Empfehlung</loop_area>
 
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:
 
{| class="wikitable"
|-
! Altes Kursdesign
! Neues Kursdesign
! Code
|-
| important-purple
| hint-box
| <source lang="xml">
<div class="hint-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| link-pink
| link-box
| <source lang="xml">
<div class="link-box">
<h4>…</h4>
<p>…</p>
</div>
</div>
</source>  
</source>  
|-
</loop_area>
| task-blue
| exercise-box
| <source lang="xml">
<div class="exercise-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| book-grey
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source> 
|-
| cal-green
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| quest-orange
| ?
| <source lang="xml">
<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>
</source>
|-
| example-green
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| watch-turquoise
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| zitat-blue
| ?
| <source lang="xml">
<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>
</source>
|-
| paragraph-blue
| ?
| <source lang="xml">
<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>
</source>
|-
| quiz-green
| exercise-box
| <source lang="xml">
<div class="exercise-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| download-blue
| ? Ev. link-box
| <source lang="xml">
<div class="link-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| pay-green
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| forum-blue
| exercise-box
| <source lang="xml">
<div class="exercise-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| certificate-yellow
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| education-orange
| (fällt weg?)
| <source lang="xml">
<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>
</source>
|-
| docs-grey
| info-box
| <source lang="xml">
<div class="info-box">
<h4>…</h4>
<p>…</p>
</div>
</source>
|-
| math-blue
| ?
| <source lang="xml">
<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>
</source>  
|-
|}

Aktuelle Version vom 13. Dezember 2024, 09:13 Uhr

Boxes.png
 Abb. 38: Bereichshervorhebungen

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)

Beispiele für Custom Boxes[]

Beispiele für Custom-Boxes
 Abb. 39: Bereichshervorhebung für Aufgaben

Question[]

Code
<div class="custom-icon-box" style="--color: #D67E7A; --icon: '\F64E';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #D67E7A; --icon: '\F64E';"</p>
</div>

Quotes[]

Code
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F6B0';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F6B0';"</p>
</div>

Literature[]

Code
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F194">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F194"</p>
</div>

Math[]

Code
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F1E0';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F1E0';"</p>
</div>

OER[]

Code
<div class="custom-icon-box" style="--color: #6688A6; --icon: '\F7E7';">
    <h4>Überschrift</h4>
    <p>class="custom-icon-box" style="--color: #6688A6; --icon: '\F7E7';"</p>
</div>

Open Educational Resources

Abgerufen von „https://show.eduloop.de/mediawiki/index.php?title=Bereichshervorhebungen&oldid=1818“