{"id":485,"date":"2026-06-02T06:43:41","date_gmt":"2026-06-02T06:43:41","guid":{"rendered":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/?page_id=485"},"modified":"2026-06-02T07:37:26","modified_gmt":"2026-06-02T07:37:26","slug":"artist-quiz","status":"publish","type":"page","link":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/artist-quiz\/","title":{"rendered":"Artist Quiz"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.quiz-container {\n    max-width: 700px;\n    margin: auto;\n    padding: 25px;\n    color: #6b2d2d;\n    font-family: Arial, sans-serif;\n}\n\n.frage {\n    margin-top: 30px;\n}\n\n.frage label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: bold;\n}\n\nselect {\n    width: 100%;\n    padding: 10px;\n    border: 1px solid #999;\n}\n\n#quizButton {\n    display: block;\n    margin: 20px auto;\n\n    background-color: white;\n    color: black;\n    border: 2px solid black;\n    padding: 12px 25px;\n    cursor: pointer;\n    border-radius: 8px;\n    font-size: 16px;\n}\n\n#quizButton:hover {\n    background-color: #f2f2f2;\n}\n\n#ergebnis {\n    margin-top: 25px;\n    font-size: 24px;\n    font-weight: bold;\n    text-align: center;\n    color: #6b2d2d;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ ================================\n\/\/ ARRAY MIT ALLEN ARTISTS\n\/\/ ================================\n\nconst artists = [\n    \"Ed Sheeran\",\n    \"Drake\",\n    \"Taylor Swift\",\n    \"The Weeknd\"\n];\n\n\/\/ ================================\n\/\/ WARTEN BIS SEITE GELADEN IST\n\/\/ ================================\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const button = document.getElementById(\"quizButton\");\n\n    if (button) {\n        button.addEventListener(\"click\", quizAuswerten);\n    }\n\n});\n\n\/\/ ================================\n\/\/ QUIZ AUSWERTEN\n\/\/ ================================\n\nfunction quizAuswerten() {\n\n    const antwort1 = document.getElementById(\"frage1\").value;\n    const antwort2 = document.getElementById(\"frage2\").value;\n    const antwort3 = document.getElementById(\"frage3\").value;\n    const antwort4 = document.getElementById(\"frage4\").value;\n\n    if (!antwort1 || !antwort2 || !antwort3 || !antwort4) {\n        document.getElementById(\"ergebnis\").innerHTML =\n            \"Bitte beantworte zuerst alle Fragen.\";\n        return;\n    }\n\n    const antworten = [\n        Number(antwort1),\n        Number(antwort2),\n        Number(antwort3),\n        Number(antwort4)\n    ];\n\n    let punkte = [0, 0, 0, 0];\n\n    for (let i = 0; i < antworten.length; i++) {\n\n        if (antworten[i] === 0) {\n            punkte[0]++;\n        } else if (antworten[i] === 1) {\n            punkte[1]++;\n        } else if (antworten[i] === 2) {\n            punkte[2]++;\n        } else {\n            punkte[3]++;\n        }\n    }\n\n    let maxIndex = 0;\n\n    for (let i = 1; i < punkte.length; i++) {\n        if (punkte[i] > punkte[maxIndex]) {\n            maxIndex = i;\n        }\n    }\n\n    \/\/ ================================\n    \/\/ SPOTIFY EMBED\n    \/\/ ================================\n\n    let spotifyEmbed = \"\";\n\n    if (artists[maxIndex] === \"Taylor Swift\") {\n        spotifyEmbed = `\n            <iframe loading=\"lazy\" style=\"border-radius:12px\"\n            src=\"https:\/\/open.spotify.com\/embed\/artist\/06HL4z0CvFAxyc27GXpf02\"\n            width=\"100%\" height=\"352\"\n            frameborder=\"0\"\n            allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\">\n            <\/iframe>`;\n    }\n\n    else if (artists[maxIndex] === \"Ed Sheeran\") {\n        spotifyEmbed = `\n            <iframe loading=\"lazy\" style=\"border-radius:12px\"\n            src=\"https:\/\/open.spotify.com\/embed\/artist\/6eUKZXaKkcviH0Ku9w2n3V\"\n            width=\"100%\" height=\"352\"\n            frameborder=\"0\"\n            allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\">\n            <\/iframe>`;\n    }\n\n    else if (artists[maxIndex] === \"Drake\") {\n        spotifyEmbed = `\n            <iframe loading=\"lazy\" style=\"border-radius:12px\"\n            src=\"https:\/\/open.spotify.com\/embed\/artist\/3TVXtAsR1Inumwj472S9r4\"\n            width=\"100%\" height=\"352\"\n            frameborder=\"0\"\n            allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\">\n            <\/iframe>`;\n    }\n\n    else if (artists[maxIndex] === \"The Weeknd\") {\n        spotifyEmbed = `\n            <iframe loading=\"lazy\" style=\"border-radius:12px\"\n            src=\"https:\/\/open.spotify.com\/embed\/artist\/1Xyo4u8uXC1ZmMpatF05PJ\"\n            width=\"100%\" height=\"352\"\n            frameborder=\"0\"\n            allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\">\n            <\/iframe>`;\n    }\n\n    \/\/ ================================\n    \/\/ ERGEBNIS AUSGEBEN\n    \/\/ ================================\n\n    document.getElementById(\"ergebnis\").innerHTML =\n        \"Der Artist, der am besten zu dir passt:<br><br>\" +\n        artists[maxIndex] +\n        \"<br><br>\" +\n        spotifyEmbed;\n}\n<\/script>\n\n<div class=\"quiz-container\">\n\n    <div class=\"frage\">\n        <label>1. Wie verbringst du deinen perfekten Abend?<\/label>\n        <select id=\"frage1\">\n            <option value=\"\" selected=\"\" disabled=\"\">Bitte ausw\u00e4hlen<\/option>\n            <option value=\"0\">Mit Freunden chillen<\/option>\n            <option value=\"1\">Auf einer Party<\/option>\n            <option value=\"2\">Romantischer Abend<\/option>\n            <option value=\"3\">Nachts durch die Stadt laufen<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"frage\">\n        <label>2. Welche Farbe gef\u00e4llt dir am besten?<\/label>\n        <select id=\"frage2\">\n            <option value=\"\" selected=\"\" disabled=\"\">Bitte ausw\u00e4hlen<\/option>\n            <option value=\"0\">Blau<\/option>\n            <option value=\"1\">Rot<\/option>\n            <option value=\"2\">Gr\u00fcn<\/option>\n            <option value=\"3\">Schwarz<\/option>\n        <\/select>\n\n    <div class=\"frage\">\n        <label>3. Was ist dein Traumurlaub?<\/label>\n        <select id=\"frage3\">\n            <option value=\"\" selected=\"\" disabled=\"\">Bitte ausw\u00e4hlen<\/option>\n            <option value=\"0\">Strandurlaub<\/option>\n            <option value=\"1\">Las Vegas<\/option>\n            <option value=\"2\">Natur &amp; Berge<\/option>\n            <option value=\"3\">Gro\u00dfstadt bei Nacht<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"frage\">\n        <label>4. Welche Eigenschaft beschreibt dich am besten?<\/label>\n        <select id=\"frage4\">\n            <option value=\"\" selected=\"\" disabled=\"\">Bitte ausw\u00e4hlen<\/option>\n            <option value=\"0\">Freundlich<\/option>\n            <option value=\"1\">Selbstbewusst<\/option>\n            <option value=\"2\">Kreativ<\/option>\n            <option value=\"3\">Geheimnisvoll<\/option>\n        <\/select>\n    <\/div>\n\n    <button id=\"quizButton\">Ergebnis anzeigen<\/button>\n\n    <div id=\"ergebnis\"><\/div>\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Wie verbringst du deinen perfekten Abend? Bitte ausw\u00e4hlenMit Freunden chillenAuf einer PartyRomantischer AbendNachts durch die Stadt laufen 2. Welche Farbe gef\u00e4llt dir am besten? Bitte ausw\u00e4hlenBlauRotGr\u00fcnSchwarz 3. Was ist dein Traumurlaub? Bitte ausw\u00e4hlenStrandurlaubLas VegasNatur &amp; BergeGro\u00dfstadt bei Nacht 4. Welche Eigenschaft beschreibt dich am besten? Bitte ausw\u00e4hlenFreundlichSelbstbewusstKreativGeheimnisvoll Ergebnis anzeigen<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-485","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages\/485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/comments?post=485"}],"version-history":[{"count":14,"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages\/485\/revisions"}],"predecessor-version":[{"id":504,"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages\/485\/revisions\/504"}],"wp:attachment":[{"href":"https:\/\/hofmann-magdalena.webserver.kslinz.at\/index.php\/wp-json\/wp\/v2\/media?parent=485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}