在 node/angularjs 应用程序中得到不想要的结果

Question

我正在制作一个 MEAN 堆栈应用程序。这是一个在线实时测试应用程序，用户必须面对一个有 4 个选项的多项选择题，并且必须选择一个。 现在，我遇到的问题是，假设有 2 个问题：
一、什么是1+0？
一个。 1
湾。 3
C。 4
d。 5

这个问题的答案是索引 1，答案也是 1。所以我的控制器将 1 发送到提交按钮（它发送的是索引，而不是实际的答案）。
再问一个问题。什么是3+4？
一个。 7
湾。 8
C。 9
d。 10

这里，控制器将 1 发送到数据库，因为用户标记的正确答案在第一个索引处。

我希望它发送 7。
这是我的控制器

liveController.js

examApp.controller('liveController', ['$scope', '$filter', '$http', '$location', '$routeParams', 'queryService', 'authenticationService', function($scope, $filter, $http, $location, $routeParams, queryService, authenticationService) {
  var main = this;
  var totalnoofQuestions;
  var user;
  main.questionsforTime = [];
  this.getsecurityQuestion = function() {
    var data = {
      _id: $routeParams.userId
    }
    queryService.getsecurityQuest(data)
      .then(function successCallback(response) {
        if (response.data.error === true) {
          alert(response.data.message);
        } else {
          var userId;
          var data = response.data.data;
          main.user = data.name;
          main.userId = data._id;
          authenticationService.setToken(response.data.token);
        }
      }, function errorCallback(response) {
        alert("There was a problem.");
      })
  }

  this.getsecurityQuestion();
  this.logged = function() {
    main.username = queryService.userName;
    if (queryService.log == 1 || queryService.userId !== 'undefined') {
      return 1;
    } else {
      $location.path('/');
    }
  }
  this.logged();
  this.userId = $routeParams.userId;
  main.heading = "Welcome To Exam App";
  $('.thisismodalforlivetestwarning').modal('show');
  $(document).on('click', '#returntotaketest', function() {
    $('.thisismodalforlivetestwarning').modal('hide');
    location.replace("#/taketheTest/" + main.userId);
  })

  this.getasingleTest = function() {
    var singletestId = $routeParams.testId;
    queryService.getasingleTest(singletestId)
      .then(function successCallback(response) {
        if (response.data.error === true) {
          alert(response.data.message);
          window.location.href = "#/taketheTest/" + main.userId;
        } else {
          if (response.data.data.questions.length == 0) {
            $location.path("/taketheTest/" + main.userId);
            alert("No questions present.");
          } else {
            main.totalnoofQuestions = response.data.data.questions.length;
            main.questionsforTime.push(response.data.data.questions.length);
            main.testHeading = "Test topic is " + response.data.data.testName;
            main.singletestArray = response.data.data.questions;
            main.time = response.data.data.testDuration;
          }
        }
      }, function errorCallback(response) {
        alert("There was a problem.");
      })
  }
  this.getasingleTest();
  var totalSeconds = 300;
  var minutes = parseInt(totalSeconds / 60);
  var seconds = parseInt(totalSeconds % 60);
  this.theTime = function() {
    totalSeconds = totalSeconds - 1;
    minutes = parseInt(totalSeconds / 60);
    seconds = parseInt(totalSeconds % 60);
    main.timetakeninTest = (300 - totalSeconds);
    document.getElementById('test-time-left').innerHTML = 'Time Left: ' + minutes + ' minutes ' + seconds + ' seconds';
    if (totalSeconds <= 0) {
      clearTimeout(main.counttime);
      main.timetakeninTest = 300;
      alert("Time Is Up!!");
      container.style.display = 'none';
      var testattemptData = {
        testgivenBy: main.user + " " + $routeParams.userId,
        testId: $routeParams.testId
      }
      queryService.testAttemptedBy(testattemptData)
        .then(function successCallback(response) {}, function errorCallback(response) {})

      var data = {
        userid: $routeParams.userId,
        testid: $routeParams.testId,
        score: score,
        timeTaken: main.timetakeninTest,
        totalCorrect: (score / 10),
        totalIncorrect: (10 - (score / 10))
      }
      queryService.submitTest(data)
        .then(function successCallback(response) {
          if (response.data.error === true) {
            alert(response.data.message);
          } else {
            main.performanceUserID = response.data.data.user;
            main.answerscorrect = response.data.data.totalCorrect;
            main.answerswrong = response.data.data.totalIncorrect;
            main.madeScore = response.data.data.score;
            main.timeTaken = response.data.data.timeTaken;
            $('.thisismodalforUserTestPerformance').modal('show');
          }
        }, function errorCallback(response) {
          alert("There was a problem.");
        })
    }
  }

  var currentQuestion = 0;
  var score = 0;
  var totalQuestionAsked = 0;
  var container = document.getElementById('quizContainer');
  var questionEl = document.getElementById('question');
  var opt1 = document.getElementById('opt1');
  var opt2 = document.getElementById('opt2');
  var opt3 = document.getElementById('opt3');
  var opt4 = document.getElementById('opt4');
  var nextButton = document.getElementById('nextButton');
  var resultCont = document.getElementById('result');
  this.loadQuestion = function(questionIndex) {
    if (questionIndex == 0) {
      totalQuestionAsked = main.totalnoofQuestions;
      $('.thisismodalforlivetestwarning').modal('hide');
      main.counttime = setInterval(this.theTime, 1000);
    }
    var q = main.singletestArray[questionIndex];
    questionEl.textContent = (questionIndex + 1) + '.' + q.question;
    opt1.textContent = q.optionA;
    opt2.textContent = q.optionB;
    opt3.textContent = q.optionC;
    opt4.textContent = q.optionD;
  };


  this.nextQuestion = function() {
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (!selectedOption) {
      alert("Select An Answer First.");
      return;
    }
    var answer = selectedOption.value; //This line
    console.log("this is problem " + answer);
    if (main.singletestArray[currentQuestion].answer == answer) {
      score += 10;
    }
    var data = {
      userid: $routeParams.userId,
      testid: $routeParams.testId,
      questionid: main.singletestArray[currentQuestion]._id,
      userAnswer: answer,
      correctAnswer: main.singletestArray[currentQuestion].answer,
      timetakenInsecs: main.timetakeninTest
    }
    queryService.submitAnswer(data)
      .then(function successCallback(response) {}, function errorCallback(response) {})
    selectedOption.checked = false;
    currentQuestion++;
    if (currentQuestion == totalQuestionAsked - 1) {
      nextButton.textContent = 'Finish';
    }
    if (currentQuestion == totalQuestionAsked) {
      container.style.display = 'none';
      clearTimeout(main.counttime);
      var testattemptData = {
        testgivenBy: main.user + " " + $routeParams.userId,
        testId: $routeParams.testId
      }
      queryService.testAttemptedBy(testattemptData)
        .then(function successCallback(response) {}, function errorCallback(response) {})

      var data = {
        userid: $routeParams.userId,
        testid: $routeParams.testId,
        score: score,
        timeTaken: main.timetakeninTest,
        totalCorrect: (score / 10),
        totalIncorrect: (10 - (score / 10))
      }
      queryService.submitTest(data)
        .then(function successCallback(response) {
          if (response.data.error === true) {
            alert(response.data.message);
          } else {
            main.performanceUserID = response.data.data.user;
            main.answerscorrect = response.data.data.totalCorrect;
            main.answerswrong = response.data.data.totalIncorrect;
            main.madeScore = response.data.data.score;
            main.timeTaken = response.data.data.timeTaken;
            $('.thisismodalforUserTestPerformance').modal('show');
          }
        }, function errorCallback(response) {
          alert("There was a problem");
        })
      return;
    }
    this.loadQuestion(currentQuestion);
  }



}]);

<link rel="stylesheet" href="../css/livetest.css">
<!-- W3 schools styles-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<div ng-controller="liveController as live">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
    <br/>
    <div class="container">
      <a class="navbar-brand" href="">
        <h2>
          <i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;Exam App Dashboard
      </a>
    </div>
    <br/>
  </nav>
  <div Style="color:white;font-weight:bold;font-size:2em; text-align:center;" id="test-time-left"></div>
  <div style="background: #F2F2F2;" id="quizContainer" class="container">
    <div class="title" style="text-align: center; font-weight:bold; font-size: 1.5em;">{{live.testheading}}</div>
    <div id="question" class="question" style="font-size: 2em; font-weight: bold;"></div>
    <label class="option">
            <input type="radio" name="option" value="1" />
            <span id="opt1"></span>
        </label>
    <label class="option">
            <input type="radio" name="option" value="2" />
            <span id="opt2"></span>
        </label>
    <label class="option">
            <input type="radio" name="option" value="3" />
            <span id="opt3"></span>
        </label>
    <label class="option">
            <input type="radio" name="option" value="4" />
            <span id="opt4"></span>
        </label>
    <button id="nextButton" class="next-btn" ng-click="live.nextQuestion()">Next Question </button>
  </div>
  <br/>



  <!-- Place to keep all the modals -->

  <!-- Modal -->
  <div class="modal fade thisismodalforlivetestwarning" id="modalfortestwarning" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div style="background-color: #4CAF50;" class="modal-header">
          <h4 align="center" class="modal-title">
            <span style="color:white;">: Please Read The instructions Carefully :</span>
          </h4>
        </div>
        <div class="modal-body">
          <ol>
            <li>You will be alloted 5 Minutes to Give Test, After which window will close Automatically.</li>
            <li>You can't go back after submitting the Answer for each Question.</li>
            <li>you can submit the Test before the finishing Time if you want but can't after the time finishes, It will Automatically be submitted.</li>
            <li>Please don't do cheating in test. Be fair to yourself for your true Assessment of skills.</li>
            <li>If you aggree with all the terms stated above you may proceed by clicking Start Button Below.</li>
          </ol>
          <h3 align="center">
            <strong>
                            <em>Best Of Luck!</em>
                        </strong>
          </h3>
        </div>
        <div style="background-color: #404549;" class="modal-footer">
          <button type="button" class="btn btn-success" ng-click="live.loadQuestion(0)">Start!</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-danger" id="returntotaketest">Return</button>
        </div>
      </div>
    </div>

  </div>



  <!-- MOdal for User Performance -->

  <!-- Modal -->
  <div class="modal fade thisismodalforUserTestPerformance" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div style="background-color: #4CAF50;" class="modal-header">
          <h4 align="center" class="modal-title">
            <span style="color:white;">: Your Score Card for the Test :</span>
          </h4>
        </div>
        <div class="modal-body">
          <div style="background-color: #404549;" class="modal-body">
            <a class=" list-group-item">User ID: {{live.performanceUserID}}</a>
            <a class=" list-group-item">Total Correct Answers: {{live.answerscorrect}}</a>
            <a class=" list-group-item">Total Wrong Answers: {{live.answerswrong}}</a>
            <a class=" list-group-item">Score Secured: {{live.madeScore}}</a>
            <a class=" list-group-item">Total Time Taken: {{live.timeTaken}} Seconds</a>

          </div>
          <h3 align="center">
            <strong>
                            <em>Thank You! For giving the Test...</em>
                        </strong>
          </h3>
        </div>
        <div style="background-color: #404549;" class="modal-footer">

          <button type="button" class="btn btn-danger" id="returntotaketest">Return</button>
        </div>
      </div>
    </div>

  </div>

动作发生在被注释行的 nextQuestion 函数中（用'//This line'注释）。我已尽力解释我的问题，如果需要可以上传更多代码。

任何帮助将不胜感激。

Answer 1

你可以这样做

var selectedOption = document.querySelector('input[type=radio]:checked');
    if (!selectedOption) {
      alert("Select An Answer First.");
      return;
    }
    //As selectedOption is actually an index we can use it to get the answer
    var answerValue = document.getElementById('opt'+ selectedOption);

    var answer = answerValue.textContent;