#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0

    Get from xml and randomize


    Hey

    I have a simple quiz script here, but I want to retrieve the questions from a xml file and randomize them. Any solution to how I can do this without using php?

    <!DOCTYPE HTML>

    <html>
    <head>

    <style>
    body {
    background-image:url('BG.png')
    }

    #ccontainer{
    width:550px;

    margin: 0 auto;
    margin-top:100px;
    }

    #myCanvas {
    //background:#FFFFFF;
    }

    </style>

    <script src="loadxml.js"></script>

    <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>
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    If the xml file is hosted on the same domain as your quiz page, then yes, you can use AJAX to retrieve them and JavaScript to randomize the order of the questions. If the xml file is hosted on a different domain, then no, you need to use a server-side language or you need to store your questions as JavaScript instead of xml.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

IMN logo majestic logo threadwatch logo seochat tools logo