feature: first slide rendering and acceptance test based on html renderer

renderer/fifty_ohm_html_renderer.py

@@ -1,5 +1,7 @@
 
 
+from itertools import chain
+
 from jinja2 import Environment, FileSystemLoader
 from mistletoe import Document, HtmlRenderer
 
@@ -28,8 +30,9 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
     section_url = "section.html"
     ref_id = 0
 
-    def __init__(self, question_renderer=None, picture_handler=None, photo_handler=None):
+    def __init__(self, *extras, question_renderer=None, picture_handler=None, photo_handler=None):
-        super().__init__(
+        
+        final_extras = chain(extras,(
             Dash,
             BlockComment,
             Quote,
@@ -46,7 +49,10 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
             Photo,
             Table,
             Qso,
-        )
+        ))
+
+        super().__init__(*final_extras)
+
         self.question_renderer = question_renderer
         self.picture_handler = picture_handler
         self.photo_handler = photo_handler

renderer/fifty_ohm_html_slide_renderer.py

@@ -0,0 +1,35 @@
+from mistletoe import Document
+
+from renderer.fifty_ohm_html_renderer import FiftyOhmHtmlRenderer
+
+from .slide_break import SlideBreak
+
+
+class FiftyOhmHtmlSlideRenderer(FiftyOhmHtmlRenderer):
+
+    def __init__(self, question_renderer=None, picture_handler=None, photo_handler=None):
+        super().__init__(
+            SlideBreak,
+            question_renderer=question_renderer,
+            picture_handler=picture_handler,
+            photo_handler=photo_handler,
+        )
+    
+    def render_wrapper(self, content):
+        content = "---\n" + content
+        return super().render(Document(content))
+
+    def render_slide_break(self, token):
+        inner = self.render_inner(token)
+
+        if token.attribute is None:
+            return f'<section>\n{inner}\n</section>\n'
+        if token.attribute == "attention":
+            return f'<section data-background-color="#B8EAFF">\n{inner}\n</section>\n'
+        elif token.attribute == "danger":
+            return f'<section data-background-color="#FF756D">\n{inner}\n</section>\n'
+        elif token.attribute == "unit":
+            return f'<section data-background-color="#40C08C">\n{inner}\n</section>\n'
+        else:
+            return f'<section {token.attribute}>\n{inner}\n</section>\n'
+

renderer/slide_break.py

@@ -0,0 +1,35 @@
+
+# ^\s*---\s*(.*)\s*$
+import re
+
+from mistletoe.block_token import BlockToken, tokenize
+
+
+class SlideBreak(BlockToken):
+    @staticmethod
+    def start(line):
+        return re.match(r"^\s*---.*$", line)
+
+    @classmethod
+    def read(cls, lines):
+        child_lines = []
+        first_line = next(lines) # Consume the line that started the slide break
+
+        match = re.match(r"^\s*---\s*(.*)\s*.*$", first_line)
+        attribute = match.group(1) if match.group(1) else None
+
+        # We have to work with peak here, since a normal for loop would already
+        # consume the next line, which might be a `---` line that marks the
+        # beginning of a new slide as well
+        next_line = lines.peek()
+        while next_line is not None:
+            if re.match(r"^\s*---.*$", next_line) :
+                break 
+            else:
+                child_lines.append(next(lines))
+                next_line = lines.peek()
+
+        return tokenize(child_lines), attribute
+
+    def __init__(self, match):
+        self.children, self.attribute = match

src/build.py

@@ -135,7 +135,11 @@ class Build:
         next_chapter_template = self.env.get_template("next_chapter.html")
         with open(f'build/{edition}_{section["ident"]}.html', 'w') as file:
 
-            with FiftyOhmHtmlRenderer(self.__build_question, self.__picture_handler, self.__photo_handler) as renderer:
+            with FiftyOhmHtmlRenderer(
+                question_renderer=self.__build_question,
+                picture_handler=self.__picture_handler,
+                photo_handler=self.__photo_handler
+            ) as renderer:
                 section["content"] = renderer.render(Document(section["content"]))
 
                 result = section_template.render(

templates/slide/question.html

@@ -0,0 +1,24 @@
+{% set answer_label = ["A", "B", "C", "D"] -%}
+{% if picture_question or (answer_pictures[0] and layout in ["1", "9", None]) -%}
+{# OHM-13: Fix layout for 4x times picture in row to 2x2 field #}
+<div class="question r-fit-text layout-8">
+{% else -%}
+<div class="question r-fit-text layout-{{ layout }}">
+{% endif -%}
+<div class="question-text">{{ number }}: {{ question }}</div>
+  {% if picture_question -%}
+  <div class="question-picture"><img class="r-stretch" src="picture/{{ picture_question }}.svg"></div>
+  {% endif -%}
+  <div class="answers">
+    {% if answers[0] -%}
+      {% for answer in answers|shuffle_answers -%}
+        <p{% if not answer.correct %} class="fragment semi-fade-out" data-fragment-index="1" {% endif -%}><b>{{ answer_label[loop.index - 1] }}:</b> {{ answer.content }}</p>
+      {% endfor -%}
+    {% endif -%}
+    {% if answer_pictures[0] -%}
+      {% for answer in answer_pictures|shuffle_answers -%}
+        <div class="question-picture{% if not answer.correct %} fragment semi-fade-out{% endif -%}" {% if not answer.correct -%} data-fragment-index="1" {% endif -%}><b>{{ answer_label[loop.index - 1] }}:</b><img class="r-stretch" src="picture/{{ answer.content }}.svg"></div>
+      {% endfor -%}
+    {% endif -%}
+  </div>
+</div>

test/acceptanceTestSlides.html

@@ -0,0 +1,129 @@
+<html><head>
+    <meta charset="utf-8">
+
+    <title>DARC Ausbildungsplattform</title>
+
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../assets/reveal.js/dist/reset.css">
+    <link rel="stylesheet" href="../assets/reveal.js/dist/reveal.css">
+    <link rel="stylesheet" href="../assets/style-slide.css">
+
+    <!-- Theme used for syntax highlighting of code -->
+    <link rel="stylesheet" href="../assets/reveal.js/plugin/highlight/monokai.css">
+</head>
+<body>
+    <div class="reveal">
+      <div class="slides">
+<section>
+<h2>Slide mit Picture</h2><p>
+                <figure class="picture" id="ref_p_test" name="p_test">
+                    <img src="pictures/123.svg">
+                    <figcaption>Abbildung TODO: testbild</figcaption>
+                </figure>
+            </p>
+</section>
+
+<section>
+<h2>Slide mit Photo</h2><p>
+                <figure class="photo" id="ref_n_rst_s-meter" name="n_rst_s-meter">
+                    <img src="photos/123.jpg">
+                    <figcaption>Abbildung TODO: Display eines IC9700-Transceivers, hervorgehoben ist das S-Meter, das den aktuellen Empfangspegel anzeigt</figcaption>
+                </figure>
+            </p>
+</section>
+
+<section>
+
+<div class="question r-fit-text layout-8">
+<div class="question-text">NB201: Welches Bauteil wird durch das Schaltzeichen symbolisiert?</div>
+  <div class="question-picture"><img class="r-stretch" src="img/picture_510.svg"></div>
+  <div class="answers">
+    <p class="fragment semi-fade-out" data-fragment-index="1" ><b>A:</b> Widerstand</p>
+      <p><b>B:</b> Batterie</p>
+      <p class="fragment semi-fade-out" data-fragment-index="1" ><b>C:</b> Diode</p>
+      <p class="fragment semi-fade-out" data-fragment-index="1" ><b>D:</b> Kondensator</p>
+      </div>
+</div>
+</section>
+
+<section>
+<h2>Slide Tabelle</h2><table>
+<tr>
+<th style="text-align: left;">Wert</th>
+<th style="text-align: left;">Bereich</th>
+<th style="text-align: left;">Bedeutung</th>
+<th style="text-align: left;">Englisch</th>
+</tr>
+<tr>
+<td style="text-align: left;">R</td>
+<td style="text-align: left;">1 &ndash; 5</td>
+<td style="text-align: left;">Lesbarkeit</td>
+<td style="text-align: left;">Readability</td>
+</tr>
+<tr>
+<td style="text-align: left;">S</td>
+<td style="text-align: left;">1 &ndash; 9</td>
+<td style="text-align: left;">Signalstärke</td>
+<td style="text-align: left;">Signal Strength</td>
+</tr>
+<tr>
+<td style="text-align: left;">T</td>
+<td style="text-align: left;">1 &ndash; 9</td>
+<td style="text-align: left;">Tonqualität</td>
+<td style="text-align: left;">Tone</td>
+</tr>
+<caption>Die Bestandteile des RST-Rapports</caption></table>
+</section>
+
+<section>
+<h2>Slide Mit Markdown</h2><p>Das ist ein <em>Text</em></p><ul>
+<li>Das ist ein Bullet</li>
+<li>Das ist noch ein Bullet</li>
+</ul><p>Hier wird <u>text</u> unterstrichen</p>
+</section>
+
+<section data-background-color="#40C08C">
+<h2>Slide Unit</h2><p>Slide C</p>
+</section>
+
+<section data-background="#FF00FF">
+<h2>Slide PINK</h2><p>PINK</p>
+</section>
+
+</div>
+    </div>
+        <script src="../assets/reveal.js/dist/reveal.js"></script>
+        <script src="../assets/reveal.js/plugin/zoom/zoom.js"></script>
+        <script src="../assets/reveal.js/plugin/notes/notes.js"></script>
+        <script src="../assets/reveal.js/plugin/search/search.js"></script>
+        <script src="../assets/reveal.js/plugin/markdown/markdown.js"></script>
+        <script src="../assets/reveal.js/plugin/highlight/highlight.js"></script>
+        <script src="../assets/reveal.js/plugin/math/math.js"></script>
+		<script>
+
+			// Also available as an ES module, see:
+			// https://revealjs.com/initialization/
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				slideNumber: 'c/t',
+				showSlideNumber: 'speaker',
+				center: true,
+				hash: true,
+				transition: 'slide',
+				showNotes: false,
+				pdfSeparateFragments: false,
+
+				// Learn about plugins: https://revealjs.com/plugins/
+				plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight, RevealMath.KaTeX] //, RevealChart ]
+			});
+
+		</script>
+    </body>

test/acceptanceTestSlides.md

@@ -0,0 +1,44 @@
+## Slide mit Picture
+
+[picture:123:p_test:testbild]
+
+---
+
+## Slide mit Photo
+
+[photo:123:n_rst_s-meter:Display eines IC9700-Transceivers, hervorgehoben ist das S-Meter, das den aktuellen Empfangspegel anzeigt]
+
+---
+[question:2482]
+---
+
+## Slide Tabelle
+
+| l: Wert | l: Bereich | l: Bedeutung | l: Englisch |
+| R | 1 - 5 | Lesbarkeit | Readability |
+| S | 1 - 9 | Signalstärke | Signal Strength |
+| T | 1 - 9 | Tonqualität | Tone |
+[table:n_rst:Die Bestandteile des RST-Rapports]
+
+---
+
+## Slide Mit Markdown
+
+Das ist ein *Text*
+
+* Das ist ein Bullet
+* Das ist noch ein Bullet
+
+Hier wird <u>text</u> unterstrichen
+
+--- unit
+
+## Slide Unit
+
+Slide C
+
+--- data-background="#FF00FF"
+
+## Slide PINK
+
+PINK

test/test_html.py

@@ -74,7 +74,7 @@ def test_html(capsys):
     with capsys.disabled():
         with open("test/acceptanceTest.md") as file:
             content = file.read()
-            with FiftyOhmHtmlRenderer(question_stub) as renderer:
+            with FiftyOhmHtmlRenderer(question_renderer=question_stub) as renderer:
                 output = renderer.render(Document(content))
                 with open("test/acceptanceTest.html", "w") as output_file:
                     pretty = BeautifulSoup(output, "html.parser").prettify()

test/test_html_slides.py

@@ -0,0 +1,160 @@
+import json
+import random
+
+from jinja2 import Environment, FileSystemLoader
+
+from renderer.fifty_ohm_html_slide_renderer import FiftyOhmHtmlSlideRenderer
+
+
+def parse_katalog():
+    with open("data/fragenkatalog3b.json") as fragenkatalog_file:
+        fragenkatalog = json.load(fragenkatalog_file)
+
+        questions = {}
+
+        for exampart in fragenkatalog["sections"]:
+            for chapter in exampart["sections"]:
+                if "questions" in chapter:
+                    for question in chapter["questions"]:
+                        questions[question["number"]] = question
+                if "sections" in chapter:
+                    for section in chapter["sections"]:
+                        for question in section["questions"]:
+                            questions[question["number"]] = question
+
+        return questions
+
+def filter_shuffle_answers(seq):
+    try:
+        answers = []
+        firstrun = True
+        for answer in seq:
+            if firstrun:
+                answers.append({"content": answer, "correct": True})
+                firstrun = False
+            else:
+                answers.append({"content": answer, "correct": False})
+        random.shuffle(answers)
+        return answers
+    except Exception:
+        return seq
+
+
+env = Environment(loader=FileSystemLoader("templates/"))
+env.filters["shuffle_answers"] = filter_shuffle_answers
+question_template = env.get_template("slide/question.html")
+questions = parse_katalog()
+
+
+def question_stub(input):
+    """Combines the original question dataset from BNetzA with our internal metadata"""
+    with open("data/metadata.json") as metadata_file:
+        metadata = json.load(metadata_file)
+        number = metadata[f"{input}"]["number"]  # Fragennummer z.B. AB123
+
+        question = questions[number]
+        metadata = metadata[f"{input}"]
+
+        if "answer_a" in question:
+            answers = [question["answer_a"], question["answer_b"], question["answer_c"], question["answer_d"]]
+        else:
+            answers = []
+
+        if metadata["picture_a"] != "":
+            answer_pictures = [
+                metadata["picture_a"],
+                metadata["picture_b"],
+                metadata["picture_c"],
+                metadata["picture_d"],
+            ]
+        else:
+            answer_pictures = []
+
+        if "picture_question" in question:
+            picture_question = metadata["picture_question"]
+        else:
+            picture_question = ""
+
+        return question_template.render(
+            question=question["question"],
+            number=number,
+            layout=metadata["layout"],
+            picture_question=picture_question,
+            answers=answers,
+            answer_pictures=answer_pictures,
+        )
+
+
+def print_head():
+    return """<html><head>
+    <meta charset="utf-8">
+
+    <title>DARC Ausbildungsplattform</title>
+
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../assets/reveal.js/dist/reset.css">
+    <link rel="stylesheet" href="../assets/reveal.js/dist/reveal.css">
+    <link rel="stylesheet" href="../assets/style-slide.css">
+
+    <!-- Theme used for syntax highlighting of code -->
+    <link rel="stylesheet" href="../assets/reveal.js/plugin/highlight/monokai.css">
+</head>
+<body>
+    <div class="reveal">
+      <div class="slides">
+"""
+
+    #<!-- Chart plugin -->
+    #<script src="../assets/reveal.js-plugins/chart/plugin.js"></script>
+    #<script src="../assets/chartjs/4.4.1/chart.min.js"></script>
+
+def print_tail():
+    return """</div>
+    </div>
+        <script src="../assets/reveal.js/dist/reveal.js"></script>
+        <script src="../assets/reveal.js/plugin/zoom/zoom.js"></script>
+        <script src="../assets/reveal.js/plugin/notes/notes.js"></script>
+        <script src="../assets/reveal.js/plugin/search/search.js"></script>
+        <script src="../assets/reveal.js/plugin/markdown/markdown.js"></script>
+        <script src="../assets/reveal.js/plugin/highlight/highlight.js"></script>
+        <script src="../assets/reveal.js/plugin/math/math.js"></script>
+		<script>
+
+			// Also available as an ES module, see:
+			// https://revealjs.com/initialization/
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				slideNumber: 'c/t',
+				showSlideNumber: 'speaker',
+				center: true,
+				hash: true,
+				transition: 'slide',
+				showNotes: false,
+				pdfSeparateFragments: false,
+
+				// Learn about plugins: https://revealjs.com/plugins/
+				plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight, RevealMath.KaTeX] //, RevealChart ]
+			});
+
+		</script>
+    </body>"""
+
+def test_html_slides(capsys):
+    with capsys.disabled():
+        with open("test/acceptanceTestSlides.md") as file:
+            content = file.read()
+            with FiftyOhmHtmlSlideRenderer(question_stub) as renderer:
+                output = ""
+                output = print_head()
+                output += renderer.render_wrapper(content)
+                output += print_tail()
+                with open("test/acceptanceTestSlides.html", "w") as output_file:
+                    output_file.write(output)

test/test_question.py

@@ -20,7 +20,7 @@ def test_question_html():
     def test_function(input):
         return f"{input}"
 
-    with FiftyOhmHtmlRenderer(test_function) as renderer:
+    with FiftyOhmHtmlRenderer(question_renderer=test_function) as renderer:
         for assertion in assertions:
             assert renderer.render(Document(assertion)) == assertions[assertion]
 
@@ -38,7 +38,7 @@ def test_question_translation_html():
             metadata = json.load(file)
         return metadata[f"{input}"].get("number")
 
-    with FiftyOhmHtmlRenderer(test_function) as renderer:
+    with FiftyOhmHtmlRenderer(question_renderer=test_function) as renderer:
         for assertion in assertions:
             assert renderer.render(Document(assertion)) == assertions[assertion]