In order to understand my problem see this:
http://home.htw-berlin.de/~s0544437/quiztes2t.php?p=7
the question is coming from an XML data and it should have a line break as soon as it is too long to fit in the grey box. I've tried a couple of things and nothing worked.
I don't need a dynamic solution if it's easier to solve the problem by adding the line breaks in the XML manually for every question, but I don't know how.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {background-image:url('bgimg.jpg');
background-size:100%;}
#ccontainer{
width:550px;
margin: 0 auto;
margin-top:100px;
}
</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 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 Questions = new Array;
var Options = new Array;
var textArray = new Array('line2', 'line3', 'line4', 'line5');
var rows = 98;
<?php
$datastr = "data".$_GET["p"].".xml";
$xml = simplexml_load_file($datastr);
$counter= count($xml);
for($i=0;$i<$counter;$i++){
echo "Questions[".$i."]='".$xml-> task[$i]->question ."';";
echo "\n";
echo "Options[".$i."]=['".$xml-> task[$i]->option[0] ."','";
echo $xml-> task[$i]->option[1] ."','";
echo $xml-> task[$i]->option[2]."'];";
echo "\n";
}
?>
quizbg.onload = function(){
context.drawImage(quizbg, 0, 0);
SetQuestions();
}//Spiel Hintergrund
quizbg.src = "quizbg2.png";
SetQuestions = function(){
Question=Questions[qnumber];
CorrectAnswer=1+Math.floor(Math.random()*3);
if(CorrectAnswer==1){Option1=Options[qnumber][0];Option2=Options[qnumber][1];Option3=Options[qnumber][2];}
if(CorrectAnswer==2){Option1=Options[qnumber][2];Option2=Options[qnumber][0];Option3=Options[qnumber][1];}
if(CorrectAnswer==3){Option1=Options[qnumber][1];Option2=Options[qnumber][2];Option3=Options[qnumber][0];}
context.textBaseline = "middle";
context.font = "18pt 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);
}//Erzeugt Fragen
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
mx=ev.x-canvas.offsetLeft;
my=ev.y-canvas.offsetTop;
if(ev.x == undefined){
mx = ev.pageX - canvas.offsetLeft;
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);}
}//!lock
}//ProcessClick
GetFeedback = function(a){
if(a==CorrectAnswer){
document.getElementById('ra').play();
context.drawImage(quizbg, 0,400,75,70,480,110+(90*(a-1)),75,70);
rightanswers++;//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
}
else{
document.getElementById('wa').play();
context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70);
wronganswers++;
}
lock=true;
context.font = "14pt Calibri,Arial";
context.fillText("Nochmal Klicken zur nächsten Frage ",20,380);
}//get feedback
ResetQ= function(){
lock=false;
context.clearRect(0,0,550,400);
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,550,400);
context.font = "20pt Calibri,Arial";
context.fillText("Deine Prüfung ist vorbei!",20,100);
context.font = "16pt Calibri,Arial";
context.fillText("Richtige Antworten: "+String(rightanswers),20,200);
context.fillText("Falsche Antworten: "+String(wronganswers),20,240);
}
};// Läd das Spiel
</script>
</head>
<body>
<audio src="righta.mp3" id="ra"></audio>
<audio src="wronga2.mp3" id="wa"></audio>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#show").click(function() {
$("p").toggle();
});
});// zeigt/versteckt hintergrund musikplayer wenn versteckt/offen
</script>
<button id="show">Musik</button>
<p hidden>
<audio controls autoplay controls loop>
<source src="Hitman Blood Money - Jesper Kyd - Amb Zone.mp3" type="audio/mpeg">
</audio>
</p>
<div id="ccontainer">
<canvas id="myCanvas" width="550" height="400"></canvas>
</div>
</body>
</html>
This is how the XML looks
<?xml version="1.0" encoding="ISO-8859-1"?>
<All>
<task>
<question>Question here if too long leavs the box like this asdasdasdasdasdasdasdasd</question>
<option>need a line break</option>
<option>option 2</option>
<option>option 3</option>
</task>
</All>
instead of \n ; – user1844933 Feb 06 '14 at 10:59