If/Then Javascript to Display HTML Code

Question

I have some html5 and javascript code to create a spinning roulette wheel. It is split up into 14 outcomes. My question is, how can I get some unique HTML code to display per each outcome of the wheel. For example, if the wheel lands on Business, some text will appear below the wheel that has information on Business.

Here is my HTML code and below it is a link to a working example:

<!--[if IE]><script type="text/javascript" src="/sites/default/files/1010/source/excanvas.js"></script><![endif]-->
<input type="button" value="spin" onclick="spin();" style="float: left;" />
<canvas id="wheelcanvas" width="800" height="750"></canvas>
<script type="application/javascript">
  var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E", "#CC0071", "#F80120",
               "#F35B20", "#FB9A00", "#FFCC00", "#FEF200", "#B2DF00", "#5C8300"];
  var classes = ["Business", "Office Education", "Continuing Care Assistant", "Practical Nursing",
                     "Primary Care Paramedic", "Early Childhood Education", "Cooking", "Electrician",
                     "Heavy Equipment Operator", "Industrial Mechanic - Millwright", "Plumbing & Pipefitting", "Truck Driver Training", "Welding", "Power Engineering"];

  var startAngle = 0;
  var arc = Math.PI / 7;
  var spinTimeout = null;

  var spinArcStart = 10;
  var spinTime = 0;
  var spinTimeTotal = 0;

  var ctx;

  function draw() {
    drawRouletteWheel();
  }

  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 300;
      var textRadius = 260;
      var insideRadius = 100;

      ctx = canvas.getContext("2d");
      ctx.clearRect(5,0,1000,1000);


      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;

      ctx.font = 'bold 10px sans-serif';

      for(var i = 0; i < 14; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = colors[i];

        ctx.beginPath();
        ctx.arc(400, 400, outsideRadius, angle, angle + arc, false);
        ctx.arc(400, 400, insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();

        ctx.save();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";
        ctx.fillStyle = "black";
        ctx.translate(400 + Math.cos(angle + arc / 2) * textRadius, 400 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = classes[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      } 

      //Arrow
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(400 - 4, 400 - (outsideRadius + 5));
      ctx.lineTo(400 + 4, 400 - (outsideRadius + 5));
      ctx.lineTo(400 + 4, 400 - (outsideRadius - 5));
      ctx.lineTo(400 + 9, 400 - (outsideRadius - 5));
      ctx.lineTo(400 + 0, 400 - (outsideRadius - 13));
      ctx.lineTo(400 - 9, 400 - (outsideRadius - 5));
      ctx.lineTo(400 - 4, 400 - (outsideRadius - 5));
      ctx.lineTo(400 - 4, 400 - (outsideRadius + 5));
      ctx.fill();
    }
  }

  function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * 1000;
    rotateWheel();
  }

  function rotateWheel() {
    spinTime += 30;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
  }

  function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px sans-serif';
    var text = classes[index]
    ctx.fillText(text, 400 - ctx.measureText(text).width / 2, 400 + 10);
    ctx.restore();
    document.getElementById('wheelResult').innerHTML = 'Test' + text;
  }

  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }

  draw();
</script>

<p id="wheelResult"></p>

http://www.ctrc.sk.ca/wheel.html

Answer 1

There are a couple of ways to do it but this is the way I would do it. You could create a div tag with the css style of display:none and then set it with the info desired and hide and show it as needed.

Example:

<script>
    var htmlData = ['<h1>Business</h1><br><span>What is Business?</span><br>...', ...];
    ....
    function spin()
    {
        //Hide description box.
        document.getElementById('idDescriptionBox').style.display = 'none';

        spinAngleStart = Math.random() * 10 + 10;
        ....
    }
    ....
    function stopRotateWheel()
    {
        ....
        //Set description and display it.
        var descriptionBox = document.getElementById('idDescriptionBox');
        descriptionBox.innerHTML = htmlData[index];
        descriptionBox.style.display = 'block';
    }
    ....
</script>
<div id="idDescriptionBox" style="display:none;">
    <!--Description info in here-->
    ....
</div>