我正在尝试进行简单的语法测验,但我在使用ng-repeat
时无法确定如何随机排序数组。我想同时展示"正确"句子和"不正确"句子并希望它们随机排序。
您可以查看我的code
&&下面data
:
(function(angular) {
'use strict';
angular.module('demo', ['ngAnimate'])
.controller('repeatController', function($scope) {
$scope.random = function() {
return 0.5 - Math.random();
};
$scope.questions = {
"0": {
"Category": "Commas",
"Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.",
"Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"",
"Incorrect": [
"\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"",
"Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.",
"Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)."
],
"Question": "Fix the comma splice.",
"Rule": "comma splice\n"
},
"1": {
"Category": "Commas",
"Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.",
"Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
"Incorrect": [
"Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.",
"\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
"\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\""
],
"Question": "Fix the comma splice.",
"Rule": "comma splice\n"
}
};
});
})(window.angular);

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="demo">
<div ng-controller="repeatController">
<form ng-repeat="question in questions">
<div class="well"><b> QUESTION: {{question.Question}}</b>
<br> Category: {{question.Category}} </div>
<div ng-repeat="incorrect_answer in question.Incorrect">
<input type="radio" name="radio{{$parent.$index}}" value="{{incorrect_answer}}">{{incorrect_answer}}</input>
</div>
<div>
<input type="radio">{{question.Correct}} </input>
</div>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
&#13;
另外,如果你能为我提供使用方式&#34;提交&#34;按钮找到正确的答案,这将是美好的!现在,我不知道如何找出方法来检查提交的答案是否等于&#34;正确&#34;之一。
答案 0 :(得分:1)
有一些错误:
<input>
是自动关闭标记;
您忘记在视图中致电function
,如下所示:
<div ng-repeat="incorrect_answer in random(question.Incorrect)">
function
:$scope.random = function(array) {
return array.sort(function() {
return .5 - Math.random();
});
}
(function(angular) {
'use strict';
angular.module('demo', [])
.controller('repeatController', function($scope) {
$scope.questions = {
"0": {
"Category": "Commas",
"Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.",
"Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"",
"Incorrect": [
"\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"",
"Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.",
"Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)."
],
"Question": "Fix the comma splice.",
"Rule": "comma splice\n"
},
"1": {
"Category": "Commas",
"Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.",
"Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
"Incorrect": [
"Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.",
"\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
"\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\""
],
"Question": "Fix the comma splice.",
"Rule": "comma splice\n"
}
};
function sort(array) {
return array.sort(function() {
return .5 - Math.random();
});
}
function random() {
for (var key in $scope.questions) {
$scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect);
}
}
random();
});
})(angular);
&#13;
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="repeatController">
<form ng-repeat="question in questions">
<div class="col-md-12">
<div class="well"><b> QUESTION: {{question.Question}}</b>
<br> Category: {{question.Category}} </div>
<div class="radio" ng-repeat="incorrect_answer in question.Incorrect">
<label>
<input type="radio" name="radio{{$parent.$index}}" value="{{incorrect_answer}}"> {{incorrect_answer}}
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio"> {{question.Correct}}
</label>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</div>
</form>
</body>
</html>
&#13;
修改强>
正如 @charlietfl 指出的那样,最好循环整个对象并在控制器中将array
洗牌一次,以防止摘要< / em>问题。
如果您在一个独特的数组中混合所有问题(正确和错误),我认为处理您的商品会更好。
答案 1 :(得分:0)
您可以创建可能答案的列表,随机播放列表并循环播放。您还可以找到正确答案的字段。因此,不要从列表中排除正确答案,而是将它们与其他答案一起包括在内,然后使用knuth之类的算法对其进行随机播放。所以你的模型看起来像这样:
$scope.model = {
randomize: function (arr) {
return knuthShuffle(arr.slice(0));
},
questions: [
{
id: 1,
title: 'Title of the question',
possibleAnswers: [{ name: 'Tom' }, { name: 'John' }, { name: 'Kim' }, { name: 'Tim' }],
correctAnswer: { name: 'John' }
}
]
};
然后在您的视图中,您可以执行以下操作:
<ul>
<li ng-repeat="question in model.questions">
<ul>
<li ng-repeat="possibleAnswer in model.randomize(question.possibleAnswers)">
{{possibleAnswer}}
</li>
</ul>
</li>
</ul>
并验证答案,您可以使用字段存储所选答案并将其传递给后端:
selectedAnswer: {'name': 'John'}
控制器上的方法然后会调用您的服务:
vm.verifyAnswer(model.selectedAnswer, correctAnswer)
答案 2 :(得分:0)
我认为你必须创建一系列可能的答案和正确答案,并使用像https://github.com/coolaj86/knuth-shuffle这样的随机算法
或者您可以使用以下帖子中指定的方法。
ng-repeat changing sort order on all items when new item added to model
提交数据时,您可以通过多种方式进行验证。
我希望它可以帮到你。