Interaktive Elemente

Klickstrecken

Klickstrecken anhand Liste/Beschreibung

Über folgenden Quellcode kann eine Klickstrecke in die Inhaltsdatei eingefügt werden, die den Benutzer durch Beschreibungen führt:

<figure class="klickstrecke klickstrecke--liste">
  <img src="aggregation0.png" alt="Gruppieren">
  <ol>
    <li data-value="aggregation1.png">Die Ergebnisse werden zunächst nach den Gruppierungsattributen (benutzer.PNR, benutzer.Name) sortiert.</li>
    <li data-value="aggregation2.png">Im nächsten Schritt werden Gruppen gebildet, die jeweils den gleichen Wert in diesen Attributen haben.</li>
    <li data-value="aggregation3.png">Die Anzahl der Zeilen pro Gruppe werden gezählt.</li>
    <li data-value="aggregation4.png">Die Gruppierungsattribute werden mit der jeweiligen Anzahl ausgegeben.</li>
  </ol>
  <p class="hinweis hinweis--interaktiv">Klicke auf die einzelnen Schritte zur Veranschaulichung.</p>
</figure>

Achte auf folgende Punkte, bei der Verwendung:

Dieser Quellcode führt zu folgendem Ergebnis:

Gruppieren
  1. Die Ergebnisse werden zunächst nach den Gruppierungsattributen (benutzer.PNR, benutzer.Name) sortiert.
  2. Im nächsten Schritt werden Gruppen gebildet, die jeweils den gleichen Wert in diesen Attributen haben.
  3. Die Anzahl der Zeilen pro Gruppe werden gezählt.
  4. Die Gruppierungsattribute werden mit der jeweiligen Anzahl ausgegeben.

Klicke auf die einzelnen Schritte zur Veranschaulichung.

Klickstrecken ohne Liste/Beschreibung

Neben den oben beschriebenen Klickstrecken, die mithilfe einer Liste realisiert werden, ist es auch möglich Bilder nacheinander durchzublättern. Dazu muss der folgende Code verwendet werden:

<figure class="klickstrecke klickstrecke--standard">
	<div>
		<img src="aggregation0.png" alt="Gruppieren">
		<img src="aggregation1.png" alt="Gruppieren">
		<img src="aggregation2.png" alt="Gruppieren">
		<img src="aggregation3.png" alt="Gruppieren">
		<img src="aggregation4.png" alt="Gruppieren">
	</div>
</figure>

Dieser Quellcode führt zu folgendem Ergebnis:

GruppierenGruppierenGruppierenGruppierenGruppieren

Inhalte ein- und ausblenden

Hilfen oder andere Inhalte lassen sich z.B. über einen Button ein- und ausblenden:

Dies ist eine Hilfe, die ein- und ausgeblendet werden kann.

Hilfesymbol[1]

Der erzeugende HTML-Code hat folgende Form:

<button class="schalter" schalterref="refID">Hilfe</button>
<div id="refID" class="versteckt">
    <p>Dies ist eine Hilfe, die ein- und ausgeblendet werden kann.</p>
    <img src="bild.png" alt="Hilfesymbol" />
</div>

Der Button, der zum Ein- und Ausblenden verwendet werden soll, muss die CSS-Klasse schalter enthalten. Außerdem muss es ein Attribut schalterref geben, das die ID des zu verwaltenden Elementes enthält. Bei diesem Element kann es sich um beliebigen Inhalt handeln. Mehrere HTML-Tags lassen sich über div oder span zusammenfassen. Soll der Inhalt zuerst unsichtbar sein, muss dieser z.B. über die CSS-Klasse versteckt unsichtbar gemacht werden.

Beim anklickbaren Element muss es sich nicht um einen Button handeln:

Klick mich!

Hallo, da bin ich :-)

Realisiert wird dies durch den Code:

<p class="schalter" schalterref="textID">Klick mich!</p>
<p id="textID" class="versteckt">Hallo, da bin ich :-)</p>

Inhalte sortieren

Manchmal möchte man dem Benutzer z.B. Codeschnipsel geben, die zu einer fertigen Lösung sortiert werden sollen:

viel zu lernen du noch hast

Erreicht wird dies durch Angabe der CSS-Klasse sortierbar:

<p class="sortierbar">
    <span>viel </span><span>zu </span><span>lernen </span><span>du </span><span>noch </span><span>hast </span>
</p>

Die zu sortierenden Elemente können durch Angabe der CSS-Klasse unsortiert automatisch gemischt werden. Man sollte allerdings wissen, dass dies über Javascript erreicht wird. Der Besucher der Seite kann also durch Deaktivierung von Javascript erreichen, dass die angezeigte Sortierung der Sortierung im Quellcode entspricht. Möchte man dies vermeiden, müssen die zu sortierenden Elemente schon im Quellcode vertauscht werden, so wie dies im obigen Beispiel durchgeführt wurde.

Das folgende Beispiel sollte also beim Neuladen der Seite immer unterschiedlich aussehen:

Ich bin vollkommen durcheinander

Erreicht wird dies durch Ergänzung der Klasse unsortiert:

<p class="sortierbar unsortiert">
    <span>Ich </span><span>bin </span><span>vollkommen </span><span>durcheinander </span>
</p>

Ein komplexeres Beispiel, mit dem sich Quellcode zeilenweise sortieren lässt, könnte dann z.B. folgende Form haben:

Der HTML-Code dazu sieht folgendermaßen aus:

<ul class="sortierbar unsortiert ohne-listenpunkte quelltext language-java">
    <li><code>class Mensch {<code><li>
    <li><code>   int alter;<code><li>
    <li><code>   void tuWas(){<code><li>
    <li><code>      System.out.println("Hallöchen");<code><li>
    <li><code>   }<code><li>
    <li><code>}<code><li>
</ul>

Die Klassen ohne-listenpunkte, quelltext und language-java bewirken hier eine sinnvolle Darstellung, sind aber nicht relevant für die Sortierbarkeit.

Inhalte verschieben

Analog zum oben beschriebenen Sortieren von Elementen, lassen sich Elemente auch frei verschieben.

Mein BildMein BildMein Bild

Dazu genügt es dem umschließenden Element die Klasse verschiebbar zu geben:

<p class="verschiebbar">
    <img src="icon1.png" alt="Mein Bild" />
    <img src="icon2.png" alt="Mein Bild" />
    <img src="icon3.png" alt="Mein Bild" />
</p>

Zusätzlich kann man noch die Klassen gefangen und verteilt vergeben. gefangen bewirkt, dass man die Elemente nicht aus dem umschließenden Element herausschieben kann und dass die Elemente aneinander ausgerichtet werden. verteilt bewirkt, dass die Elemente automatisch zufällig verteilt werden.

Ein Beispiel für ein kleines Code-Puzzle könnte so aussehen:

class Mensch {
int alter;

void tuWas(){
   System.out.println("Hallöchen");
}

}

Erzeugen lässt sich das Beispiel durch folgenden Code:

<pre style="height:15em" class="verschiebbar gefangen verteilt quelltext language-java">
    <code>class Mensch {</code>
    <code>int alter;</code>
    <code>
    void tuWas(){
       System.out.println("Hallöchen");
    }
    </code>
    <code>}</code>
</pre>

Zu beachten ist hier, dass durch das style-Attribut die Höhe des Containers angegeben wird, um ausreichend Platz zum Verschieben zu haben. Die Klassen quelltext und language-java dienen nur der schöneren Darstellung, spielen für die Verschiebbarkeit aber keine Rolle.

Einbinden externer Elemente

Zusätzlich zu den Möglichkeiten, die inf-schule.de bietet, gibt es zahlreiche Plattformen, wie z.B. learningapps.org, die Tools zum Erstellen von interaktiven Aufgaben bieten. Diese lassen sich üblicherweise über iframe-Tags einbinden.

X

Fehler melden

X

Suche