.elementor-kit-1316{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#000000;--e-global-color-text:#FFFFFF;--e-global-color-2e6c5c0:#9FCE00;--e-global-color-dc85ab6:#FF7400;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#000000;}.elementor-kit-1316 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Number Spinner</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-color: black;
    }

    #chart-container {
      width: 80%;
      max-width: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 450px; /* Adjust this value to lower the spinner */
    }

    #question {
      position: absolute;
      top: 20px;
      width: 100%;
      text-align: center;
      color: white;
    }

    #question h1 {
      font-size: 50px;
      font-weight: bold;
      margin: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #result {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      color: white;
      font-size: 30px;
    }

    #buttons {
      position: absolute;
      bottom: 60px;
      width: 100%;
      text-align: center;
    }

    .btn {
      background-color: blue;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 1.5em;
      cursor: pointer;
      border-radius: 5px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div id="question"><h1></h1></div>
  <div id="chart-container">
    <div id="chart"></div>
  </div>
  <div id="buttons">
    <button class="btn" id="spin-button">Spin the wheel</button>
    <button class="btn" id="reset-button">Reset</button>
  </div>
  <div id="result"></div>

  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    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 = Array.from({ length: 24 }, (_, i) => ({
      label: (i + 1).toString(),
      value: i + 1,
      question: `Question for ${i + 1}`
    }));

    var svg = d3.select('#chart')
      .append("svg")
      .data([data])
      .attr("width", "100%")
      .attr("height", "100%")
      .attr("viewBox", `0 0 ${w + padding.left + padding.right} ${h + padding.top + padding.bottom}`)
      .attr("preserveAspectRatio", "xMidYMid meet");

    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; });

    var arc = d3.svg.arc().outerRadius(r);

    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); });

    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);

    d3.select("#spin-button").on("click", spin);
    d3.select("#reset-button").on("click", reset);

    function spin(d) {
      container.on("click", null);
      d3.select("#spin-button").attr("disabled", true);

      if (oldpick.length == data.length) {
        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 () {
          d3.select(".slice:nth-child(" + ((picked + data.length - 1) % data.length + 1) + ") path").style("fill", "grey");

          d3.select("#question h1").text(data[picked].question);
          d3.select("#result").text("Selected Number: " + data[picked].label);

          oldrotation = rotation;

          container.on("click", spin);
          d3.select("#spin-button").attr("disabled", null);
        });
    }

    function reset() {
      oldpick = [];
      d3.selectAll(".slice path").style("fill", function (d, i) { return color(i); });
      d3.select("#question h1").text("");
      d3.select("#result").text("");
    }

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

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

    container.append("text")
      .attr("x", 0)
      .attr("y", 15)
      .attr("text-anchor", "middle")
      .text("SPIN")
      .style({ "font-weight": "bold", "font-size": "30px" });

    function rotTween(to) {
      var i = d3.interpolate(oldrotation % 360, rotation);
      return function (t) {
        return "rotate(" + i(t) + ")";
      };
    }
  </script>
</body>
</html>/* End custom CSS */