xxxGURUxxx
Grünschnabel
Hallo,
ich bin eigentlich in .net zu Hause aber jetzt versuche ich es mal in PHP mit einem Multiple Choice Quiz
die MYSQL Datenbank habe ich schon aufgebaut und funktioniert lt. einem Beispiel Code
will ich nun die Tabelle der Fragen und die Antworten zusammenführen in den Beispiel PHP Code
aber ich habe absolut keinen schimmer
kann mir jemand Bitte einen Tipp geben
Zur Info:
MY SQL Tabelle mit Fragen
MY SQL Tabelle mit 4 Antworten
also gleich wie es im Beispiel gefordert wurde
das Beispiel funktioniert auch sehr gut
Danke
Mario
ich bin eigentlich in .net zu Hause aber jetzt versuche ich es mal in PHP mit einem Multiple Choice Quiz
die MYSQL Datenbank habe ich schon aufgebaut und funktioniert lt. einem Beispiel Code
will ich nun die Tabelle der Fragen und die Antworten zusammenführen in den Beispiel PHP Code
aber ich habe absolut keinen schimmer
kann mir jemand Bitte einen Tipp geben
Zur Info:
MY SQL Tabelle mit Fragen
MY SQL Tabelle mit 4 Antworten
also gleich wie es im Beispiel gefordert wurde
das Beispiel funktioniert auch sehr gut
Danke
Mario
PHP:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
}
#ccontainer{
width:550px;
margin: 0 auto;
margin-top:100px;
}
#myCanvas {
//background:#FFFFFF;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var quizbg = new Image();
var Question = new String;
var Option1 = new String;
var Option2 = new String;
var Option3 = new String;
var Option4 = new String;
var mx=0;
var my=0;
var CorrectAnswer = 0;
var qnumber = 0;
var rightanswers=0;
var wronganswers=0;
var QuizFinished = false;
var lock = false;
var textpos1=45;
var textpos2=145;
var textpos3=230;
var textpos4=325;
var textpos5=420;
var Questions = ["Wo ist Paris?","Wo ist London?","Wo ist Rom?"];
var Options = [["Frankreich","Belgien","Österreich","Deutschland"],["England","China","Italien","Schweiz"],["Italien","Canada","USA","Kuba"]];
quizbg.onload = function(){
context.drawImage(quizbg, 0, 0);
SetQuestions();
}//quizbg
quizbg.src = "quizbg.png";
SetQuestions = function(){
Question=Questions[qnumber];
CorrectAnswer=1+Math.floor(Math.random()*4);
if(CorrectAnswer==1){Option1=Options[qnumber][0];Option2=Options[qnumber][1];Option3=Options[qnumber][2];Option4=Options[qnumber][3];}
if(CorrectAnswer==2){Option1=Options[qnumber][1];Option2=Options[qnumber][0];Option3=Options[qnumber][2];Option4=Options[qnumber][3];}
if(CorrectAnswer==3){Option1=Options[qnumber][2];Option2=Options[qnumber][3];Option3=Options[qnumber][0];Option4=Options[qnumber][1];}
if(CorrectAnswer==4){Option1=Options[qnumber][3];Option2=Options[qnumber][2];Option3=Options[qnumber][1];Option4=Options[qnumber][0];}
context.textBaseline = "middle";
context.font = "24pt Calibri,Arial";
context.fillText(Question,20,textpos1);
context.font = "18pt Calibri,Arial";
context.fillText(Option1,20,textpos2);
context.fillText(Option2,20,textpos3);
context.fillText(Option3,20,textpos4);
context.fillText(Option4,20,textpos5);
}//SetQuestions
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
my=ev.y-canvas.offsetTop;
if(ev.y == undefined){
my = ev.pageY - canvas.offsetTop;
}
if(lock){
ResetQ();
}//if lock
else{
if(my>110 && my<180){GetFeedback(1);}
if(my>200 && my<270){GetFeedback(2);}
if(my>290 && my<360){GetFeedback(3);}
if(my>380 && my<450){GetFeedback(4);}
}//!lock
}//ProcessClick
GetFeedback = function(a){
if(a==CorrectAnswer){
context.drawImage(quizbg, 0,490,75,70,480,108+(90*(a-1)),75,70);
rightanswers++;
//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
}
else{
context.drawImage(quizbg, 75,490,75,70,480,108+(90*(a-1)),75,70);
wronganswers++;
}
lock=true;
context.font = "14pt Calibri,Arial";
context.fillText("Klick für nächste Frage...",20,480);
}//get feedback
ResetQ= function(){
lock=false;
context.clearRect(0,0,560,490);
qnumber++;
if(qnumber==Questions.length){EndQuiz();}
else{
context.drawImage(quizbg, 0, 0);
SetQuestions();}
}
EndQuiz=function(){
canvas.removeEventListener('click',ProcessClick,false);
context.drawImage(quizbg, 0,0,550,90,0,0,560,490);
context.font = "20pt Calibri,Arial";
context.fillText("Das Quiz ist nun Fertig!",20,100);
context.font = "16pt Calibri,Arial";
context.fillText("Richtige Antworten: "+String(rightanswers),20,200);
context.fillText("Falsche Antworten: "+String(wronganswers),20,240);
}
};//windowonload
</script>
</head>
<body>
<div id="ccontainer">
<canvas id="myCanvas" width="550" height="490"></canvas>
</div>
</body>
</html>
