feature: first slide rendering and acceptance test based on html renderer
This commit is contained in:
Prof. Dr. Matthias Jung DL9MJ
@@ -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