我正在尝试在我针对土星测验所做的 AngularJS 教程中添加我自己的旋转,将其从多项选择更改为填空测验。
我能够得到第一个答案来识别它是对还是错,但即使答案是正确的,下一个问题也总是返回错误。通过使用 console.log,我发现 AngularJS 无法识别更改后的输入值。它始终保留我在测验中输入的第一个值。
HTML
<div id="myQuiz" ng-controller="QuizController">
<h1>Test Your Knowledge:<span>Saturn</span></h1>
<div class="progress">
<div class="{{ ($index === activeQuestion) ? 'on' : 'off' }}
{{ (myQuestion.questionState === 'answered') ? 'answered' : 'unanswered' }}
{{ (myQuestion.correctness === 'correct') ? 'correct' : 'incorrect' }}"
ng-repeat="myQuestion in myQuestions">
</div>
</div>
<div class="intro {{ (activeQuestion > -1) ? 'inactive' : 'active' }}">
<h2>Welcome</h2>
<p>Click to begin to test your knowledge of Saturn.</p>
<p class="btn" ng-click="activeQuestion = 0">Begin</p>
</div>
<div class="question
{{ $index === activeQuestion ? 'active' : 'inactive' }}
{{ myQuestion.questionState === 'answered' ? 'answered' : 'unanswered' }}"
ng-repeat="myQuestion in myQuestions">
<p class="txt"> {{ myQuestion.instructions }} </p>
<div class="txt" ng-bind-html="myQuestion.question | trustAsHtml">
</div>
<p class="ans"
ng-class="{
correct:isCorrect($index, $index)}"
ng-click="checkAnswer($index, $index)">Check Answer
</p>
<div class="feedback">
<p ng-show="myQuestion.correctness === 'correct'"><strong>Correct</strong>.</p>
<p ng-show="myQuestion.correctness === 'incorrect'">Oops! That is not correct.</p>
<p> {{ myQuestion.feedback }} </p>
<div class="btn" ng-click="selectContinue()">Continue</div>
</div>
</div>
App.js
(function(){
var codeApp = angular.module('codeApp', ['ngSanitize']);
codeApp.controller('QuizController', ['$scope', '$http', "$sce", function($scope, $http, $sce){
$scope.score = 0;
$scope.activeQuestion = -1;
$scope.activeQuestionAnswered = 0;
$scope.percentage = 0;
$http.get('quiz_data.json').then(function(quizData){
$scope.myQuestions = quizData.data;
$scope.totalQuestions = $scope.myQuestions.length;
});
$scope.checkAnswer = function(qIndex,aIndex){
var questionState = $scope.myQuestions[qIndex].questionState;
if(questionState != 'answered') {
var userAnswer = document.getElementsByClassName("fillin")[0].value;
var correctAnswer = $scope.myQuestions[qIndex].questionAnswer;
$scope.myQuestions[qIndex].questionAnswer = correctAnswer;
if(userAnswer === correctAnswer){
$scope.myQuestions[qIndex].correctness = 'correct';
$scope.score += 1;
console.log('Correct!' + $scope.score);
}
else{
$scope.myQuestions[qIndex].correctness = 'incorrect';
console.log('Wrong!');
console.log(correctAnswer);
console.log(userAnswer);
console.log( document.getElementsByClassName("fillin")[0].value );
}
$scope.myQuestions[qIndex].questionState = 'answered';
}else{
console.log('Something is wrong');
}
}
$scope.selectContinue = function(){
return $scope.activeQuestion += 1;
}
$scope.createShareLinks = function(percentage){
var url = 'http://codifydesign.com';
var emailLink = '<input type="text" placeholder="hi" /><a class="btn email" href="mailto:?subject=Try to beat my quiz score!&body=I scored a '+percentage+'% on this quiz about Saturn. Try to beat my score at '+url+'">Email a friend</a>';
var twitterLink = '<a class="btn twitter" target="_blank" href="http://twitter.com/share?text=I scored a '+percentage+'% on this quiz about Saturn. Try to beat my score at&hashtags=SaturnQuiz&url='+url+'">Tweet your score</a>';
var newMarkup = emailLink + twitterLink;
return $sce.trustAsHtml(newMarkup);
}
}]).filter('trustAsHtml', [
'$sce',
function($sce) {
return function(value) {
return $sce.trustAsHtml(value);
}
}
]);
})();
data.json
[
{
"questionId": 0,
"question" : "Saturn is <input id='guess-input' class='fillin' ng-blur='clearValues()' type='text' name='\"six\"'> many planets from the sun?",
"questionAnswer" : "six"
},
{
"questionId": 1,
"question" : "Around Saturn are <input id='guess-input' class='fillin' ng-blur='clearValues()' type='text' name='\"rings\"'>",
"questionAnswer" : "rings"
}
]
最佳答案
您已将其硬编码为始终查找具有 fillin
类的元素的第一个实例。更改这两个实例...
document.getElementsByClassName("fillin")[0].value
...对此...
document.getElementsByClassName("fillin")[aIndex].value
...它应该开始为您工作。
关于javascript - 无法更新 AngularJS 输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50864795/