Question

我刚开始使用Angular并开设了一个创建测验的在线课程

部分应用程序放置一行标记，显示测验中有多少问题，并应根据回答的问题以及上一个问题是否得到正确回答而改变颜色_

我已按照课程中的说明进行操作，一切顺利，直到将最后两条指令添加到应用程序的进度部分_从图像中可以看出，所有标记都已设置为“不正确”尽管还没有提出任何问题_

compiled image showing markers all red and the 'incorrect' class added to each instance of 'quizQuestion'

我在html file =

中添加的代码

<!-- Progress Bar -->
 <div class="progress">
  <div class="
   {{ ($index === activeQuestion) ? 'on' : 'off' }}
   {{ (quizQuestion.questionState === 'answered') ? 'answered' : 'unanswered' }}
   {{ (quizQuestion.correctness === 'correct') ? 'correct' : 'incorrect' }}
   " ng-repeat="quizQuestion in quizQuestions">
  </div>
</div><!-- /.progress -->

我的js文件代码是

(function() {

   var app = angular.module('ifcQuiz', []);

   app.controller('QuizController', ['$scope', '$http', '$sce', function($scope, $http, $sce){

     $scope.score = 0;
     $scope.activeQuestion = -1;
     $scope.activeQuestionAnswered = 0;
     $scope.percentage = 0;

     $http.get('js/JSON/QuizData.json').then(function(quizData){
       $scope.quizQuestions = quizData.data;
       $scope.totalQuestions = $scope.quizQuestions.length;
     });

     $scope.selectAnswer = function(questionIndex,answerIndex){

       var questionState = $scope.quizQuestions[questionIndex].questionState;

       if( questionState != 'answered' ){
         $scope.quizQuestions[questionIndex].selectedAnswer = answerIndex;
         var correctAnswer = $scope.quizQuestions[questionIndex].correct;
         $scope.quizQuestions[questionIndex].correctAnswer = correctAnswer;

            if( answerIndex === correctAnswer ){
               $scope.quizQuestions[questionIndex].correctness = 'correct';
               $scope.score += 1;
            }else{
               $scope.quizQuestions[questionIndex].correctness = 'incorrect';    
            }

            $scope.quizQuestions[questionIndex].questionState = 'answered';
         }
       }

       $scope.isSelected = function(questionIndex,answerIndex){
          return $scope.quizQuestions[questionIndex].selectedAnswer === answerIndex;
       }

       $scope.isCorrect = function(questionIndex,answerIndex){
          return $scope.quizQuestions[questionIndex].correctAnswer === answerIndex;
       }

       $scope.selectContinue = function(){
          return  $scope.activeQuestion += 1;
       }


  }]);

})();

进度部分的CSS如下

.progress div {
    background-color: rgba(255,255,255, 0.2); 
    border-radius: 50%;
    display: inline-block;
    height: 1rem;
    margin-right: 1.5rem;
    position: relative;
    transition: background-color 1s;
    width: 1rem;
}

.progress div.on { background-color: rgba(244,176,66, 0.5);}

.progress div.correct { background-color: rgba(66,244,69, 0.5);}

.progress div.incorrect { background-color: rgba(244,66,69, 0.5);}

我应该注意，当我回答问题时，应用标记会根据正确或不正确的方式变为绿色或红色_但它们都是红色而不是中性，并且它们不会显示从一个问题到下一个问题的进度_ < / p>

我真的很感激有关如何解决此问题的任何建议_并提前感谢

事件发生前的角度设定等级

0 个答案: