Zum Hauptinhalt springen

Aufgabenstellung

Die Aufgabenstellung kann sowohl in HTML als auch in Markdown definiert werden, um z.B. code formatiert anzuzeigen oder Bilder und andere Medien einzubinden. Zu jeder Aufgabe muss im Ordner text entweder die Datei text.html oder text.md existieren, die die Aufgabenstellung enthält. Es darf dabei nur eine von beiden Dateien existieren, da sonst unklar ist, welche verwendet werden soll.

HTML

Auf den HTML Header und ähnliches kann verzichtet werden. Natürlich kann man auch nur Text schreiben, wobei Zeilenumbrüche dann nicht berücksichtigt werden. Dafür muss dann das <br> Element verwendet werden. Sonderzeichen und andere reservierte Zeichen müssen escaped werden.

Markdown

Von Markdown gibt es unterschiedliche Varianten (Original, GitHub, Pandoc usw.). Es wird nur die CommonMark-Spezifikation unterstützt.

Beispiel​

text.html
<div>
    <p><strong>Teil (a)</strong></p>
    <p>Gegeben sei der folgende Algorithmus in Pseudo-Code:</p>
    <pre class="language-python"><code># Gegeben: Eine reelle Zahl x
    int algo(x):
       if x &lt;= 1:
           return 0
       else:
           return 1 + algo(x/3)</code></pre>
    <ul>
        <li>Ist der Algorithmus deterministisch?</li>
        <li>Ist der Algorithmus determiniert?</li>
        <li>Für welche Eingaben $x \in \mathbb{R}$ terminiert er?</li>
        <li>Welche Funktion berechnet der Algorithmus? Wie lautet z.B. algo(1.000.000)?</li>
    </ul>

    <p><strong>Teil (b)</strong></p>
    <p>Betrachten Sie die folgende Abbildung:</p>
    <img alt="Ein Stern" src="images/star.png" />
    <blockquote>
        Unter einem Stern (altgriechisch ἀ&sigma;&tau;ή&rho;, ἄ&sigma;&tau;&rho;&omicron;&nu; astēr, astron und lateinisch aster, astrum, stella, sidus f&uuml;r
        &lsquo;Stern, Gestirn&rsquo;; ahd. sterno; astronomisches Symbol: ✱) versteht man in der Astronomie einen massereichen,
        selbstleuchtenden Himmelsk&ouml;rper aus sehr hei&szlig;em Gas und Plasma, wie zum Beispiel die Sonne. - <a
            href="https://de.wikipedia.org/wiki/Stern">Wikipedia</a>
    </blockquote>

    Erfüllt diese Abbildung die Definition eines <a href="https://de.wikipedia.org/wiki/Stern">Sterns</a>?
</div>

Einbinden von Medien​

Dies lässt sich auf zwei Arten umsetzen:

  1. Extern: Medien werden auf eigenem Webserver bereitgestellt und eingebunden
  2. Intern: Medien werden in die Aufgabe selbst integriert und im text-Ordner organisiert. Diese können dann in der Aufgabenstellung durch Angabe von relativen Pfaden referenziert werden.
Interne Medien nutzen

Medien sind Teil der Aufgabe und sollten daher zusammen versioniert werden. Weiterhin ist es zur späteren Nachvollziehbarkeit (z.B. zu Forschungszwecken) sinnvoller und sicherer, die Medien direkt mit der Aufgabe abzulegen und nicht auf externen Webservern zu verteilen.

Beispiel für intern organisierte Medien​

Das folgende Beispiel zeigt, wie Variante 2 verwendet werden kann. Die Struktur kann dabei frei gewählt werden, solange sich die Dateien in der Hierarchie unterhalb des text-Ordners befinden.

- 15Appointment
    - text
        - text.html (oder text.md)
        - images
            - example.png
    - ...
text.html
<img alt="Sternbeispiel" src="images/example.png"/>

Automatischer Download von referenzierten Medien​

Zur Migration von alten Aufgaben kann das JShell Skript getImages.jshell verwendet werden:

  1. JShell in dem Ordner starten, in dem sich die Aufgaben (pro Aufgabe ein Ordner) befinden: jshell
  2. Mit /open ~/getImages.jshell das Skript in die JShell laden.
  3. getImages()

Das Skript iteriert durch alle sichtbaren Verzeichnisse und liest die text/text.html. Dabei werden die Medien heruntergeladen und in den Ordner text/images gespeichert. Anschließend werden die absoluten URLs zu der Quelle mit relativen Pfaden ausgetauscht.

Syntax Highlighting​

In der Aufgabenstellung kann definiert werden, wie Code für das Syntax Highlighting zu interpretieren ist. Es sollten die gängigen Sprachen unterstützt werden, wobei verschiedene alternative Bezeichner für Programmiersprachen (wie z.B. js und javascript) erkannt werden sollten.

Aktuell werden nur pre-Elemente unterstützt. Hierfür muss die Klasse language-<lang> angegeben werden:

text.html
<pre class="language-python"><code># Gegeben: Eine reelle Zahl x
    int algo(x):
       if x &lt;= 1:
           return 0
       else:
           return 1 + algo(x/3)</code></pre>

LaTeX​

In der Aufgabenstellung kann auch LaTeX verwendet werden.

$f(x) = x^2$