feature: first slide rendering and acceptance test based on html renderer
This commit is contained in:
Prof. Dr. Matthias Jung DL9MJ
@@ -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):
|
||||
super().__init__(
|
||||
def __init__(self, *extras, question_renderer=None, picture_handler=None, photo_handler=None):
|
||||
|
||||
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
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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
|
||||
+5
-1
@@ -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(
|
||||
|
||||
@@ -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>
|
||||
@@ -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 – 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 – 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 – 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>
|
||||
@@ -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
|
||||
+1
-1
@@ -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()
|
||||
|
||||
@@ -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)
|
||||
@@ -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]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user