basti1012.bplaced.net

Ich habe seit einer Weile an diesem Projekt gearbeitet. Ich habe den Code vom Internet gefunden. Ich habe noch nie ein Quiz-Spiel kreiert. Doch leider funktioniert der Code nicht wirklich. Bisher werden nur Ziffern als Fragen dargestellt. Ich will, dass Buchstaben für Fragen ebenfalls benutzt werden können. Der Knopf, mit dem man das spiel ausführt, sowie die eingeschränkte Nachdenken-zeit und der Punktestand funktioniert. Leider wenn man auf die richtige Antwort drückt, geht das Speil nicht weiter, sondern bleibt es stehen, aber man erhält einen Punkt. Ich will, dass nach einer richtigen Antwort neue Fragen hinzukommen und dass der Benutzer einen Punkt bekommt. Wenn der Benutzer auf die falsche Antwort drückt, will ich, dass das Spiel aufhört und die erreichten Punktzahlen dargestellt werden.

Code

                                    
                                <style>
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
button{
  background:green;
  color:white;
  height:25px;
  border-radius:10px;
  padding:3px 10px;
}
main{
  display:flex;
  min-height:90vh;
}
#aside{
  flex:2;
  text-align:center;
  height:90vh;
  border:1px solid black;
}
ol#round{
  list-style-type:decimal;
}
section{
  flex:8;
}
#box{
  width:80%;
  margin:0 auto;
  display:none;
  border:4px solid black;
  flex-direction:column;
  height:400px;
  box-shadow:10px 10px 10px black;
  border-radius:15px;
  overflow:hidden;
}
label{
  text-decoration:underline;
}
#time,#round{
  min-height:25px;
}
#frage{
    flex:1;
    font-size:23px;
    padding:10px;
    background:grey;
    color:white;
    text-align:center;
}
.line{
    display:flex;
    flex:5;
}
.line div{
    height:100%;
    justify-content:center;
    padding:10px;
    display:flex;
    border:1px solid black;
    text-align:center;
    width:50%;
}
.ant{
    flex:3;
}

.ant p{
  align-items:center;
  align-content:center;
  justify-content:center;
}

.antwort:hover{
    cursor:pointer;
    background:lightgrey;
}
.antwort:active{
    background:red;
}
.antwort{
  height:40%;
  font-size:25px;
}
#info{
  height:25px;
}
</style>
<button>Start Game</button>
<main>
  <div id="aside">
  <div id="info"></div>
    <label>Gesamtzeit</label>
    <div id="time"></div>
    <label>Zeit je Frage</label>
    <ol id="round"><li>---</li></ol>
  </div>
  <section>
<div id="box">
  <div class="fra">
<div id="frage">Frage</div>
    
  </div>
  <div class="line ant">
    
<div class="antwort" id="ant1"></div>
    
<div class="antwort" id="ant2"></div>
  </div>
  <div class="line ant">
<div class="antwort" id="ant3"></div>
<div class="antwort" id="ant4"></div>
  </div>

</div>
  </section>
</main>
<script>
  function start_all(){
var fragen=[{
'frage':'An welchem Fluss liegt Rom?',
  'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Tiber']},
{
'frage':'An welchem Fluss liegt das Land Liechtenstein?',
  'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Rhein']}, 
{
'frage':'An welchem Fluss spielt die Story von Huckleberry Finn?',
  'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Mississippi']},
{
'frage':'An welchem Meer liegt Scheveningen?',
  'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Nordsee']},
{
'frage':'An welchen See grenzen drei europaeische Staaten?',
'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Bodensee']},
{
'frage':'Auf welche Insel duerfen keine fremden Pferde mitgebracht werden?',
 'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Island']},
{
'frage':'Auf welche Stadt wurde die erste Atombombe geworfen?',
'antwort':['Falsche Antwort','Falsche Antwort','Falsche Antwort','Hiroshima']}];
return fragen;
}
var zeit=0;
var start,menge,timer_1;
var letzte=true;     
//var menge=fragen.length;

var f1=document.getElementById('frage');
var a1=document.getElementById('ant1');
var a2=document.getElementById('ant2');
var a3=document.getElementById('ant3');
var a4=document.getElementById('ant4');
var conti=document.getElementById('box');
var inf=document.getElementById('info'); 
function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}
var round=document.getElementById('round');
var time=document.getElementById('time');
function los(x){
  if(x==1){
  timer_1=setInterval(function(){
    zeit++;
    tim=(zeit*10)/1000;
    time.innerHTML=tim;
  },10)
  }
  if(x==0){
    round.innerHTML+='<li>'+tim+'</li>';
  }
}



start=document.getElementsByTagName('button')[0];
start.addEventListener('click',function(){
     conti.style.display='flex';  
     start=0;
     zeit=0;
     round.innerHTML='';
     letzte=true;
     fragen=start_all();
     menge=fragen.length;
     game(start);
  los(1);
});
  
function game(x){
    console.log(x+'='+letzte+'='+start)
    if(x==menge-1){
        letzte=false;
    }
    var richtig=fragen[x].antwort[3];
    console.log(richtig);
    shuffle(fragen[x].antwort);
    f1.innerHTML='<p>'+fragen[x].frage+'</p>';
    a1.innerHTML='<p>'+fragen[x].antwort[0]+'</p>';
    a2.innerHTML='<p>'+fragen[x].antwort[1]+'</p>';
    a3.innerHTML='<p>'+fragen[x].antwort[2]+'</p>';
    a4.innerHTML='<p>'+fragen[x].antwort[3]+'</p>';

    var antw=document.querySelectorAll('.antwort p');
    antw.forEach(function(d){
      d.addEventListener('click',function(){
        if(d.innerHTML==richtig){
            x++;
            if(letzte==true){
                 game(x);
                 los(0);
                 inf.innerHTML='Antwort Richtig';
                 setTimeout(function(){
                    inf.innerHTML=''; 
                 },1500)  
            }else{
                 conti.style.display='none'; 
                 inf.innerHTML='Game ist zu ende';
                 clearInterval(timer_1);
            }
         }
      });
   });
}
 
</script>