Frage und Antwort

<html>
<head>

<style type="text/css">
.container {background-color: #fff; border: 1px solid white; -webkit-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.57);
-moz-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.57); box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.57); width: 500px; margin: 50px auto;
padding: 15px; -webkit-border-radius: 5px; border-radius: 5px;}
.quiz {border: 1px solid #5E5E5E; -webkit-border-radius: 5px; border-radius: 5px; padding: 15px;}
#quizContent {margin-bottom: 15px;}
.info h1 {margin: 0; font-size: 40px;}
.info p {margin-top: 5px;}
.quiz h2 {font-size: 20px; margin-top: 0;}
.buttons {margin-top: 10px;}
.buttons.right {float: right;}
#answer {clear: right;}
.buttons .hidden {display: none;}
.choice {margin-left: 40px;}
#answer {margin-top: 15px;}
#answer {color: red;}
#answer.correct {color: green;}
.final_score {color: red;font-size: 30px;font-weight: bold; margin: 0 auto; padding: 10px;text-align: center;width: 450px;}
.fade {opacity: 0;}
.fade.in {opacity: 1; transition: opacity .25s ease-in; -moz-transition: opacity .25s ease-in; -webkit-transition: opacity .25s ease-in;}
.fade.out {opacity: 0; transition: opacity .25s ease-in; -moz-transition: opacity .25s ease-in; -webkit-transition: opacity .25s ease-in;}
.cf:before, .cf:after { content: " "; display: table; }
.cf:after {clear: both;}
.cf { *zoom: 1;}
</style>
<head>

<body >
<div class="container cf">
<div class="info"><p class="instructions">Bitte beantworte alle Fragen. Zum Schluß erhältst du dein Ergebnis.</p></div>
<form id="quiz" class="fade">
<div class="auto-style27">
<h3 id="question"></h3>
<input type='radio' name="quiz_answer" class="choice" id="radio1" value="0"><label class="ans_label"></label><br />
<input type='radio' name="quiz_answer" class="choice" id="radio2" value="1"><label class="ans_label"></label><br />
<input type='radio' name="quiz_answer" class="choice" id="radio3" value="2"><label class="ans_label"></label><br />
<input type='radio' name="quiz_answer" class="choice" id="radio4" value="3"><label class="ans_label"></label><br />
<input type='radio' name="quiz_answer" class="choice" id="radio5" value="4"><label class="ans_label"></label><br />
<div class="buttons right cf">
<input type="submit" class="hidden" value="Zurück" id="back">
<input type="submit" value="Prüfe die Antwort" id="checkAnswer">
<input type="submit" value="Nächste Frage" id="submitAnswer">
</div><br/>
<center>
<div id="answer"></div>
</div>
</form>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script id="rendered-js" >
var allQuestions = [
{ question: "Wie heißt der aktuelle Bundeskanzler von Deutschland?",
choices: ["James Bond", "Willi Brandt", "Angela Merkel", "Olaf Scholz", "Walter Ulbricht"],
correctAnswer: 3 },
{ question: "Wieviel ist 2345*459/2345?",
choices: ["394", "549", "459", "8675", "32"],
correctAnswer: 2 },
{ question: "Wie viele Finger zeigt meine Hand?",
choices: ["1", "6", "10", "3", "7"],
correctAnswer: 4 },
{ question: "Wer war der Regiseur von 'Broken Flowers?'",
choices: ["Steve Buscemi", "Gordon Brown", "Bill Murray", "Tom Cruise", "Don Johnson"],
correctAnswer: 2 },
{ question: "Wie ist meine Augenfarbe?",
choices: ["Green", "Black", "Blue", "Yellow", "Hazel"],
correctAnswer: 4 }],
qNum = 0,
totalNum = allQuestions.length,
totalScore = new Array(totalNum),
ansValues = new Array(totalNum),
ansDiv = document.getElementById("answer"),
qForm = document.getElementById("quiz"),
question = document.getElementById("question"),
qAnswers = document.forms.quiz.elements.quiz_answer,
aForms = document.getElementsByClassName("ans_label"),
backBtn = document.getElementById("back");
var populateQuestion = function () {
if (typeof ansValues[qNum] === "number") qAnswers[ansValues[qNum]].checked = true;
if (qNum < totalNum) {
var q = allQuestions[qNum];
ansDiv.innerHTML = "";
question.textContent = q.question;
for (var i = 0, length = q.choices.length; i < length; i += 1) {if (window.CP.shouldStopExecution(0)) break;
aForms[i].textContent = q.choices[i];
}window.CP.exitedLoop(0);
if (qNum > 0) toggleDisplay(backBtn, "show");
fade(qForm, "in");
} else {
var finalScore = 0;
totalScore.forEach(function (val) {
finalScore += val;
console.log(val); });
qForm.innerHTML = "";
qForm.insertAdjacentHTML('beforebegin', "<div class='final_score'>Dein Ergebnis ist: " + finalScore + " von " + totalNum + "</div>"); }};
var fade = function (fTarg, way) { var target = fTarg.classList;
if (way === "in") {
target.remove("out");
target.add("in");
} else if (way === "out") {
target.remove("in");
target.add("out");
} else {
throw new Error("fade(): requires way param"); }};
var toggleDisplay = function (el, toggle) {
var target = el.classList;
if (toggle === "hide") {
target.add("hidden");
} else if (toggle === "show") {
target.remove("hidden");
} else { throw new Error("toggleDisplay(): requires toggle param"); }};
var checkAnswer = function () { var returnVal;
for (var i = 0; i < qAnswers.length; i++) {if (window.CP.shouldStopExecution(1)) break;
if (qAnswers[i].checked) returnVal = parseFloat(qAnswers[i].value);
}window.CP.exitedLoop(1);
if (typeof returnVal === "number") return returnVal;
alert("Bitte wähle eine Antwort.");
return undefined;};
var submitAnswer = function () {
var ansCheck = checkAnswer();
totalScore[qNum] = ansCheck === allQuestions[qNum] ? 1 : 0;
if (ansCheck !== "undefined") { ansValues[qNum] = ansCheck; fade(qForm, "out"); qNum++;
qAnswers[ansCheck].checked = false;
timeoutID = window.setTimeout(populateQuestion, 300); }};
window.onload = function () { populateQuestion(qNum); backBtn.addEventListener("click", function (e) { qNum -= 1; if (qNum < 1) toggleDisplay(backBtn, "hide");
fade(qForm, "out"); timeoutID = window.setTimeout(populateQuestion, 300); e.preventDefault(); });
document.getElementById("checkAnswer").addEventListener("click", function (e) {
e.preventDefault();
var testAnswer = checkAnswer(); // validate
if (testAnswer === allQuestions[qNum].correctAnswer) {
ansDiv.textContent = "Das ist richtig!";
ansDiv.classList.add("correct");
} else if (checkAnswer !== undefined) {
ansDiv.textContent = "Falsch. Versuchs nochmal";
ansDiv.classList.remove("correct"); } });
document.getElementById("submitAnswer").addEventListener("click", function (e) {
submitAnswer(); e.preventDefault(); });};
</script>

<script> window.console = window.console || function(t) {};</script>
<script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script>
</body>

</html>