Frage antwort Spiel
Einfaches frage Antwort Spiel. Beim Ende wird eine Trefferquote Berechnet
Der hier verwendete 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>