Das BVB-Quiz: Wie gut kennen Sie Topstürmer Erling Haaland?

<style>#quiz-controls, #quiz-results-screen { text-align: center } #quiz-header { text-align: left } #quiz-counter { text-align: right } .index-container { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); font-family: "HarrisonSerifPro"; } .image-container { position: relative; text-align: center; color: white; } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; } .question { font-size: 1.25em; background: #000; color: #ffe600 } #quiz-results { font-size: 1.25em; font-weight: bold; } #resultScore { font-size: 2.25em; font-weight: bold; color: #28a0f9; display: inline; } .quiz-container { padding : 1em; max-width: 100%; margin : 1em auto } .quiz-container a { text-decoration: none; color : #333 } .answers { list-style: none; padding : 0 } .answers a { display : block; padding : .5em 1em; margin-bottom: .5em; background : #fff; border-radius: 10px } .answers a:hover { display : block; padding : .5em 1em; margin-bottom: .5em; background : #ffe60041; border-radius: 10px } .answers a.correct { background: #090; font-weight: bold; } .correctAnimated{ background-color: #090 !important; font-weight: bold; background-image:none !important; -webkit-transition: background-color 2000ms linear; -moz-transition: background-color 2000ms linear; -o-transition: background-color 2000ms linear; -ms-transition: background-color 2000ms linear; transition: background-color 2000ms linear; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ animation-iteration-count: 2; } .answers a.incorrect { background: #c00 } .incorrectAnimated{ background-color: #fff !important; color: rgba(68, 70, 68, 0.384) !important; background-image:none !important; -webkit-transition: color 2000ms linear; -moz-transition: color 2000ms linear; -o-transition: color 2000ms linear; -ms-transition: color 2000ms linear; transition: color 2000ms linear; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ animation-iteration-count: 2; } .incorrectCheckedAnimated{ background-color: rgba(204, 0, 0, 0.466) !important; background-image:none !important; -webkit-transition: background-color 2000ms linear; -moz-transition: background-color 2000ms linear; -o-transition: background-color 2000ms linear; -ms-transition: background-color 2000ms linear; transition: background-color 2000ms linear; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ animation-iteration-count: 2; } #quiz-buttons a, #quiz-controls, .quiz-container .quiz-button { padding : .5em 1em; background : #333; color : #fff; border-radius: 10px } .answers a.correct, .answers a.incorrect { color: #fff } #quiz-buttons a, .quiz-container .quiz-button { display: inline-block } #quiz-buttons a { background: #fff; color : #333 } .quiz-results-state #quiz-controls { background: 0 0; padding : 0 } .quiz-results-state #quiz-buttons a { background: #333; color : #fff }</style> <div class="index-container"> <div id="quiz"> <div id="quiz-header"> <h1>Das Super-Borussen-Quiz</h1> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"> <script language="javascript" type="text/javascript">! function (a, b, c, d) { "use strict"; a.quiz = function (b, d) { var e = this; e.$el = a(b), e.$el.data("quiz", e), e.options = a.extend(a.quiz.defaultOptions, d); var questions = e.options.questions, questionCount = questions.length, k = e.options.resultsScreen, o = e.options.restartButtonText, currentQuestionCount = 1, correctAnswers = 0, r = !1, questionImageLink = e.options.imageLink; console.log(k); e.methods = { init: function () { e.methods.setup(), a(c).on("click", ".answers a", function (a) { a.preventDefault(), e.methods.answerQuestion(this) }), a(c).on("click", "#quiz-restart-btn, #quiz-retry-btn", function (a) { a.preventDefault(), e.methods.restart() }) }, setup: function () { var b = ""; e.options.counter && (b += '<div id="quiz-counter"></div>'), b += '<div id="questions">', a.each(questions, function (c, d) { b += '<div class="question-container">', b += '<div class="image-container">', b += '<img src="' + questionImageLink + '" style="width:100%;">', b += '<div class="bottom-left">', b += '<p class="question">' + d.q + "</p>", b += "</div></div>", b += '<ul class="answers">', a.each(d.options, function (a, c) { b += '<li><a href="#" data-index="' + a + '">' + c + "</a></li>" }), b += "</ul>", b += "</div>" }), b += "</div>", 0 === a(k).length && (b += '<div id="' + k.substr(1) + '">', b += '<p id="quiz-results"></p>', b += "</div>"), b += '<div id="quiz-controls">', b += '<p id="quiz-response"></p>', b += '<div id="quiz-buttons">', b += '<a href="#" id="quiz-restart-btn">' + o + "</a>", b += "</div>", b += "</div>", e.$el.append(b).addClass("quiz-container quiz-questions-state"), a("#quiz-counter").show(), a(".question-container").hide(), a(k).hide(), a("#quiz-controls").hide(), a("#quiz-restart-btn").hide(), a("#questions").show(), a(".question-container:first-child").show().addClass("active-question"), e.methods.updateCounter(); }, answerQuestion: function (b) { if (!r) { r = !0; var selectedAnwser = a(b), selectedIndex = selectedAnwser.data("index"), currentQuestionIndex = currentQuestionCount - 1, correctIndex = questions[currentQuestionIndex].correctIndex, answers = b.parentElement.parentElement.getElementsByTagName('a'); if (selectedIndex === correctIndex) { selectedAnwser.addClass("correct"); for (var cou = 0, item; item = answers[cou]; cou++) { if (selectedIndex != item.getAttribute("data-index")) { a(item).addClass("incorrectAnimated"); } } correctAnswers++; } else { selectedAnwser.addClass("incorrect"); for (var cou = 0, item; item = answers[cou]; cou++) { if (cou == correctIndex) { a(item).addClass("correctAnimated"); } else if (cou != correctIndex && cou != selectedIndex) { a(item).addClass("incorrectAnimated"); } } selectedAnwser.addClass("incorrectCheckedAnimated"); } a("#quiz-controls").hide(), "function" == typeof e.options.answerCallback && e.options.answerCallback(currentQuestionCount, selectedIndex, questions[currentQuestionIndex]); setTimeout(function () { if (currentQuestionCount == questionCount) { e.$el.removeClass("quiz-questions-state").addClass("quiz-results-state"), a(".active-question").hide().removeClass("active-question"), a("#quiz-counter").hide(), a("#quiz-response").hide(), a("#quiz-next-btn").hide(), a("#quiz-restart-btn").show(), a(k).show(); var b = e.options.resultsFormat.replace("%score", correctAnswers).replace("%total", questionCount); var scorePercent = (correctAnswers/questionCount).toFixed(2); if(scorePercent == 1){ b += e.options.excellentScore; } else if(scorePercent >= 0.5) { b += e.options.goodScore; } else { b += e.options.badScore; } a("#quiz-results").html(b), a("#quiz-controls").fadeIn(), "function" == typeof e.options.finishCallback && e.options.finishCallback() } else { r = !1, a(".active-question").hide().removeClass("active-question").next(".question-container").show().addClass("active-question"), a("#quiz-controls").hide(), ++currentQuestionCount === selectedIndex && (a("#quiz-next-btn").hide(), a("#quiz-finish-btn").show()), e.methods.updateCounter(), "function" == typeof e.options.nextCallback && e.options.nextCallback() } }, 3000); } }, restart: function () { e.methods.reset(), e.$el.addClass("quiz-questions-state"), a("#questions").show(), a("#quiz-counter").show(), a(".question-container:first-child").show().addClass("active-question"), e.methods.updateCounter() }, reset: function () { r = !1, currentQuestionCount = 1, correctAnswers = 0, a(".answers a").removeClass("correct incorrect correctAnimated incorrectAnimated incorrectCheckedAnimated"), e.$el.removeClass().addClass("quiz-container"), a("#quiz-restart-btn").hide(), a(k).hide(), a("#quiz-controls").hide(), a("#quiz-response").show(), a("#quiz-next-btn").show(), a("#quiz-counter").hide(), a(".active-question").hide().removeClass("active-question") }, updateCounter: function () { var b = e.options.counterFormat.replace("%current", currentQuestionCount).replace("%total", questionCount); a("#quiz-counter").html(b) } }, e.methods.init() }, a.quiz.defaultOptions = { allowIncorrect: !0, counter: !0, counterFormat: "%current/%total", resultsScreen: "#quiz-results-screen", restartButtonText: "Neustart", resultsFormat: "<p id='resultScore'>%score</p>/%total <br><br>", badScore : "<i>Erling-Laie!</i> Du hast Erling Haaland wohl noch nicht allzu oft spielen sehen und solltest das nachholen.", goodScore: "<i>Durchschnittsfan!</i> Du weißt genug, um in der Kneipe über Haaland mitreden zu können. Nach oben ist aber noch Luft.", excellentScore: "<i>Erling-Experte!</i> Du kennst Erling Haaland gut genug, um seine Biografie zu schreiben.", imageLink: "https://img.playbuzz.com/image/upload/ar_1.5,c_crop/q_auto:good,f_auto,fl_lossy,w_640,c_limit,dpr_1.5/v1596807313/nke1kb182mqyn0ju2xqh.jpg" }, a.fn.quiz = function (b) { return this.each(function () { new a.quiz(this, b) }) } }(jQuery, window, document);</script> <script>$('#quiz').quiz({ counterFormat: '<b>%current</b> / %total', questions: [ { 'q': '1.) Erling Haaland ist Nationalspieler Norwegens. Geboren ist er allerdings in...', 'options': [ 'Salzburg (Österreich)', 'Leeds (England)', 'Odense (Dänemark)', 'Aberdeen (Schottland)' ], 'correctIndex': 1 }, { 'q': '2.) In seinem Debüt in der Königsklasse traf Haaland dreifach für RB Salzburg. Gegen wen?', 'options': [ 'FC Liverpool', 'RSC Anderlecht', 'KRC Genk', 'SSC Neapel' ], 'correctIndex': 2 }, { 'q': '3.) Wie hoch war die Ablösesumme, die der BVB für Haaland an RB Salzburg überwies?', 'options': [ '20 Millionen', '15 Millionen', '25 Millionen', '30 Millionen' ], 'correctIndex': 0 }, { 'q': '4.) Auch Vater Alf-Inge war Fußballprofi. Bei welchem Verein spielte er nie?', 'options': [ 'Manchester City', 'Nottingham Forest', 'Leeds United', 'FC Liverpool' ], 'correctIndex': 3 }, { 'q': '5.) Auch in der Bundesliga debütierte Haaland mit einem Dreierpack. Wie endete das Spiel gegen Augsburg damals?', 'options': [ '3:3', '4:3 für Augsburg', '5:3 für den BVB', '3:1 für den BVB' ], 'correctIndex': 2 }, { 'q': '6.) Erling Haaland gelang mit einem Seitfallzieher das Tor des Monats im Februar 2021. Gegen wen?', 'options': [ 'Im Derby gegen Schalke', 'Im Spitzenspiel gegen Bayern', 'Beim 2:2 gegen Hoffenheim', 'Beim Kantersieg gegen Bielefeld' ], 'correctIndex': 0 }, { 'q': '7.) Welche Auszeichnung sicherte sich Haaland noch nicht?', 'options': [ 'DFB-Pokalsieger', 'Österreichischer Meister', 'Bundesliga-Torschützenkönig', 'Golden Boy' ], 'correctIndex': 2 }, { 'q': '8.) Wie lautet Erling Haalands voller Name?', 'options': [ 'Erling Frederik Haaland', 'Erling Braut Haaland', 'Erling Alf Haaland', 'Erling Erik Haaland' ], 'correctIndex': 1 }, { 'q': '09.) Als 16-Jähriger lud Haaland ein Rap-Video mit zwei Freunden bei Youtube hoch. Wie lautet der Titel des Songs?', 'options': [ 'Kygo jo', 'Fotball Fotball', 'Erling Haaland', 'Hej Norge' ], 'correctIndex': 0 } ] });</script>