I am putting together a questionnaire. Each question has three options to choose from. Each object containing the question has another object named 'dependsOn'. An example would be that if "Yes" is selected on question 1 then the following two questions will show, otherwise they will be skipped. I appreciate any help, ideas, suggestions you may have for this small app. Here is a CodePen I put together: my codepen
<div class="main" ng-app="MyApp">
<div ng-controller="AppCtrl as q">
<h1>{{ q.title }}</h1>
<form name="collection" novalidate>
<div class="questionnaire">
<div class="questions">
<div class="question" ng-repeat="question in q.questions" ng-show="question.hrsQuestionOrderNumber === q.currentQuestion">
<h2>Question {{ question.hrsQuestionOrderNumber }} <span>of {{ q.questions.length }}</span></h2>
<p>
{{ question.descriptionLong }}
</p>
<ng-form name="subForm{{question.questionID}}" class="options">
<md-radio-group ng-model="question.hrsAnswerId" ng-change="q.watchForm(subForm{{ q.currentQuestion }})" required>
<md-radio-button ng-repeat="option in question.choiceModels" ng-value="option.description" required>
{{ option.description }}
</md-radio-button>
</md-radio-group>
</ng-form>
</div>
</div>
<nav class="clearfix">
<md-button class="md-primary md-raised" ng-click="q.questionChange('prev')" ng-disabled="q.prev">Previous</md-button>
<md-button class="md-primary md-raised" ng-click="q.questionChange('next')" ng-disabled="q.next">Next</md-button>
</nav>
</div>
</form>
Angular code:
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($timeout, $scope) {
const context = this;
context.title = 'Questionnaire with Questions Depending on Choices';
context.currentQuestion = 1;
context.next = true;
context.prev = true;
context.nextButton = true;
context.form = $scope.collection;
function disableButton () {
if (context.currentQuestion === 1) {
context.prev = true;
context.next = false;
} else {
context.prev = false;
context.next = false;
}
};
context.questionChange = function (go) {
if (go === 'prev') {
context.currentQuestion = context.currentQuestion - 1;
}
if (go === 'next') {
context.currentQuestion = context.currentQuestion + 1;
$timeout(function () {
context.next = true;
});
}
disableButton();
};
context.watchForm = function (currentForm) {
if (currentForm.$invalid === false) {
if (context.currentQuestion !== context.questions.length) {
context.next = false;
}
} else {
console.log('form NOT in scope');
}
};
context.questions = [
{
"questionID": 1,
"hrsQuestionOrderNumber": 1,
"descriptionLong": "Do you collect money from anyone (students, employees, or other sources)?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": null
},
{
"questionID": 2,
"hrsQuestionOrderNumber": 2,
"descriptionLong": "Are pre-numbered receipts given to the person paying money? If individual receipts are not given, do you use an approved PBO/S&I collection document?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 1,
"hrsAnswerId": 1
}
},
{
"questionID": 3,
"hrsQuestionOrderNumber": 3,
"descriptionLong": "Do cash receipts or logs contain sufficient detail to accurately describe the nature of the transaction?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 1,
"hrsAnswerId": 1
}
},
{
"questionID": 4,
"hrsQuestionOrderNumber": 4,
"descriptionLong": "Do receipts or logs identify individuals and not groups of individuals (such as a class)?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": null
},
{
"questionID": 5,
"hrsQuestionOrderNumber": 5,
"descriptionLong": "For money collected, is it always deposited and never used for purchases?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 4,
"hrsAnswerId": 1
}
},
{
"questionID": 6,
"hrsQuestionOrderNumber": 6,
"descriptionLong": "For money not yet deposited, is it kept in a secure location?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 4,
"hrsAnswerId": 1
}
},
{
"questionID": 7,
"hrsQuestionOrderNumber": 7,
"descriptionLong": "Do you keep a file of original deposit documentation—including cash receipts or logs—together?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None / Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 4,
"hrsAnswerId": 1
}
}
];
})
.config(function($mdIconProvider) {
});