Archiv-Modus von Basti1012 Lösungspage

Hallo zusammen, um mein Selbststudium in Javascript voranzubringen, habe ich ein kleines (noch völlig unfertiges) Musik-Quiz erstellt: <a href="https://jsfiddle.net/m7gb8d3t/1/">https://jsfiddle.net/m7gb8d3t/1/</a> Meine Bitte ist, dass sich erfahrene Anwender meinen JS-Code anschauen und beurteilen, ob irgendetwas völlig anders gemacht werden müsste. Ich weiß, dass der Code nicht optimal ist, aber ich suche in meinem frühen Lernstadium auch noch nicht nach Perfektion – es geht mir eher um prinzipielle Fehler, die ich künftig vermeiden sollte. Eine Sache stört mich schon selbst: Der größte Teil des JS-Codes ist redundant – erst zum Initialisieren des Spiels, dann um mit einem Click zur nächsten Frage zu kommen. Das kann nicht der richtige Weg sein, aber ich finde derzeit keine bessere Lösung. Vielleicht habt Ihr ja einen Tipp für mich. Danke und Gruß Felix

Code

                                    
                                <!DOCTYPE html>
<html lang="de">
<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>Ratespiel</title>

  <link rel="stylesheet" href="/css_webseite/all.min.css">
<style>
* {
    box-sizing: border-box;
    padding:0;
    margin: 0;
}
h1{
    font-size: 150%;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: coral;
}
button ,.buttons,#solution,h1{
    width: 100%;
    border-radius: 1rem;
    color: white;
    border:0px solid white;
    background: cornflowerblue;
    margin: 7px 0;
    padding: 0.7rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}
main{
    width:90%;
    margin:0 auto;
}
#answer .buttons {
    display: block;
    width:45%;
    background: coral;
    transition: all 0.2s linear;
}
#answer{
    margin: 1.5rem auto;
}
#solution,#next{
    display:none;
}
#clicker{
    background: coral;
    animation: blink 1.5s infinite;
}
@keyframes blink {
0%,35%,65%,100%{
    background:coral;
  }
  36%,64% {
    background: darkorange;
  }
}
#question,
#answer ,#start{
    display:none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background: aliceblue;
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
#start {
    display:flex;
    flex-direction:column;
}
#solution i {
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
}
button:hover{
    background: rgb(14, 135, 255);
}
#info1 {
    text-align: center;
}
@media (max-width: 468px) {
  #answer{
   flex-direction:column;
  }
  #answer .buttons{
    width:100%;
  }
}











/* konfetti*/


body {
  background: #000;
  margin:0;
  overflow: hidden;
  perspective: 1000px;
  height:100vh;
}

.konfetti {
  position: absolute;
  transform-origin: 50% 50%;  
  animation: rol 1500ms linear infinite;
}

@-webkit-keyframes rol {
  0%   {
    transform: rotateY(0deg) rotateX(-90deg);
  }
  100% {
    transform: rotateY(359deg) rotateX(270deg);
  }
}

.hny {
  font-family: 'Pacifico';
  font-size: 3em;
  color: #fff;
  padding: 1em;
 text-align:center;
  white-space: wrap;
}

</style>

</head>
  <body>
<main>
<div id="start">
 <h1 id='info'></h1>
 <p id="info1"></p>
 <button id="clicker" class="blink">Start</button>
</div>
<div id="question"></div>
<div id="answer">
    <button class="buttons" id="three"></button>
    <button class="buttons" id="four"></button>
    <button class="buttons" id="five"></button>
    <button class="buttons" id="six"></button>
    <p id="solution"></p>
    <button id="next">nächste Frage</button>
  </div>
</main>
    <div id="sieg">
    </div>
<script>
const questions = [{
    frage: 'Welche Band veröffentlichte 1980 das Album "Paris"?', antworten: ['Queen','Visage','Supertramp','ELO'],right: 3},
  {frage: 'Wie hieß der Chef der Dire Straits?',antworten: ['Knark Mopfler','Kropf Markler','Krank Flomper','Mark Knopfler'],right:4},
  {frage: 'Auf welchem Pink-Floyd-Album wird eine Atombombe abgeworfen?',antworten: ['The Wall','The Final Cut','The Endless River','The Dark Side of the Moon'], right:2},
  {frage: 'Wie hieß der Sänger der Scorpions?',antworten: ['Kleine Maus','Klaun Meise','Klaus Meine','Mies Launek'],right:3}];

var texte=['Die Du kannst es aber noch einmal von vorn versuchen.','<i class="fas fa-smile"></i>Richtig! Du bist gut ...','<p><i class="fas fa-frown"></i>Das war wohl nichts ...','Willkommen zum Musik-Quiz!','Die '+questions.length+' Fragen sind teils ernst-, teils scherzhaft gemeint.','Das wars!'];

var clicke=document.getElementById('clicker');
var questio=document.getElementById('question');
var answe=document.getElementById('answer');
var labels=answe.querySelectorAll('.buttons');
let i = 0;
const inf=document.getElementById('info');
inf.innerHTML =texte[3];

const info1 = document.getElementById('info1');
info1.innerHTML =texte[4];

const next = document.getElementById('next');
var s=0;
var richtig;
var anlauf=0;
var erster=-1;
var timer;
var sekunden=0;
clicke.addEventListener('click',function(){
  clearInterval(timer);
  timer=setInterval(function(){
      sekunden++;
  },1000);
      starten()
      inf.style.background='coral';
})
next.addEventListener('click',function(){
     next.style.display = 'none'; 
     inf.style.background='coral';
     if(s<questions.length){
         starten()
     }else{
         inf.innerHTML =texte[5];
         answe.style.display = 'none';    
         endanimation()
         info1.innerHTML=`Du hast ${sekunden} Sekunden gebraucht`;
     }
}) 
  
function starten(){
   clicker.style.display = 'none';
   answe.style.display = 'flex';
   info1.innerHTML='<strong>Frage '+(s+1)+':</strong><br>'+questions[s].frage;
   if(s<=questions.length){
        labels.forEach(function(f,ix){
            f.innerHTML=questions[s].antworten[ix];
            if((ix+1)==questions[s].right){
                richtig=(ix+1);
            }
                  if(erster!=-1){
          labels[erster].style.background='coral'; 
        }; 
        })
    }
}


labels.forEach(function(c,ix){ 
    c.addEventListener('click',function(){
        c.style.background='cornflowerblue'; 

        erster=ix;
        if(ix==richtig-1){
           console.log(ix,richtig)
          inf.style='display:flex;background:yellowgreen';
           inf.innerHTML =texte[1];
           next.style.display = 'flex';
           s++;
        }else{
           s=0;
           anlauf++;
           starten();
           info1.innerHTML=texte[0];     
           inf.style.background='crimson';
           inf.innerHTML =texte[2];
           clicker.style.display = 'flex';      
           answe.style.display = 'none';             
       }
    })
})



/* ab hier nur konfetti*/

































function endanimation(){
  document.getElementsByTagName('main')[0].style.display='none'; 
  document.getElementById('sieg').innerHTML='<div class="hny">Glückwunsch.<br>Deine Statistik<br>Lösungs-Zeit : '+sekunden+' Sekunden<br>Anläufe :'+anlauf+' anläufe</div>';
  
  
  
  var c=document.querySelector('body')
var konfetti=[]
for (var i=0; i<75; i++) {
  var e={}
  e.element=document.createElement('div')
  e.x=c.clientWidth/2-200+Math.random()*400
  e.y=Math.random()*100 //c.clientHeight
  e.vh=-3+Math.random()
  e.vx=(Math.random()-0.5)*2
  e.height=5+Math.random()*7
  e.width=7+Math.random()*10
  e.color='hsl(' + (Math.random()*360) + ', 100%, 50%)'
  konfetti.push(e)
}

konfetti.forEach(function(e) {
  e.element.style.top=e.y+'px'
  e.element.style.left=e.x+'px'
  e.element.style.background=e.color
  e.element.style.width=e.width+'px'
  e.element.style.height=e.height+'px'
  e.element.style.animationDelay=(Math.random()*1000)+'ms'
  e.element.classList.add('konfetti')
  c.appendChild(e.element)
})


window.setInterval(function() {
  konfetti.forEach(function(e) {
  e.y+=e.vh
  e.x+=e.vx
  e.vh+=0.08
  if (e.y>c.clientHeight) {
    e.x=c.clientWidth/2-200+Math.random()*400
    e.y=Math.random()*50 //c.clientHeight
    e.vh=1+Math.random()
    e.vx=(Math.random()-0.5)*2
    e.height=5+Math.random()*7
    e.width=7+Math.random()*10
    e.color='hsl(' + (Math.random()*360) + ', 100%, 50%)'
    e.element.style.top=e.y+'px'
    e.element.style.left=e.x+'px'
    e.element.style.background=e.color
    e.element.style.width=e.width+'px'
    e.element.style.height=e.height+'px'
    e.element.style.animationDelay=(Math.random()*1000)+'ms'
   } else {
    e.element.style.top=e.y+'px'
    e.element.style.left=e.x+'px'
   }

})
}, 0)
  
  
}

</script>
</body>
</html>

basti1012.bplaced.net

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Code