Wie kann ich das Problem meines Quiz-Projekts auflösen?

opijkkk

Grünschnabel
Hallo!

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.

Danke

Edit fiddle - JSFiddle - Code Playground
 
Doch leider funktioniert der Code nicht wirklich.
falsche Antwort drückt, will ich, dass
Ich will auch vieles. Z.B. will ich dir gerne bei deinem Problem weiterhelfen. Allerdings ist die Frage viel zu allgemein gestellt.
So wie es aussieht, hast du ja schon relativ klare Vorstellungen wo du gerne hin willst - sehr gut. Allerdings müssen wir uns jetzt Stück für Stück dort hinarbeiten.
Also: Woran konkret arbeitest du gerade, und wo genau liegt das Problem?

Gruß Technipion
 
Ich will auch vieles. Z.B. will ich dir gerne bei deinem Problem weiterhelfen. Allerdings ist die Frage viel zu allgemein gestellt.
So wie es aussieht, hast du ja schon relativ klare Vorstellungen wo du gerne hin willst - sehr gut. Allerdings müssen wir uns jetzt Stück für Stück dort hinarbeiten.
Also: Woran konkret arbeitest du gerade, und wo genau liegt das Problem?

Gruß Technipion
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-                                   
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
  </head>

  <body>

<div class="container">

    <div id="correct" class="correct">Correct</div>
    <div id="try" class="try">Try Again</div>
    <div id="score">
        SCORE:
        <span id="scoreValue">0</span>



    </div>
    <div id="qtn"></div>
    <div id="note">Click on the Right Answer</div>
    <div class="option">
        <div id="option1"></div>
        <div id="option2"></div>
        <div id="option3"></div>
        <div id="option4"></div>
    </div>
    <div id="start" class="box">Start Game</div>
  <div id="time">Time Remaing: <span id="timeremain">0</span></div>
    <div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>

</div>

</div>
<style>body,html
{
background-color: darkgray
}

.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
   /* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{

border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;

}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;

}
#qtn
{
 width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
   /* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;

}
#note
{
 width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
   /* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition:  all 0.12s;
}

#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;

}
#start
{


border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
   background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}


    #start:hover
{
 cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
   background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}

#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;

}
#gameover
{
width: 400px;
height: 100px;
 background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;

}</style>
<script>let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){

if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
    document.getElementById('time').style.display="block";
    timeremain=60;
    genQA();
    document.getElementById('start').innerHTML="Reset Game";

    startCount();
    }
}


function startCount()
{

action = setInterval(function(){
   timeremain -=1;
   document.getElementById('timeremain').innerHTML = timeremain;
   if(timeremain===0)
       {
           document.getElementById('time').style.display="none";
           gameOver();
       }
   },1000);
}


function gameOver()
{

document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}

function genQA() {

var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;

}


for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){

if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML=""
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML="";
},1000);

     genQA();
     }else{
            document.getElementById('try').innerHTML="Try Again";
            document.getElementById('correct').innerHTML="";
            setTimeout(function(){
                document.getElementById('try').innerHTML="";
               },1000);
            }
        }
    }
}
Css file :

body,html
{
background-color: darkgray
}

.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
   /* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{

border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;

}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;

}
#qtn
{
 width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
   /* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;

}
#note
{
 width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
   /* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition:  all 0.12s;
}

#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;

}
#start
{


border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
   background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
   background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
   background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}


    #start:hover
{
 cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
   background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}

#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;

}
#gameover
{
width: 400px;
height: 100px;
 background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;

}
</script>

</body>

</html>

Mit dem obigen Code konnte ich einige Probleme beseitigen. Ich will zunächst, dass die Fragen nicht nur aus Zahlen besteht. Ich will die Benutzer fragen stellen, ob Picasso ein Boxer, Küster oder ein Autofahrer war etc.
 
Ich gebe erstmal @Technipion recht das du erstmal ein problem lösen solltest und dann zum nächsten weiter gehst.
Das erste problem ist ja schon mal das
Ich will zunächst, dass die Fragen nicht nur aus Zahlen besteht. Ich will die Benutzer fragen stellen, ob Picasso ein Boxer, Küster oder ein Autofahrer war etc.
Wo sollen die Fragen her kommen ?
Dafür brauch man eine Datenbank, oder extere Quellen oder du erstellst arrays wo die Fragen und Antworten drinne stehen.

Deine Rechnen Aufgaben kann Javascript erstellen und beantworten.
Fragen wie "Ist die Erde rund oder Eckig" kennt Javascript nicht, dafür muß die Frage und Antwort irgendwo stehen wo JS drauf zugreifen kann
 
Ich gebe erstmal @Technipion recht das du erstmal ein problem lösen solltest und dann zum nächsten weiter gehst.
Das erste problem ist ja schon mal das

Wo sollen die Fragen her kommen ?
Dafür brauch man eine Datenbank, oder extere Quellen oder du erstellst arrays wo die Fragen und Antworten drinne stehen.

Deine Rechnen Aufgaben kann Javascript erstellen und beantworten.
Fragen wie "Ist die Erde rund oder Eckig" kennt Javascript nicht, dafür muß die Frage und Antwort irgendwo stehen wo JS drauf zugreifen kann
Ja, genau! So etwas will ich erschaffen. Ich will keine Datenbank anwenden. Fragen und Antworten sollten im Code drinnen sein
 
Ich gebe erstmal @Technipion recht das du erstmal ein problem lösen solltest und dann zum nächsten weiter gehst.
Das erste problem ist ja schon mal das

Wo sollen die Fragen her kommen ?
Dafür brauch man eine Datenbank, oder extere Quellen oder du erstellst arrays wo die Fragen und Antworten drinne stehen.

Deine Rechnen Aufgaben kann Javascript erstellen und beantworten.
Fragen wie "Ist die Erde rund oder Eckig" kennt Javascript nicht, dafür muß die Frage und Antwort irgendwo stehen wo JS drauf zugreifen kann
Bisher ist es mir gelungen, dass der Quiz nach einer richtigen Antwort fortfährt. Leider will ich nicht, dass nur Matherechnungen dargestellt werden. Genau! Arrays will ich nutzen
Lg
https://codepen.io/opijkkk/pen/KKpJxYd
 
Damit du auch mal weiter kommst habe ich mal versucht dir ein einfaches Beispiel zu machen.

Link zur Lösung


Ich habe da ein Schuffle eingebaut.
Das soll dazu sein das die richtige Antwort nicht immer an der gleichen stelle ist.
Sonst habe ich es soweit einfach gehalten .
Man könnte den vergleich zur richtigen Antwort vieleicht noch anders machen( zb erweitern des arrays zb 0 falsch und 1 richtig ), doch eine bessere Lösung hatte ich gerade keine im Kopf.

Vieleicht hat wer anders da nee bessere Idee ?
 
Zuletzt bearbeitet:
Damit du auch mal weiter kommst habe ich mal versucht dir ein einfaches Beispiel zu machen.
https://codepen.io/basti1012/pen/QWbopXL?editors=1111
Ich habe da ein Schuffle eingebaut.
Das soll dazu sein das die richtige Antwort nicht immer an der gleichen stelle ist.
Sonst habe ich es soweit einfach gehalten .
Man könnte den vergleich zur richtigen Antwort vieleicht noch anders machen( zb erweitern des arrays zb 0 falsch und 1 richtig ), doch eine bessere Lösung hatte ich gerade keine im Kopf.

Vieleicht hat wer anders da nee bessere Idee ?
Danke! Deine Idee hat mir etwas geholfen
 
Zurück