Math exercise for kids - division

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    circle {
      stroke: #000;
      fill: #ddd;
      fill-opacity: .8;
    }
    
    text {
      font-size: 32px;
    }
    
    div.top {
      position: relative;
    }

div#answer {
      position: absolute;
      left: 0px;
    }
    
    div.info {
      margin-left: 650px;
    }    
  </style>
  <script src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
  <div class="top">
    <div id="answer"></div>
    <div class="info">
      <select id ="sp" name="Sprache" onchange="setLanguage(this.value, true);">
        <option value="german" selected>Deutsch</option>
        <option value="english">English</option>
      </select>
      <select id ="ro" name="Rechnenoperationen" onchange="newQuestion(this.value); displayAnswers();">
        <option value="+" selected>Addition</option>
        <option value="-">Subtraktion</option>
        <option value="*">Multiplikation</option>
        <option value=":">Division</option>
      </select>
      <label><input type="checkbox" id="cbox1" value="first_checkbox" onchange="checkTime()">Zeitmessung (10 Fragen)</label>
      <div id="feedback"><h1></h1></div>
      <div id="result"></div>
      <div class="count"></div>
    </div>  
  </div>

var data; 
    var value1, value2, result;
    var positiveComment, negativeComment, infoComment, resultComment; 
    var counter = 0; 
    var myTimer;    
      
    
    var answerSVG = d3.select("#answer")
      .append("svg")
      .attr("width", width)
      .attr("height", 750);   
        
    reset();

if (updateResult){
        var newResultComment = d3.select("div#result").html().split(":");
        d3.select("div#result").html(resultComment + ":" + newResultComment[1]); 
      }      
    }
    
    function reactUponMouseOver(d, i) {
      var sel = d3.selectAll("text.number").filter( function (da) { return da === d;});
      var translationXY = d3.transform(d3.select(this).attr("transform"));
      sel.transition()
         .duration(750)
         .attr("x", width/2 + 5 - translationXY.translate[0])
         .attr("y", 30 - translationXY.translate[1])
         .style("text-anchor", "start"); 
    }
    
    function reactUponMouseOut(d, i) {
      var sel = d3.selectAll("text.number").filter( function (da) { return da === d;});
      sel.transition()
         .duration(750)
         .ease("bounce")
         .attr("x", function(d) { if (d > 9) { return cx - fontSize/2; } else {return cx - fontSize*0.25;}})
         .attr("y", cy - fontSize*0.7/2);
    }
    
    function evaluate(d, i) {
      var guess;
      totalQuestions++;  
      
      if (totalQuestions === 10) {
        clearInterval(myTimer);
      }
      
      var sel = d3.selectAll("text.number").filter( function (da) { return da === d;});
      sel.each(function (d) {guess = d;});
      
      var feedback = d3.select("#feedback")
        feedback.select("h1").remove();
                 
      if (guess === result) {
        totalCorrect++; 
        d3.select("rect.highlight")
          .style("opacity", 0.5);
       
        feedback.append("h1")
        .attr("class", "feedback")
        .html(function() { return positiveComment[getRandomInteger(0, positiveComment.length-1)]})
        .transition()
        .duration(2000)
        .each("end", newQuestion);
        
        d3.select("div#result").html(resultComment + ": " + totalCorrect + "/" + totalQuestions);
      }
      
      else {
        var feedback = d3.select("#feedback")
        feedback.append("h1")
        .html(function() { return negativeComment[getRandomInteger(0, negativeComment.length-1)]});
        d3.selectAll("circle")
          .filter( function (da) { return da === d;})
          .style("fill", "red");
          
        reactUponMouseOut(d, i);
        d3.select("div#result").html(resultComment + ": " + totalCorrect + "/" + totalQuestions);
      }     
    }
    
    function getRandomInteger(lower, upper) {
      if (arguments.length === 1) {
        upper = lower;
        lower = 0;
      }
      return Math.floor(Math.random() * (upper - lower)) + lower;
    }
    
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js