Fatal编程技术网
  • javascript/
  • Javascript 多选角应用程序-显示答案-

Javascript 多选角应用程序-显示答案-

javascript jquery html angularjs

Javascript 多选角应用程序-显示答案-,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我已经使用AngularJS开发了一个单页选择题测验web应用程序。我试图从数组列表中获得正确的答案，一旦用户在点击标签中的提交按钮后选择了错误的答案，就会显示出来。我知道这是一件简单的事情，我知道我在过度分析它，使它看起来比实际情况更复杂。我每次尝试都会显示数组列表中的所有选项选项，或者显示数组列表中的正确数字位置值，而不是单个正确答案。我对使用AngularJS还是个新手 HTML <!DOCTYPE html> <html ng-app="quizApp"> <

我已经使用AngularJS开发了一个单页选择题测验web应用程序。我试图从数组列表中获得正确的答案，一旦用户在点击标签中的提交按钮后选择了错误的答案，就会显示出来。我知道这是一件简单的事情，我知道我在过度分析它，使它看起来比实际情况更复杂。我每次尝试都会显示数组列表中的所有选项选项，或者显示数组列表中的正确数字位置值，而不是单个正确答案。我对使用AngularJS还是个新手

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>


基扎普
基扎普

模板

<div class="quiz-area" ng-show="inProgress">
<div ng-show="!quizOver">
    <h2 id="question">{{question}}</h2>
    <ul id="options">
        <li ng-repeat="option in options">
            <label>
                <input type="radio" name="answer" value="{{option}}">
                {{option}}
            </label>
        </li>
    </ul>
    <button ng-click="checkAnswer()" ng-show="answerMode">Submit</button>

            <div ng-show="!answerMode">
        <button ng-click="nextQuestion()" class="next-question">Next</button>
        <span ng-show="correctAns">That is correct!</span>
        <span ng-show="!correctAns">Sorry, that is an incorrect answer.</span>
    </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>


{{问题}

    

  • 
{{option}}

    • 


提交
下一个
没错！
对不起，这是一个错误的答案。
测验结束了
再玩一次
分数：{{Score}

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.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);
            if(q) {
                scope.question = q.question;
                scope.options = q.options;
                scope.answer = q.answer;
                scope.answerMode = true;
            } else {
                scope.quizOver = true;
            }
        };

        scope.checkAnswer = function() {
            if(!$('input[name=answer]:checked').length) return;

            var ans = $('input[name=answer]:checked').val();

            if(ans == scope.options[scope.answer]) {
                scope.score++;
                scope.correctAns = true;
            } else {
                scope.correctAns = false;
            }

            scope.answerMode = false;
        };

        scope.nextQuestion = function() {
            scope.id++;
            scope.getQuestion();
        }

        scope.reset();
    }
}
});

app.factory('quizFactory', function() {
var questions = [
    {
        question: "Which is the largest country in the world by population?",
        options: ["India", "USA", "China", "Russia"],
        answer: 2
    },
    {
        question: "When did the second world war end?",
        options: ["1945", "1939", "1944", "1942"],
        answer: 0
    },
    {
        question: "Which was the first country to issue paper currency?",
        options: ["USA", "France", "Italy", "China"],
        answer: 3
    },
    {
        question: "Which city hosted the 1996 Summer Olympics?",
        options: ["Atlanta", "Sydney", "Athens", "Beijing"],
        answer: 0
    },
    {   
        question: "Who invented telephone?",
        options: ["Albert Einstein", "Alexander Graham Bell", "Isaac Newton", "Marie Curie"],
        answer: 1
    }
];

return {
    getQuestion: function(id) {
        if(id < questions.length) {
            return questions[id];
        } else {
            return false;
        }
    }
};
});

var-app=angular.module（'quizApp'，[]）；
应用指令（“测验”，功能（quizFactory）{
返回{
限制：“AE”，
作用域：{}，
templateUrl:'template.html'，
链接：功能（范围、要素、属性）{
scope.start=函数（）{
scope.id=0；
scope.quizOver=false；
scope.inProgress=true；
scope.getQuestion（）；
};
scope.reset=函数（）{
scope.inProgress=false；
scope.score=0；
}
scope.getQuestion=函数（）{
var q=quizFactory.getQuestion（scope.id）；
if（q）{
scope.question=q.question；
scope.options=q.options；
scope.answer=q.answer；
scope.answerMode=true；
}否则{
scope.quizOver=true；
}
};
scope.checkAnswer=函数（）{
if（！$（'input[name=answer]：checked'）.length）返回；
var ans=$（'input[name=answer]：checked'）.val（）；
if（ans==scope.options[scope.answer]）{
score++；
scope.correctAns=true；
}否则{
scope.correctAns=false；
}
scope.answerMode=false；
};
scope.nextQuestion=函数（）{
scope.id++；
scope.getQuestion（）；
}
scope.reset（）；
}
}
});
app.factory（'quizFactory'，function（）{
变量问题=[
{
问题：“世界上人口最多的国家是哪个？”，
选项：[“印度”、“美国”、“中国”、“俄罗斯”]，
答复:二,
},
{
问题：“第二次世界大战何时结束？”，
选项：[“1945”、“1939”、“1944”、“1942”]，
答复:0
},
{
问题：“哪个国家是第一个发行纸币的？”，
选项：[“美国”、“法国”、“意大利”、“中国”]，
答复:3
},
{
问题：“1996年夏季奥运会由哪个城市主办？”，
选项：[“亚特兰大”、“悉尼”、“雅典”、“北京”]，
答复:0
},
{   
问题：“谁发明了电话？”，
选项：[“阿尔伯特·爱因斯坦”、“亚历山大·格雷厄姆·贝尔”、“艾萨克·牛顿”、“玛丽·居里”]，
答复:一,
}
];
返回{
getQuestion:函数（id）{
if（id