个人中心
gpt4 book ai didi

javascript - AngularJS : Decision tree implementation

转载 作者：行者123 更新时间：2023-12-03 05:57:34 26 4
gpt4 key购买 nike

我正在尝试编写一个测验应用程序。下面是源代码。目前它的工作原理如下:

  1. 点击开始测验后，第一个问题就会出现。
  2. 用户选择了正确的选项，然后说出问题 3。
  3. 如果用户选择了错误的选项，则会转到另一个问题，例如问题 4。

等等...

请检查链接http://plnkr.co/edit/sYG9jjX0JATbQhJ1hNf6

我想要实现的目标如下:

  1. 点击开始测验后，第一个问题就会出现。
  2. 用户选择了正确的选项，然后说出问题 3。此时，屏幕上出现两个问题(第一和第三)。
  3. 现在假设用户更改了第一个问题中的选项并选择了任何其他答案，则第三个问题应该消失并应显示另一个问题(例如问题 4)。
  4. 如果用户已经浏览了 3-4 个问题，然后更改了第一个问题的选项，则仅应显示下一个可能的问题，而不是显示所有 3-4 个问题。

请找到以下代码:

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>

模板.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;
     }
     };
   });

最佳答案

像这样更改您的 checkAnswer 函数 

        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();
            }
          };

它会让你理解，如何做..谢谢

关于javascript - AngularJS : Decision tree implementation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39861418/

26 4 0
文章推荐： .net - 在部署环境之间管理复杂的 Web.Config 文件
文章推荐： azure - Set-AzureRmCurrentStorageAccount 抛出错误资源组未找到
文章推荐： winapi - Win32 窗口所有者与窗口父级？
文章推荐： c# - 如何在 Azure WebApp 上将 mp3 解码为 wav
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com