AALEKH/jsbin.egeyih.html

## jsbin.egeyih.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title>Popcorn MCQ Plug-in Demo</title>

  <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var p = Popcorn( "#video" )
      .play()
      .mcq({
        start: 2,
        end: 4,
        target: "footnotediv"
      });
      }, false);

  </script>
</head>
<body>
  <h1 id="qunit-header">Popcorn mcq Plug-in Demo</h1>

  <div>
     <video height="180" width="300" id="video" controls>
         <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">

       </video>
       <div id="footnotediv"></div>
  </div>
</body>
</html>

## jsbin.egeyih.js
/* Copyright (c) 2006 YourNameHere
   See the file LICENSE.txt for licensing information. */
(function(Popcorn){
    Popcorn.plugin("mcq",{
        manifest: {
      about: {
        name: "Popcorn Footnote Plugin",
        version: "0.2",
        author: "@annasob, @rwaldron",
        website: "annasob.wordpress.com"
      },
      options: {
        start: {
          elem: "input",
          type: "number",
          label: "Start"
        },
        end: {
          elem: "input",
          type: "number",
          label: "End"
        },
        target: "footnotediv"
      }
    },

      _setup: function(options)
               {


               },
        start: function( event, options ){
               var a1=document.getElementById("footnotediv");
          var a2=document.createElement("DIV");
          a2.style.height="180px";
          a2.style.width="300px";
          a2.style.backgroundColor="#E6E6E6";
          a2.style.marginTop="-180px";
          a2.style.position="absolute";
          a2.style.opacity="0.5";
          var a3=document.createElement("p");
          a3.style.color="#FF0000";
          a3.innerHTML="who is elon musk?";
          a3.style.marginLeft="90px";
          var a4=document.createElement("button");
          a4.innerHTML="Tony StarkRl";
          a4.style.marginLeft="10px";
          var a5=document.createElement("button");
          a5.innerHTML="Innovator";
          a5.style.marginLeft="80px";
          var a6=document.createElement("br");
          var a7=document.createElement("button");
          a7.innerHTML="NSJ";
          a7.style.marginLeft="10px";
          a7.style.marginTop="10px";
          var a8=document.createElement("button");
          a8.innerHTML="AOA";
          a8.style.marginLeft="120px";
          a8.style.marginTop="10px";
          a2.appendChild(a3);
          a2.appendChild(a4);
          a2.appendChild(a5);
          a2.appendChild(a6);
          a2.appendChild(a7);
          a2.appendChild(a8);
          a1.appendChild(a2);
                       },
        end: function( event, options ){
                        t.style.visibilty = "hidden";
                       }


                   });
    })(Popcorn);

	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<title>Popcorn MCQ Plug-in Demo</title>

	<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
	var p = Popcorn( "#video" )
	.play()
	.mcq({
	start: 2,
	end: 4,
	target: "footnotediv"
	});
	}, false);

	</script>
	</head>
	<body>
	<h1 id="qunit-header">Popcorn mcq Plug-in Demo</h1>

	<div>
	<video height="180" width="300" id="video" controls>
	<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">

	</video>
	<div id="footnotediv"></div>
	</div>
	</body>
	</html>
	/* Copyright (c) 2006 YourNameHere
	See the file LICENSE.txt for licensing information. */
	(function(Popcorn){
	Popcorn.plugin("mcq",{
	manifest: {
	about: {
	name: "Popcorn Footnote Plugin",
	version: "0.2",
	author: "@annasob, @rwaldron",
	website: "annasob.wordpress.com"
	},
	options: {
	start: {
	elem: "input",
	type: "number",
	label: "Start"
	},
	end: {
	elem: "input",
	type: "number",
	label: "End"
	},
	target: "footnotediv"
	}
	},

	_setup: function(options)
	{


	},
	start: function( event, options ){
	var a1=document.getElementById("footnotediv");
	var a2=document.createElement("DIV");
	a2.style.height="180px";
	a2.style.width="300px";
	a2.style.backgroundColor="#E6E6E6";
	a2.style.marginTop="-180px";
	a2.style.position="absolute";
	a2.style.opacity="0.5";
	var a3=document.createElement("p");
	a3.style.color="#FF0000";
	a3.innerHTML="who is elon musk?";
	a3.style.marginLeft="90px";
	var a4=document.createElement("button");
	a4.innerHTML="Tony StarkRl";
	a4.style.marginLeft="10px";
	var a5=document.createElement("button");
	a5.innerHTML="Innovator";
	a5.style.marginLeft="80px";
	var a6=document.createElement("br");
	var a7=document.createElement("button");
	a7.innerHTML="NSJ";
	a7.style.marginLeft="10px";
	a7.style.marginTop="10px";
	var a8=document.createElement("button");
	a8.innerHTML="AOA";
	a8.style.marginLeft="120px";
	a8.style.marginTop="10px";
	a2.appendChild(a3);
	a2.appendChild(a4);
	a2.appendChild(a5);
	a2.appendChild(a6);
	a2.appendChild(a7);
	a2.appendChild(a8);
	a1.appendChild(a2);
	},
	end: function( event, options ){
	t.style.visibilty = "hidden";
	}


	});
	})(Popcorn);