unserver-unify/src/app/directive/exam/typingtest.component.js

angular.module('bamboo.common').component('typingTestCard', {
  templateUrl: 'app/directive/exam/typingtest.component.html',
  bindings: {
    question: '<',
    result: '=',
    updatefunc: '&'
  },
  controller:  function($interval, $scope) {
    var self = this;
    self.$onInit = function() {
      self.divTxt = self.question.content;
      self.taken = self.question.taken;
      self.timeLimit = self.question.timeLimit * 60;
      self.autoRun = null;
      self.time = 0;
      self.numAll = 0;
      self.txt = "";
      initText();
    };
    self.changeText = function() {
      clearText();
      var txt = self.txt;
      console.log(self.txt);
      txt = txt.replace(/\r\n/g, '\n');
      var divTxt = self.divTxt;
      divTxt = divTxt.replace(/  /g, ' ');
      divTxt = divTxt.replace(/   /g, ' ');
      divTxt = divTxt.replace(/\r/g, '');
      divTxt = divTxt.replace(/\n/g, '');
      divTxt = divTxt.replace(/&nbsp;/g, ' ');
      divTxt = divTxt.replace(/<BR>/g, '\n');
      divTxt = divTxt.replace(/<br>/g, '\n');
      var top = 18;
      var left = 0;
      var error = 0;
      var lost = 0;
      var spanObj = null;
      for (var i = 0; i < divTxt.length; i++) {
        if (i >= txt.length + lost) {
          break;
        }
        var color = 'green';
        if (txt.charAt(i - lost) != divTxt.charAt(i)) {
          error++;
          color = 'red';
        }
        if (spanObj && spanObj.color != color) {
          addSpan(spanObj);
          spanObj = null;
        }
        if (divTxt.charAt(i) == '\n' || divTxt.charAt(i) == '\r') {
          if (divTxt.charAt(i) == '\n') {
            top += 60;
            left = 0;
            addSpan(spanObj);
            spanObj = null;
          }
          continue;
        }
        var charWidth = divTxt.charCodeAt(i) > 255 ? 24 : 13;
        if (!spanObj) {
          spanObj = new Object();
          spanObj.top = top;
          spanObj.left = left;
          spanObj.color = color;
          spanObj.height = 24;
          spanObj.width = charWidth;
        } else {
          spanObj.width += charWidth;
        }
        left += charWidth;
        if (left > 780 - charWidth) {
          top += 60;
          left = 0;
          addSpan(spanObj);
          spanObj = null;
          if (divTxt.charAt(i + 1) == ' ' || divTxt.charAt(i + 1) == '\n') {
            i++;
            lost++;
          }
        }
      }
      if (spanObj) {
        addSpan(spanObj);
        spanObj = null;
      }
      console.log(lost);
      self.spanError = error;
      self.spanNum = txt.length;
      if (txt.length != 0) {
        self.spanRate = Math.round(100 - (error / txt.length) * 100) + '%';
      } else {
        self.spanRate = 0 + '%';
      }
      console.log(error, txt.length);
      self.spanSpeed = Math.round(txt.length / self.time * 60) + '字/分';
    }

    function addSpan(spanObj) {
      if (!spanObj) {
        return;
      }
      var span = document.createElement('span');
      span.style.position = 'absolute';
      span.style.width = spanObj.width + 'px';
      span.style.height = spanObj.height + 'px';
      span.style.top = spanObj.top + 'px';
      span.style.left = spanObj.left + 'px';
      span.style.zIndex = 1;
      span.style.backgroundColor = spanObj.color;
      getObj('divMain').appendChild(span);
    }

    function setBarData(spanError, spanTime, spanRate, spanSpeed, spanNum, txtInput, spanAllNum) {
      spanAllNum && 　(self.spanAllNum = spanAllNum);
      self.spanError = spanError;
      self.spanTime = spanTime;
      self.spanRate = spanRate;
      self.spanSpeed = spanSpeed;
      self.spanNum = spanNum;
      self.txtInput = txtInput;
    }

    function initText() {
      console.log(self.divTxt);
      var txt = self.divTxt;
      txt = txt.replace(/\r/g, '');
      txt = txt.replace(/–/g, '-');
      txt = txt.replace(/\n/g, '<br>');
      txt = txt.replace(/  /g, ' ');
      txt = txt.replace(/   /g, ' ');
      self.DivText = txt;
      self.divTxt = txt;
      self.numAll = txt.length;
      self.spanSpeed = 0;
      clearText();
      console.log(txt.length);
      setBarData(0, 0, 0, 0, 0, 0, txt.length);
      self.txt = "";
      self.disabled = true;
      if (self.autoRun) {
        $interval.cancel(self.autoRun);
      }
    }

    function clearText() {
      var divMain = getObj('divMain');
      var spans = divMain.getElementsByTagName('span');
      while (spans.length > 0) {
        divMain.removeChild(spans[0]);
      }
    }
    self.start = function() {
      if (self.autoRun) {
        $interval.cancel(self.autoRun);
      }
      self.started = true;
      self.startTimer();
      var txtInput = getObj('txtInput');
      clearText();
      txtInput.style.height = Math.max(500, divText.offsetHeight) + 'px';
      self.disabled = false;
      txtInput.focus();
      self.numAll = 0;
      setBarData(0, 0, 0, 0, 0, 0);
      self.numError = 0;
      self.numInput = 0;
      self.time = 0;
      self.autoRun = $interval(timer, 1000);
      //}
    }
    self.stop = function() {
      self.started = false;
      self.disabled = true;
      self.taken = true;
      self.stopTimer();
      $interval.cancel(self.autoRun);
      calculateScore();
    }

    function calculateScore() {
      if (self.spanAllNum > 0) {
        var score = ((self.spanNum - self.spanError) / self.spanAllNum) * self.question.score;
        var correctRate = (self.spanNum - self.spanError) / self.spanAllNum;
      }
      console.log(self.question);
      self.updatefunc({
        obj: {
          getScore: score || 0,
          result: self.txt,
          correctRate: correctRate || 0
        }
      });
    }

    function timer() {
      self.time++;
      var str = '';
      var fen = Math.floor(self.time / 60);
      if (fen > 0) {
        str += fen + '分';
      }
      self.spanTime = str + (self.time - fen * 60) + '秒';
      var txt = self.txt;
      txt = txt.replace(/\r\n/g, '\n');
      self.spanSpeed = Math.round(txt.length / self.time * 60) + '字/分';
    }

    function getObj(id) {
      return document.getElementById(id);
    }
    self.focus = function(id) {
      console.log(id);
      getObj(id).focus();
    }
    self.timeFinish = function() {
      console.log("--stop---");
      self.stop();
    }
    self.startTimer = function() {
      $scope.$broadcast('timer-start');
    };
    self.stopTimer = function() {
      $scope.$broadcast('timer-stop');
    };
  }
});