Question

任何人都可以帮助我。我对Angularjs app Typing Tutor的逻辑感到有点困惑。我想要一个逻辑，如何从文本框测试用户输入并显示红色的错误。像这样......

我希望当用户在文本框中输入文本时，这些文本应该与数组名称typingData的数据匹配。

如果两个元素都不匹配则显示文本的红色背景颜色........ 就像有一个我想要的例子......

http://crazy2be.github.io/dvorak-typing-tutor/

enter code here

  <!DOCTYPE html>
  <html ng-app="myApp">
  <head>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <style>
  p{
  margin-left: 200px;
  width: 500px;
  height: 200px;
  border : 2px dashed red;
  background-color: lightblue;
  border-collapse: collapse;
  }
  #inputText{
  width: 500px;
    height: 50px auto;
  }
  </style>
  </head>

  <body  ng-controller="myController"> 

  <div> 
  <div> 
    <p> 
    <span ng-repeat="x in typingData"> &nbsp{{x}}
    </span> 
    </p> 
    <div style="margin-left: 200px;">
        <input type="text" ng-model="inputText" ng-keydown="test()" id="inputText" >
    </div> 
   </div> 
   </div> 





   <script>
   var app= angular.module('myApp',[]);
   app.controller('myController',function($scope) {     
  $scope.typingData=['tl','sg','re','wf',' kr','up'                 //'few','above','water','answer','cut','look','out','begin','paper'
   ];
   $scope.getData = [];
    $scope.checkText = function(){
    for(i=0;i<$scope.typingData.length;i++){
        //console.log($scope.typingData[i].split(""));
    }
     }
     $scope.test = function(){
     $scope.getData.push($scope.inputText);
     console.log($scope.getData);


     }
    /*$scope.$watch('inputText',function(newValue,oldValue){
    if(newValue !== oldValue){
    console.log(newValue);
    //console.log($scope.inputText);

    }
    });*/

    });

Answer 1

是的，我找到了我的打字导师应用程序的逻辑。它的工作正常......

enter code here

     <!DOCTYPE html>
     <html ng-app="myApp">
     <head>

      <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">        </script>
     <style>
      p{
       margin-left: 200px;
       width: 650px;
       height: 300px;
       border : 2px dashed white;
       background-color: black;
       color:white;
       font-size:30px;
       border-collapse: collapse;
        }
       #inputText{
        width: 650px;
        height: 100px;
        font-size: 25px;
        }
        .result{
        border: 2px dashed white;
        margin-left: 910px;
        margin-top: -339px;
        width: 278px;
        font-size: 25px;
        height: auto;
        float: right;
        background-color:black;
        color:white;
        margin-right: 51px;
        }
         .time{
            border: 2px dashed white;
          background-color: black;
          float: left;
          width: 100px;
          height: 100px;
          border-radius: 25px;
          margin-top: -343px;
          margin-left: 29px;
          text-align:center;
          font-size:30px;
          color:white;
          }
          </style>
          </head>

          <body  ng-controller="myController"> 

           <div> 
            <div> 
            <p> 
            <span ng-repeat="x in typingData"> &nbsp{{x}}
            </span> 
            </p> 

            <div style="margin-left: 200px;">

            <input type="text" ng-init="count = 0" ng-keypress="check($event)" id="inputText" ng-model="getText">
            <span  ng-if="event.keyCode == 32">{{check()}}</span>

            </div> 
            </div> 
            <div class="result">
                <ul> Your speed is :{{speed}} <br/>number of Errors: {{error}}
            <li ng-repeat="x in errorData">{{x}}</li></ul>
            </div>
             <div class="time">{{time}}</div>
             </div> 





           <script>
           var app= angular.module('myApp',[]);
                                 app.controller('myController',function($scope,$interval,$location) {     
          $scope.typingData=["page","white","talk","book","follow","men","only","can","that","it","people","carry","much","kind","hear","start","begin","daily","work","and","the","lead","performance","no","place","for","him","even","most","incompetent","firm","you","could","choose","dozen","donkeys","on","they","hangling","over","a","hundred","of","pound","finance","revolution","deficit","in","your","sky","rocket"];
            $scope.time=0;
            $scope.tempData = [];
            $scope.errorData = [];
              $scope.timer = function(){
            $scope.time++;


                 $scope.speed=Math.floor($scope.word/$scope.time*60);

                if($scope.time == 30){    


                 if(confirm('Time Over')){
                  window.location.reload();
                 $scope.time = 0;  

                $scope.speed = '';
                  $scope.getText = '';

              }
                 else{
                    window.location.reload();
                   }
                 }
                   };

                  $interval(function(){$scope.timer();},1000);



               $scope.error = 0;
               $scope.check = function($event){
              var keyCode = $event.keyCode;
                    if(keyCode == 32){




                 var res =$scope.getText.split(" ");
                 $scope.word = res.length;

                 for(var i = $scope.count;i < res.length;i++){
                    if($scope.typingData[i] == res[i]){


                  }else{
                    $scope.errorData[i] = res[i];
                    $scope.errorData;
                    $scope.error++;


                        }
                        res.shift();
                          }


                              $scope.count++;


                        } 
                        };



                          });
                         </script>
                          </body>
                              </html>

我正在努力让它更具互动性......

想要在Angularjs中输入导师的逻辑

1 个答案: