AngularJS : Decision tree implementation

2019-09-21 03:03发布

站内问答 / JavaScript
1305 1 5

I am trying to write a quiz app.Below is the source code.Currently it is working like as below :

  1. On Click start Quiz,first questions shows up.
  2. User selects correct option and it moves to say question number 3.
  3. if User selects wrong option,it moves to another question say question number 4.

and so on...

Please check link http://plnkr.co/edit/sYG9jjX0JATbQhJ1hNf6

What I want to achieve is as below :

  1. On Click start Quiz,first questions shows up.
  2. User selects correct option and it moves to say question number 3. Now at this time,there are two questions on the screen(1st and 3rd).
  3. Now say user changed the option in 1st question and selected any other answer,3rd question should go off and another question(say question number 4) should be displayed.
  4. If user has already browsed through 3-4 questions and then changes option of say first question then only next possible question should be displayed and not all 3-4 questions.

Please find below code :

index.html

<!DOCTYPE html>
<html ng-app="quizApp">
<head>
  <meta charset="utf-8" />
  <title>QuizApp</title>
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div class="container">
    <h1 class="title">QuizApp</h1>
    <quiz/>
  </div>
</body>

</html>

template.html

<div class="quiz-area" ng-show="inProgress">
 <div ng-show="!quizOver" ng-repeat="option1 in question" ng-init="parentIndex = $index">
  <h2 id="question">{{option1.question}}</h2>
  <div id="options">
     <div ng-model="selected" ng-repeat="option in option1.options">
        <label>
        <input type="radio" ng-value="option.name" ng-model="option.selectedRadio" name="myName{{$parent.$index}}">
        {{option.name}}
        </label>
     </div>
  </div>
  <div>
     <button ng-click="checkAnswer(option1)" class="next-question">Next</button>
  </div>
</div>
 <div ng-show="quizOver">
  <h2>Quiz is over</h2>
    <button ng-click="reset()">Play again</button>
 </div>
    <div id="score">
     Score: {{score}}
    </div>
 </div>
 <div class="intro" ng-show="!inProgress">
  <p>Welcome to the QuizApp</p>
   <button id="startQuiz" ng-click="start()">Start the Quiz</button>
  </div>

app.js

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

  app.directive('quiz', function(quizFactory) {
    return {
    restrict: 'AE',
    scope: {},
    templateUrl: 'template.html',
    link: function(scope, elem, attrs) {
        scope.start = function() {
            scope.id = 0;
            scope.score = 0;
            scope.question = [];
            scope.quizOver = false;
            scope.inProgress = true;
            scope.getQuestion();
        };
        scope.reset = function() {
            scope.inProgress = false;
            scope.score = 0;
        }
        scope.getQuestion = function() {
            var q = quizFactory.getQuestion(scope.id);
            console.log(q);
            if (q) {
                scope.object = {
                    'question': q.question,
                    'options': q.options,
                    'answer': q.answer,
                    'trueQId': q.trueQId,
                    'falseQid': q.falseQid,
                    'answerMode': true,
                    'answers': q.answers
                }

                scope.question.push(scope.object);
                console.log(scope.question);
            } else {
                scope.quizOver = true;
            }
        };

        scope.checkAnswer = function(question) {
            var options = question.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selectedRadio) {
                    var ans = options[i].selectedRadio;
                }
            }
            console.log(question.options[question.answer]);
            if (question.options[question.answer].name == ans) {
                console.log(ans);
                scope.score++;
                scope.question[scope.id].answerMode = false;
                scope.answerMode = false;
                scope.id++;
                scope.getQuestion();
            }
          };
        }
       }
      });

  app.factory('quizFactory', function() {
  var questions = [{
    question: "Which is the largest country in the world by population?",
    options: [{
        name: "India",
        selected: false
    }, {
        name: "USA",
        selected: false
    }, {
        name: "China",
        selected: false
    }, {
        name: "Russia",
        selected: false
    }],
    answer: 2,
    trueQId: 1,
    falseQid: 3,
    answers: ""
}, {
    question: "When did the second world war end?",
    options: [{
        name: "1945",
        selected: false
    }, {
        name: "1934",
        selected: false
    }, {
        name: "1993",
        selected: false
    }, {
        name: "2002",
        selected: false
    }],
    answer: 0,
    trueQId: 2,
    falseQid: 3
}, {
    question: "Which was the first country to issue paper currency?",
    options: [{
        name: "USA",
        selected: false
    }, {
        name: "France",
        selected: false
    }, {
        name: "Italy",
        selected: false
    }, {
        name: "China",
        selected: false
    }],
    answer: 3,
    trueQId: 3,
    falseQid: 4
}];

return {
    getQuestion: function(id) {
        console.log(questions);
        if (id < questions.length) {
            return questions[id];
        } else {
            return false;
        }
       },
      updateQuestion: function(id, ans) {
        questions[id].answers = ans;
     }
     };
   });

1条回答
手持菜刀，她持情操
2楼-- · 2019-09-21 03:23

Change Your checkAnswer function like this 

        scope.checkAnswer = function(question) {
            console.log(question);
            var options = question.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selectedRadio) {
                    var ans = options[i].selectedRadio;
                }
            }
            console.log(question.options[question.answer]);
            if (question.options[question.answer].name == ans) {
                console.log(scope.id);
                scope.score++;
                scope.question[scope.id].answerMode = false;
                scope.answerMode = false;
                scope.id++;
                scope.getQuestion();
            }else{
                scope.question=scope.question.slice(0,question.trueQId);
                console.log(scope.question);
                scope.id=question.falseQid-1;
                scope.getQuestion();
            }
          };

It will give you understanding ,How to do it .. Thanks

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)