Untitled


<!DOCTYPE HTML>

<html>

  <head>
<title>Believe Creative Quiz</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
    <style>

      body {

        margin: 30px;

        padding: 0px;

      }

      canvas {

        border: 3px solid #000000;

      }

    </style>

    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script>

    <script>


      function loadImages(sources, callback) {

        var images = {};

        var loadedImages = 0;

        var numImages = 0;

        for(var src in sources) {

          numImages++;

        }

        for(var src in sources) {

          images[src] = new Image();

          images[src].onload = function() {

            if(++loadedImages >= numImages) {

              callback(images);

            }

          };

          images[src].src = sources[src];

        }

      }

      function initStage(images) {

        var stage = new Kinetic.Stage({

          container: "container",

          width: 600,

          height: 350

        });


 var simpleText = new Kinetic.Text({

          x: 23,

          y: 30,

          text: "Who is the hero for the film Tare Jameen Par!!?",

          fontSize: 12,
          fontStyle:"italic",

          fontFamily: "Calibri",

          textFill: "green"

        });

        var amirGroup = new Kinetic.Group({

          x: 80,

          y: 60,

          draggable: true,
          dragBounds:{
          	top:50,
          	bottom:190,
          	right:240,
          	left:15
          }

        });

        var sharukGroup = new Kinetic.Group({

          x: 20,

          y: 60,

          draggable: true,
           dragBounds:{
          	top:50,
          	bottom:190,
          	right:240,
          	left:15
          }

        });
		var roshanGroup = new Kinetic.Group({

          x: 160,

          y: 60,

          draggable: true,
           dragBounds:{
          	top:50,
          	bottom:190,
          	right:240,
          	left:15
          }

        });
        var rajiniGroup = new Kinetic.Group({

          x: 240,

          y: 60,

          draggable: true,
           dragBounds:{
          	top:50,
          	bottom:190,
          	right:240,
          	left:15

          }

        });
        var rect = new Kinetic.Rect({

          x: 23,

          y: 220,

          width: 305,

          height: 110,

          fill: "#ffffff",

          stroke: "blue",

          strokeWidth: 4,

        });

        var layer = new Kinetic.Layer();


        layer.add(amirGroup);

        layer.add(sharukGroup);
		layer.add(roshanGroup);
		layer.add(rajiniGroup);
		layer.add(simpleText);
        layer.add(rect);

        stage.add(layer);


       //amir

        var amirImg = new Kinetic.Image({

          x: 30,

          y: 30,

          image: images.amir,

          width: 60,

          height: 100,

          name: "image2"

        });


        amirGroup.add(amirImg);
        amirGroup.on("dragstart", function() {

          this.moveToTop();

        });

        // sharuk

        var sharukImg = new Kinetic.Image({

          x: 5,

          y:30,

          image: images.sharuk,

          width: 60,

          height: 100,

          name: "image1"

        });


        sharukGroup.add(sharukImg);
        sharukGroup.on("dragstart", function() {

          this.moveToTop();

        });
//Hrithik roshan
var roshanImg = new Kinetic.Image({

          x: 30,

          y: 30,

          image: images.roshan,

          width: 60,

          height: 100,

          name: "image3"

        });


        roshanGroup.add(roshanImg);
        roshanGroup.on("dragstart", function() {

          this.moveToTop();

        });
        //RajiniKanth
var rajiniImg = new Kinetic.Image({

          x: 30,

          y: 30,

          image: images.rajini,

          width: 60,

          height: 100,

          name: "image4"

        });


        rajiniGroup.add(rajiniImg);
        rajiniGroup.on("dragstart", function() {

          this.moveToTop();

        });

        stage.draw();

      }


      window.onload = function() {


        var sources = {

          amir: "Images/icon1.jpg",

          sharuk: "Images/icon2.jpg",
		  roshan: "Images/icon3.jpg",
		  rajini: "Images/icon4.jpg"
        };

        loadImages(sources, initStage);


      };


    </script>

  </head>

  <body onmousedown="return false;">
<header>
            <h2>BelieveCreative child QUIZ Studio</h2>
        </header>

    <div id="container"></div>

  </body>

</html>