Advertisement
Guest User

Untitled

a guest
Jan 22nd, 2019
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.35 KB | None | 0 0
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>FINAŁ</title>
  5. <style type="text/css">
  6. html,body{
  7. width: 100%;
  8. height: 100%;
  9. margin: 0;
  10. }
  11. .container{
  12. width: 100%;
  13. height: 100%;
  14. background-image: url(15%20koniec.jpg);
  15. background-position: center;
  16. background-repeat: no-repeat;
  17. }
  18.  
  19. text{
  20. font-family:Helvetica, Arial, sans-serif;
  21. font-size:32px;
  22. pointer-events:none;
  23. }
  24. #chart{
  25. position:absolute;
  26. width: 1000px;
  27. height: 1000px;
  28. top:20%;
  29. left:37%;
  30. }
  31. #question{
  32. position: absolute;
  33. width:400px;
  34. height:500px;
  35. top:-15%;
  36. left:42%;
  37. }
  38. #question h1{
  39. font-size: 200px;
  40. font-weight: bold;
  41. font-family: "Helvetica Neue", Helvetica, Arial;
  42. position: absolute;
  43. padding: 0;
  44. margin: 0;
  45. top:60%;
  46. left: 70px;
  47. text-align: center;
  48.  
  49. color: white;
  50. -webkit-transform:translate(0,-50%);
  51. transform:translate(0,-50%);
  52.  
  53. }
  54. </style>
  55.  
  56. </head>
  57. <body>
  58. <div class="container">
  59. <div id="chart"></div>
  60. <div id="question"><h1></h1></div>
  61. </div>
  62.  
  63. <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  64. <script type="text/javascript" charset="utf-8">
  65. var padding = {top:10, right:40, bottom:0, left:0},
  66. w = 500 - padding.left - padding.right,
  67. h = 500 - padding.top - padding.bottom,
  68. r = Math.min(w, h)/2,
  69. rotation = 0,
  70. oldrotation = 0,
  71. picked = 100000,
  72. color = d3.scale.category20();//category20c()
  73. //randomNumbers = getRandomNumbers();
  74.  
  75.  
  76.  
  77. var data = [
  78.  
  79. {"label":"Przysłowia", "value":1, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
  80. {"label":"Matematyka", "value":1, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
  81. {"label":"Sport", "value":1, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
  82. {"label":"Motoryzacja", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
  83. {"label":"Muzyka", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
  84. {"label":"Geografia", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
  85. {"label":"Filmy", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
  86. {"label":"Historia", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
  87.  
  88. ];
  89.  
  90.  
  91. var svg = d3.select('#chart')
  92. .append("svg")
  93. .data([data])
  94. .attr("width", w + padding.left + padding.right)
  95. .attr("height", h + padding.top + padding.bottom);
  96.  
  97. var container = svg.append("g")
  98. .attr("class", "chartholder")
  99. .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
  100.  
  101. var vis = container
  102. .append("g");
  103.  
  104. var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
  105.  
  106. // declare an arc generator function
  107. var arc = d3.svg.arc().outerRadius(r);
  108.  
  109. // select paths, use arc generator to draw
  110. var arcs = vis.selectAll("g.slice")
  111. .data(pie)
  112. .enter()
  113. .append("g")
  114. .attr("class", "slice");
  115.  
  116.  
  117. arcs.append("path")
  118. .attr("fill", function(d, i){ return color(i); })
  119. .attr("d", function (d) { return arc(d); });
  120.  
  121. // add the text
  122. arcs.append("text").attr("transform", function(d){
  123. d.innerRadius = 0;
  124. d.outerRadius = r;
  125. d.angle = (d.startAngle + d.endAngle)/2;
  126. return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
  127. })
  128. .attr("text-anchor", "end")
  129. .text( function(d, i) {
  130. return data[i].label;
  131. });
  132.  
  133. container.on("click", spin);
  134.  
  135.  
  136. function spin(d){
  137.  
  138.  
  139. var ps = 360/data.length,
  140. pieslice = Math.round(1440/data.length),
  141. rng = Math.floor((Math.random() * 1440) + 360);
  142.  
  143. rotation = (Math.round(rng / ps) * ps);
  144.  
  145. picked = Math.round(data.length - (rotation % 360)/ps);
  146. picked = picked >= data.length ? (picked % data.length) : picked;
  147.  
  148.  
  149.  
  150.  
  151. rotation += 90 - Math.round(ps/2);
  152.  
  153. vis.transition()
  154. .duration(3000)
  155. .attrTween("transform", rotTween)
  156. .each("end", function(){
  157.  
  158. //mark question as seen
  159. /* d3.select(".slice:nth-child(" + (picked + 1) + ") path")
  160. .attr("fill", "#111");*/
  161.  
  162. //populate question
  163. d3.select("#question h1")
  164. .text(data[picked].label);
  165.  
  166. oldrotation = rotation;
  167. });
  168. }
  169.  
  170. //make arrow
  171. svg.append("g")
  172. .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
  173. .append("path")
  174. .attr("d", "M-" + (r*.30) + ",0L0," + (r*.10) + "L0,-" + (r*.05) + "Z")
  175. .style({"fill":"white"});
  176.  
  177. //draw spin circle
  178. container.append("circle")
  179. .attr("cx", 0)
  180. .attr("cy", 0)
  181. .attr("r", 10)
  182. .style({"fill":"white","cursor":"pointer"});
  183.  
  184. //spin text
  185. /* container.append("text")
  186. .attr("x", 0)
  187. .attr("y", 15)
  188. .attr("text-anchor", "middle")
  189. .text("SPIN")
  190. .style({"font-weight":"bold", "font-size":"30px"});*/
  191.  
  192.  
  193. function rotTween(to) {
  194. var i = d3.interpolate(oldrotation % 360, rotation);
  195. return function(t) {
  196. return "rotate(" + i(t) + ")";
  197. };
  198. }
  199.  
  200.  
  201. function getRandomNumbers(){
  202. var array = new Uint16Array(1000);
  203. var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
  204.  
  205. if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
  206. window.crypto.getRandomValues(array);
  207. console.log("works");
  208. } else {
  209. //no support for crypto, get crappy random numbers
  210. for(var i=0; i < 1000; i++){
  211. array[i] = Math.floor(Math.random() * 100000) + 1;
  212. }
  213. }
  214.  
  215. return array;
  216. }
  217.  
  218. </script>
  219. </body>
  220. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement