Diese Kästen werden verwendet, um auf Regeln und andere wichtige Aspekte hinzuweisen. Man kann sich die Kästen für einen eigenen Kurs anpassen, aber es sollte innerhalb des Kurses identisch sein, damit keine Verwirrung entsteht.
ANLEITUNG: Der Code ist so gestaltet, dass er wie er da steht in der HTML-Ansicht eingefügt werden kann. Dann wieder in die "normale" Ansicht wechseln und den Inhalt anpassen. Davor und danach sind Leerzeilen vorhanden, damit man weiterarbeiten
kann.

HERVORHEBUNG 1
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FFDC00;"> <div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom:
1px solid #AAA;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Icon-Megaphone.svg/140px-Icon-Megaphone.svg.png" alt="" role="presentation" width="31" height="26"> HERVORHEBUNG 1</div> <div
style="padding-bottom: .5rem; font-size: large;"> Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div> </div>
</div><br>

HERVORHEBUNG 2 - Wichtigere Sachen
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FF4136;"> <div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom:
1px solid #AAA;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Icon-Megaphone.svg/140px-Icon-Megaphone.svg.png" alt="" role="presentation" width="31" height="26"> HERVORHEBUNG 2</div> <div style="padding-bottom:
.5rem; font-size: large;">
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div> </div> </div><br>

AUFGABE - Überschrift
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #2ECC70;"> <div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom:
1px solid #AAA;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Icon-Stift.svg/126px-Icon-Stift.svg.png" alt="" role="presentation" width="28" height="28"> AUFGABE - Überschrift</div> <div style="padding-bottom:
.5rem; font-size: large;">Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div> </div> </div><br>

AKTIVITÄT (PFLICHT) - Titel
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FF851B;"> <div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom:
1px solid #AAA;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Icon-Kompass.svg/137px-Icon-Kompass.svg.png" alt="" role="presentation" width="30" height="30"> LERNPFAD - Titel des Experimentes 2</div>
<div style="padding-bottom: .5rem; font-size: large;">Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div> </div>
</div><br>
Die AKTIVITÄT ist damit beendet
Wenn du alle Informationen verstanden, die Aufgaben erfolgreich bearbeitet und keine Fragen mehr hast, dann kannst du das Aktivitäts-Fenster schließen und auf der Unterseite weiterlesen, von der du auf diese Aktivität gekommen ist.
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FF851B;"> <div style="padding: 0 1rem;"> <img src="https://superlehrer.de/wp-content/uploads/2018/11/Otto_geht.png" alt="" width="100" height="153" role="presentation"
class="atto_image_button_left"> <div style="font-size: x-large; font-weight:bold; margin-bottom: .5rem; margin-left: 100px; padding:.75rem .25rem; border-bottom: 1px solid #AAA;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Icon-Kompass.svg/137px-Icon-Kompass.svg.png"
alt="" role="presentation" width="30" height="30"> <b><i>Die AKTIVITÄT ist damit beendet</i></b></div> <div style="padding-bottom: .5rem; font-size: large;"> <i>Wenn du alle Informationen verstanden,
die Aufgaben erfolgreich bearbeitet und keine Fragen mehr hast, dann kannst du das Aktivitäts-Fenster schließen und auf der Unterseite weiterlesen, von der du auf diese Aktivität gekommen ist.</i></div> </div> </div><br>

EXPERIMENT - Titel des Experimentes
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
<br><div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #39CCCC;"> <div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom:
1px solid #AAA;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Icon-Experiment.svg/117px-Icon-Experiment.svg.png" alt="" role="presentation" width="24" height="32"> EXPERIMENT - Titel des Experimentes</div><div
style="padding-bottom: .5rem; font-size: large;">Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div></div></div><br>

LÖSUNG - zu welcher Aufgabe
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
<br><div style="margin: 0 auto .5rem; overflow:hidden;
border-left: 10px solid #7FDBFF;"> <div style="height: 100%;
padding: 0 1rem;"> <div style="font-size: x-large;
font-weight:bold; margin-bottom: .5rem; padding:.75rem .25rem;
border-bottom: 1px solid #AAA;"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Icon-Stift.svg/126px-Icon-Stift.svg.png"
alt="" width="28" height="28" role="presentation"> LÖSUNG -
zu welcher Aufgabe</div> <div style="padding-bottom: .5rem; font-size: large;">Hier
steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
eni </div> </div> </div><br>