Superminaren/50ohm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: social media share

Browse Source 
This addresses Exam Simulator and Social Media
Fixes #135
This commit is contained in:
Matthias Jung
2026-08-06 22:22:41 +02:00
parent 411d702613
commit 8f1cde1141
15 changed files with 114 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/exam-simulator.js
+61 -24
View File
@@ -508,6 +508,12 @@
function showSummary() {
reviewPartIndex.value = null;
view.value = "summary";
if (completedResultUrl.value) {
var target = new URL(completedResultUrl.value);
if (window.location.pathname !== target.pathname || window.location.search !== target.search) {
window.location.assign(target.toString());
}
}
window.scrollTo({ top: 0, behavior: "smooth" });
}
@@ -548,6 +554,9 @@
var questionIds = session.value && session.value.homeworkIds;
if (!questionIds) return;
clearStoredSession();
var homeworkUrl = new URL("simulation.html", window.location.href);
homeworkUrl.search = "?homework=" + questionIds.join("+");
window.history.replaceState(null, "", homeworkUrl.toString());
startHomework(questionIds);
window.scrollTo({ top: 0, behavior: "smooth" });
}
@@ -598,9 +607,18 @@
return "1." + result.choice.id + "." + result.scores.join(".");
}
var resultForSharing = computed(function () {
if (sharedResult.value) return sharedResult.value;
if (!session.value || view.value !== "summary") return null;
function resultImageCode(result) {
if (!result) return "";
if (result.kind === "homework") return result.score === result.total ? "aenbv" : "";
if (!result.passed) return "";
var order = ["A", "E", "N", "B", "V"];
return order.filter(function (part) {
return result.choice.parts.indexOf(part) !== -1;
}).join("").toLowerCase();
}
function shareableSessionResult() {
if (!session.value) return null;
if (isHomework.value) {
return { kind: "homework", score: session.value.parts[0].score, total: session.value.parts[0].questions.length };
}
@@ -611,13 +629,33 @@
scores: session.value.parts.map(function (part) { return part.score; }),
passed: overallState.value === "passed"
};
}
var resultForSharing = computed(function () {
if (sharedResult.value) return sharedResult.value;
if (view.value !== "summary") return null;
return shareableSessionResult();
});
function buildResultUrl(result) {
if (!result) return "";
var imageCode = resultImageCode(result);
var url = new URL(imageCode ? "result-" + imageCode + ".html" : "result.html", window.location.href);
url.search = "?result=" + encodedResult(result);
return url.toString();
}
var completedResultUrl = computed(function () {
return buildResultUrl(shareableSessionResult());
});
var resultShareUrl = computed(function () {
if (!resultForSharing.value) return "";
var url = new URL("simulation.html", window.location.href);
url.search = "?result=" + encodedResult(resultForSharing.value);
return url.toString();
return buildResultUrl(resultForSharing.value);
});
var resultImageUrl = computed(function () {
var imageCode = resultImageCode(resultForSharing.value);
return imageCode ? "assets/images/exam-" + imageCode + ".jpeg" : "";
});
var shareText = computed(function () {
@@ -654,17 +692,7 @@
navigator.share({ title: "50ohm.de-Ergebnis", text: shareText.value, url: resultShareUrl.value }).catch(function () {});
}
function shareMatrix() {
if (navigator.share) {
navigator.share({ title: "50ohm.de-Ergebnis", text: shareText.value, url: resultShareUrl.value }).catch(function () {});
return;
}
copyText(shareText.value + " " + resultShareUrl.value).finally(function () {
window.open("https://chat.darc.de", "_blank", "noopener");
});
}
function restoreSession(homeworkQuestionIds) {
function restoreSession(homeworkQuestionIds, allowHomeworkResult) {
try {
var raw = window.localStorage.getItem(STORAGE_KEY);
if (!raw) return;
@@ -675,8 +703,8 @@
}
var homeworkMode = stored.session.mode === "homework";
var choice = EXAM_CHOICES.find(function (item) { return item.id === stored.session.choiceId; });
var homeworkMatches = homeworkMode && homeworkQuestionIds.length > 0 &&
JSON.stringify(stored.session.homeworkIds) === JSON.stringify(homeworkQuestionIds);
var homeworkMatches = homeworkMode && (allowHomeworkResult || (homeworkQuestionIds.length > 0 &&
JSON.stringify(stored.session.homeworkIds) === JSON.stringify(homeworkQuestionIds)));
var valid = (homeworkMatches || choice) && stored.session.parts.every(function (part) {
return Array.isArray(part.questions) && (homeworkMode || part.questions.length === QUESTION_COUNT) && part.questions.every(function (question) {
return Boolean(catalog.value[question.id]);
@@ -743,8 +771,16 @@
var homeworkQuestionIds = parseHomeworkQuestionIds();
if (queryValue("result")) {
if (!parsedResult) throw new Error("Der Ergebnislink ist ungültig.");
sharedResult.value = parsedResult;
view.value = "shared";
restoreSession([], true);
var storedResult = shareableSessionResult();
if (storedResult && encodedResult(storedResult) === queryValue("result")) {
sharedResult.value = null;
view.value = "summary";
} else {
session.value = null;
sharedResult.value = parsedResult;
view.value = "shared";
}
} else {
restoreSession(homeworkQuestionIds);
if (homeworkQuestionIds.length > 0 && !session.value) startHomework(homeworkQuestionIds);
@@ -841,12 +877,13 @@
resultIcon: resultIcon,
resultDescription: resultDescription,
resultForSharing: resultForSharing,
completedResultUrl: completedResultUrl,
resultShareUrl: resultShareUrl,
resultImageUrl: resultImageUrl,
shareText: shareText,
socialShareLinks: socialShareLinks,
copyResultLink: copyResultLink,
shareNative: shareNative,
shareMatrix: shareMatrix
shareNative: shareNative
};
}
});
assets/images/exam-a.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

assets/images/exam-ae.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

assets/images/exam-aen.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

assets/images/exam-aenb.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

assets/images/exam-aenbv.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

assets/images/exam-b.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

assets/images/exam-e.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

assets/images/exam-enbv.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

assets/images/exam-n.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

assets/images/exam-nbv.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

assets/images/exam-v.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

src/build.py
+21 -2
View File
@@ -129,6 +129,7 @@ class Build:
sidebar=None,
page_stylesheets=None,
page_scripts=None,
social_image=None,
):
page_template = self.env.get_template("html/page.html")
return page_template.render(
@@ -137,6 +138,7 @@ class Build:
sidebar=sidebar,
page_stylesheets=page_stylesheets or [],
page_scripts=page_scripts or [],
social_image=social_image,
)
def __build_exam_simulator(self):
@@ -163,11 +165,28 @@ class Build:
page_scripts=[
"assets/vue.global.prod.js",
"assets/question-catalog.js?ts=20260806",
"assets/exam-simulator.js?ts=20260806",
"assets/exam-simulator.js?ts=202608063",
],
)
with (self.config.p_build / "simulation.html").open("w", encoding="utf-8") as file:
file.write(page)
with (self.config.p_build / "result.html").open("w", encoding="utf-8") as file:
file.write(page)
for social_image in sorted((self.config.p_assets / "images").glob("exam-*.jpeg")):
result_page = self.__build_page(
content,
page_stylesheets=["assets/exam-simulator.css?ts=20260806"],
page_scripts=[
"assets/vue.global.prod.js",
"assets/question-catalog.js?ts=20260806",
"assets/exam-simulator.js?ts=202608063",
],
social_image=f"assets/images/{social_image.name}",
)
result_name = f"result-{social_image.stem.removeprefix('exam-')}.html"
with (self.config.p_build / result_name).open("w", encoding="utf-8") as file:
file.write(result_page)
def __build_homework_tool(self):
toc_target = self.config.p_build_assets / "toc"
@@ -182,7 +201,7 @@ class Build:
page_scripts=[
"assets/vue.global.prod.js",
"assets/question-catalog.js?ts=20260806",
"assets/homework.js?ts=20260806",
"assets/homework.js?ts=202608061",
],
)
with (self.config.p_build / "hausaufgabe.html").open("w", encoding="utf-8") as file:
templates/html/exam-simulator.html
+17 -9
View File
@@ -36,16 +36,19 @@
</table>
</div>
</template>
<img v-if="resultImageUrl" class="img-fluid border mb-4" :src="resultImageUrl"
alt="50ohm.de-Prüfungssimulation">
<div v-if="resultForSharing" class="border-top pt-3 mt-3">
<h2 class="h5">Ergebnis teilen</h2>
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-secondary btn-sm" @click="shareNative">Teilen …</button>
<button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center" @click="shareNative">
<span class="material-icons fs-6 me-1" aria-hidden="true">share</span> Teilen …
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" @click="copyResultLink">Link kopieren</button>
<button type="button" class="btn btn-outline-secondary btn-sm" @click="shareMatrix" title="Über die Teilen-Funktion an Element senden">Matrix / Element</button>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.mastodon" target="_blank" rel="noopener noreferrer">Mastodon</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.bluesky" target="_blank" rel="noopener noreferrer">Bluesky</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.facebook" target="_blank" rel="noopener noreferrer">Facebook</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X (ehem. Twitter)</a>
</div>
<small v-if="shareMessage" class="d-block mt-2" role="status" v-text="shareMessage"></small>
</div>
@@ -145,16 +148,19 @@
</tbody>
</table>
</div>
<img v-if="resultImageUrl" class="img-fluid border mb-4" :src="resultImageUrl"
alt="50ohm.de-Prüfungssimulation">
<div v-if="resultForSharing" class="border-top pt-3 mt-3">
<h2 class="h5">Ergebnis teilen</h2>
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-secondary btn-sm" @click="shareNative">Teilen …</button>
<button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center" @click="shareNative">
<span class="material-icons fs-6 me-1" aria-hidden="true">share</span> Teilen …
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" @click="copyResultLink">Link kopieren</button>
<button type="button" class="btn btn-outline-secondary btn-sm" @click="shareMatrix" title="Über die Teilen-Funktion an Element senden">Matrix / Element</button>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.mastodon" target="_blank" rel="noopener noreferrer">Mastodon</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.bluesky" target="_blank" rel="noopener noreferrer">Bluesky</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.facebook" target="_blank" rel="noopener noreferrer">Facebook</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X</a>
<a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X (ehem. Twitter)</a>
</div>
<small v-if="shareMessage" class="d-block mt-2" role="status" v-text="shareMessage"></small>
</div>
@@ -191,8 +197,9 @@
<span v-else-if="currentPart.status !== 'running'" class="btn btn-secondary btn-sm d-inline-flex align-items-center">Abgegeben</span>
<button v-if="currentPart.status === 'evaluated' && !isReviewing && hasNextPart"
type="button" class="btn btn-primary btn-sm" @click="startNextPart">Nächsten Teil starten</button>
<button v-else-if="currentPart.status === 'evaluated' && !isReviewing"
type="button" class="btn btn-primary btn-sm" @click="showSummary" v-text="isHomework ? 'Ergebnis' : 'Gesamtergebnis'"></button>
<a v-else-if="currentPart.status === 'evaluated' && !isReviewing"
class="btn btn-primary btn-sm" :href="completedResultUrl"
v-text="isHomework ? 'Ergebnis' : 'Gesamtergebnis'"></a>
<button v-else-if="isReviewing" type="button" class="btn btn-primary btn-sm" @click="showSummary">Gesamtergebnis</button>
<button type="button" class="btn btn-secondary btn-sm d-inline-flex align-items-center" @click="abortExam"
v-text="isHomework ? 'Hausaufgabe abbrechen' : 'Simulation abbrechen'"></button>
@@ -259,7 +266,8 @@
<button type="button" class="btn btn-outline-secondary" @click="finishExamEarly">Simulation hier beenden</button>
</template>
<template v-else>
<button type="button" class="btn btn-primary" @click="showSummary" v-text="isHomework ? 'Ergebnis anzeigen' : 'Gesamtergebnis anzeigen'"></button>
<a class="btn btn-primary" :href="completedResultUrl"
v-text="isHomework ? 'Ergebnis anzeigen' : 'Gesamtergebnis anzeigen'"></a>
</template>
</div>
</main>
templates/html/page.html
+15
View File
@@ -4,6 +4,21 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>50Ω Lernplattform für Amateurfunk</title>
{% if social_image %}
<meta property="og:type" content="website">
<meta property="og:site_name" content="50ohm.de">
<meta property="og:title" content="Ergebnis der 50ohm.de-Prüfungssimulation">
<meta property="og:description" content="Mein Ergebnis der Prüfungssimulation auf 50ohm.de">
<meta property="og:image" content="https://50ohm.de/{{ social_image }}">
<meta property="og:image:alt" content="50ohm.de-Prüfungssimulation">
<meta property="og:image:width" content="1448">
<meta property="og:image:height" content="1086">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ergebnis der 50ohm.de-Prüfungssimulation">
<meta name="twitter:description" content="Mein Ergebnis der Prüfungssimulation auf 50ohm.de">
<meta name="twitter:image" content="https://50ohm.de/{{ social_image }}">
<meta name="twitter:image:alt" content="50ohm.de-Prüfungssimulation">
{% endif %}
<link rel="icon" href="assets/favicon/icon.png" type="image/png">
<link rel="icon" href="assets/favicon/icon.svg" type="image/svg+xml">