Das Super-Borussen-Quiz: Sind Sie ein echter BVB-Fan?

<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> <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>Erfolgsfan!</i> Du verlässt wahrscheinlich auch deutlich vor Schlusspfiff das Stadion, selbst wenn das Spiel noch nicht entschieden ist.", goodScore: "<i>Durchschnittsfan!</i> Nach oben geht nicht viel, um den Klassenerhalt musst Du Dir rein quiztechnisch aber auch keine Gedanken machen.", excellentScore: "<i>Stadiongänger!</i> Durch Deine Adern fließt definitiv schwarzgelbes Blut, Du bist ein Fan der besonderen Art.", 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.) Das Finale des UEFA-Pokals 2002 war das letzte Spiel in der Karriere von Jürgen Kohler. Was passierte ihm dort?', 'options': [ 'Ihm unterlief ein entscheidendes Eigentor', 'Er wurde bereits früh vom Platz gestellt', 'Eine Verletzung sorgte für seine Auswechslung', 'Sein fataler Fehler entschied die Partie in der Nachspielzeit' ], 'correctIndex': 1 }, { 'q': '2.) Marcio Amoroso und Jan Koller bildeten in der Meistersaison 2001/02 ein überragendes Sturmduo. Aber wer erzielte am letzten Spieltag den entscheidenden Treffer auf dem Weg zum Titel?', 'options': [ 'Ewerthon', 'Dede', 'Tinga', 'Leandro' ], 'correctIndex': 0 }, { 'q': '3.) Im Jahr 2008 erreichte der BVB das Pokalfinale in Berlin. Unter welchem Trainer?', 'options': [ 'Bert van Marwijk', 'Thomas Doll', 'Jürgen Klopp', 'Bernd Krauss' ], 'correctIndex': 1 }, { 'q': '4.) Gegen welchen italienischen Erstligisten schied man unter Jürgen Klopp in dessen erster Saison in Dortmund im Elfmeterschießen aus?', 'options': [ 'AC Parma', 'Fiorentina', 'Sampdoria', 'Udinese Calcio' ], 'correctIndex': 3 }, { 'q': '5.) Von wem übernahm Reinhard Rauball 2004 das Präsidentenamt?', 'options': [ 'Jürgen Vogt', 'Frank Roring', 'Gerd Niebaum', 'Michael Meier' ], 'correctIndex': 2 }, { 'q': '6.) Die Spielzeit 2007/08 endete mit der schlechtesten Platzierung seit 1987/88. Auf welchem Rang kam der BVB ins Ziel?', 'options': [ '13', '14', '12', '15' ], 'correctIndex': 0 }, { 'q': '7.) Zwischen 2000 und 2010 gaben sich bei Borussia Dortmund die Trainer die Klinke in die Hand. Wie viele Übungsleiter saßen in der Zeit beim BVB auf der Bank?', 'options': [ '9', '8', '7', '10' ], 'correctIndex': 1 }, { 'q': '8.) Wie hieß der erste BVB-Coach in den 2000ern?', 'options': [ 'Udo Lattek', 'Matthias Sammer', 'Bernd Krauss', 'Michael Skibbe' ], 'correctIndex': 3 }, { 'q': '09.) Im Jahr 2003 verpasste Borussia die Qualifikation für die Gruppenphase. Gegen welchen belgischen Verein verlor man im Elfmeterschießen?', 'options': [ 'RSC Anderlecht', 'Club Brügge', 'Lierse SK', 'KAA Gent' ], 'correctIndex': 1 } ] });</script>