Commit 5c179a1d authored by Klaus-Dieter Quibeldey-Cirkel's avatar Klaus-Dieter Quibeldey-Cirkel
Browse files

revise demo cards

parent 479a43c9
......@@ -662,8 +662,8 @@
},
"cardType2": {
"name": "Mitschrift",
"longName": "Mitschrift (Mitschrift | Nachbearbeitung | To-dos)",
"content1": "Mitschrift",
"longName": "Mitschrift (Foto der Mitschrift | Nachbearbeitung | To-dos)",
"content1": "Foto der Mitschrift",
"content2": "Nachbearbeitung",
"content3": "To-dos",
"placeholders": {
......
{"name":"B: Aus dem Portal .cards","description":"Dient in der Demo-Kartei als Inhaltsverzeichnis der Beispielkarten.","date":"2018-07-08T06:28:46.220Z","dateUpdated":"2018-07-08T09:37:39.258Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":[],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":8,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Beispiel-Karten","front":"(##) Es folgen reale Beispiele für die 14 verschiedenen Kartentypen\n\n\n<div style=\"columns:2;-webkit-columns:2;-moz-columns:2;column-gap:3em;-webkit-column-gap:3em;-moz-column-gap:3em\">\nKarten aus Bachelor- und Masterkursen im Studiengang Informatik an der THM:\n\n* Lernkarte\n* Glossarkarte\n* Anweisungskarte\n* Formelkarte\n* Entwurfsmusterkarte\n* Zitatkarte\n* Vokabelkarte\n* Prüfungskarte\n* Quizkarte\n* To-do-Karte\n* Mitschrift\n* Exzerptkarte\n* Fotokarte\n* Notizkarte\n</div>\n","difficulty":1,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-08T06:03:49.254Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":8,"dateUpdated":"2018-07-08T09:35:41.081Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"C: Beispiel für eine Glossarkarte","description":"Vorlesung Diskrete Strukturen nach Erhart Ecker im Sommersemester 2006.","date":"2018-07-05T08:41:54.153Z","dateUpdated":"2018-07-06T08:02:01.883Z","editors":[],"owner":"Z3LfhpTsXcbvspRtu","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":3,"difficulty":1,"originalAuthor":"Thelen, Christoph"}, {"subject":"Induktionsbeweis","front":"**$q$-Baum der Höhe $h$**","back":"![Vollständiger 3-Baum der Höhe 2](https://arsnova-uploads.mni.thm.de/ds107.png)\n\nEin vollständiger $q$-Baum der Höhe $h$ hat in der Schicht 0 die Wurzel, die $q$ Söhne in Schicht 1 hat, von denen jeder wieder $q$ Söhne in Schicht 2 hat, usw.\n\n**Behauptung:** Er hat $\\alpha_q(h) = (q^{h+1} - 1)/(q - 1)$ Knoten.\n\n**Beweis:** Durch Induktion über $h \\in ℕ_0$.\nIA ($h = 0$): In diesem Fall besteht der Baum nur aus der Wurzel und hat einen Knoten. Andererseits ist $\\alpha_q(1)=1$.\n\nIS ($h \\to h + 1$): Ein $q$-Baum der Höhe $h$ hat $\\alpha_q(h)$ Knoten, von denen sich $q^h$ in Schicht $h$ befinden. Jeder Blattknoten des Baums der Höhe $h$ hat $q$ Söhne, so dass beim Baum der Höhe $h + 1$ noch $q^{h+1}$ Knoten in Schicht $h + 1$ dazukommen. Also ist die Knotenzahl\n\n$$=\\frac{q^{h+1} - 1}{q - 1} = q^{h+1} = \\frac{q^{h+1}-1+q^{h+2}-q^{h+1}}{q-1} = \\frac{q^{h+2}-1}{q-1}$$\n\nund dies ist $\\alpha_q(h + 1)$.","difficulty":1,"centerTextElement":[true,false,false,false,false,false],"date":"2018-07-04T16:11:00.441Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":3,"hint":"Brill, M.: Mathematik für Informatiker. Hanser, München 2005.\n\nEbbinghaus, H.D. et al.: Einführung in die mathematische Logik. Wissenschaftliche Buchgesellschaft, Darmstadt 1978.\n\nGarey, M. R. and D.S. Johnson: Computers and Intractability. Freeman, New York 1979.\n\nHartmann, P.: Mathematik für Informatiker. Vieweg, Wiesbaden 2004.\n\nRosen, K. H.: Discrete Mathematics and Ist Applications. Chapters 3, 6, 7, 9. McGraw-Hill, New York.\n\nSalomaa, A. K.: Formale Sprachen. Springer, Berlin 1978\n\nTeschl, G. und S.: Mathematik für Informatiker, Band 1","dateUpdated":"2018-07-06T07:44:32.217Z","originalAuthor":"Thelen, Christoph"}
\ No newline at end of file
{"name":"D: Beispiel für eine Glossarkarte","description":"Vorlesung Diskrete Strukturen nach Erhart Ecker im Sommersemester 2006.","date":"2018-07-05T08:41:54.153Z","dateUpdated":"2018-07-06T08:02:01.883Z","editors":[],"owner":"Z3LfhpTsXcbvspRtu","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":3,"difficulty":1,"originalAuthor":"Thelen, Christoph"}, {"subject":"Induktionsbeweis","front":"**$q$-Baum der Höhe $h$**","back":"![Vollständiger 3-Baum der Höhe 2](https://arsnova-uploads.mni.thm.de/ds107.png)\n\nEin vollständiger $q$-Baum der Höhe $h$ hat in der Schicht 0 die Wurzel, die $q$ Söhne in Schicht 1 hat, von denen jeder wieder $q$ Söhne in Schicht 2 hat, usw.\n\n**Behauptung:** Er hat $\\alpha_q(h) = (q^{h+1} - 1)/(q - 1)$ Knoten.\n\n**Beweis:** Durch Induktion über $h \\in ℕ_0$.\nIA ($h = 0$): In diesem Fall besteht der Baum nur aus der Wurzel und hat einen Knoten. Andererseits ist $\\alpha_q(1)=1$.\n\nIS ($h \\to h + 1$): Ein $q$-Baum der Höhe $h$ hat $\\alpha_q(h)$ Knoten, von denen sich $q^h$ in Schicht $h$ befinden. Jeder Blattknoten des Baums der Höhe $h$ hat $q$ Söhne, so dass beim Baum der Höhe $h + 1$ noch $q^{h+1}$ Knoten in Schicht $h + 1$ dazukommen. Also ist die Knotenzahl\n\n$$=\\frac{q^{h+1} - 1}{q - 1} = q^{h+1} = \\frac{q^{h+1}-1+q^{h+2}-q^{h+1}}{q-1} = \\frac{q^{h+2}-1}{q-1}$$\n\nund dies ist $\\alpha_q(h + 1)$.","difficulty":1,"centerTextElement":[true,false,false,false,false,false],"date":"2018-07-04T16:11:00.441Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":3,"hint":"Brill, M.: Mathematik für Informatiker. Hanser, München 2005.\n\nEbbinghaus, H.D. et al.: Einführung in die mathematische Logik. Wissenschaftliche Buchgesellschaft, Darmstadt 1978.\n\nGarey, M. R. and D.S. Johnson: Computers and Intractability. Freeman, New York 1979.\n\nHartmann, P.: Mathematik für Informatiker. Vieweg, Wiesbaden 2004.\n\nRosen, K. H.: Discrete Mathematics and Ist Applications. Chapters 3, 6, 7, 9. McGraw-Hill, New York.\n\nSalomaa, A. K.: Formale Sprachen. Springer, Berlin 1978\n\nTeschl, G. und S.: Mathematik für Informatiker, Band 1","dateUpdated":"2018-07-06T07:44:32.217Z","originalAuthor":"Thelen, Christoph"}
\ No newline at end of file
{"name":"B: Beispiel für eine Lernkarte","description":"Die Lernkartei ist Teil der Demo-Kartei, siehe den roten Button auf der Startseite.","date":"2018-05-25T07:24:31.276Z","dateUpdated":"2018-07-06T04:27:51.347Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","nd"],"userDeleted":false,"learningActive":false,"maxCards":1,"daysBeforeReset":7,"learningStart":"2018-05-25T07:24:31.276Z","learningEnd":"2038-01-19T19:42:43.323Z","learningInterval":[1,3,7,28,84],"learners":1,"wordcloud":false,"shuffled":false,"cardType":0,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Test-Pyramide","difficulty":1,"centerTextElement":[false,false,false,false],"date":"2018-05-25T07:31:40.262Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":0,"front":"Die Test-Pyramide von Mike Cohn dient als **Metapher für die Testautomation**.\n\n![Test-Pyramide nach Mike Cohn ([Zeichnung von Ham Vocke](https://martinfowler.com/articles/practical-test-pyramid.html))](https://martinfowler.com/articles/practical-test-pyramid/testPyramid.png)\n\n!!! Tip Lernziel\n Sie sollen den Aufbau der Test-Pyramide beschreiben können und verstehen, welche automatisierten Tests in welcher Quantität und Qualität für eine CI/CD-Pipeline erforderlich sind. </br> </br>\n\n","dateUpdated":"2018-07-06T04:27:51.338Z","back":"Die **Test-Pyramide** ist ein Konzept, ursprünglich von **Mike Cohn** vorgestellt, das eine anschauliche Gliederung von automatisierten Testprozessen in drei Schichten vorschlägt:\n\n1. **Unit Tests** (viele und möglichst kleine Tests von Funktionen und Klassen)\n2. **Service Tests** (weitere, gröbere Tests unter Beteiligung externer Dienste)\n3. **User Interface Tests** (möglichst wenige End-to-End-Akzeptanztests)\n\n!!! Tip Merke \n Tests werden mit **unterschiedlicher Granularität** geschrieben und **je höher die Ebene, desto weniger Tests**! </br></br>\n","hint":"**Fowler, Martin (2006)**: *”TestDouble”*. Online-Artikel, veröffentlicht: 17. Januar 2006. URL: https://martinfowler.com/bliki/TestDouble.html (Stand: 25.05.2018). \n\n**Vocke, Ham (2018)**: *\"The Practical Test Pyramid\"*. Online-Artikel, veröffentlicht: 26. Februar 2018. URL: https://martinfowler.com/articles/practical-test-pyramid.html (Stand: 25.05.2018)\n\n![\"The Practical Test Pyramid\", Zeichnung von Ham Vocke](https://martinfowler.com/articles/practical-test-pyramid/teaser.png)\n\n---\n\n!!! TIP Hinweis\n Diese **Lernkarte** bereitet den Inhalt des Artikels [The Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html) von Ham Vocke auf. Im Zentrum steht die **Test Pyramide** von Mike Cohn und die **Testautomation** im Kontext einer _Continuous Delivery Pipeline_. Das Thema Testautomation wurde von den Teilnehmern des Master-Informatikkurses \"Continuous Delivery\" im SoSe 2018 am Fachbereich MNI der THM bearbeitet.</br></br>Während des Semesters erstellten die Studenten auf .cards jeder für sich ein Kursglossar, Lernkarteien zu einzelnen Kursinhalten, eine Zitatensammlung und eine Prüfungskartei mit insgesamt ca. 200 Karten. In den Sommerferien lernten sie kontinuierlich ca. 500 Karten -- max. 20 täglich -- nach der [5-Fächer-Lernmethode von Sebastian Leitner](https://de.wikipedia.org/wiki/Lernkartei). Wer dies befolgte, erhielt für seine Lernleistung einen Bonus von 15 Prozent auf die Klausurnote. Die Klausur umfasste 15 zufällige Lernziel- und Prüfungsfragen aus allen Lern- und Prüfungskarteien sowie eine Transferaufgabe.\n\n!!! NOTE Danksagung\n Die Lernkarte basiert auf einer Exzerpt-Karte des Kursteilnehmers Felix Brück. ","lecture":"# The Importance of (Test) Automation\nSoftware wird immer wichtiger und bestimmt zunehmend den Alltag. Um mithalten zu können, muss Software schneller entwickelt werden können, ohne an Qualität einzubüßen. \n\n**Continuous Delivery**, ist eine Praxis, bei der eine **Buildpipeline** zum automatischen Testen eingesetzt wird und die damit einen beschleunigten Softwareentwicklungsprozess unterstützen kann, indem sie repetitive, umständliche, händische Tests durch Automatisierung ersetzen und effizienter machen.\n\n# The Test Pyramid\n![Die Test-Pyramide](https://martinfowler.com/articles/practical-test-pyramid/testPyramid.png)\n\nDie **Test-Pyramide** ist ein Konzept, ursprünglich von *Mike Cohn* vorgestellt, das eine simple Gliederung bei der Erstellung von Testsuiten in grob drei Schichten vorschlägt:\n\n1. **Unit Tests** *(viele und möglichst kleine Tests)*\n2. **Service Tests** *(weitere, gröbere Tests)*\n3. **User Interface Tests** *(möglichst wenige High-Level End-to-End-Tests)*\n\n!!! Tip Merke \n Tests werden mit **unterschiedlicher Granularität** geschrieben und **je höher die Ebene, desto weniger Tests**\n\n\n# Unit Tests\n![Unit Tests ersetzen externe Objekte mit Test Doubles](https://martinfowler.com/articles/practical-test-pyramid/unitTest.png)\n\n**Unit Tests** dienen als eine Art Sicherheitsnetz bei Codeänderungen (weshalb sie auch nicht zu stark an die Implementierung gebunden sein sollten) ([Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#WhatToTest)).\n\nAllgemein soll getestet werden, ob eine **Unit** (Einheit) so funktioniert wie erwartet. Dabei ist nicht genau definiert, was eine „Unit“ ist. In einer funktionalen Programmiersprache wären dies z.B. Funktionen, in einer OO Sprache könnten es einzelne Methoden oder ganze Klassen sein [Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#UnitTests).\n\n## Mocking and Stubbing\nUm automatische Tests einfach und möglichst schnell zu halten, werden **Mocks** und **Stubs** benutzt, die anstelle von z.B. teuren Datenbankaufrufen oder HTTP-Queries verwendet werden. Außerdem dienen sie zur Vermeidung von Seiteneffekten und komplexen Testsetups. Es werden also reale Module/Klassen/Funktionen/etc. durch Fake-Versionen ersetzt, die dieselbe Signatur aufweisen. \nDiese sogenannten **Test Doubles** umfassen u.a. (vgl. [Fowler 2006](https://martinfowler.com/bliki/TestDouble.html)):\n- **Mocks**: Sind vorprogrammiert mit Erwartungen an Aufrufen, die sie gemäß den Spezifikationen ihrer realen Vorbilder erhalten sollten, um zu testen, ob alle erwarteten Aktionen ausgeführt werden. Bei unerwarteten Aufrufen können sie Exceptions auswerfen.\n\n- **Stubs**: Sie enthalten vorgefertigte Antworten, die sie für Aufrufe während der Testphase verwenden.\n\n!!! NOTE Hinweis\n Es wird oft unterschieden zwischen **solitary Unit Tests**, bei denen alles durch Stubs und Mocks ersetzt wird und **sociable Unit Tests**, bei denen teilweise mit den realen Objekten getestet wird.\n\n## What to Test?\nGrundsätzlich können Unit Tests für alle Klassen (unabhängig von ihrer Funktion) eingesetzt werden. Es empfiehlt sich jedoch, nur **eine Testklasse pro Produktions-Klasse** zu schreiben. Dabei sollte eine Testklasse **mindestens das *public*-Interface der Klasse abdecken**. ([Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#WhatToTest))\n\nUnit Tests sollten nicht 100% des Codes abdecken, sondern sich auf nicht-trivialen Testpfade (z.B. Happy Path und Grenzwerte) beschränken. Dabei sollten sie nicht zu implementierungsspezifisch sein, da sie sonst - etwa nach einem Refactoring - umgeschrieben werden müssten.\n\n## Test Structure\nEine gute und grundlegende Struktur für Tests allgemein, sieht wie folgt aus (vgl. [Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#TestStructure)):\n1. Testdaten einrichten\n2. Zu testende Methode aufrufen\n3. Sicherstellen, dass die erwarteten Ergebnisse zurückgegeben werden.\nDiese kann man sich auch durch die Alliteration [Arrange, Act, Assert](https://xp123.com/articles/3a-arrange-act-assert/) merken.\n\n\n\n# Integration Tests\nWie der Name vermuten lässt, testen **Integration Tests** die Integration der eigenen Applikation mit applikationsexternen Services (Datenbank, Dateisystem, Netzwerkaufrufe, REST APIs, etc.).\nEs geht also um Fälle, in denen Aktionen die Integration externer Dinge triggern. \n\nIm Falle eines Datenbankaufrufs, könnte dies bspw. so aussehen:\n1. Datenbank starten\n2. Applikation mit DB verbinden\n3. Funktion triggern, die in die DB schreibt\n4. Testen, ob die erwarteten Daten geschrieben wurden, indem man sie aus der DB lädt\n\nGenerell sollten Integration Tests für alle Fälle geschrieben werden, bei denen **Daten serialisiert oder deserialisiert** werden, um sicherzustellen, dass alle externen Abhängigkeiten/Kollaborateure wie erwartet funktionieren. Also z.B. bei:\n- Aufrufe an REST APIs\n- Lesen/Schreiben auf Datenbanken oder Queues\n- Schreiben auf das Dateisystem\n\nEs sollte dabei mit lokalen Instanzen der Abhängigkeiten gearbeitet werden und **nicht mit realen Produktivsystemen** (bei unzähligen automatisierten Tests kann dies im schlimmsten Falle zu einem Denial of Service führen). Ist es nicht möglich, eine eigene Instanz laufen zu lassen, sollten Fake-Versionen implementiert werden, die das reale Verhalten nachahmen. \n\n![Integration mit separatem Service](https://martinfowler.com/articles/practical-test-pyramid/httpIntegrationTest.png)\n\n\n# Contract Tests\nEs kann sein, dass Softwareentwicklung derart organisiert ist, dass unterschiedliche Teams an unterschiedlichen Serviceimplementierungen arbeiten, die zum Schluss zu einem großen, zusammenhängenden System zusammengefügt werden. \n\nDiese unterschiedlichen Services kommunizieren über Interfaces miteinander (dazu nutzen sie etwa REST und JSON via HTTPS, RPC oder bei einer eventgesteuerten, asynchronen Anwendung via Queues oder Channels). Dann ist immer ein Service ein **Consumer** (der Daten abruft) und der andere ein **Provider** (der Daten bereitstellt). </br>(Bei asynchronen Anwendungen auch **Publisher** und **Subscriber**).\n\nDie Spezifikation eines Interfaces kann als **Contract** (Vertrag) angesehen werden.\n\nBeim **Consumer-Driven Contract Test (CDC)** übernimmt das Team des Consumer-Services die Implementierung des Vertrags. Es schreibt also Tests, die das Interface auf alle Daten prüfen, die es benötig/erwartet, um diese dann an das Provider-Team weiterzugeben. Dieses entwickelt nun die API nach diesen Tests. Dabei durchlaufen alle Änderungen kontinuierlich die Tests in der Buildpipeline. Bei Problemen tauschen sich die Teams aus. (Vgl. [Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#ContractTests))\n\n![Consumer-Driven Contract Tests](https://martinfowler.com/articles/practical-test-pyramid/cdc_tests.png)\n\n\n# UI Tests\n**UI Tests** prüfen, ob das User Interface wie erwartet auf Interaktionen reagiert (dazu zählen Webinterfaces genauso, wie Kommandozeilen-Interfaces oder REST API). Dabei kann auf Dinge geachtet werden wie *Verhalten, Layout, Usability* oder *Wahrung des Corporate Designs*.\n\nUI Tests müssen keine vollständigen End-to-End-Tests sein. Dies kann z.B. auch mit Unit Tests gemacht werden, in dem der Frontend-Code mit Backend-Stubs getestet wird.\n\n![](https://martinfowler.com/articles/practical-test-pyramid/ui_tests.png)\n\n!!! NOTE\n Während das Verhalten automatisiert (z.B. mit Tools wie Selenium) getestet werden kann, kommt man spätestens beim Look & Feel an die Grenzen der Automatisierung.\n\n\n# End-to-End Tests\n**End-to-End Tests** (manchmal auch **Broad Stack Tests**) prüfen die Applikation über ihr eigenes Interface. UI Tests können ebenfalls zu hierzu zählen.\n\nJe komplexer das User Interface ist, desto mehr Probleme können bei Tests auftreten. Doch auch Eigenarten unterschiedlicher Browser können Fehlverhalten verursachen.\nBei Entwicklung der Tests sollte sich auf die Kernanwendungen/interaktionen der Endnutzer konzentriert werden, um Vorlagen für automatisierte Tests dafür zu erstellen (bspw. Produktsuche, Warenkorb und Bezahlen in einem Webshop).\n\nDiese Tests sind sehr zeit- und ressourcenaufwendig und sollten – wie von Cohn empfohlen – auf ein Minimum reduziert werden. Die Lowlevel-Funktionen sollten sowieso bereits auf den unteren Ebenen der **Test-Pyramide** getestet worden sein.\n\n![End-to-End Tests testen das ganze, voll integrierte System](https://martinfowler.com/articles/practical-test-pyramid/e2etests.png)\n\n# Weitere Anmerkungen\n- Neben automatisierten Tests ist es auch sinnvoll, einige Tests selbst durchzuführen und zu testen, wie man Fehlverhalten der eigenen Anwendung provozieren kann. Feedback und Ergebnisse können dokumentiert werden, um sie später in die Tests zu integrieren.\n\n- Es dreht sich beim automatisierten Testen alles um schnelles Feedback. Es ist daher sinnvoll, die Testpipeline so zu gestalten, dass langsame Tests gegen Ende ablaufen, um die einfachen und schnellen nicht aufzuhalten.","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"C: Beispiel für eine Lernkarte","description":"Die Lernkartei ist Teil der Demo-Kartei, siehe den roten Button auf der Startseite.","date":"2018-05-25T07:24:31.276Z","dateUpdated":"2018-07-06T04:27:51.347Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","nd"],"userDeleted":false,"learningActive":false,"maxCards":1,"daysBeforeReset":7,"learningStart":"2018-05-25T07:24:31.276Z","learningEnd":"2038-01-19T19:42:43.323Z","learningInterval":[1,3,7,28,84],"learners":1,"wordcloud":false,"shuffled":false,"cardType":0,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Test-Pyramide","difficulty":1,"centerTextElement":[false,false,false,false],"date":"2018-05-25T07:31:40.262Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":0,"front":"Die Test-Pyramide von Mike Cohn dient als **Metapher für die Testautomation**.\n\n![Test-Pyramide nach Mike Cohn ([Zeichnung von Ham Vocke](https://martinfowler.com/articles/practical-test-pyramid.html))](https://martinfowler.com/articles/practical-test-pyramid/testPyramid.png)\n\n!!! Tip Lernziel\n Sie sollen den Aufbau der Test-Pyramide beschreiben können und verstehen, welche automatisierten Tests in welcher Quantität und Qualität für eine CI/CD-Pipeline erforderlich sind. </br> </br>\n\n","dateUpdated":"2018-07-06T04:27:51.338Z","back":"Die **Test-Pyramide** ist ein Konzept, ursprünglich von **Mike Cohn** vorgestellt, das eine anschauliche Gliederung von automatisierten Testprozessen in drei Schichten vorschlägt:\n\n1. **Unit Tests** (viele und möglichst kleine Tests von Funktionen und Klassen)\n2. **Service Tests** (weitere, gröbere Tests unter Beteiligung externer Dienste)\n3. **User Interface Tests** (möglichst wenige End-to-End-Akzeptanztests)\n\n!!! Tip Merke \n Tests werden mit **unterschiedlicher Granularität** geschrieben und **je höher die Ebene, desto weniger Tests**! </br></br>\n","hint":"**Fowler, Martin (2006)**: *”TestDouble”*. Online-Artikel, veröffentlicht: 17. Januar 2006. URL: https://martinfowler.com/bliki/TestDouble.html (Stand: 25.05.2018). \n\n**Vocke, Ham (2018)**: *\"The Practical Test Pyramid\"*. Online-Artikel, veröffentlicht: 26. Februar 2018. URL: https://martinfowler.com/articles/practical-test-pyramid.html (Stand: 25.05.2018)\n\n![\"The Practical Test Pyramid\", Zeichnung von Ham Vocke](https://martinfowler.com/articles/practical-test-pyramid/teaser.png)\n\n---\n\n!!! TIP Hinweis\n Diese **Lernkarte** bereitet den Inhalt des Artikels [The Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html) von Ham Vocke auf. Im Zentrum steht die **Test Pyramide** von Mike Cohn und die **Testautomation** im Kontext einer _Continuous Delivery Pipeline_. Das Thema Testautomation wurde von den Teilnehmern des Master-Informatikkurses \"Continuous Delivery\" im SoSe 2018 am Fachbereich MNI der THM bearbeitet.</br></br>Während des Semesters erstellten die Studenten auf .cards jeder für sich ein Kursglossar, Lernkarteien zu einzelnen Kursinhalten, eine Zitatensammlung und eine Prüfungskartei mit insgesamt ca. 200 Karten. In den Sommerferien lernten sie kontinuierlich ca. 500 Karten -- max. 20 täglich -- nach der [5-Fächer-Lernmethode von Sebastian Leitner](https://de.wikipedia.org/wiki/Lernkartei). Wer dies befolgte, erhielt für seine Lernleistung einen Bonus von 15 Prozent auf die Klausurnote. Die Klausur umfasste 15 zufällige Lernziel- und Prüfungsfragen aus allen Lern- und Prüfungskarteien sowie eine Transferaufgabe.\n\n!!! NOTE Danksagung\n Die Lernkarte basiert auf einer Exzerpt-Karte des Kursteilnehmers Felix Brück. ","lecture":"# The Importance of (Test) Automation\nSoftware wird immer wichtiger und bestimmt zunehmend den Alltag. Um mithalten zu können, muss Software schneller entwickelt werden können, ohne an Qualität einzubüßen. \n\n**Continuous Delivery**, ist eine Praxis, bei der eine **Buildpipeline** zum automatischen Testen eingesetzt wird und die damit einen beschleunigten Softwareentwicklungsprozess unterstützen kann, indem sie repetitive, umständliche, händische Tests durch Automatisierung ersetzen und effizienter machen.\n\n# The Test Pyramid\n![Die Test-Pyramide](https://martinfowler.com/articles/practical-test-pyramid/testPyramid.png)\n\nDie **Test-Pyramide** ist ein Konzept, ursprünglich von *Mike Cohn* vorgestellt, das eine simple Gliederung bei der Erstellung von Testsuiten in grob drei Schichten vorschlägt:\n\n1. **Unit Tests** *(viele und möglichst kleine Tests)*\n2. **Service Tests** *(weitere, gröbere Tests)*\n3. **User Interface Tests** *(möglichst wenige High-Level End-to-End-Tests)*\n\n!!! Tip Merke \n Tests werden mit **unterschiedlicher Granularität** geschrieben und **je höher die Ebene, desto weniger Tests**\n\n\n# Unit Tests\n![Unit Tests ersetzen externe Objekte mit Test Doubles](https://martinfowler.com/articles/practical-test-pyramid/unitTest.png)\n\n**Unit Tests** dienen als eine Art Sicherheitsnetz bei Codeänderungen (weshalb sie auch nicht zu stark an die Implementierung gebunden sein sollten) ([Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#WhatToTest)).\n\nAllgemein soll getestet werden, ob eine **Unit** (Einheit) so funktioniert wie erwartet. Dabei ist nicht genau definiert, was eine „Unit“ ist. In einer funktionalen Programmiersprache wären dies z.B. Funktionen, in einer OO Sprache könnten es einzelne Methoden oder ganze Klassen sein [Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#UnitTests).\n\n## Mocking and Stubbing\nUm automatische Tests einfach und möglichst schnell zu halten, werden **Mocks** und **Stubs** benutzt, die anstelle von z.B. teuren Datenbankaufrufen oder HTTP-Queries verwendet werden. Außerdem dienen sie zur Vermeidung von Seiteneffekten und komplexen Testsetups. Es werden also reale Module/Klassen/Funktionen/etc. durch Fake-Versionen ersetzt, die dieselbe Signatur aufweisen. \nDiese sogenannten **Test Doubles** umfassen u.a. (vgl. [Fowler 2006](https://martinfowler.com/bliki/TestDouble.html)):\n- **Mocks**: Sind vorprogrammiert mit Erwartungen an Aufrufen, die sie gemäß den Spezifikationen ihrer realen Vorbilder erhalten sollten, um zu testen, ob alle erwarteten Aktionen ausgeführt werden. Bei unerwarteten Aufrufen können sie Exceptions auswerfen.\n\n- **Stubs**: Sie enthalten vorgefertigte Antworten, die sie für Aufrufe während der Testphase verwenden.\n\n!!! NOTE Hinweis\n Es wird oft unterschieden zwischen **solitary Unit Tests**, bei denen alles durch Stubs und Mocks ersetzt wird und **sociable Unit Tests**, bei denen teilweise mit den realen Objekten getestet wird.\n\n## What to Test?\nGrundsätzlich können Unit Tests für alle Klassen (unabhängig von ihrer Funktion) eingesetzt werden. Es empfiehlt sich jedoch, nur **eine Testklasse pro Produktions-Klasse** zu schreiben. Dabei sollte eine Testklasse **mindestens das *public*-Interface der Klasse abdecken**. ([Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#WhatToTest))\n\nUnit Tests sollten nicht 100% des Codes abdecken, sondern sich auf nicht-trivialen Testpfade (z.B. Happy Path und Grenzwerte) beschränken. Dabei sollten sie nicht zu implementierungsspezifisch sein, da sie sonst - etwa nach einem Refactoring - umgeschrieben werden müssten.\n\n## Test Structure\nEine gute und grundlegende Struktur für Tests allgemein, sieht wie folgt aus (vgl. [Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#TestStructure)):\n1. Testdaten einrichten\n2. Zu testende Methode aufrufen\n3. Sicherstellen, dass die erwarteten Ergebnisse zurückgegeben werden.\nDiese kann man sich auch durch die Alliteration [Arrange, Act, Assert](https://xp123.com/articles/3a-arrange-act-assert/) merken.\n\n\n\n# Integration Tests\nWie der Name vermuten lässt, testen **Integration Tests** die Integration der eigenen Applikation mit applikationsexternen Services (Datenbank, Dateisystem, Netzwerkaufrufe, REST APIs, etc.).\nEs geht also um Fälle, in denen Aktionen die Integration externer Dinge triggern. \n\nIm Falle eines Datenbankaufrufs, könnte dies bspw. so aussehen:\n1. Datenbank starten\n2. Applikation mit DB verbinden\n3. Funktion triggern, die in die DB schreibt\n4. Testen, ob die erwarteten Daten geschrieben wurden, indem man sie aus der DB lädt\n\nGenerell sollten Integration Tests für alle Fälle geschrieben werden, bei denen **Daten serialisiert oder deserialisiert** werden, um sicherzustellen, dass alle externen Abhängigkeiten/Kollaborateure wie erwartet funktionieren. Also z.B. bei:\n- Aufrufe an REST APIs\n- Lesen/Schreiben auf Datenbanken oder Queues\n- Schreiben auf das Dateisystem\n\nEs sollte dabei mit lokalen Instanzen der Abhängigkeiten gearbeitet werden und **nicht mit realen Produktivsystemen** (bei unzähligen automatisierten Tests kann dies im schlimmsten Falle zu einem Denial of Service führen). Ist es nicht möglich, eine eigene Instanz laufen zu lassen, sollten Fake-Versionen implementiert werden, die das reale Verhalten nachahmen. \n\n![Integration mit separatem Service](https://martinfowler.com/articles/practical-test-pyramid/httpIntegrationTest.png)\n\n\n# Contract Tests\nEs kann sein, dass Softwareentwicklung derart organisiert ist, dass unterschiedliche Teams an unterschiedlichen Serviceimplementierungen arbeiten, die zum Schluss zu einem großen, zusammenhängenden System zusammengefügt werden. \n\nDiese unterschiedlichen Services kommunizieren über Interfaces miteinander (dazu nutzen sie etwa REST und JSON via HTTPS, RPC oder bei einer eventgesteuerten, asynchronen Anwendung via Queues oder Channels). Dann ist immer ein Service ein **Consumer** (der Daten abruft) und der andere ein **Provider** (der Daten bereitstellt). </br>(Bei asynchronen Anwendungen auch **Publisher** und **Subscriber**).\n\nDie Spezifikation eines Interfaces kann als **Contract** (Vertrag) angesehen werden.\n\nBeim **Consumer-Driven Contract Test (CDC)** übernimmt das Team des Consumer-Services die Implementierung des Vertrags. Es schreibt also Tests, die das Interface auf alle Daten prüfen, die es benötig/erwartet, um diese dann an das Provider-Team weiterzugeben. Dieses entwickelt nun die API nach diesen Tests. Dabei durchlaufen alle Änderungen kontinuierlich die Tests in der Buildpipeline. Bei Problemen tauschen sich die Teams aus. (Vgl. [Vocke 2018](https://martinfowler.com/articles/practical-test-pyramid.html#ContractTests))\n\n![Consumer-Driven Contract Tests](https://martinfowler.com/articles/practical-test-pyramid/cdc_tests.png)\n\n\n# UI Tests\n**UI Tests** prüfen, ob das User Interface wie erwartet auf Interaktionen reagiert (dazu zählen Webinterfaces genauso, wie Kommandozeilen-Interfaces oder REST API). Dabei kann auf Dinge geachtet werden wie *Verhalten, Layout, Usability* oder *Wahrung des Corporate Designs*.\n\nUI Tests müssen keine vollständigen End-to-End-Tests sein. Dies kann z.B. auch mit Unit Tests gemacht werden, in dem der Frontend-Code mit Backend-Stubs getestet wird.\n\n![](https://martinfowler.com/articles/practical-test-pyramid/ui_tests.png)\n\n!!! NOTE\n Während das Verhalten automatisiert (z.B. mit Tools wie Selenium) getestet werden kann, kommt man spätestens beim Look & Feel an die Grenzen der Automatisierung.\n\n\n# End-to-End Tests\n**End-to-End Tests** (manchmal auch **Broad Stack Tests**) prüfen die Applikation über ihr eigenes Interface. UI Tests können ebenfalls zu hierzu zählen.\n\nJe komplexer das User Interface ist, desto mehr Probleme können bei Tests auftreten. Doch auch Eigenarten unterschiedlicher Browser können Fehlverhalten verursachen.\nBei Entwicklung der Tests sollte sich auf die Kernanwendungen/interaktionen der Endnutzer konzentriert werden, um Vorlagen für automatisierte Tests dafür zu erstellen (bspw. Produktsuche, Warenkorb und Bezahlen in einem Webshop).\n\nDiese Tests sind sehr zeit- und ressourcenaufwendig und sollten – wie von Cohn empfohlen – auf ein Minimum reduziert werden. Die Lowlevel-Funktionen sollten sowieso bereits auf den unteren Ebenen der **Test-Pyramide** getestet worden sein.\n\n![End-to-End Tests testen das ganze, voll integrierte System](https://martinfowler.com/articles/practical-test-pyramid/e2etests.png)\n\n# Weitere Anmerkungen\n- Neben automatisierten Tests ist es auch sinnvoll, einige Tests selbst durchzuführen und zu testen, wie man Fehlverhalten der eigenen Anwendung provozieren kann. Feedback und Ergebnisse können dokumentiert werden, um sie später in die Tests zu integrieren.\n\n- Es dreht sich beim automatisierten Testen alles um schnelles Feedback. Es ist daher sinnvoll, die Testpipeline so zu gestalten, dass langsame Tests gegen Ende ablaufen, um die einfachen und schnellen nicht aufzuhalten.","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"G: Beispiel für eine Mitschrift-Karte","description":"In dieser Kartei werden die Mitschriften aus der SWT Vorlesung nachbearbeitet.","date":"2018-05-09T16:59:37.158Z","dateUpdated":"2018-07-06T12:21:17.219Z","editors":[],"owner":"CYWvz28to9mWFAywP","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","nd"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":2,"difficulty":0,"originalAuthor":"Klinge, Dominik"}, {"subject":"SWT-Mitschrift vom 08.05.2018","front":"![](https://arsnova.thm.de/blog/wp-content/uploads/2018/07/SWT-Mitschrift-08.05.2018.jpg)","back":"(##) Thema: Domänenmodellierung\n\n<img src = https://upload.wikimedia.org/wikipedia/commons/3/39/Grady_Booch%2C_CHM_2011_2_cropped.jpg align=\"right\" width = 130px height = 170px alt=\"Grady Booch\">\n<u>Wer ist **Grady Booch?**</u>\n\n\nGrady Booch ist ein **amerikanischer Informatiker**. \n\nEr gilt als **Pionier** auf dem Gebiet des **modularen** und **objektorientierten Softwareentwurfs**.\n\n<img src = https://upload.wikimedia.org/wikipedia/de/a/ac/Booch.png align=\"left\" width = 350px height = 220px alt=\"Beispiel: Booch Notation\">\n<u>Was trug **Booch** zum **UML-Diagramm** bei?</u>\n\n\nGrundlage für Boochs Mitarbeit an der Unified Modeling Language (UML) war seine **eigene Notation**, die durch ihre **charakteristische grafische Form** für **Klassen** auffällt. \n\nDiese Notation ist **nicht mehr gebräuchlich**.\n\nDie wesentlichen Elemente dieser Notation sind **Klassen** und ihre **Beziehungen** zueinander. \n\n**Klassen** werden durch eine **Wolke** symbolisiert.\n\n<u>Wozu dient die **Abbott-Textanalyse**?</u>\n\nDie Abbott Textanalyse wird durchgeführt, um **Systemkomponenten** zu **identifizieren**.\n\nSie **analysiert** den **Text** nach **Nomen** und kann daraus **navigierbare Klassendiagramme** erstellen.\n\n<u>Wer sind die **drei Amigos**?</u>\n\nDie **Väter von UML**, insbesondere **Grady Booch**, **Ivar Jacobson** und **James Rumbaugh**, auch „Die drei Amigos“ genannt, waren in den 1990er-Jahren bekannte **Vertreter** der **objektorientierten Programmierung**. \n\nAls sie zusammen beim Unternehmen Rational Software beschäftigt waren, entstand die **Idee**, die **verschiedenen Notationssysteme strukturiert zusammenzuführen**.\n\n<u>Was sind **Kardinalitäten**?</u>\n\nKardinalität spielt bei der **Assioziation in Klassendiagrammen** eine Rolle. Damit ist gemeint, dass zwischen **Objekten** von Klassen **Beziehungen** bestehen.\n\nIn UML Klassendiagrammen werden **Assoziationen** mit **Linien** verdeutlicht. \n\nOft wird die **Richtung der Assoziation** mit einem **Pfeil** angegeben.\n\n<u>Was sollte **niemals** in einem **Domänendiagramm** stehen?</u>\n\n**Domäne** kann man sich wie ein **Standbild** vorstellen.\n\nSie sind <u>**nicht**</u> veränderlich.\n\nDeshalb dürfen in einem Domänendiagramm **niemals Methoden** stehen.\n\n<u>Was sind **Schlüsselabstraktionen**?</u>\n\nEine **Klasse** oder ein **Objekt**, die einen Teil des **Vokabulars** des **Problembereichs** bilden. \n\nVorrangiger Nutzen bei der Festlegung solcher Abstraktionen ist die **Eingrenzung des Problems**; die im System befindlichen relevanten Dinge, die für das **Design** benötigt werden, werden somit **betont**, die **unwichtigen Dinge ausgegrenzt**.\n\nQuellen:\n\nInformationen über **Grady Booch** und die **Booch-Notation** [Wikipedia.org](https://de.wikipedia.org/wiki/Grady_Booch)\n\nInformationen über die **Abbot-Textanalyse** [informit.com](http://www.informit.com/articles/article.aspx?p=29043&seqNum=9) \n\nInformationen über die **3 Amigos** [Wikipedia.org](https://de.wikipedia.org/wiki/Unified_Modeling_Language#Von_den_Anfängen_zur_Unified_Modeling_Language_1.x)\n\nInformationen über **Kardinalitäten** [uni-blaetter.net](http://www.uni-blaetter.net/informatik/uml/kardinalitat-und-assoziation-uml/)\n\nInformationen über **Schlüsselabstraktionen** [wiki-hilfe.de](http://www.wiki-hilfe.de/wiki/Schlüsselabstraktion?redirectedFrom=Schl%FCsselkonzept)\n\n","difficulty":0,"centerTextElement":[true,false,false,false],"date":"2018-05-19T13:05:55.114Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":2,"hint":"[x] Abbott-Analyse nachschlagen\n[x] Begriff \"Schlüsselabstraktionen\": Was ist das? Was machen diese?\n[x] Verdienst der drei Amigos? Wer sind sie? Was haben sie gemacht?","dateUpdated":"2018-07-06T12:21:17.200Z","originalAuthor":"Klinge, Dominik"}
\ No newline at end of file
{"name":"M: Beispiel für eine Mitschrift-Karte","description":"In dieser Kartei werden die Mitschriften aus der SWT Vorlesung nachbearbeitet.","date":"2018-05-09T16:59:37.158Z","dateUpdated":"2018-07-06T12:21:17.219Z","editors":[],"owner":"CYWvz28to9mWFAywP","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","nd"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":2,"difficulty":0,"originalAuthor":"Klinge, Dominik"}, {"subject":"SWT-Mitschrift vom 08.05.2018","front":"![](https://arsnova.thm.de/blog/wp-content/uploads/2018/07/SWT-Mitschrift-08.05.2018.jpg)","back":"(##) Thema: Domänenmodellierung\n\n<img src = https://upload.wikimedia.org/wikipedia/commons/3/39/Grady_Booch%2C_CHM_2011_2_cropped.jpg align=\"right\" width = 130px height = 170px alt=\"Grady Booch\">\n<u>Wer ist **Grady Booch?**</u>\n\n\nGrady Booch ist ein **amerikanischer Informatiker**. \n\nEr gilt als **Pionier** auf dem Gebiet des **modularen** und **objektorientierten Softwareentwurfs**.\n\n<img src = https://upload.wikimedia.org/wikipedia/de/a/ac/Booch.png align=\"left\" width = 350px height = 220px alt=\"Beispiel: Booch Notation\">\n<u>Was trug **Booch** zum **UML-Diagramm** bei?</u>\n\n\nGrundlage für Boochs Mitarbeit an der Unified Modeling Language (UML) war seine **eigene Notation**, die durch ihre **charakteristische grafische Form** für **Klassen** auffällt. \n\nDiese Notation ist **nicht mehr gebräuchlich**.\n\nDie wesentlichen Elemente dieser Notation sind **Klassen** und ihre **Beziehungen** zueinander. \n\n**Klassen** werden durch eine **Wolke** symbolisiert.\n\n<u>Wozu dient die **Abbott-Textanalyse**?</u>\n\nDie Abbott Textanalyse wird durchgeführt, um **Systemkomponenten** zu **identifizieren**.\n\nSie **analysiert** den **Text** nach **Nomen** und kann daraus **navigierbare Klassendiagramme** erstellen.\n\n<u>Wer sind die **drei Amigos**?</u>\n\nDie **Väter von UML**, insbesondere **Grady Booch**, **Ivar Jacobson** und **James Rumbaugh**, auch „Die drei Amigos“ genannt, waren in den 1990er-Jahren bekannte **Vertreter** der **objektorientierten Programmierung**. \n\nAls sie zusammen beim Unternehmen Rational Software beschäftigt waren, entstand die **Idee**, die **verschiedenen Notationssysteme strukturiert zusammenzuführen**.\n\n<u>Was sind **Kardinalitäten**?</u>\n\nKardinalität spielt bei der **Assioziation in Klassendiagrammen** eine Rolle. Damit ist gemeint, dass zwischen **Objekten** von Klassen **Beziehungen** bestehen.\n\nIn UML Klassendiagrammen werden **Assoziationen** mit **Linien** verdeutlicht. \n\nOft wird die **Richtung der Assoziation** mit einem **Pfeil** angegeben.\n\n<u>Was sollte **niemals** in einem **Domänendiagramm** stehen?</u>\n\n**Domäne** kann man sich wie ein **Standbild** vorstellen.\n\nSie sind <u>**nicht**</u> veränderlich.\n\nDeshalb dürfen in einem Domänendiagramm **niemals Methoden** stehen.\n\n<u>Was sind **Schlüsselabstraktionen**?</u>\n\nEine **Klasse** oder ein **Objekt**, die einen Teil des **Vokabulars** des **Problembereichs** bilden. \n\nVorrangiger Nutzen bei der Festlegung solcher Abstraktionen ist die **Eingrenzung des Problems**; die im System befindlichen relevanten Dinge, die für das **Design** benötigt werden, werden somit **betont**, die **unwichtigen Dinge ausgegrenzt**.\n\nQuellen:\n\nInformationen über **Grady Booch** und die **Booch-Notation** [Wikipedia.org](https://de.wikipedia.org/wiki/Grady_Booch)\n\nInformationen über die **Abbot-Textanalyse** [informit.com](http://www.informit.com/articles/article.aspx?p=29043&seqNum=9) \n\nInformationen über die **3 Amigos** [Wikipedia.org](https://de.wikipedia.org/wiki/Unified_Modeling_Language#Von_den_Anfängen_zur_Unified_Modeling_Language_1.x)\n\nInformationen über **Kardinalitäten** [uni-blaetter.net](http://www.uni-blaetter.net/informatik/uml/kardinalitat-und-assoziation-uml/)\n\nInformationen über **Schlüsselabstraktionen** [wiki-hilfe.de](http://www.wiki-hilfe.de/wiki/Schlüsselabstraktion?redirectedFrom=Schl%FCsselkonzept)\n\n","difficulty":0,"centerTextElement":[true,false,false,false],"date":"2018-05-19T13:05:55.114Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":2,"hint":"[x] Abbott-Analyse nachschlagen\n[x] Begriff \"Schlüsselabstraktionen\": Was ist das? Was machen diese?\n[x] Verdienst der drei Amigos? Wer sind sie? Was haben sie gemacht?","dateUpdated":"2018-07-06T12:21:17.200Z","originalAuthor":"Klinge, Dominik"}
\ No newline at end of file
{"name":"Z: Beispiel für eine Notiz-Karte","description":"Diese Notiz dient als Abschlusskarte in der Demo-Kartei.","date":"2018-07-05T04:33:28.173Z","dateUpdated":"2018-07-06T04:17:55.889Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","nd"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":8,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Letzte Karte","front":"**Los geht's:** Klick auf **Startseite** in der Fußzeile. Wenn du in der Vollbildansicht bist, muss du diese zuvor verlassen. Auf der Startseite siehst du, wie sich eine **bunte Wolke** mit Karteinamen aufbaut. Die Größe der Schrift entspricht der Anzahl der Karteikarten. Klick auf eine Kartei, um deren Beschreibung zu sehen. Die Wolke ist nur ein Ausschnitt aus der Menge der Karteien, die von der .cards-Redaktion empfohlen werden. \n\n+ Log dich mit deinem **THM-Konto** ein und erstelle eigene Karteien für dein Studium.\n+ Lerne die Karten **regelmäßig**, so dass du das Wissen aus dem Studium sehr, sehr lange behältst.Schau dir dazu die Infos und Videos auf den Portalseiten [\"Lernen\"](https://informatik.cards/learning) und [\"FAQ\"](https://staging.arsnova.cards/faq) an!\n+ Folge dem Slogan von .cards: **Organize. Learn. Remember.**","difficulty":1,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-05T04:43:37.045Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":8,"dateUpdated":"2018-07-06T04:16:28.211Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"P: Beispiel für eine Notiz-Karte","description":"Diese Notiz dient als Abschlusskarte in der Demo-Kartei.","date":"2018-07-05T04:33:28.173Z","dateUpdated":"2018-07-06T04:17:55.889Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","nd"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":8,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Letzte Karte","front":"**Los geht's:** Klick auf **Startseite** in der Fußzeile. Wenn du in der Vollbildansicht bist, muss du diese zuvor verlassen. Auf der Startseite siehst du, wie sich eine **bunte Wolke** mit Karteinamen aufbaut. Die Größe der Schrift entspricht der Anzahl der Karteikarten. Klick auf eine Kartei, um deren Beschreibung zu sehen. Die Wolke ist nur ein Ausschnitt aus der Menge der Karteien, die von der .cards-Redaktion empfohlen werden. \n\n+ Log dich mit deinem **THM-Konto** ein und erstelle eigene Karteien für dein Studium.\n+ Lerne die Karten **regelmäßig**, so dass du das Wissen aus dem Studium sehr, sehr lange behältst.Schau dir dazu die Infos und Videos auf den Portalseiten [\"Lernen\"](https://informatik.cards/learning) und [\"FAQ\"](https://staging.arsnova.cards/faq) an!\n+ Folge dem Slogan von .cards: **Organize. Learn. Remember.**","difficulty":1,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-05T04:43:37.045Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":8,"dateUpdated":"2018-07-06T04:16:28.211Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"D: Beispiel für eine Prüfungskarte","description":"Vorlesung Objektorientierte Programmierung nach Thomas Letschert im Sommersemester 2006.","date":"2018-07-05T09:22:35.847Z","dateUpdated":"2018-07-06T08:00:32.312Z","editors":[],"owner":"Z3LfhpTsXcbvspRtu","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":5,"difficulty":2,"originalAuthor":"Thelen, Christoph"}, {"subject":"Vererbung","front":"Das Programm\n\n~~~~~~~~~~~C++\nclass Basis {\npublic:\n Basis() : x(0) {}\n Basis(int pb) : x(pb) {}\n Basis(Basis &b): x(b.x) {}\n int x;\n};\n\nclass Abgeleitet : public Basis {\npublic:\n Abgeleitet() {}\n Abgeleitet(int y) : Basis(y) {}\n Abgeleitet(Abgeleitet &a) {}\n};\n\nint main() {\n Abgeleitet a1(4711);\n Abgeleitet a2(a1); // Kopierkonstruktor\n cout << \"a1.x: \" << a1.x << \" a2.x: \" << a2.x << endl;\n}\n~~~~~~\n\nerzeugt seltsamerweise die Ausgabe\n\n```\na1.x: 4711 a2.x: 0\n```\n\nWarum ist das so?","back":"Der automatisch generierte Kopierkonstruktor ruft den Defaultkonstruktor der Basisklasse auf. \n\nDieser belegt die Komponente `x` mit 0.","hint":"Sofern der Kopierkonstruktur der Basisklasse aufgerufen werden soll, muss dies in der Unterklasse explizit angegeben werden:\n\n~~~~~~C++\nclass Abgeleitet : public Basis {\npublic:\n Abgeleitet () {}\n Abgeleitet (int y) : Basis(y) {}\n Abgeleitet (const Abgeleitet &a)\n : Basis(a) // <-- OK: KOPIER-Konstruktor aktivieren\n {}\n};\n~~~~~~\n","difficulty":2,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-04T16:11:00.441Z","learningGoalLevel":1,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":5,"dateUpdated":"2018-07-06T07:57:37.865Z","originalAuthor":"Thelen, Christoph"}
\ No newline at end of file
{"name":"J: Beispiel für eine Prüfungskarte","description":"Vorlesung Objektorientierte Programmierung nach Thomas Letschert im Sommersemester 2006.","date":"2018-07-05T09:22:35.847Z","dateUpdated":"2018-07-06T08:00:32.312Z","editors":[],"owner":"Z3LfhpTsXcbvspRtu","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":5,"difficulty":2,"originalAuthor":"Thelen, Christoph"}, {"subject":"Vererbung","front":"Das Programm\n\n~~~~~~~~~~~C++\nclass Basis {\npublic:\n Basis() : x(0) {}\n Basis(int pb) : x(pb) {}\n Basis(Basis &b): x(b.x) {}\n int x;\n};\n\nclass Abgeleitet : public Basis {\npublic:\n Abgeleitet() {}\n Abgeleitet(int y) : Basis(y) {}\n Abgeleitet(Abgeleitet &a) {}\n};\n\nint main() {\n Abgeleitet a1(4711);\n Abgeleitet a2(a1); // Kopierkonstruktor\n cout << \"a1.x: \" << a1.x << \" a2.x: \" << a2.x << endl;\n}\n~~~~~~\n\nerzeugt seltsamerweise die Ausgabe\n\n```\na1.x: 4711 a2.x: 0\n```\n\nWarum ist das so?","back":"Der automatisch generierte Kopierkonstruktor ruft den Defaultkonstruktor der Basisklasse auf. \n\nDieser belegt die Komponente `x` mit 0.","hint":"Sofern der Kopierkonstruktur der Basisklasse aufgerufen werden soll, muss dies in der Unterklasse explizit angegeben werden:\n\n~~~~~~C++\nclass Abgeleitet : public Basis {\npublic:\n Abgeleitet () {}\n Abgeleitet (int y) : Basis(y) {}\n Abgeleitet (const Abgeleitet &a)\n : Basis(a) // <-- OK: KOPIER-Konstruktor aktivieren\n {}\n};\n~~~~~~\n","difficulty":2,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-04T16:11:00.441Z","learningGoalLevel":1,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":5,"dateUpdated":"2018-07-06T07:57:37.865Z","originalAuthor":"Thelen, Christoph"}
\ No newline at end of file
{"name":"F: Beispiel für eine To-Do-Karte","description":"Test der Markdeep-Funktionalität","date":"2018-05-06T16:39:34.184Z","dateUpdated":"2018-07-06T08:11:09.628Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":9,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Markdeep-Test","front":"(##) Teste alle Optionen der Auszeichnungssprache Markdeep\n\n**Markdeep Feature Demo** von Morgan McGuire\n\nThis demonstration documents the features of\n[Markdeep](http://casual-effects.com/markdeep) and acts as a test for\nit. Markdeep is a text formatting syntax that extends Markdown, and a\nJavascript program for making it work in browsers. The two most\npowerful features are its ability to run in any **web browser** on the\nclient side and the inclusion of **diagrams**.\n\n[Click here](https://casual-effects.com/markdeep/features.md.html?noformat)\nto see this document without automatic formatting.\n\nMarkdeep is free and easy to use. It doesn't need a plugin, or\nInternet connection. There's nothing to install. Just start\nwriting in Vi, Nodepad, Zed, Emacs, Visual Studio, Atom, or another\neditor! You don't have to export, compile, or otherwise process\nyour document.\n\nIf you want to support development of Markdeep, just buy my\n[Graphics Codex](http://graphicscodex.com) book for $10 on Amazon. Revenue from that funds my\nopen source projects.\n\nBasic Formatting\n=======================================================================================\nText formatting: \n\n Source | Result\n-----------------------------------------|------------------------------\n`**bold**` | **bold**\n`__bold__` | __bold__\n`*italic*` | *italic*\n`_italic_` | _italic_\n`~~strikethrough~~` | ~~strikethrough~~\n<code>`inline code`</code> | `inline code`\n`5 kg/m^3` | 5 kg/m^3\n\nYou can add CSS to change the styles. See the Custom Formatting section\nfor some examples.\n\nFormatted text may **cross\nlines** and be as small as **a** single character. It can _also\n be indented and\n split across lines_ simultaneously.\n\nMarkdeep intelligently does not apply bold or italic formatting to\nmath expressions such as x = 3 * y - 2 * z or WORDS_WITH_INTERNAL_UNDERSCORES.\nIt also protects HTML `<tags>` in code blocks from disappearing.\n\nIf you _want_ italics or bold inside of a word, for example in: SCUBA = <b>S</b>elf <b>C</b>ontained\n<b>U</b>nderwater <b>B</b>reathing <b>A</b>pparatus, then just use HTML `<b>` and `<i>`\ntags---a markdown syntax won't be any more readable in that case.\n\nExponents only work for positive and negative integers. For arbitrary exponents,\nuse LaTeX notation: `$x^y$` ==> $x^y$, or HTML tags: `x<sup>y</sup>` ==> x<sup>y</sup>.\n\nLinks\n---------------------------------------------------------------------------------------\nThere are many forms of implicit and explicit links:\n\n\n Source | Result\n-------------------------------------------|---------------------------------------------\n`[hyperlink](http://casual-effects.com)` | [hyperlink](http://casual-effects.com)\n`[hyperlink](\"http://casual-effects.com\")` | [hyperlink](\"http://casual-effects.com\")\n`<http://casual-effects.com>` | <http://casual-effects.com> \n`http://casual-effects.com` | http://casual-effects.com\n`morgan@casual-effects.com` | morgan@casual-effects.com\n`test@foo.co.uk` | test@foo.co.uk\n`<test@foo.co.uk>` | <test@foo.co.uk>\n`Lists section` | Lists section\n`Tiny Grids subsection` | Tiny Grids subsection\n`Section [Lists]` | Section [Lists]\n`sec. [lists]` | sec. [lists]\n`subsection [lists]` | subsection [lists]\n`table [states]` | table [states]\n`tbl. [states]` | tbl. [states]\n`Table [states]` | Table [states]\n`figure [robot]` | figure [robot]\n`fig. [robot]` | fig. [robot]\n`Figure [robot]` | Figure [robot]\n`lst. [sort]` | lst. [sort]\n`listing [sort]` | listing [sort]\n`Listing [sort]` | Listing [sort]\n`[New York Times][nyt]` | [New York Times][nyt]\n`[Google][]` | [Google][]\n`footnote [^syntax]` | footnote [^syntax]\n`[#Kajiya86]` | [#Kajiya86]\n\nAny section header name followed by \"section\", \"subsection\", or \"sec.\" will automatically be\nlinked to that section. To link by number, use one of those key words followed by the section\nname in brackets. This won't work if you use the actual word \"section\" _as the title of a\nsection_...but it would be unexpected to have a section named \"section\" in a real document\nanyway.\n\nYou can also insert HTML anchor (`<a>`) tags to create arbitrary internal links.\n\nReference-style links include arbitrary formatted text in brackets\nfollowed by a case-insensitive symbolic name that must be defined\nelsewhere in the document:\n\n- Example using a symbolic name: [New York Times][nyt]\n- Example using the text as its own symbol: [Google][]\n\nPut the definitions at a convenient location elsewhere in the document:\n\n~~~~~~~~~~~~none\n [nyt]: http://nytimes.com\n [google]: http://google.com\n~~~~~~~~~~~~\n\nMarkdeep also supports footnotes, endnotes [^syntax], and citations\n[#Kajiya86] using a similar syntax. The actual notes and bibliography\nmay be placed at the bottom of the document:\n\n~~~~~~~~~~~~~~~~none\n [#Kajiya86]: James T. Kajiya. 1986 ...\n\n [^syntax]: Endnotes look like ...\n~~~~~~~~~~~~~~~~\n\nRegular links may also have attributes, for example,\n[this link will directly download](http://casual-effects.com/markdeep/robot.jpg download).\n\nURLs in explicit links may be surrounded by optional `\"` quotation `\"` marks. If your URL\ncontains parentheses, then it _must_ be surrounded in quotation marks to make it unambigious:\n\n- [a link with parens](\"http://casual-effects.com(bar)\")\n- [](\"http://casual-effects.com(bar)\")\n\nURLs with various forms of special characters are handled well even without quotation marks:\n\n- [hyperlinks to URLs with underscores](https://archive.org/stream/Bazin_Andre_What_Is_Cinema_Volume_1/Bazin_Andre_What_Is_Cinema_Volume_1_djvu.txt)\n- https://archive.org/stream/Bazin_Andre_What_Is_Cinema_Volume_1/Bazin_Andre_What_Is_Cinema_Volume_1_djvu.txt\n\nYou can also use the CommonMark angle bracket syntax\n`<http://foo.com/bar?arg=value&hello>` ==>\n<http://foo.com/bar?arg=value&hello> provided that your URL only\ncontains lower-case letters. Otherwise the browser interprets it\nas a tag and converts it to lowercase before Markdeep runs.\n\n**Bibliography**:\n[#Kajiya86]: James T. Kajiya. 1986. The Rendering Equation. \nIn _Proceedings of Computer Graphics and Interactive Techniques \n(SIGGRAPH '86)_, ACM, 143-150. http://dx.doi.org/10.1145/15922.15902\n\n\n[^syntax]: Endnotes look like reference-style links with an empty text\nfield. Endnotes may not contain multiple paragraphs (sorry, David\nFoster Wallace), although they may refer to _other_ endnotes.\n\n\n[nyt]: http://nytimes.com\n[google]: http://google.com\n\n\nLists\n---------------------------------------------------------------------------------------\n\nA blank line or line ending in a colon must precede lists. Lists have lines that begin with a\nnumber (which is not required to increment) and a period, or a bullet character (-, *, +). They\ncan also be nested. Example:\n\n~~~~~~~~~~~~~~~~~~~~~~~\n1. Monday\n2. Tuesday\n 1. Morning\n 2. Afternoon\n3. Wednesday\n - Bullets\n - Bullets\n1. Thursday\n + Bullets\n + Bullets\n1. Friday\n * Bullets\n~~~~~~~~~~~~~~~~~~~~~~~\n\nExamples of lists and floating diagrams:\n *****************************\n1. Monday * A B C *\n2. Tuesday * *-------->o<------->o *\n 1. Morning * ^ / ^ | *\n 2. Afternoon * | v \\ v *\n3. Wednesday * o----->o---->o<---->* *\n - Bullets * D E F G *\n - Bullets *****************************\n4. Thursday\n5. Friday\n\n\nA list with just bullets:\n- Bread\n- Fish\n- Milk\n- Cheese\n\n\nA list containing a code block:\n\n1. This is the first list item.\n\n ~~~~~~\n // This is a code block\n if (x > 0) printf(\"hello!\\n\");\n ~~~~~~\n \n1. This is the second list item.\n\n\n- Level 1\n - Level 2\n - Level 3\n- Level 1 again\n\n\n- 1\n - 1.a\n - 1.a.i\n - 1.a.ii\n - 1.b\n\nLists can also:\n\n* Use asterisks\n* Instead of\n* Minus signs\n* `or have code`\n* *and* other formatting\n\nor\n\n+ Use plus\n+ Signs\n\n\nLists with blank lines between the elements are formatted with more spacing. There's actually\nnothing special about this...that's just the regular paragraph separator.\n\n\n1. Here's a list with some large elements that I chose to format by putting a blank line\n between the elements to make them more visually distinguished.\n\n2. That's necessary with paragraph-sized elements; otherwise the\n text would appear to run together into a wall of text!\n \n - You can also\n - Nest lists within lists with spaces\n\n\nLists that begin with a number other than 1 use that number as the start index. The subsequent\nnumbers are irrelevant and automatically replaced with ascending numbers:\n\n6. A list that starts at six!\n1. and just\n1. keeps going...\n\nDefinition Lists\n------------------------------------------------------------------------------\n\nApple\n: Pomaceous fruit of plants of the genus Malus in \n the family Rosaceae.\n\n Multiple paragraphs are supported.\n\nOrange\n: The fruit of an evergreen tree of the genus Citrus.\n\n - Can also\n - Put lists\n - In definitions\n\nDefinition lists with short definitions are formatted more tersely:\n\nGrapes\n: Available in purple (\"red\") and green (\"white\") varieties.\n\nBananas\n: Only yellow.\n\nSchedule Lists\n------------------------------------------------------------------------------\n\nSchedule lists contain titles that begin with a valid date. After the\ntitle, arbitrary indented content appears, including lists, text, and\nequations:\n\n~~~~~~~~~~~~none\nTuesday Feb 16, 2016: Project Launch\n - Create specifications\n - Initialize revision control system\n \nFriday Feb 19, 2016: Build Milestone\n - Build system fully functional\n - Placeholder unit tests committed\n\n\n(Monday Feb 29, 2016): Office Closed\n~~~~~~~~~~~~\n\nIf the schedule is sufficiently long and dense, then a calendar preview\nis shown before it. Entries in parenthesis with no further details\nare formatted with a more subtle style.\n\nFormatted schedule lists\nlook like:\n\nTuesday Feb 16, 2016: Project Launch\n - Create specifications\n - Initialize revision control system\n\nFriday Feb 19, 2016: Build Milestone\n - Build system fully functional\n - Placeholder unit tests committed\n \n _Plan for weekend overtime if we miss this milestone_\n \nWednesday Feb 24, 2016: Site Visit\n **Whole team vistits client**. Dress appropriately.\n\nFriday Feb 26, 2016: Demo Milestone\n - Internal demonstrations for management\n - QA reports due\n\n(Monday Feb 29, 2016): Office Closed\n\nTuesday Mar 1, 2016: Code Freeze\n - Commit final features before this date\n - Only priority 1 fixes with issue tracking numbers\n after this point\n\nMonday Mar 7, 2016: Beta\n\nWednesday Mar 16, 2016: Gold\n\nDates can be in any unambigous format that includes a month, day, and\nfour-digit year between 1000 and 2999, such as:\n\n- 2001-03-01\n- 1 Apr. 1999\n- 4-07-1976\n- February 16, 2016\n- 2020 Jan. 15\n- May 15th, 1982\n\nThe US date format MM/DD/YYYY is not supported because it is\nambiguous. The date may include the name of a day of the week\n(e.g., Sunday). It will be replaced with the correct day.\n\nWhen months are given by name, they must match the localization\nsettings.\n\n\nBlock Quotes\n------------------------------------------------------------------------------\n\nEmail-style indenting creates a blockquote:\n\n> This is an indented blockquote: Ut at felis diam. Aliquam massa odio, pharetra ut neque sed, commodo\n> dignissim orci. Curabitur quis velit gravida, blandit diam nec,\n> lacinia quam. Maecenas pharetra, velit in vestibulum auctor, diam\n> ipsum suscipit arcu, non sodales orci nibh sit amet leo. Nulla dictum\n\nBlockquotes formatted in the style of an actual quotation receive\nspecial treatment for fancy quoting:\n\n> \"You want to make it seem alive and effortless and fun, but that's an\n> art that took me 25 years to really learn. I wanted to do it very much\n> 25 years ago, but I didn't know how.\"\n>\n> -- David O. Russell, director of American Hustle\n\n\n\nTables\n------------------------------------------------------------------------------\n\nSource:\n~~~~~~~~~~~~none\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n [Optional caption]\n\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n[Table [states]: Caption with label.]\n\nItem | Type | Cost\n---- |:----:| ----:\nFish | F | 1.00\nAxe | W | 3.25\nGold | I |20.50\n\n\n | A |\n |---|\n | B |\n | C |\n | D |\n\n~~~~~~~~~~~~\n\nResult:\n\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n [Optional caption]\n\n\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n[Table [states]: Caption with label.]\n\n\nWith alignment:\n\nItem | Type | Cost\n---- |:----:| ----:\nFish | F | 1.00\nAxe | W | 3.25\nGold | I |20.50\n\n\nSingle-column:\n\n | A |\n |---|\n | B |\n | C |\n | D |\n\n\nPage Breaks\n------------------------------------------------------------------------------\n\nTo support other markdown conventions, `\\pagebreak` and `\\newpage` will insert a page break in\na document when printed or converted to PDF. You can also use a pattern of a series of five `+`\nsigns on their own line, which will form a horizontal rule on screen and a new page when\nprinted.\n\n++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\n\nTo make top-level section headers also force page breaks, add the following to your\ndocument or CSS file:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>.md h1, .md .nonumberh1 {page-break-before:always}</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nImages and Video\n------------------------------------------------------------------------------\n\nThere's no natural way to embed an image into a document that is also readable as plain\ntext. Markdeep follows markdown's somewhat reasonable syntax. The source\n\n`![A picture of ARSnova]\n(https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)` \n\nbecomes:\n\n![A picture of ARSnova](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)\n\nOptional labels may be applied:\n\n`![Figure [ARSnova]: A picture of ARSnova]\n(https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)` \n\n![Figure [robot]: ARSnova's options for instant feedback in the classroom](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)\n\nAny text after the URL is used as HTML attributes. If the attributes\ninclude width or height specifications, then the image is linked to\nthe original.\n\n````\n![Figure [robot2]: A picture of ARSnova with a caption larger\nthan it.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"150px\" border=\"1\")\n````\n\n![Figure [robot2]: A picture of ARSnova with a caption larger\nthan it.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"150px\" border=\"1\")\n\n![Really long captions are justified, not centered. This happens automatically when the caption spans multiple lines. You can also use custom CSS to change the formatting of captions.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"150px\" border=\"1\")\n\n![Floating robot with a large caption.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"20%\") If the image is embedded in a\nparagraph and has a caption, then it floats right and any width\nspecification is propagated to the full captioned image, for example, \nthe image to the right of this paragraph. Use a space as your caption\nif you want this behavior but don't actually want a visible caption.\n\nYou can also just use a raw HTML `<img>` tag: \n\n`<img \nsrc=\"https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png\"\n width=\"128\" border=\"2\">`\n\n<img \nsrc=\"https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png\" \nwidth=\"128\" border=\"2\">\n\nCaptionless images work as well. Source \n\n`![](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)` \n\nbecomes:\n\n![](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)\n\nImages are centered if they appear in their own paragraph block and inlined otherwise. Grids of\nimages are recognized and laid out as grids using HTML tables:\n\n\n![1](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![2](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![3](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100)\n![4](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![5](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![This image has a<br>long caption](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100)\n\n\nSymbol Substitutions\n------------------------------------------------------------------------------\n\nMarkdeep converts `<->`, `<==>`, `->`, `-->`, `<-`, `<--`, `==>`, and `<==` to arrows if they\naren't in a code block or latex expression and are surrounded by whitespace. Examples:\n\n- if this ==> then that\n- here <== there\n- this <==> that\n- A <- B\n- X -> Y\n- back <-> forth\n- long --> way\n- back <-- there\n\nTwo or three minus signs are converted to an em dash--like that.\n\nAn \"x\" between numbers, such as 1920x1080 or 3 x 4, will be converted to the times\nsymbol.\n\nNegative numbers, such as -5 and minus signs between numbers such as \n2 - 1, will have a minus sign instead of a hyphen.\n\nDegrees are reformatted to the degree symbol:\n\n- Cold, 37-degree F water.\n- A 45-degree angle.\n- A right angle's measure is 90 degrees. \n\nIt doesn't reformat the word \"degree\" when not following digits:\n\n- Don't give me the third degree!\n- I have two degrees from MIT.\n\n\"Smart quotes\" are applied for double-quote marks based on position\nrelative to whitespace:\n\n\"a\" b c\n\na \"b\" c\n\na b \"c\"\n\na \"b!\" c\n\na \"b,\" c\n\na \"b\". C\n\na, \"b\" c\n\na---\"b\"---c\n\na (\"b\") c\n\n\"error\" ==> \"correction\"\n\nInch or minute markers such as 3' 9\" are not converted. Quotation\nmarks in <span style=\"color:#F00\">HTML attributes</span> and\nin code blocks, e.g., `var x = \"hello world\"`, are not converted.\n\n\nAdmonitions\n-----------------------------------------------------------------------------\n\nAdmonitions are small break-out boxes with notes, tips, warnings, etc. for the reader. They\nbegin with a title line of a pattern of three exclaimation marks, an optional CSS class, and an\noptional title. All following lines that are indented at least three spaces are included in the\nbody, which may include multiple paragraphs.\n\nThe default stylesheet provides classes for \"note\" (default), \"tip\", \"warning\", and \"error\".\nThese are case insensitive and ignore any colon after the CSS class. Here are some examples:\n\n````````````````````````````````````````````````````````````` none\n!!!\n I'm a note. Don't mind me, I'm just sitting here.\n\n!!! note\n Another note.\n\n!!! Tip\n Close the door on the way out.\n\n!!! WARNING\n I'm a warning, perhaps. *Something might happen!*\n\n!!! ERROR: Seriously\n Watch out, something **bad** could happen.\n\n This is still more error text.\n`````````````````````````````````````````````````````````````\n\n!!!\n I'm a note. Don't mind me, I'm just sitting here.\n\n!!! note\n Another note.\n\n!!! Tip\n Close the door on the way out.\n\n!!! WARNING\n I'm a warning, perhaps. *Something might happen!*\n\n!!! ERROR: Seriously\n Watch out, something **bad** could happen.\n\n This is still more error text.\n\n\nFenced Code Blocks\n------------------------------------------------------------------------------\n\nSet off large blocks of code using equal-length strings of tilde `~`\nor back-tick <code>`</code> characters. Each produces a different CSS\nclass so that they can be styled differently. \n\nBy default, tilde blocks have lines before and after them and are\ninset for use as code listings instead of large inline code\nblocks. Both styles receive syntax coloring and automatic programming\nlanguage detection.\n\nYou can override automatic programming language detection by putting\nthe name of the language immediately following the first fence. You can\nspecify a custom CSS class for a code block by placing its name after the\nlanguage name.\n\n<pre><code>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C</code>\nvoid insertion_sort(int data[], int length) {\n for (int i = 0; i < length; ++i) {\n ...\n }\n}\n<code>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</code>\n</pre>\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C\nvoid insertion_sort(int data[], int length) {\n for (int i = 0; i < length; ++i) {\n ...\n }\n}\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nAlternative back-tick markup:\n\n````````````````````````````````````\ndef insertionSort(data):\n for i in range(0, len(data)):\n j = i;\n\n while (j > 0) and (data[j] < data[j - 1]):\n temp = data[j]\n data[j] = data[j - 1]\n data[j] = temp\n --j\n````````````````````````````````````\n\n### HTML and LaTeX Blocks\n\nYou can even have HTML in a code block:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<b>Show this</b> HTML as <i>source</i>,\n<code>not code</code>.\n<img src=\"robot.jpg\">\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n`<img src=\"robot.jpg\">`\n\n`````````\n<img src=\"robot.jpg\">\n`````````\n\nLaTeX and other languages that use dollar signs work fine inside code\nfences:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n$ \\int_0^1 x^2 dx $\n\n$$$a = $$$e\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n...and of course, Markdeep inside Markdeep:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n- Do not \n- Format\n - this as a **list**!\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n### Code Blocks with Captions\n\nCode listings may have captions:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Python\ndef insertionSort(data):\n for i in range(0, len(data)):\n j = i;\n\n while (j > 0) and (data[j] < data[j - 1]):\n temp = data[j]\n data[j] = data[j - 1]\n data[j] = temp\n --j\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n[Listing [sort]: An insertion sort]\n\nIf you don't have a lot of exposition to share, then code blocks can be back to back:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\nprintf(\"Hello\\n\");\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\nprintf(\"World\\n\");\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\n### Multi-code Blocks and Custom CSS \n\nYou can interlace different languages or CSS classes within a single code block, but each is required\nto specify the language in this case. This is convenient for highighting lines or showing the \ntrace of an interactive session.\n\nAn example of a fenced code block with a CSS class:\n\n<pre><code>~~~~~~~~~~~~~~ Python input</code>\n>>> x = [1, 2, 3, 4]\n>>> [y * 2 for y in x]\n<code>~~~~~~~~~~~~~~ none output</code>\n[2, 4, 6, 8]\n<code>~~~~~~~~~~~~~~ Python input</code>\n>>> x + [5]\n<code>~~~~~~~~~~~~~~ none output</code>\n[1, 2, 3, 4, 5]\n<code>~~~~~~~~~~~~~</code>\n[This listing combines multiple code blocks to show the input and output of an interactive section.]\n</pre>\n\nAnd its result:\n\n~~~~~~~~~~~~~~ Python input\n>>> x = [1, 2, 3, 4]\n>>> [y * 2 for y in x]\n~~~~~~~~~~~~~~ none output\n[2, 4, 6, 8]\n~~~~~~~~~~~~~~ Python input\n>>> x + [5]\n~~~~~~~~~~~~~~ none output\n[1, 2, 3, 4, 5]\n~~~~~~~~~~~~~~\n[This listing combines multiple code blocks to show the input and output of an interactive section.]\n\n\n<style>\n.md code > .input { font-style: italic; }\n.md code > .output { font-weight: bold; background: #FF7; margin-left: -20px; padding-left: 20px}\n</style>\n\n\n\n### Less-than Signs in Code###\n#### Summary ####\n\nLess-than and greater-than signs (`<` and `>`) do not need to be escaped in diagrams or code\nas long as they do not appear immediately adjacent to a letter. Usually adding spaces or\nusing inline code backquote escaping will suffice even in those cases.\n\nIf you have trouble with less-than and greater-than signs right next to capitalized\nletters in code blocks, do _one_ of the following:\n\n- Put spaces after angle brackets: `std::vector< Capitalized >`\n- Use HTML entity escapes: `std::vector<Capitalized>`\n- Wrap code examples in `<script type=\"preformatted\">...</script>`\n- Wrap your whole document in `<script type=\"preformatted\">...</script>`\n\n<!-- The following list uses Unicode characters that look like ASCII\n but aren't, in order to prevent Markdeep and HTML from processing\n the code examples themselves. Do not copy from the document or you'll\n copy those invisible characters. Instead, see the actual code\n examples farther down the page. -->\n \nYou don't need to do this for legal HTML or XML in code blocks.\n\n#### Details ####\nLess-than and greater-than signs are allowed in code blocks\n(as well as anywhere else in Markdeep), and will be handled\ncorrectly if they are followed by a whitespace character.\n\nLikewise, legal HTML and XML are correctly processed as code\nwhen in code blocks.\n\nHowever, because browsers interpret \"`<`\" _immediately followed by_\na character as an HTML tag, less-than signs without a following space\nmust be formatted more carefully in shell scripts and languages such\nas C++ and Java. \n\nIf the character following the less-than sign is lower-case, for\nexample in: \"`std::vector<int>`\", then no consideration is\nneeded. If the character following less-than is a capital letter, then\nthe browser will automatically make it lower case. If the following\ncharacter is a slash, then the browser will interpret it as a stray\ntag and automatically remove it.\n\nIf you care most about being able to read your document in a browser\nwhen the markdeep.js script is not available (due to no local copy and\nno Internet connection), then either use surrounding whitespace or\nuse HTML entity codes to avoid incorrect processing of less-than signs.\n\n**Reformatted Examples:**\n\n~~~~~~~~~~~~~~~~~~~~\n#include <foo.h>\nls < /dev/null\nls</dev/null\nstd::vector< Capitalized > array;\nstd::vector<Capitalized> array;\n~~~~~~~~~~~~~~~~~~~~\n\nIf care more about not having to reformat your code examples, then\njust include them in preformatted `<script>` blocks:\n\n**Script Block Examples:**\n\n<script type=\"preformatted\">\n~~~~~\n#include <foo.h>\nstd::vector<Capitalized> array;\nls</dev/null\n~~~~~\n</script>\n\nYou can also include your entire document in a preformatted script\nblock to avoid the need for marking up each code (and inline code)\nexample.\n\n\n\nDiagrams\n--------------------------------------------------------------------------------\n\nDiagrams can be inserted alongside, as in this ****************************\nexample, or between paragraphs of text as shown * .---------. *\nbelow. * | Server |<------. *\n * '----+----' | *\nThe diagram parser leaves symbols used as labels * | | *\nunmodified, so characters like > and ( can appear * | DATA CYCLE | *\ninside of the diagram. In fact, any plain text * v | *\nmay appear in the diagram. In addition to labels, * .-------. .----+----. *\nany un-beautified text will remain in place for * | Security| | File | *\nuse as ASCII art. Thus, the diagram is rarely * | Policy +->| Manager | *\ndistored by the beautification process. * '-------' '---------' *\n ****************************\n\n*************************************************************************************************\n*.-------------------. ^ .---. *\n*| A Box |__.--.__ __.--> | | | *\n*| | '--' v | | *\n*'-------------------' | | *\n* Round *---(-. | *\n* .-----------------. .-------. .----------. .-------. | | | *\n* | Mixed Rounded | | | / Diagonals \\ | | | | | | *\n* | & Square Corners | '--. .--' / \\ |---+---| '-)-' .--------. *\n* '--+------------+-' .--. | '-------+--------' | | | | / Search / *\n* | | | | '---. | '-------' | '-+------' *\n* |<---------->| | | | v Interior | ^ *\n* ' <---' '----' .-----------. ---. .--- v | *\n* .------------------. Diag line | .-------. +---. \\ / . | *\n* | if (a > b) +---. .--->| | | | | Curved line \\ / / \\ | *\n* | obj->fcn() | \\ / | '-------' |<--' + / \\ | *\n* '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-' *\n* .---+-----. | ^ |\\ | | /| .--+ | | \\ / *\n* | | | Join | | Curved | \\| |/ | | \\ | \\ / *\n* | | +----> | '-' Vertical '--' '--' '-- '--' + .---. *\n* '---+-----' | | | 3 | *\n* v not:line 'quotes' .-' '---' *\n* .---+--------. / A || B *bold* | ^ *\n* | Not a dot | <---+---<-- A dash--is not a line v | *\n* '---------+--' / Nor/is this. --- *\n*************************************************************************************************\n[Figure [diagram]: Diagrams can also have captions]\n\n\nCode with line-like symbols is allowed in diagrams and is parsed correctly so\nlong as you make it unambiguous:\n\n**********************************************\n* .-------------------------+--+--------. \n* | --x; x->y |__| | \n* | 0 __proto__ __FILE__ <= |\n* | __ a | b --> foo |\n* | |__| y--; x || y a + b <--o--+\n* |__|__|_______________________________|\n**********************************************\n\n\nHere's a diagram on the left of some text:\n\n************** _Song of Myself: 35_\n* | | * \n* --+<---+-- * Would you hear of an old-time sea-fight? <br>\n* | ^ * Would you learn who won by the light of the moon and stars? <br>\n* v | * List to the yarn, as my grandmother's father the sailor told it to me.\n* --+--->+-- * \n* | | * Walt Whitman\n**************\n\n\nIf there is no leading text on the left except for whitespace, a diagram may omit the asterisks on the\nright side for convenience:\n\n****************************************\n* .----.\n* | |\n* '----' .------------>\n* |\n* '-------------\n****************************************\n\n\nDiagram Examples\n================================================================================\n\nLines with Decorations\n--------------------------------------------------------------------------------\n*************************************************************************************************\n* ________ o * * .--------------. *\n* *---+--. | | o o | ^ \\ / | .----------. | *\n* | | '--* -+- | | v / \\ / | | <------. | | *\n* | '-----> .---(---' --->*<--- / .+->*<--o----' | | | | | *\n* <--' ^ ^ | | | | | ^ \\ | '--------' | | *\n* \\/ *-----' o |<----->| '-----' |__| v '------------' | *\n* /\\ *---------------' *\n*************************************************************************************************\n\nGraph with Large Nodes\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* .---. .-. .-. .-. .-. *\n* | A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 | *\n* '---' '-' '+' '-' | '-' *\n* | ^ | ^ *\n* v | v | *\n* .-. .-+-. .-. .-+-. .-. .+. .---. *\n* | 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D | *\n* '-' '---' '-' '---' '-' '-' '---' *\n*************************************************************************************************\n\n\n\nGraph with Small Nodes\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* A 1 2 4 8 *\n* *----->o<---->o<----o-----------. o *\n* ^ ^ | ^ *\n* | | | | *\n* v | v | *\n* o<--->*<---->o---->*---->o---->o<---->* *\n* 3 B 5 C 6 7 D *\n*************************************************************************************************\n\n\nFlow Chart\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* . *\n* .---------. / \\ *\n* | START | / \\ .-+-------+-. ___________ *\n* '----+----' .-------. A / \\ B | |COMPLEX| | / \\ .-. *\n* | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X | *\n* v '-------' \\ / | |PROCESS| | \\___________/ '-' *\n* .---------. \\ / '-+---+---+-' *\n* / INPUT / \\ / *\n* '-----+---' ' *\n* | ^ *\n* v | *\n* .-----------. .-----+-----. .-. *\n* | PROCESS +---------------->| PROCESS |<------+ X | *\n* '-----------' '-----------' '-' *\n*************************************************************************************************\n\nLine Ends\n--------------------------------------------------------------------------------\n\n\n*************************************************************************************************\n* *\n* o--o *--o / / * o o o o o * * * * o o o o * * * * o o o o * * * * *\n* o--* *--* v v ^ ^ | | | | | | | | \\ \\ \\ \\ \\ \\ \\ \\ / / / / / / / / *\n* o--> *--> * o / / o * v ' o * v ' o * v \\ o * v \\ o * v / o * v / *\n* o--- *--- *\n* ^ ^ ^ ^ . . . . ^ ^ ^ ^ \\ \\ \\ \\ ^ ^ ^ ^ / / / / *\n* | | * o \\ \\ * o | | | | | | | | \\ \\ \\ \\ \\ \\ \\ \\ / / / / / / / / *\n* v v ^ ^ v v ^ ^ o * v ' o * v ' o * v \\ o * v \\ o * v / o * v / *\n* * o | | * o \\ \\ *\n* *\n* <--o <--* <--> <--- ---o ---* ---> ---- *<-- o<-- -->o -->* *\n* *\n*************************************************************************************************\n\nTests for some tough cases:\n************************************************\n* +-+ \\ \\ | / / *\n* + + \\ v v v / *\n* +-+ \\ .---------. / \\ | / *\n* v| |v vvv *\n* +-+ --->| |<--- -->o<-- *\n* | | ^| |^ ^^^ *\n* +-+ / '---------' \\ / | \\ *\n* / ^ ^ ^ \\ *\n* / / | \\ \\ *\n************************************************\n\nTrees\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* . . . .--- 1 .-- 1 / 1 *\n* / \\ | | .---+ .-+ + *\n* / \\ .---+---. .--+--. | '--- 2 | '-- 2 / \\ 2 *\n* + + | | | | ---+ ---+ + *\n* / \\ / \\ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \\ / 3 *\n* / \\ / \\ | | | | | | | | '---+ '-+ + *\n* 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \\ 4 *\n* *\n*************************************************************************************************\n\n\nCircuits\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ____ * *\n* | |_____.---. | *\n* o _____| )----------)-------. *\n* / \\ | '---' | __|__ *\n* /___\\ | | \\ / *\n* | '-------------. | \\ / *\n* A ----------------' | | o *\n* .-------------------. o-----)-------' | *\n* | |___.---. | |___.---. *\n* B ---*---.__.---. ___| )--*--.__..---. ____) )----- Y *\n* __| o----*--' '---' ______)) )---' '---' *\n* C -------' '---' | | ''---' *\n* | o *\n* | / \\ *\n* | /___\\ *\n* | | *\n* '--------------' *\n*************************************************************************************************\n\n\nGantt Chart\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ║ Preproduction┆ Alpha┆ RC1┆\n* ═══════════╬══════════════╪════════════╪════════════════╪══\n* Story ║ ▆▆▆▆▆▆▆▆ ┆ ▆┆▆▆▆ ┆\n* Concept Art║ └▆▆▆▆▆▆┆▆▆▆┐ ┆ ┆\n* Modeling ║ ┆ └▆▆▆▆▆▆▆▆┆▆▆▆▆▆▆▆ ┆\n* Rigging ║ ┆ └▆▆▆┆▆▆▆▆▆▆▆▆▆▆▆▆ ┆\n* Mechanics ║ ▆▆▆▆▆▆┆▆▆┐ ┆ ░░░░▆▆▆▆ ┆\n* Engine Code║ ▆▆▆▆▆▆▆┐ │ ┆ └────────▆┆▆▆▆▆▆▆▆▆▆▆▆▆▆ ┆\n* Game Code ║ └─┴▆┆▆▆▆▆▆▆▆▆▆▆▆▆┆▆▆▆▆ ░░░░ ▆ ┆\n* ║ ┆ ┆ Freeze ┆\n*************************************************************************************************\n\n\nBig Shapes\n--------------------------------------------------------------------------------\n*************************************************************************************************\n* *\n* .---------. . .-------. .-------. .---------. .-----. .----. *\n* \\ / / \\ \\ \\ | | | | / \\ / \\ *\n* \\ / / \\ \\ \\ | | | | / \\ | | *\n* \\ / / \\ \\ \\ | | | | \\ / | | *\n* \\ / / \\ \\ \\ | | | | \\ / \\ / *\n* ' '---------' '-------' '-------' '---------' '-----' '----' *\n* *\n*************************************************************************************************\n\n\nSmall Shapes\n--------------------------------------------------------------------------------\n*************************************************************************************************\n* .---. __ .. *\n* .--. . .-----. \\ / .---. .---. ___ ___ | | | ) *\n* / \\ / \\ \\ / .-. . ' . | | .---. .---. | | / \\ | | '--' '' *\n* \\ / / \\ \\ / | | / \\ / \\ '---' / / \\ \\ | | \\___/ |___| .. __ *\n* '--' '-----' ' '-' '---' /___\\ '---' '---' '---' ( | |__| *\n* '' *\n*************************************************************************************************\n\n\nOverlaps and Intersections\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* .-. .-. .-. .-. .-. .-. *\n* | | | | | | | | | | | | *\n* .---------. .--+---+--. .--+---+--. .--| |--. .--+ +--. .------|--. *\n* | | | | | | | | | | | | | | | | | | *\n* '---------' '--+---+--' '--+---+--' '--| |--' '--+ +--' '--|------' *\n* | | | | | | | | | | | | *\n* '-' '-' '-' '-' '-' '-' *\n*************************************************************************************************\n\n\n\nBig Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* .----. .----. *\n* / \\ / \\ .-----+-----+-----. *\n* + +----+ +----. | | | | .-----+-----+-----+-----+ *\n* \\ / \\ / \\ | | | | / / / / / *\n* +----+ B +----+ + +-----+-----+-----+ +-----+-----+-----+-----+ *\n* / \\ / \\ / | | | | / / / / / *\n* + A +----+ +----+ | | B | | +-----+-----+-----+-----+ *\n* \\ / \\ / \\ +-----+-----+-----+ / / A / B / / *\n* '----+ +----+ + | | | | +-----+-----+-----+-----+ *\n* \\ / \\ / | A | | | / / / / / *\n* '----' '----' '-----+-----+-----' '-----+-----+-----+-----+ *\n* *\n*************************************************************************************************\n\n\nSmall Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ___ ___ .---+---+---+---+---. .---+---+---+---. .---. .---. *\n* ___/ \\___/ \\ | | | | | | / \\ / \\ / \\ / \\ / | +---+ | *\n* / \\___/ \\___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+ *\n* \\___/ b \\___/ \\ | | | b | | | \\ / \\a/ \\b/ \\ / \\ | +---+ | *\n* / a \\___/ \\___/ +---+---+---+---+---+ +---+---+---+---+ +---+ b +---+ *\n* \\___/ \\___/ \\ | | a | | | | / \\ / \\ / \\ / \\ / | a +---+ | *\n* \\___/ \\___/ '---+---+---+---+---' '---+---+---+---' '---' '---' *\n* *\n*************************************************************************************************\n\nTiny Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ┌─┬─┬─┬─┬─┐ ▉▉ ▉▉ ▉▉ ⬢ ⬡ ⬡ ┌┬┬┬┬┬┬┬┬┐ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ ___________ +-+-+-+-+ *\n* ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ⬢ ⬢ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n* ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ▉▉ ⬢ ⬢ ⬢ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n* ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ⬡ ⬡ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n* └─┴─┴─┴─┴─┘ ▉▉ ▉▉ ▉▉ ⬡ ⬡ ⬡ └┴┴┴┴┴┴┴┴┘ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n*************************************************************************************************\n\nDot Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* o o o o o * * * * * * * o o * o o o * * * o o o · * · · · · · · *\n* o o o o o * * * * * o o o o * o o o o * * * * * o * * · * * · · · · · · *\n* o o o o o * * * * * o * o o o o o o o o * * * * * o o o o o · o · · o · · * * · *\n* o o o o o * * * * * o * o o o o o o o * * * * o * o o · · · · o · · * · *\n* o o o o o * * * * * * * * * o o o o * * * o * o · · · · · · · * *\n* *\n*************************************************************************************************\n\nUnicode in Diagram\n--------------------------------------------------------------------------------\n\n************************************************************************************************\n* ↖ ↗ ✶ ✹ ✩ ⓵ ⎲ ░░▒▒▓▓▉▉ ▚▚ ▢ ▢ ⬚ ⬚ ⊕ \n* ▲ ◀━━━━━━━▶ ↙ ↘ ➊ ❶ ➀ ① ➕ ➖ ➗ ❌ ⎳ ╲ ╱ ▚▚ ▢ ▢ ⬚ ⬚ \n*\n* ┃ ╭╌╌╌╌╌╌╌╮ ╔═══════╗ ┏━━━━━━━┓ ┏╍╍╍╍╍╍╍┓ ╲ ╱ ░░▒▒▓▓▉▉ ▚▚ ⬣ ⬣ ⎔ ⎔ ⊗ \n* ┃ ╎ ╎ ║ ║ ┃ ┃ ╏ ╏ ⎛ ⎧ ⎡ ╳ ░░▒▒▓▓▉▉ ▚▚ ⬣ ⬣ ⎔ ⎔ ⊘ \n* ┃ ╎ ╎ ║ ║ ┃ ┃ ╏ ╏⋮ ⎜ ⎨ ⎢ ╱ ╲ ░░▒▒▓▓▉▉ ▚▚ ◯ ◯ ⏣ ⏣ ⊙ \n* ▼ ╰╌╌╌╌╌╌╌╯ ╚═══════╝ ┗━━━━━━━┛ ⋱ ┗╍╍╍╍╍╍╍┛⋮ ⎝ ⎩ ⎣╱ ╲ ░░▒▒▓▓▉▉ ▚▚ ◯ ◯ ⏣ ⏣ ⊛ \n* ⋱ ⋮ ◢▉▉◣ ⊜ \n* ∑xᵢ 𝚺xᵢ ∫t²dt ⋱ ⋮ ◥▉▉◤ \n************************************************************************************************\n\n\nSimple Plot Diagram\n-------------------------------------------------------------------------------\n*************************************************\n* ▲\n* Uin ┊ .------------------------\n* ┊ | \n* ┊ | \n* *---'┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄▶\n* \n* Udc▲ \n* Udc_OK ┊ .---------------------\n* ┊ / : \n* ┊ / : \n* *---'┄┄┄┄:┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄▶\n* :<----->: \n* ▲ 500ms : \n* ┊ : \n*Cpu.Qon ┊┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄.-----------\n* ┊ | Inactive \n* ┊ Active | \n* *----------------'┄┄┄┄┄┄┄┄┄┄┄▶\n* \n*************************************************\n\n\nGraphics Diagram\n-------------------------------------------------------------------------------\n*************************************************************************************************\n* . *\n* 0 3 P * Eye / ^ / *\n* *-------* +y \\ +) \\ / Reflection *\n* 1 /| 2 /| ^ \\ \\ \\ v *\n* *-------* | | v0 \\ v3 --------*-------- *\n* | |4 | |7 | ◄╮ *----\\-----* *\n* | *-----|-* ⤹ +-----> +x / v X \\ .-.<-------- o *\n* |/ |/ / ⤴ / o \\ | / | Refraction / \\ *\n* *-------* v / \\ +-' / \\ *\n* 5 6 +z v1 *------------------* v2 | o-----o *\n* v *\n*************************************************************************************************\n\n\nAnnotated Table Diagram\n--------------------------------------------------------------------------------\n\n**********************************************\n* ┏━━━━┳━━━━┳ ┳━━━━┓\n* ┃ A₁ ┃ A₂ ┃ ⋯ ┃ Aⱼ ┃ <--- Basis \n* ┡━━━━╇━━━━╇ ╇━━━━┩\n* │ 16 │ 4 │ ⋯ │ 9 │\n* ⎧ ├────┼────┼ ┼────┤\n* │ │ 1 │ -2 │ ⋯ │ 10 │\n* Xᵢ ⎨ ├────┼────┼ ┼────┤\n* │ │ 8 │ 52 │ ⋯ │ 0 │\n* ⎩ ├────┼────┼ ┼────┤\n* │ 14 │ 0 │ ⋯ │ -1 │\n* └────┴────┴ ┴────┘\n**********************************************\n\n \nIcon Diagram\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* .-. .--------. *\n* .-+ | | | *\n* .--+ '--. |'--------'| *\n* | Server Cloud |<------------------>| Database | *\n* '-------------' | | *\n* ^ ^ '--------' *\n* Internet | | ^ *\n* .------------------------' '-------------. | *\n* | | v *\n* v v .------. .------. *\n* .--------. WiFi .--------. Bluetooth .-----. / # # /| / # # /| *\n* | |<------------->| |<---------->| | +------+/| LAN +------+/| *\n* |Windows | | OS X | | iOS | | +/|<--->| +/| *\n* +--------+ +--------+ | | |Ubuntu+/| |Ubuntu+/| *\n* /// ____ \\\\\\ /// ____ \\\\\\ | o | | +/ | +/ *\n* '------------' '------------' '-----' '------' '------' *\n* Laptop 1 Laptop 2 Tablet 1 Dedicated Server Rack *\n*************************************************************************************************\n\n\nStyling Diagrams\n------------------------------------------------------------------------------------\n\n<style>\n.md .inverse svg.diagram {\n background: #333;\n stroke: #FFF;\n fill: #FFF;\n}\n\n.md .inverse svg.diagram .opendot {\n fill: #333;\n}\n</style>\n\nYou can use CSS to style all diagrams or individual diagrams. For example,\nthe following has light lines on a dark background:\n\n<div class=\"inverse\">\n ****************************************************\n * .---. . .----o----. *\n * | | | | | | *\n * | | --. |.-- | | *----*<---+ *\n * | | .-.| | +--+ | |____| *\n * | | | | | | | | | | *\n * '---' '-'' ' ' ' o----o--->' *\n ****************************************************\n</div>\n\n\nHorizontal Rules\n========================================================================\n\nFollowing the CommonMark specification, any of these patterns can be used (and extended across\na whole line, of course) to produce a horizontal rule:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ none\n-----\n\n- - -\n\n_____\n\n_ _ _\n\n*****\n\n* * *\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nExample:\n\n-----\n\n- - -\n\n_____\n\n_ _ _\n\n*****\n\n* * *\n\nEmbedded Math\n========================\n\nMarkdeep automatically includes [MathJax](http://mathjax.org) if your\ndocument contains equations and you have an Internet connection. That means\nyou get the **full power of LaTeX, TeX, MathML, and AsciiMath notation**.\nJust put math inside single or double dollar signs. \n\n$$ \\Lo(X, \\wo) = \\Le(X, \\wo) + \\int_\\Omega \\Li(X, \\wi) ~ f_X(\\wi, \\wo) ~ | \\n \\cdot \\wi | ~ d\\wi $$\n\nYou can also use LaTeX equation syntax directly to obtain numbered\nequations:\n\n\\begin{equation}\ne^{i \\pi} + 1 = 0\n\\end{equation}\n\n\\begin{equation}\n\\mathbf{A}^{-1}\\vec{b} = \\vec{x}\n\\end{equation}\n\nIf you don't have equations in your document, then Markdeep won't\nconnect to the MathJax server. Either way, it runs MathJax after \nprocessing the rest of the document, so there is no delay.\n\nMarkdeep is smart enough to distinguish non-math use of dollar signs,\nsuch as $2.00 and $4.00, US$5, and 3$. Inline\nmath requires consistent spaces (or punctuation) either outside or inside\nof the LaTeX dollar signs to distinguish them from\nregular text usage. Thus, the following all work:\n\n- $x^2$\n- $ x^2 $\n- ($x^2$)\n- ($ x^2 $)\n- Variable $x^2$,\n- Variable $ x^2 $\n- Two $x$ vars $y$ on the same line\n- Different spacing styles: $\\theta_{x}$ vs. $ \\theta_{y} $\n\nUnless you've changed out the default MathJax processor, you can define \nyour own LaTeX macros by executing `\\newcommand` within dollar signs,\njust as you would in LaTeX. Markdeep provides a handful of commands\ndefined this way by default because they're things that I frequently \nneed:\n\n Code | Symbol\n-------------------|------------\n `\\O(n)` | $\\O(n)$\n `\\mathbf{M}^\\T` | $\\mathbf{M}^\\T$\n `45\\degrees` | $45\\degrees$\n `x \\in \\Real` | $x \\in \\Real$\n `x \\in \\Integer` | $x \\in \\Integer$\n `x \\in \\Boolean` | $x \\in \\Boolean$\n `x \\in \\Complex` | $x \\in \\Complex$\n `\\n` | $\\n$\n `\\w` | $\\w$\n `\\wo` | $\\wo$\n `\\wi` | $\\wi$\n `\\wh` | $\\wh$\n `\\Li` | $\\Li$\n `\\Lo` | $\\Lo$\n `\\Lr` | $\\Lr$\n `\\Le` | $\\Le$\n `10\\un{m/s^2}` | $10\\un{m/s^2}$\n\n\n# ATX Headers\nIn addition to the underlined headers, you can also use ATX-style\nheaders, with multiple # signs:\n\n## H2\n### H3\n#### H4\n##### H5\n###### H6\nAlthough: do you really need six levels of subsection nesting?!\n\nYou can also create unnumbered sections that will not appear in the\ntable of contents using parentheses around the pound signs:\n\n(##) Unnumbered H2\n\n\nMultiple Columns\n========================================================================\n<div style=\"columns:2;-webkit-columns:2;-moz-columns:2;column-gap:3em;-webkit-column-gap:3em;-moz-column-gap:3em\">\nYou can use the CSS\n[columns](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)\nstyle to make an HTML multicolumn block. Then, just use regular Markdeep within it and the\nbrowser will automatically apply your multicolumn layout. \n\nBrowsers are even smart enough to break the columns correctly when\nprinting to PDF or to a printer. However, for a long document,\nmultiple columns don't work well when displayed on screen. That's\nbecause there are no discrete \"pages\" on screen to break columns. So,\nthe browser will make each column as long as the entire document,\nwhich is probably not what you want.\n\nSo, multi-column only works well if you know that you have very short\nsections (as in this example), or if you were planning on printing to\nseparate pages when done.\n</div>\n\n\nCustom Formatting\n=========================================================================\n\nManual\n-------------------------------------------------------------------------\n\nMarkdeep uses CSS for styling. That means you can embed a style sheet\nto override anything thatn you don't like about the built-in styling.\nFor example, if you don't want section numbering, just use:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>h1:before, h2:before { content: none; }</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nMarkdeep uses Markdown's syntax, even where I disagree with the\nchoices. But you aren't stuck with that. Do you wish that Markdown\nhad specified single-asterisk for `*bold*`? You can have\nthat:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>em.asterisk { font-style: normal; font-weight: bold; }</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nEach of the list bullets (`+`, `-`, `*`) has its own CSS class. You\ncan use this, for example, to make `+` entries bold and `-` ones\nuse a circle:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>\n li.plus { font-weight: bold; } \n li.minus { list-style-type: circle;}\n</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nStyle Sheets\n------------------------------------------------------------------------\n\n### Latex Article\n\nTo match the default Latex article formatting, insert the following anywhere in your document:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/latex.css?\">\n</pre>\n\n### Dark \n\nFor an aggressively-stylized document with a black background, insert the following anywhere in\nyour document:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/dark.css?\">\n</pre>\n\n### API Documentation\n\nTo use the API documentation template, insert the following anywhere in\nyour document:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/apidoc.css?\">\n</pre>\n\n### Presentation Slides\n\nTo create presentation slides as a PDF, insert the following into\nyour document, using first-level headers for sections and second-level\nheaders for slides:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/slides.css?\">\n</pre>\n\nThen, print the document to PDF.\n\n\nParagraph Numbering\n--------------------------------------------------\n\nAcademic article or book proofs often have line numbers so that reviewers and editors can refer\nto specific passages. This doesn't make sense for a document in a browser because line breaks\nchange based on the reader's screen size. \n\nYou can add _paragraph_ numbers to your Markdeep document by including the following HTML at\nthe bottom of your document. You can remove the `<style>` tag and place the code in a CSS file\nas well.\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ html\n<style>\np::before {\n content: \"\" counter(paragraph);\n counter-increment: paragraph;\n margin-left: -50px;\n width: 50px;\n height: 0px;\n overflow: visible;\n font-size: 70%;\n display: block;\n color: #666;\n}\n</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\n\nLocalization\n===================================================\n\nThere are two ways to localize the keywords such as Table, Diagram,\nMonday, etc., from English to your favorite language. \n\nThe first is to\nput a meta tag with a\n[`lang`](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\nattribute in the document, such as <`meta lang=\"ru\"\ncharset=\"utf-8\"`>. If your favorite language isn't supported by\nMarkdeep, just e-mail me a Javascript snippet with the appropriate\ntranslations and I'll add it (see the source code for examples).\n\nThe second method is to manually set the `markdeepOptions.lang` field\nbefore you include the script in your document.\n\n\nUnicode (in UTF-8 encoding)\n===================================================\n\nTo support Unicode input, you must add <`meta charset=\"utf-8\"`> to\nthe *top* of your document (in the first 512 bytes).\n\n- Asian characters 林花謝了春紅 太匆匆, 無奈朝來寒雨 晚來風 胭脂淚 留人醉 幾時重, 自是人生長恨 水長東\n- Asian punctuation: 、。!,:\n- Matching pairs «»‹›“”‘’〖〗【】「」『』〈〉《》〔〕\n- Greek ΑΒΓΔ ΕΖΗΘ ΙΚΛΜ ΝΞΟΠ ΡΣΤΥ ΦΧΨΩ αβγδ εζηθ ικλμ νξοπ ρςτυ φχψω\n- Currency ¤ $ ¢ € ₠ £ ¥\n- Common symbols © ® ™ ² ³ § ¶ † ‡ ※\n- Bullets •◦ ‣ ✓ ●■◆ ○□◇ ★☆ ♠♣♥♦ ♤♧♡♢\n- Phonetic ᴁ ᴂ ᴈ\n- Music ♩♪♫♬♭♮♯\n- Punctuation “” ‘’ ¿¡ ¶§ª - ‐ ‑ ‒ – — ― …\n- Accents àáâãäåæç èéêë ìíîï ðñòóôõö øùúûüýþÿ ÀÁÂÃÄÅ Ç ÈÉÊË ÌÍÎÏ ÐÑ ÒÓÔÕÖ ØÙÚÛÜÝÞß \n- Math ° ⌈⌉ ⌊⌋ ∏ ∑ ∫ ×÷ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ∙ ∘ ′ ″ ‴ ∼ ∂ √ ≔ × ⁱ ⁰ ¹ ² ³ ₀ ₁ ₂ π ∞ ± ∎\n- Logic & Set Theory ∀¬∧∨∃⊦∵∴∅∈∉⊂⊃⊆⊇⊄⋂⋃\n- Relations ≠≤≥≮≯≫≪≈≡\n- Sets ℕℤℚℝℂ\n- Arrows ←→↑↓ ↔ ↖↗↙↘ ⇐⇒⇑⇓ ⇔⇗ ⇦⇨⇧⇩ ↞↠↟↡ ↺↻ ☞☜☝☟\n- Computing ⌘ ⌥ ‸ ⇧ ⌤ ↑ ↓ → ← ⇞ ⇟ ↖ ↘ ⌫ ⌦ ⎋⏏ ↶↷ ◀▶▲▼ ◁▷△▽ ⇄ ⇤⇥ ↹ ↵↩⏎ ⌧ ⌨ ␣ ⌶ ⎗⎘⎙⎚ ⌚⌛ ✂✄ ✉✍\n- Digits ➀➁➂➃➄➅➆➇➈➉\n- Religious and cultural symbols ✝✚✡☥⎈☭☪☮☺☹☯☰☱☲☳☴☵☶☷\n- Dingbats ❦☠☢☣☤♲♳⌬♨♿ ☉☼☾☽ ♀♂ ♔♕♖ ♗♘♙ ♚♛ ♜♝♞♟\n\n\nGravizo Support\n===================================================\n\nMarkdeep diagrams have no dependency on third parties or the network \n(you can store the `markdeep.min.js` file locally on your machine!)\nand look the same in your document as on screen in the final document.\n\nIf you need the full power of DOT/GraphViz automated layout graphs and\ncan accept a network and third party dependency, you can embed\n[Gravizo](https://g.gravizo.com/) within a Markdeep document using either\ndirect Markdeep image syntax or an embedded HTML `img` tag:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<img src=\"https://g.gravizo.com/svg?digraph G { A -> B -> C; A -> C; }\">\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n<img src=\"https://g.gravizo.com/svg?digraph G { A -> B -> C; A -> C; }\">\n\n\nIncluding/Inserting Other Documents\n===================================================\n\nMarkdeep currently contains experimental (i.e., beta, may-not-be-supported-in-the-future)\nsupport for including one document within another. This is convenient for bibliographies,\nboilerplate footers and headers, and styling. The syntax is:\n\n<center>`(insert otherdocument.md.html here)`</center>\n\nThe inserted document must be a standalone Markdeep document, including the Markdeep line. It\ncan have any file extension, although `.html` is recommended and there **must** be a period\nin the filename to disambiguate it versus arbitrary TODO-style notes.\n\nThe included document will be inserted inline, meaning that footnotes, figure numbering, and\nother kinds of references will flow correctly. Recursive inclusion is allowed. All paths in an\nincluded document are relative to the original document. That's undesirable, and a future\nrelease may be able to make those paths absolute.\n\nHere is an example of embedding `example.md.html` into `features.md.html`:\n\n (insert example.md.html here)\n\n\nDifferences from Other Markdown\n===================================================\n\nFeatures\n---------------------------------------------------\n\nThere are many, inconsistent markdown variants. Markdeep intentionally differs from a few of\nthem in specific ways:\n\n- Code blocks require fences; no indent-only code blocks. I think that allowing indentation to\n indicate code blocks was a poor choice in the original markdown specification because code\n vs. blockquote is ambiguous in plain text and it makes list detection harder.\n \n- No bold/italic/strikethrough inside of words without spaces because they could form an\n equation or technical term. Just use HTML tags.\n\n- Setext headers require at least three minus or equals characters to distinguish from\n multiline equations\n\n- Whitespace required between `#` and the section name for ATX headers (disambiguates \"#1\" from\n a header; required by CommonMark)\n\n- Markdeep's table reference syntax differs from MultiMarkdown's in order to provide a\n consistent formatting syntax across sections, figures, and tables...and one for which the\n source text is more readable.\n \n- Blockquotes must be two lines long (use explicit HTML if you really need a single-line\n blockquote) or contain quotation marks to disambiguate them from lines where a greater-than\n sign just wrapped around.\n \n- Escaped characters such as `\\*` and `\\_` are not needed, since Markdeep heuristics for\n determining when those characters are part of text and not formatting.\n\n\nTemporary Limitations\n---------------------------------------------------\n\nFuture releases likely will address these known bugs, limitations, and\n\"missing features\":\n\n- Listings have a maximum caption length of three lines.\n- Tables and diagrams in lists create a new list\n- No support for numbered lists that start with a value other than 1.\n- Paragraphs not allowed in lists\n- No dashed lines in diagrams using ASCII characters. Because there's no plain-text\n floating-dot character, different ASCII diagram styles use different, ambiguous conventions.\n You can use Unicode characters as a workaround until I introduce a native style.\n\n\nPermanent Limitations\n---------------------------------------------------\n\nDue to the special protection from formatting that Markdeep affords `<pre>` and `<code>` tags\nthat appear in the document, you cannot nest a code tag inside of another code tag, and\nlikewise for pre tags. Fortunately, it is pretty hard to imagine a case where you would want\nnested code tags.\n\n","difficulty":1,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-06T07:40:20.941Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":9,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"L: Beispiel für eine To-Do-Karte","description":"Test der Markdeep-Funktionalität","date":"2018-05-06T16:39:34.184Z","dateUpdated":"2018-07-06T08:11:09.628Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":0,"daysBeforeReset":0,"learningStart":"1970-01-01T00:00:00.000Z","learningEnd":"1970-01-01T00:00:00.000Z","learningInterval":[],"learners":0,"wordcloud":false,"shuffled":false,"cardType":9,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Markdeep-Test","front":"(##) Teste alle Optionen der Auszeichnungssprache Markdeep\n\n**Markdeep Feature Demo** von Morgan McGuire\n\nThis demonstration documents the features of\n[Markdeep](http://casual-effects.com/markdeep) and acts as a test for\nit. Markdeep is a text formatting syntax that extends Markdown, and a\nJavascript program for making it work in browsers. The two most\npowerful features are its ability to run in any **web browser** on the\nclient side and the inclusion of **diagrams**.\n\n[Click here](https://casual-effects.com/markdeep/features.md.html?noformat)\nto see this document without automatic formatting.\n\nMarkdeep is free and easy to use. It doesn't need a plugin, or\nInternet connection. There's nothing to install. Just start\nwriting in Vi, Nodepad, Zed, Emacs, Visual Studio, Atom, or another\neditor! You don't have to export, compile, or otherwise process\nyour document.\n\nIf you want to support development of Markdeep, just buy my\n[Graphics Codex](http://graphicscodex.com) book for $10 on Amazon. Revenue from that funds my\nopen source projects.\n\nBasic Formatting\n=======================================================================================\nText formatting: \n\n Source | Result\n-----------------------------------------|------------------------------\n`**bold**` | **bold**\n`__bold__` | __bold__\n`*italic*` | *italic*\n`_italic_` | _italic_\n`~~strikethrough~~` | ~~strikethrough~~\n<code>`inline code`</code> | `inline code`\n`5 kg/m^3` | 5 kg/m^3\n\nYou can add CSS to change the styles. See the Custom Formatting section\nfor some examples.\n\nFormatted text may **cross\nlines** and be as small as **a** single character. It can _also\n be indented and\n split across lines_ simultaneously.\n\nMarkdeep intelligently does not apply bold or italic formatting to\nmath expressions such as x = 3 * y - 2 * z or WORDS_WITH_INTERNAL_UNDERSCORES.\nIt also protects HTML `<tags>` in code blocks from disappearing.\n\nIf you _want_ italics or bold inside of a word, for example in: SCUBA = <b>S</b>elf <b>C</b>ontained\n<b>U</b>nderwater <b>B</b>reathing <b>A</b>pparatus, then just use HTML `<b>` and `<i>`\ntags---a markdown syntax won't be any more readable in that case.\n\nExponents only work for positive and negative integers. For arbitrary exponents,\nuse LaTeX notation: `$x^y$` ==> $x^y$, or HTML tags: `x<sup>y</sup>` ==> x<sup>y</sup>.\n\nLinks\n---------------------------------------------------------------------------------------\nThere are many forms of implicit and explicit links:\n\n\n Source | Result\n-------------------------------------------|---------------------------------------------\n`[hyperlink](http://casual-effects.com)` | [hyperlink](http://casual-effects.com)\n`[hyperlink](\"http://casual-effects.com\")` | [hyperlink](\"http://casual-effects.com\")\n`<http://casual-effects.com>` | <http://casual-effects.com> \n`http://casual-effects.com` | http://casual-effects.com\n`morgan@casual-effects.com` | morgan@casual-effects.com\n`test@foo.co.uk` | test@foo.co.uk\n`<test@foo.co.uk>` | <test@foo.co.uk>\n`Lists section` | Lists section\n`Tiny Grids subsection` | Tiny Grids subsection\n`Section [Lists]` | Section [Lists]\n`sec. [lists]` | sec. [lists]\n`subsection [lists]` | subsection [lists]\n`table [states]` | table [states]\n`tbl. [states]` | tbl. [states]\n`Table [states]` | Table [states]\n`figure [robot]` | figure [robot]\n`fig. [robot]` | fig. [robot]\n`Figure [robot]` | Figure [robot]\n`lst. [sort]` | lst. [sort]\n`listing [sort]` | listing [sort]\n`Listing [sort]` | Listing [sort]\n`[New York Times][nyt]` | [New York Times][nyt]\n`[Google][]` | [Google][]\n`footnote [^syntax]` | footnote [^syntax]\n`[#Kajiya86]` | [#Kajiya86]\n\nAny section header name followed by \"section\", \"subsection\", or \"sec.\" will automatically be\nlinked to that section. To link by number, use one of those key words followed by the section\nname in brackets. This won't work if you use the actual word \"section\" _as the title of a\nsection_...but it would be unexpected to have a section named \"section\" in a real document\nanyway.\n\nYou can also insert HTML anchor (`<a>`) tags to create arbitrary internal links.\n\nReference-style links include arbitrary formatted text in brackets\nfollowed by a case-insensitive symbolic name that must be defined\nelsewhere in the document:\n\n- Example using a symbolic name: [New York Times][nyt]\n- Example using the text as its own symbol: [Google][]\n\nPut the definitions at a convenient location elsewhere in the document:\n\n~~~~~~~~~~~~none\n [nyt]: http://nytimes.com\n [google]: http://google.com\n~~~~~~~~~~~~\n\nMarkdeep also supports footnotes, endnotes [^syntax], and citations\n[#Kajiya86] using a similar syntax. The actual notes and bibliography\nmay be placed at the bottom of the document:\n\n~~~~~~~~~~~~~~~~none\n [#Kajiya86]: James T. Kajiya. 1986 ...\n\n [^syntax]: Endnotes look like ...\n~~~~~~~~~~~~~~~~\n\nRegular links may also have attributes, for example,\n[this link will directly download](http://casual-effects.com/markdeep/robot.jpg download).\n\nURLs in explicit links may be surrounded by optional `\"` quotation `\"` marks. If your URL\ncontains parentheses, then it _must_ be surrounded in quotation marks to make it unambigious:\n\n- [a link with parens](\"http://casual-effects.com(bar)\")\n- [](\"http://casual-effects.com(bar)\")\n\nURLs with various forms of special characters are handled well even without quotation marks:\n\n- [hyperlinks to URLs with underscores](https://archive.org/stream/Bazin_Andre_What_Is_Cinema_Volume_1/Bazin_Andre_What_Is_Cinema_Volume_1_djvu.txt)\n- https://archive.org/stream/Bazin_Andre_What_Is_Cinema_Volume_1/Bazin_Andre_What_Is_Cinema_Volume_1_djvu.txt\n\nYou can also use the CommonMark angle bracket syntax\n`<http://foo.com/bar?arg=value&hello>` ==>\n<http://foo.com/bar?arg=value&hello> provided that your URL only\ncontains lower-case letters. Otherwise the browser interprets it\nas a tag and converts it to lowercase before Markdeep runs.\n\n**Bibliography**:\n[#Kajiya86]: James T. Kajiya. 1986. The Rendering Equation. \nIn _Proceedings of Computer Graphics and Interactive Techniques \n(SIGGRAPH '86)_, ACM, 143-150. http://dx.doi.org/10.1145/15922.15902\n\n\n[^syntax]: Endnotes look like reference-style links with an empty text\nfield. Endnotes may not contain multiple paragraphs (sorry, David\nFoster Wallace), although they may refer to _other_ endnotes.\n\n\n[nyt]: http://nytimes.com\n[google]: http://google.com\n\n\nLists\n---------------------------------------------------------------------------------------\n\nA blank line or line ending in a colon must precede lists. Lists have lines that begin with a\nnumber (which is not required to increment) and a period, or a bullet character (-, *, +). They\ncan also be nested. Example:\n\n~~~~~~~~~~~~~~~~~~~~~~~\n1. Monday\n2. Tuesday\n 1. Morning\n 2. Afternoon\n3. Wednesday\n - Bullets\n - Bullets\n1. Thursday\n + Bullets\n + Bullets\n1. Friday\n * Bullets\n~~~~~~~~~~~~~~~~~~~~~~~\n\nExamples of lists and floating diagrams:\n *****************************\n1. Monday * A B C *\n2. Tuesday * *-------->o<------->o *\n 1. Morning * ^ / ^ | *\n 2. Afternoon * | v \\ v *\n3. Wednesday * o----->o---->o<---->* *\n - Bullets * D E F G *\n - Bullets *****************************\n4. Thursday\n5. Friday\n\n\nA list with just bullets:\n- Bread\n- Fish\n- Milk\n- Cheese\n\n\nA list containing a code block:\n\n1. This is the first list item.\n\n ~~~~~~\n // This is a code block\n if (x > 0) printf(\"hello!\\n\");\n ~~~~~~\n \n1. This is the second list item.\n\n\n- Level 1\n - Level 2\n - Level 3\n- Level 1 again\n\n\n- 1\n - 1.a\n - 1.a.i\n - 1.a.ii\n - 1.b\n\nLists can also:\n\n* Use asterisks\n* Instead of\n* Minus signs\n* `or have code`\n* *and* other formatting\n\nor\n\n+ Use plus\n+ Signs\n\n\nLists with blank lines between the elements are formatted with more spacing. There's actually\nnothing special about this...that's just the regular paragraph separator.\n\n\n1. Here's a list with some large elements that I chose to format by putting a blank line\n between the elements to make them more visually distinguished.\n\n2. That's necessary with paragraph-sized elements; otherwise the\n text would appear to run together into a wall of text!\n \n - You can also\n - Nest lists within lists with spaces\n\n\nLists that begin with a number other than 1 use that number as the start index. The subsequent\nnumbers are irrelevant and automatically replaced with ascending numbers:\n\n6. A list that starts at six!\n1. and just\n1. keeps going...\n\nDefinition Lists\n------------------------------------------------------------------------------\n\nApple\n: Pomaceous fruit of plants of the genus Malus in \n the family Rosaceae.\n\n Multiple paragraphs are supported.\n\nOrange\n: The fruit of an evergreen tree of the genus Citrus.\n\n - Can also\n - Put lists\n - In definitions\n\nDefinition lists with short definitions are formatted more tersely:\n\nGrapes\n: Available in purple (\"red\") and green (\"white\") varieties.\n\nBananas\n: Only yellow.\n\nSchedule Lists\n------------------------------------------------------------------------------\n\nSchedule lists contain titles that begin with a valid date. After the\ntitle, arbitrary indented content appears, including lists, text, and\nequations:\n\n~~~~~~~~~~~~none\nTuesday Feb 16, 2016: Project Launch\n - Create specifications\n - Initialize revision control system\n \nFriday Feb 19, 2016: Build Milestone\n - Build system fully functional\n - Placeholder unit tests committed\n\n\n(Monday Feb 29, 2016): Office Closed\n~~~~~~~~~~~~\n\nIf the schedule is sufficiently long and dense, then a calendar preview\nis shown before it. Entries in parenthesis with no further details\nare formatted with a more subtle style.\n\nFormatted schedule lists\nlook like:\n\nTuesday Feb 16, 2016: Project Launch\n - Create specifications\n - Initialize revision control system\n\nFriday Feb 19, 2016: Build Milestone\n - Build system fully functional\n - Placeholder unit tests committed\n \n _Plan for weekend overtime if we miss this milestone_\n \nWednesday Feb 24, 2016: Site Visit\n **Whole team vistits client**. Dress appropriately.\n\nFriday Feb 26, 2016: Demo Milestone\n - Internal demonstrations for management\n - QA reports due\n\n(Monday Feb 29, 2016): Office Closed\n\nTuesday Mar 1, 2016: Code Freeze\n - Commit final features before this date\n - Only priority 1 fixes with issue tracking numbers\n after this point\n\nMonday Mar 7, 2016: Beta\n\nWednesday Mar 16, 2016: Gold\n\nDates can be in any unambigous format that includes a month, day, and\nfour-digit year between 1000 and 2999, such as:\n\n- 2001-03-01\n- 1 Apr. 1999\n- 4-07-1976\n- February 16, 2016\n- 2020 Jan. 15\n- May 15th, 1982\n\nThe US date format MM/DD/YYYY is not supported because it is\nambiguous. The date may include the name of a day of the week\n(e.g., Sunday). It will be replaced with the correct day.\n\nWhen months are given by name, they must match the localization\nsettings.\n\n\nBlock Quotes\n------------------------------------------------------------------------------\n\nEmail-style indenting creates a blockquote:\n\n> This is an indented blockquote: Ut at felis diam. Aliquam massa odio, pharetra ut neque sed, commodo\n> dignissim orci. Curabitur quis velit gravida, blandit diam nec,\n> lacinia quam. Maecenas pharetra, velit in vestibulum auctor, diam\n> ipsum suscipit arcu, non sodales orci nibh sit amet leo. Nulla dictum\n\nBlockquotes formatted in the style of an actual quotation receive\nspecial treatment for fancy quoting:\n\n> \"You want to make it seem alive and effortless and fun, but that's an\n> art that took me 25 years to really learn. I wanted to do it very much\n> 25 years ago, but I didn't know how.\"\n>\n> -- David O. Russell, director of American Hustle\n\n\n\nTables\n------------------------------------------------------------------------------\n\nSource:\n~~~~~~~~~~~~none\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n [Optional caption]\n\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n[Table [states]: Caption with label.]\n\nItem | Type | Cost\n---- |:----:| ----:\nFish | F | 1.00\nAxe | W | 3.25\nGold | I |20.50\n\n\n | A |\n |---|\n | B |\n | C |\n | D |\n\n~~~~~~~~~~~~\n\nResult:\n\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n [Optional caption]\n\n\n Maine | Iowa | Colorado \n-------|------|----------\n 1 | 4 | 10\n ME | IA | CO\n Blue | Red | Brown\n[Table [states]: Caption with label.]\n\n\nWith alignment:\n\nItem | Type | Cost\n---- |:----:| ----:\nFish | F | 1.00\nAxe | W | 3.25\nGold | I |20.50\n\n\nSingle-column:\n\n | A |\n |---|\n | B |\n | C |\n | D |\n\n\nPage Breaks\n------------------------------------------------------------------------------\n\nTo support other markdown conventions, `\\pagebreak` and `\\newpage` will insert a page break in\na document when printed or converted to PDF. You can also use a pattern of a series of five `+`\nsigns on their own line, which will form a horizontal rule on screen and a new page when\nprinted.\n\n++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++\n\nTo make top-level section headers also force page breaks, add the following to your\ndocument or CSS file:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>.md h1, .md .nonumberh1 {page-break-before:always}</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nImages and Video\n------------------------------------------------------------------------------\n\nThere's no natural way to embed an image into a document that is also readable as plain\ntext. Markdeep follows markdown's somewhat reasonable syntax. The source\n\n`![A picture of ARSnova]\n(https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)` \n\nbecomes:\n\n![A picture of ARSnova](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)\n\nOptional labels may be applied:\n\n`![Figure [ARSnova]: A picture of ARSnova]\n(https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)` \n\n![Figure [robot]: ARSnova's options for instant feedback in the classroom](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)\n\nAny text after the URL is used as HTML attributes. If the attributes\ninclude width or height specifications, then the image is linked to\nthe original.\n\n````\n![Figure [robot2]: A picture of ARSnova with a caption larger\nthan it.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"150px\" border=\"1\")\n````\n\n![Figure [robot2]: A picture of ARSnova with a caption larger\nthan it.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"150px\" border=\"1\")\n\n![Really long captions are justified, not centered. This happens automatically when the caption spans multiple lines. You can also use custom CSS to change the formatting of captions.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"150px\" border=\"1\")\n\n![Floating robot with a large caption.](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=\"20%\") If the image is embedded in a\nparagraph and has a caption, then it floats right and any width\nspecification is propagated to the full captioned image, for example, \nthe image to the right of this paragraph. Use a space as your caption\nif you want this behavior but don't actually want a visible caption.\n\nYou can also just use a raw HTML `<img>` tag: \n\n`<img \nsrc=\"https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png\"\n width=\"128\" border=\"2\">`\n\n<img \nsrc=\"https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png\" \nwidth=\"128\" border=\"2\">\n\nCaptionless images work as well. Source \n\n`![](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)` \n\nbecomes:\n\n![](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png)\n\nImages are centered if they appear in their own paragraph block and inlined otherwise. Grids of\nimages are recognized and laid out as grids using HTML tables:\n\n\n![1](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![2](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![3](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100)\n![4](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![5](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100) ![This image has a<br>long caption](https://arsnova.thm.de/blog/wp-content/uploads/2015/05/Live-Feedback-1-550x550.png width=100)\n\n\nSymbol Substitutions\n------------------------------------------------------------------------------\n\nMarkdeep converts `<->`, `<==>`, `->`, `-->`, `<-`, `<--`, `==>`, and `<==` to arrows if they\naren't in a code block or latex expression and are surrounded by whitespace. Examples:\n\n- if this ==> then that\n- here <== there\n- this <==> that\n- A <- B\n- X -> Y\n- back <-> forth\n- long --> way\n- back <-- there\n\nTwo or three minus signs are converted to an em dash--like that.\n\nAn \"x\" between numbers, such as 1920x1080 or 3 x 4, will be converted to the times\nsymbol.\n\nNegative numbers, such as -5 and minus signs between numbers such as \n2 - 1, will have a minus sign instead of a hyphen.\n\nDegrees are reformatted to the degree symbol:\n\n- Cold, 37-degree F water.\n- A 45-degree angle.\n- A right angle's measure is 90 degrees. \n\nIt doesn't reformat the word \"degree\" when not following digits:\n\n- Don't give me the third degree!\n- I have two degrees from MIT.\n\n\"Smart quotes\" are applied for double-quote marks based on position\nrelative to whitespace:\n\n\"a\" b c\n\na \"b\" c\n\na b \"c\"\n\na \"b!\" c\n\na \"b,\" c\n\na \"b\". C\n\na, \"b\" c\n\na---\"b\"---c\n\na (\"b\") c\n\n\"error\" ==> \"correction\"\n\nInch or minute markers such as 3' 9\" are not converted. Quotation\nmarks in <span style=\"color:#F00\">HTML attributes</span> and\nin code blocks, e.g., `var x = \"hello world\"`, are not converted.\n\n\nAdmonitions\n-----------------------------------------------------------------------------\n\nAdmonitions are small break-out boxes with notes, tips, warnings, etc. for the reader. They\nbegin with a title line of a pattern of three exclaimation marks, an optional CSS class, and an\noptional title. All following lines that are indented at least three spaces are included in the\nbody, which may include multiple paragraphs.\n\nThe default stylesheet provides classes for \"note\" (default), \"tip\", \"warning\", and \"error\".\nThese are case insensitive and ignore any colon after the CSS class. Here are some examples:\n\n````````````````````````````````````````````````````````````` none\n!!!\n I'm a note. Don't mind me, I'm just sitting here.\n\n!!! note\n Another note.\n\n!!! Tip\n Close the door on the way out.\n\n!!! WARNING\n I'm a warning, perhaps. *Something might happen!*\n\n!!! ERROR: Seriously\n Watch out, something **bad** could happen.\n\n This is still more error text.\n`````````````````````````````````````````````````````````````\n\n!!!\n I'm a note. Don't mind me, I'm just sitting here.\n\n!!! note\n Another note.\n\n!!! Tip\n Close the door on the way out.\n\n!!! WARNING\n I'm a warning, perhaps. *Something might happen!*\n\n!!! ERROR: Seriously\n Watch out, something **bad** could happen.\n\n This is still more error text.\n\n\nFenced Code Blocks\n------------------------------------------------------------------------------\n\nSet off large blocks of code using equal-length strings of tilde `~`\nor back-tick <code>`</code> characters. Each produces a different CSS\nclass so that they can be styled differently. \n\nBy default, tilde blocks have lines before and after them and are\ninset for use as code listings instead of large inline code\nblocks. Both styles receive syntax coloring and automatic programming\nlanguage detection.\n\nYou can override automatic programming language detection by putting\nthe name of the language immediately following the first fence. You can\nspecify a custom CSS class for a code block by placing its name after the\nlanguage name.\n\n<pre><code>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C</code>\nvoid insertion_sort(int data[], int length) {\n for (int i = 0; i < length; ++i) {\n ...\n }\n}\n<code>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</code>\n</pre>\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C\nvoid insertion_sort(int data[], int length) {\n for (int i = 0; i < length; ++i) {\n ...\n }\n}\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nAlternative back-tick markup:\n\n````````````````````````````````````\ndef insertionSort(data):\n for i in range(0, len(data)):\n j = i;\n\n while (j > 0) and (data[j] < data[j - 1]):\n temp = data[j]\n data[j] = data[j - 1]\n data[j] = temp\n --j\n````````````````````````````````````\n\n### HTML and LaTeX Blocks\n\nYou can even have HTML in a code block:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<b>Show this</b> HTML as <i>source</i>,\n<code>not code</code>.\n<img src=\"robot.jpg\">\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n`<img src=\"robot.jpg\">`\n\n`````````\n<img src=\"robot.jpg\">\n`````````\n\nLaTeX and other languages that use dollar signs work fine inside code\nfences:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n$ \\int_0^1 x^2 dx $\n\n$$$a = $$$e\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n...and of course, Markdeep inside Markdeep:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n- Do not \n- Format\n - this as a **list**!\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n### Code Blocks with Captions\n\nCode listings may have captions:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Python\ndef insertionSort(data):\n for i in range(0, len(data)):\n j = i;\n\n while (j > 0) and (data[j] < data[j - 1]):\n temp = data[j]\n data[j] = data[j - 1]\n data[j] = temp\n --j\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n[Listing [sort]: An insertion sort]\n\nIf you don't have a lot of exposition to share, then code blocks can be back to back:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\nprintf(\"Hello\\n\");\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\nprintf(\"World\\n\");\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\n### Multi-code Blocks and Custom CSS \n\nYou can interlace different languages or CSS classes within a single code block, but each is required\nto specify the language in this case. This is convenient for highighting lines or showing the \ntrace of an interactive session.\n\nAn example of a fenced code block with a CSS class:\n\n<pre><code>~~~~~~~~~~~~~~ Python input</code>\n>>> x = [1, 2, 3, 4]\n>>> [y * 2 for y in x]\n<code>~~~~~~~~~~~~~~ none output</code>\n[2, 4, 6, 8]\n<code>~~~~~~~~~~~~~~ Python input</code>\n>>> x + [5]\n<code>~~~~~~~~~~~~~~ none output</code>\n[1, 2, 3, 4, 5]\n<code>~~~~~~~~~~~~~</code>\n[This listing combines multiple code blocks to show the input and output of an interactive section.]\n</pre>\n\nAnd its result:\n\n~~~~~~~~~~~~~~ Python input\n>>> x = [1, 2, 3, 4]\n>>> [y * 2 for y in x]\n~~~~~~~~~~~~~~ none output\n[2, 4, 6, 8]\n~~~~~~~~~~~~~~ Python input\n>>> x + [5]\n~~~~~~~~~~~~~~ none output\n[1, 2, 3, 4, 5]\n~~~~~~~~~~~~~~\n[This listing combines multiple code blocks to show the input and output of an interactive section.]\n\n\n<style>\n.md code > .input { font-style: italic; }\n.md code > .output { font-weight: bold; background: #FF7; margin-left: -20px; padding-left: 20px}\n</style>\n\n\n\n### Less-than Signs in Code###\n#### Summary ####\n\nLess-than and greater-than signs (`<` and `>`) do not need to be escaped in diagrams or code\nas long as they do not appear immediately adjacent to a letter. Usually adding spaces or\nusing inline code backquote escaping will suffice even in those cases.\n\nIf you have trouble with less-than and greater-than signs right next to capitalized\nletters in code blocks, do _one_ of the following:\n\n- Put spaces after angle brackets: `std::vector< Capitalized >`\n- Use HTML entity escapes: `std::vector<Capitalized>`\n- Wrap code examples in `<script type=\"preformatted\">...</script>`\n- Wrap your whole document in `<script type=\"preformatted\">...</script>`\n\n<!-- The following list uses Unicode characters that look like ASCII\n but aren't, in order to prevent Markdeep and HTML from processing\n the code examples themselves. Do not copy from the document or you'll\n copy those invisible characters. Instead, see the actual code\n examples farther down the page. -->\n \nYou don't need to do this for legal HTML or XML in code blocks.\n\n#### Details ####\nLess-than and greater-than signs are allowed in code blocks\n(as well as anywhere else in Markdeep), and will be handled\ncorrectly if they are followed by a whitespace character.\n\nLikewise, legal HTML and XML are correctly processed as code\nwhen in code blocks.\n\nHowever, because browsers interpret \"`<`\" _immediately followed by_\na character as an HTML tag, less-than signs without a following space\nmust be formatted more carefully in shell scripts and languages such\nas C++ and Java. \n\nIf the character following the less-than sign is lower-case, for\nexample in: \"`std::vector<int>`\", then no consideration is\nneeded. If the character following less-than is a capital letter, then\nthe browser will automatically make it lower case. If the following\ncharacter is a slash, then the browser will interpret it as a stray\ntag and automatically remove it.\n\nIf you care most about being able to read your document in a browser\nwhen the markdeep.js script is not available (due to no local copy and\nno Internet connection), then either use surrounding whitespace or\nuse HTML entity codes to avoid incorrect processing of less-than signs.\n\n**Reformatted Examples:**\n\n~~~~~~~~~~~~~~~~~~~~\n#include <foo.h>\nls < /dev/null\nls</dev/null\nstd::vector< Capitalized > array;\nstd::vector<Capitalized> array;\n~~~~~~~~~~~~~~~~~~~~\n\nIf care more about not having to reformat your code examples, then\njust include them in preformatted `<script>` blocks:\n\n**Script Block Examples:**\n\n<script type=\"preformatted\">\n~~~~~\n#include <foo.h>\nstd::vector<Capitalized> array;\nls</dev/null\n~~~~~\n</script>\n\nYou can also include your entire document in a preformatted script\nblock to avoid the need for marking up each code (and inline code)\nexample.\n\n\n\nDiagrams\n--------------------------------------------------------------------------------\n\nDiagrams can be inserted alongside, as in this ****************************\nexample, or between paragraphs of text as shown * .---------. *\nbelow. * | Server |<------. *\n * '----+----' | *\nThe diagram parser leaves symbols used as labels * | | *\nunmodified, so characters like > and ( can appear * | DATA CYCLE | *\ninside of the diagram. In fact, any plain text * v | *\nmay appear in the diagram. In addition to labels, * .-------. .----+----. *\nany un-beautified text will remain in place for * | Security| | File | *\nuse as ASCII art. Thus, the diagram is rarely * | Policy +->| Manager | *\ndistored by the beautification process. * '-------' '---------' *\n ****************************\n\n*************************************************************************************************\n*.-------------------. ^ .---. *\n*| A Box |__.--.__ __.--> | | | *\n*| | '--' v | | *\n*'-------------------' | | *\n* Round *---(-. | *\n* .-----------------. .-------. .----------. .-------. | | | *\n* | Mixed Rounded | | | / Diagonals \\ | | | | | | *\n* | & Square Corners | '--. .--' / \\ |---+---| '-)-' .--------. *\n* '--+------------+-' .--. | '-------+--------' | | | | / Search / *\n* | | | | '---. | '-------' | '-+------' *\n* |<---------->| | | | v Interior | ^ *\n* ' <---' '----' .-----------. ---. .--- v | *\n* .------------------. Diag line | .-------. +---. \\ / . | *\n* | if (a > b) +---. .--->| | | | | Curved line \\ / / \\ | *\n* | obj->fcn() | \\ / | '-------' |<--' + / \\ | *\n* '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-' *\n* .---+-----. | ^ |\\ | | /| .--+ | | \\ / *\n* | | | Join | | Curved | \\| |/ | | \\ | \\ / *\n* | | +----> | '-' Vertical '--' '--' '-- '--' + .---. *\n* '---+-----' | | | 3 | *\n* v not:line 'quotes' .-' '---' *\n* .---+--------. / A || B *bold* | ^ *\n* | Not a dot | <---+---<-- A dash--is not a line v | *\n* '---------+--' / Nor/is this. --- *\n*************************************************************************************************\n[Figure [diagram]: Diagrams can also have captions]\n\n\nCode with line-like symbols is allowed in diagrams and is parsed correctly so\nlong as you make it unambiguous:\n\n**********************************************\n* .-------------------------+--+--------. \n* | --x; x->y |__| | \n* | 0 __proto__ __FILE__ <= |\n* | __ a | b --> foo |\n* | |__| y--; x || y a + b <--o--+\n* |__|__|_______________________________|\n**********************************************\n\n\nHere's a diagram on the left of some text:\n\n************** _Song of Myself: 35_\n* | | * \n* --+<---+-- * Would you hear of an old-time sea-fight? <br>\n* | ^ * Would you learn who won by the light of the moon and stars? <br>\n* v | * List to the yarn, as my grandmother's father the sailor told it to me.\n* --+--->+-- * \n* | | * Walt Whitman\n**************\n\n\nIf there is no leading text on the left except for whitespace, a diagram may omit the asterisks on the\nright side for convenience:\n\n****************************************\n* .----.\n* | |\n* '----' .------------>\n* |\n* '-------------\n****************************************\n\n\nDiagram Examples\n================================================================================\n\nLines with Decorations\n--------------------------------------------------------------------------------\n*************************************************************************************************\n* ________ o * * .--------------. *\n* *---+--. | | o o | ^ \\ / | .----------. | *\n* | | '--* -+- | | v / \\ / | | <------. | | *\n* | '-----> .---(---' --->*<--- / .+->*<--o----' | | | | | *\n* <--' ^ ^ | | | | | ^ \\ | '--------' | | *\n* \\/ *-----' o |<----->| '-----' |__| v '------------' | *\n* /\\ *---------------' *\n*************************************************************************************************\n\nGraph with Large Nodes\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* .---. .-. .-. .-. .-. *\n* | A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 | *\n* '---' '-' '+' '-' | '-' *\n* | ^ | ^ *\n* v | v | *\n* .-. .-+-. .-. .-+-. .-. .+. .---. *\n* | 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D | *\n* '-' '---' '-' '---' '-' '-' '---' *\n*************************************************************************************************\n\n\n\nGraph with Small Nodes\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* A 1 2 4 8 *\n* *----->o<---->o<----o-----------. o *\n* ^ ^ | ^ *\n* | | | | *\n* v | v | *\n* o<--->*<---->o---->*---->o---->o<---->* *\n* 3 B 5 C 6 7 D *\n*************************************************************************************************\n\n\nFlow Chart\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* . *\n* .---------. / \\ *\n* | START | / \\ .-+-------+-. ___________ *\n* '----+----' .-------. A / \\ B | |COMPLEX| | / \\ .-. *\n* | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X | *\n* v '-------' \\ / | |PROCESS| | \\___________/ '-' *\n* .---------. \\ / '-+---+---+-' *\n* / INPUT / \\ / *\n* '-----+---' ' *\n* | ^ *\n* v | *\n* .-----------. .-----+-----. .-. *\n* | PROCESS +---------------->| PROCESS |<------+ X | *\n* '-----------' '-----------' '-' *\n*************************************************************************************************\n\nLine Ends\n--------------------------------------------------------------------------------\n\n\n*************************************************************************************************\n* *\n* o--o *--o / / * o o o o o * * * * o o o o * * * * o o o o * * * * *\n* o--* *--* v v ^ ^ | | | | | | | | \\ \\ \\ \\ \\ \\ \\ \\ / / / / / / / / *\n* o--> *--> * o / / o * v ' o * v ' o * v \\ o * v \\ o * v / o * v / *\n* o--- *--- *\n* ^ ^ ^ ^ . . . . ^ ^ ^ ^ \\ \\ \\ \\ ^ ^ ^ ^ / / / / *\n* | | * o \\ \\ * o | | | | | | | | \\ \\ \\ \\ \\ \\ \\ \\ / / / / / / / / *\n* v v ^ ^ v v ^ ^ o * v ' o * v ' o * v \\ o * v \\ o * v / o * v / *\n* * o | | * o \\ \\ *\n* *\n* <--o <--* <--> <--- ---o ---* ---> ---- *<-- o<-- -->o -->* *\n* *\n*************************************************************************************************\n\nTests for some tough cases:\n************************************************\n* +-+ \\ \\ | / / *\n* + + \\ v v v / *\n* +-+ \\ .---------. / \\ | / *\n* v| |v vvv *\n* +-+ --->| |<--- -->o<-- *\n* | | ^| |^ ^^^ *\n* +-+ / '---------' \\ / | \\ *\n* / ^ ^ ^ \\ *\n* / / | \\ \\ *\n************************************************\n\nTrees\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* . . . .--- 1 .-- 1 / 1 *\n* / \\ | | .---+ .-+ + *\n* / \\ .---+---. .--+--. | '--- 2 | '-- 2 / \\ 2 *\n* + + | | | | ---+ ---+ + *\n* / \\ / \\ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \\ / 3 *\n* / \\ / \\ | | | | | | | | '---+ '-+ + *\n* 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \\ 4 *\n* *\n*************************************************************************************************\n\n\nCircuits\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ____ * *\n* | |_____.---. | *\n* o _____| )----------)-------. *\n* / \\ | '---' | __|__ *\n* /___\\ | | \\ / *\n* | '-------------. | \\ / *\n* A ----------------' | | o *\n* .-------------------. o-----)-------' | *\n* | |___.---. | |___.---. *\n* B ---*---.__.---. ___| )--*--.__..---. ____) )----- Y *\n* __| o----*--' '---' ______)) )---' '---' *\n* C -------' '---' | | ''---' *\n* | o *\n* | / \\ *\n* | /___\\ *\n* | | *\n* '--------------' *\n*************************************************************************************************\n\n\nGantt Chart\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ║ Preproduction┆ Alpha┆ RC1┆\n* ═══════════╬══════════════╪════════════╪════════════════╪══\n* Story ║ ▆▆▆▆▆▆▆▆ ┆ ▆┆▆▆▆ ┆\n* Concept Art║ └▆▆▆▆▆▆┆▆▆▆┐ ┆ ┆\n* Modeling ║ ┆ └▆▆▆▆▆▆▆▆┆▆▆▆▆▆▆▆ ┆\n* Rigging ║ ┆ └▆▆▆┆▆▆▆▆▆▆▆▆▆▆▆▆ ┆\n* Mechanics ║ ▆▆▆▆▆▆┆▆▆┐ ┆ ░░░░▆▆▆▆ ┆\n* Engine Code║ ▆▆▆▆▆▆▆┐ │ ┆ └────────▆┆▆▆▆▆▆▆▆▆▆▆▆▆▆ ┆\n* Game Code ║ └─┴▆┆▆▆▆▆▆▆▆▆▆▆▆▆┆▆▆▆▆ ░░░░ ▆ ┆\n* ║ ┆ ┆ Freeze ┆\n*************************************************************************************************\n\n\nBig Shapes\n--------------------------------------------------------------------------------\n*************************************************************************************************\n* *\n* .---------. . .-------. .-------. .---------. .-----. .----. *\n* \\ / / \\ \\ \\ | | | | / \\ / \\ *\n* \\ / / \\ \\ \\ | | | | / \\ | | *\n* \\ / / \\ \\ \\ | | | | \\ / | | *\n* \\ / / \\ \\ \\ | | | | \\ / \\ / *\n* ' '---------' '-------' '-------' '---------' '-----' '----' *\n* *\n*************************************************************************************************\n\n\nSmall Shapes\n--------------------------------------------------------------------------------\n*************************************************************************************************\n* .---. __ .. *\n* .--. . .-----. \\ / .---. .---. ___ ___ | | | ) *\n* / \\ / \\ \\ / .-. . ' . | | .---. .---. | | / \\ | | '--' '' *\n* \\ / / \\ \\ / | | / \\ / \\ '---' / / \\ \\ | | \\___/ |___| .. __ *\n* '--' '-----' ' '-' '---' /___\\ '---' '---' '---' ( | |__| *\n* '' *\n*************************************************************************************************\n\n\nOverlaps and Intersections\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* .-. .-. .-. .-. .-. .-. *\n* | | | | | | | | | | | | *\n* .---------. .--+---+--. .--+---+--. .--| |--. .--+ +--. .------|--. *\n* | | | | | | | | | | | | | | | | | | *\n* '---------' '--+---+--' '--+---+--' '--| |--' '--+ +--' '--|------' *\n* | | | | | | | | | | | | *\n* '-' '-' '-' '-' '-' '-' *\n*************************************************************************************************\n\n\n\nBig Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* .----. .----. *\n* / \\ / \\ .-----+-----+-----. *\n* + +----+ +----. | | | | .-----+-----+-----+-----+ *\n* \\ / \\ / \\ | | | | / / / / / *\n* +----+ B +----+ + +-----+-----+-----+ +-----+-----+-----+-----+ *\n* / \\ / \\ / | | | | / / / / / *\n* + A +----+ +----+ | | B | | +-----+-----+-----+-----+ *\n* \\ / \\ / \\ +-----+-----+-----+ / / A / B / / *\n* '----+ +----+ + | | | | +-----+-----+-----+-----+ *\n* \\ / \\ / | A | | | / / / / / *\n* '----' '----' '-----+-----+-----' '-----+-----+-----+-----+ *\n* *\n*************************************************************************************************\n\n\nSmall Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ___ ___ .---+---+---+---+---. .---+---+---+---. .---. .---. *\n* ___/ \\___/ \\ | | | | | | / \\ / \\ / \\ / \\ / | +---+ | *\n* / \\___/ \\___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+ *\n* \\___/ b \\___/ \\ | | | b | | | \\ / \\a/ \\b/ \\ / \\ | +---+ | *\n* / a \\___/ \\___/ +---+---+---+---+---+ +---+---+---+---+ +---+ b +---+ *\n* \\___/ \\___/ \\ | | a | | | | / \\ / \\ / \\ / \\ / | a +---+ | *\n* \\___/ \\___/ '---+---+---+---+---' '---+---+---+---' '---' '---' *\n* *\n*************************************************************************************************\n\nTiny Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* ┌─┬─┬─┬─┬─┐ ▉▉ ▉▉ ▉▉ ⬢ ⬡ ⬡ ┌┬┬┬┬┬┬┬┬┐ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ ___________ +-+-+-+-+ *\n* ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ⬢ ⬢ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n* ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ▉▉ ⬢ ⬢ ⬢ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n* ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ⬡ ⬡ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n* └─┴─┴─┴─┴─┘ ▉▉ ▉▉ ▉▉ ⬡ ⬡ ⬡ └┴┴┴┴┴┴┴┴┘ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ *\n*************************************************************************************************\n\nDot Grids\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* *\n* o o o o o * * * * * * * o o * o o o * * * o o o · * · · · · · · *\n* o o o o o * * * * * o o o o * o o o o * * * * * o * * · * * · · · · · · *\n* o o o o o * * * * * o * o o o o o o o o * * * * * o o o o o · o · · o · · * * · *\n* o o o o o * * * * * o * o o o o o o o * * * * o * o o · · · · o · · * · *\n* o o o o o * * * * * * * * * o o o o * * * o * o · · · · · · · * *\n* *\n*************************************************************************************************\n\nUnicode in Diagram\n--------------------------------------------------------------------------------\n\n************************************************************************************************\n* ↖ ↗ ✶ ✹ ✩ ⓵ ⎲ ░░▒▒▓▓▉▉ ▚▚ ▢ ▢ ⬚ ⬚ ⊕ \n* ▲ ◀━━━━━━━▶ ↙ ↘ ➊ ❶ ➀ ① ➕ ➖ ➗ ❌ ⎳ ╲ ╱ ▚▚ ▢ ▢ ⬚ ⬚ \n*\n* ┃ ╭╌╌╌╌╌╌╌╮ ╔═══════╗ ┏━━━━━━━┓ ┏╍╍╍╍╍╍╍┓ ╲ ╱ ░░▒▒▓▓▉▉ ▚▚ ⬣ ⬣ ⎔ ⎔ ⊗ \n* ┃ ╎ ╎ ║ ║ ┃ ┃ ╏ ╏ ⎛ ⎧ ⎡ ╳ ░░▒▒▓▓▉▉ ▚▚ ⬣ ⬣ ⎔ ⎔ ⊘ \n* ┃ ╎ ╎ ║ ║ ┃ ┃ ╏ ╏⋮ ⎜ ⎨ ⎢ ╱ ╲ ░░▒▒▓▓▉▉ ▚▚ ◯ ◯ ⏣ ⏣ ⊙ \n* ▼ ╰╌╌╌╌╌╌╌╯ ╚═══════╝ ┗━━━━━━━┛ ⋱ ┗╍╍╍╍╍╍╍┛⋮ ⎝ ⎩ ⎣╱ ╲ ░░▒▒▓▓▉▉ ▚▚ ◯ ◯ ⏣ ⏣ ⊛ \n* ⋱ ⋮ ◢▉▉◣ ⊜ \n* ∑xᵢ 𝚺xᵢ ∫t²dt ⋱ ⋮ ◥▉▉◤ \n************************************************************************************************\n\n\nSimple Plot Diagram\n-------------------------------------------------------------------------------\n*************************************************\n* ▲\n* Uin ┊ .------------------------\n* ┊ | \n* ┊ | \n* *---'┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄▶\n* \n* Udc▲ \n* Udc_OK ┊ .---------------------\n* ┊ / : \n* ┊ / : \n* *---'┄┄┄┄:┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄▶\n* :<----->: \n* ▲ 500ms : \n* ┊ : \n*Cpu.Qon ┊┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄.-----------\n* ┊ | Inactive \n* ┊ Active | \n* *----------------'┄┄┄┄┄┄┄┄┄┄┄▶\n* \n*************************************************\n\n\nGraphics Diagram\n-------------------------------------------------------------------------------\n*************************************************************************************************\n* . *\n* 0 3 P * Eye / ^ / *\n* *-------* +y \\ +) \\ / Reflection *\n* 1 /| 2 /| ^ \\ \\ \\ v *\n* *-------* | | v0 \\ v3 --------*-------- *\n* | |4 | |7 | ◄╮ *----\\-----* *\n* | *-----|-* ⤹ +-----> +x / v X \\ .-.<-------- o *\n* |/ |/ / ⤴ / o \\ | / | Refraction / \\ *\n* *-------* v / \\ +-' / \\ *\n* 5 6 +z v1 *------------------* v2 | o-----o *\n* v *\n*************************************************************************************************\n\n\nAnnotated Table Diagram\n--------------------------------------------------------------------------------\n\n**********************************************\n* ┏━━━━┳━━━━┳ ┳━━━━┓\n* ┃ A₁ ┃ A₂ ┃ ⋯ ┃ Aⱼ ┃ <--- Basis \n* ┡━━━━╇━━━━╇ ╇━━━━┩\n* │ 16 │ 4 │ ⋯ │ 9 │\n* ⎧ ├────┼────┼ ┼────┤\n* │ │ 1 │ -2 │ ⋯ │ 10 │\n* Xᵢ ⎨ ├────┼────┼ ┼────┤\n* │ │ 8 │ 52 │ ⋯ │ 0 │\n* ⎩ ├────┼────┼ ┼────┤\n* │ 14 │ 0 │ ⋯ │ -1 │\n* └────┴────┴ ┴────┘\n**********************************************\n\n \nIcon Diagram\n--------------------------------------------------------------------------------\n\n*************************************************************************************************\n* .-. .--------. *\n* .-+ | | | *\n* .--+ '--. |'--------'| *\n* | Server Cloud |<------------------>| Database | *\n* '-------------' | | *\n* ^ ^ '--------' *\n* Internet | | ^ *\n* .------------------------' '-------------. | *\n* | | v *\n* v v .------. .------. *\n* .--------. WiFi .--------. Bluetooth .-----. / # # /| / # # /| *\n* | |<------------->| |<---------->| | +------+/| LAN +------+/| *\n* |Windows | | OS X | | iOS | | +/|<--->| +/| *\n* +--------+ +--------+ | | |Ubuntu+/| |Ubuntu+/| *\n* /// ____ \\\\\\ /// ____ \\\\\\ | o | | +/ | +/ *\n* '------------' '------------' '-----' '------' '------' *\n* Laptop 1 Laptop 2 Tablet 1 Dedicated Server Rack *\n*************************************************************************************************\n\n\nStyling Diagrams\n------------------------------------------------------------------------------------\n\n<style>\n.md .inverse svg.diagram {\n background: #333;\n stroke: #FFF;\n fill: #FFF;\n}\n\n.md .inverse svg.diagram .opendot {\n fill: #333;\n}\n</style>\n\nYou can use CSS to style all diagrams or individual diagrams. For example,\nthe following has light lines on a dark background:\n\n<div class=\"inverse\">\n ****************************************************\n * .---. . .----o----. *\n * | | | | | | *\n * | | --. |.-- | | *----*<---+ *\n * | | .-.| | +--+ | |____| *\n * | | | | | | | | | | *\n * '---' '-'' ' ' ' o----o--->' *\n ****************************************************\n</div>\n\n\nHorizontal Rules\n========================================================================\n\nFollowing the CommonMark specification, any of these patterns can be used (and extended across\na whole line, of course) to produce a horizontal rule:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ none\n-----\n\n- - -\n\n_____\n\n_ _ _\n\n*****\n\n* * *\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nExample:\n\n-----\n\n- - -\n\n_____\n\n_ _ _\n\n*****\n\n* * *\n\nEmbedded Math\n========================\n\nMarkdeep automatically includes [MathJax](http://mathjax.org) if your\ndocument contains equations and you have an Internet connection. That means\nyou get the **full power of LaTeX, TeX, MathML, and AsciiMath notation**.\nJust put math inside single or double dollar signs. \n\n$$ \\Lo(X, \\wo) = \\Le(X, \\wo) + \\int_\\Omega \\Li(X, \\wi) ~ f_X(\\wi, \\wo) ~ | \\n \\cdot \\wi | ~ d\\wi $$\n\nYou can also use LaTeX equation syntax directly to obtain numbered\nequations:\n\n\\begin{equation}\ne^{i \\pi} + 1 = 0\n\\end{equation}\n\n\\begin{equation}\n\\mathbf{A}^{-1}\\vec{b} = \\vec{x}\n\\end{equation}\n\nIf you don't have equations in your document, then Markdeep won't\nconnect to the MathJax server. Either way, it runs MathJax after \nprocessing the rest of the document, so there is no delay.\n\nMarkdeep is smart enough to distinguish non-math use of dollar signs,\nsuch as $2.00 and $4.00, US$5, and 3$. Inline\nmath requires consistent spaces (or punctuation) either outside or inside\nof the LaTeX dollar signs to distinguish them from\nregular text usage. Thus, the following all work:\n\n- $x^2$\n- $ x^2 $\n- ($x^2$)\n- ($ x^2 $)\n- Variable $x^2$,\n- Variable $ x^2 $\n- Two $x$ vars $y$ on the same line\n- Different spacing styles: $\\theta_{x}$ vs. $ \\theta_{y} $\n\nUnless you've changed out the default MathJax processor, you can define \nyour own LaTeX macros by executing `\\newcommand` within dollar signs,\njust as you would in LaTeX. Markdeep provides a handful of commands\ndefined this way by default because they're things that I frequently \nneed:\n\n Code | Symbol\n-------------------|------------\n `\\O(n)` | $\\O(n)$\n `\\mathbf{M}^\\T` | $\\mathbf{M}^\\T$\n `45\\degrees` | $45\\degrees$\n `x \\in \\Real` | $x \\in \\Real$\n `x \\in \\Integer` | $x \\in \\Integer$\n `x \\in \\Boolean` | $x \\in \\Boolean$\n `x \\in \\Complex` | $x \\in \\Complex$\n `\\n` | $\\n$\n `\\w` | $\\w$\n `\\wo` | $\\wo$\n `\\wi` | $\\wi$\n `\\wh` | $\\wh$\n `\\Li` | $\\Li$\n `\\Lo` | $\\Lo$\n `\\Lr` | $\\Lr$\n `\\Le` | $\\Le$\n `10\\un{m/s^2}` | $10\\un{m/s^2}$\n\n\n# ATX Headers\nIn addition to the underlined headers, you can also use ATX-style\nheaders, with multiple # signs:\n\n## H2\n### H3\n#### H4\n##### H5\n###### H6\nAlthough: do you really need six levels of subsection nesting?!\n\nYou can also create unnumbered sections that will not appear in the\ntable of contents using parentheses around the pound signs:\n\n(##) Unnumbered H2\n\n\nMultiple Columns\n========================================================================\n<div style=\"columns:2;-webkit-columns:2;-moz-columns:2;column-gap:3em;-webkit-column-gap:3em;-moz-column-gap:3em\">\nYou can use the CSS\n[columns](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)\nstyle to make an HTML multicolumn block. Then, just use regular Markdeep within it and the\nbrowser will automatically apply your multicolumn layout. \n\nBrowsers are even smart enough to break the columns correctly when\nprinting to PDF or to a printer. However, for a long document,\nmultiple columns don't work well when displayed on screen. That's\nbecause there are no discrete \"pages\" on screen to break columns. So,\nthe browser will make each column as long as the entire document,\nwhich is probably not what you want.\n\nSo, multi-column only works well if you know that you have very short\nsections (as in this example), or if you were planning on printing to\nseparate pages when done.\n</div>\n\n\nCustom Formatting\n=========================================================================\n\nManual\n-------------------------------------------------------------------------\n\nMarkdeep uses CSS for styling. That means you can embed a style sheet\nto override anything thatn you don't like about the built-in styling.\nFor example, if you don't want section numbering, just use:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>h1:before, h2:before { content: none; }</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nMarkdeep uses Markdown's syntax, even where I disagree with the\nchoices. But you aren't stuck with that. Do you wish that Markdown\nhad specified single-asterisk for `*bold*`? You can have\nthat:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>em.asterisk { font-style: normal; font-weight: bold; }</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nEach of the list bullets (`+`, `-`, `*`) has its own CSS class. You\ncan use this, for example, to make `+` entries bold and `-` ones\nuse a circle:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<style>\n li.plus { font-weight: bold; } \n li.minus { list-style-type: circle;}\n</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\nStyle Sheets\n------------------------------------------------------------------------\n\n### Latex Article\n\nTo match the default Latex article formatting, insert the following anywhere in your document:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/latex.css?\">\n</pre>\n\n### Dark \n\nFor an aggressively-stylized document with a black background, insert the following anywhere in\nyour document:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/dark.css?\">\n</pre>\n\n### API Documentation\n\nTo use the API documentation template, insert the following anywhere in\nyour document:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/apidoc.css?\">\n</pre>\n\n### Presentation Slides\n\nTo create presentation slides as a PDF, insert the following into\nyour document, using first-level headers for sections and second-level\nheaders for slides:\n\n<pre class=\"listing tilde\"><<span>link</span> rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/slides.css?\">\n</pre>\n\nThen, print the document to PDF.\n\n\nParagraph Numbering\n--------------------------------------------------\n\nAcademic article or book proofs often have line numbers so that reviewers and editors can refer\nto specific passages. This doesn't make sense for a document in a browser because line breaks\nchange based on the reader's screen size. \n\nYou can add _paragraph_ numbers to your Markdeep document by including the following HTML at\nthe bottom of your document. You can remove the `<style>` tag and place the code in a CSS file\nas well.\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ html\n<style>\np::before {\n content: \"\" counter(paragraph);\n counter-increment: paragraph;\n margin-left: -50px;\n width: 50px;\n height: 0px;\n overflow: visible;\n font-size: 70%;\n display: block;\n color: #666;\n}\n</style>\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n\n\nLocalization\n===================================================\n\nThere are two ways to localize the keywords such as Table, Diagram,\nMonday, etc., from English to your favorite language. \n\nThe first is to\nput a meta tag with a\n[`lang`](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\nattribute in the document, such as <`meta lang=\"ru\"\ncharset=\"utf-8\"`>. If your favorite language isn't supported by\nMarkdeep, just e-mail me a Javascript snippet with the appropriate\ntranslations and I'll add it (see the source code for examples).\n\nThe second method is to manually set the `markdeepOptions.lang` field\nbefore you include the script in your document.\n\n\nUnicode (in UTF-8 encoding)\n===================================================\n\nTo support Unicode input, you must add <`meta charset=\"utf-8\"`> to\nthe *top* of your document (in the first 512 bytes).\n\n- Asian characters 林花謝了春紅 太匆匆, 無奈朝來寒雨 晚來風 胭脂淚 留人醉 幾時重, 自是人生長恨 水長東\n- Asian punctuation: 、。!,:\n- Matching pairs «»‹›“”‘’〖〗【】「」『』〈〉《》〔〕\n- Greek ΑΒΓΔ ΕΖΗΘ ΙΚΛΜ ΝΞΟΠ ΡΣΤΥ ΦΧΨΩ αβγδ εζηθ ικλμ νξοπ ρςτυ φχψω\n- Currency ¤ $ ¢ € ₠ £ ¥\n- Common symbols © ® ™ ² ³ § ¶ † ‡ ※\n- Bullets •◦ ‣ ✓ ●■◆ ○□◇ ★☆ ♠♣♥♦ ♤♧♡♢\n- Phonetic ᴁ ᴂ ᴈ\n- Music ♩♪♫♬♭♮♯\n- Punctuation “” ‘’ ¿¡ ¶§ª - ‐ ‑ ‒ – — ― …\n- Accents àáâãäåæç èéêë ìíîï ðñòóôõö øùúûüýþÿ ÀÁÂÃÄÅ Ç ÈÉÊË ÌÍÎÏ ÐÑ ÒÓÔÕÖ ØÙÚÛÜÝÞß \n- Math ° ⌈⌉ ⌊⌋ ∏ ∑ ∫ ×÷ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ∙ ∘ ′ ″ ‴ ∼ ∂ √ ≔ × ⁱ ⁰ ¹ ² ³ ₀ ₁ ₂ π ∞ ± ∎\n- Logic & Set Theory ∀¬∧∨∃⊦∵∴∅∈∉⊂⊃⊆⊇⊄⋂⋃\n- Relations ≠≤≥≮≯≫≪≈≡\n- Sets ℕℤℚℝℂ\n- Arrows ←→↑↓ ↔ ↖↗↙↘ ⇐⇒⇑⇓ ⇔⇗ ⇦⇨⇧⇩ ↞↠↟↡ ↺↻ ☞☜☝☟\n- Computing ⌘ ⌥ ‸ ⇧ ⌤ ↑ ↓ → ← ⇞ ⇟ ↖ ↘ ⌫ ⌦ ⎋⏏ ↶↷ ◀▶▲▼ ◁▷△▽ ⇄ ⇤⇥ ↹ ↵↩⏎ ⌧ ⌨ ␣ ⌶ ⎗⎘⎙⎚ ⌚⌛ ✂✄ ✉✍\n- Digits ➀➁➂➃➄➅➆➇➈➉\n- Religious and cultural symbols ✝✚✡☥⎈☭☪☮☺☹☯☰☱☲☳☴☵☶☷\n- Dingbats ❦☠☢☣☤♲♳⌬♨♿ ☉☼☾☽ ♀♂ ♔♕♖ ♗♘♙ ♚♛ ♜♝♞♟\n\n\nGravizo Support\n===================================================\n\nMarkdeep diagrams have no dependency on third parties or the network \n(you can store the `markdeep.min.js` file locally on your machine!)\nand look the same in your document as on screen in the final document.\n\nIf you need the full power of DOT/GraphViz automated layout graphs and\ncan accept a network and third party dependency, you can embed\n[Gravizo](https://g.gravizo.com/) within a Markdeep document using either\ndirect Markdeep image syntax or an embedded HTML `img` tag:\n\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n<img src=\"https://g.gravizo.com/svg?digraph G { A -> B -> C; A -> C; }\">\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n<img src=\"https://g.gravizo.com/svg?digraph G { A -> B -> C; A -> C; }\">\n\n\nIncluding/Inserting Other Documents\n===================================================\n\nMarkdeep currently contains experimental (i.e., beta, may-not-be-supported-in-the-future)\nsupport for including one document within another. This is convenient for bibliographies,\nboilerplate footers and headers, and styling. The syntax is:\n\n<center>`(insert otherdocument.md.html here)`</center>\n\nThe inserted document must be a standalone Markdeep document, including the Markdeep line. It\ncan have any file extension, although `.html` is recommended and there **must** be a period\nin the filename to disambiguate it versus arbitrary TODO-style notes.\n\nThe included document will be inserted inline, meaning that footnotes, figure numbering, and\nother kinds of references will flow correctly. Recursive inclusion is allowed. All paths in an\nincluded document are relative to the original document. That's undesirable, and a future\nrelease may be able to make those paths absolute.\n\nHere is an example of embedding `example.md.html` into `features.md.html`:\n\n (insert example.md.html here)\n\n\nDifferences from Other Markdown\n===================================================\n\nFeatures\n---------------------------------------------------\n\nThere are many, inconsistent markdown variants. Markdeep intentionally differs from a few of\nthem in specific ways:\n\n- Code blocks require fences; no indent-only code blocks. I think that allowing indentation to\n indicate code blocks was a poor choice in the original markdown specification because code\n vs. blockquote is ambiguous in plain text and it makes list detection harder.\n \n- No bold/italic/strikethrough inside of words without spaces because they could form an\n equation or technical term. Just use HTML tags.\n\n- Setext headers require at least three minus or equals characters to distinguish from\n multiline equations\n\n- Whitespace required between `#` and the section name for ATX headers (disambiguates \"#1\" from\n a header; required by CommonMark)\n\n- Markdeep's table reference syntax differs from MultiMarkdown's in order to provide a\n consistent formatting syntax across sections, figures, and tables...and one for which the\n source text is more readable.\n \n- Blockquotes must be two lines long (use explicit HTML if you really need a single-line\n blockquote) or contain quotation marks to disambiguate them from lines where a greater-than\n sign just wrapped around.\n \n- Escaped characters such as `\\*` and `\\_` are not needed, since Markdeep heuristics for\n determining when those characters are part of text and not formatting.\n\n\nTemporary Limitations\n---------------------------------------------------\n\nFuture releases likely will address these known bugs, limitations, and\n\"missing features\":\n\n- Listings have a maximum caption length of three lines.\n- Tables and diagrams in lists create a new list\n- No support for numbered lists that start with a value other than 1.\n- Paragraphs not allowed in lists\n- No dashed lines in diagrams using ASCII characters. Because there's no plain-text\n floating-dot character, different ASCII diagram styles use different, ambiguous conventions.\n You can use Unicode characters as a workaround until I introduce a native style.\n\n\nPermanent Limitations\n---------------------------------------------------\n\nDue to the special protection from formatting that Markdeep affords `<pre>` and `<code>` tags\nthat appear in the document, you cannot nest a code tag inside of another code tag, and\nlikewise for pre tags. Fortunately, it is pretty hard to imagine a case where you would want\nnested code tags.\n\n","difficulty":1,"centerTextElement":[false,false,false,false,false,false],"date":"2018-07-06T07:40:20.941Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":9,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"E: Beispiel für eine Vokabelkarte","description":"Die Vokabelkarte ist Teil der Demo-Kartei, siehe den roten Button auf der Startseite.","date":"2018-04-24T11:05:15.991Z","dateUpdated":"2018-07-06T04:20:25.534Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"moduleActive":false,"college":"THM","learningActive":false,"maxCards":2,"daysBeforeReset":7,"learningStart":"2018-04-24T11:05:15.991Z","learningEnd":"2038-01-19T13:04:27.919Z","learningInterval":[1,3,7,28,84],"learners":1,"wordcloud":false,"shuffled":false,"cardType":1,"difficulty":2,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Englisch – Deutsch (mit BEOLINGUS-Hilfe)","back":"**erinnern**","difficulty":2,"centerTextElement":[true,true,false,false],"date":"2018-06-10T16:58:28.909Z","learningGoalLevel":0,"backgroundStyle":0,"learningIndex":"0","learningUnit":"0","cardType":1,"front":"**remember**","dateUpdated":"2018-07-06T04:20:25.521Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"I: Beispiel für eine Vokabelkarte","description":"Die Vokabelkarte ist Teil der Demo-Kartei, siehe den roten Button auf der Startseite.","date":"2018-04-24T11:05:15.991Z","dateUpdated":"2018-07-06T04:20:25.534Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":1,"license":["by","nc","sa"],"userDeleted":false,"moduleActive":false,"college":"THM","learningActive":false,"maxCards":2,"daysBeforeReset":7,"learningStart":"2018-04-24T11:05:15.991Z","learningEnd":"2038-01-19T13:04:27.919Z","learningInterval":[1,3,7,28,84],"learners":1,"wordcloud":false,"shuffled":false,"cardType":1,"difficulty":2,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"Englisch – Deutsch (mit BEOLINGUS-Hilfe)","back":"**erinnern**","difficulty":2,"centerTextElement":[true,true,false,false],"date":"2018-06-10T16:58:28.909Z","learningGoalLevel":0,"backgroundStyle":0,"learningIndex":"0","learningUnit":"0","cardType":1,"front":"**remember**","dateUpdated":"2018-07-06T04:20:25.521Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"A: Quiz zum Kennenlernen von .cards","description":"Die Quizfragen sind Teil der Demo-Kartei, siehe den roten Button auf der .cards-Startseite.","date":"2018-06-08T13:51:09.335Z","dateUpdated":"2018-07-06T12:24:39.939Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":true,"ratings":true,"kind":"free","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":5,"license":["by","nc","sa"],"userDeleted":false,"learningActive":false,"maxCards":2,"daysBeforeReset":7,"learningStart":"2018-06-08T13:51:09.335Z","learningEnd":"2038-01-19T15:33:57.156Z","learningInterval":[1,3,7,28,84],"learners":0,"wordcloud":false,"shuffled":false,"cardType":11,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"1. Gesammeltes Wissen","front":"**Was bleibt?**\n![](https://arsnova.cards/img/background/zettelkasten_wikipedia_original.jpg width=\"500px\")\n","back":"![Angesammeltes Wissen](https://arsnova.cards/img/background/zettelkasten_wikipedia_original.jpg width=\"200 pt\") \nEin Studierzimmer [^Foto-Quelle] kann eine kreative persönliche Lernumgebung sein. Das auf tausenden Zetteln in dutzenden Kartons gesammelte Wissen ist zumindest der Bewohnerin des abgebildeten Zimmers zugänglich (ein Klick auf das Foto zeigt die Schuhgröße 4½ auf den Kartons). Warum also nicht mit Zetteln in Schuhkartons studieren? Den digitalen Karten fehlt doch die Haptik des Papiers und die Gesamtschau -- im Regal und auf dem Boden. \n\nStimmt. Dafür haben digitale Karten aber auch **unbestreitbare Vorteile** -- gemäß dem Slogan unserer Plattform:\n\n+ **Organize**: Das Wissen aus deinem Studium kannst du jederzeit und überall mit wenigen Klicks wiederfinden, auch noch viele Jahre nach deinem Studium, wenn du aus deiner Studierbude längst ausgezogen bist, womöglich dein Zettelarchiv bis auf das IKEA-Regal entsorgt hast. Eines Tages, in deinem Job, in einer Teambesprechung, brauchst du sicherlich das Wissen aus deinem Studium wieder.\n\n+ **Learn**: Die Karten sind multimedial: Du kannst Bilder, Podcasts und Videos einfügen. Du studierst ein MINT-Fach? Schreib mit $\\TeX$ die kompliziertesten mathematischen Formeln und mit `Syntax-Highlighting` beliebigen Programmiercode schnell und sauber auf eine Karte. Du darfst kostenlos die [Open Source Software](https://github.com/thm-projects/arsnova-flashcards) .cards als persönliche Lernumgebung auf deinem Laptop installieren. So kannst du deine Karten auch ohne Internet überall lernen.\n\n+ **Remember**: Die Karten deines Lernpensums werden dir zum dauerhaften Memorieren an [kognitionswissenschaftlich berechneten Tagen](https://en.wikipedia.org/wiki/Spaced_repetition) wieder vorgelegt. Push-Nachrichten auf dein Handy oder E-Mails erinnern dich ans Lernen.\n\n[^Foto-Quelle]: Foto zum Wikipedia-Begriff [Zettelkasten](https://de.wikipedia.org/wiki/Zettelkasten), Kai Schreiber, CC BY-SA 2.0","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-10T05:23:42.665Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-06T05:21:54.431Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"2. Worum es geht","front":"Was unterscheidet **.cards** von anderen Lernkartei-Apps?","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-08T13:54:04.447Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-06T12:24:39.925Z","back":"(##) Was unterscheidet .cards von anderen Lernkartei-Apps?\n\n1. Im Gegensatz zu Lernkartei-Apps wie [Quizlet](https://quizlet.com/) oder [SuperMemo](https://www.supermemo.com/) unterstützt die .cards-Plattform auch das **Mitschreiben in Vorlesungen**. Weiter hinten in dieser Demo-Kartei haben wir ein Beispiel für eine Mitschrift eingefügt. Sie wurde handschriftlich in einer Bachelor-Vorlesung erstellt, abfotografiert und zu Hause digital auf .cards zum Lernen nachbearbeitet.\n\n+ Die Plattform .cards ist eine **vorlesungsbegleitende persönliche Lernumgebung**, ein virtueller Ort, an dem Lernzeit mit kognitiven Tätigkeiten -- Mitschreiben, Nachbearbeiten, Lernkarten erstellen, Lernfragen wiederholt beantworten -- intensiv verbracht wird. \n\n+ Es gibt auf .cards eine Option, die es der Lehrperson ermöglicht, kontinuierliches und wiederholtes Lernen mit **Bonuspunkten** zu honorieren. Wir haben .cards mit dem Ziel entwickelt, der **Aufschieberitis** und dem **Bulimielernen** im Studium entgegen zu wirken. Lies hierzu unser [Paper](https://hochschulforumdigitalisierung.de/sites/default/files/dateien/HFD_Winter_School_E-Book_Version_2.pdf) (S. 91-98).","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"3. Digitale Schuhkartons: Karteien","front":"Welche **Karteitypen** gibt es auf .cards?","back":"Es gibt 14 Kartentypen, die beim Anlegen einer Kartei zur Auswahl stehen. \nJede Kartei beinhaltet ausschließlich **Karten desselben Typs**, es sei denn sie wurde aus mehreren Karteien unterschiedlichen Typs gemischt wie diese Demo-Kartei. Einige Karteitypen haben eine **Schwierigkeitsstufe (Level)**, die an der Kartenfarbe erkennbar ist: Grün für Basics, Blau für Fortgeschritten und Rot für Expert*in. Einige Kartentypen sind unliniert, der besseren Lesbarkeit wegen, bei anderen kann dies individuell eingestellt werden. \n\nKarteitypen unterscheiden sich in der Anzahl der Kartenseiten: nicht nur Vorder- und Rückseiten sind möglich, sondern auch weitere virtuelle Seiten zur Vertiefung des Lerninhalts oder zur Angabe von Quellen und Literatur. Lern- und Prüfungskarten haben zusätzlich eine **Lernzielstufe** in Anlehnung an die [Taxonomie von Anderson & Krathwohl](https://thesecondprinciple.com/teaching-essentials/beyond-bloom-cognitive-taxonomy-revised/): Verstehen, Anwenden, Analysieren, Synthetisieren, Bewerten, Innovieren. Für die Formulierung des Lernziels auf der gewählten Lernzielstufe werden passende Verben im Editor vorgeschlagen.\n\n<div style=\"columns:2;-webkit-columns:2;-moz-columns:2;column-gap:3em;-webkit-column-gap:3em;-moz-column-gap:3em\">\nDiese **Karteitypen** stehen zur Verfügung:\n\n1. **Mitschrift** (Mitschrift | Nachbearbeitung | To-dos)\n+ **Lernkartei** (Lernziel | Vertiefung | Fazit | Literatur)\n+ **Glossar** (Fachbegriff | Beschreibung | Literatur)\n+ **Anweisungssatz** (Semantik | Syntax | Online-API)\n+ **Formelsammlung** (Aufgabe | Formel | Lösung | Links)\n+ **Entwurfsmuster** (Problem | Kontext | Kräfte | Lösung | Verwendung | Verweise)\n+ **Quiz** (Quizfrage | Antwort)\n+ **Prüfung** (Prüfungsfrage | Erwartete Antwort | Begründung)\n+ **Vokabelkartei** (Fremdwort | Übersetzung)\n+ **Fotokartei** (Foto | Lizenz)\n+ **Zitatensammlung** (Zitat | Zitierte Person | Bibliografische Angaben)\n+ **Exzerpte** (Exzerpt | Anmerkungen | Quellenangabe)\n+ **Notizen** (1 Seite)\n+ **To-dos** (1 Seite)\n</div>\nIn dieser Demo-Kartei findest du für die meist genutzten Karteitypen ein Beispiel aus Informatik-Kursen an der THM.","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-08T14:56:06.624Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-06T06:26:59.124Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"4. Digitale Regale: Kurse","front":"Was wird auf .cards unter einem **Kurs** verstanden?","back":"(##) Was wird auf .cards unter einem \"Kurs\" verstanden?\n\nWie aus dem Studium bekannt, ist ein Kurs das aktuelle Angebot eines Bachelor- oder Mastermoduls als Vorlesung, Übung, Seminar oder Praktikum. Die offizielle Modulbeschreibung nennt die Lernziele und Lerninhalte. In thematisierter Form stehen Lerninhalte auf .cards als Karteien zur Verfügung -- im sogenannten **Themen-Pool**. Da einzelne Themen auch in mehreren Kursen relevant sind, zum Beispiel $\\LaTeX$ oder \"Wissenschaftliches Schreiben\", kann eine Kartei auf .cards auch in mehreren Kursen genutzt werden.\n\n!!! NOTE\n Ein Kurs auf .cards fasst mehrere Karteien zusammen. Um im Bild zu bleiben: In deinem IKEA-Regal wären das Schuhkartons, die nebeneinander lagern.\n\n!!! NOTE\n Das Kurskonzept von .cards erlaubt das Lernen mit einer beliebigen Auswahl thematischer Karteien. Die Lehrperson kann **Bonuspunkte** für das wiederholte Lernen einzelner Themen als auch für das Lernen aller Themen eines Kurses vergeben.\n\n!!! TIP\n Du kannst deine eigenen Kurse zusammenstellen. Es bedarf hierzu keiner Lehrperson! Das ermöglicht dir eine einfache Organisation deiner digitalen Mitschriften, **selbstbestimmtes Lernen** und bei Bedarf auch Crash-Kurse vor der Klausur.\n\n\n\n \n","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-09T17:45:11.922Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-01T06:25:28.666Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"5. Digitale Zettel: Karten","front":"Wie kann man den Text auf einer Karte **formatieren**?\n\nWie lässt sich eine Karte **multimedial** mit Bildern und Videos anreichern?","back":"(##) Wie kann man den Text auf einer Karte formatieren?\n\n\nKurze Antwort: mit **Markdeep**.\n\n---\n\n![ Figure [robot]: Markdeep-Logo](https://casual-effects.com/image/project/icon-markdeep.png width=\"130 pt\") \nKarteien (im Hintergrund sind das die Schuhkartons im IKEA-Regal) und Karten (die Zettel in den Kartons) kannst du auf **.cards** vielfältig gestalten -- fast wie in Microsoft Word™ oder in Pages™ von Apple. Diese Karte zeigt dir beispielhaft einige Formatierungen mit [Markdeep](http://casual-effects.com/markdeep/), der vereinfachten [Auszeichnungssprache](https://de.wikipedia.org/wiki/Auszeichnungssprache) im **.cards**-Editor. Du kannst deinen Text mit etwas Magie (ein paar Tastaturzeichen genügen wie <code>* _ # [ ] > | ~ $ ˋ</code>) sehr einfach formatieren -- ohne Maus. \n\n\n!!! TIP\n Eine sorgfältige Gestaltung deiner Karten mit Text, Bildern und Erklärvideos motiviert und fördert zugleich dein Lernen. Nutze also die Formatierungsoptionen für die Beschriftung deiner Karteien ( -> Etikett am Karton) und für die anschauliche Gestaltung deiner Karten. \n\n\nWas alles mit Markdeep möglich ist, zeigt die [Demo-Seite](http://casual-effects.com/markdeep/features.md.html). So geht zum Beispiel auch $\\TeX$, inline: $\\sigma = \\sqrt{ \\frac{1}{N} \\sum_{i=1}^N (x_i -\\mu)^2}$ (Standardabweichung) oder abgesetzt die Maxwell-Faraday-Gleichung:\n\n$$\\oint_{\\partial \\Sigma} \\mathbf{E} \\cdot \\mathrm{d}\\boldsymbol{\\ell} = - \\frac{d}{dt} \\iint_{\\Sigma} \\mathbf{B} \\cdot \\mathrm{d}\\mathbf{S}$$\n\n</br>\n\n**************\n\n</br>\n\nUnd zwischen zwei Trennlinien kommt der [Entwickler von Markdeep](https://csci.williams.edu/people/faculty/morgan-mcguire/) zu Wort:\n\n> \"Markdeep\n> is a technology for writing plain text documents\n> that will look good in any web browser, whether \n> local or remote. It supports diagrams, calendars, equations, and\n> other features as extensions of [Markdown](https://de.wikipedia.org/wiki/Markdown) syntax.\"\n> -- Morgan McGuire\n\n********\n</br>\n</br>\nVideos auf YouTube und Vimeo lassen sich sehr einfach mit einem Einzeiler in die Seite einbinden:\n\n![Figure [Markdown]: Erklärvideo über Markdown, auf dem Markdeep aufbaut](https://youtu.be/hpAJMSS8pvs)\n\n</br>\n\nBilder können abgesetzt, rechtsbündig zum Absatz (siehe das Markdeep-Logo oben) und skaliert eingebunden werden:\n\n![Figure [examplePicture]: Klick auf das Bild, um es in Vollansicht zu sehen!](https://pbs.twimg.com/media/CXzB2rZWsAERiV8.png width=\"400 pt\")\n\nWie im Bild zu sehen, zeigt dir die Vorschau des Editors -- **synchron** zu deiner Eingabe --, wie deine Textformatierung aussehen wird. \n\n!!! TIP\n Im Themen-Pool auf .cards steht dir die Kartei \"Markdown | Markdeep\" als Hilfe zur Verfügung.","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-08T14:56:06.624Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-06T06:28:42.421Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
{"name":"A: Quiz zum Kennenlernen von .cards","description":"Die Quizfragen sind Teil der Demo-Kartei, siehe den roten Button auf der .cards-Startseite.","date":"2018-06-08T13:51:09.335Z","dateUpdated":"2018-07-08T09:29:14.366Z","editors":[],"owner":"jCZ6oHcbZhJaKKodN","visible":false,"ratings":true,"kind":"personal","price":0,"reviewed":false,"reviewer":"undefined","request":false,"relevance":0,"raterCount":0,"quantity":5,"license":[],"userDeleted":false,"learningActive":false,"maxCards":2,"daysBeforeReset":7,"learningStart":"2018-06-08T13:51:09.335Z","learningEnd":"2038-01-19T15:33:57.156Z","learningInterval":[1,3,7,28,84],"learners":0,"wordcloud":false,"shuffled":false,"cardType":11,"difficulty":1,"originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"1. Gesammeltes Wissen","front":"**Was bleibt?**\n![](https://arsnova.cards/img/background/zettelkasten_wikipedia_original.jpg width=\"500px\")\n","back":"![Angesammeltes Wissen](https://arsnova.cards/img/background/zettelkasten_wikipedia_original.jpg width=\"200 pt\") \nEin Studierzimmer [^Foto-Quelle] kann eine kreative persönliche Lernumgebung sein. Das auf tausenden Zetteln in dutzenden Kartons gesammelte Wissen ist zumindest der Bewohnerin des abgebildeten Zimmers zugänglich (ein Klick auf das Foto zeigt die Schuhgröße 4½ auf den Kartons). Warum also nicht mit Zetteln in Schuhkartons studieren? Den digitalen Karten fehlt doch die Haptik des Papiers und die Gesamtschau -- im Regal und auf dem Boden. \n\nStimmt. Dafür haben digitale Karten aber auch **unbestreitbare Vorteile** -- gemäß dem Slogan unserer Plattform:\n\n+ **Organize**: Das Wissen aus deinem Studium kannst du jederzeit und überall mit wenigen Klicks wiederfinden, auch noch viele Jahre nach deinem Studium, wenn du aus deiner Studierbude längst ausgezogen bist, womöglich dein Zettelarchiv bis auf das IKEA-Regal entsorgt hast. Eines Tages, in deinem Job, in einer Teambesprechung, brauchst du sicherlich das Wissen aus deinem Studium wieder.\n\n+ **Learn**: Die Karten sind multimedial: Du kannst Bilder, Podcasts und Videos einfügen. Du studierst ein MINT-Fach? Schreib mit $\\TeX$ die kompliziertesten mathematischen Formeln und mit `Syntax-Highlighting` beliebigen Programmiercode schnell und sauber auf eine Karte. Du darfst kostenlos die [Open Source Software](https://github.com/thm-projects/arsnova-flashcards) .cards als persönliche Lernumgebung auf deinem Laptop installieren. So kannst du deine Karten auch ohne Internet überall lernen.\n\n+ **Remember**: Die Karten deines Lernpensums werden dir zum dauerhaften Memorieren an [kognitionswissenschaftlich berechneten Tagen](https://en.wikipedia.org/wiki/Spaced_repetition) wieder vorgelegt. Push-Nachrichten auf dein Handy oder E-Mails erinnern dich ans Lernen.\n\n[^Foto-Quelle]: Foto zum Wikipedia-Begriff [Zettelkasten](https://de.wikipedia.org/wiki/Zettelkasten), Kai Schreiber, CC BY-SA 2.0","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-10T05:23:42.665Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-06T05:21:54.431Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"2. Worum es geht","front":"Was unterscheidet **.cards** von anderen Lernkartei-Apps?","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-08T13:54:04.447Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-08T09:24:46.576Z","back":"1. Im Gegensatz zu Lernkartei-Apps wie [Quizlet](https://quizlet.com/) oder [SuperMemo](https://www.supermemo.com/) unterstützt die .cards-Plattform auch das **Mitschreiben in Vorlesungen**. Weiter hinten in dieser Demo-Kartei haben wir ein Beispiel für eine Mitschrift eingefügt. Sie wurde handschriftlich in einer Bachelor-Vorlesung erstellt, abfotografiert und zu Hause digital auf .cards zum Lernen nachbearbeitet.\n\n+ Die Plattform .cards ist eine **vorlesungsbegleitende persönliche Lernumgebung**, ein virtueller Ort, an dem Lernzeit mit kognitiven Tätigkeiten -- Mitschreiben, Nachbearbeiten, Lernkarten erstellen, Lernfragen wiederholt beantworten -- intensiv verbracht wird. \n\n+ Es gibt auf .cards eine Option, die es der Lehrperson ermöglicht, kontinuierliches und wiederholtes Lernen mit **Bonuspunkten** zu honorieren. Wir haben .cards mit dem Ziel entwickelt, der **Aufschieberitis** und dem **Bulimie-Lernen** im Studium entgegen zu wirken [#HFD18] [#SITE18].\n\n[#HFD18]: Quibeldey-Cirkel, K. (2018).\nDigital gegen das Bulimie-Lernen: Quizzen im Hörsaal und zu Hause, Podcasts für unterwegs.\nIn: Hochschulforum Digitalisierung (Hrsg.): _HFD Winter School E-Book. Hochschullehre im digitalen Zeitalter gestalten._ Arbeitspapier Nr. 31. Version 2. Berlin: Hochschulforum Digitalisierung. (S. 91-98). https://hochschulforumdigitalisierung.de/sites/default/files/dateien/HFD_Winter_School_E-Book_Version_2.pdf (Abruf: 08.07.2018)\n\n[#SITE18]: Quibeldey-Cirkel, K., Heiny, J. & Thelen, C. (2018).\nAgainst Academic Procrastination: Pedagogical Apps to Implement Distributed Learning in Course Design.\nIn E. Langran & J. Borup (Eds.), _Proceedings of Society for Information Technology & Teacher Education International Conference_ (pp. 1617-1622).\nWashington, D.C., United States: Association for the Advancement of Computing in Education (AACE). http://www.learntechlib.org/p/182756/ (Abruf: 08.07.2018)","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"3. Digitale Schuhkartons: Karteien","front":"Welche **Karteitypen** gibt es auf .cards?","back":"Es gibt 14 Kartentypen, die beim Anlegen einer Kartei zur Auswahl stehen. \nJede Kartei beinhaltet ausschließlich **Karten desselben Typs**, es sei denn sie wurde aus mehreren Karteien unterschiedlichen Typs gemischt wie diese Demo-Kartei. Einige Karteitypen haben eine **Schwierigkeitsstufe (Level)**, die an der Kartenfarbe erkennbar ist: Grün für Basics, Blau für Fortgeschritten und Rot für Expert*in. Einige Kartentypen sind unliniert, der besseren Lesbarkeit wegen, bei anderen kann dies individuell eingestellt werden. \n\nKarteitypen unterscheiden sich in der Anzahl der Kartenseiten: nicht nur Vorder- und Rückseiten sind möglich, sondern auch weitere virtuelle Seiten zur Vertiefung des Lerninhalts oder zur Angabe von Quellen und Literatur. Lern- und Prüfungskarten haben zusätzlich eine **Lernzielstufe** in Anlehnung an die [Taxonomie von Anderson & Krathwohl](https://thesecondprinciple.com/teaching-essentials/beyond-bloom-cognitive-taxonomy-revised/): Verstehen, Anwenden, Analysieren, Synthetisieren, Bewerten, Innovieren. Für die Formulierung des Lernziels auf der gewählten Lernzielstufe werden passende Verben im Editor vorgeschlagen.\n\n<div style=\"columns:2;-webkit-columns:2;-moz-columns:2;column-gap:3em;-webkit-column-gap:3em;-moz-column-gap:3em\">\nDiese **Karteitypen** stehen zur Verfügung:\n\n1. **Mitschrift** (Foto der Mitschrift | Nachbearbeitung | To-dos)\n+ **Lernkartei** (Lernziel | Vertiefung | Fazit | Literatur)\n+ **Glossar** (Fachbegriff | Beschreibung | Literatur)\n+ **Anweisungssatz** (Semantik | Syntax | Online-API)\n+ **Formelsammlung** (Aufgabe | Formel | Lösung | Links)\n+ **Entwurfsmuster** (Problem | Kontext | Kräfte | Lösung | Verwendung | Verweise)\n+ **Quiz** (Quizfrage | Antwort)\n+ **Prüfung** (Prüfungsfrage | Erwartete Antwort | Begründung)\n+ **Vokabelkartei** (Fremdwort | Übersetzung)\n+ **Fotokartei** (Foto | Lizenz)\n+ **Zitatensammlung** (Zitat | Zitierte Person | Bibliografische Angaben)\n+ **Exzerpte** (Exzerpt | Anmerkungen | Quellenangabe)\n+ **Notizen** (1 Seite)\n+ **To-dos** (1 Seite)\n</div>\nIn dieser Demo-Kartei findest du für jeden Karteityp ein reales Beispiel.","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-08T14:56:06.624Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-08T09:29:14.345Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"4. Digitale Regale: Kurse","front":"Was wird auf .cards unter einem **Kurs** verstanden?","back":"\nWie aus dem Studium bekannt, ist ein Kurs das aktuelle Angebot eines Bachelor- oder Mastermoduls als Vorlesung, Übung, Seminar oder Praktikum. Die offizielle Modulbeschreibung nennt die Lernziele und Lerninhalte. In thematisierter Form stehen Lerninhalte auf .cards als Karteien zur Verfügung -- im sogenannten **Themen-Pool**. Da einzelne Themen auch in mehreren Kursen relevant sind, zum Beispiel $\\LaTeX$ oder \"Wissenschaftliches Schreiben\", kann eine Kartei auf .cards auch in mehreren Kursen genutzt werden.\n\n!!! NOTE Kurs vs. Kartei\n Ein Kurs auf .cards fasst **mehrere** Karteien (= Themen) zusammen. Um im Bild zu bleiben: In deinem IKEA-Regal wären das Schuhkartons, die nebeneinander lagern.\n\n!!! NOTE Kurs vs. Bonusvergabe\n Das Kurskonzept von .cards erlaubt das Lernen mit einer beliebigen Auswahl thematischer Karteien. Die Lehrperson kann **Bonuspunkte** für das wiederholte Lernen einzelner Themen als auch für das Lernen aller Themen eines Kurses vergeben.\n\n!!! TIP Jeder kann Kurse\n Du kannst deine eigenen Kurse zusammenstellen. Es bedarf hierzu keiner Lehrperson! Das ermöglicht dir eine einfache Organisation deiner digitalen Mitschriften, **selbstbestimmtes Lernen** und bei Bedarf auch Crash-Kurse vor der Klausur.\n\n\n\n \n","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-09T17:45:11.922Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-08T09:25:51.788Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}, {"subject":"5. Digitale Zettel: Karten","front":"Wie kann man den Text auf einer Karte **formatieren**?\n\nWie lässt sich eine Karte **multimedial** mit Bildern und Videos anreichern?","back":"\n\nKurze Antwort: mit **Markdeep**.\n\n---\n\n![ Figure [robot]: Markdeep-Logo](https://casual-effects.com/image/project/icon-markdeep.png width=\"130 pt\") \nKarteien (im Hintergrund sind das die Schuhkartons im IKEA-Regal) und Karten (die Zettel in den Kartons) kannst du auf **.cards** vielfältig gestalten -- fast wie in Microsoft Word™ oder in Pages™ von Apple. Diese Karte zeigt dir beispielhaft einige Formatierungen mit [Markdeep](http://casual-effects.com/markdeep/), der vereinfachten [Auszeichnungssprache](https://de.wikipedia.org/wiki/Auszeichnungssprache) im **.cards**-Editor. Du kannst deinen Text mit etwas Magie (ein paar Tastaturzeichen genügen wie <code>* _ # [ ] > | ~ $ ˋ</code>) sehr einfach formatieren -- ohne Maus. \n\n\n!!! TIP\n Eine sorgfältige Gestaltung deiner Karten mit Text, Bildern und Erklärvideos motiviert und fördert zugleich dein Lernen. Nutze also die Formatierungsoptionen für die Beschriftung deiner Karteien ( -> Etikett am Karton) und für die anschauliche Gestaltung der Lerninhalte deiner Karten. \n\n\nWas alles mit Markdeep möglich ist, zeigt die [Demo-Seite](http://casual-effects.com/markdeep/features.md.html). So geht zum Beispiel auch $\\TeX$, inline: $\\sigma = \\sqrt{ \\frac{1}{N} \\sum_{i=1}^N (x_i -\\mu)^2}$ (Standardabweichung) oder abgesetzt die Maxwell-Faraday-Gleichung:\n\n$$\\oint_{\\partial \\Sigma} \\mathbf{E} \\cdot \\mathrm{d}\\boldsymbol{\\ell} = - \\frac{d}{dt} \\iint_{\\Sigma} \\mathbf{B} \\cdot \\mathrm{d}\\mathbf{S}$$\n\n</br>\n\n**************\n\n</br>\n\nUnd zwischen zwei Trennlinien kommt der [Entwickler von Markdeep](https://csci.williams.edu/people/faculty/morgan-mcguire/) zu Wort:\n\n> \"Markdeep\n> is a technology for writing plain text documents\n> that will look good in any web browser, whether \n> local or remote. It supports diagrams, calendars, equations, and\n> other features as extensions of [Markdown](https://de.wikipedia.org/wiki/Markdown) syntax.\"\n> -- Morgan McGuire\n\n********\n</br>\n</br>\nVideos auf YouTube und Vimeo lassen sich sehr einfach mit einem Einzeiler in die Seite einbinden:\n\n![Figure [Markdown]: Erklärvideo über Markdown, auf dem Markdeep aufbaut](https://youtu.be/hpAJMSS8pvs)\n\n</br>\n\nBilder können abgesetzt, rechtsbündig zum Absatz (siehe das Markdeep-Logo oben) und skaliert eingebunden werden:\n\n![Figure [examplePicture]: Klick auf das Bild, um es in Vollansicht zu sehen!](https://pbs.twimg.com/media/CXzB2rZWsAERiV8.png width=\"400 pt\")\n\nWie im Bild zu sehen, zeigt dir die Vorschau des Editors -- **synchron** zu deiner Eingabe --, wie deine Textformatierung aussehen wird. \n\n!!! TIP\n Im Themen-Pool auf .cards steht dir die Kartei \"Markdown | Markdeep\" als Hilfe zur Verfügung.","difficulty":1,"centerTextElement":[true,false,false,false],"date":"2018-06-08T14:56:06.624Z","learningGoalLevel":0,"backgroundStyle":1,"learningIndex":"0","learningUnit":"0","cardType":11,"dateUpdated":"2018-07-08T09:27:10.397Z","originalAuthor":"Quibeldey-Cirkel, Klaus, Dr."}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment