{"id":327,"date":"2023-08-07T13:12:37","date_gmt":"2023-08-07T13:12:37","guid":{"rendered":"https:\/\/netzwerkaugen.ch\/?page_id=327"},"modified":"2023-08-08T16:02:21","modified_gmt":"2023-08-08T16:02:21","slug":"teste-dein-wissen","status":"publish","type":"page","link":"https:\/\/netzwerkaugen.ch\/?page_id=327","title":{"rendered":"Quiz"},"content":{"rendered":"\n<p>Teste dein neu erlangtes Wissen in einem kurzen Quiz! Du erkennst korrekt beantwortet Fragen anhand der gr\u00fcnen Linien, die links davon erscheinen.<\/p>\n\n\n\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!DOCTYPE html>\n\n<html>\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Mein Quiz<\/title>\n\n    <style>\n \n\n        h4 {\n            margin-bottom: 10px;\n        }\n\n        .quiz-question {\n            margin-bottom: 20px;\n        }\n\n        .quiz-options label {\n            display: block;\n            margin-bottom: 10px;\n        }\n\n        .quiz-options input {\n            margin-right: 5px;\n        }\n\n        .quiz-submit {\n            margin-top: 20px;\n        }\n\n      .quiz-question.correct {\n            border-left: 3px solid #69b578;\n            padding-left: 10px;\n\n        }\n\n    <\/style>\n<\/head>\n<body>\n    <div class=\"quiz-question\" data-question-number=\"1\">\n        <h4>1. Was solltest du bei Beitr\u00e4gen mit visuellen Inhalten immer beachten?<\/h4>\n        <div class=\"quiz-options\">\n            <label><input type=\"radio\" name=\"q1\" value=\"b\"> M\u00f6glichst viele Hashtags zu verwenden.<\/label>\n            <label><input type=\"radio\" name=\"q1\" value=\"a\"> Einen Alt-Text zu schreiben.<\/label>\n            <label><input type=\"radio\" name=\"q1\" value=\"c\"> Hier muss auf nichts speziell geachtet werden.<\/label>\n        <\/div>\n    <\/div>\n\n<br>\n\n    <div class=\"quiz-question\" data-question-number=\"2\">\n        <h4>2. Warum ist es wichtig, Links und Schaltfl\u00e4chen klar zu beschriften?<\/h4>\n        <div class=\"quiz-options\">\n            <label><input type=\"radio\" name=\"q2\" value=\"a\"> Damit Menschen mit Sehbehinderung deren Zweck verstehen und entscheiden k\u00f6nnen, ob sie darauf klicken m\u00f6chten.<\/label>\n            <label><input type=\"radio\" name=\"q2\" value=\"b\"> Um sicherzustellen, dass die Inhalte eine hohe Reichweite erreichen.<\/label>\n            <label><input type=\"radio\" name=\"q2\" value=\"c\"> Damit die Entwickler:innen der Plattform einen sauber aufgebauten Code haben.<\/label>\n        <\/div>\n    <\/div>\n\n<br>\n\n    <div class=\"quiz-question\" data-question-number=\"3\">\n        <h4>3. Welches Hilfsmittel verwenden Menschen mit Sehbehinderung um soziale Netzwerke zu nutzen?<\/h4>\n        <div class=\"quiz-options\">\n            <label><input type=\"radio\" name=\"q3\" value=\"b\"> Die meisten nutzen keine soziale Netzwerke.<\/label>\n            <label><input type=\"radio\" name=\"q3\" value=\"a\"> Sie verwenden Bildschirmvorleser, auch Screenreader genannt.<\/label>\n            <label><input type=\"radio\" name=\"q3\" value=\"c\"> Sie lassen sich die Inhalte von sehenden Personen vorlesen.<\/label>\n        <\/div>\n    <\/div>\n\n<br>\n\n    <div class=\"quiz-question\" data-question-number=\"4\">\n        <h4>4. Welche der folgenden Beschreibungen ist f\u00fcr ein Bild auf Social Media am besten geeignet?<\/h4>\n        <div class=\"quiz-options\">\n            <label><input type=\"radio\" name=\"q4\" value=\"c\"> Ein Bild von einem Sonnenuntergang.<\/label>\n            <label><input type=\"radio\" name=\"q4\" value=\"b\"> Ein sch\u00f6nes Abendrot.<\/label>\n            <label><input type=\"radio\" name=\"q4\" value=\"a\"> Ein Sonnenuntergang \u00fcber dem Ozean mit leuchtenden Orange- und Gelbt\u00f6nen.<\/label>\n        <\/div>\n    <\/div>\n\n<br>\n\n    <div class=\"quiz-question\" data-question-number=\"5\">\n        <h4>5. Was kann ein weiterer Vorteil der Verbesserung der Barrierefreiheit auf Social-Media-Plattformen sein?<\/h4>\n        <div class=\"quiz-options\">\n            <label><input type=\"radio\" name=\"q5\" value=\"c\"> Die Ladezeit der Plattformen kann verk\u00fcrzt werden.<\/label>\n            <label><input type=\"radio\" name=\"q5\" value=\"b\"> Das Aussehen wird verbessert.<\/label>\n            <label><input type=\"radio\" name=\"q5\" value=\"a\"> Auch f\u00fcr Menschen ohne Behinderung wird die Navigation einfacher.<\/label>\n        <\/div>\n    <\/div>\n\n    <!-- Weitere Fragen hier einf\u00fcgen -->\n\n<br>\n\n    <div class=\"quiz-submit\">\n        <button type=\"submit\" onclick=\"evaluateQuiz()\">Quiz auswerten<\/button>\n    <\/div>\n\n    <script>\n        function evaluateQuiz() {\n            const questions = document.querySelectorAll('.quiz-question');\n\n            questions.forEach((question) => {\n                const selectedOption = question.querySelector('input[type=\"radio\"]:checked');\n                if (selectedOption) {\n                    const questionNumber = question.dataset.questionNumber;\n                    const userAnswer = selectedOption.value;\n                    const correctAnswer = 'a'; \/\/ Setze hier die richtige Antwort f\u00fcr jede Frage ein\n\n                    if (userAnswer === correctAnswer) {\n                        question.classList.remove('wrong');\n                        question.classList.add('correct');\n                    } else {\n                        question.classList.remove('correct');\n                        question.classList.add('wrong');\n                    }\n                }\n            });\n        }\n    <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Teste dein neu erlangtes Wissen in einem kurzen Quiz! Du erkennst korrekt beantwortet Fragen anhand der gr\u00fcnen Linien, die links davon erscheinen. Mein Quiz 1. Was solltest du bei Beitr\u00e4gen mit visuellen Inhalten immer beachten? M\u00f6glichst viele Hashtags zu verwenden. Einen Alt-Text zu schreiben. Hier muss auf nichts speziell geachtet werden. 2. Warum ist es wichtig, Links und Schaltfl\u00e4chen klar zu beschriften? Damit Menschen mit Sehbehinderung deren Zweck verstehen und entscheiden k\u00f6nnen, ob sie darauf klicken m\u00f6chten. Um sicherzustellen, dass die Inhalte eine hohe Reichweite erreichen. Damit die Entwickler:innen der Plattform einen sauber aufgebauten Code haben. 3. Welches Hilfsmittel verwenden\u2026<\/p>\n","protected":false},"author":1,"featured_media":567,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/327"}],"collection":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=327"}],"version-history":[{"count":58,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/327\/revisions"}],"predecessor-version":[{"id":437,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/327\/revisions\/437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/media\/567"}],"wp:attachment":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}