我正在尝试做一个简单的测验。 到目前为止，我已经构建了随机调用一系列可能问题的代码。现在我想让用户提交选中的单选框并检查提交的选项是否正确。
我想要检查这一点，我需要将提交的选项与数据集中的“正确”答案进行比较。在数据集(字典)中，我有“类别”，“不正确”，“正确”等。因此，只有当提交的选项等于“正确”句子时，用户才会收到“正确答案”的消息。
(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.ANSWER",
"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();
});
}
<!-- add correct answer to incorrect answer array and srot it randomly.-->
function random() {
for (var key in $scope.questions) {
$scope.questions[key].Incorrect.push($scope.questions[key].Correct);
$scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect);
}
}
random();
});
})(angular);
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Click me");
x.appendChild(t);
document.body.appendChild(x);
}<!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">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="About_us.html"><span class="glyphicon glyphicon-check"></span> ABOUT US</a></li>
<li><a href="Contact_Info.html"><span class="glyphicon glyphicon-envelope"></span>CONTACT INFO</a></li>
</ul>
</div>
</div>
</div>
</nav>
<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" onsubmit="TestFunction()">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</div>
</form>
</body>最佳答案
首先，您需要在单选按钮中使用ng-model，然后您可以使用ng-submit检查所选按钮是否在index 等于正确答案，简单如下:
(function(angular) {
'use strict';
angular
.module('demo', [])
.controller('repeatController', repeatController);
function repeatController($scope) {
$scope.radio = [];
$scope.message = [];
$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.ANSWER",
"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.push($scope.questions[key].Correct);
$scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect);
}
}
random();
$scope.submit = function(index) {
if ($scope.questions[index].Correct == $scope.radio.selected[index]) {
$scope.message[index] = "Correct";
} else {
$scope.message[index] = "Incorrect";
}
}
}
})(angular);<!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">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="About_us.html"><span class="glyphicon glyphicon-check"></span> ABOUT US</a></li>
<li><a href="Contact_Info.html"><span class="glyphicon glyphicon-envelope"></span>CONTACT INFO</a></li>
</ul>
</div>
</div>
</div>
</nav>
<form name="form" novalidate ng-repeat="question in questions" ng-submit="submit($index)">
<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" ng-model="radio.selected[$parent.$index]" ng-value="incorrect_answer" name="radio{{$parent.$index}}"> {{incorrect_answer}}
</label>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Submit">
<span ng-class="{ 'text-success': message[$index] == 'Correct', 'text-danger': message[$index] == 'Incorrect' }" ng-if="message[$index]" ng-bind="message[$index]"></span>
</div>
</div>
</form>
</body>关于javascript - 如何检查提交的单选按钮是否包含正确答案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38491023/