-1
Я пытаюсь написать тест app.Below является источником code.Currently он работает как ниже:AngularJS: Решение по реализации дерева
- По щелчку начать викторину, первые вопросы, показывает вверх.
- Пользователь выбирает правильный вариант и движется сказать номер вопроса 3.
- если пользователь выбирает неправильный вариант, он переходит к другому вопросу сказать номер вопроса 4.
и так далее ...
Пожалуйста, проверьте ссылку http://plnkr.co/edit/sYG9jjX0JATbQhJ1hNf6
То, что я хочу достичь, как показано ниже:
- В начале опроса Click start появляются первые вопросы.
- Пользователь выбирает правильный вариант, и он перемещается, чтобы задать номер вопроса 3. Теперь на экране есть два вопроса (1-й и 3-й).
- Теперь скажите, что пользователь изменил параметр в 1-м вопросе и выбрал любой другой ответ, 3-й вопрос должен быть выключен и должен быть отображен другой вопрос (например, номер вопроса 4).
- Если пользователь уже просмотрел 3-4 вопроса, а затем изменил вариант, например, первый вопрос, тогда должен отображаться только следующий возможный вопрос, а не все 3-4 вопроса.
Вы найдете ниже код:
index.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>
</html>
template.html
<div class="quiz-area" ng-show="inProgress">
<div ng-show="!quizOver" ng-repeat="option1 in question" ng-init="parentIndex = $index">
<h2 id="question">{{option1.question}}</h2>
<div id="options">
<div ng-model="selected" ng-repeat="option in option1.options">
<label>
<input type="radio" ng-value="option.name" ng-model="option.selectedRadio" name="myName{{$parent.$index}}">
{{option.name}}
</label>
</div>
</div>
<div>
<button ng-click="checkAnswer(option1)" class="next-question">Next</button>
</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>
</div>
<div class="intro" ng-show="!inProgress">
<p>Welcome to the QuizApp</p>
<button id="startQuiz" ng-click="start()">Start the Quiz</button>
</div>
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.score = 0;
scope.question = [];
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);
console.log(q);
if (q) {
scope.object = {
'question': q.question,
'options': q.options,
'answer': q.answer,
'trueQId': q.trueQId,
'falseQid': q.falseQid,
'answerMode': true,
'answers': q.answers
}
scope.question.push(scope.object);
console.log(scope.question);
} else {
scope.quizOver = true;
}
};
scope.checkAnswer = function(question) {
var options = question.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selectedRadio) {
var ans = options[i].selectedRadio;
}
}
console.log(question.options[question.answer]);
if (question.options[question.answer].name == ans) {
console.log(ans);
scope.score++;
scope.question[scope.id].answerMode = false;
scope.answerMode = false;
scope.id++;
scope.getQuestion();
}
};
}
}
});
app.factory('quizFactory', function() {
var questions = [{
question: "Which is the largest country in the world by population?",
options: [{
name: "India",
selected: false
}, {
name: "USA",
selected: false
}, {
name: "China",
selected: false
}, {
name: "Russia",
selected: false
}],
answer: 2,
trueQId: 1,
falseQid: 3,
answers: ""
}, {
question: "When did the second world war end?",
options: [{
name: "1945",
selected: false
}, {
name: "1934",
selected: false
}, {
name: "1993",
selected: false
}, {
name: "2002",
selected: false
}],
answer: 0,
trueQId: 2,
falseQid: 3
}, {
question: "Which was the first country to issue paper currency?",
options: [{
name: "USA",
selected: false
}, {
name: "France",
selected: false
}, {
name: "Italy",
selected: false
}, {
name: "China",
selected: false
}],
answer: 3,
trueQId: 3,
falseQid: 4
}];
return {
getQuestion: function(id) {
console.log(questions);
if (id < questions.length) {
return questions[id];
} else {
return false;
}
},
updateQuestion: function(id, ans) {
questions[id].answers = ans;
}
};
});
Что вопрос? Что такое код, который вам не нужен? Какой код вы не делаете, чего хотите? См. [Ask] для получения дополнительной информации о том, как задать хороший вопрос, и вы можете посмотреть, как создать [mcve]. –
Добавлен код в плункер и обновленная ссылка в вышеупомянутом вопросе, чтобы воспроизвести сценарий. Вопрос: -> В настоящее время на основе trueQId и falseQid, это вопрос, который должен отображать следующий вопрос, который работает нормально, но я хочу - > если пользователь меняет свой вариант, то соответствующий вопрос (который настроен с использованием trueQId и falseQid) должен быть отображен, и следующий вопрос, который пришел на выбор предыдущей опции, должен исчезнуть. – user2603985
Пример: при выборе Китая (истинный ответ) вопрос 1 (trueQId), т. Е. «Когда закончилась вторая мировая война?» , но теперь, если пользователь изменит вариант в США (false ans), тогда вопрос 3 (falseQId), т. е. «В каком городе проходили летние Олимпийские игры 1996 года?» должен прийти, и вопрос 1 должен исчезнуть. – user2603985