我想创建一个随机包含10个问题的测验应用程序。问题是，我只能打乱问题，而不能打乱正确的答案。因此，无论是什么问题，正确的答案都不会改变。
index.html：：如果所选问题的索引等于correctAnswer数组的索引，则结果将是正确的
<div class="col-xs-7">
<h2>Results:</h2>
<div class="btn-toolbar">
<button class="btn"
ng-repeat="question in results.dataService.quizQuestions"
ng-class="{'btn-success': question.correct, 'btn-danger': !question.correct}"
ng-click="results.setActiveQuestion($index)">
<span class="glyphicon"
ng-class="{'glyphicon-ok': question.correct, 'glyphicon-remove': !question.correct}"></span>
</button>
</div>
<div class="row">
<div class="col-xs-12 top-buffer">
<h2>You scored {{results.quizMetrics.numCorrect}} / {{results.dataService.quizQuestions.length}}</h2>
<h2><strong>{{results.calculatePerc() | number:2 }}%</strong></h2>
</div>
</div>
<div class="row">
<h3>Questions:</h3>
<div class="col-12"></div>
<div class="well well-sm">
<div class="row">
<div class="col-xs-12">
<h4> {{results.activeQuestion + 1 + "." + results.dataService.quizQuestions[results.activeQuestion].text}} </h4>
<div class="row"
ng-if="results.dataService.quizQuestions[results.activeQuestion].type === 'text'">
<div class="col-sm-6" ng-repeat="answer in results.dataService.quizQuestions[results.activeQuestion].possibilities">
<h4 class="answer"
ng-class="results.getAnswerClass($index)">
{{answer.answer}}
<p class="pull-right" ng-show="$index !== results.quizMetrics.correctAnswers[results.activeQuestion] && $index === results.dataService.quizQuestions[results.activeQuestion].selected">Your answer</p>
<p class="pull-right" ng-show="$index === results.quizMetrics.correctAnswers[results.activeQuestion]">Right answer</p>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
dataservice.js：是问题数组，correctAnswers和questionRandomize函数的存储位置
(function(){
angular
.module("quizApp")
.factory("DataService", DataFactory);
function DataFactory(){
var dataObj = {
quizQuestions: quizQuestions,
correctAnswers: correctAnswers
};
return dataObj;
}
var correctAnswers = [1, 2, 3, 0, 2, 0, 3, 2, 0, 3];
var quizQuestions = [
{
type: "text",
text: "Mit was ist der Tennisball umgeben?",
possibilities: [
{
answer: "Mit einer Nylonummantelung"
},
{
answer: "Mit einer Schicht Eichhörnchenhaaren"
},
{
answer: "Mit einer Filzschicht"
},
{
answer: "Mit einer speziellen Gummischicht"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Das flächenmäßig kleinste Bundesland heißt...",
possibilities: [
{
answer: "Berlin"
},
{
answer: "Hamburg"
},
{
answer: "München"
},
{
answer: "Leipzig"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Was ist die Goldener Himbeere?",
possibilities: [
{
answer: "ein Preis für die schlechteste Leistung innerhalb eines Filmjahres"
},
{
answer: "eine Nachspeise aus Russland"
},
{
answer: "das teuerste Schmuckstück der Welt"
},
{
answer: "das Symbol einer Sekte"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Welcher deutsche Herrscher trug den Beinamen der Große?",
possibilities: [
{
answer: "Friedrich der I. von Preußen"
},
{
answer: "Friedrich der III. von Sachsen"
},
{
answer: "Friedrich II. von Preußen"
},
{
answer: "Friedrich der III. von Österreich"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Welcher Pilz ist einer der giftigsten der Welt?",
possibilities: [
{
answer: "der Grüne Knollenblätterpilz"
},
{
answer: "der Gemeine Kartoffelbovist"
},
{
answer: "der Fliegenpilz"
},
{
answer: "der Satansröhrling"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Welche Gürtelfarbe existiert nicht im Kampfsport Karate?",
possibilities: [
{
answer: "schwarz"
},
{
answer: "weiß"
},
{
answer: "Rot"
},
{
answer: "blau"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Welche Insel gehört nicht zu den Balearischen Inseln?",
possibilities: [
{
answer: "Ibiza"
},
{
answer: "Cabrera"
},
{
answer: "Formentera"
},
{
answer: "Gran Canaria"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Welcher Schauspieler hat nicht in einem James Bond-Film mitgespielt?",
possibilities: [
{
answer: "Timothy Dalton"
},
{
answer: "Daniel Craig"
},
{
answer: "Leonardo DiCaprio"
},
{
answer: "Javier Bardem"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Farbe von einem Baum?",
possibilities: [
{
answer: "lila"
},
{
answer: "grün"
},
{
answer: "rosa"
},
{
answer: "grau"
}
],
selected: null,
correct: null
},
{
type: "text",
text: "Einen Feinschmecker nennt man auch ...",
possibilities: [
{
answer: "Gourmet."
},
{
answer: "Genießer."
},
{
answer: "Gourmed."
},
{
answer: "Leckermäulchen."
}
],
selected: null,
correct: null
}
];
quizQuestions = randomize(quizQuestions);
function randomize (quizQuestions) {
var index;
var temp;
for (var i = quizQuestions.length - 1; i > 0; i--) {
//get random number
index = Math.floor((Math.random() * i));
//swapping
temp = quizQuestions[index];
quizQuestions[index] = quizQuestions[i];
quizQuestions[i] = temp;
}
//edit to pass the obj back to the function
return quizQuestions;
}
})();
quizMetrics.js：：markQuiz函数标记答案是否正确
(function () {
angular.module("quizApp").factory("quizMetrics", QuizMetrics);
QuizMetrics.$inject = ["DataService"];
function QuizMetrics(DataService) {
var quizObj = {
correctAnswers: [],
markQuiz: markQuiz,
numCorrect: 0,
};
return quizObj;
function markQuiz() {
quizObj.correctAnswers = DataService.correctAnswers;
for (var i = 0; i < DataService.quizQuestions.length; i++) {
if (
DataService.quizQuestions[i].selected ===
DataService.correctAnswers[i]
) {
DataService.quizQuestions[i].correct = true;
quizObj.numCorrect++;
} else {
DataService.quizQuestions[i].correct = false;
}
}
}
}
})();
quiz.js：
(function () {
angular.module("quizApp").controller("quizCtrl", QuizController);
QuizController.$inject = ["quizMetrics", "DataService"];
function QuizController(quizMetrics, DataService) {
var vm = this;
vm.quizMetrics = quizMetrics;
vm.dataService = DataService;
vm.questionAnswered = questionAnswered;
vm.setActiveQuestion = setActiveQuestion;
vm.selectAnswer = selectAnswer;
vm.finaliseAnswers = finaliseAnswers;
vm.activeQuestion = 0;
vm.error = false;
vm.finalise = false;
var numQuestionsAnswered = 0;
function setActiveQuestion(index) {
if (index === undefined) {
var breakOut = false;
var quizLength = DataService.quizQuestions.length - 1;
while (!breakOut) {
vm.activeQuestion =
vm.activeQuestion < quizLength ? ++vm.activeQuestion : 0;
if (vm.activeQuestion === 0) {
vm.error = true;
}
if (DataService.quizQuestions[vm.activeQuestion].selected === null) {
breakOut = true;
}
}
} else {
vm.activeQuestion = index;
}
}
function questionAnswered() {
var quizLength = DataService.quizQuestions.length;
if (DataService.quizQuestions[vm.activeQuestion].selected !== null) {
numQuestionsAnswered++;
if (numQuestionsAnswered >= quizLength) {
for (var i = 0; i < quizLength; i++) {
if (DataService.quizQuestions[i].selected === null) {
setActiveQuestion(i);
return;
}
}
vm.error = false;
vm.finalise = true;
return;
}
}
vm.setActiveQuestion();
}
function selectAnswer(index) {
DataService.quizQuestions[vm.activeQuestion].selected = index;
}
function finaliseAnswers(){
vm.finalise = false;
numQuestionsAnswered = 0;
vm.activeQuestion = 0;
quizMetrics.markQuiz();
quizMetrics.changeState("quiz", false);
quizMetrics.changeState("results", true);
}
}
})();
results.js：
(function(){
angular
.module("quizApp")
.controller("resultsCtrl", ResultsController);
ResultsController.$inject = ['quizMetrics', 'DataService'];
function ResultsController(quizMetrics, DataService){
var vm = this;
vm.quizMetrics = quizMetrics;
vm.dataService = DataService;
vm.getAnswerClass = getAnswerClass;
vm.setActiveQuestion = setActiveQuestion;
vm.reset = reset;
vm.calculatePerc = calculatePerc;
vm.activeQuestion = 0;
function calculatePerc(){
return quizMetrics.numCorrect / DataService.quizQuestions.length * 100;
}
function setActiveQuestion(index){
vm.activeQuestion = index;
}
function getAnswerClass(index){
answer.selected = true;
if(index === quizMetrics.correctAnswers[vm.activeQuestion]){
return "bg-success";
}else if(index === DataService.quizQuestions[vm.activeQuestion].selected){
return "bg-danger";
}
}
function reset(){
quizMetrics.changeState("results", false);
quizMetrics.numCorrect = 0;
for(var i = 0; i < DataService.quizQuestions.length; i++){
var data = DataService.quizQuestions[i]; //binding the current question to data to keep code clean
data.selected = null;
data.correct = null;
}
}
}
})();
答案 0 :(得分：0)
最简单的选择是将每个正确答案存储在问题对象中，而不是存储在单独的数组中：
var quizQuestions = [
{
type: "text",
text: "Mit was ist der Tennisball umgeben?",
answer: 3,
possibilities: [
{
answer: "Mit einer Nylonummantelung"
},
{
answer: "Mit einer Schicht Eichhörnchenhaaren"
},
{
answer: "Mit einer Filzschicht"
},
{
answer: "Mit einer speziellen Gummischicht"
}
],
selected: null,
correct: null
},
然后重新排列数组后，答案仍然是正确的对象。
答案 1 :(得分：0)
因此，在方法中，您会得到随机的问题，请再次输入答案以将其打乱。
function shuffle(arra1) {
var ctr = arra1.length, temp, index;
// While there are elements in the array
while (ctr > 0) {
// Pick a random index
index = Math.floor(Math.random() * ctr);
// Decrease ctr by 1
ctr--;
// And swap the last element with it
temp = arra1[ctr];
arra1[ctr] = arra1[index];
arra1[index] = temp;
}
return arra1;
}
var myArray = [ {
answer: "A"
},
{
answer: "B"
},
{
answer: "C"
},
{
answer: "D"
}
];
console.log(shuffle(myArray));
Reference-在此处查看实时演示