Quellcode
<html>
<head>

<style type="text/css">
#quiz {text-indent: 10px; display:none;}
.button {border:2px solid; border-radius:5px; width: 60px; padding-left:5px; padding-right: 5px; position: relative; float:right;
background-color: #DCDCDC; font-weight:normal; color: black; margin: 0 2px 0 2px;}
.button.active {background-color: #F8F8FF; color: #525252;}
button {position: relative; float:right;}
.button a {text-decoration: none; color: black;}
#container {width:50%; margin:auto; padding: 0 25px 40px 10px; background-color: #1E90FF; border:4px solid #B0E0E6; border-radius:5px;
color: #FFFFFF; font-weight: bold; box-shadow: 5px 5px 5px #888;}
ul {list-style-type: none; padding: 0; margin: 0;}
#prev {display:none;}
#start {display:none; width: 90px;}
</style>
</head>

<body>
<div id='container'><br/>
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Weiter</a></div>
<div class='button' id='prev'><a href='#'>Zurück</a></div>
<div class='button' id='start'> <a href='#'>Neustart</a></div>
</div><br/><br/>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
(function () {
var questions = [
{question: "Wieviel ist 2*5?", choices: [2, 5, 10, 15, 20], correctAnswer: 2 },
{question: "Wieviel ist 3*6?", choices: [3, 6, 9, 12, 18], correctAnswer: 4 },
{question: "Wieviel ist 8*9?", choices: [72, 99, 108, 134, 156], correctAnswer: 0 },
{question: "Wieviel ist 1*7?", choices: [4, 5, 6, 7, 8], correctAnswer: 3 },
{question: "Wieviel ist 8*8?", choices: [20, 30, 40, 50, 64], correctAnswer: 4 }];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object
displayNext();
$('#next').on('click', function (e) { e.preventDefault();
if (quiz.is(':animated')) { return false; } choose();
if (isNaN(selections[questionCounter])) {
alert('Bitte wählen sie!'); }
else {questionCounter++; displayNext(); } });
$('#prev').on('click', function (e) { e.preventDefault();
if (quiz.is(':animated')) { return false; }
choose(); questionCounter--; displayNext(); });
$('#start').on('click', function (e) { e.preventDefault();
if (quiz.is(':animated')) { return false; }
questionCounter = 0; selections = []; displayNext(); $('#start').hide(); });
$('.button').on('mouseenter', function () { $(this).addClass('active'); });
$('.button').on('mouseleave', function () { $(this).removeClass('active'); });
function createQuestionElement(index) { var qElement = $('<div>', { id: 'question' });
var header = $('<h2>Frage ' + (index + 1) + ':</h2>'); qElement.append(header);
var question = $('<p>').append(questions[index].question); qElement.append(question);
var radioButtons = createRadios(index); qElement.append(radioButtons);
return qElement; }
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {if (window.CP.shouldStopExecution(0)) break;
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}window.CP.exitedLoop(0);
return radioList; }
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val(); }
function displayNext() {
quiz.fadeOut(function () {
$('#question').remove();
if (questionCounter < questions.length) {
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!isNaN(selections[questionCounter])) {
$('input[value=' + selections[questionCounter] + ']').prop('checked', true); }
if (questionCounter === 1) {
$('#prev').show(); }
else if (questionCounter === 0) { $('#prev').hide(); $('#next').show(); } }
else { var scoreElem = displayScore(); quiz.append(scoreElem).fadeIn();
$('#next').hide(); $('#prev').hide(); $('#start').show(); } }); }
function displayScore() {
var score = $('<p>', { id: 'question' });
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {if (window.CP.shouldStopExecution(1)) break;
if (selections[i] === questions[i].correctAnswer) {
numCorrect++; }
}window.CP.exitedLoop(1);
score.append('Du hast ' + numCorrect + ' Fragen von ' +
questions.length + ' richtig beantwortet!');
return score; } })();
</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>