#javascript #angularjs
#javascript #angularjs
Вопрос:
Я хочу создать приложение для викторины с 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] amp;amp; $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 : где хранится массив вопросов и правильных ответов, а также функция 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;
}
}
}
})();
Комментарии:
1. Не могли бы вы, пожалуйста, уточнить вопрос подробнее — «Я пытался создать функцию случайных вопросов, но правильные ответы были стабильными. Это не сочетается с вопросами. ‘
2. Я хочу создать приложение для викторины с 10 случайными вопросами. Проблема в том, что я могу только перетасовывать вопросы и не могу перетасовать правильные ответы. Таким образом, независимо от того, какой вопрос, правильные ответы не меняются.
3. итак, как только вы получите вопрос, вы хотите изменить порядок ответов — например, первоначальный порядок — ABCD может измениться на ACBD или DCBA и т. Д
4. Да, это то, что я имею в виду
5. проверьте ответ ниже, если вы все еще не можете получить желаемый результат, дайте мне знать для получения полного решения.
Ответ №1:
Самый простой вариант — сохранить каждый правильный ответ в объекте вопроса, а не в отдельном массиве:
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. Я установил «ответ: 3» для всех вопросов в объекте quizQuestions и заменил «Правильные ответы» в index.html , results.js и quizMetrics.js с помощью «QuizQuestion[vm.activeQuestion].answer», но выдает ошибку: «ответ не определен». Я определил это как число, но оно все равно не сработало. :((
Ответ №2:
Итак, в методе, которым вы получаете свой рандомизированный вопрос, снова введите ответы, чтобы перетасовать его.
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));
Ссылка— Проверьте живую демонстрацию здесь