Teil 13
Das Super-Borussen-Quiz: Sind Sie ein echter BVB-Fan?
Sind Sie aus der Kategorie Super-Borusse? Oder doch eher ein Erfolgsfan? Finden Sie es jetzt heraus. Hier kommt das Super-Borussen-Quiz – Teil 13: Die EM2020-Version.
Die Heimat des BVB: Der Signal Iduna Park. © Ralf Ibing/firo Sportphoto/POOL
Falls das Quiz nicht richtig angezeigt wird: Hier entlang.
<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.) Raphael Guerreiro wurde 2016 mit Portugal Europameister. In welchem Land ist er aber aufgewachsen?',
'options': [
'Italien',
'Spanien',
'Frankreich',
'Schweiz'
],
'correctIndex': 2
},
{
'q': '2.) Wer aus diesem BVB-Quartett steht nicht im EM-Kader seines Landes?',
'options': [
'Thorgan Hazard',
'Dan-Axel Zagadou',
'Thomas Delaney',
'Jadon Sancho'
],
'correctIndex': 1
},
{
'q': '3.) Überraschend ist Axel Witsel Teil des belgischen Aufgebots, obwohl er lange außer Gefecht war. Wo hatte er sich verletzt?',
'options': [
'Meniskus',
'Achillessehne',
'Kreuzband',
'Wadenbein'
],
'correctIndex': 1
},
{
'q': '4.) Jadon Sancho möchte England zum langersehnten Titel führen. Wann wurden die Three Lions zum letzten Mal Europameister?',
'options': [
'1988',
'1976',
'1964',
'Noch nie'
],
'correctIndex': 3
},
{
'q': '5.) Dänemark gewann 1992 das Turnier als Nachrücker für Jugoslawien. Wie alt war Thomas Delaney, als seine Landsleute triumphierten?',
'options': [
'Noch kein Jahr.',
'Er war noch nicht geboren.',
'Zwei Jahre.',
'Ein Jahr.'
],
'correctIndex': 0
},
{
'q': '6.) Manuel Akanji würde sicher gerne mal eine EM im eigenen Land spielen. Wann hätte er dazu die Gelegenheit gehabt?',
'options': [
'2012',
'2004',
'2000',
'2008'
],
'correctIndex': 3
},
{
'q': '7.) Wie viele Borussen sind insgesamt bei der EM in den erweiterten Kadern dabei?',
'options': [
'8',
'7',
'11',
'10'
],
'correctIndex': 3
},
{
'q': '8.) Auf wie viele Nationen verteilen sich die Dortmunder EM-Teilnehmer?',
'options': [
'6',
'5',
'7',
'8'
],
'correctIndex': 0
},
{
'q': '09.) Welcher BVB-Akteur kann laut EM-Spielplan als Erster zum Einsatz kommen?',
'options': [
'Raphael Guerreiro',
'Thomas Delaney',
'Manuel Akanji',
'Mats Hummels und Emre Can'
],
'correctIndex': 2
}
]
});</script>
Lust auf mehr schwarzgelben Rätselspaß? Hier entlang.