Man sieht meinem Code an, dass er von einem Anfänger geschrieben wurde. Gerade als Einsteiger braucht man die konkreten Bezeichnungen dort, wo man gerade schreibt, ohne sich erst an einen Variablennamen erinnern zu müssen. Und für einen Fremden, der sich in diesem Code zurechtfinden möchte, ist es so auch leichter. Aber Bastis Code ist halt viel straffer und dadurch auch wieder übersichtlicher. Lediglich die Variablennamen hätte ich sprechender gewählt.
Vielen Dank für Deinen Vorschlag für meine Timer. Ich habe den Code hoffentlich richtig eingebaut – hier das komplette Dokument:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family: sans-serif;
font-size: 1.5rem;
padding-top: 2rem;
}
main {
max-width: 70vw;
margin: 0 auto;
text-align: center;
}
button {
color: white;
background-color: orangered;
border: none;
margin: 0 auto 2rem;
padding: 10px 20px;
font-size: 1.5rem;
font-weight: bold;
min-width: 150px;
cursor: pointer;
display: block;
}
.hidden {
opacity: 0;
}
.blink {
animation: blink 1.5s infinite;
}
@keyframes blink {
from {
background-color: orangered;
}
35% {
background-color: orangered;
}
36% {
background-color: crimson
}
64% {
background-color: crimson
}
65% {
background-color: orangered;
}
to {
background-color: orangered;
}
}
#lastwords {
color: #fff;
background-color: rgb(121, 175, 175);
padding: .5rem 1rem;
font-size: 1rem;
line-height: 1.75rem;
text-align: center;
display: inline-block;
opacity: 0;
}
.morecolor {
opacity: 1 !important;
transition: opacity 5s;
}
.lesscolor {
opacity: 0 !important;
transition: opacity 5s;
}
</style>
</head>
<body>
<main>
<div id="questionAnswers" class="hidden">
<p>Start</p>
</div>
<button id="clicker" class="blink">Start</button>
<p id="lastwords">Das war's schon!<br>Noch mal?<br>Bitte Button drücken!</p>
</main>
<script>
'use strict';
const questionsAndAnswers = [
{ question: 'Was ist größer, Mücke oder Elefant?', answer: 'Elefant' },
{ question: 'Was ist kleiner, Elefant oder Mücke?', answer: 'Mücke' },
{ question: 'Was kann man aus einer Mücke machen?', answer: 'einen Elefanten' },
{ question: 'Kann man aus einem Elefanten eine Mücke machen?', answer: 'Prinzipiell ja, aber es wird nicht gern gesehen.' },
];
let counter = 0;
let status = 'showQuestion';
let again = 'Noch mal!';
document.getElementById('clicker').addEventListener('click', () => {
if (status === 'showQuestion') {
document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].question + '</p>';
status = 'showAnswer';
document.getElementById('clicker').classList.remove('blink');
document.getElementById('clicker').style.backgroundColor = 'dodgerblue';
document.getElementById('lastwords').classList.remove('morecolor');
document.getElementById('questionAnswers').classList.remove('hidden');
document.getElementById('questionAnswers').classList.remove('lesscolor');
let question = 'zur ' + (counter + 1) + '. Antwort';
document.getElementById('clicker').innerHTML = question;
}
else {
document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].answer + '</p>';
status = 'showQuestion';
document.getElementById('clicker').style.backgroundColor = 'teal';
let answer = 'zur ' + (counter + 2) + '. Frage';
document.getElementById('clicker').innerHTML = answer;
counter++;
if (counter === questionsAndAnswers.length && status === 'showQuestion') {
counter = 0;
document.getElementById('clicker').innerHTML = 'Ende!';
const sequence = [
{ delay: 50, callback: myTimeout1 },
{ delay: 500, callback: myTimeout2 },
{ delay: 3000, callback: myTimeout3 },
{ delay: 1500, callback: myTimeout4 },
];
function doIt() {
timer = setTimeout(() => {
sequence[idx].callback();
idx++;
if (idx < sequence.length) {
doIt();
}
}, sequence[idx].delay)
}
let idx = 0,
timer;
doIt();
function myTimeout1() {
document.getElementById('lastwords').style.display = 'inline-block';
}
function myTimeout2() {
document.getElementById('lastwords').classList.add('morecolor');
document.getElementById('questionAnswers').classList.add('lesscolor');
}
function myTimeout3() {
document.getElementById('clicker').innerHTML = again;
}
function myTimeout4() {
document.getElementById('clicker').style.backgroundColor = 'none';
document.getElementById('clicker').classList.add('blink');
}
}
}
});
</script>
</body>
</html>
Alles anzeigen
Das Ergebnis: Unverändert zu meiner Version, leider. Alles funktioniert prima, solange mal nicht zu schnell klickt. Ansonsten passiert es, dass nach einen paar sehr schnellen Durchläufen der orangefarbene Button mit der Inschrift "Noch mal!" unter einer beliebigen Frage oder Antwort auftaucht. Man könnte jetzt sagen, dass kein Mensch sowas mit affenartiger Geschwindigkeit durchklicken würde, aber es ist halt ein Bug.
Ich will Euch nicht Zeit und Nerven rauben; ich übe ja nur und brauche das Dokument für nichts Ernsthaftes. Aber ich freue mich, dass ich mit Eurer Hilfe weiter lernen kann, danke!
