basti1012.bplaced.net

Einfaches frage Antwort Spiel. Beim Ende wird eine Trefferquote Berechnet

Code

                                    
                                <style>
  main{
  width:80%;
  margin:0 auto;
  border:1px solid black;
  height:80vh;
}
#question{
  height:40%;
    text-align:center;
  font-size:30px;
  word-break:break-all;
  border-bottom:1px solid black;
}
#options{
  display:flex;
  flex-wrap:wrap;
  height:20%;
  border-bottom:1x solid black;
   
}
#options button{
  width:50%;
  height:50%;
}
#neustart button{
  width:100%;
  height:100%;
    font-size:40px;
}
#correct{
  height:20%;
  text-align:center;
  font-size:30px;
  overflow:hidden;
  border-top:1px solid black;
}
#info{
  height:20%;
  text-align:center;
  font-size:30px;
  overflow:hidden;
}
#neustart{
  height:20%;
  width:100%;
  display:none;
}
  
</style>


<main>
<div id="question"></div>
<div class="shuffle" id="options"></div>
  <div id="neustart"><button id="neu">Neustart</button></div>
<div id="info"></div>
<div id="correct"></div>
</main>
<script>
  
  





const question = [
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is Alex fav Animal?",
        options: ["Dogs", "Cats", "Turtles", "iglos"],
        answer: "Dogs",
    },
    {
        question: "10+10",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
];
document.addEventListener("DOMContentLoaded", function(){
var correct = 0;
var wrong=0;
var inf=document.querySelector("#info");
var cor=document.querySelector("#correct");
var neustart=document.getElementById('neustart');
var neu=document.getElementById('neu');
var qu=document.querySelector("#question");
var options = document.querySelector("#options");

function mischen(ende){
    var list=[];
    for(z=0;z<ende;z++){
        list.push(z);
    }
    return shuffleArray(list);
}
function shuffleArray(list){
    return list.sort(()=> Math.random() - 0.5);
}






function load_question () {

  cor.innerHTML='Frage '+(correct+1)+' <br>Von '+question.length;
  
  qu.innerHTML = question[correct].question;
  options.innerHTML = "";
  list=mischen(question[correct].options.length);
 
  for(t=0;t<question[correct].options.length;t++){
          options.innerHTML += `<button class="option">${question[correct].options[list[t]]}</button>`;  
  }
 

  var but=document.querySelectorAll(".option");
  but.forEach(function(s){
       s.addEventListener('click',function(){
            if (s.textContent == question[correct].answer) {
                inf.innerHTML ="RICHTIG";
                correct++;
                if(correct<question.length){
                    load_question();
                }else{
                    inf.innerHTML ="Game end <br>Du hast "+wrong+" falsche antworten gegeben"; 
                  neustart.style.display='block';
                  options.style.display='none';
                   en=(100-((((correct+wrong)/correct)*100)-100)).toFixed(2);
                  cor.innerHTML='Treffer Quote '+en+'%';
                }
            } else {
              wrong++; 
              inf.innerHTML ="Falsch";     
            }
       })
  })
}

neu.addEventListener("click",function(){
      neustart.style.display='none';
      options.style.display='block';
      correct = 0;
      wrong=0;
      inf.innerHTML='';
      cor.innerHTML='';
      load_question();
})
 load_question();
});
</script>