M0r13n/bla.html

## bla.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style type="text/css">
    text{
        font-family:Helvetica, Arial, sans-serif;
        font-size:11px;
        pointer-events:none;
    }
    #chart{
        position:relative;
        left:-250px;
    }
    #question{
        position: relative;
        width:400px;
        height:500px;
        top:0;
        left:0;
    }
    #question h1{
        font-size: 50px;
        font-weight: bold;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        padding: 0;
        margin: 0;
        top:50%;
        -webkit-transform:translate(0,-50%);
                transform:translate(0,-50%);
    }


    .modal.left .modal-dialog {
    position: fixed;
    margin: auto;
    width: 50%;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }

  .modal.left .modal-content {
    height: 100%;
    overflow-y: auto;
  }

  .modal.left .modal-body {
    padding: 15px 15px 80px;
  }

  .modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
  }

  .modal.left.fade.show .modal-dialog {
    left: 0;
  }

    /* ----- MODAL STYLE ----- */
    .modal-content {
      border-radius: 0;
      border: none;
    }

    .modal-header {
      border-bottom-color: #eeeeee;
      background-color: #fafafa;
    }

    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>


    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <h1>Tolle Gewinne</h1>
          <div>
          <div id="chart"></div></div>
          <div style="position: relative;">dfdf</div>
          <div id="question"><h1></h1></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8">
        var padding = {top:20, right:40, bottom:0, left:0},
            w = 500 - padding.left - padding.right,
            h = 500 - padding.top  - padding.bottom,
            r = Math.min(w, h)/2,
            rotation = 0,
            oldrotation = 0,
            picked = 100000,
            oldpick = [],
            color = d3.scale.category20();

        var data = [
                    {"label":"Quatsch 1",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 2",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 3",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 4",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 5",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 6",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 7",  "value":1,  "question":"ABCDEFG"},
                    {"label":"Quatsch 8",  "value":1,  "question":"ABCDEFG"}
        ];


        var svg = d3.select('#chart')
            .append("svg")
            .data([data])
            .attr("width",  w + padding.left + padding.right)
            .attr("height", h + padding.top + padding.bottom);

        var container = svg.append("g")
            .attr("class", "chartholder")
            .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");

        var vis = container
            .append("g");

        var pie = d3.layout.pie().sort(null).value(function(d){return 1;});

        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);

        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("g")
            .attr("class", "slice");


        arcs.append("path")
            .attr("fill", function(d, i){ return color(i); })
            .attr("d", function (d) { return arc(d); });

        // add the text
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
            })
            .attr("text-anchor", "end")
            .text( function(d, i) {
                return data[i].label;
            });

        container.on("click", spin);


        function spin(d){

            container.on("click", null);

            //all slices have been seen, all done
            console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
            if(oldpick.length == data.length){
                console.log("done");
                container.on("click", null);
                return;
            }

            var  ps       = 360/data.length,
                 pieslice = Math.round(1440/data.length),
                 rng      = Math.floor((Math.random() * 1440) + 360);

            rotation = (Math.round(rng / ps) * ps);

            picked = Math.round(data.length - (rotation % 360)/ps);
            picked = picked >= data.length ? (picked % data.length) : picked;


            if(oldpick.indexOf(picked) !== -1){
                d3.select(this).call(spin);
                return;
            } else {
                oldpick.push(picked);
            }

            rotation += 90 - Math.round(ps/2);

            vis.transition()
                .duration(3000)
                .attrTween("transform", rotTween)
                .each("end", function(){

                    //mark question as seen
                    d3.select(".slice:nth-child(" + (picked + 1) + ") path")
                        .attr("fill", "#111");

                    //populate question
                    d3.select("#question h1")
                        .text(data[picked].question);

                    oldrotation = rotation;

                    container.on("click", spin);
                });
        }

        //make arrow
        svg.append("g")
            .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
            .append("path")
            .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
            .style({"fill":"black"});

        //draw spin circle
        container.append("circle")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", 60)
            .style({"fill":"white","cursor":"pointer"});


        function rotTween(to) {
          var i = d3.interpolate(oldrotation % 360, rotation);
          return function(t) {
            return "rotate(" + i(t) + ")";
          };
        }


        function getRandomNumbers(){
            var array = new Uint16Array(1000);
            var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);

            if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
                window.crypto.getRandomValues(array);
                console.log("works");
            } else {
                //no support for crypto, get crappy random numbers
                for(var i=0; i < 1000; i++){
                    array[i] = Math.floor(Math.random() * 100000) + 1;
                }
            }

            return array;
        }

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<style type="text/css">
	text{
	font-family:Helvetica, Arial, sans-serif;
	font-size:11px;
	pointer-events:none;
	}
	#chart{
	position:relative;
	left:-250px;
	}
	#question{
	position: relative;
	width:400px;
	height:500px;
	top:0;
	left:0;
	}
	#question h1{
	font-size: 50px;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: absolute;
	padding: 0;
	margin: 0;
	top:50%;
	-webkit-transform:translate(0,-50%);
	transform:translate(0,-50%);
	}


	.modal.left .modal-dialog {
	position: fixed;
	margin: auto;
	width: 50%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content {
	height: 100%;
	overflow-y: auto;
	}

	.modal.left .modal-body {
	padding: 15px 15px 80px;
	}

	.modal.left.fade .modal-dialog {
	left: -320px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	-o-transition: opacity 0.3s linear, left 0.3s ease-out;
	transition: opacity 0.3s linear, left 0.3s ease-out;
	}

	.modal.left.fade.show .modal-dialog {
	left: 0;
	}

	/* ----- MODAL STYLE ----- */
	.modal-content {
	border-radius: 0;
	border: none;
	}

	.modal-header {
	border-bottom-color: #eeeeee;
	background-color: #fafafa;
	}

	</style>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
	<body>


	<!-- Button trigger modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Launch demo modal
	</button>

	<!-- Modal -->
	<div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
	<div class="modal-content">

	<div class="modal-body">
	<h1>Tolle Gewinne</h1>
	<div>
	<div id="chart"></div></div>
	<div style="position: relative;">dfdf</div>
	<div id="question"><h1></h1></div>
	</div>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	</div>
	</div>
	</div>
	</div>


	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script type="text/javascript" charset="utf-8">
	var padding = {top:20, right:40, bottom:0, left:0},
	w = 500 - padding.left - padding.right,
	h = 500 - padding.top - padding.bottom,
	r = Math.min(w, h)/2,
	rotation = 0,
	oldrotation = 0,
	picked = 100000,
	oldpick = [],
	color = d3.scale.category20();

	var data = [
	{"label":"Quatsch 1", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 2", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 3", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 4", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 5", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 6", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 7", "value":1, "question":"ABCDEFG"},
	{"label":"Quatsch 8", "value":1, "question":"ABCDEFG"}
	];


	var svg = d3.select('#chart')
	.append("svg")
	.data([data])
	.attr("width", w + padding.left + padding.right)
	.attr("height", h + padding.top + padding.bottom);

	var container = svg.append("g")
	.attr("class", "chartholder")
	.attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");

	var vis = container
	.append("g");

	var pie = d3.layout.pie().sort(null).value(function(d){return 1;});

	// declare an arc generator function
	var arc = d3.svg.arc().outerRadius(r);

	// select paths, use arc generator to draw
	var arcs = vis.selectAll("g.slice")
	.data(pie)
	.enter()
	.append("g")
	.attr("class", "slice");


	arcs.append("path")
	.attr("fill", function(d, i){ return color(i); })
	.attr("d", function (d) { return arc(d); });

	// add the text
	arcs.append("text").attr("transform", function(d){
	d.innerRadius = 0;
	d.outerRadius = r;
	d.angle = (d.startAngle + d.endAngle)/2;
	return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
	})
	.attr("text-anchor", "end")
	.text( function(d, i) {
	return data[i].label;
	});

	container.on("click", spin);


	function spin(d){

	container.on("click", null);

	//all slices have been seen, all done
	console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
	if(oldpick.length == data.length){
	console.log("done");
	container.on("click", null);
	return;
	}

	var ps = 360/data.length,
	pieslice = Math.round(1440/data.length),
	rng = Math.floor((Math.random() * 1440) + 360);

	rotation = (Math.round(rng / ps) * ps);

	picked = Math.round(data.length - (rotation % 360)/ps);
	picked = picked >= data.length ? (picked % data.length) : picked;


	if(oldpick.indexOf(picked) !== -1){
	d3.select(this).call(spin);
	return;
	} else {
	oldpick.push(picked);
	}

	rotation += 90 - Math.round(ps/2);

	vis.transition()
	.duration(3000)
	.attrTween("transform", rotTween)
	.each("end", function(){

	//mark question as seen
	d3.select(".slice:nth-child(" + (picked + 1) + ") path")
	.attr("fill", "#111");

	//populate question
	d3.select("#question h1")
	.text(data[picked].question);

	oldrotation = rotation;

	container.on("click", spin);
	});
	}

	//make arrow
	svg.append("g")
	.attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
	.append("path")
	.attr("d", "M-" + (r.15) + ",0L0," + (r.05) + "L0,-" + (r*.05) + "Z")
	.style({"fill":"black"});

	//draw spin circle
	container.append("circle")
	.attr("cx", 0)
	.attr("cy", 0)
	.attr("r", 60)
	.style({"fill":"white","cursor":"pointer"});



	function rotTween(to) {
	var i = d3.interpolate(oldrotation % 360, rotation);
	return function(t) {
	return "rotate(" + i(t) + ")";
	};
	}


	function getRandomNumbers(){
	var array = new Uint16Array(1000);
	var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);

	if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
	window.crypto.getRandomValues(array);
	console.log("works");
	} else {
	//no support for crypto, get crappy random numbers
	for(var i=0; i < 1000; i++){
	array[i] = Math.floor(Math.random() * 100000) + 1;
	}
	}

	return array;
	}

	</script>
	</body>
	</html>