活动班级未重置

Question

我创建了一个活动的班级，以便当用户选择答案选项时，答案选项的背景色将发生变化，并且还为我提供他们所选择的按钮的值。但是我遇到的问题是，当他们获得正确答案时，第二个问题来了，但现在它不让您提交答案。活动班级停留在最后选择的答案上，不允许您选择其他答案。如果我的解释太混乱，我创建了一个GIF来向您显示问题。

GIF-https://gyazo.com/ffcea635e246d50f222e3012e5ff58c6

代码：

<ion-view title="Quiz Question" hide-nav-bar="true">
  <ion-content padding="false" class=" manual-remove-top-padding" scroll="false">
    <div class="spacer" style="width: 1024px; height: 55px;"></div>
    <div id="quizContainer">
        <div>
          <p class="question-heading" id="question-heading">

          </p>
          <!--
          <h2 class="question">The 13 American colonies belonged to what European power?</h2>
          -->
          <h2 class="question" id="question"></h2>
        </div>
        <div class="spacer" style="width: 1024px; height: 17px;"></div>
       <div class="answer-div">

            <button style="font-weight:600;font-size:28px;" id="a_one" value="" class="button button-royal button-large button-outline answer-choices"></button>
          <button style="font-weight:600;font-size:28px;border-radius:5px 5px 5px 5px;" id="a_two" value="" class="button button-royal button-large button-outline answer-choices"></button>
          <div class="spacer" style="width: 614.391px; height: 28px;"></div>
          <button style="font-weight:600;font-size:28px;" id="a_three" value="" class="button button-royal button-large button-outline answer-choices"></button>
          <button style="font-weight:600;font-size:28px;" id="a_four" value="" class="button button-royal button-large button-outline answer-choices"></button>
          <div class="spacer" style="width: 614.391px; height: 29px;"></div>
          <button style="font-weight:500;font-size:28px;" id="submit" class="button button-royal button-large button-block submit">SUBMIT</button>
          <button style="font-weight:500;font-size:28px;" id="submit-fake" class="button button-royal button-large button-block submit active"></button>

       </div>


    </div>

    <div class="spacer" style="width: 1024px; height: 29px;"></div>
    <div class="footer-div">
      <div class="spacer" style="width: 1024px; height: 25px;"></div>
      <div>
        <img src="https://s3.amazonaws.com/ionic-io-static/phJ5mlgnSieM31j8rIFh_Quiz_Icon01.svg" style="display: block; width: 4%; height: 4%; margin-left: auto; margin-right: auto;">
      </div>
      <h1 style="color:#FAD75F;text-align:center;" class="h1">QUIZ</h1>
      <h1 style="color:#FFFFFF;text-align:center;" class="h4">SKILL LEVEL: Easy</h1>
      <button style="font-weight:500;" class="button button-light button-outline icon ion-android-home home-button"></button>
      <button style="font-weight:500;color:#FFFFFF;font-size:19px;" class="button button-light button-outline anotherquiz-button">SELECT ANOTHER QUIZ</button>
      <button style="font-weight:500;color:#FAD75F;font-size:22px;" class="button button-light button-outline icon-right ion-android-arrow-dropright nextq-button">NEXT QUESTION</button>
    </div>
  </ion-content>
</ion-view>

JavaScript

function ($scope, $stateParams) {

   var currentQuestion = 0;
   var totalQuestion = questions.length;

   var container = document.getElementById('quizContainer');
   var questionEl =  document.getElementById('question');
   var ans1 = document.getElementById('a_one');
   var ans2 = document.getElementById('a_two');
   var ans3 = document.getElementById('a_three');
   var ans4 = document.getElementById('a_four');
   var submit = document.getElementById('submit');
   var questionHeader = document.getElementById('question-heading');
   function loadQuestion(questionIndex){

       var q = questions[questionIndex];
       questionEl.textContent = q.question;// grabbing the first question in the object
       ans1.textContent = q.answer1;
       ans2.textContent = q.answer2;
       ans3.textContent = q.answer3;
       ans4.textContent = q.answer4;
       // set answer choices to values
       ans1.value = q.answer1;
       ans2.value = q.answer2;
       ans3.value = q.answer3;
       ans4.value = q.answer4;
       questionHeader.textContent = questionIndex + 1 + '/10';

   }

   // Add active class to the current button (highlight it)
    var btns = document.getElementsByClassName("answer-choices");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
        answerChoosen = this.value;
      });
    }


    submit.onclick = function() {

        if(questions[currentQuestion].correctAnswer == answerChoosen){

            alert("correct");
        }
        currentQuestion++;

        loadQuestion(currentQuestion);
    }


    loadQuestion(currentQuestion);

    }

问题列表

var questions = [{
    //1st object
    "question": "The first mechanical computer designed by Charles Babbage was called ?",
    "answer1": "Abacus",
    "answer2": "Analytical Engine",
    "answer3": "Calculator",
    "answer4": "Processor",
    "correctAnswer": "Calculator"
}, 
//2nd object
{
    "question": "Which of the following is the most powerful type of computer ?",
    "answer1": "Super-micro",
    "answer2": "Super conductor",
    "answer3": "Super computer",
    "answer4": "Megaframe",
    "correctAnswer": "Super computer"
}];