Hi all,
This is my firt post here, I'm new to web dev world but I am not a total beginner, I've been looking for several CMSs to work with about a month ago and I think that MODX is suitable for me, besides some tricky stuff (where are resources saved to make a backup, how to make two seperate websites in a single modx install and so on), but it is ok, this is not my problem for the moment anyway.
I want to integrate a simple quiz to my website, unfortenality there is no MODX extra for that so I looked for a code in the internet and I found one that looked great for me:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color:#ff3256
}
#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 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 = ["Where is Paris?","Where is London?","Where is Rome?"];
var Options = [["France","Belgium","Norway"],["England","China","Denmark"],["Italy","Brazil","Canada"]];
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()*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 = "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);
}//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);}
}//!lock
}//ProcessClick
GetFeedback = function(a){
if(a==CorrectAnswer){
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{
context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70);
wronganswers++;
}
lock=true;
context.font = "14pt Calibri,Arial";
context.fillText("Click again to continue",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("You have finished the quiz!",20,100);
context.font = "16pt Calibri,Arial";
context.fillText("Correct answers: "+String(rightanswers),20,200);
context.fillText("Wrong answers: "+String(wronganswers),20,240);
}
};//windowonload
</script>
</head>
<body>
<div id="ccontainer">
<canvas id="myCanvas" width="550" height="400"></canvas>
</div>
</body>
</html>
It's all working fine outside MODX when the "index" file and the "quizbg.png" image are in the same folder, but once I make a template/resource for it to work with nothing happens, actially the page is rendered but the problem is about the image path, so I placed the image "quizbg.png" in the right place -I suppose- and changed the path to:
quizbg.src = "assets/img/quizbg.png";
but it is still not working.
Anyone can tell me what's wrong? Thanks in advance.
