As I venture into customizing an AngularJS tutorial on a Saturn Quiz, I am transforming it from multiple choice to a fill-in-the-blank quiz.

The challenge I face is that the first answer registers as correct or incorrect, but subsequent questions always show up as incorrect even when the answer is right. Through console.log, I discovered that although the input value changes, AngularJS does not recognize it. It keeps holding onto the initial value I entered in the quiz.

Plunkr Demo

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!&amp;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&amp;hashtags=SaturnQuiz&amp;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"
    }
]